payload-lucide-picker
Version:
A custom field for Payload CMS that allows you to select and configure Lucide icons in your admin panel
1,225 lines • 43.1 kB
JavaScript
"use strict";
"use client";
function _array_like_to_array(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
return arr2;
}
function _array_with_holes(arr) {
if (Array.isArray(arr)) return arr;
}
function _define_property(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _iterable_to_array_limit(arr, i) {
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null) return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally{
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally{
if (_d) throw _e;
}
}
return _arr;
}
function _non_iterable_rest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _object_spread(target) {
for(var i = 1; i < arguments.length; i++){
var source = arguments[i] != null ? arguments[i] : {};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === "function") {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function(key) {
_define_property(target, key, source[key]);
});
}
return target;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function(sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _object_spread_props(target, source) {
source = source != null ? source : {};
if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function(key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
return target;
}
function _object_without_properties(source, excluded) {
if (source == null) return {};
var target = _object_without_properties_loose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for(i = 0; i < sourceSymbolKeys.length; i++){
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function _object_without_properties_loose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for(i = 0; i < sourceKeys.length; i++){
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _sliced_to_array(arr, i) {
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
}
function _type_of(obj) {
"@swc/helpers - typeof";
return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
}
function _unsupported_iterable_to_array(o, minLen) {
if (!o) return;
if (typeof o === "string") return _array_like_to_array(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(n);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
}
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = function(target, all) {
for(var name in all)__defProp(target, name, {
get: all[name],
enumerable: true
});
};
var __copyProps = function(to, from, except, desc) {
if (from && (typeof from === "undefined" ? "undefined" : _type_of(from)) === "object" || typeof from === "function") {
var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
try {
var _loop = function() {
var key = _step.value;
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
get: function() {
return from[key];
},
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
});
};
for(var _iterator = __getOwnPropNames(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true)_loop();
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally{
try {
if (!_iteratorNormalCompletion && _iterator.return != null) {
_iterator.return();
}
} finally{
if (_didIteratorError) {
throw _iteratorError;
}
}
}
}
return to;
};
var __toESM = function(mod, isNodeMode, target) {
return target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
value: mod,
enumerable: true
}) : target, mod);
};
var __toCommonJS = function(mod) {
return __copyProps(__defProp({}, "__esModule", {
value: true
}), mod);
};
// src/fields/component/index.tsx
var component_exports = {};
__export(component_exports, {
IconSelectField: function() {
return IconSelectField;
},
default: function() {
return component_default;
}
});
module.exports = __toCommonJS(component_exports);
var import_react = __toESM(require("react"), 1);
var import_ui = require("@payloadcms/ui");
var import_dynamicIconImports = __toESM(require("lucide-react/dynamicIconImports"), 1);
var import_dynamic = __toESM(require("next/dynamic"), 1);
var PREDEFINED_SIZES = [
16,
20,
24,
32,
40,
48,
64
];
var PREDEFINED_STROKE_WIDTHS = [
0.5,
1,
1.5,
2,
2.5,
3
];
var COLOR_PALETTE = [
{
value: "currentColor",
tooltip: "Uses the text color from your frontend theme (recommended for consistent styling)"
},
// Monochrome
{
value: "#000000",
tooltip: "Black"
},
{
value: "#ffffff",
tooltip: "White"
},
{
value: "#64748b",
tooltip: "Slate"
},
// Reds
{
value: "#ef4444",
tooltip: "Red"
},
{
value: "#dc2626",
tooltip: "Red (Dark)"
},
{
value: "#fca5a5",
tooltip: "Red (Light)"
},
// Oranges
{
value: "#f97316",
tooltip: "Orange"
},
{
value: "#ea580c",
tooltip: "Orange (Dark)"
},
{
value: "#fdba74",
tooltip: "Orange (Light)"
},
// Yellows
{
value: "#f59e0b",
tooltip: "Amber"
},
{
value: "#d97706",
tooltip: "Amber (Dark)"
},
{
value: "#fcd34d",
tooltip: "Amber (Light)"
},
// Greens
{
value: "#22c55e",
tooltip: "Green"
},
{
value: "#16a34a",
tooltip: "Green (Dark)"
},
{
value: "#86efac",
tooltip: "Green (Light)"
},
// Teals
{
value: "#14b8a6",
tooltip: "Teal"
},
{
value: "#0d9488",
tooltip: "Teal (Dark)"
},
{
value: "#5eead4",
tooltip: "Teal (Light)"
},
// Blues
{
value: "#3b82f6",
tooltip: "Blue"
},
{
value: "#2563eb",
tooltip: "Blue (Dark)"
},
{
value: "#93c5fd",
tooltip: "Blue (Light)"
},
// Purples
{
value: "#a855f7",
tooltip: "Purple"
},
{
value: "#9333ea",
tooltip: "Purple (Dark)"
},
{
value: "#d8b4fe",
tooltip: "Purple (Light)"
},
// Pinks
{
value: "#ec4899",
tooltip: "Pink"
},
{
value: "#db2777",
tooltip: "Pink (Dark)"
},
{
value: "#f9a8d4",
tooltip: "Pink (Light)"
}
];
var DEFAULT_ICON_CONFIG = {
name: "",
size: 24,
color: "currentColor",
strokeWidth: 2,
absoluteStrokeWidth: false
};
var useDebounce = function(value, delay) {
var _ref = _sliced_to_array((0, import_react.useState)(value), 2), debouncedValue = _ref[0], setDebouncedValue = _ref[1];
(0, import_react.useEffect)(function() {
var timer = setTimeout(function() {
setDebouncedValue(value);
}, delay);
return function() {
clearTimeout(timer);
};
}, [
value,
delay
]);
return debouncedValue;
};
var iconCache = {};
var Icon = import_react.default.memo(function(_param) {
var name = _param.name, props = _object_without_properties(_param, [
"name"
]);
if (!iconCache[name]) {
iconCache[name] = (0, import_dynamic.default)(import_dynamicIconImports.default[name]);
}
var LucideIcon = iconCache[name];
return /* @__PURE__ */ import_react.default.createElement(LucideIcon, _object_spread({}, props));
});
Icon.displayName = "Icon";
var ICONS_PER_PAGE = 60;
var IconSelectField = function(props) {
var path = props.path, field = props.field;
var label = field.label;
var _ref = (0, import_ui.useField)({
path: path
}), _ref_value = _ref.value, value = _ref_value === void 0 ? DEFAULT_ICON_CONFIG : _ref_value, setValue = _ref.setValue;
var _ref1 = _sliced_to_array((0, import_react.useState)(false), 2), fieldIsFocused = _ref1[0], setFieldIsFocused = _ref1[1];
var _ref2 = _sliced_to_array((0, import_react.useState)(""), 2), search = _ref2[0], setSearch = _ref2[1];
var _ref3 = _sliced_to_array((0, import_react.useState)(0), 2), page = _ref3[0], setPage = _ref3[1];
var _ref4 = _sliced_to_array((0, import_react.useState)(null), 2), hoveredIcon = _ref4[0], setHoveredIcon = _ref4[1];
var _ref5 = _sliced_to_array((0, import_react.useState)(false), 2), showConfig = _ref5[0], setShowConfig = _ref5[1];
var _ref6 = _sliced_to_array((0, import_react.useState)(false), 2), showResetConfirm = _ref6[0], setShowResetConfirm = _ref6[1];
var debouncedSearch = useDebounce(search, 300);
var allIcons = (0, import_react.useMemo)(function() {
return Object.keys(import_dynamicIconImports.default).sort();
}, []);
var filteredIcons = (0, import_react.useMemo)(function() {
if (!debouncedSearch) return allIcons;
return allIcons.filter(function(name) {
return name.toLowerCase().includes(debouncedSearch.toLowerCase());
});
}, [
debouncedSearch,
allIcons
]);
var totalPages = Math.ceil(filteredIcons.length / ICONS_PER_PAGE);
var paginatedIcons = (0, import_react.useMemo)(function() {
return filteredIcons.slice(page * ICONS_PER_PAGE, (page + 1) * ICONS_PER_PAGE);
}, [
filteredIcons,
page
]);
(0, import_react.useEffect)(function() {
var popularIcons = [
"check",
"x",
"user",
"settings",
"home",
"search"
].filter(function(name) {
return name in import_dynamicIconImports.default;
});
popularIcons.forEach(function(name) {
if (!iconCache[name]) {
iconCache[name] = (0, import_dynamic.default)(import_dynamicIconImports.default[name]);
}
});
}, []);
(0, import_react.useEffect)(function() {
setPage(0);
}, [
debouncedSearch
]);
var handleIconSelect = (0, import_react.useCallback)(function(iconName) {
setValue(_object_spread_props(_object_spread({}, value), {
name: iconName
}));
setFieldIsFocused(false);
setSearch("");
}, [
setValue,
value
]);
var handleConfigChange = (0, import_react.useCallback)(function(field2, newValue) {
setValue(_object_spread_props(_object_spread({}, value), _define_property({}, field2, newValue)));
}, [
setValue,
value
]);
(0, import_react.useEffect)(function() {
var handleClickOutside = function(event) {
var modalElement = document.querySelector(".icon-picker-modal");
var fieldElement = document.querySelector(".icon-select-field");
if (fieldIsFocused && modalElement && fieldElement && !modalElement.contains(event.target) && !fieldElement.contains(event.target)) {
setFieldIsFocused(false);
setSearch("");
}
};
document.addEventListener("mousedown", handleClickOutside);
return function() {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [
fieldIsFocused
]);
var handleResetToDefaults = (0, import_react.useCallback)(function() {
setValue(_object_spread_props(_object_spread({}, DEFAULT_ICON_CONFIG), {
name: value.name
}));
setShowResetConfirm(false);
}, [
setValue,
value.name
]);
return /* @__PURE__ */ import_react.default.createElement("div", {
style: {
width: "100%",
fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif"
}
}, /* @__PURE__ */ import_react.default.createElement("label", {
style: {
display: "flex",
alignItems: "center",
gap: "6px",
marginBottom: "6px",
color: "var(--theme-elevation-800)",
fontSize: "12px",
fontWeight: 500
}
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
name: "palette",
size: 14,
style: {
color: "var(--theme-elevation-500)"
}
}), label), /* @__PURE__ */ import_react.default.createElement("div", {
style: {
display: "flex",
alignItems: "center",
gap: "8px",
marginTop: "8px",
position: "relative"
}
}, /* @__PURE__ */ import_react.default.createElement("div", {
style: {
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "40px",
width: "40px",
minWidth: "40px",
backgroundColor: "var(--theme-elevation-50, #f3f3f3)",
border: "1px solid var(--theme-elevation-150, #e1e1e1)",
borderRadius: "4px",
cursor: "pointer",
transition: "all 0.1s ease-in-out"
},
onClick: function() {
return setFieldIsFocused(true);
},
tabIndex: 0,
role: "button",
"aria-label": "Open icon selector",
onKeyDown: function(e) {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
setFieldIsFocused(true);
}
}
}, value.name ? /* @__PURE__ */ import_react.default.createElement(Icon, {
name: value.name,
size: value.size,
color: value.color,
strokeWidth: value.strokeWidth,
absoluteStrokeWidth: value.absoluteStrokeWidth,
style: {
color: "var(--theme-text, #333)"
}
}) : /* @__PURE__ */ import_react.default.createElement("span", {
style: {
color: "var(--theme-elevation-400, #a6a6a6)",
fontSize: "12px"
}
}, "Icon")), /* @__PURE__ */ import_react.default.createElement("input", {
type: "text",
style: {
flex: 1,
height: "40px",
border: "1px solid var(--theme-elevation-150, #e1e1e1)",
borderRadius: "4px",
padding: "0 10px",
backgroundColor: "var(--theme-input-bg, #fff)",
color: "var(--theme-text, #333)",
cursor: "pointer"
},
value: value.name ? value.name.replace(/-/g, " ").replace(/\b\w/g, function(c) {
return c.toUpperCase();
}) : "Select an icon...",
readOnly: true,
onClick: function() {
return setFieldIsFocused(true);
},
onKeyDown: function(e) {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
setFieldIsFocused(true);
}
},
"aria-haspopup": "true",
"aria-expanded": fieldIsFocused
}), /* @__PURE__ */ import_react.default.createElement("button", {
type: "button",
style: {
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "40px",
width: "40px",
minWidth: "40px",
backgroundColor: "var(--theme-elevation-50, #f3f3f3)",
border: "1px solid var(--theme-elevation-150, #e1e1e1)",
borderRadius: "4px",
cursor: "pointer",
transition: "all 0.1s ease-in-out",
color: "var(--theme-elevation-800, #525252)"
},
onClick: function(e) {
e.preventDefault();
setShowConfig(!showConfig);
},
"aria-label": "Configure icon"
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
name: "settings",
size: 20
})), showConfig && /* @__PURE__ */ import_react.default.createElement("div", {
style: {
position: "absolute",
top: "45px",
right: 0,
width: "300px",
backgroundColor: "var(--theme-bg, #fff)",
border: "1px solid var(--theme-elevation-150, #e1e1e1)",
borderRadius: "4px",
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.15)",
zIndex: 10
}
}, /* @__PURE__ */ import_react.default.createElement("div", {
style: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
padding: "12px 16px",
borderBottom: "1px solid var(--theme-elevation-100, #f0f0f0)"
}
}, /* @__PURE__ */ import_react.default.createElement("h3", {
style: {
margin: 0,
fontSize: "14px",
fontWeight: 500
}
}, "Icon Configuration"), /* @__PURE__ */ import_react.default.createElement("button", {
type: "button",
onClick: function() {
return setShowConfig(false);
},
style: {
display: "flex",
alignItems: "center",
justifyContent: "center",
background: "none",
border: "none",
color: "var(--theme-elevation-500, #919191)",
cursor: "pointer",
padding: "4px",
borderRadius: "4px"
}
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
name: "x",
size: 16
}))), /* @__PURE__ */ import_react.default.createElement("div", {
style: {
padding: "16px"
}
}, /* @__PURE__ */ import_react.default.createElement("div", {
style: {
marginBottom: "16px"
}
}, /* @__PURE__ */ import_react.default.createElement("label", {
htmlFor: "icon-size",
style: {
display: "block",
fontSize: "12px",
fontWeight: 500,
color: "var(--theme-elevation-800, #525252)",
marginBottom: "8px"
}
}, "Size"), /* @__PURE__ */ import_react.default.createElement("div", {
style: {
display: "flex",
flexWrap: "wrap",
gap: "4px",
marginBottom: "8px"
}
}, PREDEFINED_SIZES.map(function(size) {
return /* @__PURE__ */ import_react.default.createElement("button", {
key: size,
type: "button",
style: {
padding: "4px 8px",
border: "1px solid var(--theme-elevation-150, #e1e1e1)",
borderRadius: "4px",
background: value.size === size ? "var(--theme-text, #333)" : "var(--theme-elevation-50, #f3f3f3)",
color: value.size === size ? "var(--theme-bg, #fff)" : "var(--theme-text, #333)",
fontSize: "12px",
cursor: "pointer",
transition: "all 0.1s ease-in-out"
},
onClick: function() {
return handleConfigChange("size", size);
}
}, size);
})), /* @__PURE__ */ import_react.default.createElement("input", {
id: "icon-size",
type: "number",
value: value.size,
onChange: function(e) {
return handleConfigChange("size", parseInt(e.target.value, 10));
},
min: 1,
max: 100,
style: {
width: "100%",
height: "32px",
padding: "0 8px",
border: "1px solid var(--theme-elevation-150, #e1e1e1)",
borderRadius: "4px",
fontSize: "13px",
backgroundColor: "var(--theme-input-bg, #fff)"
},
placeholder: "Custom size..."
})), /* @__PURE__ */ import_react.default.createElement("div", {
style: {
marginBottom: "16px"
}
}, /* @__PURE__ */ import_react.default.createElement("label", {
htmlFor: "icon-color",
style: {
display: "block",
fontSize: "12px",
fontWeight: 500,
color: "var(--theme-elevation-800, #525252)",
marginBottom: "8px"
}
}, "Color"), /* @__PURE__ */ import_react.default.createElement("div", {
style: {
display: "flex",
flexWrap: "wrap",
gap: "4px",
marginBottom: "8px"
}
}, COLOR_PALETTE.map(function(colorOption) {
return /* @__PURE__ */ import_react.default.createElement("button", {
key: colorOption.value,
type: "button",
style: {
padding: "4px 8px",
border: "1px solid var(--theme-elevation-150, #e1e1e1)",
borderRadius: "4px",
background: value.color === colorOption.value ? "var(--theme-text, #333)" : "var(--theme-elevation-50, #f3f3f3)",
color: value.color === colorOption.value ? "var(--theme-bg, #fff)" : "var(--theme-text, #333)",
fontSize: "12px",
cursor: "pointer",
transition: "all 0.1s ease-in-out"
},
onClick: function() {
return handleConfigChange("color", colorOption.value);
}
}, colorOption.value === "currentColor" ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(Icon, {
name: "palette",
size: 14
}), /* @__PURE__ */ import_react.default.createElement("span", null, "currentColor")) : /* @__PURE__ */ import_react.default.createElement("div", {
style: {
width: "16px",
height: "16px",
backgroundColor: colorOption.value,
borderRadius: "2px",
marginRight: "4px"
}
}));
})), /* @__PURE__ */ import_react.default.createElement("input", {
id: "icon-color",
type: "text",
value: value.color,
onChange: function(e) {
return handleConfigChange("color", e.target.value);
},
placeholder: "Custom color (hex, rgb, etc.)",
style: {
width: "100%",
height: "32px",
padding: "0 8px",
border: "1px solid var(--theme-elevation-150, #e1e1e1)",
borderRadius: "4px",
fontSize: "13px",
backgroundColor: "var(--theme-input-bg, #fff)"
}
})), /* @__PURE__ */ import_react.default.createElement("div", {
style: {
marginBottom: "16px"
}
}, /* @__PURE__ */ import_react.default.createElement("label", {
htmlFor: "icon-stroke-width",
style: {
display: "block",
fontSize: "12px",
fontWeight: 500,
color: "var(--theme-elevation-800, #525252)",
marginBottom: "8px"
}
}, "Stroke Width"), /* @__PURE__ */ import_react.default.createElement("div", {
style: {
display: "flex",
flexWrap: "wrap",
gap: "4px",
marginBottom: "8px"
}
}, PREDEFINED_STROKE_WIDTHS.map(function(width) {
return /* @__PURE__ */ import_react.default.createElement("button", {
key: width,
type: "button",
style: {
padding: "4px 8px",
border: "1px solid var(--theme-elevation-150, #e1e1e1)",
borderRadius: "4px",
background: value.strokeWidth === width ? "var(--theme-text, #333)" : "var(--theme-elevation-50, #f3f3f3)",
color: value.strokeWidth === width ? "var(--theme-bg, #fff)" : "var(--theme-text, #333)",
fontSize: "12px",
cursor: "pointer",
transition: "all 0.1s ease-in-out"
},
onClick: function() {
return handleConfigChange("strokeWidth", width);
}
}, width);
})), /* @__PURE__ */ import_react.default.createElement("input", {
id: "icon-stroke-width",
type: "number",
value: value.strokeWidth,
onChange: function(e) {
return handleConfigChange("strokeWidth", parseFloat(e.target.value));
},
min: 0.1,
max: 10,
step: 0.1,
style: {
width: "100%",
height: "32px",
padding: "0 8px",
border: "1px solid var(--theme-elevation-150, #e1e1e1)",
borderRadius: "4px",
fontSize: "13px",
backgroundColor: "var(--theme-input-bg, #fff)"
},
placeholder: "Custom stroke width..."
})), /* @__PURE__ */ import_react.default.createElement("div", {
style: {
marginBottom: "16px"
}
}, /* @__PURE__ */ import_react.default.createElement("label", {
htmlFor: "icon-absolute-stroke",
style: {
display: "block",
fontSize: "12px",
fontWeight: 500,
color: "var(--theme-elevation-800, #525252)",
marginBottom: "8px"
}
}, /* @__PURE__ */ import_react.default.createElement("input", {
id: "icon-absolute-stroke",
type: "checkbox",
checked: value.absoluteStrokeWidth,
onChange: function(e) {
return handleConfigChange("absoluteStrokeWidth", e.target.checked);
}
}), "Absolute Stroke Width")), /* @__PURE__ */ import_react.default.createElement("div", {
style: {
marginTop: "16px",
display: "flex",
justifyContent: "space-between"
}
}, /* @__PURE__ */ import_react.default.createElement("button", {
type: "button",
className: "icon-config-panel__reset",
onClick: function() {
return setShowResetConfirm(true);
},
style: {
padding: "8px 16px",
border: "none",
background: "none",
color: "var(--theme-elevation-800, #525252)",
fontSize: "12px",
cursor: "pointer",
transition: "all 0.1s ease-in-out"
}
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
name: "rotate-ccw",
size: 14
}), "Restore Defaults"), /* @__PURE__ */ import_react.default.createElement("button", {
type: "button",
className: "icon-config-panel__confirm",
onClick: handleResetToDefaults,
style: {
padding: "8px 16px",
border: "none",
background: "var(--theme-text, #333)",
color: "var(--theme-bg, #fff)",
fontSize: "12px",
cursor: "pointer",
transition: "all 0.1s ease-in-out"
}
}, "Reset to Defaults")))), showResetConfirm && /* @__PURE__ */ import_react.default.createElement("div", {
style: {
position: "fixed",
inset: 0,
backgroundColor: "rgba(0, 0, 0, 0.5)",
display: "flex",
alignItems: "center",
justifyContent: "center",
zIndex: 20
}
}, /* @__PURE__ */ import_react.default.createElement("div", {
style: {
width: "100%",
maxWidth: "400px",
backgroundColor: "var(--theme-bg, #fff)",
borderRadius: "6px",
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.2)"
}
}, /* @__PURE__ */ import_react.default.createElement("div", {
style: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
padding: "16px",
borderBottom: "1px solid var(--theme-elevation-100, #f0f0f0)"
}
}, /* @__PURE__ */ import_react.default.createElement("h3", {
style: {
margin: 0,
fontSize: "16px",
fontWeight: 500,
color: "var(--theme-text, #333)"
}
}, "Reset Configuration"), /* @__PURE__ */ import_react.default.createElement("button", {
type: "button",
onClick: function() {
return setShowResetConfirm(false);
},
style: {
display: "flex",
alignItems: "center",
justifyContent: "center",
background: "none",
border: "none",
color: "var(--theme-elevation-500, #919191)",
cursor: "pointer",
padding: "4px",
borderRadius: "4px"
}
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
name: "x",
size: 16
}))), /* @__PURE__ */ import_react.default.createElement("div", {
style: {
padding: "16px"
}
}, /* @__PURE__ */ import_react.default.createElement("p", {
style: {
margin: 0,
color: "var(--theme-text, #333)",
fontSize: "14px",
lineHeight: 1.5,
fontWeight: 500,
marginBottom: "8px"
}
}, "Are you sure you want to restore default configuration?"), /* @__PURE__ */ import_react.default.createElement("p", {
style: {
margin: 0,
color: "var(--theme-elevation-600, #666)",
fontSize: "13px",
lineHeight: 1.5
}
}, "This will reset size, color, stroke width, and absolute stroke settings to their default values. The selected icon will be preserved.")), /* @__PURE__ */ import_react.default.createElement("div", {
style: {
display: "flex",
justifyContent: "flex-end",
gap: "8px",
padding: "16px",
borderTop: "1px solid var(--theme-elevation-100, #f0f0f0)"
}
}, /* @__PURE__ */ import_react.default.createElement("button", {
type: "button",
style: {
padding: "8px 16px",
background: "var(--theme-elevation-50, #f3f3f3)",
border: "1px solid var(--theme-elevation-150, #e1e1e1)",
borderRadius: "4px",
color: "var(--theme-text, #333)",
fontSize: "14px",
cursor: "pointer",
transition: "all 0.1s ease-in-out"
},
onClick: function() {
return setShowResetConfirm(false);
}
}, "Cancel"), /* @__PURE__ */ import_react.default.createElement("button", {
type: "button",
style: {
padding: "8px 16px",
background: "var(--theme-error-600, #dc2626)",
border: "1px solid var(--theme-error-700, #b91c1c)",
borderRadius: "4px",
color: "white",
fontSize: "14px",
cursor: "pointer",
transition: "all 0.1s ease-in-out"
},
onClick: handleResetToDefaults
}, "Reset to Defaults")))), fieldIsFocused && /* @__PURE__ */ import_react.default.createElement("div", {
style: {
position: "absolute",
top: "45px",
left: 0,
width: "100%",
maxWidth: "580px",
backgroundColor: "var(--theme-bg, #fff)",
border: "1px solid var(--theme-elevation-150, #e1e1e1)",
borderRadius: "4px",
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.15)",
zIndex: 10,
overflow: "hidden",
display: "flex",
flexDirection: "column"
},
"aria-label": "Icon Picker",
role: "dialog"
}, /* @__PURE__ */ import_react.default.createElement("div", {
style: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
padding: "12px 16px",
borderBottom: "1px solid var(--theme-elevation-100, #f0f0f0)"
}
}, /* @__PURE__ */ import_react.default.createElement("h2", {
style: {
margin: 0,
fontSize: "16px",
fontWeight: 500,
color: "var(--theme-text, #333)"
}
}, "Select an Icon"), /* @__PURE__ */ import_react.default.createElement("button", {
type: "button",
style: {
display: "flex",
alignItems: "center",
justifyContent: "center",
background: "none",
border: "none",
color: "var(--theme-elevation-500, #919191)",
cursor: "pointer",
padding: "4px",
borderRadius: "4px"
},
onClick: function(e) {
e.preventDefault();
setFieldIsFocused(false);
setSearch("");
},
"aria-label": "Close dialog"
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
name: "x",
size: 20
}))), /* @__PURE__ */ import_react.default.createElement("div", {
style: {
padding: "12px 16px",
borderBottom: "1px solid var(--theme-elevation-100, #f0f0f0)"
}
}, /* @__PURE__ */ import_react.default.createElement("input", {
type: "search",
placeholder: hoveredIcon || "Search icons...",
value: search,
onChange: function(e) {
return setSearch(e.target.value);
},
style: {
width: "100%",
height: "36px",
padding: "0 12px",
border: "1px solid var(--theme-elevation-150, #e1e1e1)",
borderRadius: "4px",
backgroundColor: "var(--theme-input-bg, #fff)"
},
autoFocus: true
})), /* @__PURE__ */ import_react.default.createElement("div", {
style: {
padding: "8px 16px",
fontSize: "12px",
color: "var(--theme-elevation-500, #919191)",
borderBottom: "1px solid var(--theme-elevation-100, #f0f0f0)"
}
}, "Showing ", paginatedIcons.length, " of ", filteredIcons.length, " icons"), /* @__PURE__ */ import_react.default.createElement("div", {
style: {
display: "grid",
gridTemplateColumns: "repeat(auto-fill, minmax(80px, 1fr))",
gap: "8px",
padding: "16px",
maxHeight: "320px",
overflowY: "auto"
}
}, paginatedIcons.length > 0 ? paginatedIcons.map(function(iconName) {
return /* @__PURE__ */ import_react.default.createElement("button", {
key: iconName,
type: "button",
style: {
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: "4px",
padding: "8px 4px",
background: value.name === iconName ? "var(--theme-elevation-100, #f0f0f0)" : "none",
border: "1px solid ".concat(value.name === iconName ? "var(--theme-elevation-300, #c1c1c1)" : "var(--theme-elevation-100, #f0f0f0)"),
borderRadius: "4px",
cursor: "pointer",
transition: "all 0.1s ease-in-out",
position: "relative"
},
onClick: function(e) {
e.preventDefault();
handleIconSelect(iconName);
},
onMouseOver: function() {
return setHoveredIcon(iconName);
},
onMouseOut: function() {
return setHoveredIcon(null);
},
title: iconName.replace(/-/g, " ").replace(/\b\w/g, function(c) {
return c.toUpperCase();
}),
"aria-selected": value.name === iconName,
"aria-label": iconName.replace(/-/g, " ")
}, value.name === iconName && /* @__PURE__ */ import_react.default.createElement("div", {
style: {
position: "absolute",
top: "4px",
right: "4px",
width: "8px",
height: "8px",
borderRadius: "50%",
backgroundColor: "var(--theme-success, #4caf50)"
}
}), /* @__PURE__ */ import_react.default.createElement(Icon, {
name: iconName,
size: value.size,
color: value.color,
strokeWidth: value.strokeWidth,
absoluteStrokeWidth: value.absoluteStrokeWidth
}), /* @__PURE__ */ import_react.default.createElement("span", {
style: {
fontSize: "10px",
color: "var(--theme-elevation-800, #525252)",
textAlign: "center",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
maxWidth: "100%"
}
}, iconName.replace(/-/g, " ")));
}) : /* @__PURE__ */ import_react.default.createElement("div", {
style: {
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "32px",
color: "var(--theme-elevation-500, #919191)",
fontStyle: "italic"
}
}, "No icons found matching ", debouncedSearch)), totalPages > 1 && /* @__PURE__ */ import_react.default.createElement("div", {
style: {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: "12px 16px",
borderTop: "1px solid var(--theme-elevation-100, #f0f0f0)"
}
}, /* @__PURE__ */ import_react.default.createElement("button", {
type: "button",
onClick: function(e) {
e.preventDefault();
setPage(function(p) {
return Math.max(0, p - 1);
});
},
disabled: page === 0,
style: {
display: "flex",
alignItems: "center",
gap: "4px",
padding: "6px 12px",
backgroundColor: "var(--theme-elevation-50, #f3f3f3)",
border: "1px solid var(--theme-elevation-150, #e1e1e1)",
borderRadius: "4px",
color: "var(--theme-text, #333)",
fontSize: "14px",
cursor: page === 0 ? "not-allowed" : "pointer",
transition: "all 0.1s ease-in-out",
opacity: page === 0 ? 0.5 : 1
},
"aria-label": "Previous page"
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
name: "chevron-left",
size: 16
}), "Previous"), /* @__PURE__ */ import_react.default.createElement("span", {
style: {
fontSize: "14px",
color: "var(--theme-elevation-600, #666)"
}
}, "Page ", page + 1, " of ", totalPages), /* @__PURE__ */ import_react.default.createElement("button", {
type: "button",
onClick: function(e) {
e.preventDefault();
setPage(function(p) {
return Math.min(totalPages - 1, p + 1);
});
},
disabled: page === totalPages - 1,
style: {
display: "flex",
alignItems: "center",
gap: "4px",
padding: "6px 12px",
backgroundColor: "var(--theme-elevation-50, #f3f3f3)",
border: "1px solid var(--theme-elevation-150, #e1e1e1)",
borderRadius: "4px",
color: "var(--theme-text, #333)",
fontSize: "14px",
cursor: page === totalPages - 1 ? "not-allowed" : "pointer",
transition: "all 0.1s ease-in-out",
opacity: page === totalPages - 1 ? 0.5 : 1
},
"aria-label": "Next page"
}, "Next", /* @__PURE__ */ import_react.default.createElement(Icon, {
name: "chevron-right",
size: 16
}))))));
};
var component_default = IconSelectField;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
IconSelectField: IconSelectField
});
//# sourceMappingURL=index.cjs.map