@shapesos/clay 0.6.0 → 0.7.0

package/dist/button.d.cts

@@ -0,0 +1,53 @@
+import * as react from 'react';
+import { ComponentType, SVGProps } from 'react';
+
+/** Available visual style variants for the Button component. */
+declare const BUTTON_VARIANT: {
+    readonly SOLID: "solid";
+    readonly OUTLINE: "outline";
+    readonly GHOST: "ghost";
+};
+/** Available size presets for the Button component. */
+declare const BUTTON_SIZE: {
+    readonly XS: "xs";
+    readonly S: "s";
+    readonly M: "m";
+};
+/** Available icon positions relative to the label text. */
+declare const ICON_POSITION: {
+    readonly LEADING: "leading";
+    readonly TRAILING: "trailing";
+};
+
+/** Visual style of the button. */
+type ButtonVariant = (typeof BUTTON_VARIANT)[keyof typeof BUTTON_VARIANT];
+/** Size preset for the button. */
+type ButtonSize = (typeof BUTTON_SIZE)[keyof typeof BUTTON_SIZE];
+/** Position of the optional icon relative to the label text. */
+type IconPosition = (typeof ICON_POSITION)[keyof typeof ICON_POSITION];
+/** Props for the Button component. */
+interface ButtonProps {
+    /** The text label displayed inside the button. */
+    children: React.ReactNode;
+    /** Visual style variant. @default "solid" */
+    variant?: ButtonVariant;
+    /** Size preset controlling padding, border radius, and icon gap. @default "m" */
+    size?: ButtonSize;
+    /** Optional icon component (Tabler icon or any SVG component). Rendered at 16px. */
+    icon?: ComponentType<SVGProps<SVGSVGElement>>;
+    /** Position of the icon relative to the label. @default "leading" */
+    iconPosition?: IconPosition;
+    /** Whether the button is disabled. @default false */
+    disabled?: boolean;
+    /** Click handler. */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /** Additional CSS class names. */
+    className?: string;
+    /** Accessible label override (uses children text by default). */
+    "aria-label"?: string;
+}
+
+/** A versatile button component with multiple variants and sizes. */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { BUTTON_SIZE, BUTTON_VARIANT, Button, type ButtonProps, type ButtonSize, type ButtonVariant, ICON_POSITION, type IconPosition };

package/dist/button.d.ts

@@ -0,0 +1,53 @@
+import * as react from 'react';
+import { ComponentType, SVGProps } from 'react';
+
+/** Available visual style variants for the Button component. */
+declare const BUTTON_VARIANT: {
+    readonly SOLID: "solid";
+    readonly OUTLINE: "outline";
+    readonly GHOST: "ghost";
+};
+/** Available size presets for the Button component. */
+declare const BUTTON_SIZE: {
+    readonly XS: "xs";
+    readonly S: "s";
+    readonly M: "m";
+};
+/** Available icon positions relative to the label text. */
+declare const ICON_POSITION: {
+    readonly LEADING: "leading";
+    readonly TRAILING: "trailing";
+};
+
+/** Visual style of the button. */
+type ButtonVariant = (typeof BUTTON_VARIANT)[keyof typeof BUTTON_VARIANT];
+/** Size preset for the button. */
+type ButtonSize = (typeof BUTTON_SIZE)[keyof typeof BUTTON_SIZE];
+/** Position of the optional icon relative to the label text. */
+type IconPosition = (typeof ICON_POSITION)[keyof typeof ICON_POSITION];
+/** Props for the Button component. */
+interface ButtonProps {
+    /** The text label displayed inside the button. */
+    children: React.ReactNode;
+    /** Visual style variant. @default "solid" */
+    variant?: ButtonVariant;
+    /** Size preset controlling padding, border radius, and icon gap. @default "m" */
+    size?: ButtonSize;
+    /** Optional icon component (Tabler icon or any SVG component). Rendered at 16px. */
+    icon?: ComponentType<SVGProps<SVGSVGElement>>;
+    /** Position of the icon relative to the label. @default "leading" */
+    iconPosition?: IconPosition;
+    /** Whether the button is disabled. @default false */
+    disabled?: boolean;
+    /** Click handler. */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /** Additional CSS class names. */
+    className?: string;
+    /** Accessible label override (uses children text by default). */
+    "aria-label"?: string;
+}
+
+/** A versatile button component with multiple variants and sizes. */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { BUTTON_SIZE, BUTTON_VARIANT, Button, type ButtonProps, type ButtonSize, type ButtonVariant, ICON_POSITION, type IconPosition };

package/dist/button.js

