@shapesos/clay 0.3.1 → 0.4.1

package/dist/index.d.cts

@@ -1,7 +1,25 @@
 export { ColorToken, TypographyStyle, TypographyType, colors, fontFamilies, typographyMixin, typographyStyles, typographyTypes } from './tokens.cjs';
-export { Chat, ChatContextValue, ChatMessage, MessageRole } from './chat.cjs';
+export { ChatContext, ChatContextValue, ChatMessage, ChatMessageType, MessageRole, useChatContext, useCopyToClipboard } from './chat.cjs';
 export { Icon, IconButton, IconButtonProps, IconButtonSize, IconProps } from './icon.cjs';
+import { ComponentType, SVGProps, ReactElement } from 'react';
 export { Lottie, LottieAnimationData, LottieProps, LottieRef } from './lottie.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,7 +1,25 @@
 export { ColorToken, TypographyStyle, TypographyType, colors, fontFamilies, typographyMixin, typographyStyles, typographyTypes } from './tokens.js';
-export { Chat, ChatContextValue, ChatMessage, MessageRole } from './chat.js';
+export { ChatContext, ChatContextValue, ChatMessage, ChatMessageType, MessageRole, useChatContext, useCopyToClipboard } from './chat.js';
 export { Icon, IconButton, IconButtonProps, IconButtonSize, IconProps } from './icon.js';
+import { ComponentType, SVGProps, ReactElement } from 'react';
 export { Lottie, LottieAnimationData, LottieProps, LottieRef } from './lottie.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

@@ -1,34 +1,107 @@
 import "./chunk-C77QMQNT.js";
 import {
-  Chat
-} from "./chunk-2GFOESHR.js";
+  ChatContext,
+  ChatMessage,
+  useChatContext,
+  useCopyToClipboard
+} from "./chunk-EPS4LOOW.js";
 import {
   fontFamilies,
   typographyMixin,
   typographyStyles,
   typographyTypes
 } from "./chunk-A6DKIFWS.js";
-import "./chunk-7AJSQJQ5.js";
+import "./chunk-72TJUKMV.js";
 import {
   Icon,
   IconButton
-} from "./chunk-P7NISN4V.js";
+} from "./chunk-AEXYOY5H.js";
 import {
   colors
 } from "./chunk-6HNZQ2BF.js";
 import {
   Lottie
-} from "./chunk-UKM5VQKW.js";
+} from "./chunk-BIATJTD4.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 {
-  Chat,
+  ChatContext,
+  ChatMessage,
+  CtrlIcon,
   Icon,
   IconButton,
+  KEYBOARD_SHORTCUT_VARIANTS,
+  KeyboardShortcut,
   Lottie,
   colors,
   fontFamilies,
   typographyMixin,
   typographyStyles,
-  typographyTypes
+  typographyTypes,
+  useChatContext,
+  useCopyToClipboard
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"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"]}

package/dist/lottie.cjs

@@ -16339,17 +16339,17 @@ var require_lottie = __commonJS({
   }
 });
 
-// src/lottie/index.ts
+// src/components/lottie/index.ts
 var lottie_exports = {};
 __export(lottie_exports, {
   Lottie: () => Lottie
 });
 module.exports = __toCommonJS(lottie_exports);
 
-// src/lottie/lottie.tsx
+// src/components/lottie/lottie.tsx
 var import_react2 = require("react");
 
-// src/lottie/lottie-styles.ts
+// src/components/lottie/lottie-styles.ts
 var import_styled_components = __toESM(require("styled-components"), 1);
 var LottieContainer = import_styled_components.default.div`
   display: inline-flex;
@@ -16362,7 +16362,7 @@ var LottieContainer = import_styled_components.default.div`
   }
 `;
 
-// src/lottie/use-lottie.ts
+// src/components/lottie/use-lottie.ts
 var import_react = require("react");
 var import_lottie_web = __toESM(require_lottie(), 1);
 function useLottie({
@@ -16479,7 +16479,7 @@ function createLottieRef(animationRef) {
   };
 }
 
-// src/lottie/lottie.tsx
+// src/components/lottie/lottie.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Lottie = (0, import_react2.forwardRef)(function Lottie2({
   animationData: animationData2,