@hubstr/kit 0.1.2 → 0.1.4

package/icons/es/components/Dashboard/IconItem.js

@@ -1,141 +1,141 @@
-'use client';
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { ActionIcon, Block, Center, CopyButton, Flexbox, Text } from '@hubstr/kit/ui';
-import { createStaticStyles, cx } from 'antd-style';
-import { Link } from 'dumi';
-import { DownloadIcon, SearchIcon } from 'lucide-react';
-import { readableColor } from 'polished';
-import { memo, useCallback, useRef } from 'react';
-import { customKebabCase } from "./utils";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var styles = createStaticStyles(function (_ref) {
-  var css = _ref.css,
-    cssVar = _ref.cssVar;
-  var colorText = cx('color-text', css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: block;\n    "]))));
-  var copy = cx('copy', css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      z-index: 1;\n      display: none !important;\n    "]))));
-  return {
-    card: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      position: relative;\n      overflow: hidden;\n    "]))),
-    color: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      border-inline-end: 1px solid ", ";\n      font-family: ", ";\n\n      &:hover {\n        .color-text {\n          display: none;\n        }\n\n        .copy {\n          display: flex !important;\n        }\n      }\n    "])), cssVar.colorBorderSecondary, cssVar.fontFamilyCode),
-    colorText: colorText,
-    copy: copy,
-    row: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      border-block-start: 1px solid ", ";\n    "])), cssVar.colorFillSecondary),
-    title: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      margin: 0;\n      font-size: 16px;\n      font-weight: bold;\n    "]))),
-    titleRow: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      margin-block-start: -8px;\n\n      &:hover {\n        .copy {\n          display: flex;\n        }\n      }\n    "])))
-  };
-});
-var IconItem = /*#__PURE__*/memo(function (_ref2) {
-  var children = _ref2.children,
-    title = _ref2.title,
-    color = _ref2.color,
-    id = _ref2.id;
-  var ref = useRef(null);
-  var handleDownload = useCallback(function (iconId) {
-    var _ref$current;
-    var svgString = String(ref === null || ref === void 0 || (_ref$current = ref.current) === null || _ref$current === void 0 || (_ref$current = _ref$current.querySelector('svg')) === null || _ref$current === void 0 ? void 0 : _ref$current.outerHTML);
-    var blob = new Blob([svgString], {
-      type: 'image/svg+xml;charset=utf-8'
-    });
-    var url = URL.createObjectURL(blob);
-    var downloadLink = document.createElement('a');
-    downloadLink.href = url;
-    downloadLink.download = "".concat(iconId.toLowerCase(), ".svg");
-    document.body.append(downloadLink);
-    downloadLink.click();
-    downloadLink.remove();
-    URL.revokeObjectURL(url);
-  }, []);
-  return /*#__PURE__*/_jsxs(Block, {
-    className: styles.card,
-    variant: 'outlined',
-    children: [/*#__PURE__*/_jsx(Link, {
-      style: {
-        color: 'inherit'
-      },
-      to: "/components/".concat(customKebabCase(id)),
-      children: /*#__PURE__*/_jsx(Center, {
-        height: 96,
-        ref: ref,
-        style: {
-          position: 'relative'
-        },
-        width: '100%',
-        children: children
-      })
-    }), /*#__PURE__*/_jsxs(Flexbox, {
-      align: 'center',
-      className: styles.titleRow,
-      horizontal: true,
-      justify: 'space-between',
-      paddingBlock: 8,
-      paddingInline: 12,
-      width: '100%',
-      children: [/*#__PURE__*/_jsx(Text, {
-        as: 'h2',
-        className: styles.title,
-        ellipsis: true,
-        children: title
-      }), /*#__PURE__*/_jsx(CopyButton, {
-        content: title,
-        size: 'small'
-      })]
-    }), /*#__PURE__*/_jsxs(Flexbox, {
-      align: 'center',
-      className: styles.row,
-      horizontal: true,
-      children: [/*#__PURE__*/_jsxs(Center, {
-        className: styles.color,
-        flex: 1,
-        height: 32,
-        horizontal: true,
-        paddingInline: 12,
-        style: {
-          background: color,
-          color: readableColor(color)
-        },
-        children: [/*#__PURE__*/_jsx("span", {
-          className: styles.colorText,
-          children: color.toUpperCase()
-        }), /*#__PURE__*/_jsx(CopyButton, {
-          className: styles.copy,
-          color: readableColor(color),
-          content: color.toUpperCase(),
-          size: 'small'
-        })]
-      }), /*#__PURE__*/_jsxs(Flexbox, {
-        flex: 1,
-        horizontal: true,
-        paddingInline: 12,
-        children: [/*#__PURE__*/_jsx(Center, {
-          flex: 1,
-          height: 32,
-          children: /*#__PURE__*/_jsx("a", {
-            href: "https://hubstr.io/icons/".concat(customKebabCase(id)),
-            rel: "noreferrer",
-            style: {
-              color: 'inherit'
-            },
-            target: '_blank',
-            children: /*#__PURE__*/_jsx(ActionIcon, {
-              icon: SearchIcon,
-              size: 'small'
-            })
-          })
-        }), /*#__PURE__*/_jsx(Center, {
-          flex: 1,
-          height: 32,
-          onClick: function onClick() {
-            return handleDownload(id);
-          },
-          children: /*#__PURE__*/_jsx(ActionIcon, {
-            icon: DownloadIcon,
-            size: 'small'
-          })
-        })]
-      })]
-    })]
-  });
-});
+'use client';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { ActionIcon, Block, Center, CopyButton, Flexbox, Text } from '@hubstr/kit/ui';
+import { createStaticStyles, cx } from 'antd-style';
+import { Link } from 'dumi';
+import { DownloadIcon, SearchIcon } from 'lucide-react';
+import { readableColor } from 'polished';
+import { memo, useCallback, useRef } from 'react';
+import { customKebabCase } from "./utils.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var styles = createStaticStyles(function (_ref) {
+  var css = _ref.css,
+    cssVar = _ref.cssVar;
+  var colorText = cx('color-text', css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: block;\n    "]))));
+  var copy = cx('copy', css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      z-index: 1;\n      display: none !important;\n    "]))));
+  return {
+    card: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      position: relative;\n      overflow: hidden;\n    "]))),
+    color: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      border-inline-end: 1px solid ", ";\n      font-family: ", ";\n\n      &:hover {\n        .color-text {\n          display: none;\n        }\n\n        .copy {\n          display: flex !important;\n        }\n      }\n    "])), cssVar.colorBorderSecondary, cssVar.fontFamilyCode),
+    colorText: colorText,
+    copy: copy,
+    row: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      border-block-start: 1px solid ", ";\n    "])), cssVar.colorFillSecondary),
+    title: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      margin: 0;\n      font-size: 16px;\n      font-weight: bold;\n    "]))),
+    titleRow: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      margin-block-start: -8px;\n\n      &:hover {\n        .copy {\n          display: flex;\n        }\n      }\n    "])))
+  };
+});
+var IconItem = /*#__PURE__*/memo(function (_ref2) {
+  var children = _ref2.children,
+    title = _ref2.title,
+    color = _ref2.color,
+    id = _ref2.id;
+  var ref = useRef(null);
+  var handleDownload = useCallback(function (iconId) {
+    var _ref$current;
+    var svgString = String(ref === null || ref === void 0 || (_ref$current = ref.current) === null || _ref$current === void 0 || (_ref$current = _ref$current.querySelector('svg')) === null || _ref$current === void 0 ? void 0 : _ref$current.outerHTML);
+    var blob = new Blob([svgString], {
+      type: 'image/svg+xml;charset=utf-8'
+    });
+    var url = URL.createObjectURL(blob);
+    var downloadLink = document.createElement('a');
+    downloadLink.href = url;
+    downloadLink.download = "".concat(iconId.toLowerCase(), ".svg");
+    document.body.append(downloadLink);
+    downloadLink.click();
+    downloadLink.remove();
+    URL.revokeObjectURL(url);
+  }, []);
+  return /*#__PURE__*/_jsxs(Block, {
+    className: styles.card,
+    variant: 'outlined',
+    children: [/*#__PURE__*/_jsx(Link, {
+      style: {
+        color: 'inherit'
+      },
+      to: "/components/".concat(customKebabCase(id)),
+      children: /*#__PURE__*/_jsx(Center, {
+        height: 96,
+        ref: ref,
+        style: {
+          position: 'relative'
+        },
+        width: '100%',
+        children: children
+      })
+    }), /*#__PURE__*/_jsxs(Flexbox, {
+      align: 'center',
+      className: styles.titleRow,
+      horizontal: true,
+      justify: 'space-between',
+      paddingBlock: 8,
+      paddingInline: 12,
+      width: '100%',
+      children: [/*#__PURE__*/_jsx(Text, {
+        as: 'h2',
+        className: styles.title,
+        ellipsis: true,
+        children: title
+      }), /*#__PURE__*/_jsx(CopyButton, {
+        content: title,
+        size: 'small'
+      })]
+    }), /*#__PURE__*/_jsxs(Flexbox, {
+      align: 'center',
+      className: styles.row,
+      horizontal: true,
+      children: [/*#__PURE__*/_jsxs(Center, {
+        className: styles.color,
+        flex: 1,
+        height: 32,
+        horizontal: true,
+        paddingInline: 12,
+        style: {
+          background: color,
+          color: readableColor(color)
+        },
+        children: [/*#__PURE__*/_jsx("span", {
+          className: styles.colorText,
+          children: color.toUpperCase()
+        }), /*#__PURE__*/_jsx(CopyButton, {
+          className: styles.copy,
+          color: readableColor(color),
+          content: color.toUpperCase(),
+          size: 'small'
+        })]
+      }), /*#__PURE__*/_jsxs(Flexbox, {
+        flex: 1,
+        horizontal: true,
+        paddingInline: 12,
+        children: [/*#__PURE__*/_jsx(Center, {
+          flex: 1,
+          height: 32,
+          children: /*#__PURE__*/_jsx("a", {
+            href: "https://hubstr.io/icons/".concat(customKebabCase(id)),
+            rel: "noreferrer",
+            style: {
+              color: 'inherit'
+            },
+            target: '_blank',
+            children: /*#__PURE__*/_jsx(ActionIcon, {
+              icon: SearchIcon,
+              size: 'small'
+            })
+          })
+        }), /*#__PURE__*/_jsx(Center, {
+          flex: 1,
+          height: 32,
+          onClick: function onClick() {
+            return handleDownload(id);
+          },
+          children: /*#__PURE__*/_jsx(ActionIcon, {
+            icon: DownloadIcon,
+            size: 'small'
+          })
+        })]
+      })]
+    })]
+  });
+});
 export default IconItem;

package/icons/es/components/Dashboard/Text.js

@@ -1,66 +1,66 @@
-'use client';
-
-var _templateObject;
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import * as Icons from "../..";
-import { Flexbox } from '@hubstr/kit/ui';
-import { StoryBook, useControls, useCreateStore } from '@hubstr/kit/ui/storybook';
-import { createStaticStyles } from 'antd-style';
-import { memo } from 'react';
-import IconPreview from "../IconPreview";
-import { jsx as _jsx } from "react/jsx-runtime";
-var data = Object.values(Icons).filter(function (icon) {
-  return icon === null || icon === void 0 ? void 0 : icon.colorPrimary;
-});
-var styles = createStaticStyles(function (_ref) {
-  var css = _ref.css,
-    cssVar = _ref.cssVar;
-  return {
-    item: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: 96px;\n    padding: 16px;\n    border: none;\n    background: ", ";\n  "])), cssVar.colorBgContainer)
-  };
-});
-var Dashboard = /*#__PURE__*/memo(function (_ref2) {
-  var className = _ref2.className;
-  var store = useCreateStore();
-  var _useControls = useControls({
-      color: {
-        color: true,
-        value: '#ffffff'
-      },
-      size: {
-        max: 96,
-        min: 16,
-        step: 1,
-        value: 24
-      }
-    }, {
-      store: store
-    }),
-    size = _useControls.size,
-    color = _useControls.color;
-  return /*#__PURE__*/_jsx(StoryBook, {
-    className: className,
-    levaStore: store,
-    children: /*#__PURE__*/_jsx(Flexbox, {
-      align: 'center',
-      gap: 4,
-      horizontal: true,
-      justify: 'center',
-      style: {
-        flexWrap: 'wrap'
-      },
-      children: data.map(function (Icon, index) {
-        var IconRender = Icon.Text || Icon.Brand;
-        if (!IconRender) return null;
-        return /*#__PURE__*/_jsx(IconPreview, {
-          className: styles.item,
-          children: /*#__PURE__*/_jsx(IconRender, {
-            color: color === '#ffffff' ? undefined : color,
-            size: size
-          })
-        }, index);
-      })
-    })
-  });
-});
+'use client';
+
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import * as Icons from "../../index.js";
+import { Flexbox } from '@hubstr/kit/ui';
+import { StoryBook, useControls, useCreateStore } from '@hubstr/kit/ui/storybook';
+import { createStaticStyles } from 'antd-style';
+import { memo } from 'react';
+import IconPreview from "../IconPreview/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+var data = Object.values(Icons).filter(function (icon) {
+  return icon === null || icon === void 0 ? void 0 : icon.colorPrimary;
+});
+var styles = createStaticStyles(function (_ref) {
+  var css = _ref.css,
+    cssVar = _ref.cssVar;
+  return {
+    item: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: 96px;\n    padding: 16px;\n    border: none;\n    background: ", ";\n  "])), cssVar.colorBgContainer)
+  };
+});
+var Dashboard = /*#__PURE__*/memo(function (_ref2) {
+  var className = _ref2.className;
+  var store = useCreateStore();
+  var _useControls = useControls({
+      color: {
+        color: true,
+        value: '#ffffff'
+      },
+      size: {
+        max: 96,
+        min: 16,
+        step: 1,
+        value: 24
+      }
+    }, {
+      store: store
+    }),
+    size = _useControls.size,
+    color = _useControls.color;
+  return /*#__PURE__*/_jsx(StoryBook, {
+    className: className,
+    levaStore: store,
+    children: /*#__PURE__*/_jsx(Flexbox, {
+      align: 'center',
+      gap: 4,
+      horizontal: true,
+      justify: 'center',
+      style: {
+        flexWrap: 'wrap'
+      },
+      children: data.map(function (Icon, index) {
+        var IconRender = Icon.Text || Icon.Brand;
+        if (!IconRender) return null;
+        return /*#__PURE__*/_jsx(IconPreview, {
+          className: styles.item,
+          children: /*#__PURE__*/_jsx(IconRender, {
+            color: color === '#ffffff' ? undefined : color,
+            size: size
+          })
+        }, index);
+      })
+    })
+  });
+});
 export default Dashboard;

