@shapesos/clay 0.8.2 → 0.9.0

package/dist/index.d.cts

@@ -5,7 +5,7 @@ export { IconCtrl, KEYBOARD_SHORTCUT_VARIANTS, KeyIcon, KeyboardShortcut, Keyboa
 export { Lottie, LottieAnimationData, LottieProps, LottieRef } from './lottie.cjs';
 export { TextArea, TextAreaProps } from './text-area.cjs';
 export { MarkdownTable, convertTableToCSV, markdownToPlainText, mergeRefs, parseMarkdownTable } from './utils.cjs';
-export { BUTTON_SIZE, BUTTON_VARIANT, Button, ButtonProps, ButtonSize, ButtonVariant, ICON_POSITION, IconPosition } from './button.cjs';
+export { BUTTON_INTENT, BUTTON_SIZE, BUTTON_VARIANT, Button, ButtonIntent, ButtonProps, ButtonSize, ButtonVariant, ICON_POSITION, IconPosition } from './button.cjs';
 import 'react/jsx-runtime';
 import 'react';
 import 'lottie-web';

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export { IconCtrl, KEYBOARD_SHORTCUT_VARIANTS, KeyIcon, KeyboardShortcut, Keyboa
 export { Lottie, LottieAnimationData, LottieProps, LottieRef } from './lottie.js';
 export { TextArea, TextAreaProps } from './text-area.js';
 export { MarkdownTable, convertTableToCSV, markdownToPlainText, mergeRefs, parseMarkdownTable } from './utils.js';
-export { BUTTON_SIZE, BUTTON_VARIANT, Button, ButtonProps, ButtonSize, ButtonVariant, ICON_POSITION, IconPosition } from './button.js';
+export { BUTTON_INTENT, BUTTON_SIZE, BUTTON_VARIANT, Button, ButtonIntent, ButtonProps, ButtonSize, ButtonVariant, ICON_POSITION, IconPosition } from './button.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'lottie-web';

package/dist/index.js

@@ -1,9 +1,10 @@
 import {
+  BUTTON_INTENT,
   BUTTON_SIZE,
   BUTTON_VARIANT,
   Button,
   ICON_POSITION
-} from "./chunk-FFABDVB3.js";
+} from "./chunk-EDICS62G.js";
 import "./chunk-C77QMQNT.js";
 import {
   ChatContext,
@@ -51,6 +52,7 @@ import {
 } from "./chunk-KNYB3RL7.js";
 import "./chunk-5WRI5ZAA.js";
 export {
+  BUTTON_INTENT,
   BUTTON_SIZE,
   BUTTON_VARIANT,
   Button,

package/package.json

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

package/dist/chunk-FFABDVB3.js

@@ -1,149 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"]}