@@ -0,0 +1,17 @@
+import {
+  BUTTON_SIZE,
+  BUTTON_VARIANT,
+  Button,
+  ICON_POSITION
+} from "./chunk-FFABDVB3.js";
+import "./chunk-SV24ONND.js";
+import "./chunk-OLJIJYB5.js";
+import "./chunk-JF3P66JF.js";
+import "./chunk-5WRI5ZAA.js";
+export {
+  BUTTON_SIZE,
+  BUTTON_VARIANT,
+  Button,
+  ICON_POSITION
+};
+//# sourceMappingURL=button.js.map

package/dist/button.js.map

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

package/dist/chunk-FFABDVB3.js

@@ -0,0 +1,149 @@
+import {
+  typographyMixin,
+  typographyTypes
+} from "./chunk-SV24ONND.js";
+import {
+  Icon
+} from "./chunk-OLJIJYB5.js";
+import {
+  colors
+} from "./chunk-JF3P66JF.js";
+
+// src/components/button/button.tsx
+import { forwardRef } from "react";
+
+// src/components/button/button-styles.ts
+import styled, { css } from "styled-components";
+var sizeStyles = {
+  xs: css`
+    padding: 6px 10px;
+    border-radius: 8px;
+    gap: 4px;
+  `,
+  s: css`
+    padding: 8px 12px;
+    border-radius: 10px;
+    gap: 6px;
+  `,
+  m: css`
+    padding: 10px 14px;
+    border-radius: 10px;
+    gap: 6px;
+  `
+};
+var variantStyles = {
+  solid: 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: 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: css`
+    background: transparent;
+    color: ${colors["brown-100"]};
+    border: none;
+
+    &:hover:not(:disabled) {
+      background: ${colors["brown-20"]};
+    }
+
+    &:disabled {
+      color: ${colors["brown-50"]};
+    }
+  `
+};
+var StyledButton = styled.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 }) => variantStyles[$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
+import { jsx, jsxs } from "react/jsx-runtime";
+var Button = forwardRef(function Button2({
+  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__ */ jsx(Icon, { icon, size: 16 }) : null;
+  return /* @__PURE__ */ 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__ */ jsx("span", { children }),
+        iconPosition === ICON_POSITION.TRAILING && iconElement
+      ]
+    }
+  );
+});
+
+export {
+  BUTTON_VARIANT,
+  BUTTON_SIZE,
+  ICON_POSITION,
+  Button
+};
+//# sourceMappingURL=chunk-FFABDVB3.js.map