package/icons/es/components/Dashboard/index.js

@@ -1,103 +1,103 @@
-'use client';
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { 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 _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(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(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import * as Icons from "../..";
-import { Flexbox, Grid, SearchBar, TooltipGroup } from '@hubstr/kit/ui';
-import { Empty, Segmented } from 'antd';
-import { cssVar } from 'antd-style';
-import { memo, useMemo, useState } from 'react';
-import IconItem from "./IconItem";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var ColorType = /*#__PURE__*/function (ColorType) {
-  ColorType["Color"] = "color";
-  ColorType["Mono"] = "mono";
-  return ColorType;
-}(ColorType || {});
-var Dashboard = /*#__PURE__*/memo(function () {
-  var _useState = useState(ColorType.Color),
-    _useState2 = _slicedToArray(_useState, 2),
-    type = _useState2[0],
-    setType = _useState2[1];
-  var _useState3 = useState(),
-    _useState4 = _slicedToArray(_useState3, 2),
-    keyword = _useState4[0],
-    setKeyword = _useState4[1];
-  var iconsGroup = useMemo(function () {
-    return Object.entries(Icons).filter(function (_ref) {
-      var _ref2 = _slicedToArray(_ref, 2),
-        key = _ref2[0],
-        Icon = _ref2[1];
-      if (!Icon.title) return false;
-      if (keyword && !key.toLowerCase().includes(keyword.toLowerCase()) && !Icon.title.toLowerCase().includes(keyword.toLowerCase())) return false;
-      return true;
-    });
-  }, [keyword]);
-  var isMono = type === ColorType.Mono;
-  return /*#__PURE__*/_jsxs(Flexbox, {
-    gap: 16,
-    style: {
-      maxWidth: 960
-    },
-    width: '100%',
-    children: [/*#__PURE__*/_jsxs(Flexbox, {
-      align: 'center',
-      gap: 12,
-      horizontal: true,
-      children: [/*#__PURE__*/_jsx(SearchBar, {
-        allowClear: true,
-        defaultValue: keyword,
-        onSearch: function onSearch(v) {
-          return setKeyword(v);
-        },
-        placeholder: 'Search by brand or model keywords...',
-        style: {
-          width: '100%'
-        },
-        type: 'block'
-      }), /*#__PURE__*/_jsx(Segmented, {
-        defaultValue: type,
-        onChange: function onChange(v) {
-          return setType(v);
-        },
-        options: [{
-          label: 'Color',
-          value: ColorType.Color
-        }, {
-          label: 'Mono',
-          value: ColorType.Mono
-        }],
-        style: {
-          border: "1px solid ".concat(cssVar.colorBorder)
-        }
-      })]
-    }), /*#__PURE__*/_jsx(TooltipGroup, {
-      children: iconsGroup.length > 0 ? /*#__PURE__*/_jsx(Grid, {
-        maxItemWidth: 160,
-        rows: 5,
-        children: iconsGroup.map(function (_ref3) {
-          var _ref4 = _slicedToArray(_ref3, 2),
-            key = _ref4[0],
-            Icon = _ref4[1];
-          var IconRender = isMono ? Icon : Icon.Color || Icon;
-          return /*#__PURE__*/_jsx(IconItem, {
-            color: Icon.colorPrimary,
-            id: key,
-            title: Icon.title,
-            children: /*#__PURE__*/_jsx(IconRender, {
-              size: 56
-            })
-          }, key);
-        })
-      }) : /*#__PURE__*/_jsx(Empty, {
-        image: Empty.PRESENTED_IMAGE_SIMPLE
-      })
-    })]
-  });
-});
+'use client';
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { 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 _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(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(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import * as Icons from "../../index.js";
+import { Flexbox, Grid, SearchBar, TooltipGroup } from '@hubstr/kit/ui';
+import { Empty, Segmented } from 'antd';
+import { cssVar } from 'antd-style';
+import { memo, useMemo, useState } from 'react';
+import IconItem from "./IconItem.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ColorType = /*#__PURE__*/function (ColorType) {
+  ColorType["Color"] = "color";
+  ColorType["Mono"] = "mono";
+  return ColorType;
+}(ColorType || {});
+var Dashboard = /*#__PURE__*/memo(function () {
+  var _useState = useState(ColorType.Color),
+    _useState2 = _slicedToArray(_useState, 2),
+    type = _useState2[0],
+    setType = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    keyword = _useState4[0],
+    setKeyword = _useState4[1];
+  var iconsGroup = useMemo(function () {
+    return Object.entries(Icons).filter(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        Icon = _ref2[1];
+      if (!Icon.title) return false;
+      if (keyword && !key.toLowerCase().includes(keyword.toLowerCase()) && !Icon.title.toLowerCase().includes(keyword.toLowerCase())) return false;
+      return true;
+    });
+  }, [keyword]);
+  var isMono = type === ColorType.Mono;
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    gap: 16,
+    style: {
+      maxWidth: 960
+    },
+    width: '100%',
+    children: [/*#__PURE__*/_jsxs(Flexbox, {
+      align: 'center',
+      gap: 12,
+      horizontal: true,
+      children: [/*#__PURE__*/_jsx(SearchBar, {
+        allowClear: true,
+        defaultValue: keyword,
+        onSearch: function onSearch(v) {
+          return setKeyword(v);
+        },
+        placeholder: 'Search by brand or model keywords...',
+        style: {
+          width: '100%'
+        },
+        type: 'block'
+      }), /*#__PURE__*/_jsx(Segmented, {
+        defaultValue: type,
+        onChange: function onChange(v) {
+          return setType(v);
+        },
+        options: [{
+          label: 'Color',
+          value: ColorType.Color
+        }, {
+          label: 'Mono',
+          value: ColorType.Mono
+        }],
+        style: {
+          border: "1px solid ".concat(cssVar.colorBorder)
+        }
+      })]
+    }), /*#__PURE__*/_jsx(TooltipGroup, {
+      children: iconsGroup.length > 0 ? /*#__PURE__*/_jsx(Grid, {
+        maxItemWidth: 160,
+        rows: 5,
+        children: iconsGroup.map(function (_ref3) {
+          var _ref4 = _slicedToArray(_ref3, 2),
+            key = _ref4[0],
+            Icon = _ref4[1];
+          var IconRender = isMono ? Icon : Icon.Color || Icon;
+          return /*#__PURE__*/_jsx(IconItem, {
+            color: Icon.colorPrimary,
+            id: key,
+            title: Icon.title,
+            children: /*#__PURE__*/_jsx(IconRender, {
+              size: 56
+            })
+          }, key);
+        })
+      }) : /*#__PURE__*/_jsx(Empty, {
+        image: Empty.PRESENTED_IMAGE_SIMPLE
+      })
+    })]
+  });
+});
 export default Dashboard;