@shapesos/clay 0.3.1 → 0.4.0

package/dist/index.d.cts

@@ -1,7 +1,16 @@
 export { ColorToken, TypographyStyle, TypographyType, colors, fontFamilies, typographyMixin, typographyStyles, typographyTypes } from './tokens.cjs';
 export { Chat, ChatContextValue, ChatMessage, MessageRole } from './chat.cjs';
 export { Icon, IconButton, IconButtonProps, IconButtonSize, IconProps } from './icon.cjs';
+import { ReactElement } from 'react';
 export { Lottie, LottieAnimationData, LottieProps, LottieRef } from './lottie.cjs';
 import 'react/jsx-runtime';
-import 'react';
 import 'lottie-web';
+
+interface KeyboardShortcutProps {
+    keys: string[];
+    className?: string;
+}
+
+declare function KeyboardShortcut({ keys, className }: KeyboardShortcutProps): ReactElement;
+
+export { KeyboardShortcut, type KeyboardShortcutProps };

package/dist/index.d.ts

@@ -1,7 +1,16 @@
 export { ColorToken, TypographyStyle, TypographyType, colors, fontFamilies, typographyMixin, typographyStyles, typographyTypes } from './tokens.js';
 export { Chat, ChatContextValue, ChatMessage, MessageRole } from './chat.js';
 export { Icon, IconButton, IconButtonProps, IconButtonSize, IconProps } from './icon.js';
+import { ReactElement } from 'react';
 export { Lottie, LottieAnimationData, LottieProps, LottieRef } from './lottie.js';
 import 'react/jsx-runtime';
-import 'react';
 import 'lottie-web';
+
+interface KeyboardShortcutProps {
+    keys: string[];
+    className?: string;
+}
+
+declare function KeyboardShortcut({ keys, className }: KeyboardShortcutProps): ReactElement;
+
+export { KeyboardShortcut, type KeyboardShortcutProps };

package/dist/index.js

@@ -20,10 +20,33 @@ import {
   Lottie
 } from "./chunk-UKM5VQKW.js";
 import "./chunk-5WRI5ZAA.js";
+
+// src/keyboard-shortcut/keyboard-shortcut-styles.ts
+import styled from "styled-components";
+var Wrapper = styled.div`
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+`;
+var Key = styled.kbd`
+  padding: 1px 4px;
+  border-radius: 4px;
+  border: 1px solid ${colors["brown-70"]};
+  border-bottom-width: 2px;
+  ${typographyMixin(typographyTypes.GEIST_LABEL_CAPTION_MEDIUM)};
+  color: inherit;
+`;
+
+// src/keyboard-shortcut/keyboard-shortcut.tsx
+import { jsx } from "react/jsx-runtime";
+function KeyboardShortcut({ keys, className }) {
+  return /* @__PURE__ */ jsx(Wrapper, { className, children: keys.map((key) => /* @__PURE__ */ jsx(Key, { children: key }, key)) });
+}
 export {
   Chat,
   Icon,
   IconButton,
+  KeyboardShortcut,
   Lottie,
   colors,
   fontFamilies,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"version":3,"sources":["../src/keyboard-shortcut/keyboard-shortcut-styles.ts","../src/keyboard-shortcut/keyboard-shortcut.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { colors } from \"../tokens/colors\";\nimport { typographyMixin, typographyTypes } from \"../tokens/typography\";\n\nexport const Wrapper = styled.div`\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n`;\n\nexport const Key = styled.kbd`\n  padding: 1px 4px;\n  border-radius: 4px;\n  border: 1px solid ${colors[\"brown-70\"]};\n  border-bottom-width: 2px;\n  ${typographyMixin(typographyTypes.GEIST_LABEL_CAPTION_MEDIUM)};\n  color: inherit;\n`;\n","import type { ReactElement } from \"react\";\n\nimport { Key, Wrapper } from \"./keyboard-shortcut-styles\";\nimport type { KeyboardShortcutProps } from \"./types\";\n\nexport function KeyboardShortcut({ keys, className }: KeyboardShortcutProps): ReactElement {\n  return (\n    <Wrapper className={className}>\n      {keys.map((key) => (\n        <Key key={key}>{key}</Key>\n      ))}\n    </Wrapper>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,YAAY;AAKZ,IAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAMvB,IAAM,MAAM,OAAO;AAAA;AAAA;AAAA,sBAGJ,OAAO,UAAU,CAAC;AAAA;AAAA,IAEpC,gBAAgB,gBAAgB,0BAA0B,CAAC;AAAA;AAAA;;;ACPvD;AAJD,SAAS,iBAAiB,EAAE,MAAM,UAAU,GAAwC;AACzF,SACE,oBAAC,WAAQ,WACN,eAAK,IAAI,CAAC,QACT,oBAAC,OAAe,iBAAN,GAAU,CACrB,GACH;AAEJ;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shapesos/clay",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "devDependencies": {