@shapesos/clay 0.5.1 → 0.7.0

package/dist/icon.d.ts

@@ -1,31 +1,50 @@
 import * as react from 'react';
 import { ComponentType, SVGProps, ElementType } from 'react';
 
+/** Props for the Icon wrapper component. */
 interface IconProps {
+    /** The SVG icon component to render (e.g., from @tabler/icons-react). */
     icon: ComponentType<SVGProps<SVGSVGElement>>;
+    /** Icon size in pixels. Affects both width/height and stroke width scaling. @default 20 */
     size?: number;
+    /** Override the icon's stroke/fill color. Defaults to `currentColor`. */
     color?: string;
+    /** Additional CSS class name for the wrapper element. */
     className?: string;
+    /** Accessible label for the icon. Required when the icon conveys meaning not present in surrounding text. */
     "aria-label"?: string;
 }
 
 declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<HTMLSpanElement>>;
 
+/** Available button sizes. "small" = 28px tap target, "medium" = 32px. */
 type IconButtonSize = "small" | "medium";
+/** Button shape variant. "short" = square (default), "long" = pill / wider hit area. */
 type IconButtonVariant = "short" | "long";
+/** Props for the IconButton ghost-style button component. */
 interface IconButtonProps {
+    /** The SVG icon component to render inside the button. */
     icon: ComponentType<SVGProps<SVGSVGElement>>;
+    /** Button tap-target size. @default "small" */
     size?: IconButtonSize;
+    /** Shape variant — "short" for square, "long" for pill. @default "short" */
     variant?: IconButtonVariant;
+    /** Whether the button is in a toggled/active state (e.g., "liked"). */
     isSelected?: boolean;
+    /** Whether the button is non-interactive. */
     disabled?: boolean;
+    /** Click handler. */
     onClick?: () => void;
+    /** Additional CSS class name. */
     className?: string;
+    /** HTML `id` attribute. */
     id?: string;
+    /** Polymorphic `as` prop — render as a different element (e.g., `"a"` or a custom component). */
     as?: ElementType;
+    /** Accessible label for the button action. */
     "aria-label"?: string;
 }
 
 declare function IconButton({ icon, size, variant, isSelected, disabled, onClick, className, id, as, "aria-label": ariaLabel, }: IconButtonProps): React.ReactNode;
 
-export { Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconProps };
+export { Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconProps };

package/dist/index.cjs

