@shapesos/clay 0.4.1 → 0.5.1

package/dist/index.d.cts

@@ -1,25 +1,10 @@
 export { ColorToken, TypographyStyle, TypographyType, colors, fontFamilies, typographyMixin, typographyStyles, typographyTypes } from './tokens.cjs';
-export { ChatContext, ChatContextValue, ChatMessage, ChatMessageType, MessageRole, useChatContext, useCopyToClipboard } from './chat.cjs';
+export { ChatContext, ChatContextValue, ChatMessage, ChatMessageType, MESSAGE_ROLE, MessageRole, useChatContext, useCopyToClipboard } from './chat.cjs';
 export { Icon, IconButton, IconButtonProps, IconButtonSize, IconProps } from './icon.cjs';
-import { ComponentType, SVGProps, ReactElement } from 'react';
+export { IconCtrl, KEYBOARD_SHORTCUT_VARIANTS, KeyIcon, KeyboardShortcut, KeyboardShortcutProps, KeyboardShortcutVariant } from './keyboard-shortcut.cjs';
 export { Lottie, LottieAnimationData, LottieProps, LottieRef } from './lottie.cjs';
+export { TextArea, TextAreaProps } from './text-area.cjs';
+export { markdownToPlainText, mergeRefs } from './utils.cjs';
 import 'react/jsx-runtime';
+import 'react';
 import 'lottie-web';
-
-type KeyIcon = ComponentType<SVGProps<SVGSVGElement>>;
-declare const KEYBOARD_SHORTCUT_VARIANTS: {
-    readonly OUTLINED: "outlined";
-    readonly FILLED: "filled";
-};
-type KeyboardShortcutVariant = (typeof KEYBOARD_SHORTCUT_VARIANTS)[keyof typeof KEYBOARD_SHORTCUT_VARIANTS];
-interface KeyboardShortcutProps {
-    keys: KeyIcon[];
-    variant?: KeyboardShortcutVariant;
-    className?: string;
-}
-
-declare function KeyboardShortcut({ keys, variant, className, }: KeyboardShortcutProps): ReactElement;
-
-declare function CtrlIcon(props: SVGProps<SVGSVGElement>): ReactElement;
-
-export { CtrlIcon, KEYBOARD_SHORTCUT_VARIANTS, type KeyIcon, KeyboardShortcut, type KeyboardShortcutProps, type KeyboardShortcutVariant };

package/dist/index.d.ts

@@ -1,25 +1,10 @@
 export { ColorToken, TypographyStyle, TypographyType, colors, fontFamilies, typographyMixin, typographyStyles, typographyTypes } from './tokens.js';
-export { ChatContext, ChatContextValue, ChatMessage, ChatMessageType, MessageRole, useChatContext, useCopyToClipboard } from './chat.js';
+export { ChatContext, ChatContextValue, ChatMessage, ChatMessageType, MESSAGE_ROLE, MessageRole, useChatContext, useCopyToClipboard } from './chat.js';
 export { Icon, IconButton, IconButtonProps, IconButtonSize, IconProps } from './icon.js';
-import { ComponentType, SVGProps, ReactElement } from 'react';
+export { IconCtrl, KEYBOARD_SHORTCUT_VARIANTS, KeyIcon, KeyboardShortcut, KeyboardShortcutProps, KeyboardShortcutVariant } from './keyboard-shortcut.js';
 export { Lottie, LottieAnimationData, LottieProps, LottieRef } from './lottie.js';
+export { TextArea, TextAreaProps } from './text-area.js';
+export { markdownToPlainText, mergeRefs } from './utils.js';
 import 'react/jsx-runtime';
+import 'react';
 import 'lottie-web';
-
-type KeyIcon = ComponentType<SVGProps<SVGSVGElement>>;
-declare const KEYBOARD_SHORTCUT_VARIANTS: {
-    readonly OUTLINED: "outlined";
-    readonly FILLED: "filled";
-};
-type KeyboardShortcutVariant = (typeof KEYBOARD_SHORTCUT_VARIANTS)[keyof typeof KEYBOARD_SHORTCUT_VARIANTS];
-interface KeyboardShortcutProps {
-    keys: KeyIcon[];
-    variant?: KeyboardShortcutVariant;
-    className?: string;
-}
-
-declare function KeyboardShortcut({ keys, variant, className, }: KeyboardShortcutProps): ReactElement;
-
-declare function CtrlIcon(props: SVGProps<SVGSVGElement>): ReactElement;
-
-export { CtrlIcon, KEYBOARD_SHORTCUT_VARIANTS, type KeyIcon, KeyboardShortcut, type KeyboardShortcutProps, type KeyboardShortcutVariant };

package/dist/index.js

