@shapesos/clay 0.13.0 → 0.14.0

package/dist/{chunk-OBOXCBDL.js → chunk-PYDVANWI.js}

@@ -9,7 +9,7 @@ import {
 import { forwardRef } from "react";
 
 // src/components/icon-button/icon-button-styles.ts
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 var PADDING = {
   short: {
     small: "4px",
@@ -24,6 +24,59 @@ var BORDER_RADIUS = {
   small: 6,
   medium: 10
 };
+var intentStyles = {
+  secondary: ({ $isSelected }) => css`
+    background: ${$isSelected ? colors["brown-40"] : "transparent"};
+    color: ${colors["brown-100"]};
+
+    &:hover:not(:disabled) {
+      background: ${$isSelected ? colors["brown-40"] : colors["brown-20"]};
+    }
+
+    &:active:not(:disabled) {
+      background: ${colors["brown-40"]};
+    }
+
+    &:disabled {
+      color: ${colors["brown-50"]};
+      background: transparent;
+    }
+  `,
+  primary: () => css`
+    background: ${colors["brown-100"]};
+    color: ${colors.white};
+
+    &:hover:not(:disabled) {
+      background: ${colors["brown-90"]};
+    }
+
+    &:active:not(:disabled) {
+      background: ${colors["brown-90"]};
+    }
+
+    &:disabled {
+      color: ${colors["brown-50"]};
+      background: ${colors["brown-20"]};
+    }
+  `,
+  error: () => css`
+    background: ${colors["red-500"]};
+    color: ${colors.white};
+
+    &:hover:not(:disabled) {
+      background: ${colors["red-600"]};
+    }
+
+    &:active:not(:disabled) {
+      background: ${colors["red-600"]};
+    }
+
+    &:disabled {
+      color: ${colors["red-200"]};
+      background: ${colors["red-100"]};
+    }
+  `
+};
 var Button = styled.button`
   display: inline-flex;
   align-items: center;
@@ -31,22 +84,12 @@ var Button = styled.button`
   padding: ${({ $size, $variant }) => PADDING[$variant][$size]};
   border: none;
   border-radius: ${({ $size }) => BORDER_RADIUS[$size]}px;
-  background: ${({ $isSelected }) => $isSelected ? colors["brown-40"] : "transparent"};
-  color: ${colors["brown-100"]};
   cursor: pointer;
   transition: background-color 100ms ease;
 
-  &:hover {
-    background: ${({ $isSelected }) => $isSelected ? colors["brown-40"] : colors["brown-20"]};
-  }
-
-  &:active {
-    background: ${colors["brown-40"]};
-  }
+  ${({ $intent, $isSelected }) => intentStyles[$intent]({ $isSelected })}
 
   &:disabled {
-    color: ${colors["brown-50"]};
-    background: transparent;
     cursor: not-allowed;
   }
 `;
@@ -61,6 +104,7 @@ var IconButton = forwardRef(function IconButton2({
   icon,
   size = "small",
   variant = "short",
+  intent = "secondary",
   isSelected = false,
   disabled = false,
   onClick,
@@ -80,6 +124,7 @@ var IconButton = forwardRef(function IconButton2({
       as,
       $size: size,
       $variant: variant,
+      $intent: intent,
       $isSelected: isSelected,
       disabled,
       onClick: disabled ? void 0 : onClick,
@@ -94,4 +139,4 @@ var IconButton = forwardRef(function IconButton2({
 export {
   IconButton
 };
-//# sourceMappingURL=chunk-OBOXCBDL.js.map
+//# sourceMappingURL=chunk-PYDVANWI.js.map

package/dist/chunk-PYDVANWI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/icon-button/icon-button.tsx","../src/components/icon-button/icon-button-styles.ts"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { Icon } from \"../icon/icon\";\nimport { Button } from \"./icon-button-styles\";\nimport type { IconButtonProps, IconButtonSize } from \"./types\";\n\nconst ICON_SIZE_BY_BUTTON_SIZE: Record<IconButtonSize, number> = {\n  small: 16,\n  medium: 20,\n};\n\n/** Icon-only button. `forwardRef` + the rest-props spread so Radix `Slot`-based wrappers\n * (Tooltip, Popover, DropdownMenu) can attach refs and event handlers via `asChild`. */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  {\n    icon,\n    size = \"small\",\n    variant = \"short\",\n    intent = \"secondary\",\n    isSelected = false,\n    disabled = false,\n    onClick,\n    className,\n    id,\n    as,\n    \"aria-label\": ariaLabel,\n    ...rest\n  },\n  ref\n) {\n  // Only set `type=\"button\"` when rendering as a native button. Anchors (`as=\"a\"`) treat the\n  // `type` attribute as a content-type hint for the linked resource — `type=\"button\"` on an\n  // anchor is semantically wrong and shows up as an a11y / HTML-validation noise warning.\n  const isNativeButton = as === undefined || as === \"button\";\n  return (\n    <Button\n      ref={ref}\n      className={className}\n      id={id}\n      as={as}\n      $size={size}\n      $variant={variant}\n      $intent={intent}\n      $isSelected={isSelected}\n      disabled={disabled}\n      onClick={disabled ? undefined : onClick}\n      aria-label={ariaLabel}\n      {...(isNativeButton ? { type: \"button\" as const } : {})}\n      {...rest}\n    >\n      <Icon icon={icon} size={ICON_SIZE_BY_BUTTON_SIZE[size]} />\n    </Button>\n  );\n});\n","import styled, { css } from \"styled-components\";\n\nimport { colors } from \"../../tokens/colors\";\nimport type { IconButtonIntent, IconButtonSize, IconButtonVariant } from \"./types\";\n\nconst PADDING: Record<IconButtonVariant, Record<IconButtonSize, string>> = {\n  short: {\n    small: \"4px\",\n    medium: \"6px\",\n  },\n  long: {\n    small: \"4px 6px\",\n    medium: \"6px 10px\",\n  },\n};\n\nconst BORDER_RADIUS: Record<IconButtonSize, number> = {\n  small: 6,\n  medium: 10,\n};\n\n// Color treatment per intent. \"secondary\" is the original transparent ghost (default — preserves\n// every existing consumer). \"primary\" / \"error\" are filled, mirroring `Button`'s solid intents.\nconst intentStyles: Record<IconButtonIntent, (args: { $isSelected: boolean }) => ReturnType<typeof css>> = {\n  secondary: ({ $isSelected }) => css`\n    background: ${$isSelected ? colors[\"brown-40\"] : \"transparent\"};\n    color: ${colors[\"brown-100\"]};\n\n    &:hover:not(:disabled) {\n      background: ${$isSelected ? colors[\"brown-40\"] : colors[\"brown-20\"]};\n    }\n\n    &:active:not(:disabled) {\n      background: ${colors[\"brown-40\"]};\n    }\n\n    &:disabled {\n      color: ${colors[\"brown-50\"]};\n      background: transparent;\n    }\n  `,\n  primary: () => css`\n    background: ${colors[\"brown-100\"]};\n    color: ${colors.white};\n\n    &:hover:not(:disabled) {\n      background: ${colors[\"brown-90\"]};\n    }\n\n    &:active:not(:disabled) {\n      background: ${colors[\"brown-90\"]};\n    }\n\n    &:disabled {\n      color: ${colors[\"brown-50\"]};\n      background: ${colors[\"brown-20\"]};\n    }\n  `,\n  error: () => css`\n    background: ${colors[\"red-500\"]};\n    color: ${colors.white};\n\n    &:hover:not(:disabled) {\n      background: ${colors[\"red-600\"]};\n    }\n\n    &:active:not(:disabled) {\n      background: ${colors[\"red-600\"]};\n    }\n\n    &:disabled {\n      color: ${colors[\"red-200\"]};\n      background: ${colors[\"red-100\"]};\n    }\n  `,\n};\n\nexport const Button = styled.button<{\n  $size: IconButtonSize;\n  $variant: IconButtonVariant;\n  $intent: IconButtonIntent;\n  $isSelected: boolean;\n}>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: ${({ $size, $variant }) => PADDING[$variant][$size]};\n  border: none;\n  border-radius: ${({ $size }) => BORDER_RADIUS[$size]}px;\n  cursor: pointer;\n  transition: background-color 100ms ease;\n\n  ${({ $intent, $isSelected }) => intentStyles[$intent]({ $isSelected })}\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n`;\n"],"mappings":";;;;;;;;AAAA,SAAS,kBAAkB;;;ACA3B,OAAO,UAAU,WAAW;AAK5B,IAAM,UAAqE;AAAA,EACzE,OAAO;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AACF;AAEA,IAAM,gBAAgD;AAAA,EACpD,OAAO;AAAA,EACP,QAAQ;AACV;AAIA,IAAM,eAAqG;AAAA,EACzG,WAAW,CAAC,EAAE,YAAY,MAAM;AAAA,kBAChB,cAAc,OAAO,UAAU,IAAI,aAAa;AAAA,aACrD,OAAO,WAAW,CAAC;AAAA;AAAA;AAAA,oBAGZ,cAAc,OAAO,UAAU,IAAI,OAAO,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,oBAIrD,OAAO,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,eAIvB,OAAO,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,EAI/B,SAAS,MAAM;AAAA,kBACC,OAAO,WAAW,CAAC;AAAA,aACxB,OAAO,KAAK;AAAA;AAAA;AAAA,oBAGL,OAAO,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,oBAIlB,OAAO,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,eAIvB,OAAO,UAAU,CAAC;AAAA,oBACb,OAAO,UAAU,CAAC;AAAA;AAAA;AAAA,EAGpC,OAAO,MAAM;AAAA,kBACG,OAAO,SAAS,CAAC;AAAA,aACtB,OAAO,KAAK;AAAA;AAAA;AAAA,oBAGL,OAAO,SAAS,CAAC;AAAA;AAAA;AAAA;AAAA,oBAIjB,OAAO,SAAS,CAAC;AAAA;AAAA;AAAA;AAAA,eAItB,OAAO,SAAS,CAAC;AAAA,oBACZ,OAAO,SAAS,CAAC;AAAA;AAAA;AAGrC;AAEO,IAAM,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA,aAShB,CAAC,EAAE,OAAO,SAAS,MAAM,QAAQ,QAAQ,EAAE,KAAK,CAAC;AAAA;AAAA,mBAE3C,CAAC,EAAE,MAAM,MAAM,cAAc,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA,IAIlD,CAAC,EAAE,SAAS,YAAY,MAAM,aAAa,OAAO,EAAE,EAAE,YAAY,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;;;AD1ClE;AA5CN,IAAM,2BAA2D;AAAA,EAC/D,OAAO;AAAA,EACP,QAAQ;AACV;AAIO,IAAM,aAAa,WAA+C,SAASA,YAChF;AAAA,EACE;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AAAA,EACT,aAAa;AAAA,EACb,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GACA,KACA;AAIA,QAAM,iBAAiB,OAAO,UAAa,OAAO;AAClD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA,MACV,SAAS;AAAA,MACT,aAAa;AAAA,MACb;AAAA,MACA,SAAS,WAAW,SAAY;AAAA,MAChC,cAAY;AAAA,MACX,GAAI,iBAAiB,EAAE,MAAM,SAAkB,IAAI,CAAC;AAAA,MACpD,GAAG;AAAA,MAEJ,8BAAC,QAAK,MAAY,MAAM,yBAAyB,IAAI,GAAG;AAAA;AAAA,EAC1D;AAEJ,CAAC;","names":["IconButton"]}

package/dist/{chunk-SV24ONND.js → chunk-UXT2H3FM.js}

@@ -2,7 +2,7 @@
 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 — editorial/serif font, mostly italic. Used for decorative headings and pull quotes. */
   CRIMSON_PRO: "Crimson Pro"
 };
 var typographyTypes = {
@@ -42,14 +42,16 @@ var typographyTypes = {
   GEIST_HEADING_L_BOLD: "GEIST_HEADING_L_BOLD",
   // Geist Display Large (36px)
   GEIST_DISPLAY_L_MEDIUM: "GEIST_DISPLAY_L_MEDIUM",
-  // Crimson Pro Body Small (16px)
-  CRIMSON_PRO_BODY_S_LIGHT: "CRIMSON_PRO_BODY_S_LIGHT",
-  // Crimson Pro Body Medium (18px)
-  CRIMSON_PRO_BODY_M_LIGHT: "CRIMSON_PRO_BODY_M_LIGHT",
-  // Crimson Pro Heading Medium (24px)
-  CRIMSON_PRO_HEADING_M_MEDIUM: "CRIMSON_PRO_HEADING_M_MEDIUM",
-  // Crimson Pro Display Extra Large (46px)
-  CRIMSON_PRO_DISPLAY_XL_REGULAR: "CRIMSON_PRO_DISPLAY_XL_REGULAR"
+  // Crimson Pro Body Small (16px, italic)
+  CRIMSON_PRO_BODY_S_LIGHT_ITALIC: "CRIMSON_PRO_BODY_S_LIGHT_ITALIC",
+  // Crimson Pro Body Medium (18px, italic)
+  CRIMSON_PRO_BODY_M_LIGHT_ITALIC: "CRIMSON_PRO_BODY_M_LIGHT_ITALIC",
+  // Crimson Pro Heading Medium (24px, italic)
+  CRIMSON_PRO_HEADING_M_MEDIUM_ITALIC: "CRIMSON_PRO_HEADING_M_MEDIUM_ITALIC",
+  // Crimson Pro Display Large (40px, upright)
+  CRIMSON_PRO_DISPLAY_L_REGULAR: "CRIMSON_PRO_DISPLAY_L_REGULAR",
+  // Crimson Pro Display Extra Large (46px, italic)
+  CRIMSON_PRO_DISPLAY_XL_REGULAR_ITALIC: "CRIMSON_PRO_DISPLAY_XL_REGULAR_ITALIC"
 };
 var typographyStyles = {
   // Geist Label Caption (12px)
@@ -244,8 +246,8 @@ var typographyStyles = {
     lineHeight: 44,
     letterSpacing: -0.72
   },
-  // Crimson Pro Body Small (16px)
-  [typographyTypes.CRIMSON_PRO_BODY_S_LIGHT]: {
+  // Crimson Pro Body Small (16px, italic)
+  [typographyTypes.CRIMSON_PRO_BODY_S_LIGHT_ITALIC]: {
     fontFamily: fontFamilies.CRIMSON_PRO,
     fontSize: 16,
     fontWeight: 300,
@@ -253,8 +255,8 @@ var typographyStyles = {
     letterSpacing: -0.32,
     fontStyle: "italic"
   },
-  // Crimson Pro Body Medium (18px)
-  [typographyTypes.CRIMSON_PRO_BODY_M_LIGHT]: {
+  // Crimson Pro Body Medium (18px, italic)
+  [typographyTypes.CRIMSON_PRO_BODY_M_LIGHT_ITALIC]: {
     fontFamily: fontFamilies.CRIMSON_PRO,
     fontSize: 18,
     fontWeight: 300,
@@ -262,8 +264,8 @@ var typographyStyles = {
     letterSpacing: 0,
     fontStyle: "italic"
   },
-  // Crimson Pro Heading Medium (24px)
-  [typographyTypes.CRIMSON_PRO_HEADING_M_MEDIUM]: {
+  // Crimson Pro Heading Medium (24px, italic)
+  [typographyTypes.CRIMSON_PRO_HEADING_M_MEDIUM_ITALIC]: {
     fontFamily: fontFamilies.CRIMSON_PRO,
     fontSize: 24,
     fontWeight: 400,
@@ -271,8 +273,16 @@ var typographyStyles = {
     letterSpacing: -0.48,
     fontStyle: "italic"
   },
-  // Crimson Pro Display Extra Large (46px)
-  [typographyTypes.CRIMSON_PRO_DISPLAY_XL_REGULAR]: {
+  // Crimson Pro Display Large (40px, upright)
+  [typographyTypes.CRIMSON_PRO_DISPLAY_L_REGULAR]: {
+    fontFamily: fontFamilies.CRIMSON_PRO,
+    fontSize: 40,
+    fontWeight: 300,
+    lineHeight: 48,
+    letterSpacing: -1.6
+  },
+  // Crimson Pro Display Extra Large (46px, italic)
+  [typographyTypes.CRIMSON_PRO_DISPLAY_XL_REGULAR_ITALIC]: {
     fontFamily: fontFamilies.CRIMSON_PRO,
     fontSize: 46,
     fontWeight: 400,
@@ -299,4 +309,4 @@ export {
   typographyStyles,
   typographyMixin
 };
-//# sourceMappingURL=chunk-SV24ONND.js.map
+//# sourceMappingURL=chunk-UXT2H3FM.js.map

package/dist/chunk-UXT2H3FM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/typography.ts"],"sourcesContent":["/** Available font families in the Shapes.co design system. */\nexport const fontFamilies = {\n  /** Geist — primary UI font for body text, labels, headings, and display. */\n  GEIST: \"Geist\",\n  /** Crimson Pro — editorial/serif font, mostly italic. Used for decorative headings and pull quotes. */\n  CRIMSON_PRO: \"Crimson Pro\",\n} as const;\n\n/*\n * Type-name convention: `<FAMILY>_<ROLE>_<SIZE>_<WEIGHT>[_ITALIC]`. An italic style is marked by a\n * trailing `_ITALIC` suffix on the name (mirroring io-client's `styled-mixins/typography-mixin`);\n * names without it are upright. The suffix is the single source of truth in the NAME — the matching\n * `typographyStyles` entry still carries `fontStyle: \"italic\"`.\n */\n\nexport const typographyTypes = {\n  // Geist Label Caption (12px)\n  GEIST_LABEL_CAPTION_REGULAR: \"GEIST_LABEL_CAPTION_REGULAR\",\n  GEIST_LABEL_CAPTION_MEDIUM: \"GEIST_LABEL_CAPTION_MEDIUM\",\n  GEIST_LABEL_CAPTION_SEMI_BOLD: \"GEIST_LABEL_CAPTION_SEMI_BOLD\",\n\n  // Geist Body Extra Small (14px)\n  GEIST_BODY_XS_REGULAR: \"GEIST_BODY_XS_REGULAR\",\n  GEIST_BODY_XS_MEDIUM: \"GEIST_BODY_XS_MEDIUM\",\n  GEIST_BODY_XS_BOLD: \"GEIST_BODY_XS_BOLD\",\n\n  // Geist Body Small (16px)\n  GEIST_BODY_S_REGULAR: \"GEIST_BODY_S_REGULAR\",\n  GEIST_BODY_S_MEDIUM: \"GEIST_BODY_S_MEDIUM\",\n  GEIST_BODY_S_SEMI_BOLD: \"GEIST_BODY_S_SEMI_BOLD\",\n  GEIST_BODY_S_BOLD: \"GEIST_BODY_S_BOLD\",\n\n  // Geist Body Medium (18px)\n  GEIST_BODY_M_LIGHT: \"GEIST_BODY_M_LIGHT\",\n  GEIST_BODY_M_REGULAR: \"GEIST_BODY_M_REGULAR\",\n  GEIST_BODY_M_MEDIUM: \"GEIST_BODY_M_MEDIUM\",\n  GEIST_BODY_M_SEMI_BOLD: \"GEIST_BODY_M_SEMI_BOLD\",\n\n  // Geist Body Large (20px)\n  GEIST_BODY_L_REGULAR: \"GEIST_BODY_L_REGULAR\",\n  GEIST_BODY_L_MEDIUM: \"GEIST_BODY_L_MEDIUM\",\n  GEIST_BODY_L_SEMI_BOLD: \"GEIST_BODY_L_SEMI_BOLD\",\n  GEIST_BODY_L_BOLD: \"GEIST_BODY_L_BOLD\",\n\n  // Geist Heading Small (24px)\n  GEIST_HEADING_S_REGULAR: \"GEIST_HEADING_S_REGULAR\",\n  GEIST_HEADING_S_MEDIUM: \"GEIST_HEADING_S_MEDIUM\",\n  GEIST_HEADING_S_BOLD: \"GEIST_HEADING_S_BOLD\",\n\n  // Geist Heading Medium (28px)\n  GEIST_HEADING_M_BOLD: \"GEIST_HEADING_M_BOLD\",\n\n  // Geist Heading Large (32px)\n  GEIST_HEADING_L_REGULAR: \"GEIST_HEADING_L_REGULAR\",\n  GEIST_HEADING_L_MEDIUM: \"GEIST_HEADING_L_MEDIUM\",\n  GEIST_HEADING_L_SEMI_BOLD: \"GEIST_HEADING_L_SEMI_BOLD\",\n  GEIST_HEADING_L_BOLD: \"GEIST_HEADING_L_BOLD\",\n\n  // Geist Display Large (36px)\n  GEIST_DISPLAY_L_MEDIUM: \"GEIST_DISPLAY_L_MEDIUM\",\n\n  // Crimson Pro Body Small (16px, italic)\n  CRIMSON_PRO_BODY_S_LIGHT_ITALIC: \"CRIMSON_PRO_BODY_S_LIGHT_ITALIC\",\n\n  // Crimson Pro Body Medium (18px, italic)\n  CRIMSON_PRO_BODY_M_LIGHT_ITALIC: \"CRIMSON_PRO_BODY_M_LIGHT_ITALIC\",\n\n  // Crimson Pro Heading Medium (24px, italic)\n  CRIMSON_PRO_HEADING_M_MEDIUM_ITALIC: \"CRIMSON_PRO_HEADING_M_MEDIUM_ITALIC\",\n\n  // Crimson Pro Display Large (40px, upright)\n  CRIMSON_PRO_DISPLAY_L_REGULAR: \"CRIMSON_PRO_DISPLAY_L_REGULAR\",\n\n  // Crimson Pro Display Extra Large (46px, italic)\n  CRIMSON_PRO_DISPLAY_XL_REGULAR_ITALIC: \"CRIMSON_PRO_DISPLAY_XL_REGULAR_ITALIC\",\n} as const;\n\n/** Union of all typography type string constants. Used as keys into `typographyStyles`. */\nexport type TypographyType = (typeof typographyTypes)[keyof typeof typographyTypes];\n\n/** CSS properties for a single typography type. All numeric values are in pixels. */\nexport interface TypographyStyle {\n  /** Font family name (e.g., \"Geist\"). */\n  fontFamily: string;\n  /** Font size in pixels. */\n  fontSize: number;\n  /** Font weight (100–900). */\n  fontWeight: number;\n  /** Line height in pixels. */\n  lineHeight: number;\n  /** Letter spacing in pixels. Omitted when the font's default spacing is correct. */\n  letterSpacing?: number;\n  /** CSS font-style value (e.g., \"italic\"). Omitted for normal style. */\n  fontStyle?: string;\n}\n\nexport const typographyStyles: Record<TypographyType, TypographyStyle> = {\n  // Geist Label Caption (12px)\n  [typographyTypes.GEIST_LABEL_CAPTION_REGULAR]: {\n    fontFamily: fontFamilies.GEIST,\n    fontSize: 12,\n    fontWeight: 400,\n    lineHeight: 16,\n  },\n  [typographyTypes.GEIST_LABEL_CAPTION_MEDIUM]: {\n    fontFamily: fontFamilies.GEIST,\n    fontSize: 12,\n    fontWeight: 500,\n    lineHeight: 16,\n  },\n  [typographyTypes.GEIST_LABEL_CAPTION_SEMI_BOLD]: {\n    fontFamily: fontFamilies.GEIST,\n    fontSize: 12,\n    fontWeight: 600,\n    lineHeight: 16,\n  },\n\n  // Geist Body Extra Small (14px)\n  [typographyTypes.GEIST_BODY_XS_REGULAR]: {\n    fontFamily: fontFamilies.GEIST,\n    fontSize: 14,\n    fontWeight: 400,\n    lineHeight: 20,\n  },\n  [typographyTypes.GEIST_BODY_XS_MEDIUM]: {\n    fontFamily: fontFamilies.GEIST,\n    fontSize: 14,\n    fontWeight: 500,\n    lineHeight: 20,\n  },\n  [typographyTypes.GEIST_BODY_XS_BOLD]: {\n    fontFamily: fontFamilies.GEIST,\n    fontSize: 14,\n    fontWeight: 600,\n    lineHeight: 20,\n  },\n\n  // Geist Body Small (16px)\n  [typographyTypes.GEIST_BODY_S_REGULAR]: {\n    fontFamily: fontFamilies.GEIST,\n    fontSize: 16,\n    fontWeight: 400,\n    lineHeight: 24,\n    letterSpacing: -0.08,\n  },\n  [typographyTypes.GEIST_BODY_S_MEDIUM]: {\n    fontFamily: fontFamilies.GEIST,\n    fontSize: 16,\n    fontWeight: 500,\n    lineHeight: 24,\n    letterSpacing: -0.08,\n  },\n  [typographyTypes.GEIST_BODY_S_SEMI_BOLD]: {\n    fontFamily: fontFamilies.GEIST,\n    fontSize: 16,\n    fontWeight: 600,\n    lineHeight: 24,\n    letterSpacing: -0.08,\n  },\n  [typographyTypes.GEIST_BODY_S_BOLD]: {\n    fontFamily: fontFamilies.GEIST,\n    fontSize: 16,\n    fontWeight: 700,\n    lineHeight: 24,\n    letterSpacing: -0.08,\n  },\n\n  // Geist Body Medium (18px)\n  [typographyTypes.GEIST_BODY_M_LIGHT]: {\n    fontFamily: fontFamilies.GEIST,\n    fontSize: 18,\n    fontWeight: 300,\n    lineHeight: 28,\n    letterSpacing: -0.09,\n  },\n  [typographyTypes.GEIST_BODY_M_REGULAR]: {\n    fontFamily: fontFamilies.GEIST,\n    fontSize: 18,\n    fontWeight: 400,\n    lineHeight: 28,\n    letterSpacing: -0.09,\n  },\n  [typographyTypes.GEIST_BODY_M_MEDIUM]: {\n    fontFamily: fontFamilies.GEIST,\n    fontSize: 18,\n    fontWeight: 500,\n    lineHeight: 28,\n    letterSpacing: -0.09,\n  },\n  [typographyTypes.GEIST_BODY_M_SEMI_BOLD]: {\n    fontFamily: fontFamilies.GEIST,\n    fontSize: 18,\n    fontWeight: 600,\n    lineHeight: 28,\n    letterSpacing: -0.09,\n  },\n\n  // Geist Body Large (20px)\n  [typographyTypes.GEIST_BODY_L_REGULAR]: {\n    fontFamily: fontFamilies.GEIST,\n    fontSize: 20,\n    fontWeight: 400,\n    lineHeight: 30,\n    letterSpacing: -0.2,\n  },\n  [typographyTypes.GEIST_BODY_L_MEDIUM]: {\n    fontFamily: fontFamilies.GEIST,\n    fontSize: 20,\n    fontWeight: 500,\n    lineHeight: 30,\n    letterSpacing: -0.2,\n  },\n  [typographyTypes.GEIST_BODY_L_SEMI_BOLD]: {\n    fontFamily: fontFamilies.GEIST,\n    fontSize: 20,\n    fontWeight: 600,\n    lineHeight: 30,\n    letterSpacing: -0.2,\n  },\n  [typographyTypes.GEIST_BODY_L_BOLD]: {\n    fontFamily: fontFamilies.GEIST,\n    fontSize: 20,\n    fontWeight: 700,\n    lineHeight: 30,\n    letterSpacing: -0.2,\n  },\n\n  // Geist Heading Small (24px)\n  [typographyTypes.GEIST_HEADING_S_REGULAR]: {\n    fontFamily: fontFamilies.GEIST,\n    fontSize: 24,\n    fontWeight: 400,\n    lineHeight: 32,\n    letterSpacing: -0.48,\n  },\n  [typographyTypes.GEIST_HEADING_S_MEDIUM]: {\n    fontFamily: fontFamilies.GEIST,\n    fontSize: 24,\n    fontWeight: 500,\n    lineHeight: 32,\n    letterSpacing: -0.48,\n  },\n  [typographyTypes.GEIST_HEADING_S_BOLD]: {\n    fontFamily: fontFamilies.GEIST,\n    fontSize: 24,\n    fontWeight: 700,\n    lineHeight: 32,\n    letterSpacing: -0.48,\n  },\n\n  // Geist Heading Medium (28px)\n  [typographyTypes.GEIST_HEADING_M_BOLD]: {\n    fontFamily: fontFamilies.GEIST,\n    fontSize: 28,\n    fontWeight: 700,\n    lineHeight: 36,\n    letterSpacing: -0.6,\n  },\n\n  // Geist Heading Large (32px)\n  [typographyTypes.GEIST_HEADING_L_REGULAR]: {\n    fontFamily: fontFamilies.GEIST,\n    fontSize: 32,\n    fontWeight: 400,\n    lineHeight: 40,\n    letterSpacing: -0.64,\n  },\n  [typographyTypes.GEIST_HEADING_L_MEDIUM]: {\n    fontFamily: fontFamilies.GEIST,\n    fontSize: 32,\n    fontWeight: 500,\n    lineHeight: 40,\n    letterSpacing: -0.64,\n  },\n  [typographyTypes.GEIST_HEADING_L_SEMI_BOLD]: {\n    fontFamily: fontFamilies.GEIST,\n    fontSize: 32,\n    fontWeight: 600,\n    lineHeight: 40,\n    letterSpacing: -0.64,\n  },\n  [typographyTypes.GEIST_HEADING_L_BOLD]: {\n    fontFamily: fontFamilies.GEIST,\n    fontSize: 32,\n    fontWeight: 700,\n    lineHeight: 40,\n    letterSpacing: -0.64,\n  },\n\n  // Geist Display Large (36px)\n  [typographyTypes.GEIST_DISPLAY_L_MEDIUM]: {\n    fontFamily: fontFamilies.GEIST,\n    fontSize: 36,\n    fontWeight: 500,\n    lineHeight: 44,\n    letterSpacing: -0.72,\n  },\n\n  // Crimson Pro Body Small (16px, italic)\n  [typographyTypes.CRIMSON_PRO_BODY_S_LIGHT_ITALIC]: {\n    fontFamily: fontFamilies.CRIMSON_PRO,\n    fontSize: 16,\n    fontWeight: 300,\n    lineHeight: 20,\n    letterSpacing: -0.32,\n    fontStyle: \"italic\",\n  },\n\n  // Crimson Pro Body Medium (18px, italic)\n  [typographyTypes.CRIMSON_PRO_BODY_M_LIGHT_ITALIC]: {\n    fontFamily: fontFamilies.CRIMSON_PRO,\n    fontSize: 18,\n    fontWeight: 300,\n    lineHeight: 28,\n    letterSpacing: 0,\n    fontStyle: \"italic\",\n  },\n\n  // Crimson Pro Heading Medium (24px, italic)\n  [typographyTypes.CRIMSON_PRO_HEADING_M_MEDIUM_ITALIC]: {\n    fontFamily: fontFamilies.CRIMSON_PRO,\n    fontSize: 24,\n    fontWeight: 400,\n    lineHeight: 32,\n    letterSpacing: -0.48,\n    fontStyle: \"italic\",\n  },\n\n  // Crimson Pro Display Large (40px, upright)\n  [typographyTypes.CRIMSON_PRO_DISPLAY_L_REGULAR]: {\n    fontFamily: fontFamilies.CRIMSON_PRO,\n    fontSize: 40,\n    fontWeight: 300,\n    lineHeight: 48,\n    letterSpacing: -1.6,\n  },\n\n  // Crimson Pro Display Extra Large (46px, italic)\n  [typographyTypes.CRIMSON_PRO_DISPLAY_XL_REGULAR_ITALIC]: {\n    fontFamily: fontFamilies.CRIMSON_PRO,\n    fontSize: 46,\n    fontWeight: 400,\n    lineHeight: 54,\n    letterSpacing: -1.38,\n    fontStyle: \"italic\",\n  },\n};\n\n/**\n * Generates a CSS string for a given typography type, suitable for use in styled-components template literals.\n * @param type - The typography type constant (e.g., `typographyTypes.GEIST_BODY_S_REGULAR`).\n * @returns A semicolon-separated CSS string with font-family, font-size, font-weight, line-height, letter-spacing, and font-style.\n */\nexport function typographyMixin(type: TypographyType): string {\n  const style = typographyStyles[type];\n  return [\n    `font-family: \"${style.fontFamily}\", sans-serif`,\n    `font-size: ${style.fontSize}px`,\n    `font-weight: ${style.fontWeight}`,\n    `line-height: ${style.lineHeight}px`,\n    `letter-spacing: ${style.letterSpacing != null ? `${style.letterSpacing}px` : \"inherit\"}`,\n    `font-style: ${style.fontStyle ?? \"normal\"}`,\n  ].join(\";\\n  \");\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-DT44KNCV.js → chunk-XFJ6XMJZ.js}

@@ -1,3 +1,6 @@
+import {
+  IconButton
+} from "./chunk-PYDVANWI.js";
 import {
   CAPTURE_EXCLUDE_ATTRIBUTE
 } from "./chunk-LXYCT4YO.js";
@@ -5,7 +8,7 @@ import {
   BarChart,
   LineChart,
   PieChart
-} from "./chunk-QXGYMDIA.js";
+} from "./chunk-YZB6YXKK.js";
 import {
   Table,
   TableBody,
@@ -18,9 +21,6 @@ import {
 import {
   cn
 } from "./chunk-P6GUNIAE.js";
-import {
-  IconButton
-} from "./chunk-OBOXCBDL.js";
 
 // src/components/artifacts/artifact-base.ts
 var artifactTypes = {
@@ -1001,4 +1001,4 @@ export {
    * See the LICENSE file in the root directory of this source tree.
    *)
 */
-//# sourceMappingURL=chunk-DT44KNCV.js.map
+//# sourceMappingURL=chunk-XFJ6XMJZ.js.map

package/dist/{chunk-QXGYMDIA.js → chunk-YZB6YXKK.js}

@@ -1,9 +1,9 @@
-import {
-  cn
-} from "./chunk-P6GUNIAE.js";
 import {
   colors
 } from "./chunk-JF3P66JF.js";
+import {
+  cn
+} from "./chunk-P6GUNIAE.js";
 
 // src/components/chart/chart-container.tsx
 import { ResponsiveContainer } from "recharts";
@@ -474,4 +474,4 @@ export {
   LineChart,
   PieChart
 };
-//# sourceMappingURL=chunk-QXGYMDIA.js.map
+//# sourceMappingURL=chunk-YZB6YXKK.js.map

package/dist/icon.cjs

@@ -186,6 +186,59 @@ var BORDER_RADIUS = {
   small: 6,
   medium: 10
 };
+var intentStyles = {
+  secondary: ({ $isSelected }) => import_styled_components2.css`
+    background: ${$isSelected ? colors["brown-40"] : "transparent"};
+    color: ${colors["brown-100"]};
+
+    &:hover:not(:disabled) {
+      background: ${$isSelected ? colors["brown-40"] : colors["brown-20"]};
+    }
+
+    &:active:not(:disabled) {
+      background: ${colors["brown-40"]};
+    }
+
+    &:disabled {
+      color: ${colors["brown-50"]};
+      background: transparent;
+    }
+  `,
+  primary: () => import_styled_components2.css`
+    background: ${colors["brown-100"]};
+    color: ${colors.white};
+
+    &:hover:not(:disabled) {
+      background: ${colors["brown-90"]};
+    }
+
+    &:active:not(:disabled) {
+      background: ${colors["brown-90"]};
+    }
+
+    &:disabled {
+      color: ${colors["brown-50"]};
+      background: ${colors["brown-20"]};
+    }
+  `,
+  error: () => import_styled_components2.css`
+    background: ${colors["red-500"]};
+    color: ${colors.white};
+
+    &:hover:not(:disabled) {
+      background: ${colors["red-600"]};
+    }
+
+    &:active:not(:disabled) {
+      background: ${colors["red-600"]};
+    }
+
+    &:disabled {
+      color: ${colors["red-200"]};
+      background: ${colors["red-100"]};
+    }
+  `
+};
 var Button = import_styled_components2.default.button`
   display: inline-flex;
   align-items: center;
@@ -193,22 +246,12 @@ var Button = import_styled_components2.default.button`
   padding: ${({ $size, $variant }) => PADDING[$variant][$size]};
   border: none;
   border-radius: ${({ $size }) => BORDER_RADIUS[$size]}px;
-  background: ${({ $isSelected }) => $isSelected ? colors["brown-40"] : "transparent"};
-  color: ${colors["brown-100"]};
   cursor: pointer;
   transition: background-color 100ms ease;
 
-  &:hover {
-    background: ${({ $isSelected }) => $isSelected ? colors["brown-40"] : colors["brown-20"]};
-  }
-
-  &:active {
-    background: ${colors["brown-40"]};
-  }
+  ${({ $intent, $isSelected }) => intentStyles[$intent]({ $isSelected })}
 
   &:disabled {
-    color: ${colors["brown-50"]};
-    background: transparent;
     cursor: not-allowed;
   }
 `;
@@ -223,6 +266,7 @@ var IconButton = (0, import_react2.forwardRef)(function IconButton2({
   icon,
   size = "small",
   variant = "short",
+  intent = "secondary",
   isSelected = false,
   disabled = false,
   onClick,
@@ -242,6 +286,7 @@ var IconButton = (0, import_react2.forwardRef)(function IconButton2({
       as,
       $size: size,
       $variant: variant,
+      $intent: intent,
       $isSelected: isSelected,
       disabled,
       onClick: disabled ? void 0 : onClick,

package/dist/icon.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/icon/index.ts","../src/components/icon/icon.tsx","../src/components/icon/icon-styles.ts","../src/components/icon-button/icon-button.tsx","../src/components/icon-button/icon-button-styles.ts","../src/tokens/colors.ts"],"sourcesContent":["export { Icon } from \"./icon\";\nexport type { IconProps } from \"./types\";\nexport { IconButton } from \"../icon-button/icon-button\";\nexport type { IconButtonProps, IconButtonSize, IconButtonVariant } from \"../icon-button/types\";\n","import { forwardRef } from \"react\";\n\nimport { IconWrapper, getStrokeWidth } from \"./icon-styles\";\nimport type { IconProps } from \"./types\";\n\nconst DEFAULT_SIZE = 16;\n\nexport const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon(\n  { icon: IconComponent, size = DEFAULT_SIZE, color, className, \"aria-label\": ariaLabel },\n  ref\n) {\n  return (\n    <IconWrapper\n      ref={ref}\n      className={className}\n      $color={color}\n      aria-label={ariaLabel}\n      role={ariaLabel ? \"img\" : undefined}\n    >\n      <IconComponent width={size} height={size} strokeWidth={getStrokeWidth(size)} />\n    </IconWrapper>\n  );\n});\n","import styled from \"styled-components\";\n\nexport const STROKE_WIDTH_BY_SIZE: Record<number, number> = {\n  12: 1.4,\n  14: 1.4,\n  16: 1.8,\n  18: 1.8,\n  20: 1.8,\n  24: 1.8,\n};\n\nexport const DEFAULT_STROKE_WIDTH = 1.8;\n\nexport function getStrokeWidth(size: number): number {\n  return STROKE_WIDTH_BY_SIZE[size] ?? DEFAULT_STROKE_WIDTH;\n}\n\nexport const IconWrapper = styled.span<{ $color?: string }>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: ${({ $color }) => $color ?? \"currentColor\"};\n  flex-shrink: 0;\n`;\n","import { forwardRef } from \"react\";\n\nimport { Icon } from \"../icon/icon\";\nimport { Button } from \"./icon-button-styles\";\nimport type { IconButtonProps, IconButtonSize } from \"./types\";\n\nconst ICON_SIZE_BY_BUTTON_SIZE: Record<IconButtonSize, number> = {\n  small: 16,\n  medium: 20,\n};\n\n/** Ghost-style icon button. `forwardRef` + the rest-props spread so Radix `Slot`-based wrappers\n * (Tooltip, Popover, DropdownMenu) can attach refs and event handlers via `asChild`. */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  {\n    icon,\n    size = \"small\",\n    variant = \"short\",\n    isSelected = false,\n    disabled = false,\n    onClick,\n    className,\n    id,\n    as,\n    \"aria-label\": ariaLabel,\n    ...rest\n  },\n  ref\n) {\n  // Only set `type=\"button\"` when rendering as a native button. Anchors (`as=\"a\"`) treat the\n  // `type` attribute as a content-type hint for the linked resource — `type=\"button\"` on an\n  // anchor is semantically wrong and shows up as an a11y / HTML-validation noise warning.\n  const isNativeButton = as === undefined || as === \"button\";\n  return (\n    <Button\n      ref={ref}\n      className={className}\n      id={id}\n      as={as}\n      $size={size}\n      $variant={variant}\n      $isSelected={isSelected}\n      disabled={disabled}\n      onClick={disabled ? undefined : onClick}\n      aria-label={ariaLabel}\n      {...(isNativeButton ? { type: \"button\" as const } : {})}\n      {...rest}\n    >\n      <Icon icon={icon} size={ICON_SIZE_BY_BUTTON_SIZE[size]} />\n    </Button>\n  );\n});\n","import styled from \"styled-components\";\n\nimport { colors } from \"../../tokens/colors\";\nimport type { IconButtonSize, IconButtonVariant } from \"./types\";\n\nconst PADDING: Record<IconButtonVariant, Record<IconButtonSize, string>> = {\n  short: {\n    small: \"4px\",\n    medium: \"6px\",\n  },\n  long: {\n    small: \"4px 6px\",\n    medium: \"6px 10px\",\n  },\n};\n\nconst BORDER_RADIUS: Record<IconButtonSize, number> = {\n  small: 6,\n  medium: 10,\n};\n\nexport const Button = styled.button<{\n  $size: IconButtonSize;\n  $variant: IconButtonVariant;\n  $isSelected: boolean;\n}>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: ${({ $size, $variant }) => PADDING[$variant][$size]};\n  border: none;\n  border-radius: ${({ $size }) => BORDER_RADIUS[$size]}px;\n  background: ${({ $isSelected }) => ($isSelected ? colors[\"brown-40\"] : \"transparent\")};\n  color: ${colors[\"brown-100\"]};\n  cursor: pointer;\n  transition: background-color 100ms ease;\n\n  &:hover {\n    background: ${({ $isSelected }) => ($isSelected ? colors[\"brown-40\"] : colors[\"brown-20\"])};\n  }\n\n  &:active {\n    background: ${colors[\"brown-40\"]};\n  }\n\n  &:disabled {\n    color: ${colors[\"brown-50\"]};\n    background: transparent;\n    cursor: not-allowed;\n  }\n`;\n","export const colors = {\n  // White\n  white: \"#FFFFFF\",\n  \"white-alpha-85\": \"rgba(255, 255, 255, 0.85)\",\n  \"white-alpha-40\": \"rgba(255, 255, 255, 0.40)\",\n\n  // Brown\n  \"brown-10\": \"#FAF9F8\",\n  \"brown-20\": \"#F5F3F0\",\n  \"brown-30\": \"#EEEBE5\",\n  \"brown-40\": \"#E6E2DA\",\n  \"brown-50\": \"#CFCBC4\",\n  \"brown-60\": \"#A19E99\",\n  \"brown-70\": \"#73716D\",\n  \"brown-80\": \"#5C5A57\",\n  \"brown-90\": \"#2E2D2C\",\n  \"brown-100\": \"#171716\",\n  \"brown-alpha-12\": \"rgba(23, 23, 22, 0.12)\",\n  \"brown-alpha-20\": \"rgba(23, 23, 22, 0.20)\",\n  \"brown-alpha-55\": \"rgba(23, 23, 22, 0.55)\",\n  \"brown-alpha-70\": \"rgba(23, 23, 22, 0.70)\",\n  \"brown-alpha-80\": \"rgba(23, 23, 22, 0.80)\",\n  \"brown-alpha-90\": \"rgba(23, 23, 22, 0.90)\",\n\n  // Fuchsia\n  \"fuchsia-50\": \"#FAF5FF\",\n  \"fuchsia-300\": \"#F0ABFC\",\n  \"fuchsia-500\": \"#D946EF\",\n  \"fuchsia-600\": \"#C026D3\",\n  \"fuchsia-800\": \"#86198F\",\n\n  // Pink\n  \"pink-50\": \"#FDF2F8\",\n  \"pink-400\": \"#F472B6\",\n  \"pink-600\": \"#DB2777\",\n  \"pink-800\": \"#9D174D\",\n\n  // Violet\n  \"violet-50\": \"#F5F3FF\",\n  \"violet-400\": \"#A78BFA\",\n  \"violet-600\": \"#7C3AED\",\n  \"violet-800\": \"#5B21B6\",\n\n  // Indigo\n  \"indigo-50\": \"#EEF2FF\",\n  \"indigo-400\": \"#818CF8\",\n  \"indigo-500\": \"#6366F1\",\n  \"indigo-600\": \"#4F46E5\",\n  \"indigo-800\": \"#3730A3\",\n\n  // Cyan\n  \"cyan-50\": \"#E7FEFF\",\n  \"cyan-300\": \"#67E8F9\",\n  \"cyan-600\": \"#0891B2\",\n  \"cyan-900\": \"#164E63\",\n\n  // Teal\n  \"teal-50\": \"#EBFDF9\",\n  \"teal-300\": \"#5EEAD4\",\n  \"teal-600\": \"#0D9488\",\n\n  // Rose\n  \"rose-400\": \"#FB7185\",\n\n  // Purple\n  \"purple-400\": \"#C084FC\",\n\n  // Blue\n  \"blue-50\": \"#EFF6FF\",\n  \"blue-100\": \"#DBEAFE\",\n  \"blue-300\": \"#93C5FD\",\n  \"blue-400\": \"#60A5FA\",\n  \"blue-600\": \"#2563EB\",\n  \"blue-800\": \"#1E40AF\",\n\n  // Sky\n  \"sky-300\": \"#7DD3FC\",\n\n  // Green\n  \"green-50\": \"#ECF9F0\",\n  \"green-100\": \"#D4F1D9\",\n  \"green-400\": \"#3DC269\",\n  \"green-700\": \"#277C43\",\n  \"green-800\": \"#1C5930\",\n\n  // Orange\n  \"orange-50\": \"#FFF7ED\",\n  \"orange-100\": \"#FFEDD5\",\n  \"orange-200\": \"#FED7AA\",\n  \"orange-500\": \"#F97316\",\n  \"orange-600\": \"#EA580C\",\n\n  // Red\n  \"red-50\": \"#FEF2F2\",\n  \"red-100\": \"#FEE2E2\",\n  \"red-200\": \"#FECACA\",\n  \"red-400\": \"#F7776C\",\n  \"red-500\": \"#EF4444\",\n  \"red-600\": \"#DC2626\",\n} as const;\n\nexport type ColorToken = keyof typeof colors;\n"],"mappings":"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","names":["styled","Icon","import_react","import_styled_components","styled","import_jsx_runtime","IconButton"]}
+{"version":3,"sources":["../src/components/icon/index.ts","../src/components/icon/icon.tsx","../src/components/icon/icon-styles.ts","../src/components/icon-button/icon-button.tsx","../src/components/icon-button/icon-button-styles.ts","../src/tokens/colors.ts"],"sourcesContent":["export { Icon } from \"./icon\";\nexport type { IconProps } from \"./types\";\nexport { IconButton } from \"../icon-button/icon-button\";\nexport type { IconButtonIntent, IconButtonProps, IconButtonSize, IconButtonVariant } from \"../icon-button/types\";\n","import { forwardRef } from \"react\";\n\nimport { IconWrapper, getStrokeWidth } from \"./icon-styles\";\nimport type { IconProps } from \"./types\";\n\nconst DEFAULT_SIZE = 16;\n\nexport const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon(\n  { icon: IconComponent, size = DEFAULT_SIZE, color, className, \"aria-label\": ariaLabel },\n  ref\n) {\n  return (\n    <IconWrapper\n      ref={ref}\n      className={className}\n      $color={color}\n      aria-label={ariaLabel}\n      role={ariaLabel ? \"img\" : undefined}\n    >\n      <IconComponent width={size} height={size} strokeWidth={getStrokeWidth(size)} />\n    </IconWrapper>\n  );\n});\n","import styled from \"styled-components\";\n\nexport const STROKE_WIDTH_BY_SIZE: Record<number, number> = {\n  12: 1.4,\n  14: 1.4,\n  16: 1.8,\n  18: 1.8,\n  20: 1.8,\n  24: 1.8,\n};\n\nexport const DEFAULT_STROKE_WIDTH = 1.8;\n\nexport function getStrokeWidth(size: number): number {\n  return STROKE_WIDTH_BY_SIZE[size] ?? DEFAULT_STROKE_WIDTH;\n}\n\nexport const IconWrapper = styled.span<{ $color?: string }>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: ${({ $color }) => $color ?? \"currentColor\"};\n  flex-shrink: 0;\n`;\n","import { forwardRef } from \"react\";\n\nimport { Icon } from \"../icon/icon\";\nimport { Button } from \"./icon-button-styles\";\nimport type { IconButtonProps, IconButtonSize } from \"./types\";\n\nconst ICON_SIZE_BY_BUTTON_SIZE: Record<IconButtonSize, number> = {\n  small: 16,\n  medium: 20,\n};\n\n/** Icon-only button. `forwardRef` + the rest-props spread so Radix `Slot`-based wrappers\n * (Tooltip, Popover, DropdownMenu) can attach refs and event handlers via `asChild`. */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  {\n    icon,\n    size = \"small\",\n    variant = \"short\",\n    intent = \"secondary\",\n    isSelected = false,\n    disabled = false,\n    onClick,\n    className,\n    id,\n    as,\n    \"aria-label\": ariaLabel,\n    ...rest\n  },\n  ref\n) {\n  // Only set `type=\"button\"` when rendering as a native button. Anchors (`as=\"a\"`) treat the\n  // `type` attribute as a content-type hint for the linked resource — `type=\"button\"` on an\n  // anchor is semantically wrong and shows up as an a11y / HTML-validation noise warning.\n  const isNativeButton = as === undefined || as === \"button\";\n  return (\n    <Button\n      ref={ref}\n      className={className}\n      id={id}\n      as={as}\n      $size={size}\n      $variant={variant}\n      $intent={intent}\n      $isSelected={isSelected}\n      disabled={disabled}\n      onClick={disabled ? undefined : onClick}\n      aria-label={ariaLabel}\n      {...(isNativeButton ? { type: \"button\" as const } : {})}\n      {...rest}\n    >\n      <Icon icon={icon} size={ICON_SIZE_BY_BUTTON_SIZE[size]} />\n    </Button>\n  );\n});\n","import styled, { css } from \"styled-components\";\n\nimport { colors } from \"../../tokens/colors\";\nimport type { IconButtonIntent, IconButtonSize, IconButtonVariant } from \"./types\";\n\nconst PADDING: Record<IconButtonVariant, Record<IconButtonSize, string>> = {\n  short: {\n    small: \"4px\",\n    medium: \"6px\",\n  },\n  long: {\n    small: \"4px 6px\",\n    medium: \"6px 10px\",\n  },\n};\n\nconst BORDER_RADIUS: Record<IconButtonSize, number> = {\n  small: 6,\n  medium: 10,\n};\n\n// Color treatment per intent. \"secondary\" is the original transparent ghost (default — preserves\n// every existing consumer). \"primary\" / \"error\" are filled, mirroring `Button`'s solid intents.\nconst intentStyles: Record<IconButtonIntent, (args: { $isSelected: boolean }) => ReturnType<typeof css>> = {\n  secondary: ({ $isSelected }) => css`\n    background: ${$isSelected ? colors[\"brown-40\"] : \"transparent\"};\n    color: ${colors[\"brown-100\"]};\n\n    &:hover:not(:disabled) {\n      background: ${$isSelected ? colors[\"brown-40\"] : colors[\"brown-20\"]};\n    }\n\n    &:active:not(:disabled) {\n      background: ${colors[\"brown-40\"]};\n    }\n\n    &:disabled {\n      color: ${colors[\"brown-50\"]};\n      background: transparent;\n    }\n  `,\n  primary: () => css`\n    background: ${colors[\"brown-100\"]};\n    color: ${colors.white};\n\n    &:hover:not(:disabled) {\n      background: ${colors[\"brown-90\"]};\n    }\n\n    &:active:not(:disabled) {\n      background: ${colors[\"brown-90\"]};\n    }\n\n    &:disabled {\n      color: ${colors[\"brown-50\"]};\n      background: ${colors[\"brown-20\"]};\n    }\n  `,\n  error: () => css`\n    background: ${colors[\"red-500\"]};\n    color: ${colors.white};\n\n    &:hover:not(:disabled) {\n      background: ${colors[\"red-600\"]};\n    }\n\n    &:active:not(:disabled) {\n      background: ${colors[\"red-600\"]};\n    }\n\n    &:disabled {\n      color: ${colors[\"red-200\"]};\n      background: ${colors[\"red-100\"]};\n    }\n  `,\n};\n\nexport const Button = styled.button<{\n  $size: IconButtonSize;\n  $variant: IconButtonVariant;\n  $intent: IconButtonIntent;\n  $isSelected: boolean;\n}>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: ${({ $size, $variant }) => PADDING[$variant][$size]};\n  border: none;\n  border-radius: ${({ $size }) => BORDER_RADIUS[$size]}px;\n  cursor: pointer;\n  transition: background-color 100ms ease;\n\n  ${({ $intent, $isSelected }) => intentStyles[$intent]({ $isSelected })}\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n`;\n","export const colors = {\n  // White\n  white: \"#FFFFFF\",\n  \"white-alpha-85\": \"rgba(255, 255, 255, 0.85)\",\n  \"white-alpha-40\": \"rgba(255, 255, 255, 0.40)\",\n\n  // Brown\n  \"brown-10\": \"#FAF9F8\",\n  \"brown-20\": \"#F5F3F0\",\n  \"brown-30\": \"#EEEBE5\",\n  \"brown-40\": \"#E6E2DA\",\n  \"brown-50\": \"#CFCBC4\",\n  \"brown-60\": \"#A19E99\",\n  \"brown-70\": \"#73716D\",\n  \"brown-80\": \"#5C5A57\",\n  \"brown-90\": \"#2E2D2C\",\n  \"brown-100\": \"#171716\",\n  \"brown-alpha-12\": \"rgba(23, 23, 22, 0.12)\",\n  \"brown-alpha-20\": \"rgba(23, 23, 22, 0.20)\",\n  \"brown-alpha-55\": \"rgba(23, 23, 22, 0.55)\",\n  \"brown-alpha-70\": \"rgba(23, 23, 22, 0.70)\",\n  \"brown-alpha-80\": \"rgba(23, 23, 22, 0.80)\",\n  \"brown-alpha-90\": \"rgba(23, 23, 22, 0.90)\",\n\n  // Fuchsia\n  \"fuchsia-50\": \"#FAF5FF\",\n  \"fuchsia-300\": \"#F0ABFC\",\n  \"fuchsia-500\": \"#D946EF\",\n  \"fuchsia-600\": \"#C026D3\",\n  \"fuchsia-800\": \"#86198F\",\n\n  // Pink\n  \"pink-50\": \"#FDF2F8\",\n  \"pink-400\": \"#F472B6\",\n  \"pink-600\": \"#DB2777\",\n  \"pink-800\": \"#9D174D\",\n\n  // Violet\n  \"violet-50\": \"#F5F3FF\",\n  \"violet-400\": \"#A78BFA\",\n  \"violet-600\": \"#7C3AED\",\n  \"violet-800\": \"#5B21B6\",\n\n  // Indigo\n  \"indigo-50\": \"#EEF2FF\",\n  \"indigo-400\": \"#818CF8\",\n  \"indigo-500\": \"#6366F1\",\n  \"indigo-600\": \"#4F46E5\",\n  \"indigo-800\": \"#3730A3\",\n\n  // Cyan\n  \"cyan-50\": \"#E7FEFF\",\n  \"cyan-300\": \"#67E8F9\",\n  \"cyan-600\": \"#0891B2\",\n  \"cyan-900\": \"#164E63\",\n\n  // Teal\n  \"teal-50\": \"#EBFDF9\",\n  \"teal-300\": \"#5EEAD4\",\n  \"teal-600\": \"#0D9488\",\n\n  // Rose\n  \"rose-400\": \"#FB7185\",\n\n  // Purple\n  \"purple-400\": \"#C084FC\",\n\n  // Blue\n  \"blue-50\": \"#EFF6FF\",\n  \"blue-100\": \"#DBEAFE\",\n  \"blue-300\": \"#93C5FD\",\n  \"blue-400\": \"#60A5FA\",\n  \"blue-600\": \"#2563EB\",\n  \"blue-800\": \"#1E40AF\",\n\n  // Sky\n  \"sky-300\": \"#7DD3FC\",\n\n  // Green\n  \"green-50\": \"#ECF9F0\",\n  \"green-100\": \"#D4F1D9\",\n  \"green-400\": \"#3DC269\",\n  \"green-700\": \"#277C43\",\n  \"green-800\": \"#1C5930\",\n\n  // Orange\n  \"orange-50\": \"#FFF7ED\",\n  \"orange-100\": \"#FFEDD5\",\n  \"orange-200\": \"#FED7AA\",\n  \"orange-500\": \"#F97316\",\n  \"orange-600\": \"#EA580C\",\n\n  // Red\n  \"red-50\": \"#FEF2F2\",\n  \"red-100\": \"#FEE2E2\",\n  \"red-200\": \"#FECACA\",\n  \"red-400\": \"#F7776C\",\n  \"red-500\": \"#EF4444\",\n  \"red-600\": \"#DC2626\",\n} as const;\n\nexport type ColorToken = keyof typeof colors;\n"],"mappings":"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","names":["styled","Icon","import_react","import_styled_components","styled","import_jsx_runtime","IconButton"]}

package/dist/icon.d.cts

@@ -21,6 +21,13 @@ declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttribu
 type IconButtonSize = "small" | "medium";
 /** Button shape variant. "short" = square (default), "long" = pill / wider hit area. */
 type IconButtonVariant = "short" | "long";
+/**
+ * Semantic intent controlling fill + color — mirrors `Button`'s `intent`.
+ * - "secondary" — subtle transparent ghost with a brown glyph (default; the original IconButton look).
+ * - "primary" — filled brown-100 background with a white glyph, for a prominent icon-only CTA.
+ * - "error" — filled red background with a white glyph, for destructive / retry actions.
+ */
+type IconButtonIntent = "primary" | "secondary" | "error";
 /** Props for the IconButton ghost-style button component. Extends the native button attribute set
  * (minus the props we own — `disabled`, `onClick`, `className`, `id`, `aria-label`) so consumers
  * can wire DOM-level events through, e.g. when wrapping IconButton in Radix's `Tooltip` /
@@ -32,6 +39,8 @@ interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
     size?: IconButtonSize;
     /** Shape variant — "short" for square, "long" for pill. @default "short" */
     variant?: IconButtonVariant;
+    /** Semantic intent controlling fill + color. "secondary" = ghost (default), "primary" = filled CTA, "error" = filled red. @default "secondary" */
+    intent?: IconButtonIntent;
     /** Whether the button is in a toggled/active state (e.g., "liked"). */
     isSelected?: boolean;
     /** Whether the button is non-interactive. */
@@ -56,8 +65,8 @@ interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
     download?: AnchorHTMLAttributes<HTMLAnchorElement>["download"];
 }
 
-/** Ghost-style icon button. `forwardRef` + the rest-props spread so Radix `Slot`-based wrappers
+/** Icon-only button. `forwardRef` + the rest-props spread so Radix `Slot`-based wrappers
  * (Tooltip, Popover, DropdownMenu) can attach refs and event handlers via `asChild`. */
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
-export { Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconProps };
+export { Icon, IconButton, type IconButtonIntent, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconProps };

package/dist/icon.d.ts

@@ -21,6 +21,13 @@ declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttribu
 type IconButtonSize = "small" | "medium";
 /** Button shape variant. "short" = square (default), "long" = pill / wider hit area. */
 type IconButtonVariant = "short" | "long";
+/**
+ * Semantic intent controlling fill + color — mirrors `Button`'s `intent`.
+ * - "secondary" — subtle transparent ghost with a brown glyph (default; the original IconButton look).
+ * - "primary" — filled brown-100 background with a white glyph, for a prominent icon-only CTA.
+ * - "error" — filled red background with a white glyph, for destructive / retry actions.
+ */
+type IconButtonIntent = "primary" | "secondary" | "error";
 /** Props for the IconButton ghost-style button component. Extends the native button attribute set
  * (minus the props we own — `disabled`, `onClick`, `className`, `id`, `aria-label`) so consumers
  * can wire DOM-level events through, e.g. when wrapping IconButton in Radix's `Tooltip` /
@@ -32,6 +39,8 @@ interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
     size?: IconButtonSize;
     /** Shape variant — "short" for square, "long" for pill. @default "short" */
     variant?: IconButtonVariant;
+    /** Semantic intent controlling fill + color. "secondary" = ghost (default), "primary" = filled CTA, "error" = filled red. @default "secondary" */
+    intent?: IconButtonIntent;
     /** Whether the button is in a toggled/active state (e.g., "liked"). */
     isSelected?: boolean;
     /** Whether the button is non-interactive. */
@@ -56,8 +65,8 @@ interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
     download?: AnchorHTMLAttributes<HTMLAnchorElement>["download"];
 }
 
-/** Ghost-style icon button. `forwardRef` + the rest-props spread so Radix `Slot`-based wrappers
+/** Icon-only button. `forwardRef` + the rest-props spread so Radix `Slot`-based wrappers
  * (Tooltip, Popover, DropdownMenu) can attach refs and event handlers via `asChild`. */
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
-export { Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconProps };
+export { Icon, IconButton, type IconButtonIntent, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconProps };

package/dist/icon.js

@@ -1,7 +1,7 @@
 import "./chunk-72TJUKMV.js";
 import {
   IconButton
-} from "./chunk-OBOXCBDL.js";
+} from "./chunk-PYDVANWI.js";
 import {
   Icon
 } from "./chunk-OLJIJYB5.js";