@docubook/ui-react 0.1.2 → 0.1.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Wildan Nursahidan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -45,6 +45,37 @@ import { Modal, Collapse, Input, Navbar } from "@docubook/ui-react";
 | `Toggle`, `ToggleGroup`                    | `@docubook/ui-react/toggle`   | Toggle switch with label/description           |
 | `Dropdown`, `DropdownItem`, `DropdownLink` | `@docubook/ui-react/dropdown` | Details-based dropdown menu                    |
 
+#### FnKey with Lucide Icons
+
+`FnKey` renders HTML entities by default. Call `FnKey.configure()` once at your app entry point to use Lucide icons instead:
+
+```tsx
+// app/layout.tsx or main.tsx
+import {
+  Command, Option, ChevronUp, ArrowBigUp,
+  CircleArrowOutUpLeft, Space, Delete, ArrowRightToLine,
+  ChevronDown, ChevronLeft, ChevronRight,
+} from "lucide-react";
+import { FnKey } from "@docubook/ui-react/kbd";
+
+FnKey.configure({
+  Command, Option, ChevronUp, ArrowBigUp,
+  CircleArrowOutUpLeft, Space, Delete, ArrowRightToLine,
+  ChevronDown, ChevronLeft, ChevronRight,
+});
+```
+
+Then use `FnKey` anywhere — icons are applied globally:
+
+```tsx
+import { Kbd, FnKey } from "@docubook/ui-react/kbd";
+
+<Kbd><FnKey.Cmd /></Kbd>   // → Command icon
+<Kbd><FnKey.Shift /></Kbd> // → ArrowBigUp icon
+```
+
+Without `configure()`, all keys fall back to HTML entities automatically.
+
 #### PaginationDocs with Custom Icons
 
 ```tsx

package/dist/chunk-QOGH6NKS.js

@@ -0,0 +1,45 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  cn
+} from "./chunk-GRADTONK.js";
+
+// src/base/kbd.tsx
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var Kbd = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, className, size } = _b, props = __objRest(_b, ["children", "className", "size"]);
+    return /* @__PURE__ */ jsx("kbd", __spreadProps(__spreadValues({ ref, className: cn("kbd", size && `kbd-${size}`, className) }, props), { children }));
+  }
+);
+Kbd.displayName = "Kbd";
+var _icons = {};
+var iconSize = 12;
+function Key({ icon: Icon, entity }) {
+  if (Icon) return /* @__PURE__ */ jsx(Icon, { size: iconSize });
+  return /* @__PURE__ */ jsx("span", { style: { fontSize: iconSize }, children: entity });
+}
+var FnKey = {
+  configure(icons) {
+    _icons = icons;
+  },
+  Cmd: () => /* @__PURE__ */ jsx(Key, { icon: _icons.Command, entity: "\u2318" }),
+  Option: () => /* @__PURE__ */ jsx(Key, { icon: _icons.Option, entity: "\u2325" }),
+  Ctrl: () => /* @__PURE__ */ jsx(Key, { icon: _icons.ChevronUp, entity: "\u2303" }),
+  Shift: () => /* @__PURE__ */ jsx(Key, { icon: _icons.ArrowBigUp, entity: "\u21E7" }),
+  Esc: () => /* @__PURE__ */ jsx(Key, { icon: _icons.CircleArrowOutUpLeft, entity: "\u238B" }),
+  Space: () => /* @__PURE__ */ jsx(Key, { icon: _icons.Space, entity: "\u2423" }),
+  Delete: () => /* @__PURE__ */ jsx(Key, { icon: _icons.Delete, entity: "\u232B" }),
+  Tab: () => /* @__PURE__ */ jsx(Key, { icon: _icons.ArrowRightToLine, entity: "\u21E5" }),
+  Up: () => /* @__PURE__ */ jsx(Key, { icon: _icons.ChevronUp, entity: "\u2191" }),
+  Down: () => /* @__PURE__ */ jsx(Key, { icon: _icons.ChevronDown, entity: "\u2193" }),
+  Left: () => /* @__PURE__ */ jsx(Key, { icon: _icons.ChevronLeft, entity: "\u2190" }),
+  Right: () => /* @__PURE__ */ jsx(Key, { icon: _icons.ChevronRight, entity: "\u2192" })
+};
+
+export {
+  Kbd,
+  FnKey
+};

package/dist/chunk-TDFVUBGO.cjs

@@ -0,0 +1,45 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+
+var _chunk2DFF5NELcjs = require('./chunk-2DFF5NEL.cjs');
+
+// src/base/kbd.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var Kbd = _react.forwardRef.call(void 0, 
+  (_a, ref) => {
+    var _b = _a, { children, className, size } = _b, props = _chunk2DFF5NELcjs.__objRest.call(void 0, _b, ["children", "className", "size"]);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "kbd", _chunk2DFF5NELcjs.__spreadProps.call(void 0, _chunk2DFF5NELcjs.__spreadValues.call(void 0, { ref, className: _chunk2DFF5NELcjs.cn.call(void 0, "kbd", size && `kbd-${size}`, className) }, props), { children }));
+  }
+);
+Kbd.displayName = "Kbd";
+var _icons = {};
+var iconSize = 12;
+function Key({ icon: Icon, entity }) {
+  if (Icon) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { size: iconSize });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontSize: iconSize }, children: entity });
+}
+var FnKey = {
+  configure(icons) {
+    _icons = icons;
+  },
+  Cmd: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Key, { icon: _icons.Command, entity: "\u2318" }),
+  Option: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Key, { icon: _icons.Option, entity: "\u2325" }),
+  Ctrl: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Key, { icon: _icons.ChevronUp, entity: "\u2303" }),
+  Shift: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Key, { icon: _icons.ArrowBigUp, entity: "\u21E7" }),
+  Esc: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Key, { icon: _icons.CircleArrowOutUpLeft, entity: "\u238B" }),
+  Space: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Key, { icon: _icons.Space, entity: "\u2423" }),
+  Delete: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Key, { icon: _icons.Delete, entity: "\u232B" }),
+  Tab: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Key, { icon: _icons.ArrowRightToLine, entity: "\u21E5" }),
+  Up: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Key, { icon: _icons.ChevronUp, entity: "\u2191" }),
+  Down: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Key, { icon: _icons.ChevronDown, entity: "\u2193" }),
+  Left: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Key, { icon: _icons.ChevronLeft, entity: "\u2190" }),
+  Right: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Key, { icon: _icons.ChevronRight, entity: "\u2192" })
+};
+
+
+
+
+exports.Kbd = Kbd; exports.FnKey = FnKey;

package/dist/index.cjs

@@ -47,7 +47,7 @@ var _chunkMWJV72OMcjs = require('./chunk-MWJV72OM.cjs');
 
 
 
-var _chunkK6B7XOJ5cjs = require('./chunk-K6B7XOJ5.cjs');
+var _chunkTDFVUBGOcjs = require('./chunk-TDFVUBGO.cjs');
 
 
 var _chunk2DFF5NELcjs = require('./chunk-2DFF5NEL.cjs');
@@ -81,4 +81,4 @@ var _chunk2DFF5NELcjs = require('./chunk-2DFF5NEL.cjs');
 
 
 
-exports.Accordion = _chunkSV4L2FGTcjs.Accordion; exports.Breadcrumb = _chunkRDRDPR67cjs.Breadcrumb; exports.BreadcrumbItem = _chunkRDRDPR67cjs.BreadcrumbItem; exports.BreadcrumbList = _chunkRDRDPR67cjs.BreadcrumbList; exports.BreadcrumbPage = _chunkRDRDPR67cjs.BreadcrumbPage; exports.Collapse = _chunkSV4L2FGTcjs.Collapse; exports.Drawer = _chunkBHHZBMD4cjs.Drawer; exports.DrawerContent = _chunkBHHZBMD4cjs.DrawerContent; exports.DrawerSidePanel = _chunkBHHZBMD4cjs.DrawerSidePanel; exports.DrawerTrigger = _chunkBHHZBMD4cjs.DrawerTrigger; exports.Dropdown = _chunkLUVR2YGTcjs.Dropdown; exports.DropdownItem = _chunkLUVR2YGTcjs.DropdownItem; exports.DropdownLink = _chunkLUVR2YGTcjs.DropdownLink; exports.FnKey = _chunkK6B7XOJ5cjs.FnKey; exports.Input = _chunkMWJV72OMcjs.Input; exports.InputGroup = _chunkMWJV72OMcjs.InputGroup; exports.Kbd = _chunkK6B7XOJ5cjs.Kbd; exports.Logo = _chunk6B7U7IWTcjs.Logo; exports.Modal = _chunkHTH2UTCLcjs.Modal; exports.NavMenu = _chunk6B7U7IWTcjs.NavMenu; exports.NavMenuLink = _chunk6B7U7IWTcjs.NavMenuLink; exports.Navbar = _chunk6B7U7IWTcjs.Navbar; exports.PaginationDocs = _chunkK22HSWMWcjs.PaginationDocs; exports.ThemeControllerToggle = _chunk5SA5UPFQcjs.ThemeControllerToggle; exports.Toggle = _chunkOO3HHTPVcjs.Toggle; exports.ToggleGroup = _chunkOO3HHTPVcjs.ToggleGroup; exports.cn = _chunk2DFF5NELcjs.cn; exports.useDrawerState = _chunkBHHZBMD4cjs.useDrawerState; exports.useModal = _chunkHTH2UTCLcjs.useModal;
+exports.Accordion = _chunkSV4L2FGTcjs.Accordion; exports.Breadcrumb = _chunkRDRDPR67cjs.Breadcrumb; exports.BreadcrumbItem = _chunkRDRDPR67cjs.BreadcrumbItem; exports.BreadcrumbList = _chunkRDRDPR67cjs.BreadcrumbList; exports.BreadcrumbPage = _chunkRDRDPR67cjs.BreadcrumbPage; exports.Collapse = _chunkSV4L2FGTcjs.Collapse; exports.Drawer = _chunkBHHZBMD4cjs.Drawer; exports.DrawerContent = _chunkBHHZBMD4cjs.DrawerContent; exports.DrawerSidePanel = _chunkBHHZBMD4cjs.DrawerSidePanel; exports.DrawerTrigger = _chunkBHHZBMD4cjs.DrawerTrigger; exports.Dropdown = _chunkLUVR2YGTcjs.Dropdown; exports.DropdownItem = _chunkLUVR2YGTcjs.DropdownItem; exports.DropdownLink = _chunkLUVR2YGTcjs.DropdownLink; exports.FnKey = _chunkTDFVUBGOcjs.FnKey; exports.Input = _chunkMWJV72OMcjs.Input; exports.InputGroup = _chunkMWJV72OMcjs.InputGroup; exports.Kbd = _chunkTDFVUBGOcjs.Kbd; exports.Logo = _chunk6B7U7IWTcjs.Logo; exports.Modal = _chunkHTH2UTCLcjs.Modal; exports.NavMenu = _chunk6B7U7IWTcjs.NavMenu; exports.NavMenuLink = _chunk6B7U7IWTcjs.NavMenuLink; exports.Navbar = _chunk6B7U7IWTcjs.Navbar; exports.PaginationDocs = _chunkK22HSWMWcjs.PaginationDocs; exports.ThemeControllerToggle = _chunk5SA5UPFQcjs.ThemeControllerToggle; exports.Toggle = _chunkOO3HHTPVcjs.Toggle; exports.ToggleGroup = _chunkOO3HHTPVcjs.ToggleGroup; exports.cn = _chunk2DFF5NELcjs.cn; exports.useDrawerState = _chunkBHHZBMD4cjs.useDrawerState; exports.useModal = _chunkHTH2UTCLcjs.useModal;

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 export { cn } from './cn.cjs';
 export { Input, InputColor, InputGroup, InputGroupProps, InputProps, InputSize } from './input.cjs';
-export { FnKey, Kbd, KbdProps, KbdSize } from './kbd.cjs';
+export { FnKey, FnKeyIcons, Kbd, KbdProps, KbdSize } from './kbd.cjs';
 export { Toggle, ToggleColor, ToggleGroup, ToggleGroupItem, ToggleGroupProps, ToggleProps, ToggleSize } from './toggle.cjs';
 export { Dropdown, DropdownItem, DropdownItemProps, DropdownLink, DropdownProps } from './dropdown.cjs';
 export { Modal, ModalProps, useModal } from './modal.cjs';

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { cn } from './cn.js';
 export { Input, InputColor, InputGroup, InputGroupProps, InputProps, InputSize } from './input.js';
-export { FnKey, Kbd, KbdProps, KbdSize } from './kbd.js';
+export { FnKey, FnKeyIcons, Kbd, KbdProps, KbdSize } from './kbd.js';
 export { Toggle, ToggleColor, ToggleGroup, ToggleGroupItem, ToggleGroupProps, ToggleProps, ToggleSize } from './toggle.js';
 export { Dropdown, DropdownItem, DropdownItemProps, DropdownLink, DropdownProps } from './dropdown.js';
 export { Modal, ModalProps, useModal } from './modal.js';

package/dist/index.js

@@ -47,7 +47,7 @@ import {
 import {
   FnKey,
   Kbd
-} from "./chunk-7BWAXCW2.js";
+} from "./chunk-QOGH6NKS.js";
 import {
   cn
 } from "./chunk-GRADTONK.js";

package/dist/kbd.cjs

@@ -2,9 +2,9 @@
 
 
 
-var _chunkK6B7XOJ5cjs = require('./chunk-K6B7XOJ5.cjs');
+var _chunkTDFVUBGOcjs = require('./chunk-TDFVUBGO.cjs');
 require('./chunk-2DFF5NEL.cjs');
 
 
 
-exports.FnKey = _chunkK6B7XOJ5cjs.FnKey; exports.Kbd = _chunkK6B7XOJ5cjs.Kbd;
+exports.FnKey = _chunkTDFVUBGOcjs.FnKey; exports.Kbd = _chunkTDFVUBGOcjs.Kbd;

package/dist/kbd.d.cts

@@ -9,7 +9,24 @@ interface KbdProps extends React.HTMLAttributes<HTMLElement> {
 }
 declare const Kbd: react.ForwardRefExoticComponent<KbdProps & react.RefAttributes<HTMLElement>>;
 
+type IconComponent = React.ComponentType<{
+    size?: number;
+}>;
+interface FnKeyIcons {
+    Command?: IconComponent;
+    Option?: IconComponent;
+    ArrowBigUp?: IconComponent;
+    CircleArrowOutUpLeft?: IconComponent;
+    Space?: IconComponent;
+    Delete?: IconComponent;
+    ArrowRightToLine?: IconComponent;
+    ChevronUp?: IconComponent;
+    ChevronDown?: IconComponent;
+    ChevronLeft?: IconComponent;
+    ChevronRight?: IconComponent;
+}
 declare const FnKey: {
+    configure(icons: FnKeyIcons): void;
     Cmd: () => react_jsx_runtime.JSX.Element;
     Option: () => react_jsx_runtime.JSX.Element;
     Ctrl: () => react_jsx_runtime.JSX.Element;
@@ -24,4 +41,4 @@ declare const FnKey: {
     Right: () => react_jsx_runtime.JSX.Element;
 };
 
-export { FnKey, Kbd, type KbdProps, type KbdSize };
+export { FnKey, type FnKeyIcons, Kbd, type KbdProps, type KbdSize };

package/dist/kbd.d.ts

@@ -9,7 +9,24 @@ interface KbdProps extends React.HTMLAttributes<HTMLElement> {
 }
 declare const Kbd: react.ForwardRefExoticComponent<KbdProps & react.RefAttributes<HTMLElement>>;
 
+type IconComponent = React.ComponentType<{
+    size?: number;
+}>;
+interface FnKeyIcons {
+    Command?: IconComponent;
+    Option?: IconComponent;
+    ArrowBigUp?: IconComponent;
+    CircleArrowOutUpLeft?: IconComponent;
+    Space?: IconComponent;
+    Delete?: IconComponent;
+    ArrowRightToLine?: IconComponent;
+    ChevronUp?: IconComponent;
+    ChevronDown?: IconComponent;
+    ChevronLeft?: IconComponent;
+    ChevronRight?: IconComponent;
+}
 declare const FnKey: {
+    configure(icons: FnKeyIcons): void;
     Cmd: () => react_jsx_runtime.JSX.Element;
     Option: () => react_jsx_runtime.JSX.Element;
     Ctrl: () => react_jsx_runtime.JSX.Element;
@@ -24,4 +41,4 @@ declare const FnKey: {
     Right: () => react_jsx_runtime.JSX.Element;
 };
 
-export { FnKey, Kbd, type KbdProps, type KbdSize };
+export { FnKey, type FnKeyIcons, Kbd, type KbdProps, type KbdSize };

package/dist/kbd.js

@@ -2,7 +2,7 @@
 import {
   FnKey,
   Kbd
-} from "./chunk-7BWAXCW2.js";
+} from "./chunk-QOGH6NKS.js";
 import "./chunk-GRADTONK.js";
 export {
   FnKey,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docubook/ui-react",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "React + DaisyUI component library for documentation sites",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -143,16 +143,6 @@
     "README.md"
   ],
   "sideEffects": false,
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint src --ext .ts,.tsx",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "clean": "rm -rf dist",
-    "prepublishOnly": "pnpm run clean && pnpm run build && pnpm run lint && pnpm run typecheck && pnpm run test"
-  },
   "peerDependencies": {
     "daisyui": ">=5.0.0 <6.0.0",
     "lucide-react": ">=1.0.0",
@@ -173,12 +163,12 @@
     "react-dom": "^19.2.0",
     "tsup": "^8.5.0",
     "typescript": "^5.9.3",
-    "vitest": "^4.1.6"
+    "vitest": "^4.1.8"
   },
   "publishConfig": {
     "access": "public"
   },
-  "homepage": "https://docubook.pro/",
+  "homepage": "https://github.com/DocuBook/docubook/tree/main/packages/ui/react",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/DocuBook/docubook.git",
@@ -200,5 +190,14 @@
   "dependencies": {
     "clsx": "^2.1.1",
     "tailwind-merge": "^2.6.1"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist"
   }
-}
+}

package/dist/chunk-7BWAXCW2.js

@@ -1,37 +0,0 @@
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues,
-  cn
-} from "./chunk-GRADTONK.js";
-
-// src/base/kbd.tsx
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-var Kbd = forwardRef(
-  (_a, ref) => {
-    var _b = _a, { children, className, size } = _b, props = __objRest(_b, ["children", "className", "size"]);
-    return /* @__PURE__ */ jsx("kbd", __spreadProps(__spreadValues({ ref, className: cn("kbd", size && `kbd-${size}`, className) }, props), { children }));
-  }
-);
-Kbd.displayName = "Kbd";
-var iconSize = 12;
-var FnKey = {
-  Cmd: () => /* @__PURE__ */ jsx("span", { style: { fontSize: iconSize }, children: "\u2318" }),
-  Option: () => /* @__PURE__ */ jsx("span", { style: { fontSize: iconSize }, children: "\u2325" }),
-  Ctrl: () => /* @__PURE__ */ jsx("span", { style: { fontSize: iconSize }, children: "\u2303" }),
-  Shift: () => /* @__PURE__ */ jsx("span", { style: { fontSize: iconSize }, children: "\u21E7" }),
-  Esc: () => /* @__PURE__ */ jsx("span", { style: { fontSize: iconSize }, children: "\u238B" }),
-  Space: () => /* @__PURE__ */ jsx("span", { style: { fontSize: iconSize }, children: "\u2423" }),
-  Delete: () => /* @__PURE__ */ jsx("span", { style: { fontSize: iconSize }, children: "\u232B" }),
-  Tab: () => /* @__PURE__ */ jsx("span", { style: { fontSize: iconSize }, children: "\u21E5" }),
-  Up: () => /* @__PURE__ */ jsx("span", { style: { fontSize: iconSize }, children: "\u2191" }),
-  Down: () => /* @__PURE__ */ jsx("span", { style: { fontSize: iconSize }, children: "\u2193" }),
-  Left: () => /* @__PURE__ */ jsx("span", { style: { fontSize: iconSize }, children: "\u2190" }),
-  Right: () => /* @__PURE__ */ jsx("span", { style: { fontSize: iconSize }, children: "\u2192" })
-};
-
-export {
-  Kbd,
-  FnKey
-};

package/dist/chunk-K6B7XOJ5.cjs

@@ -1,37 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
-
-
-
-
-var _chunk2DFF5NELcjs = require('./chunk-2DFF5NEL.cjs');
-
-// src/base/kbd.tsx
-var _react = require('react');
-var _jsxruntime = require('react/jsx-runtime');
-var Kbd = _react.forwardRef.call(void 0, 
-  (_a, ref) => {
-    var _b = _a, { children, className, size } = _b, props = _chunk2DFF5NELcjs.__objRest.call(void 0, _b, ["children", "className", "size"]);
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "kbd", _chunk2DFF5NELcjs.__spreadProps.call(void 0, _chunk2DFF5NELcjs.__spreadValues.call(void 0, { ref, className: _chunk2DFF5NELcjs.cn.call(void 0, "kbd", size && `kbd-${size}`, className) }, props), { children }));
-  }
-);
-Kbd.displayName = "Kbd";
-var iconSize = 12;
-var FnKey = {
-  Cmd: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontSize: iconSize }, children: "\u2318" }),
-  Option: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontSize: iconSize }, children: "\u2325" }),
-  Ctrl: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontSize: iconSize }, children: "\u2303" }),
-  Shift: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontSize: iconSize }, children: "\u21E7" }),
-  Esc: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontSize: iconSize }, children: "\u238B" }),
-  Space: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontSize: iconSize }, children: "\u2423" }),
-  Delete: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontSize: iconSize }, children: "\u232B" }),
-  Tab: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontSize: iconSize }, children: "\u21E5" }),
-  Up: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontSize: iconSize }, children: "\u2191" }),
-  Down: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontSize: iconSize }, children: "\u2193" }),
-  Left: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontSize: iconSize }, children: "\u2190" }),
-  Right: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontSize: iconSize }, children: "\u2192" })
-};
-
-
-
-
-exports.Kbd = Kbd; exports.FnKey = FnKey;