@@ -2,102 +2,60 @@ import "./chunk-C77QMQNT.js";
 import {
   ChatContext,
   ChatMessage,
+  MESSAGE_ROLE,
   useChatContext,
   useCopyToClipboard
-} from "./chunk-EPS4LOOW.js";
+} from "./chunk-SYMZU32H.js";
+import "./chunk-72TJUKMV.js";
+import {
+  IconButton
+} from "./chunk-MLCRDVQ2.js";
+import {
+  Lottie
+} from "./chunk-BIATJTD4.js";
+import {
+  TextArea
+} from "./chunk-JC2RQL5O.js";
 import {
   fontFamilies,
   typographyMixin,
   typographyStyles,
   typographyTypes
-} from "./chunk-A6DKIFWS.js";
-import "./chunk-72TJUKMV.js";
+} from "./chunk-WQ2QTUYA.js";
 import {
-  Icon,
-  IconButton
-} from "./chunk-AEXYOY5H.js";
+  IconCtrl,
+  KEYBOARD_SHORTCUT_VARIANTS,
+  KeyboardShortcut
+} from "./chunk-WZHNMC6P.js";
+import {
+  Icon
+} from "./chunk-OLJIJYB5.js";
 import {
   colors
-} from "./chunk-6HNZQ2BF.js";
+} from "./chunk-JF3P66JF.js";
+import "./chunk-DRBRT57F.js";
 import {
-  Lottie
-} from "./chunk-BIATJTD4.js";
+  markdownToPlainText
+} from "./chunk-SMTOVZ3O.js";
+import {
+  mergeRefs
+} from "./chunk-K2Q5MQWJ.js";
 import "./chunk-5WRI5ZAA.js";