@@ -16342,8 +16342,12 @@ var require_lottie = __commonJS({
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  BUTTON_SIZE: () => BUTTON_SIZE,
+  BUTTON_VARIANT: () => BUTTON_VARIANT,
+  Button: () => Button2,
   ChatContext: () => ChatContext,
   ChatMessage: () => ChatMessage,
+  ICON_POSITION: () => ICON_POSITION,
   Icon: () => Icon,
   IconButton: () => IconButton,
   IconCtrl: () => IconCtrl,
@@ -16454,7 +16458,9 @@ var colors = {
 
 // src/tokens/typography.ts
 var fontFamilies = {
+  /** Geist — primary UI font for body text, labels, headings, and display. */
   GEIST: "Geist",
+  /** Crimson Pro — editorial/serif font, always italic. Used for decorative headings and pull quotes. */
   CRIMSON_PRO: "Crimson Pro"
 };
 var typographyTypes = {
@@ -16745,12 +16751,12 @@ function typographyMixin(type) {
   ].join(";\n  ");
 }
 
-// src/chat/chat-message-content/chat-message-content.tsx
+// src/components/chat/chat-message-content/chat-message-content.tsx
 var import_react_markdown = __toESM(require("react-markdown"), 1);
 var import_remark_breaks = __toESM(require("remark-breaks"), 1);
 var import_remark_gfm = __toESM(require("remark-gfm"), 1);
 
-// src/chat/chat-message-content/chat-message-content-styles.ts
+// src/components/chat/chat-message-content/chat-message-content-styles.ts
 var import_styled_components = __toESM(require("styled-components"), 1);
 var ContentWrapper = import_styled_components.default.div`
   ${typographyMixin(typographyTypes.GEIST_BODY_S_REGULAR)};
@@ -16875,7 +16881,7 @@ var TableScroll = import_styled_components.default.div`
   margin-block: 8px 16px;
 `;
 
-// src/chat/chat-message-content/chat-message-content.tsx
+// src/components/chat/chat-message-content/chat-message-content.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function ScrollableTable({ node: _node, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableScroll, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("table", { ...props }) });
@@ -16887,7 +16893,7 @@ function ChatMessageContent({ content: content2 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContentWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default, import_remark_breaks.default], components: markdownComponents, children: content2 }) });
 }
 
-// src/chat/chat-message-actions/chat-message-actions.tsx
+// src/components/chat/chat-message-actions/chat-message-actions.tsx
 var import_react5 = require("react");
 
 // node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
@@ -17082,7 +17088,7 @@ function IconButton({
   );
 }
 
-// src/chat/chat-context/chat-context.ts
+// src/components/chat/chat-context/chat-context.ts
 var import_react3 = require("react");
 var ChatContext = (0, import_react3.createContext)(null);
 function useChatContext() {
@@ -17093,7 +17099,7 @@ function useChatContext() {
   return context;
 }
 
-// src/chat/hooks/use-copy-to-clipboard.ts
+// src/components/chat/hooks/use-copy-to-clipboard.ts
 var import_react4 = require("react");
 
 // src/utils/clipboard.ts
@@ -17119,7 +17125,7 @@ function markdownToPlainText(markdown) {
   return result;
 }
 
-// src/chat/hooks/use-copy-to-clipboard.ts
+// src/components/chat/hooks/use-copy-to-clipboard.ts
 var RESET_DELAY_MS = 2e3;
 function useCopyToClipboard() {
   const [isCopied, setIsCopied] = (0, import_react4.useState)(false);
@@ -17144,13 +17150,13 @@ function useCopyToClipboard() {
   return { isCopied, copy };
 }
 
-// src/chat/constants.ts
+// src/components/chat/constants.ts
 var MESSAGE_ROLE = {
   USER: "user",
   ASSISTANT: "assistant"
 };
 
-// src/chat/chat-message-actions/chat-message-actions-styles.ts
+// src/components/chat/chat-message-actions/chat-message-actions-styles.ts
 var import_styled_components4 = __toESM(require("styled-components"), 1);
 var FADE_DURATION_MS = 150;
 var ANIMATE_DURATION_MS = 200;
@@ -17168,7 +17174,7 @@ var AnimatedAction = import_styled_components4.default.div`
   transition: max-width ${ANIMATE_DURATION_MS}ms ease, opacity ${ANIMATE_DURATION_MS}ms ease;
 `;
 
-// src/chat/chat-message-actions/chat-message-actions.tsx
+// src/components/chat/chat-message-actions/chat-message-actions.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function ChatMessageActions({ className, messageId, content: content2, role, isHelpful }) {
   const { onCopyMessage, onThumbUpClick, onThumbDownClick } = useChatContext();
@@ -17215,7 +17221,7 @@ function ChatMessageActions({ className, messageId, content: content2, role, isH
   ] });
 }
 
-// src/chat/chat-message/chat-message-styles.ts
+// src/components/chat/chat-message/chat-message-styles.ts
 var import_styled_components5 = __toESM(require("styled-components"), 1);
 var MessageRow = import_styled_components5.default.div`
   display: flex;
@@ -17244,10 +17250,10 @@ var MessageBubble = import_styled_components5.default.div`
   min-width: 0;
 `;
 
-// src/chat/chat-message/chat-message.tsx
+// src/components/chat/chat-message/chat-message.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function ChatMessage({ message }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MessageRow, { $role: message.role, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MessageContainer, { $role: message.role, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MessageRow, { $role: message.role, role: "article", "aria-label": `${message.role} message`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MessageContainer, { $role: message.role, children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MessageBubble, { $role: message.role, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChatMessageContent, { content: message.content }) }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       ChatMessageActions,
@@ -17266,7 +17272,9 @@ var import_styled_components6 = __toESM(require("styled-components"), 1);
 
 // src/components/keyboard-shortcut/types.ts
 var KEYBOARD_SHORTCUT_VARIANTS = {
+  /** Outlined keys with a subtle border — use on dark backgrounds. */
   OUTLINED: "outlined",
+  /** Filled keys with a solid background — use for emphasis or light backgrounds. */
   FILLED: "filled"
 };
 
@@ -17577,10 +17585,145 @@ var TextArea = (0, import_react8.forwardRef)(function TextArea2({ value: value2,
     }
   );
 });
+
+// src/components/button/button.tsx
+var import_react9 = require("react");
+
+// src/components/button/button-styles.ts
+var import_styled_components9 = __toESM(require("styled-components"), 1);
+var sizeStyles = {
+  xs: import_styled_components9.css`
+    padding: 6px 10px;
+    border-radius: 8px;
+    gap: 4px;
+  `,
+  s: import_styled_components9.css`
+    padding: 8px 12px;
+    border-radius: 10px;
+    gap: 6px;
+  `,
+  m: import_styled_components9.css`
+    padding: 10px 14px;
+    border-radius: 10px;
+    gap: 6px;
+  `
+};
+var variantStyles2 = {
+  solid: import_styled_components9.css`
+    background: ${colors["brown-100"]};
+    color: ${colors.white};
+    border: none;
+
+    &:hover:not(:disabled) {
+      background: ${colors["brown-90"]};
+    }
+
+    &:disabled {
+      background: ${colors["brown-20"]};
+      color: ${colors["brown-50"]};
+    }
+  `,
+  outline: import_styled_components9.css`
+    background: ${colors.white};
+    color: ${colors["brown-100"]};
+    border: 1px solid ${colors["brown-40"]};
+
+    &:hover:not(:disabled) {
+      background: ${colors["brown-20"]};
+    }
+
+    &:disabled {
+      border-color: ${colors["brown-20"]};
+      color: ${colors["brown-50"]};
+    }
+  `,
+  ghost: import_styled_components9.css`
+    background: transparent;
+    color: ${colors["brown-100"]};
+    border: none;
+
+    &:hover:not(:disabled) {
+      background: ${colors["brown-20"]};
+    }
+
+    &:disabled {
+      color: ${colors["brown-50"]};
+    }
+  `
+};
+var StyledButton = import_styled_components9.default.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  ${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};
+  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  ${({ $size }) => sizeStyles[$size]}
+  ${({ $variant }) => variantStyles2[$variant]}
+`;
+
+// src/components/button/constants.ts
+var BUTTON_VARIANT = {
+  SOLID: "solid",
+  OUTLINE: "outline",
+  GHOST: "ghost"
+};
+var BUTTON_SIZE = {
+  XS: "xs",
+  S: "s",
+  M: "m"
+};
+var ICON_POSITION = {
+  LEADING: "leading",
+  TRAILING: "trailing"
+};
+
+// src/components/button/button.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Button2 = (0, import_react9.forwardRef)(function Button3({
+  children,
+  variant = BUTTON_VARIANT.SOLID,
+  size = BUTTON_SIZE.M,
+  icon,
+  iconPosition = ICON_POSITION.LEADING,
+  disabled = false,
+  onClick,
+  className,
+  "aria-label": ariaLabel
+}, ref) {
+  const iconElement = icon ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { icon, size: 16 }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    StyledButton,
+    {
+      ref,
+      type: "button",
+      $variant: variant,
+      $size: size,
+      disabled,
+      onClick: disabled ? void 0 : onClick,
+      className,
+      "aria-label": ariaLabel,
+      children: [
+        iconPosition === ICON_POSITION.LEADING && iconElement,
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children }),
+        iconPosition === ICON_POSITION.TRAILING && iconElement
+      ]
+    }
+  );
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BUTTON_SIZE,
+  BUTTON_VARIANT,
+  Button,
   ChatContext,
   ChatMessage,
+  ICON_POSITION,
   Icon,
   IconButton,
   IconCtrl,