package/dist/chunk-FFABDVB3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/button/button.tsx","../src/components/button/button-styles.ts","../src/components/button/constants.ts"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Icon } from \"../icon/icon\";\nimport { StyledButton } from \"./button-styles\";\nimport { BUTTON_SIZE, BUTTON_VARIANT, ICON_POSITION } from \"./constants\";\nimport type { ButtonProps } from \"./types\";\n\n/** A versatile button component with multiple variants and sizes. */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    children,\n    variant = BUTTON_VARIANT.SOLID,\n    size = BUTTON_SIZE.M,\n    icon,\n    iconPosition = ICON_POSITION.LEADING,\n    disabled = false,\n    onClick,\n    className,\n    \"aria-label\": ariaLabel,\n  },\n  ref\n) {\n  const iconElement = icon ? <Icon icon={icon} size={16} /> : null;\n\n  return (\n    <StyledButton\n      ref={ref}\n      type=\"button\"\n      $variant={variant}\n      $size={size}\n      disabled={disabled}\n      onClick={disabled ? undefined : onClick}\n      className={className}\n      aria-label={ariaLabel}\n    >\n      {iconPosition === ICON_POSITION.LEADING && iconElement}\n      <span>{children}</span>\n      {iconPosition === ICON_POSITION.TRAILING && iconElement}\n    </StyledButton>\n  );\n});\n","import styled, { css } from \"styled-components\";\nimport { colors } from \"../../tokens/colors\";\nimport { typographyMixin, typographyTypes } from \"../../tokens/typography\";\nimport type { ButtonSize, ButtonVariant } from \"./types\";\n\nconst sizeStyles: Record<ButtonSize, ReturnType<typeof css>> = {\n  xs: css`\n    padding: 6px 10px;\n    border-radius: 8px;\n    gap: 4px;\n  `,\n  s: css`\n    padding: 8px 12px;\n    border-radius: 10px;\n    gap: 6px;\n  `,\n  m: css`\n    padding: 10px 14px;\n    border-radius: 10px;\n    gap: 6px;\n  `,\n};\n\nconst variantStyles: Record<ButtonVariant, ReturnType<typeof css>> = {\n  solid: css`\n    background: ${colors[\"brown-100\"]};\n    color: ${colors.white};\n    border: none;\n\n    &:hover:not(:disabled) {\n      background: ${colors[\"brown-90\"]};\n    }\n\n    &:disabled {\n      background: ${colors[\"brown-20\"]};\n      color: ${colors[\"brown-50\"]};\n    }\n  `,\n  outline: css`\n    background: ${colors.white};\n    color: ${colors[\"brown-100\"]};\n    border: 1px solid ${colors[\"brown-40\"]};\n\n    &:hover:not(:disabled) {\n      background: ${colors[\"brown-20\"]};\n    }\n\n    &:disabled {\n      border-color: ${colors[\"brown-20\"]};\n      color: ${colors[\"brown-50\"]};\n    }\n  `,\n  ghost: css`\n    background: transparent;\n    color: ${colors[\"brown-100\"]};\n    border: none;\n\n    &:hover:not(:disabled) {\n      background: ${colors[\"brown-20\"]};\n    }\n\n    &:disabled {\n      color: ${colors[\"brown-50\"]};\n    }\n  `,\n};\n\n/** Styled button element with variant and size transient props. */\nexport const StyledButton = styled.button<{ $variant: ButtonVariant; $size: ButtonSize }>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  ${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};\n  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ${({ $size }) => sizeStyles[$size]}\n  ${({ $variant }) => variantStyles[$variant]}\n`;\n","/** Available visual style variants for the Button component. */\nexport const BUTTON_VARIANT = {\n  SOLID: \"solid\",\n  OUTLINE: \"outline\",\n  GHOST: \"ghost\",\n} as const;\n\n/** Available size presets for the Button component. */\nexport const BUTTON_SIZE = {\n  XS: \"xs\",\n  S: \"s\",\n  M: \"m\",\n} as const;\n\n/** Available icon positions relative to the label text. */\nexport const ICON_POSITION = {\n  LEADING: \"leading\",\n  TRAILING: \"trailing\",\n} as const;\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,kBAAkB;;;ACA3B,OAAO,UAAU,WAAW;AAK5B,IAAM,aAAyD;AAAA,EAC7D,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,EAKJ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAKH,GAAG;AAAA;AAAA;AAAA;AAAA;AAKL;AAEA,IAAM,gBAA+D;AAAA,EACnE,OAAO;AAAA,kBACS,OAAO,WAAW,CAAC;AAAA,aACxB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA,oBAIL,OAAO,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,oBAIlB,OAAO,UAAU,CAAC;AAAA,eACvB,OAAO,UAAU,CAAC;AAAA;AAAA;AAAA,EAG/B,SAAS;AAAA,kBACO,OAAO,KAAK;AAAA,aACjB,OAAO,WAAW,CAAC;AAAA,wBACR,OAAO,UAAU,CAAC;AAAA;AAAA;AAAA,oBAGtB,OAAO,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,sBAIhB,OAAO,UAAU,CAAC;AAAA,eACzB,OAAO,UAAU,CAAC;AAAA;AAAA;AAAA,EAG/B,OAAO;AAAA;AAAA,aAEI,OAAO,WAAW,CAAC;AAAA;AAAA;AAAA;AAAA,oBAIZ,OAAO,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,eAIvB,OAAO,UAAU,CAAC;AAAA;AAAA;AAGjC;AAGO,IAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/B,gBAAgB,gBAAgB,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOrD,CAAC,EAAE,MAAM,MAAM,WAAW,KAAK,CAAC;AAAA,IAChC,CAAC,EAAE,SAAS,MAAM,cAAc,QAAQ,CAAC;AAAA;;;AChFtC,IAAM,iBAAiB;AAAA,EAC5B,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AACT;AAGO,IAAM,cAAc;AAAA,EACzB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AACL;AAGO,IAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,UAAU;AACZ;;;AFG6B,cAGzB,YAHyB;AAdtB,IAAM,SAAS,WAA2C,SAASA,QACxE;AAAA,EACE;AAAA,EACA,UAAU,eAAe;AAAA,EACzB,OAAO,YAAY;AAAA,EACnB;AAAA,EACA,eAAe,cAAc;AAAA,EAC7B,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GACA,KACA;AACA,QAAM,cAAc,OAAO,oBAAC,QAAK,MAAY,MAAM,IAAI,IAAK;AAE5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,UAAU;AAAA,MACV,OAAO;AAAA,MACP;AAAA,MACA,SAAS,WAAW,SAAY;AAAA,MAChC;AAAA,MACA,cAAY;AAAA,MAEX;AAAA,yBAAiB,cAAc,WAAW;AAAA,QAC3C,oBAAC,UAAM,UAAS;AAAA,QACf,iBAAiB,cAAc,YAAY;AAAA;AAAA;AAAA,EAC9C;AAEJ,CAAC;","names":["Button"]}

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,
@@ -17581,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,