-
-// src/components/keyboard-shortcut/keyboard-shortcut-styles.ts
-import styled, { css } from "styled-components";
-
-// src/components/keyboard-shortcut/types.ts
-var KEYBOARD_SHORTCUT_VARIANTS = {
-  OUTLINED: "outlined",
-  FILLED: "filled"
-};
-
-// src/components/keyboard-shortcut/keyboard-shortcut-styles.ts
-var variantStyles = {
-  [KEYBOARD_SHORTCUT_VARIANTS.OUTLINED]: css`
-    border: 1px solid ${colors["brown-70"]};
-    color: ${colors["brown-10"]};
-  `,
-  [KEYBOARD_SHORTCUT_VARIANTS.FILLED]: css`
-    background: ${colors["brown-80"]};
-    color: ${colors["brown-10"]};
-  `
-};
-var Wrapper = styled.div`
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-`;
-var Key = styled.kbd`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px;
-  border-radius: 6px;
-  ${({ $variant }) => variantStyles[$variant]};
-`;
-
-// src/components/keyboard-shortcut/keyboard-shortcut.tsx
-import { jsx } from "react/jsx-runtime";
-function KeyboardShortcut({
-  keys,
-  variant = KEYBOARD_SHORTCUT_VARIANTS.OUTLINED,
-  className
-}) {
-  return /* @__PURE__ */ jsx(Wrapper, { className, children: keys.map((KeyComponent, index) => /* @__PURE__ */ jsx(Key, { $variant: variant, children: /* @__PURE__ */ jsx(Icon, { icon: KeyComponent, size: 12 }) }, index)) });
-}
-
-// src/components/keyboard-shortcut/icons/ctrl-icon.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-function CtrlIcon(props) {
-  const { width = 24, height = 24, ...rest } = props;
-  return /* @__PURE__ */ jsx2("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width, height, fill: "none", ...rest, children: /* @__PURE__ */ jsx2(
-    "text",
-    {
-      x: "50%",
-      y: "50%",
-      dominantBaseline: "central",
-      textAnchor: "middle",
-      fill: "currentColor",
-      fontFamily: "Geist, sans-serif",
-      fontWeight: 500,
-      fontSize: 14,
-      children: "Ctrl"
-    }
-  ) });
-}
 export {
   ChatContext,
   ChatMessage,
-  CtrlIcon,
   Icon,
   IconButton,
+  IconCtrl,
   KEYBOARD_SHORTCUT_VARIANTS,
   KeyboardShortcut,
   Lottie,
+  MESSAGE_ROLE,
+  TextArea,
   colors,
   fontFamilies,
+  markdownToPlainText,
+  mergeRefs,
   typographyMixin,
   typographyStyles,
   typographyTypes,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/keyboard-shortcut/keyboard-shortcut-styles.ts","../src/components/keyboard-shortcut/types.ts","../src/components/keyboard-shortcut/keyboard-shortcut.tsx","../src/components/keyboard-shortcut/icons/ctrl-icon.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { colors } from \"../../tokens/colors\";\nimport { KEYBOARD_SHORTCUT_VARIANTS } from \"./types\";\nimport type { KeyboardShortcutVariant } from \"./types\";\n\nconst variantStyles: Record<KeyboardShortcutVariant, ReturnType<typeof css>> = {\n  [KEYBOARD_SHORTCUT_VARIANTS.OUTLINED]: css`\n    border: 1px solid ${colors[\"brown-70\"]};\n    color: ${colors[\"brown-10\"]};\n  `,\n  [KEYBOARD_SHORTCUT_VARIANTS.FILLED]: css`\n    background: ${colors[\"brown-80\"]};\n    color: ${colors[\"brown-10\"]};\n  `,\n};\n\nexport const Wrapper = styled.div`\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n`;\n\nexport const Key = styled.kbd<{ $variant: KeyboardShortcutVariant }>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 4px;\n  border-radius: 6px;\n  ${({ $variant }) => variantStyles[$variant]};\n`;\n","import type { ComponentType, SVGProps } from \"react\";\n\nexport type KeyIcon = ComponentType<SVGProps<SVGSVGElement>>;\n\nexport const KEYBOARD_SHORTCUT_VARIANTS = {\n  OUTLINED: \"outlined\",\n  FILLED: \"filled\",\n} as const;\n\nexport type KeyboardShortcutVariant = (typeof KEYBOARD_SHORTCUT_VARIANTS)[keyof typeof KEYBOARD_SHORTCUT_VARIANTS];\n\nexport interface KeyboardShortcutProps {\n  keys: KeyIcon[];\n  variant?: KeyboardShortcutVariant;\n  className?: string;\n}\n","import type { ReactElement } from \"react\";\n\nimport { Icon } from \"../icon/icon\";\nimport { Key, Wrapper } from \"./keyboard-shortcut-styles\";\nimport { KEYBOARD_SHORTCUT_VARIANTS } from \"./types\";\nimport type { KeyboardShortcutProps } from \"./types\";\n\nexport function KeyboardShortcut({\n  keys,\n  variant = KEYBOARD_SHORTCUT_VARIANTS.OUTLINED,\n  className,\n}: KeyboardShortcutProps): ReactElement {\n  return (\n    <Wrapper className={className}>\n      {keys.map((KeyComponent, index) => (\n        <Key key={index} $variant={variant}>\n          <Icon icon={KeyComponent} size={12} />\n        </Key>\n      ))}\n    </Wrapper>\n  );\n}\n","import type { ReactElement, SVGProps } from \"react\";\n\nexport function CtrlIcon(props: SVGProps<SVGSVGElement>): ReactElement {\n  const { width = 24, height = 24, ...rest } = props;\n\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width={width} height={height} fill=\"none\" {...rest}>\n      <text\n        x=\"50%\"\n        y=\"50%\"\n        dominantBaseline=\"central\"\n        textAnchor=\"middle\"\n        fill=\"currentColor\"\n        fontFamily=\"Geist, sans-serif\"\n        fontWeight={500}\n        fontSize={14}\n      >\n        Ctrl\n      </text>\n    </svg>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,UAAU,WAAW;;;ACIrB,IAAM,6BAA6B;AAAA,EACxC,UAAU;AAAA,EACV,QAAQ;AACV;;;ADDA,IAAM,gBAAyE;AAAA,EAC7E,CAAC,2BAA2B,QAAQ,GAAG;AAAA,wBACjB,OAAO,UAAU,CAAC;AAAA,aAC7B,OAAO,UAAU,CAAC;AAAA;AAAA,EAE7B,CAAC,2BAA2B,MAAM,GAAG;AAAA,kBACrB,OAAO,UAAU,CAAC;AAAA,aACvB,OAAO,UAAU,CAAC;AAAA;AAE/B;AAEO,IAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAMvB,IAAM,MAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMtB,CAAC,EAAE,SAAS,MAAM,cAAc,QAAQ,CAAC;AAAA;;;AEbnC;AATH,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,UAAU,2BAA2B;AAAA,EACrC;AACF,GAAwC;AACtC,SACE,oBAAC,WAAQ,WACN,eAAK,IAAI,CAAC,cAAc,UACvB,oBAAC,OAAgB,UAAU,SACzB,8BAAC,QAAK,MAAM,cAAc,MAAM,IAAI,KAD5B,KAEV,CACD,GACH;AAEJ;;;ACdM,gBAAAA,YAAA;AALC,SAAS,SAAS,OAA8C;AACrE,QAAM,EAAE,QAAQ,IAAI,SAAS,IAAI,GAAG,KAAK,IAAI;AAE7C,SACE,gBAAAA,KAAC,SAAI,OAAM,8BAA6B,SAAQ,aAAY,OAAc,QAAgB,MAAK,QAAQ,GAAG,MACxG,0BAAAA;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,GAAE;AAAA,MACF,kBAAiB;AAAA,MACjB,YAAW;AAAA,MACX,MAAK;AAAA,MACL,YAAW;AAAA,MACX,YAAY;AAAA,MACZ,UAAU;AAAA,MACX;AAAA;AAAA,EAED,GACF;AAEJ;","names":["jsx"]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/keyboard-shortcut.cjs

@@ -0,0 +1,238 @@
+"use strict";
+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 = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (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 = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/keyboard-shortcut/index.ts
+var keyboard_shortcut_exports = {};
+__export(keyboard_shortcut_exports, {
+  IconCtrl: () => IconCtrl,
+  KEYBOARD_SHORTCUT_VARIANTS: () => KEYBOARD_SHORTCUT_VARIANTS,
+  KeyboardShortcut: () => KeyboardShortcut
+});
+module.exports = __toCommonJS(keyboard_shortcut_exports);
+
+// src/components/icon/icon.tsx
+var import_react = require("react");
+
+// src/components/icon/icon-styles.ts
+var import_styled_components = __toESM(require("styled-components"), 1);
+var STROKE_WIDTH_BY_SIZE = {
+  12: 1.4,
+  14: 1.4,
+  16: 1.8,
+  18: 1.8,
+  20: 1.8,
+  24: 1.8
+};
+var DEFAULT_STROKE_WIDTH = 1.8;
+function getStrokeWidth(size) {
+  return STROKE_WIDTH_BY_SIZE[size] ?? DEFAULT_STROKE_WIDTH;
+}
+var IconWrapper = import_styled_components.default.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: ${({ $color }) => $color ?? "currentColor"};
+  flex-shrink: 0;
+`;
+
+// src/components/icon/icon.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_SIZE = 16;
+var Icon = (0, import_react.forwardRef)(function Icon2({ icon: IconComponent, size = DEFAULT_SIZE, color, className, "aria-label": ariaLabel }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    IconWrapper,
+    {
+      ref,
+      className,
+      $color: color,
+      "aria-label": ariaLabel,
+      role: ariaLabel ? "img" : void 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconComponent, { width: size, height: size, strokeWidth: getStrokeWidth(size) })
+    }
+  );
+});
+
+// src/components/keyboard-shortcut/keyboard-shortcut-styles.ts
+var import_styled_components2 = __toESM(require("styled-components"), 1);
+
+// src/tokens/colors.ts
+var colors = {
+  // White
+  white: "#FFFFFF",
+  "white-alpha-85": "rgba(255, 255, 255, 0.85)",
+  "white-alpha-40": "rgba(255, 255, 255, 0.40)",
+  // Brown
+  "brown-10": "#FAF9F8",
+  "brown-20": "#F5F3F0",
+  "brown-30": "#EEEBE5",
+  "brown-40": "#E6E2DA",
+  "brown-50": "#CFCBC4",
+  "brown-60": "#A19E99",
+  "brown-70": "#73716D",
+  "brown-80": "#5C5A57",
+  "brown-90": "#2E2D2C",
+  "brown-100": "#171716",
+  "brown-alpha-12": "rgba(23, 23, 22, 0.12)",
+  "brown-alpha-20": "rgba(23, 23, 22, 0.20)",
+  "brown-alpha-55": "rgba(23, 23, 22, 0.55)",
+  "brown-alpha-70": "rgba(23, 23, 22, 0.70)",
+  "brown-alpha-80": "rgba(23, 23, 22, 0.80)",
+  "brown-alpha-90": "rgba(23, 23, 22, 0.90)",
+  // Fuchsia
+  "fuchsia-50": "#FAF5FF",
+  "fuchsia-300": "#F0ABFC",
+  "fuchsia-500": "#D946EF",
+  "fuchsia-600": "#C026D3",
+  "fuchsia-800": "#86198F",
+  // Pink
+  "pink-50": "#FDF2F8",
+  "pink-400": "#F472B6",
+  "pink-600": "#DB2777",
+  "pink-800": "#9D174D",
+  // Violet
+  "violet-50": "#F5F3FF",
+  "violet-400": "#A78BFA",
+  "violet-600": "#7C3AED",
+  "violet-800": "#5B21B6",
+  // Indigo
+  "indigo-50": "#EEF2FF",
+  "indigo-400": "#818CF8",
+  "indigo-500": "#6366F1",
+  "indigo-600": "#4F46E5",
+  "indigo-800": "#3730A3",
+  // Cyan
+  "cyan-50": "#E7FEFF",
+  "cyan-300": "#67E8F9",
+  "cyan-600": "#0891B2",
+  "cyan-900": "#164E63",
+  // Teal
+  "teal-50": "#EBFDF9",
+  "teal-300": "#5EEAD4",
+  "teal-600": "#0D9488",
+  // Rose
+  "rose-400": "#FB7185",
+  // Purple
+  "purple-400": "#C084FC",
+  // Blue
+  "blue-50": "#EFF6FF",
+  "blue-100": "#DBEAFE",
+  "blue-300": "#93C5FD",
+  "blue-400": "#60A5FA",
+  "blue-600": "#2563EB",
+  "blue-800": "#1E40AF",
+  // Sky
+  "sky-300": "#7DD3FC",
+  // Green
+  "green-50": "#ECF9F0",
+  "green-100": "#D4F1D9",
+  "green-400": "#3DC269",
+  "green-700": "#277C43",
+  "green-800": "#1C5930",
+  // Orange
+  "orange-50": "#FFF7ED",
+  "orange-100": "#FFEDD5",
+  "orange-200": "#FED7AA",
+  "orange-500": "#F97316",
+  "orange-600": "#EA580C",
+  // Red
+  "red-50": "#FEF2F2",
+  "red-100": "#FEE2E2",
+  "red-200": "#FECACA",
+  "red-400": "#F7776C",
+  "red-500": "#EF4444",
+  "red-600": "#DC2626"
+};
+
+// src/components/keyboard-shortcut/types.ts
+var KEYBOARD_SHORTCUT_VARIANTS = {
+  OUTLINED: "outlined",
+  FILLED: "filled"
+};
+
+// src/components/keyboard-shortcut/keyboard-shortcut-styles.ts
+var variantStyles = {
+  [KEYBOARD_SHORTCUT_VARIANTS.OUTLINED]: import_styled_components2.css`
+    border: 1px solid ${colors["white-alpha-40"]};
+    color: ${colors["brown-10"]};
+  `,
+  [KEYBOARD_SHORTCUT_VARIANTS.FILLED]: import_styled_components2.css`
+    background: ${colors["brown-80"]};
+    color: ${colors["brown-10"]};
+  `
+};
+var Wrapper = import_styled_components2.default.div`
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+`;
+var Key = import_styled_components2.default.kbd`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  border-radius: 6px;
+  ${({ $variant }) => variantStyles[$variant]};
+`;
+
+// src/components/keyboard-shortcut/keyboard-shortcut.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function KeyboardShortcut({
+  keys,
+  variant = KEYBOARD_SHORTCUT_VARIANTS.OUTLINED,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Wrapper, { className, children: keys.map((KeyComponent, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Key, { $variant: variant, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { icon: KeyComponent, size: 12 }) }, index)) });
+}
+
+// src/components/keyboard-shortcut/icons/icon-ctrl.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function IconCtrl(props) {
+  const { width = 24, height = 24, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width, height, fill: "none", ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "text",
+    {
+      x: "50%",
+      y: "50%",
+      dominantBaseline: "central",
+      textAnchor: "middle",
+      fill: "currentColor",
+      fontFamily: "Geist, sans-serif",
+      fontWeight: 300,
+      fontSize: 14,
+      children: "Ctrl"
+    }
+  ) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  IconCtrl,
+  KEYBOARD_SHORTCUT_VARIANTS,
+  KeyboardShortcut
+});
+//# sourceMappingURL=keyboard-shortcut.cjs.map

package/dist/keyboard-shortcut.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/keyboard-shortcut/index.ts","../src/components/icon/icon.tsx","../src/components/icon/icon-styles.ts","../src/components/keyboard-shortcut/keyboard-shortcut-styles.ts","../src/tokens/colors.ts","../src/components/keyboard-shortcut/types.ts","../src/components/keyboard-shortcut/keyboard-shortcut.tsx","../src/components/keyboard-shortcut/icons/icon-ctrl.tsx"],"sourcesContent":["export { KeyboardShortcut } from \"./keyboard-shortcut\";\nexport { IconCtrl } from \"./icons/icon-ctrl\";\nexport { KEYBOARD_SHORTCUT_VARIANTS } from \"./types\";\nexport type { KeyboardShortcutProps, KeyIcon, KeyboardShortcutVariant } from \"./types\";\n","import { forwardRef } from \"react\";\n\nimport { IconWrapper, getStrokeWidth } from \"./icon-styles\";\nimport type { IconProps } from \"./types\";\n\nconst DEFAULT_SIZE = 16;\n\nexport const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon(\n  { icon: IconComponent, size = DEFAULT_SIZE, color, className, \"aria-label\": ariaLabel },\n  ref\n) {\n  return (\n    <IconWrapper\n      ref={ref}\n      className={className}\n      $color={color}\n      aria-label={ariaLabel}\n      role={ariaLabel ? \"img\" : undefined}\n    >\n      <IconComponent width={size} height={size} strokeWidth={getStrokeWidth(size)} />\n    </IconWrapper>\n  );\n});\n","import styled from \"styled-components\";\n\nexport const STROKE_WIDTH_BY_SIZE: Record<number, number> = {\n  12: 1.4,\n  14: 1.4,\n  16: 1.8,\n  18: 1.8,\n  20: 1.8,\n  24: 1.8,\n};\n\nexport const DEFAULT_STROKE_WIDTH = 1.8;\n\nexport function getStrokeWidth(size: number): number {\n  return STROKE_WIDTH_BY_SIZE[size] ?? DEFAULT_STROKE_WIDTH;\n}\n\nexport const IconWrapper = styled.span<{ $color?: string }>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: ${({ $color }) => $color ?? \"currentColor\"};\n  flex-shrink: 0;\n`;\n","import styled, { css } from \"styled-components\";\n\nimport { colors } from \"../../tokens/colors\";\nimport { KEYBOARD_SHORTCUT_VARIANTS } from \"./types\";\nimport type { KeyboardShortcutVariant } from \"./types\";\n\nconst variantStyles: Record<KeyboardShortcutVariant, ReturnType<typeof css>> = {\n  [KEYBOARD_SHORTCUT_VARIANTS.OUTLINED]: css`\n    border: 1px solid ${colors[\"white-alpha-40\"]};\n    color: ${colors[\"brown-10\"]};\n  `,\n  [KEYBOARD_SHORTCUT_VARIANTS.FILLED]: css`\n    background: ${colors[\"brown-80\"]};\n    color: ${colors[\"brown-10\"]};\n  `,\n};\n\nexport const Wrapper = styled.div`\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n`;\n\nexport const Key = styled.kbd<{ $variant: KeyboardShortcutVariant }>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px;\n  border-radius: 6px;\n  ${({ $variant }) => variantStyles[$variant]};\n`;\n","export const colors = {\n  // White\n  white: \"#FFFFFF\",\n  \"white-alpha-85\": \"rgba(255, 255, 255, 0.85)\",\n  \"white-alpha-40\": \"rgba(255, 255, 255, 0.40)\",\n\n  // Brown\n  \"brown-10\": \"#FAF9F8\",\n  \"brown-20\": \"#F5F3F0\",\n  \"brown-30\": \"#EEEBE5\",\n  \"brown-40\": \"#E6E2DA\",\n  \"brown-50\": \"#CFCBC4\",\n  \"brown-60\": \"#A19E99\",\n  \"brown-70\": \"#73716D\",\n  \"brown-80\": \"#5C5A57\",\n  \"brown-90\": \"#2E2D2C\",\n  \"brown-100\": \"#171716\",\n  \"brown-alpha-12\": \"rgba(23, 23, 22, 0.12)\",\n  \"brown-alpha-20\": \"rgba(23, 23, 22, 0.20)\",\n  \"brown-alpha-55\": \"rgba(23, 23, 22, 0.55)\",\n  \"brown-alpha-70\": \"rgba(23, 23, 22, 0.70)\",\n  \"brown-alpha-80\": \"rgba(23, 23, 22, 0.80)\",\n  \"brown-alpha-90\": \"rgba(23, 23, 22, 0.90)\",\n\n  // Fuchsia\n  \"fuchsia-50\": \"#FAF5FF\",\n  \"fuchsia-300\": \"#F0ABFC\",\n  \"fuchsia-500\": \"#D946EF\",\n  \"fuchsia-600\": \"#C026D3\",\n  \"fuchsia-800\": \"#86198F\",\n\n  // Pink\n  \"pink-50\": \"#FDF2F8\",\n  \"pink-400\": \"#F472B6\",\n  \"pink-600\": \"#DB2777\",\n  \"pink-800\": \"#9D174D\",\n\n  // Violet\n  \"violet-50\": \"#F5F3FF\",\n  \"violet-400\": \"#A78BFA\",\n  \"violet-600\": \"#7C3AED\",\n  \"violet-800\": \"#5B21B6\",\n\n  // Indigo\n  \"indigo-50\": \"#EEF2FF\",\n  \"indigo-400\": \"#818CF8\",\n  \"indigo-500\": \"#6366F1\",\n  \"indigo-600\": \"#4F46E5\",\n  \"indigo-800\": \"#3730A3\",\n\n  // Cyan\n  \"cyan-50\": \"#E7FEFF\",\n  \"cyan-300\": \"#67E8F9\",\n  \"cyan-600\": \"#0891B2\",\n  \"cyan-900\": \"#164E63\",\n\n  // Teal\n  \"teal-50\": \"#EBFDF9\",\n  \"teal-300\": \"#5EEAD4\",\n  \"teal-600\": \"#0D9488\",\n\n  // Rose\n  \"rose-400\": \"#FB7185\",\n\n  // Purple\n  \"purple-400\": \"#C084FC\",\n\n  // Blue\n  \"blue-50\": \"#EFF6FF\",\n  \"blue-100\": \"#DBEAFE\",\n  \"blue-300\": \"#93C5FD\",\n  \"blue-400\": \"#60A5FA\",\n  \"blue-600\": \"#2563EB\",\n  \"blue-800\": \"#1E40AF\",\n\n  // Sky\n  \"sky-300\": \"#7DD3FC\",\n\n  // Green\n  \"green-50\": \"#ECF9F0\",\n  \"green-100\": \"#D4F1D9\",\n  \"green-400\": \"#3DC269\",\n  \"green-700\": \"#277C43\",\n  \"green-800\": \"#1C5930\",\n\n  // Orange\n  \"orange-50\": \"#FFF7ED\",\n  \"orange-100\": \"#FFEDD5\",\n  \"orange-200\": \"#FED7AA\",\n  \"orange-500\": \"#F97316\",\n  \"orange-600\": \"#EA580C\",\n\n  // Red\n  \"red-50\": \"#FEF2F2\",\n  \"red-100\": \"#FEE2E2\",\n  \"red-200\": \"#FECACA\",\n  \"red-400\": \"#F7776C\",\n  \"red-500\": \"#EF4444\",\n  \"red-600\": \"#DC2626\",\n} as const;\n\nexport type ColorToken = keyof typeof colors;\n","import type { ComponentType, SVGProps } from \"react\";\n\nexport type KeyIcon = ComponentType<SVGProps<SVGSVGElement>>;\n\nexport const KEYBOARD_SHORTCUT_VARIANTS = {\n  OUTLINED: \"outlined\",\n  FILLED: \"filled\",\n} as const;\n\nexport type KeyboardShortcutVariant = (typeof KEYBOARD_SHORTCUT_VARIANTS)[keyof typeof KEYBOARD_SHORTCUT_VARIANTS];\n\nexport interface KeyboardShortcutProps {\n  keys: KeyIcon[];\n  variant?: KeyboardShortcutVariant;\n  className?: string;\n}\n","import type { ReactElement } from \"react\";\n\nimport { Icon } from \"../icon/icon\";\nimport { Key, Wrapper } from \"./keyboard-shortcut-styles\";\nimport { KEYBOARD_SHORTCUT_VARIANTS } from \"./types\";\nimport type { KeyboardShortcutProps } from \"./types\";\n\nexport function KeyboardShortcut({\n  keys,\n  variant = KEYBOARD_SHORTCUT_VARIANTS.OUTLINED,\n  className,\n}: KeyboardShortcutProps): ReactElement {\n  return (\n    <Wrapper className={className}>\n      {keys.map((KeyComponent, index) => (\n        <Key key={index} $variant={variant}>\n          <Icon icon={KeyComponent} size={12} />\n        </Key>\n      ))}\n    </Wrapper>\n  );\n}\n","import type { ReactElement, SVGProps } from \"react\";\n\nexport function IconCtrl(props: SVGProps<SVGSVGElement>): ReactElement {\n  const { width = 24, height = 24, ...rest } = props;\n\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width={width} height={height} fill=\"none\" {...rest}>\n      <text\n        x=\"50%\"\n        y=\"50%\"\n        dominantBaseline=\"central\"\n        textAnchor=\"middle\"\n        fill=\"currentColor\"\n        fontFamily=\"Geist, sans-serif\"\n        fontWeight={300}\n        fontSize={14}\n      >\n        Ctrl\n      </text>\n    </svg>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAA2B;;;ACA3B,+BAAmB;AAEZ,IAAM,uBAA+C;AAAA,EAC1D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,uBAAuB;AAE7B,SAAS,eAAe,MAAsB;AACnD,SAAO,qBAAqB,IAAI,KAAK;AACvC;AAEO,IAAM,cAAc,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,WAIvB,CAAC,EAAE,OAAO,MAAM,UAAU,cAAc;AAAA;AAAA;;;ADF7C;AAdN,IAAM,eAAe;AAEd,IAAM,WAAO,yBAAuC,SAASC,MAClE,EAAE,MAAM,eAAe,OAAO,cAAc,OAAO,WAAW,cAAc,UAAU,GACtF,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,cAAY;AAAA,MACZ,MAAM,YAAY,QAAQ;AAAA,MAE1B,sDAAC,iBAAc,OAAO,MAAM,QAAQ,MAAM,aAAa,eAAe,IAAI,GAAG;AAAA;AAAA,EAC/E;AAEJ,CAAC;;;AEtBD,IAAAC,4BAA4B;;;ACArB,IAAM,SAAS;AAAA;AAAA,EAEpB,OAAO;AAAA,EACP,kBAAkB;AAAA,EAClB,kBAAkB;AAAA;AAAA,EAGlB,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA;AAAA,EAGlB,cAAc;AAAA,EACd,eAAe;AAAA,EACf,eAAe;AAAA,EACf,eAAe;AAAA,EACf,eAAe;AAAA;AAAA,EAGf,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA;AAAA,EAGZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA;AAAA,EAGd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA;AAAA,EAGd,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA;AAAA,EAGZ,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,YAAY;AAAA;AAAA,EAGZ,YAAY;AAAA;AAAA,EAGZ,cAAc;AAAA;AAAA,EAGd,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA;AAAA,EAGZ,WAAW;AAAA;AAAA,EAGX,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA;AAAA,EAGb,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA;AAAA,EAGd,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AACb;;;AC/FO,IAAM,6BAA6B;AAAA,EACxC,UAAU;AAAA,EACV,QAAQ;AACV;;;AFDA,IAAM,gBAAyE;AAAA,EAC7E,CAAC,2BAA2B,QAAQ,GAAG;AAAA,wBACjB,OAAO,gBAAgB,CAAC;AAAA,aACnC,OAAO,UAAU,CAAC;AAAA;AAAA,EAE7B,CAAC,2BAA2B,MAAM,GAAG;AAAA,kBACrB,OAAO,UAAU,CAAC;AAAA,aACvB,OAAO,UAAU,CAAC;AAAA;AAE/B;AAEO,IAAM,UAAU,0BAAAC,QAAO;AAAA;AAAA;AAAA;AAAA;AAMvB,IAAM,MAAM,0BAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMtB,CAAC,EAAE,SAAS,MAAM,cAAc,QAAQ,CAAC;AAAA;;;AGbnC,IAAAC,sBAAA;AATH,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,UAAU,2BAA2B;AAAA,EACrC;AACF,GAAwC;AACtC,SACE,6CAAC,WAAQ,WACN,eAAK,IAAI,CAAC,cAAc,UACvB,6CAAC,OAAgB,UAAU,SACzB,uDAAC,QAAK,MAAM,cAAc,MAAM,IAAI,KAD5B,KAEV,CACD,GACH;AAEJ;;;ACdM,IAAAC,sBAAA;AALC,SAAS,SAAS,OAA8C;AACrE,QAAM,EAAE,QAAQ,IAAI,SAAS,IAAI,GAAG,KAAK,IAAI;AAE7C,SACE,6CAAC,SAAI,OAAM,8BAA6B,SAAQ,aAAY,OAAc,QAAgB,MAAK,QAAQ,GAAG,MACxG;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,GAAE;AAAA,MACF,kBAAiB;AAAA,MACjB,YAAW;AAAA,MACX,MAAK;AAAA,MACL,YAAW;AAAA,MACX,YAAY;AAAA,MACZ,UAAU;AAAA,MACX;AAAA;AAAA,EAED,GACF;AAEJ;","names":["styled","Icon","import_styled_components","styled","import_jsx_runtime","import_jsx_runtime"]}

package/dist/keyboard-shortcut.d.cts

@@ -0,0 +1,19 @@
+import { ComponentType, SVGProps, ReactElement } from 'react';
+
+type KeyIcon = ComponentType<SVGProps<SVGSVGElement>>;
+declare const KEYBOARD_SHORTCUT_VARIANTS: {
+    readonly OUTLINED: "outlined";
+    readonly FILLED: "filled";
+};
+type KeyboardShortcutVariant = (typeof KEYBOARD_SHORTCUT_VARIANTS)[keyof typeof KEYBOARD_SHORTCUT_VARIANTS];
+interface KeyboardShortcutProps {
+    keys: KeyIcon[];
+    variant?: KeyboardShortcutVariant;
+    className?: string;
+}
+
+declare function KeyboardShortcut({ keys, variant, className, }: KeyboardShortcutProps): ReactElement;
+
+declare function IconCtrl(props: SVGProps<SVGSVGElement>): ReactElement;
+
+export { IconCtrl, KEYBOARD_SHORTCUT_VARIANTS, type KeyIcon, KeyboardShortcut, type KeyboardShortcutProps, type KeyboardShortcutVariant };

package/dist/keyboard-shortcut.d.ts

@@ -0,0 +1,19 @@
+import { ComponentType, SVGProps, ReactElement } from 'react';
+
+type KeyIcon = ComponentType<SVGProps<SVGSVGElement>>;
+declare const KEYBOARD_SHORTCUT_VARIANTS: {
+    readonly OUTLINED: "outlined";
+    readonly FILLED: "filled";
+};
+type KeyboardShortcutVariant = (typeof KEYBOARD_SHORTCUT_VARIANTS)[keyof typeof KEYBOARD_SHORTCUT_VARIANTS];
+interface KeyboardShortcutProps {
+    keys: KeyIcon[];
+    variant?: KeyboardShortcutVariant;
+    className?: string;
+}
+
+declare function KeyboardShortcut({ keys, variant, className, }: KeyboardShortcutProps): ReactElement;
+
+declare function IconCtrl(props: SVGProps<SVGSVGElement>): ReactElement;
+
+export { IconCtrl, KEYBOARD_SHORTCUT_VARIANTS, type KeyIcon, KeyboardShortcut, type KeyboardShortcutProps, type KeyboardShortcutVariant };

package/dist/keyboard-shortcut.js

@@ -0,0 +1,14 @@
+import {
+  IconCtrl,
+  KEYBOARD_SHORTCUT_VARIANTS,
+  KeyboardShortcut
+} from "./chunk-WZHNMC6P.js";
+import "./chunk-OLJIJYB5.js";
+import "./chunk-JF3P66JF.js";
+import "./chunk-5WRI5ZAA.js";
+export {
+  IconCtrl,
+  KEYBOARD_SHORTCUT_VARIANTS,
+  KeyboardShortcut
+};
+//# sourceMappingURL=keyboard-shortcut.js.map

package/dist/keyboard-shortcut.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}