@deckai/deck-ui 0.0.13 → 0.0.14

package/dist/components/Switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/tailwind.ts","../../src/components/Switch.tsx"],"names":["cn","inputs","twMerge","clsx","focusRingStyles","Switch","className","label","description","props","ref"],"mappings":"8HAGO,SAASA,KAAMC,CAAsB,CAAA,CAC1C,OAAOC,OAAQC,CAAAA,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CC8DO,IAAMG,CACX,CAAA,qGAAA,KCxDWC,CAAe,CAAA,CAAA,CAAA,UAAA,CAG1B,CAAC,CAAE,SAAA,CAAAC,CAAW,CAAA,KAAA,CAAAC,CAAO,CAAA,WAAA,CAAAC,EAAa,GAAGC,CAAM,CAAGC,CAAAA,CAAAA,GAC9C,CAAC,CAAA,aAAA,CAAA,KAAA,CAAA,CAAI,UAAU,yBACb,CAAA,CAAA,CAAA,CAAA,aAAA,CAAiB,CAAhB,CAAA,IAAA,CAAA,CACC,SAAWV,CAAAA,CAAAA,CACT,oDACA,uDACA,CAAA,8CAAA,CACAI,EACA,iDACA,CAAA,2EAAA,CACAE,CACF,CACC,CAAA,GAAGG,CACJ,CAAA,GAAA,CAAKC,CAEL,CAAA,CAAA,CAAA,CAAA,aAAA,CAAiB,QAAhB,CACC,SAAA,CAAWV,CACT,CAAA,mCAAA,CACA,wCACA,CAAA,sBAAA,CACA,qCACA,sCACF,CAAA,CACF,CACF,CAAA,CAAA,CACEO,CAASC,EAAAA,CAAAA,GACT,gBAAC,KAAI,CAAA,CAAA,SAAA,CAAU,iBACZD,CACC,EAAA,CAAA,CAAA,aAAA,CAAC,SACC,SAAU,CAAA,uCAAA,CACV,OAASE,CAAAA,CAAAA,CAAM,EAEdF,CAAAA,CAAAA,CACH,EAEDC,CACC,EAAA,CAAA,CAAA,aAAA,CAAC,MAAK,CAAA,CAAA,SAAA,CAAU,6BAA+BA,CAAAA,CAAAA,CAAY,CAE/D,CAEJ,CACD,EAEDH,CAAAA,CAAO,WAAc,CAAA,QAAA","file":"Switch.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n  const colorNames = Object.keys(colors) as (keyof Colors)[];\n  const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n  const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n  const safelist: string[] = [];\n\n  colorNames.forEach((colorName) => {\n    if (typeof colors[colorName] === \"object\") {\n      // Handle nested color objects (with number keys)\n      Object.keys(colors[colorName]).forEach((shade) => {\n        utilities.forEach((utility) => {\n          // Base utility\n          safelist.push(`${utility}-${colorName}-${shade}`);\n\n          // Variant utilities\n          variants.forEach((variant) => {\n            safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n          });\n        });\n      });\n    } else {\n      // Handle direct color values\n      utilities.forEach((utility) => {\n        safelist.push(`${utility}-${colorName}`);\n\n        variants.forEach((variant) => {\n          safelist.push(`${variant}${utility}-${colorName}`);\n        });\n      });\n    }\n  });\n\n  // Generate typography classes\n  Object.entries(typography).forEach(([family, sizes]) => {\n    Object.keys(sizes).forEach((size) => {\n      // Base typography classes\n      safelist.push(`text-${family}-${size}`);\n\n      // Add variants\n      variants.forEach((variant) => {\n        safelist.push(`${variant}text-${family}-${size}`);\n      });\n    });\n  });\n\n  const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n  const typographyClasses = Object.entries(typography).flatMap(\n    ([category, sizes]) =>\n      Object.keys(sizes).map((size) => `text-${category}-${size}`)\n  );\n\n  // Generate responsive variants\n  const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n    breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n  );\n\n  return [\n    ...typographyClasses,\n    ...responsiveTypographyClasses\n    // ... rest of your safelist\n  ];\n};\n\nexport const focusRingStyles =\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import * as React from \"react\";\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type SwitchProps = React.ComponentPropsWithoutRef<\n  typeof SwitchPrimitive.Root\n> & {\n  label?: string;\n  description?: string;\n};\n\nexport const Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitive.Root>,\n  SwitchProps\n>(({ className, label, description, ...props }, ref) => (\n  <div className=\"flex items-center gap-2\">\n    <SwitchPrimitive.Root\n      className={cn(\n        \"peer inline-flex h-6 w-11 shrink-0 cursor-pointer\",\n        \"items-center rounded-full border-2 border-transparent\",\n        \"transition-colors focus-visible:outline-none\",\n        focusRingStyles,\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        \"data-[state=checked]:bg-primary-50 data-[state=unchecked]:bg-secondary-50\",\n        className\n      )}\n      {...props}\n      ref={ref}\n    >\n      <SwitchPrimitive.Thumb\n        className={cn(\n          \"pointer-events-none block h-5 w-5\",\n          \"rounded-full bg-white shadow-lg ring-0\",\n          \"transition-transform\",\n          \"data-[state=checked]:translate-x-5\",\n          \"data-[state=unchecked]:translate-x-0\"\n        )}\n      />\n    </SwitchPrimitive.Root>\n    {(label || description) && (\n      <div className=\"flex flex-col\">\n        {label && (\n          <label\n            className=\"text-sm font-medium text-text-primary\"\n            htmlFor={props.id}\n          >\n            {label}\n          </label>\n        )}\n        {description && (\n          <span className=\"text-xs text-text-secondary\">{description}</span>\n        )}\n      </div>\n    )}\n  </div>\n));\n\nSwitch.displayName = \"Switch\";\n"]}
+{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/tailwind.ts","../../src/components/Switch.tsx"],"names":["cn","inputs","twMerge","clsx","focusRingStyles","Switch","className","label","description","props","ref"],"mappings":"8HAGO,SAASA,KAAMC,CAAsB,CAAA,CAC1C,OAAOC,OAAQC,CAAAA,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CC8DO,IAAMG,CACX,CAAA,qGAAA,KCxDWC,CAAe,CAAA,CAAA,CAAA,UAAA,CAG1B,CAAC,CAAE,SAAA,CAAAC,CAAW,CAAA,KAAA,CAAAC,CAAO,CAAA,WAAA,CAAAC,EAAa,GAAGC,CAAM,CAAGC,CAAAA,CAAAA,GAC9C,CAAC,CAAA,aAAA,CAAA,KAAA,CAAA,CAAI,UAAU,yBACb,CAAA,CAAA,CAAA,CAAA,aAAA,CAAiB,CAAhB,CAAA,IAAA,CAAA,CACC,SAAWV,CAAAA,CAAAA,CACT,oDACA,uDACA,CAAA,8CAAA,CACAI,EACA,iDACA,CAAA,2EAAA,CACAE,CACF,CACC,CAAA,GAAGG,CACJ,CAAA,GAAA,CAAKC,CAEL,CAAA,CAAA,CAAA,CAAA,aAAA,CAAiB,QAAhB,CACC,SAAA,CAAWV,CACT,CAAA,mCAAA,CACA,wCACA,CAAA,sBAAA,CACA,qCACA,sCACF,CAAA,CACF,CACF,CAAA,CAAA,CACEO,CAASC,EAAAA,CAAAA,GACT,gBAAC,KAAI,CAAA,CAAA,SAAA,CAAU,iBACZD,CACC,EAAA,CAAA,CAAA,aAAA,CAAC,SAAM,SAAU,CAAA,+BAAA,CAAgC,OAASE,CAAAA,CAAAA,CAAM,EAC7DF,CAAAA,CAAAA,CACH,EAEDC,CACC,EAAA,CAAA,CAAA,aAAA,CAAC,MAAK,CAAA,CAAA,SAAA,CAAU,6BAA+BA,CAAAA,CAAAA,CAAY,CAE/D,CAEJ,CACD,EAEDH,CAAAA,CAAO,WAAc,CAAA,QAAA","file":"Switch.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n  const colorNames = Object.keys(colors) as (keyof Colors)[];\n  const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n  const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n  const safelist: string[] = [];\n\n  colorNames.forEach((colorName) => {\n    if (typeof colors[colorName] === \"object\") {\n      // Handle nested color objects (with number keys)\n      Object.keys(colors[colorName]).forEach((shade) => {\n        utilities.forEach((utility) => {\n          // Base utility\n          safelist.push(`${utility}-${colorName}-${shade}`);\n\n          // Variant utilities\n          variants.forEach((variant) => {\n            safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n          });\n        });\n      });\n    } else {\n      // Handle direct color values\n      utilities.forEach((utility) => {\n        safelist.push(`${utility}-${colorName}`);\n\n        variants.forEach((variant) => {\n          safelist.push(`${variant}${utility}-${colorName}`);\n        });\n      });\n    }\n  });\n\n  // Generate typography classes\n  Object.entries(typography).forEach(([family, sizes]) => {\n    Object.keys(sizes).forEach((size) => {\n      // Base typography classes\n      safelist.push(`text-${family}-${size}`);\n\n      // Add variants\n      variants.forEach((variant) => {\n        safelist.push(`${variant}text-${family}-${size}`);\n      });\n    });\n  });\n\n  const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n  const typographyClasses = Object.entries(typography).flatMap(\n    ([category, sizes]) =>\n      Object.keys(sizes).map((size) => `text-${category}-${size}`)\n  );\n\n  // Generate responsive variants\n  const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n    breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n  );\n\n  return [\n    ...typographyClasses,\n    ...responsiveTypographyClasses\n    // ... rest of your safelist\n  ];\n};\n\nexport const focusRingStyles =\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import * as React from \"react\";\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type SwitchProps = React.ComponentPropsWithoutRef<\n  typeof SwitchPrimitive.Root\n> & {\n  label?: string;\n  description?: string;\n};\n\nexport const Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitive.Root>,\n  SwitchProps\n>(({ className, label, description, ...props }, ref) => (\n  <div className=\"flex items-center gap-2\">\n    <SwitchPrimitive.Root\n      className={cn(\n        \"peer inline-flex h-6 w-11 shrink-0 cursor-pointer\",\n        \"items-center rounded-full border-2 border-transparent\",\n        \"transition-colors focus-visible:outline-none\",\n        focusRingStyles,\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        \"data-[state=checked]:bg-primary-50 data-[state=unchecked]:bg-secondary-50\",\n        className\n      )}\n      {...props}\n      ref={ref}\n    >\n      <SwitchPrimitive.Thumb\n        className={cn(\n          \"pointer-events-none block h-5 w-5\",\n          \"rounded-full bg-white shadow-lg ring-0\",\n          \"transition-transform\",\n          \"data-[state=checked]:translate-x-5\",\n          \"data-[state=unchecked]:translate-x-0\"\n        )}\n      />\n    </SwitchPrimitive.Root>\n    {(label || description) && (\n      <div className=\"flex flex-col\">\n        {label && (\n          <label className=\"text-sm font-medium text-text\" htmlFor={props.id}>\n            {label}\n          </label>\n        )}\n        {description && (\n          <span className=\"text-xs text-text-secondary\">{description}</span>\n        )}\n      </div>\n    )}\n  </div>\n));\n\nSwitch.displayName = \"Switch\";\n"]}

package/dist/components/Tabs.cjs

@@ -1,2 +1,10 @@
-'use strict';var n=require('react'),o=require('@radix-ui/react-tabs');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var n__default=/*#__PURE__*/_interopDefault(n);var o__namespace=/*#__PURE__*/_interopNamespace(o);var u={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},c=e=>{let[t,r]=e.split("-");return t==="heading"?u[r]||"p":t==="label"?"label":"p"},h={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},H=e=>e?(Array.isArray(e)?e:[e]).map(r=>{if(r.includes(":")){let[s,l]=r.split(":");return `${s}:text-${l}`}return `text-${r}`}).join(" "):"text-body-default",T=n__default.default.forwardRef(({variant:e="body-default",color:t="text-primary",as:r,className:s,children:l,weight:a,...p},y)=>{let m=H(e),d=t&&t==="inherit"?"inherit":t?`text-${t}`:"",g=n__default.default.useMemo(()=>{let b=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return c(b)},[e]);return n__default.default.createElement(r||g,{ref:y,className:`font-sans antialiased ${m} ${d} ${a?`!${h[a]}`:""} ${s??""}`,...p},l)});T.displayName="Text";var L=n__default.default.forwardRef(({items:e,defaultValue:t,className:r="",onChange:s},l)=>n__default.default.createElement(o__namespace.Root,{defaultValue:t||e[0]?.value,onValueChange:s,className:r},n__default.default.createElement(o__namespace.List,{ref:l,className:"flex gap-8 border-b border-stroke mb-8"},e.map(a=>n__default.default.createElement(o__namespace.Trigger,{key:a.value,value:a.value,className:"group pb-4 relative flex-1"},n__default.default.createElement(T,{variant:["sm:body-lg-semibold","body-default-semibold"],color:"text-secondary",className:"group-data-[state=active]:text-text-primary transition-colors sm:text-inherit"},a.label),n__default.default.createElement("div",{className:"absolute bottom-0 left-0 right-0 h-1 bg-primary-100 scale-x-0 group-data-[state=active]:scale-x-100 transition-transform"})))),e.map(a=>n__default.default.createElement(o__namespace.Content,{key:a.value,value:a.value},a.content))));L.displayName="Tabs";if (exports.default) module.exports = exports.default;exports.Tabs=L;//# sourceMappingURL=Tabs.cjs.map
+'use strict';var n=require('react'),s=require('@radix-ui/react-tabs'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var n__namespace=/*#__PURE__*/_interopNamespace(n);var s__namespace=/*#__PURE__*/_interopNamespace(s);var x={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},H=e=>{let[r,a]=e.split("-");return r==="heading"?x[a]||"p":r==="label"?"label":"p"},M={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},L=e=>e?(Array.isArray(e)?e:[e]).map(a=>{if(a.includes(":")){let[l,o]=a.split(":");return `${l}:text-${o}`}return `text-${a}`}).join(" "):"text-body-default",d=n__namespace.default.forwardRef(({variant:e="body-default",color:r="primary",as:a,className:l,children:o,weight:i,...p},c)=>{let b=L(e),t=r==="inherit"?"text-inherit":`text-text-${r}`,f=n__namespace.default.useMemo(()=>{let h=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return H(h)},[e]);return n__namespace.default.createElement(a||f,{ref:c,className:`font-sans antialiased ${b} ${t} ${i?`!${M[i]}`:""} ${l??""}`,...p},o)});d.displayName="Text";function m(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var g="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var v={black:"bg-text-text text-white",accent:"bg-primary-100 text-white",secondary:"bg-secondary-100 text-secondary"},$={black:"border border-text text-text",accent:"border border-primary-100 text-primary-100",secondary:"border border-text-secondary text-secondary"},y=n__namespace.forwardRef(({className:e,variant:r="filled",color:a="black",isLoading:l=!1,children:o,disabled:i,...p},c)=>n__namespace.createElement("button",{ref:c,className:m(`
+          sm:px-7 px-4
+          py-2
+          inline-flex items-center justify-center
+          rounded-lg 
+          transition-colors duration-200
+          disabled:opacity-50 disabled:pointer-events-none
+          hover:opacity-80 active:scale-95 
+          truncate`,g,r==="filled"?v[a]:$[a],e),disabled:i||l,type:"button",...p},typeof o=="string"?n__namespace.createElement(d,{variant:["sm:body-default-bold","body-xxs-semibold"],color:"inherit"},o):o));y.displayName="Button";var C=n__namespace.default.forwardRef(({items:e,defaultValue:r,className:a="",onChange:l,variant:o="default"},i)=>{let[p,c]=n__namespace.default.useState(r||e[0]?.value),b=n.useCallback(t=>{l?.(t),c(t);},[l]);return n__namespace.default.createElement(s__namespace.Root,{defaultValue:r||e[0]?.value,onValueChange:b,className:a},n__namespace.default.createElement(s__namespace.List,{ref:i,className:m("flex",o==="default"?"gap-8 border-b border-stroke mb-4":"gap-4 justify-center flex")},e.map(t=>o==="default"?n__namespace.default.createElement(s__namespace.Trigger,{key:t.value,value:t.value,className:"group relative flex-1 pb-4"},n__namespace.default.createElement(d,{variant:["sm:body-md","body-default-semibold"],color:"secondary",className:"group-data-[state=active]:text-text transition-colors sm:text-inherit"},t.label),n__namespace.default.createElement("div",{className:"absolute bottom-0 left-0 right-0 h-1 bg-primary-100 scale-x-0 group-data-[state=active]:scale-x-100 transition-transform"})):n__namespace.default.createElement(s__namespace.Trigger,{key:t.value,value:t.value,asChild:!0},n__namespace.default.createElement(y,{variant:"filled",color:t.value===p?"black":"secondary",className:"py-3"},t.label)))),e.map(t=>n__namespace.default.createElement(s__namespace.Content,{key:t.value,value:t.value},t.content)))});C.displayName="Tabs";if (exports.default) module.exports = exports.default;exports.Tabs=C;//# sourceMappingURL=Tabs.cjs.map
 //# sourceMappingURL=Tabs.cjs.map

package/dist/components/Tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Text.tsx","../../src/components/Tabs.tsx"],"names":["HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","size","fontWeight","processVariants","variants","breakpoint","typographyClass","Text","React","color","as","className","children","weight","props","ref","typographyClasses","colorClasses","suggestedElement","baseVariant","Tabs","items","defaultValue","onChange","o","item"],"mappings":"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","file":"Tabs.cjs","sourcesContent":["import React from \"react\";\nimport {\n  Colors,\n  TextColorVariant,\n  PrimaryShades,\n  SecondaryShades,\n  TertiaryShades,\n  Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n  | \"p\"\n  | \"span\"\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"strong\"\n  | \"em\"\n  | \"blockquote\"\n  | \"pre\"\n  | \"code\"\n  | \"small\"\n  | \"label\"\n  | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n  p: HTMLParagraphElement;\n  span: HTMLSpanElement;\n  h1: HTMLHeadingElement;\n  h2: HTMLHeadingElement;\n  h3: HTMLHeadingElement;\n  h4: HTMLHeadingElement;\n  h5: HTMLHeadingElement;\n  h6: HTMLHeadingElement;\n  strong: HTMLElement;\n  em: HTMLElement;\n  blockquote: HTMLQuoteElement;\n  pre: HTMLPreElement;\n  code: HTMLElement;\n  small: HTMLElement;\n  label: HTMLLabelElement;\n  a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n  p: React.HTMLAttributes<HTMLParagraphElement>;\n  span: React.HTMLAttributes<HTMLSpanElement>;\n  h1: React.HTMLAttributes<HTMLHeadingElement>;\n  h2: React.HTMLAttributes<HTMLHeadingElement>;\n  h3: React.HTMLAttributes<HTMLHeadingElement>;\n  h4: React.HTMLAttributes<HTMLHeadingElement>;\n  h5: React.HTMLAttributes<HTMLHeadingElement>;\n  h6: React.HTMLAttributes<HTMLHeadingElement>;\n  strong: React.HTMLAttributes<HTMLElement>;\n  em: React.HTMLAttributes<HTMLElement>;\n  blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n  pre: React.HTMLAttributes<HTMLPreElement>;\n  code: React.HTMLAttributes<HTMLElement>;\n  small: React.HTMLAttributes<HTMLElement>;\n  label: React.LabelHTMLAttributes<HTMLLabelElement>;\n  a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n  ? TextColorVariant\n  : T extends \"primary\"\n    ? keyof PrimaryShades\n    : T extends \"secondary\"\n      ? keyof SecondaryShades\n      : T extends \"tertiary\"\n        ? keyof TertiaryShades\n        : never;\n\ntype ColorKey = {\n  [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n  keyof Typography[T],\n  string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n  [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n  xl: \"h1\",\n  lg: \"h1\",\n  md: \"h2\",\n  sm: \"h3\",\n  xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n  const [category, size] = variant.split(\"-\");\n\n  if (category === \"heading\") {\n    return HEADING_ELEMENT_MAP[size] || \"p\";\n  }\n\n  if (category === \"label\") {\n    return \"label\";\n  }\n\n  return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n  light: \"font-light\",\n  regular: \"font-regular\",\n  semibold: \"font-semibold\",\n  bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n  variant?: ResponsiveVariant | ResponsiveVariant[];\n  color?: ColorKey | \"inherit\";\n  as?: T;\n  className?: string;\n  children: React.ReactNode;\n  weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n  variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n  if (!variants) return \"text-body-default\";\n\n  const variantArray = Array.isArray(variants) ? variants : [variants];\n\n  return variantArray\n    .map((variant) => {\n      if (variant.includes(\":\")) {\n        const [breakpoint, typographyClass] = variant.split(\":\");\n        return `${breakpoint}:text-${typographyClass}`;\n      }\n      return `text-${variant}`;\n    })\n    .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n  <T extends TextElement = \"p\">(\n    {\n      variant = \"body-default\",\n      color = \"text-primary\",\n      as,\n      className,\n      children,\n      weight,\n      ...props\n    }: TextProps<T>,\n    ref: React.ForwardedRef<HTMLElementByTag[T]>\n  ) => {\n    // Process typography classes with breakpoints\n    const typographyClasses = processVariants(variant);\n\n    // Get color styles\n    const colorClasses =\n      color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n    const suggestedElement = React.useMemo(() => {\n      const baseVariant =\n        typeof variant === \"string\"\n          ? variant.split(\":\").pop()!\n          : Array.isArray(variant)\n            ? variant[0].split(\":\").pop()!\n            : \"body-default\";\n      return getElementFromVariant(baseVariant as TypographyKey);\n    }, [variant]);\n\n    const Component = (as || suggestedElement) as T;\n\n    return (\n      // @ts-expect-error TODO: figure this out\n      <Component\n        ref={ref}\n        className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n          weight ? `!${fontWeight[weight]}` : \"\"\n        } ${className ?? \"\"}`}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nText.displayName = \"Text\";\n","import React from \"react\";\nimport * as RadixTabs from \"@radix-ui/react-tabs\";\nimport { Text } from \"./Text\";\n\nexport type TabItem = {\n  value: string;\n  label: string;\n  content: React.ReactNode;\n};\n\nexport type TabsProps = {\n  items: TabItem[];\n  defaultValue?: string;\n  className?: string;\n  onChange?: (value: string) => void;\n};\n\nexport const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(\n  ({ items, defaultValue, className = \"\", onChange }, ref) => {\n    return (\n      <RadixTabs.Root\n        defaultValue={defaultValue || items[0]?.value}\n        onValueChange={onChange}\n        className={className}\n      >\n        <RadixTabs.List\n          ref={ref}\n          className=\"flex gap-8 border-b border-stroke mb-8\"\n        >\n          {items.map((item) => (\n            <RadixTabs.Trigger\n              key={item.value}\n              value={item.value}\n              className=\"group pb-4 relative flex-1\"\n            >\n              <Text\n                variant={[\"sm:body-lg-semibold\", \"body-default-semibold\"]}\n                color=\"text-secondary\"\n                className=\"group-data-[state=active]:text-text-primary transition-colors sm:text-inherit\"\n              >\n                {item.label}\n              </Text>\n              <div className=\"absolute bottom-0 left-0 right-0 h-1 bg-primary-100 scale-x-0 group-data-[state=active]:scale-x-100 transition-transform\" />\n            </RadixTabs.Trigger>\n          ))}\n        </RadixTabs.List>\n\n        {items.map((item) => (\n          <RadixTabs.Content key={item.value} value={item.value}>\n            {item.content}\n          </RadixTabs.Content>\n        ))}\n      </RadixTabs.Root>\n    );\n  }\n);\n\nTabs.displayName = \"Tabs\";\n"]}
+{"version":3,"sources":["../../src/components/Text.tsx","../../src/utils/index.ts","../../src/utils/tailwind.ts","../../src/components/Button.tsx","../../src/components/Tabs.tsx"],"names":["HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","size","fontWeight","processVariants","variants","breakpoint","typographyClass","Text","React","color","as","className","children","weight","props","ref","typographyClasses","colorClasses","suggestedElement","baseVariant","cn","inputs","twMerge","clsx","focusRingStyles","filled","outlined","Button","T","isLoading","disabled","Tabs","items","defaultValue","onChange","value","setValue","handleChange","useCallback","s","item"],"mappings":"4hBAsEA,IAAMA,CAAmD,CAAA,CACvD,GAAI,IACJ,CAAA,EAAA,CAAI,IACJ,CAAA,EAAA,CAAI,IACJ,CAAA,EAAA,CAAI,IACJ,CAAA,EAAA,CAAI,IACN,CAEMC,CAAAA,CAAAA,CAAyBC,CAAwC,EAAA,CACrE,GAAM,CAACC,CAAUC,CAAAA,CAAI,EAAIF,CAAQ,CAAA,KAAA,CAAM,GAAG,CAAA,CAE1C,OAAIC,CAAAA,GAAa,SACRH,CAAAA,CAAAA,CAAoBI,CAAI,CAAK,EAAA,GAAA,CAGlCD,CAAa,GAAA,OAAA,CACR,OAGF,CAAA,GACT,CAIME,CAAAA,CAAAA,CAAqC,CACzC,KAAO,CAAA,YAAA,CACP,OAAS,CAAA,cAAA,CACT,QAAU,CAAA,eAAA,CACV,IAAM,CAAA,WACR,EA0BMC,CACJC,CAAAA,CAAAA,EAEKA,CAEgB,CAAA,CAAA,KAAA,CAAM,OAAQA,CAAAA,CAAQ,CAAIA,CAAAA,CAAAA,CAAW,CAACA,CAAQ,CAAA,EAGhE,GAAKL,CAAAA,CAAAA,EAAY,CAChB,GAAIA,CAAQ,CAAA,QAAA,CAAS,GAAG,CAAG,CAAA,CACzB,GAAM,CAACM,CAAYC,CAAAA,CAAe,CAAIP,CAAAA,CAAAA,CAAQ,MAAM,GAAG,CAAA,CACvD,OAAO,CAAA,EAAGM,CAAU,CAAA,MAAA,EAASC,CAAe,CAAA,CAC9C,CACA,OAAO,CAAA,KAAA,EAAQP,CAAO,CAAA,CACxB,CAAC,CAAA,CACA,IAAK,CAAA,GAAG,EAZW,mBAeXQ,CAAAA,CAAAA,CAAOC,oBAAM,CAAA,UAAA,CACxB,CACE,CACE,OAAAT,CAAAA,CAAAA,CAAU,eACV,KAAAU,CAAAA,CAAAA,CAAQ,SACR,CAAA,EAAA,CAAAC,CACA,CAAA,SAAA,CAAAC,CACA,CAAA,QAAA,CAAAC,EACA,MAAAC,CAAAA,CAAAA,CACA,GAAGC,CACL,CACAC,CAAAA,CAAAA,GACG,CAEH,IAAMC,EAAoBb,CAAgBJ,CAAAA,CAAO,CAG3CkB,CAAAA,CAAAA,CACJR,CAAU,GAAA,SAAA,CAAY,cAAiB,CAAA,CAAA,UAAA,EAAaA,CAAK,CAErDS,CAAAA,CAAAA,CAAAA,CAAmBV,oBAAM,CAAA,OAAA,CAAQ,IAAM,CAC3C,IAAMW,CAAAA,CACJ,OAAOpB,CAAY,EAAA,QAAA,CACfA,CAAQ,CAAA,KAAA,CAAM,GAAG,CAAA,CAAE,GAAI,EAAA,CACvB,MAAM,OAAQA,CAAAA,CAAO,CACnBA,CAAAA,CAAAA,CAAQ,CAAC,CAAA,CAAE,KAAM,CAAA,GAAG,EAAE,GAAI,EAAA,CAC1B,cACR,CAAA,OAAOD,CAAsBqB,CAAAA,CAA4B,CAC3D,CAAA,CAAG,CAACpB,CAAO,CAAC,CAIZ,CAAA,OAEES,oBAAA,CAAA,aAAA,CAJiBE,CAAMQ,EAAAA,CAAAA,CAItB,CACC,GAAKH,CAAAA,CAAAA,CACL,SAAW,CAAA,CAAA,sBAAA,EAAyBC,CAAiB,CAAA,CAAA,EAAIC,CAAY,CAAA,CAAA,EACnEJ,EAAS,CAAIX,CAAAA,EAAAA,CAAAA,CAAWW,CAAM,CAAC,CAAK,CAAA,CAAA,EACtC,CAAIF,CAAAA,EAAAA,CAAAA,EAAa,EAAE,CAClB,CAAA,CAAA,GAAGG,CAEHF,CAAAA,CAAAA,CACH,CAEJ,CACF,CAEAL,CAAAA,CAAAA,CAAK,YAAc,MC9LnB,CAGO,SAASa,CAAAA,CAAAA,GAAMC,CAAsB,CAAA,CAC1C,OAAOC,qBAAAA,CAAQC,SAAKF,CAAAA,CAAM,CAAC,CAC7B,CC8DO,IAAMG,CACX,CAAA,qGAAA,CClDK,IAAMC,CAAS,CAAA,CACpB,KAAO,CAAA,yBAAA,CAEP,MAAQ,CAAA,2BAAA,CACR,SAAW,CAAA,iCACb,EAEaC,CAAW,CAAA,CACtB,KAAO,CAAA,8BAAA,CACP,MAAQ,CAAA,4CAAA,CACR,SAAW,CAAA,6CACb,EAEaC,CAAe,CAAAC,YAAA,CAAA,UAAA,CAC1B,CACE,CACE,SAAAjB,CAAAA,CAAAA,CACA,OAAAZ,CAAAA,CAAAA,CAAU,SACV,KAAAU,CAAAA,CAAAA,CAAQ,OACR,CAAA,SAAA,CAAAoB,CAAY,CAAA,CAAA,CAAA,CACZ,QAAAjB,CAAAA,CAAAA,CACA,SAAAkB,CACA,CAAA,GAAGhB,CACL,CAAA,CACAC,IAEAa,YAAC,CAAA,aAAA,CAAA,QAAA,CAAA,CACC,GAAKb,CAAAA,CAAAA,CACL,UAAWK,CACT,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBASAI,CAAAA,CAAAA,CAAAA,CACAzB,IAAY,QAAW0B,CAAAA,CAAAA,CAAOhB,CAAK,CAAIiB,CAAAA,CAAAA,CAASjB,CAAK,CAAA,CACrDE,CACF,CAAA,CACA,SAAUmB,CAAYD,EAAAA,CAAAA,CACtB,KAAK,QACJ,CAAA,GAAGf,GAEH,OAAOF,CAAAA,EAAa,QACnB,CAAAgB,YAAA,CAAA,aAAA,CAACrB,CAAA,CAAA,CACC,QAAS,CAAC,sBAAA,CAAwB,mBAAmB,CACrD,CAAA,KAAA,CAAM,WAELK,CACH,CAAA,CAEAA,CAEJ,CAEJ,CAEAe,CAAAA,CAAAA,CAAO,YAAc,QC1Dd,CAAA,IAAMI,CAAOvB,CAAAA,oBAAAA,CAAM,UACxB,CAAA,CACE,CAAE,KAAAwB,CAAAA,CAAAA,CAAO,YAAAC,CAAAA,CAAAA,CAAc,SAAAtB,CAAAA,CAAAA,CAAY,GAAI,QAAAuB,CAAAA,CAAAA,CAAU,QAAAnC,CAAU,CAAA,SAAU,EACrEgB,CACG,GAAA,CACH,GAAM,CAACoB,CAAOC,CAAAA,CAAQ,EAAI5B,oBAAM,CAAA,QAAA,CAASyB,CAAgBD,EAAAA,CAAAA,CAAM,CAAC,CAAA,EAAG,KAAK,CAElEK,CAAAA,CAAAA,CAAeC,aAClBH,CAAAA,CAAAA,EAAkB,CACjBD,CAAAA,GAAWC,CAAK,CAChBC,CAAAA,CAAAA,CAASD,CAAK,EAChB,CAAA,CACA,CAACD,CAAQ,CACX,CAEA,CAAA,OACE1B,oBAAA,CAAA,aAAA,CAAW+B,kBAAV,CACC,YAAA,CAAcN,CAAgBD,EAAAA,CAAAA,CAAM,CAAC,CAAA,EAAG,MACxC,aAAeK,CAAAA,CAAAA,CACf,SAAW1B,CAAAA,CAAAA,CAAAA,CAEXH,oBAAA,CAAA,aAAA,CAAW+B,kBAAV,CACC,GAAA,CAAKxB,EACL,SAAWK,CAAAA,CAAAA,CACT,OACArB,CAAY,GAAA,SAAA,CACR,mCACA,CAAA,2BACN,CAECiC,CAAAA,CAAAA,CAAAA,CAAM,IAAKQ,CACHzC,EAAAA,CAAAA,GAAY,UACjBS,oBAAA,CAAA,aAAA,CAAW+B,qBAAV,CACC,GAAA,CAAKC,CAAK,CAAA,KAAA,CACV,KAAOA,CAAAA,CAAAA,CAAK,MACZ,SAAU,CAAA,4BAAA,CAAA,CAEVhC,qBAAA,aAACD,CAAAA,CAAAA,CAAA,CACC,OAAS,CAAA,CAAC,YAAc,CAAA,uBAAuB,CAC/C,CAAA,KAAA,CAAM,YACN,SAAU,CAAA,uEAAA,CAAA,CAETiC,CAAK,CAAA,KACR,CACAhC,CAAAA,oBAAAA,CAAA,cAAC,KAAI,CAAA,CAAA,SAAA,CAAU,0HAA2H,CAAA,CAC5I,CAEAA,CAAAA,oBAAAA,CAAA,cAAW+B,YAAV,CAAA,OAAA,CAAA,CAAkB,IAAKC,CAAK,CAAA,KAAA,CAAO,MAAOA,CAAK,CAAA,KAAA,CAAO,OAAO,CAAA,CAAA,CAAA,CAAA,CAC5DhC,oBAAA,CAAA,aAAA,CAACmB,EAAA,CACC,OAAA,CAAQ,QACR,CAAA,KAAA,CAAOa,CAAK,CAAA,KAAA,GAAUL,EAAQ,OAAU,CAAA,WAAA,CACxC,SAAU,CAAA,MAAA,CAAA,CAETK,CAAK,CAAA,KACR,CACF,CAEH,CACH,EAECR,CAAM,CAAA,GAAA,CAAKQ,GACVhC,oBAAA,CAAA,aAAA,CAAW+B,YAAV,CAAA,OAAA,CAAA,CAAkB,GAAKC,CAAAA,CAAAA,CAAK,MAAO,KAAOA,CAAAA,CAAAA,CAAK,KAC7CA,CAAAA,CAAAA,CAAAA,CAAK,OACR,CACD,CACH,CAEJ,CACF,EAEAT,CAAAA,CAAK,WAAc,CAAA,MAAA","file":"Tabs.cjs","sourcesContent":["import React from \"react\";\nimport { Typography } from \"../types/tailwind\";\n\ntype TextElement =\n  | \"p\"\n  | \"span\"\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"strong\"\n  | \"em\"\n  | \"blockquote\"\n  | \"pre\"\n  | \"code\"\n  | \"small\"\n  | \"label\"\n  | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n  p: HTMLParagraphElement;\n  span: HTMLSpanElement;\n  h1: HTMLHeadingElement;\n  h2: HTMLHeadingElement;\n  h3: HTMLHeadingElement;\n  h4: HTMLHeadingElement;\n  h5: HTMLHeadingElement;\n  h6: HTMLHeadingElement;\n  strong: HTMLElement;\n  em: HTMLElement;\n  blockquote: HTMLQuoteElement;\n  pre: HTMLPreElement;\n  code: HTMLElement;\n  small: HTMLElement;\n  label: HTMLLabelElement;\n  a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n  p: React.HTMLAttributes<HTMLParagraphElement>;\n  span: React.HTMLAttributes<HTMLSpanElement>;\n  h1: React.HTMLAttributes<HTMLHeadingElement>;\n  h2: React.HTMLAttributes<HTMLHeadingElement>;\n  h3: React.HTMLAttributes<HTMLHeadingElement>;\n  h4: React.HTMLAttributes<HTMLHeadingElement>;\n  h5: React.HTMLAttributes<HTMLHeadingElement>;\n  h6: React.HTMLAttributes<HTMLHeadingElement>;\n  strong: React.HTMLAttributes<HTMLElement>;\n  em: React.HTMLAttributes<HTMLElement>;\n  blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n  pre: React.HTMLAttributes<HTMLPreElement>;\n  code: React.HTMLAttributes<HTMLElement>;\n  small: React.HTMLAttributes<HTMLElement>;\n  label: React.LabelHTMLAttributes<HTMLLabelElement>;\n  a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n  | \"primary\"\n  | \"secondary\"\n  | \"white\"\n  | \"primary-blue\"\n  | \"disabled\"\n  | \"danger\"\n  | \"inherit\";\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n  xl: \"h1\",\n  lg: \"h1\",\n  md: \"h2\",\n  sm: \"h3\",\n  xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n  const [category, size] = variant.split(\"-\");\n\n  if (category === \"heading\") {\n    return HEADING_ELEMENT_MAP[size] || \"p\";\n  }\n\n  if (category === \"label\") {\n    return \"label\";\n  }\n\n  return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n  light: \"font-light\",\n  regular: \"font-regular\",\n  semibold: \"font-semibold\",\n  bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n  keyof Typography[T],\n  string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n  [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n  variant?: ResponsiveVariant | ResponsiveVariant[];\n  color?: TextColor;\n  as?: T;\n  className?: string;\n  children: React.ReactNode;\n  weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n  variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n  if (!variants) return \"text-body-default\";\n\n  const variantArray = Array.isArray(variants) ? variants : [variants];\n\n  return variantArray\n    .map((variant) => {\n      if (variant.includes(\":\")) {\n        const [breakpoint, typographyClass] = variant.split(\":\");\n        return `${breakpoint}:text-${typographyClass}`;\n      }\n      return `text-${variant}`;\n    })\n    .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n  <T extends TextElement = \"p\">(\n    {\n      variant = \"body-default\",\n      color = \"primary\",\n      as,\n      className,\n      children,\n      weight,\n      ...props\n    }: TextProps<T>,\n    ref: React.ForwardedRef<HTMLElementByTag[T]>\n  ) => {\n    // Process typography classes with breakpoints\n    const typographyClasses = processVariants(variant);\n\n    // Get color styles\n    const colorClasses =\n      color === \"inherit\" ? \"text-inherit\" : `text-text-${color}`;\n\n    const suggestedElement = React.useMemo(() => {\n      const baseVariant =\n        typeof variant === \"string\"\n          ? variant.split(\":\").pop()!\n          : Array.isArray(variant)\n            ? variant[0].split(\":\").pop()!\n            : \"body-default\";\n      return getElementFromVariant(baseVariant as TypographyKey);\n    }, [variant]);\n\n    const Component = (as || suggestedElement) as T;\n\n    return (\n      // @ts-expect-error TODO: figure this out\n      <Component\n        ref={ref}\n        className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n          weight ? `!${fontWeight[weight]}` : \"\"\n        } ${className ?? \"\"}`}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nText.displayName = \"Text\";\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n  const colorNames = Object.keys(colors) as (keyof Colors)[];\n  const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n  const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n  const safelist: string[] = [];\n\n  colorNames.forEach((colorName) => {\n    if (typeof colors[colorName] === \"object\") {\n      // Handle nested color objects (with number keys)\n      Object.keys(colors[colorName]).forEach((shade) => {\n        utilities.forEach((utility) => {\n          // Base utility\n          safelist.push(`${utility}-${colorName}-${shade}`);\n\n          // Variant utilities\n          variants.forEach((variant) => {\n            safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n          });\n        });\n      });\n    } else {\n      // Handle direct color values\n      utilities.forEach((utility) => {\n        safelist.push(`${utility}-${colorName}`);\n\n        variants.forEach((variant) => {\n          safelist.push(`${variant}${utility}-${colorName}`);\n        });\n      });\n    }\n  });\n\n  // Generate typography classes\n  Object.entries(typography).forEach(([family, sizes]) => {\n    Object.keys(sizes).forEach((size) => {\n      // Base typography classes\n      safelist.push(`text-${family}-${size}`);\n\n      // Add variants\n      variants.forEach((variant) => {\n        safelist.push(`${variant}text-${family}-${size}`);\n      });\n    });\n  });\n\n  const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n  const typographyClasses = Object.entries(typography).flatMap(\n    ([category, sizes]) =>\n      Object.keys(sizes).map((size) => `text-${category}-${size}`)\n  );\n\n  // Generate responsive variants\n  const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n    breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n  );\n\n  return [\n    ...typographyClasses,\n    ...responsiveTypographyClasses\n    // ... rest of your safelist\n  ];\n};\n\nexport const focusRingStyles =\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import * as React from \"react\";\nimport { Text } from \"./Text\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type ButtonProps = {\n  /** @default filled */\n  variant?: \"filled\" | \"outlined\";\n  /** @default primary */\n  color?: \"black\" | \"accent\" | \"secondary\";\n  isLoading?: boolean;\n  children: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n  start?: React.ReactNode;\n  end?: React.ReactNode;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const filled = {\n  black: \"bg-text-text text-white\",\n  // fade it slightly\n  accent: \"bg-primary-100 text-white\",\n  secondary: \"bg-secondary-100 text-secondary\"\n};\n\nexport const outlined = {\n  black: \"border border-text text-text\",\n  accent: \"border border-primary-100 text-primary-100\",\n  secondary: \"border border-text-secondary text-secondary\"\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant = \"filled\",\n      color = \"black\",\n      isLoading = false,\n      children,\n      disabled,\n      ...props\n    },\n    ref\n  ) => (\n    <button\n      ref={ref}\n      className={cn(\n        `\n          sm:px-7 px-4\n          py-2\n          inline-flex items-center justify-center\n          rounded-lg \n          transition-colors duration-200\n          disabled:opacity-50 disabled:pointer-events-none\n          hover:opacity-80 active:scale-95 \n          truncate`,\n        focusRingStyles,\n        variant === \"filled\" ? filled[color] : outlined[color],\n        className\n      )}\n      disabled={disabled || isLoading}\n      type=\"button\"\n      {...props}\n    >\n      {typeof children === \"string\" ? (\n        <Text\n          variant={[\"sm:body-default-bold\", \"body-xxs-semibold\"]}\n          color=\"inherit\"\n        >\n          {children}\n        </Text>\n      ) : (\n        children\n      )}\n    </button>\n  )\n);\n\nButton.displayName = \"Button\";\n","import React, { useCallback } from \"react\";\nimport * as RadixTabs from \"@radix-ui/react-tabs\";\nimport { Text } from \"./Text\";\nimport { cn } from \"../utils\";\nimport { Button } from \"./Button\";\n\nexport type TabItem = {\n  value: string;\n  label: string;\n  content: React.ReactNode;\n};\n\nexport type TabsProps = {\n  items: TabItem[];\n  defaultValue?: string;\n  className?: string;\n  onChange?: (value: string) => void;\n  variant?: \"default\" | \"segmented\";\n};\n\nexport const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(\n  (\n    { items, defaultValue, className = \"\", onChange, variant = \"default\" },\n    ref\n  ) => {\n    const [value, setValue] = React.useState(defaultValue || items[0]?.value);\n\n    const handleChange = useCallback(\n      (value: string) => {\n        onChange?.(value);\n        setValue(value);\n      },\n      [onChange]\n    );\n\n    return (\n      <RadixTabs.Root\n        defaultValue={defaultValue || items[0]?.value}\n        onValueChange={handleChange}\n        className={className}\n      >\n        <RadixTabs.List\n          ref={ref}\n          className={cn(\n            \"flex\",\n            variant === \"default\"\n              ? \"gap-8 border-b border-stroke mb-4\"\n              : \"gap-4 justify-center flex\"\n          )}\n        >\n          {items.map((item) => {\n            return variant === \"default\" ? (\n              <RadixTabs.Trigger\n                key={item.value}\n                value={item.value}\n                className=\"group relative flex-1 pb-4\"\n              >\n                <Text\n                  variant={[\"sm:body-md\", \"body-default-semibold\"]}\n                  color=\"secondary\"\n                  className=\"group-data-[state=active]:text-text transition-colors sm:text-inherit\"\n                >\n                  {item.label}\n                </Text>\n                <div className=\"absolute bottom-0 left-0 right-0 h-1 bg-primary-100 scale-x-0 group-data-[state=active]:scale-x-100 transition-transform\" />\n              </RadixTabs.Trigger>\n            ) : (\n              <RadixTabs.Trigger key={item.value} value={item.value} asChild>\n                <Button\n                  variant=\"filled\"\n                  color={item.value === value ? \"black\" : \"secondary\"}\n                  className=\"py-3\"\n                >\n                  {item.label}\n                </Button>\n              </RadixTabs.Trigger>\n            );\n          })}\n        </RadixTabs.List>\n\n        {items.map((item) => (\n          <RadixTabs.Content key={item.value} value={item.value}>\n            {item.content}\n          </RadixTabs.Content>\n        ))}\n      </RadixTabs.Root>\n    );\n  }\n);\n\nTabs.displayName = \"Tabs\";\n"]}

package/dist/components/Tabs.js

@@ -1,2 +1,10 @@
-import n from'react';import*as o from'@radix-ui/react-tabs';var u={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},c=e=>{let[t,r]=e.split("-");return t==="heading"?u[r]||"p":t==="label"?"label":"p"},h={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},H=e=>e?(Array.isArray(e)?e:[e]).map(r=>{if(r.includes(":")){let[s,l]=r.split(":");return `${s}:text-${l}`}return `text-${r}`}).join(" "):"text-body-default",T=n.forwardRef(({variant:e="body-default",color:t="text-primary",as:r,className:s,children:l,weight:a,...p},y)=>{let m=H(e),d=t&&t==="inherit"?"inherit":t?`text-${t}`:"",g=n.useMemo(()=>{let b=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return c(b)},[e]);return n.createElement(r||g,{ref:y,className:`font-sans antialiased ${m} ${d} ${a?`!${h[a]}`:""} ${s??""}`,...p},l)});T.displayName="Text";var L=n.forwardRef(({items:e,defaultValue:t,className:r="",onChange:s},l)=>n.createElement(o.Root,{defaultValue:t||e[0]?.value,onValueChange:s,className:r},n.createElement(o.List,{ref:l,className:"flex gap-8 border-b border-stroke mb-8"},e.map(a=>n.createElement(o.Trigger,{key:a.value,value:a.value,className:"group pb-4 relative flex-1"},n.createElement(T,{variant:["sm:body-lg-semibold","body-default-semibold"],color:"text-secondary",className:"group-data-[state=active]:text-text-primary transition-colors sm:text-inherit"},a.label),n.createElement("div",{className:"absolute bottom-0 left-0 right-0 h-1 bg-primary-100 scale-x-0 group-data-[state=active]:scale-x-100 transition-transform"})))),e.map(a=>n.createElement(o.Content,{key:a.value,value:a.value},a.content))));L.displayName="Tabs";if (exports.default) module.exports = exports.default;export{L as Tabs};//# sourceMappingURL=Tabs.js.map
+import*as n from'react';import n__default,{useCallback}from'react';import*as s from'@radix-ui/react-tabs';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';var x={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},H=e=>{let[r,a]=e.split("-");return r==="heading"?x[a]||"p":r==="label"?"label":"p"},M={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},L=e=>e?(Array.isArray(e)?e:[e]).map(a=>{if(a.includes(":")){let[l,o]=a.split(":");return `${l}:text-${o}`}return `text-${a}`}).join(" "):"text-body-default",d=n__default.forwardRef(({variant:e="body-default",color:r="primary",as:a,className:l,children:o,weight:i,...p},c)=>{let b=L(e),t=r==="inherit"?"text-inherit":`text-text-${r}`,f=n__default.useMemo(()=>{let h=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return H(h)},[e]);return n__default.createElement(a||f,{ref:c,className:`font-sans antialiased ${b} ${t} ${i?`!${M[i]}`:""} ${l??""}`,...p},o)});d.displayName="Text";function m(...e){return twMerge(clsx(e))}var g="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var v={black:"bg-text-text text-white",accent:"bg-primary-100 text-white",secondary:"bg-secondary-100 text-secondary"},$={black:"border border-text text-text",accent:"border border-primary-100 text-primary-100",secondary:"border border-text-secondary text-secondary"},y=n.forwardRef(({className:e,variant:r="filled",color:a="black",isLoading:l=!1,children:o,disabled:i,...p},c)=>n.createElement("button",{ref:c,className:m(`
+          sm:px-7 px-4
+          py-2
+          inline-flex items-center justify-center
+          rounded-lg 
+          transition-colors duration-200
+          disabled:opacity-50 disabled:pointer-events-none
+          hover:opacity-80 active:scale-95 
+          truncate`,g,r==="filled"?v[a]:$[a],e),disabled:i||l,type:"button",...p},typeof o=="string"?n.createElement(d,{variant:["sm:body-default-bold","body-xxs-semibold"],color:"inherit"},o):o));y.displayName="Button";var C=n__default.forwardRef(({items:e,defaultValue:r,className:a="",onChange:l,variant:o="default"},i)=>{let[p,c]=n__default.useState(r||e[0]?.value),b=useCallback(t=>{l?.(t),c(t);},[l]);return n__default.createElement(s.Root,{defaultValue:r||e[0]?.value,onValueChange:b,className:a},n__default.createElement(s.List,{ref:i,className:m("flex",o==="default"?"gap-8 border-b border-stroke mb-4":"gap-4 justify-center flex")},e.map(t=>o==="default"?n__default.createElement(s.Trigger,{key:t.value,value:t.value,className:"group relative flex-1 pb-4"},n__default.createElement(d,{variant:["sm:body-md","body-default-semibold"],color:"secondary",className:"group-data-[state=active]:text-text transition-colors sm:text-inherit"},t.label),n__default.createElement("div",{className:"absolute bottom-0 left-0 right-0 h-1 bg-primary-100 scale-x-0 group-data-[state=active]:scale-x-100 transition-transform"})):n__default.createElement(s.Trigger,{key:t.value,value:t.value,asChild:!0},n__default.createElement(y,{variant:"filled",color:t.value===p?"black":"secondary",className:"py-3"},t.label)))),e.map(t=>n__default.createElement(s.Content,{key:t.value,value:t.value},t.content)))});C.displayName="Tabs";if (exports.default) module.exports = exports.default;export{C as Tabs};//# sourceMappingURL=Tabs.js.map
 //# sourceMappingURL=Tabs.js.map

package/dist/components/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Text.tsx","../../src/components/Tabs.tsx"],"names":["HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","size","fontWeight","processVariants","variants","breakpoint","typographyClass","Text","React","color","as","className","children","weight","props","ref","typographyClasses","colorClasses","suggestedElement","baseVariant","Tabs","items","defaultValue","onChange","item"],"mappings":"4DA4FA,IAAMA,EAAmD,CACvD,EAAA,CAAI,IACJ,CAAA,EAAA,CAAI,KACJ,EAAI,CAAA,IAAA,CACJ,EAAI,CAAA,IAAA,CACJ,GAAI,IACN,CAAA,CAEMC,CAAyBC,CAAAA,CAAAA,EAAwC,CACrE,GAAM,CAACC,CAAUC,CAAAA,CAAI,EAAIF,CAAQ,CAAA,KAAA,CAAM,GAAG,CAAA,CAE1C,OAAIC,CAAa,GAAA,SAAA,CACRH,CAAoBI,CAAAA,CAAI,GAAK,GAGlCD,CAAAA,CAAAA,GAAa,OACR,CAAA,OAAA,CAGF,GACT,CAIME,CAAAA,CAAAA,CAAqC,CACzC,KAAA,CAAO,aACP,OAAS,CAAA,cAAA,CACT,QAAU,CAAA,eAAA,CACV,KAAM,WACR,CAAA,CAiBMC,CACJC,CAAAA,CAAAA,EAEKA,GAEgB,KAAM,CAAA,OAAA,CAAQA,CAAQ,CAAA,CAAIA,EAAW,CAACA,CAAQ,CAGhE,EAAA,GAAA,CAAKL,GAAY,CAChB,GAAIA,CAAQ,CAAA,QAAA,CAAS,GAAG,CAAG,CAAA,CACzB,GAAM,CAACM,CAAYC,CAAAA,CAAe,CAAIP,CAAAA,CAAAA,CAAQ,MAAM,GAAG,CAAA,CACvD,OAAO,CAAA,EAAGM,CAAU,CAASC,MAAAA,EAAAA,CAAe,CAC9C,CAAA,CACA,OAAO,CAAQP,KAAAA,EAAAA,CAAO,CACxB,CAAA,CAAC,EACA,IAAK,CAAA,GAAG,CAZW,CAAA,mBAAA,CAeXQ,EAAOC,CAAM,CAAA,UAAA,CACxB,CACE,CACE,QAAAT,CAAU,CAAA,cAAA,CACV,KAAAU,CAAAA,CAAAA,CAAQ,eACR,EAAAC,CAAAA,CAAAA,CACA,SAAAC,CAAAA,CAAAA,CACA,SAAAC,CACA,CAAA,MAAA,CAAAC,CACA,CAAA,GAAGC,CACL,CACAC,CAAAA,CAAAA,GACG,CAEH,IAAMC,EAAoBb,CAAgBJ,CAAAA,CAAO,CAG3CkB,CAAAA,CAAAA,CACJR,GAASA,CAAU,GAAA,SAAA,CAAY,SAAYA,CAAAA,CAAAA,CAAQ,QAAQA,CAAK,CAAA,CAAA,CAAK,EAEjES,CAAAA,CAAAA,CAAmBV,EAAM,OAAQ,CAAA,IAAM,CAC3C,IAAMW,EACJ,OAAOpB,CAAAA,EAAY,QACfA,CAAAA,CAAAA,CAAQ,MAAM,GAAG,CAAA,CAAE,GAAI,EAAA,CACvB,KAAM,CAAA,OAAA,CAAQA,CAAO,CAAA,CACnBA,EAAQ,CAAC,CAAA,CAAE,KAAM,CAAA,GAAG,EAAE,GAAI,EAAA,CAC1B,cACR,CAAA,OAAOD,EAAsBqB,CAA4B,CAC3D,CAAG,CAAA,CAACpB,CAAO,CAAC,CAAA,CAIZ,OAEES,CAAAA,CAAA,cAJiBE,CAAMQ,EAAAA,CAAAA,CAItB,CACC,GAAA,CAAKH,EACL,SAAW,CAAA,CAAA,sBAAA,EAAyBC,CAAiB,CAAA,CAAA,EAAIC,CAAY,CACnEJ,CAAAA,EAAAA,CAAAA,CAAS,CAAIX,CAAAA,EAAAA,CAAAA,CAAWW,CAAM,CAAC,CAAA,CAAA,CAAK,EACtC,CAAA,CAAA,EAAIF,GAAa,EAAE,CAAA,CAAA,CAClB,GAAGG,CAAAA,CAAAA,CAEHF,CACH,CAEJ,CACF,CAEAL,CAAAA,CAAAA,CAAK,YAAc,MC1LZ,CAAA,IAAMa,CAAOZ,CAAAA,CAAAA,CAAM,WACxB,CAAC,CAAE,KAAAa,CAAAA,CAAAA,CAAO,aAAAC,CAAc,CAAA,SAAA,CAAAX,CAAY,CAAA,EAAA,CAAI,SAAAY,CAAS,CAAA,CAAGR,CAEhDP,GAAAA,CAAAA,CAAA,cAAW,CAAV,CAAA,IAAA,CAAA,CACC,YAAcc,CAAAA,CAAAA,EAAgBD,EAAM,CAAC,CAAA,EAAG,KACxC,CAAA,aAAA,CAAeE,EACf,SAAWZ,CAAAA,CAAAA,CAAAA,CAEXH,CAAA,CAAA,aAAA,CAAW,OAAV,CACC,GAAA,CAAKO,CACL,CAAA,SAAA,CAAU,0CAETM,CAAM,CAAA,GAAA,CAAKG,CACVhB,EAAAA,CAAAA,CAAA,cAAW,CAAV,CAAA,OAAA,CAAA,CACC,GAAKgB,CAAAA,CAAAA,CAAK,MACV,KAAOA,CAAAA,CAAAA,CAAK,KACZ,CAAA,SAAA,CAAU,8BAEVhB,CAAA,CAAA,aAAA,CAACD,CAAA,CAAA,CACC,QAAS,CAAC,qBAAA,CAAuB,uBAAuB,CAAA,CACxD,MAAM,gBACN,CAAA,SAAA,CAAU,+EAETiB,CAAAA,CAAAA,CAAAA,CAAK,KACR,CACAhB,CAAAA,CAAAA,CAAA,aAAC,CAAA,KAAA,CAAA,CAAI,UAAU,0HAA2H,CAAA,CAC5I,CACD,CACH,EAECa,CAAM,CAAA,GAAA,CAAKG,CACVhB,EAAAA,CAAAA,CAAA,cAAW,CAAV,CAAA,OAAA,CAAA,CAAkB,GAAKgB,CAAAA,CAAAA,CAAK,MAAO,KAAOA,CAAAA,CAAAA,CAAK,KAC7CA,CAAAA,CAAAA,CAAAA,CAAK,OACR,CACD,CACH,CAGN,EAEAJ,EAAK,WAAc,CAAA,MAAA","file":"Tabs.js","sourcesContent":["import React from \"react\";\nimport {\n  Colors,\n  TextColorVariant,\n  PrimaryShades,\n  SecondaryShades,\n  TertiaryShades,\n  Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n  | \"p\"\n  | \"span\"\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"strong\"\n  | \"em\"\n  | \"blockquote\"\n  | \"pre\"\n  | \"code\"\n  | \"small\"\n  | \"label\"\n  | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n  p: HTMLParagraphElement;\n  span: HTMLSpanElement;\n  h1: HTMLHeadingElement;\n  h2: HTMLHeadingElement;\n  h3: HTMLHeadingElement;\n  h4: HTMLHeadingElement;\n  h5: HTMLHeadingElement;\n  h6: HTMLHeadingElement;\n  strong: HTMLElement;\n  em: HTMLElement;\n  blockquote: HTMLQuoteElement;\n  pre: HTMLPreElement;\n  code: HTMLElement;\n  small: HTMLElement;\n  label: HTMLLabelElement;\n  a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n  p: React.HTMLAttributes<HTMLParagraphElement>;\n  span: React.HTMLAttributes<HTMLSpanElement>;\n  h1: React.HTMLAttributes<HTMLHeadingElement>;\n  h2: React.HTMLAttributes<HTMLHeadingElement>;\n  h3: React.HTMLAttributes<HTMLHeadingElement>;\n  h4: React.HTMLAttributes<HTMLHeadingElement>;\n  h5: React.HTMLAttributes<HTMLHeadingElement>;\n  h6: React.HTMLAttributes<HTMLHeadingElement>;\n  strong: React.HTMLAttributes<HTMLElement>;\n  em: React.HTMLAttributes<HTMLElement>;\n  blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n  pre: React.HTMLAttributes<HTMLPreElement>;\n  code: React.HTMLAttributes<HTMLElement>;\n  small: React.HTMLAttributes<HTMLElement>;\n  label: React.LabelHTMLAttributes<HTMLLabelElement>;\n  a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n  ? TextColorVariant\n  : T extends \"primary\"\n    ? keyof PrimaryShades\n    : T extends \"secondary\"\n      ? keyof SecondaryShades\n      : T extends \"tertiary\"\n        ? keyof TertiaryShades\n        : never;\n\ntype ColorKey = {\n  [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n  keyof Typography[T],\n  string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n  [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n  xl: \"h1\",\n  lg: \"h1\",\n  md: \"h2\",\n  sm: \"h3\",\n  xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n  const [category, size] = variant.split(\"-\");\n\n  if (category === \"heading\") {\n    return HEADING_ELEMENT_MAP[size] || \"p\";\n  }\n\n  if (category === \"label\") {\n    return \"label\";\n  }\n\n  return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n  light: \"font-light\",\n  regular: \"font-regular\",\n  semibold: \"font-semibold\",\n  bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n  variant?: ResponsiveVariant | ResponsiveVariant[];\n  color?: ColorKey | \"inherit\";\n  as?: T;\n  className?: string;\n  children: React.ReactNode;\n  weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n  variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n  if (!variants) return \"text-body-default\";\n\n  const variantArray = Array.isArray(variants) ? variants : [variants];\n\n  return variantArray\n    .map((variant) => {\n      if (variant.includes(\":\")) {\n        const [breakpoint, typographyClass] = variant.split(\":\");\n        return `${breakpoint}:text-${typographyClass}`;\n      }\n      return `text-${variant}`;\n    })\n    .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n  <T extends TextElement = \"p\">(\n    {\n      variant = \"body-default\",\n      color = \"text-primary\",\n      as,\n      className,\n      children,\n      weight,\n      ...props\n    }: TextProps<T>,\n    ref: React.ForwardedRef<HTMLElementByTag[T]>\n  ) => {\n    // Process typography classes with breakpoints\n    const typographyClasses = processVariants(variant);\n\n    // Get color styles\n    const colorClasses =\n      color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n    const suggestedElement = React.useMemo(() => {\n      const baseVariant =\n        typeof variant === \"string\"\n          ? variant.split(\":\").pop()!\n          : Array.isArray(variant)\n            ? variant[0].split(\":\").pop()!\n            : \"body-default\";\n      return getElementFromVariant(baseVariant as TypographyKey);\n    }, [variant]);\n\n    const Component = (as || suggestedElement) as T;\n\n    return (\n      // @ts-expect-error TODO: figure this out\n      <Component\n        ref={ref}\n        className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n          weight ? `!${fontWeight[weight]}` : \"\"\n        } ${className ?? \"\"}`}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nText.displayName = \"Text\";\n","import React from \"react\";\nimport * as RadixTabs from \"@radix-ui/react-tabs\";\nimport { Text } from \"./Text\";\n\nexport type TabItem = {\n  value: string;\n  label: string;\n  content: React.ReactNode;\n};\n\nexport type TabsProps = {\n  items: TabItem[];\n  defaultValue?: string;\n  className?: string;\n  onChange?: (value: string) => void;\n};\n\nexport const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(\n  ({ items, defaultValue, className = \"\", onChange }, ref) => {\n    return (\n      <RadixTabs.Root\n        defaultValue={defaultValue || items[0]?.value}\n        onValueChange={onChange}\n        className={className}\n      >\n        <RadixTabs.List\n          ref={ref}\n          className=\"flex gap-8 border-b border-stroke mb-8\"\n        >\n          {items.map((item) => (\n            <RadixTabs.Trigger\n              key={item.value}\n              value={item.value}\n              className=\"group pb-4 relative flex-1\"\n            >\n              <Text\n                variant={[\"sm:body-lg-semibold\", \"body-default-semibold\"]}\n                color=\"text-secondary\"\n                className=\"group-data-[state=active]:text-text-primary transition-colors sm:text-inherit\"\n              >\n                {item.label}\n              </Text>\n              <div className=\"absolute bottom-0 left-0 right-0 h-1 bg-primary-100 scale-x-0 group-data-[state=active]:scale-x-100 transition-transform\" />\n            </RadixTabs.Trigger>\n          ))}\n        </RadixTabs.List>\n\n        {items.map((item) => (\n          <RadixTabs.Content key={item.value} value={item.value}>\n            {item.content}\n          </RadixTabs.Content>\n        ))}\n      </RadixTabs.Root>\n    );\n  }\n);\n\nTabs.displayName = \"Tabs\";\n"]}
+{"version":3,"sources":["../../src/components/Text.tsx","../../src/utils/index.ts","../../src/utils/tailwind.ts","../../src/components/Button.tsx","../../src/components/Tabs.tsx"],"names":["HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","size","fontWeight","processVariants","variants","breakpoint","typographyClass","Text","React","color","as","className","children","weight","props","ref","typographyClasses","colorClasses","suggestedElement","baseVariant","cn","inputs","twMerge","clsx","focusRingStyles","filled","outlined","Button","T","isLoading","disabled","Tabs","items","defaultValue","onChange","value","setValue","handleChange","useCallback","item"],"mappings":"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","file":"Tabs.js","sourcesContent":["import React from \"react\";\nimport { Typography } from \"../types/tailwind\";\n\ntype TextElement =\n  | \"p\"\n  | \"span\"\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"strong\"\n  | \"em\"\n  | \"blockquote\"\n  | \"pre\"\n  | \"code\"\n  | \"small\"\n  | \"label\"\n  | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n  p: HTMLParagraphElement;\n  span: HTMLSpanElement;\n  h1: HTMLHeadingElement;\n  h2: HTMLHeadingElement;\n  h3: HTMLHeadingElement;\n  h4: HTMLHeadingElement;\n  h5: HTMLHeadingElement;\n  h6: HTMLHeadingElement;\n  strong: HTMLElement;\n  em: HTMLElement;\n  blockquote: HTMLQuoteElement;\n  pre: HTMLPreElement;\n  code: HTMLElement;\n  small: HTMLElement;\n  label: HTMLLabelElement;\n  a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n  p: React.HTMLAttributes<HTMLParagraphElement>;\n  span: React.HTMLAttributes<HTMLSpanElement>;\n  h1: React.HTMLAttributes<HTMLHeadingElement>;\n  h2: React.HTMLAttributes<HTMLHeadingElement>;\n  h3: React.HTMLAttributes<HTMLHeadingElement>;\n  h4: React.HTMLAttributes<HTMLHeadingElement>;\n  h5: React.HTMLAttributes<HTMLHeadingElement>;\n  h6: React.HTMLAttributes<HTMLHeadingElement>;\n  strong: React.HTMLAttributes<HTMLElement>;\n  em: React.HTMLAttributes<HTMLElement>;\n  blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n  pre: React.HTMLAttributes<HTMLPreElement>;\n  code: React.HTMLAttributes<HTMLElement>;\n  small: React.HTMLAttributes<HTMLElement>;\n  label: React.LabelHTMLAttributes<HTMLLabelElement>;\n  a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n  | \"primary\"\n  | \"secondary\"\n  | \"white\"\n  | \"primary-blue\"\n  | \"disabled\"\n  | \"danger\"\n  | \"inherit\";\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n  xl: \"h1\",\n  lg: \"h1\",\n  md: \"h2\",\n  sm: \"h3\",\n  xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n  const [category, size] = variant.split(\"-\");\n\n  if (category === \"heading\") {\n    return HEADING_ELEMENT_MAP[size] || \"p\";\n  }\n\n  if (category === \"label\") {\n    return \"label\";\n  }\n\n  return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n  light: \"font-light\",\n  regular: \"font-regular\",\n  semibold: \"font-semibold\",\n  bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n  keyof Typography[T],\n  string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n  [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n  variant?: ResponsiveVariant | ResponsiveVariant[];\n  color?: TextColor;\n  as?: T;\n  className?: string;\n  children: React.ReactNode;\n  weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n  variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n  if (!variants) return \"text-body-default\";\n\n  const variantArray = Array.isArray(variants) ? variants : [variants];\n\n  return variantArray\n    .map((variant) => {\n      if (variant.includes(\":\")) {\n        const [breakpoint, typographyClass] = variant.split(\":\");\n        return `${breakpoint}:text-${typographyClass}`;\n      }\n      return `text-${variant}`;\n    })\n    .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n  <T extends TextElement = \"p\">(\n    {\n      variant = \"body-default\",\n      color = \"primary\",\n      as,\n      className,\n      children,\n      weight,\n      ...props\n    }: TextProps<T>,\n    ref: React.ForwardedRef<HTMLElementByTag[T]>\n  ) => {\n    // Process typography classes with breakpoints\n    const typographyClasses = processVariants(variant);\n\n    // Get color styles\n    const colorClasses =\n      color === \"inherit\" ? \"text-inherit\" : `text-text-${color}`;\n\n    const suggestedElement = React.useMemo(() => {\n      const baseVariant =\n        typeof variant === \"string\"\n          ? variant.split(\":\").pop()!\n          : Array.isArray(variant)\n            ? variant[0].split(\":\").pop()!\n            : \"body-default\";\n      return getElementFromVariant(baseVariant as TypographyKey);\n    }, [variant]);\n\n    const Component = (as || suggestedElement) as T;\n\n    return (\n      // @ts-expect-error TODO: figure this out\n      <Component\n        ref={ref}\n        className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n          weight ? `!${fontWeight[weight]}` : \"\"\n        } ${className ?? \"\"}`}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nText.displayName = \"Text\";\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n  const colorNames = Object.keys(colors) as (keyof Colors)[];\n  const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n  const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n  const safelist: string[] = [];\n\n  colorNames.forEach((colorName) => {\n    if (typeof colors[colorName] === \"object\") {\n      // Handle nested color objects (with number keys)\n      Object.keys(colors[colorName]).forEach((shade) => {\n        utilities.forEach((utility) => {\n          // Base utility\n          safelist.push(`${utility}-${colorName}-${shade}`);\n\n          // Variant utilities\n          variants.forEach((variant) => {\n            safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n          });\n        });\n      });\n    } else {\n      // Handle direct color values\n      utilities.forEach((utility) => {\n        safelist.push(`${utility}-${colorName}`);\n\n        variants.forEach((variant) => {\n          safelist.push(`${variant}${utility}-${colorName}`);\n        });\n      });\n    }\n  });\n\n  // Generate typography classes\n  Object.entries(typography).forEach(([family, sizes]) => {\n    Object.keys(sizes).forEach((size) => {\n      // Base typography classes\n      safelist.push(`text-${family}-${size}`);\n\n      // Add variants\n      variants.forEach((variant) => {\n        safelist.push(`${variant}text-${family}-${size}`);\n      });\n    });\n  });\n\n  const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n  const typographyClasses = Object.entries(typography).flatMap(\n    ([category, sizes]) =>\n      Object.keys(sizes).map((size) => `text-${category}-${size}`)\n  );\n\n  // Generate responsive variants\n  const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n    breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n  );\n\n  return [\n    ...typographyClasses,\n    ...responsiveTypographyClasses\n    // ... rest of your safelist\n  ];\n};\n\nexport const focusRingStyles =\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import * as React from \"react\";\nimport { Text } from \"./Text\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type ButtonProps = {\n  /** @default filled */\n  variant?: \"filled\" | \"outlined\";\n  /** @default primary */\n  color?: \"black\" | \"accent\" | \"secondary\";\n  isLoading?: boolean;\n  children: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n  start?: React.ReactNode;\n  end?: React.ReactNode;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const filled = {\n  black: \"bg-text-text text-white\",\n  // fade it slightly\n  accent: \"bg-primary-100 text-white\",\n  secondary: \"bg-secondary-100 text-secondary\"\n};\n\nexport const outlined = {\n  black: \"border border-text text-text\",\n  accent: \"border border-primary-100 text-primary-100\",\n  secondary: \"border border-text-secondary text-secondary\"\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant = \"filled\",\n      color = \"black\",\n      isLoading = false,\n      children,\n      disabled,\n      ...props\n    },\n    ref\n  ) => (\n    <button\n      ref={ref}\n      className={cn(\n        `\n          sm:px-7 px-4\n          py-2\n          inline-flex items-center justify-center\n          rounded-lg \n          transition-colors duration-200\n          disabled:opacity-50 disabled:pointer-events-none\n          hover:opacity-80 active:scale-95 \n          truncate`,\n        focusRingStyles,\n        variant === \"filled\" ? filled[color] : outlined[color],\n        className\n      )}\n      disabled={disabled || isLoading}\n      type=\"button\"\n      {...props}\n    >\n      {typeof children === \"string\" ? (\n        <Text\n          variant={[\"sm:body-default-bold\", \"body-xxs-semibold\"]}\n          color=\"inherit\"\n        >\n          {children}\n        </Text>\n      ) : (\n        children\n      )}\n    </button>\n  )\n);\n\nButton.displayName = \"Button\";\n","import React, { useCallback } from \"react\";\nimport * as RadixTabs from \"@radix-ui/react-tabs\";\nimport { Text } from \"./Text\";\nimport { cn } from \"../utils\";\nimport { Button } from \"./Button\";\n\nexport type TabItem = {\n  value: string;\n  label: string;\n  content: React.ReactNode;\n};\n\nexport type TabsProps = {\n  items: TabItem[];\n  defaultValue?: string;\n  className?: string;\n  onChange?: (value: string) => void;\n  variant?: \"default\" | \"segmented\";\n};\n\nexport const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(\n  (\n    { items, defaultValue, className = \"\", onChange, variant = \"default\" },\n    ref\n  ) => {\n    const [value, setValue] = React.useState(defaultValue || items[0]?.value);\n\n    const handleChange = useCallback(\n      (value: string) => {\n        onChange?.(value);\n        setValue(value);\n      },\n      [onChange]\n    );\n\n    return (\n      <RadixTabs.Root\n        defaultValue={defaultValue || items[0]?.value}\n        onValueChange={handleChange}\n        className={className}\n      >\n        <RadixTabs.List\n          ref={ref}\n          className={cn(\n            \"flex\",\n            variant === \"default\"\n              ? \"gap-8 border-b border-stroke mb-4\"\n              : \"gap-4 justify-center flex\"\n          )}\n        >\n          {items.map((item) => {\n            return variant === \"default\" ? (\n              <RadixTabs.Trigger\n                key={item.value}\n                value={item.value}\n                className=\"group relative flex-1 pb-4\"\n              >\n                <Text\n                  variant={[\"sm:body-md\", \"body-default-semibold\"]}\n                  color=\"secondary\"\n                  className=\"group-data-[state=active]:text-text transition-colors sm:text-inherit\"\n                >\n                  {item.label}\n                </Text>\n                <div className=\"absolute bottom-0 left-0 right-0 h-1 bg-primary-100 scale-x-0 group-data-[state=active]:scale-x-100 transition-transform\" />\n              </RadixTabs.Trigger>\n            ) : (\n              <RadixTabs.Trigger key={item.value} value={item.value} asChild>\n                <Button\n                  variant=\"filled\"\n                  color={item.value === value ? \"black\" : \"secondary\"}\n                  className=\"py-3\"\n                >\n                  {item.label}\n                </Button>\n              </RadixTabs.Trigger>\n            );\n          })}\n        </RadixTabs.List>\n\n        {items.map((item) => (\n          <RadixTabs.Content key={item.value} value={item.value}>\n            {item.content}\n          </RadixTabs.Content>\n        ))}\n      </RadixTabs.Root>\n    );\n  }\n);\n\nTabs.displayName = \"Tabs\";\n"]}

package/dist/components/Tag.cjs

@@ -1,2 +1,2 @@
-'use strict';var c=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),icons=require('@deckai/icons');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var c__default=/*#__PURE__*/_interopDefault(c);var M={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},L=e=>{let[o,r]=e.split("-");return o==="heading"?M[r]||"p":o==="label"?"label":"p"},E={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},C=e=>e?(Array.isArray(e)?e:[e]).map(r=>{if(r.includes(":")){let[t,n]=r.split(":");return `${t}:text-${n}`}return `text-${r}`}).join(" "):"text-body-default",d=c__default.default.forwardRef(({variant:e="body-default",color:o="text-primary",as:r,className:t,children:n,weight:a,...s},i)=>{let l=C(e),p=o&&o==="inherit"?"inherit":o?`text-${o}`:"",x=c__default.default.useMemo(()=>{let H=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return L(H)},[e]);return c__default.default.createElement(r||x,{ref:i,className:`font-sans antialiased ${l} ${p} ${a?`!${E[a]}`:""} ${t??""}`,...s},n)});d.displayName="Text";var h="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var T=({children:e,type:o="button",className:r,disabled:t,...n})=>c__default.default.createElement("button",{type:o,disabled:t,className:`appearance-none hover:opacity-80 transition-all active:scale-95 ${h} ${r} ${t?"opacity-50 cursor-not-allowed":""}`,...n},e);function m(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var f={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB"},P={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},v=e=>{if(!e)return {width:"24px",height:"24px"};let o=Array.isArray(e)?e:[e],r={},t;return o.forEach(n=>{if(typeof n=="number")t=`${n}px`;else {let[a,s]=n.split(":"),i=parseInt(s,10);r[`@media (min-width: ${P[a]})`]=`${i}px`;}}),{width:t||"24px",height:t||"24px",...Object.entries(r).reduce((n,[a,s])=>({...n,[a]:{width:s,height:s}}),{})}},g=c__default.default.forwardRef(({name:e,size:o=24,color:r="primary",title:t,className:n,style:a={},...s},i)=>{let l=icons.IconMap[e],p=v(o);return c__default.default.createElement("div",{className:m("flex justify-center items-center",n),style:{...p,"--icon-stroke":f[r],...a}},c__default.default.createElement(l,{ref:i,"aria-hidden":!t,"aria-label":t,stroke:e.includes("filled")?void 0:f[r],...s}))});g.displayName="Icon";var oe=({children:e,color:o="primary",className:r,onClose:t,...n})=>{let[a,s]=c.useState(!1),i=c.useCallback(()=>{s(!0);},[]),l=c.useCallback(()=>{s(!1);},[]),p=c__default.default.createElement("div",{className:m("flex gap-2",t?"justify-between items-center":"items-center justify-center","hover:bg-primary-100 rounded bg-secondary-400 px-2 py-1 sm:px-3 sm:py-1.5 h-min hover:text-white",o==="primary"?"text-primary-100":"text-primary",r),onMouseEnter:i,onMouseLeave:l},typeof e=="string"?c__default.default.createElement(d,{color:"inherit",variant:["md:body-default-medium","body-xxs-medium"],className:"truncate pt-0.5"},e):e,t&&c__default.default.createElement(T,{...n,onClick:t,className:"flex items-center justify-center"},c__default.default.createElement(g,{name:"close",size:10,color:a?"white":"primaryBlue"})));return t?p:c__default.default.createElement(T,{...n},p)};if (exports.default) module.exports = exports.default;exports.Tag=oe;//# sourceMappingURL=Tag.cjs.map
+'use strict';var m=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),icons=require('@deckai/icons');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var m__default=/*#__PURE__*/_interopDefault(m);var L={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},E=e=>{let[n,r]=e.split("-");return n==="heading"?L[r]||"p":n==="label"?"label":"p"},R={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},$=e=>e?(Array.isArray(e)?e:[e]).map(r=>{if(r.includes(":")){let[t,o]=r.split(":");return `${t}:text-${o}`}return `text-${r}`}).join(" "):"text-body-default",u=m__default.default.forwardRef(({variant:e="body-default",color:n="primary",as:r,className:t,children:o,weight:s,...a},i)=>{let c=$(e),p=n==="inherit"?"text-inherit":`text-text-${n}`,H=m__default.default.useMemo(()=>{let M=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return E(M)},[e]);return m__default.default.createElement(r||H,{ref:i,className:`font-sans antialiased ${c} ${p} ${s?`!${R[s]}`:""} ${t??""}`,...a},o)});u.displayName="Text";var f="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";function l(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var y=m__default.default.forwardRef(({children:e,type:n="button",className:r,disabled:t,...o},s)=>m__default.default.createElement("button",{ref:s,type:n,disabled:t,className:l("appearance-none hover:opacity-80 transition-all active:scale-95",f,t&&"opacity-50 cursor-not-allowed",r),...o},e));y.displayName="Pressable";var b={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB",disabled:"#888888"},C={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},S=e=>{if(!e)return {width:"24px",height:"24px"};let n=Array.isArray(e)?e:[e],r={},t;return n.forEach(o=>{if(typeof o=="number")t=`${o}px`;else {let[s,a]=o.split(":"),i=parseInt(a,10);r[`@media (min-width: ${C[s]})`]=`${i}px`;}}),{width:t||"24px",height:t||"24px",...Object.entries(r).reduce((o,[s,a])=>({...o,[s]:{width:a,height:a}}),{})}},g=m__default.default.forwardRef(({name:e,size:n=24,color:r="primary",title:t,className:o,style:s={},...a},i)=>{let c=icons.IconMap[e],p=S(n);return m__default.default.createElement("div",{className:l("flex justify-center items-center",o),style:{...p,"--icon-stroke":b[r],...s}},m__default.default.createElement(c,{ref:i,"aria-hidden":!t,"aria-label":t,stroke:e.includes("filled")?void 0:b[r],...a}))});g.displayName="Icon";var ne=({children:e,color:n="primary",className:r,onClose:t,...o})=>{let[s,a]=m.useState(!1),i=m.useCallback(()=>{a(!0);},[]),c=m.useCallback(()=>{a(!1);},[]),p=m__default.default.createElement("div",{className:l("flex gap-2",t?"justify-between items-center":"items-center justify-center","hover:bg-primary-100 rounded bg-secondary-400 px-2 py-1 sm:px-3 sm:py-1.5 h-min hover:text-white",n==="primary"?"text-primary-100":"text-text",r),onMouseEnter:i,onMouseLeave:c},typeof e=="string"?m__default.default.createElement(u,{color:"inherit",variant:["md:body-default-medium","body-xxs-medium"],className:"truncate pt-0.5"},e):e,t&&m__default.default.createElement(y,{...o,onClick:t,className:"flex items-center justify-center"},m__default.default.createElement(g,{name:"close",size:10,color:s?"white":"primaryBlue"})));return t?p:m__default.default.createElement(y,{...o},p)};if (exports.default) module.exports = exports.default;exports.Tag=ne;//# sourceMappingURL=Tag.cjs.map
 //# sourceMappingURL=Tag.cjs.map

package/dist/components/Tag.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Text.tsx","../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/components/Tag.tsx"],"names":["HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","size","fontWeight","processVariants","variants","breakpoint","typographyClass","Text","React","color","as","className","children","weight","props","ref","typographyClasses","colorClasses","suggestedElement","baseVariant","focusRingStyles","Pressable","type","disabled","cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","valueStr","value","acc","query","Icon","name","title","style","IconComponent","IconMap","sizeStyles","Tag","onClose","pressableProps","isHovered","setIsHovered","useState","handleMouseEnter","useCallback","handleMouseLeave","content"],"mappings":"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","file":"Tag.cjs","sourcesContent":["import React from \"react\";\nimport {\n  Colors,\n  TextColorVariant,\n  PrimaryShades,\n  SecondaryShades,\n  TertiaryShades,\n  Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n  | \"p\"\n  | \"span\"\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"strong\"\n  | \"em\"\n  | \"blockquote\"\n  | \"pre\"\n  | \"code\"\n  | \"small\"\n  | \"label\"\n  | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n  p: HTMLParagraphElement;\n  span: HTMLSpanElement;\n  h1: HTMLHeadingElement;\n  h2: HTMLHeadingElement;\n  h3: HTMLHeadingElement;\n  h4: HTMLHeadingElement;\n  h5: HTMLHeadingElement;\n  h6: HTMLHeadingElement;\n  strong: HTMLElement;\n  em: HTMLElement;\n  blockquote: HTMLQuoteElement;\n  pre: HTMLPreElement;\n  code: HTMLElement;\n  small: HTMLElement;\n  label: HTMLLabelElement;\n  a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n  p: React.HTMLAttributes<HTMLParagraphElement>;\n  span: React.HTMLAttributes<HTMLSpanElement>;\n  h1: React.HTMLAttributes<HTMLHeadingElement>;\n  h2: React.HTMLAttributes<HTMLHeadingElement>;\n  h3: React.HTMLAttributes<HTMLHeadingElement>;\n  h4: React.HTMLAttributes<HTMLHeadingElement>;\n  h5: React.HTMLAttributes<HTMLHeadingElement>;\n  h6: React.HTMLAttributes<HTMLHeadingElement>;\n  strong: React.HTMLAttributes<HTMLElement>;\n  em: React.HTMLAttributes<HTMLElement>;\n  blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n  pre: React.HTMLAttributes<HTMLPreElement>;\n  code: React.HTMLAttributes<HTMLElement>;\n  small: React.HTMLAttributes<HTMLElement>;\n  label: React.LabelHTMLAttributes<HTMLLabelElement>;\n  a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n  ? TextColorVariant\n  : T extends \"primary\"\n    ? keyof PrimaryShades\n    : T extends \"secondary\"\n      ? keyof SecondaryShades\n      : T extends \"tertiary\"\n        ? keyof TertiaryShades\n        : never;\n\ntype ColorKey = {\n  [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n  keyof Typography[T],\n  string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n  [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n  xl: \"h1\",\n  lg: \"h1\",\n  md: \"h2\",\n  sm: \"h3\",\n  xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n  const [category, size] = variant.split(\"-\");\n\n  if (category === \"heading\") {\n    return HEADING_ELEMENT_MAP[size] || \"p\";\n  }\n\n  if (category === \"label\") {\n    return \"label\";\n  }\n\n  return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n  light: \"font-light\",\n  regular: \"font-regular\",\n  semibold: \"font-semibold\",\n  bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n  variant?: ResponsiveVariant | ResponsiveVariant[];\n  color?: ColorKey | \"inherit\";\n  as?: T;\n  className?: string;\n  children: React.ReactNode;\n  weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n  variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n  if (!variants) return \"text-body-default\";\n\n  const variantArray = Array.isArray(variants) ? variants : [variants];\n\n  return variantArray\n    .map((variant) => {\n      if (variant.includes(\":\")) {\n        const [breakpoint, typographyClass] = variant.split(\":\");\n        return `${breakpoint}:text-${typographyClass}`;\n      }\n      return `text-${variant}`;\n    })\n    .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n  <T extends TextElement = \"p\">(\n    {\n      variant = \"body-default\",\n      color = \"text-primary\",\n      as,\n      className,\n      children,\n      weight,\n      ...props\n    }: TextProps<T>,\n    ref: React.ForwardedRef<HTMLElementByTag[T]>\n  ) => {\n    // Process typography classes with breakpoints\n    const typographyClasses = processVariants(variant);\n\n    // Get color styles\n    const colorClasses =\n      color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n    const suggestedElement = React.useMemo(() => {\n      const baseVariant =\n        typeof variant === \"string\"\n          ? variant.split(\":\").pop()!\n          : Array.isArray(variant)\n            ? variant[0].split(\":\").pop()!\n            : \"body-default\";\n      return getElementFromVariant(baseVariant as TypographyKey);\n    }, [variant]);\n\n    const Component = (as || suggestedElement) as T;\n\n    return (\n      // @ts-expect-error TODO: figure this out\n      <Component\n        ref={ref}\n        className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n          weight ? `!${fontWeight[weight]}` : \"\"\n        } ${className ?? \"\"}`}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nText.displayName = \"Text\";\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n  const colorNames = Object.keys(colors) as (keyof Colors)[];\n  const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n  const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n  const safelist: string[] = [];\n\n  colorNames.forEach((colorName) => {\n    if (typeof colors[colorName] === \"object\") {\n      // Handle nested color objects (with number keys)\n      Object.keys(colors[colorName]).forEach((shade) => {\n        utilities.forEach((utility) => {\n          // Base utility\n          safelist.push(`${utility}-${colorName}-${shade}`);\n\n          // Variant utilities\n          variants.forEach((variant) => {\n            safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n          });\n        });\n      });\n    } else {\n      // Handle direct color values\n      utilities.forEach((utility) => {\n        safelist.push(`${utility}-${colorName}`);\n\n        variants.forEach((variant) => {\n          safelist.push(`${variant}${utility}-${colorName}`);\n        });\n      });\n    }\n  });\n\n  // Generate typography classes\n  Object.entries(typography).forEach(([family, sizes]) => {\n    Object.keys(sizes).forEach((size) => {\n      // Base typography classes\n      safelist.push(`text-${family}-${size}`);\n\n      // Add variants\n      variants.forEach((variant) => {\n        safelist.push(`${variant}text-${family}-${size}`);\n      });\n    });\n  });\n\n  const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n  const typographyClasses = Object.entries(typography).flatMap(\n    ([category, sizes]) =>\n      Object.keys(sizes).map((size) => `text-${category}-${size}`)\n  );\n\n  // Generate responsive variants\n  const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n    breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n  );\n\n  return [\n    ...typographyClasses,\n    ...responsiveTypographyClasses\n    // ... rest of your safelist\n  ];\n};\n\nexport const focusRingStyles =\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable: React.FC<PressableProps> = ({\n  children,\n  type = \"button\",\n  className,\n  disabled,\n  ...props\n}) => (\n  <button\n    // eslint-disable-next-line react/butt on-has-type\n    type={type}\n    disabled={disabled}\n    className={`appearance-none hover:opacity-80 transition-all active:scale-95 ${focusRingStyles} ${className} ${disabled ? \"opacity-50 cursor-not-allowed\" : \"\"}`}\n    {...props}\n  >\n    {children}\n  </button>\n);\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n  name: IconName;\n  /** @default 24 */\n  size?: ResponsiveSize | ResponsiveSize[];\n  /** @default primary */\n  color?: IconColors;\n  title?: string;\n  className?: string;\n  style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n  primary: \"#080808\",\n  secondary: \"#666666\",\n  white: \"#ffffff\",\n  primaryBlue: \"#089CCB\"\n};\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n  sm: \"640px\",\n  md: \"768px\",\n  lg: \"1024px\",\n  xl: \"1280px\",\n  \"2xl\": \"1536px\"\n};\n\nconst processSizes = (\n  sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n  if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n  const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n  const mediaQueries: Record<string, string> = {};\n  let baseSize: string | undefined;\n\n  // Process each size\n  sizeArray.forEach((size) => {\n    if (typeof size === \"number\") {\n      baseSize = `${size}px`;\n    } else {\n      const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n      const value = parseInt(valueStr, 10);\n      mediaQueries[`@media (min-width: ${BREAKPOINT_MAP[breakpoint]})`] =\n        `${value}px`;\n    }\n  });\n\n  // Create the style object with the correct structure\n  return {\n    width: baseSize || \"24px\",\n    height: baseSize || \"24px\",\n    ...Object.entries(mediaQueries).reduce(\n      (acc, [query, size]) => ({\n        ...acc,\n        [query]: {\n          width: size,\n          height: size\n        }\n      }),\n      {}\n    )\n  };\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n  (\n    {\n      name,\n      size = 24,\n      color = \"primary\",\n      title,\n      className,\n      style = {},\n      ...props\n    },\n    ref\n  ) => {\n    const IconComponent = IconMap[name];\n    const sizeStyles = processSizes(size);\n\n    return (\n      <div\n        className={cn(\"flex justify-center items-center\", className)}\n        style={{\n          ...sizeStyles,\n          [\"--icon-stroke\" as string]: COLOR_MAP[color],\n          ...style\n        }}\n      >\n        <IconComponent\n          ref={ref}\n          aria-hidden={!title}\n          aria-label={title}\n          stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\n\nIcon.displayName = \"Icon\";\n","import React, { useState, useCallback, HTMLAttributes } from \"react\";\nimport { Text } from \"./Text\";\nimport { Pressable, PressableProps } from \"./Pressable\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\n\nexport type TagProps = {\n  children: React.ReactNode;\n  padded?: boolean;\n  color?: \"primary\" | \"text\";\n  onClose?: () => void;\n} & HTMLAttributes<HTMLDivElement> &\n  PressableProps;\n\nexport const Tag = ({\n  children,\n  color = \"primary\",\n  className,\n  onClose,\n  ...pressableProps\n}: TagProps) => {\n  const [isHovered, setIsHovered] = useState(false);\n\n  const handleMouseEnter = useCallback(() => {\n    setIsHovered(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setIsHovered(false);\n  }, []);\n\n  const content = (\n    <div\n      className={cn(\n        \"flex gap-2\",\n        onClose\n          ? \"justify-between items-center\"\n          : \"items-center justify-center\",\n        \"hover:bg-primary-100 rounded bg-secondary-400 px-2 py-1 sm:px-3 sm:py-1.5 h-min hover:text-white\",\n        color === \"primary\" ? \"text-primary-100\" : \"text-primary\",\n        className\n      )}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      {typeof children === \"string\" ? (\n        <Text\n          color=\"inherit\"\n          variant={[\"md:body-default-medium\", \"body-xxs-medium\"]}\n          className=\"truncate pt-0.5\"\n        >\n          {children}\n        </Text>\n      ) : (\n        children\n      )}\n      {onClose && (\n        <Pressable\n          {...pressableProps}\n          onClick={onClose}\n          className=\"flex items-center justify-center\"\n        >\n          <Icon\n            name=\"close\"\n            size={10}\n            color={isHovered ? \"white\" : \"primaryBlue\"}\n          />\n        </Pressable>\n      )}\n    </div>\n  );\n\n  return onClose ? (\n    content\n  ) : (\n    <Pressable {...pressableProps}>{content}</Pressable>\n  );\n};\n"]}
+{"version":3,"sources":["../../src/components/Text.tsx","../../src/utils/tailwind.ts","../../src/utils/index.ts","../../src/components/Pressable.tsx","../../src/components/Icon.tsx","../../src/components/Tag.tsx"],"names":["HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","size","fontWeight","processVariants","variants","breakpoint","typographyClass","Text","React","color","as","className","children","weight","props","ref","typographyClasses","colorClasses","suggestedElement","baseVariant","focusRingStyles","cn","inputs","twMerge","clsx","Pressable","type","disabled","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","valueStr","value","acc","query","Icon","name","title","style","IconComponent","IconMap","sizeStyles","Tag","onClose","pressableProps","isHovered","setIsHovered","useState","handleMouseEnter","useCallback","handleMouseLeave","content"],"mappings":"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","file":"Tag.cjs","sourcesContent":["import React from \"react\";\nimport { Typography } from \"../types/tailwind\";\n\ntype TextElement =\n  | \"p\"\n  | \"span\"\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"strong\"\n  | \"em\"\n  | \"blockquote\"\n  | \"pre\"\n  | \"code\"\n  | \"small\"\n  | \"label\"\n  | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n  p: HTMLParagraphElement;\n  span: HTMLSpanElement;\n  h1: HTMLHeadingElement;\n  h2: HTMLHeadingElement;\n  h3: HTMLHeadingElement;\n  h4: HTMLHeadingElement;\n  h5: HTMLHeadingElement;\n  h6: HTMLHeadingElement;\n  strong: HTMLElement;\n  em: HTMLElement;\n  blockquote: HTMLQuoteElement;\n  pre: HTMLPreElement;\n  code: HTMLElement;\n  small: HTMLElement;\n  label: HTMLLabelElement;\n  a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n  p: React.HTMLAttributes<HTMLParagraphElement>;\n  span: React.HTMLAttributes<HTMLSpanElement>;\n  h1: React.HTMLAttributes<HTMLHeadingElement>;\n  h2: React.HTMLAttributes<HTMLHeadingElement>;\n  h3: React.HTMLAttributes<HTMLHeadingElement>;\n  h4: React.HTMLAttributes<HTMLHeadingElement>;\n  h5: React.HTMLAttributes<HTMLHeadingElement>;\n  h6: React.HTMLAttributes<HTMLHeadingElement>;\n  strong: React.HTMLAttributes<HTMLElement>;\n  em: React.HTMLAttributes<HTMLElement>;\n  blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n  pre: React.HTMLAttributes<HTMLPreElement>;\n  code: React.HTMLAttributes<HTMLElement>;\n  small: React.HTMLAttributes<HTMLElement>;\n  label: React.LabelHTMLAttributes<HTMLLabelElement>;\n  a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n  | \"primary\"\n  | \"secondary\"\n  | \"white\"\n  | \"primary-blue\"\n  | \"disabled\"\n  | \"danger\"\n  | \"inherit\";\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n  xl: \"h1\",\n  lg: \"h1\",\n  md: \"h2\",\n  sm: \"h3\",\n  xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n  const [category, size] = variant.split(\"-\");\n\n  if (category === \"heading\") {\n    return HEADING_ELEMENT_MAP[size] || \"p\";\n  }\n\n  if (category === \"label\") {\n    return \"label\";\n  }\n\n  return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n  light: \"font-light\",\n  regular: \"font-regular\",\n  semibold: \"font-semibold\",\n  bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n  keyof Typography[T],\n  string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n  [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n  variant?: ResponsiveVariant | ResponsiveVariant[];\n  color?: TextColor;\n  as?: T;\n  className?: string;\n  children: React.ReactNode;\n  weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n  variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n  if (!variants) return \"text-body-default\";\n\n  const variantArray = Array.isArray(variants) ? variants : [variants];\n\n  return variantArray\n    .map((variant) => {\n      if (variant.includes(\":\")) {\n        const [breakpoint, typographyClass] = variant.split(\":\");\n        return `${breakpoint}:text-${typographyClass}`;\n      }\n      return `text-${variant}`;\n    })\n    .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n  <T extends TextElement = \"p\">(\n    {\n      variant = \"body-default\",\n      color = \"primary\",\n      as,\n      className,\n      children,\n      weight,\n      ...props\n    }: TextProps<T>,\n    ref: React.ForwardedRef<HTMLElementByTag[T]>\n  ) => {\n    // Process typography classes with breakpoints\n    const typographyClasses = processVariants(variant);\n\n    // Get color styles\n    const colorClasses =\n      color === \"inherit\" ? \"text-inherit\" : `text-text-${color}`;\n\n    const suggestedElement = React.useMemo(() => {\n      const baseVariant =\n        typeof variant === \"string\"\n          ? variant.split(\":\").pop()!\n          : Array.isArray(variant)\n            ? variant[0].split(\":\").pop()!\n            : \"body-default\";\n      return getElementFromVariant(baseVariant as TypographyKey);\n    }, [variant]);\n\n    const Component = (as || suggestedElement) as T;\n\n    return (\n      // @ts-expect-error TODO: figure this out\n      <Component\n        ref={ref}\n        className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n          weight ? `!${fontWeight[weight]}` : \"\"\n        } ${className ?? \"\"}`}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nText.displayName = \"Text\";\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n  const colorNames = Object.keys(colors) as (keyof Colors)[];\n  const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n  const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n  const safelist: string[] = [];\n\n  colorNames.forEach((colorName) => {\n    if (typeof colors[colorName] === \"object\") {\n      // Handle nested color objects (with number keys)\n      Object.keys(colors[colorName]).forEach((shade) => {\n        utilities.forEach((utility) => {\n          // Base utility\n          safelist.push(`${utility}-${colorName}-${shade}`);\n\n          // Variant utilities\n          variants.forEach((variant) => {\n            safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n          });\n        });\n      });\n    } else {\n      // Handle direct color values\n      utilities.forEach((utility) => {\n        safelist.push(`${utility}-${colorName}`);\n\n        variants.forEach((variant) => {\n          safelist.push(`${variant}${utility}-${colorName}`);\n        });\n      });\n    }\n  });\n\n  // Generate typography classes\n  Object.entries(typography).forEach(([family, sizes]) => {\n    Object.keys(sizes).forEach((size) => {\n      // Base typography classes\n      safelist.push(`text-${family}-${size}`);\n\n      // Add variants\n      variants.forEach((variant) => {\n        safelist.push(`${variant}text-${family}-${size}`);\n      });\n    });\n  });\n\n  const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n  const typographyClasses = Object.entries(typography).flatMap(\n    ([category, sizes]) =>\n      Object.keys(sizes).map((size) => `text-${category}-${size}`)\n  );\n\n  // Generate responsive variants\n  const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n    breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n  );\n\n  return [\n    ...typographyClasses,\n    ...responsiveTypographyClasses\n    // ... rest of your safelist\n  ];\n};\n\nexport const focusRingStyles =\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable = React.forwardRef<HTMLButtonElement, PressableProps>(\n  ({ children, type = \"button\", className, disabled, ...props }, ref) => (\n    <button\n      ref={ref}\n      type={type}\n      disabled={disabled}\n      className={cn(\n        \"appearance-none hover:opacity-80 transition-all active:scale-95\",\n        focusRingStyles,\n        disabled && \"opacity-50 cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n);\n\nPressable.displayName = \"Pressable\";\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n  name: IconName;\n  /** @default 24 */\n  size?: ResponsiveSize | ResponsiveSize[];\n  /** @default primary */\n  color?: IconColors;\n  title?: string;\n  className?: string;\n  style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n  primary: \"#080808\",\n  secondary: \"#666666\",\n  white: \"#ffffff\",\n  primaryBlue: \"#089CCB\",\n  disabled: \"#888888\"\n};\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n  sm: \"640px\",\n  md: \"768px\",\n  lg: \"1024px\",\n  xl: \"1280px\",\n  \"2xl\": \"1536px\"\n};\n\nconst processSizes = (\n  sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n  if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n  const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n  const mediaQueries: Record<string, string> = {};\n  let baseSize: string | undefined;\n\n  // Process each size\n  sizeArray.forEach((size) => {\n    if (typeof size === \"number\") {\n      baseSize = `${size}px`;\n    } else {\n      const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n      const value = parseInt(valueStr, 10);\n      mediaQueries[`@media (min-width: ${BREAKPOINT_MAP[breakpoint]})`] =\n        `${value}px`;\n    }\n  });\n\n  // Create the style object with the correct structure\n  return {\n    width: baseSize || \"24px\",\n    height: baseSize || \"24px\",\n    ...Object.entries(mediaQueries).reduce(\n      (acc, [query, size]) => ({\n        ...acc,\n        [query]: {\n          width: size,\n          height: size\n        }\n      }),\n      {}\n    )\n  };\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n  (\n    {\n      name,\n      size = 24,\n      color = \"primary\",\n      title,\n      className,\n      style = {},\n      ...props\n    },\n    ref\n  ) => {\n    const IconComponent = IconMap[name];\n    const sizeStyles = processSizes(size);\n\n    return (\n      <div\n        className={cn(\"flex justify-center items-center\", className)}\n        style={{\n          ...sizeStyles,\n          [\"--icon-stroke\" as string]: COLOR_MAP[color],\n          ...style\n        }}\n      >\n        <IconComponent\n          ref={ref}\n          aria-hidden={!title}\n          aria-label={title}\n          stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\n\nIcon.displayName = \"Icon\";\n","import React, { useState, useCallback, HTMLAttributes } from \"react\";\nimport { Text } from \"./Text\";\nimport { Pressable, PressableProps } from \"./Pressable\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\n\nexport type TagProps = {\n  children: React.ReactNode;\n  padded?: boolean;\n  color?: \"primary\" | \"text\";\n  onClose?: () => void;\n} & HTMLAttributes<HTMLDivElement> &\n  PressableProps;\n\nexport const Tag = ({\n  children,\n  color = \"primary\",\n  className,\n  onClose,\n  ...pressableProps\n}: TagProps) => {\n  const [isHovered, setIsHovered] = useState(false);\n\n  const handleMouseEnter = useCallback(() => {\n    setIsHovered(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setIsHovered(false);\n  }, []);\n\n  const content = (\n    <div\n      className={cn(\n        \"flex gap-2\",\n        onClose\n          ? \"justify-between items-center\"\n          : \"items-center justify-center\",\n        \"hover:bg-primary-100 rounded bg-secondary-400 px-2 py-1 sm:px-3 sm:py-1.5 h-min hover:text-white\",\n        color === \"primary\" ? \"text-primary-100\" : \"text-text\",\n        className\n      )}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      {typeof children === \"string\" ? (\n        <Text\n          color=\"inherit\"\n          variant={[\"md:body-default-medium\", \"body-xxs-medium\"]}\n          className=\"truncate pt-0.5\"\n        >\n          {children}\n        </Text>\n      ) : (\n        children\n      )}\n      {onClose && (\n        <Pressable\n          {...pressableProps}\n          onClick={onClose}\n          className=\"flex items-center justify-center\"\n        >\n          <Icon\n            name=\"close\"\n            size={10}\n            color={isHovered ? \"white\" : \"primaryBlue\"}\n          />\n        </Pressable>\n      )}\n    </div>\n  );\n\n  return onClose ? (\n    content\n  ) : (\n    <Pressable {...pressableProps}>{content}</Pressable>\n  );\n};\n"]}

package/dist/components/Tag.js

@@ -1,2 +1,2 @@
-import c,{useState,useCallback}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {IconMap}from'@deckai/icons';var M={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},L=e=>{let[o,r]=e.split("-");return o==="heading"?M[r]||"p":o==="label"?"label":"p"},E={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},C=e=>e?(Array.isArray(e)?e:[e]).map(r=>{if(r.includes(":")){let[t,n]=r.split(":");return `${t}:text-${n}`}return `text-${r}`}).join(" "):"text-body-default",d=c.forwardRef(({variant:e="body-default",color:o="text-primary",as:r,className:t,children:n,weight:a,...s},i)=>{let l=C(e),p=o&&o==="inherit"?"inherit":o?`text-${o}`:"",x=c.useMemo(()=>{let H=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return L(H)},[e]);return c.createElement(r||x,{ref:i,className:`font-sans antialiased ${l} ${p} ${a?`!${E[a]}`:""} ${t??""}`,...s},n)});d.displayName="Text";var h="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var T=({children:e,type:o="button",className:r,disabled:t,...n})=>c.createElement("button",{type:o,disabled:t,className:`appearance-none hover:opacity-80 transition-all active:scale-95 ${h} ${r} ${t?"opacity-50 cursor-not-allowed":""}`,...n},e);function m(...e){return twMerge(clsx(e))}var f={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB"},P={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},v=e=>{if(!e)return {width:"24px",height:"24px"};let o=Array.isArray(e)?e:[e],r={},t;return o.forEach(n=>{if(typeof n=="number")t=`${n}px`;else {let[a,s]=n.split(":"),i=parseInt(s,10);r[`@media (min-width: ${P[a]})`]=`${i}px`;}}),{width:t||"24px",height:t||"24px",...Object.entries(r).reduce((n,[a,s])=>({...n,[a]:{width:s,height:s}}),{})}},g=c.forwardRef(({name:e,size:o=24,color:r="primary",title:t,className:n,style:a={},...s},i)=>{let l=IconMap[e],p=v(o);return c.createElement("div",{className:m("flex justify-center items-center",n),style:{...p,"--icon-stroke":f[r],...a}},c.createElement(l,{ref:i,"aria-hidden":!t,"aria-label":t,stroke:e.includes("filled")?void 0:f[r],...s}))});g.displayName="Icon";var oe=({children:e,color:o="primary",className:r,onClose:t,...n})=>{let[a,s]=useState(!1),i=useCallback(()=>{s(!0);},[]),l=useCallback(()=>{s(!1);},[]),p=c.createElement("div",{className:m("flex gap-2",t?"justify-between items-center":"items-center justify-center","hover:bg-primary-100 rounded bg-secondary-400 px-2 py-1 sm:px-3 sm:py-1.5 h-min hover:text-white",o==="primary"?"text-primary-100":"text-primary",r),onMouseEnter:i,onMouseLeave:l},typeof e=="string"?c.createElement(d,{color:"inherit",variant:["md:body-default-medium","body-xxs-medium"],className:"truncate pt-0.5"},e):e,t&&c.createElement(T,{...n,onClick:t,className:"flex items-center justify-center"},c.createElement(g,{name:"close",size:10,color:a?"white":"primaryBlue"})));return t?p:c.createElement(T,{...n},p)};if (exports.default) module.exports = exports.default;export{oe as Tag};//# sourceMappingURL=Tag.js.map
+import m,{useState,useCallback}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {IconMap}from'@deckai/icons';var L={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},E=e=>{let[n,r]=e.split("-");return n==="heading"?L[r]||"p":n==="label"?"label":"p"},R={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},$=e=>e?(Array.isArray(e)?e:[e]).map(r=>{if(r.includes(":")){let[t,o]=r.split(":");return `${t}:text-${o}`}return `text-${r}`}).join(" "):"text-body-default",u=m.forwardRef(({variant:e="body-default",color:n="primary",as:r,className:t,children:o,weight:s,...a},i)=>{let c=$(e),p=n==="inherit"?"text-inherit":`text-text-${n}`,H=m.useMemo(()=>{let M=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return E(M)},[e]);return m.createElement(r||H,{ref:i,className:`font-sans antialiased ${c} ${p} ${s?`!${R[s]}`:""} ${t??""}`,...a},o)});u.displayName="Text";var f="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";function l(...e){return twMerge(clsx(e))}var y=m.forwardRef(({children:e,type:n="button",className:r,disabled:t,...o},s)=>m.createElement("button",{ref:s,type:n,disabled:t,className:l("appearance-none hover:opacity-80 transition-all active:scale-95",f,t&&"opacity-50 cursor-not-allowed",r),...o},e));y.displayName="Pressable";var b={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB",disabled:"#888888"},C={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},S=e=>{if(!e)return {width:"24px",height:"24px"};let n=Array.isArray(e)?e:[e],r={},t;return n.forEach(o=>{if(typeof o=="number")t=`${o}px`;else {let[s,a]=o.split(":"),i=parseInt(a,10);r[`@media (min-width: ${C[s]})`]=`${i}px`;}}),{width:t||"24px",height:t||"24px",...Object.entries(r).reduce((o,[s,a])=>({...o,[s]:{width:a,height:a}}),{})}},g=m.forwardRef(({name:e,size:n=24,color:r="primary",title:t,className:o,style:s={},...a},i)=>{let c=IconMap[e],p=S(n);return m.createElement("div",{className:l("flex justify-center items-center",o),style:{...p,"--icon-stroke":b[r],...s}},m.createElement(c,{ref:i,"aria-hidden":!t,"aria-label":t,stroke:e.includes("filled")?void 0:b[r],...a}))});g.displayName="Icon";var ne=({children:e,color:n="primary",className:r,onClose:t,...o})=>{let[s,a]=useState(!1),i=useCallback(()=>{a(!0);},[]),c=useCallback(()=>{a(!1);},[]),p=m.createElement("div",{className:l("flex gap-2",t?"justify-between items-center":"items-center justify-center","hover:bg-primary-100 rounded bg-secondary-400 px-2 py-1 sm:px-3 sm:py-1.5 h-min hover:text-white",n==="primary"?"text-primary-100":"text-text",r),onMouseEnter:i,onMouseLeave:c},typeof e=="string"?m.createElement(u,{color:"inherit",variant:["md:body-default-medium","body-xxs-medium"],className:"truncate pt-0.5"},e):e,t&&m.createElement(y,{...o,onClick:t,className:"flex items-center justify-center"},m.createElement(g,{name:"close",size:10,color:s?"white":"primaryBlue"})));return t?p:m.createElement(y,{...o},p)};if (exports.default) module.exports = exports.default;export{ne as Tag};//# sourceMappingURL=Tag.js.map
 //# sourceMappingURL=Tag.js.map

package/dist/components/Tag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Text.tsx","../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/components/Tag.tsx"],"names":["HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","size","fontWeight","processVariants","variants","breakpoint","typographyClass","Text","React","color","as","className","children","weight","props","ref","typographyClasses","colorClasses","suggestedElement","baseVariant","focusRingStyles","Pressable","type","disabled","cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","valueStr","value","acc","query","Icon","name","title","style","IconComponent","IconMap","sizeStyles","Tag","onClose","pressableProps","isHovered","setIsHovered","useState","handleMouseEnter","useCallback","handleMouseLeave","content"],"mappings":"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","file":"Tag.js","sourcesContent":["import React from \"react\";\nimport {\n  Colors,\n  TextColorVariant,\n  PrimaryShades,\n  SecondaryShades,\n  TertiaryShades,\n  Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n  | \"p\"\n  | \"span\"\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"strong\"\n  | \"em\"\n  | \"blockquote\"\n  | \"pre\"\n  | \"code\"\n  | \"small\"\n  | \"label\"\n  | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n  p: HTMLParagraphElement;\n  span: HTMLSpanElement;\n  h1: HTMLHeadingElement;\n  h2: HTMLHeadingElement;\n  h3: HTMLHeadingElement;\n  h4: HTMLHeadingElement;\n  h5: HTMLHeadingElement;\n  h6: HTMLHeadingElement;\n  strong: HTMLElement;\n  em: HTMLElement;\n  blockquote: HTMLQuoteElement;\n  pre: HTMLPreElement;\n  code: HTMLElement;\n  small: HTMLElement;\n  label: HTMLLabelElement;\n  a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n  p: React.HTMLAttributes<HTMLParagraphElement>;\n  span: React.HTMLAttributes<HTMLSpanElement>;\n  h1: React.HTMLAttributes<HTMLHeadingElement>;\n  h2: React.HTMLAttributes<HTMLHeadingElement>;\n  h3: React.HTMLAttributes<HTMLHeadingElement>;\n  h4: React.HTMLAttributes<HTMLHeadingElement>;\n  h5: React.HTMLAttributes<HTMLHeadingElement>;\n  h6: React.HTMLAttributes<HTMLHeadingElement>;\n  strong: React.HTMLAttributes<HTMLElement>;\n  em: React.HTMLAttributes<HTMLElement>;\n  blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n  pre: React.HTMLAttributes<HTMLPreElement>;\n  code: React.HTMLAttributes<HTMLElement>;\n  small: React.HTMLAttributes<HTMLElement>;\n  label: React.LabelHTMLAttributes<HTMLLabelElement>;\n  a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n  ? TextColorVariant\n  : T extends \"primary\"\n    ? keyof PrimaryShades\n    : T extends \"secondary\"\n      ? keyof SecondaryShades\n      : T extends \"tertiary\"\n        ? keyof TertiaryShades\n        : never;\n\ntype ColorKey = {\n  [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n  keyof Typography[T],\n  string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n  [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n  xl: \"h1\",\n  lg: \"h1\",\n  md: \"h2\",\n  sm: \"h3\",\n  xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n  const [category, size] = variant.split(\"-\");\n\n  if (category === \"heading\") {\n    return HEADING_ELEMENT_MAP[size] || \"p\";\n  }\n\n  if (category === \"label\") {\n    return \"label\";\n  }\n\n  return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n  light: \"font-light\",\n  regular: \"font-regular\",\n  semibold: \"font-semibold\",\n  bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n  variant?: ResponsiveVariant | ResponsiveVariant[];\n  color?: ColorKey | \"inherit\";\n  as?: T;\n  className?: string;\n  children: React.ReactNode;\n  weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n  variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n  if (!variants) return \"text-body-default\";\n\n  const variantArray = Array.isArray(variants) ? variants : [variants];\n\n  return variantArray\n    .map((variant) => {\n      if (variant.includes(\":\")) {\n        const [breakpoint, typographyClass] = variant.split(\":\");\n        return `${breakpoint}:text-${typographyClass}`;\n      }\n      return `text-${variant}`;\n    })\n    .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n  <T extends TextElement = \"p\">(\n    {\n      variant = \"body-default\",\n      color = \"text-primary\",\n      as,\n      className,\n      children,\n      weight,\n      ...props\n    }: TextProps<T>,\n    ref: React.ForwardedRef<HTMLElementByTag[T]>\n  ) => {\n    // Process typography classes with breakpoints\n    const typographyClasses = processVariants(variant);\n\n    // Get color styles\n    const colorClasses =\n      color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n    const suggestedElement = React.useMemo(() => {\n      const baseVariant =\n        typeof variant === \"string\"\n          ? variant.split(\":\").pop()!\n          : Array.isArray(variant)\n            ? variant[0].split(\":\").pop()!\n            : \"body-default\";\n      return getElementFromVariant(baseVariant as TypographyKey);\n    }, [variant]);\n\n    const Component = (as || suggestedElement) as T;\n\n    return (\n      // @ts-expect-error TODO: figure this out\n      <Component\n        ref={ref}\n        className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n          weight ? `!${fontWeight[weight]}` : \"\"\n        } ${className ?? \"\"}`}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nText.displayName = \"Text\";\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n  const colorNames = Object.keys(colors) as (keyof Colors)[];\n  const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n  const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n  const safelist: string[] = [];\n\n  colorNames.forEach((colorName) => {\n    if (typeof colors[colorName] === \"object\") {\n      // Handle nested color objects (with number keys)\n      Object.keys(colors[colorName]).forEach((shade) => {\n        utilities.forEach((utility) => {\n          // Base utility\n          safelist.push(`${utility}-${colorName}-${shade}`);\n\n          // Variant utilities\n          variants.forEach((variant) => {\n            safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n          });\n        });\n      });\n    } else {\n      // Handle direct color values\n      utilities.forEach((utility) => {\n        safelist.push(`${utility}-${colorName}`);\n\n        variants.forEach((variant) => {\n          safelist.push(`${variant}${utility}-${colorName}`);\n        });\n      });\n    }\n  });\n\n  // Generate typography classes\n  Object.entries(typography).forEach(([family, sizes]) => {\n    Object.keys(sizes).forEach((size) => {\n      // Base typography classes\n      safelist.push(`text-${family}-${size}`);\n\n      // Add variants\n      variants.forEach((variant) => {\n        safelist.push(`${variant}text-${family}-${size}`);\n      });\n    });\n  });\n\n  const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n  const typographyClasses = Object.entries(typography).flatMap(\n    ([category, sizes]) =>\n      Object.keys(sizes).map((size) => `text-${category}-${size}`)\n  );\n\n  // Generate responsive variants\n  const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n    breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n  );\n\n  return [\n    ...typographyClasses,\n    ...responsiveTypographyClasses\n    // ... rest of your safelist\n  ];\n};\n\nexport const focusRingStyles =\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable: React.FC<PressableProps> = ({\n  children,\n  type = \"button\",\n  className,\n  disabled,\n  ...props\n}) => (\n  <button\n    // eslint-disable-next-line react/butt on-has-type\n    type={type}\n    disabled={disabled}\n    className={`appearance-none hover:opacity-80 transition-all active:scale-95 ${focusRingStyles} ${className} ${disabled ? \"opacity-50 cursor-not-allowed\" : \"\"}`}\n    {...props}\n  >\n    {children}\n  </button>\n);\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n  name: IconName;\n  /** @default 24 */\n  size?: ResponsiveSize | ResponsiveSize[];\n  /** @default primary */\n  color?: IconColors;\n  title?: string;\n  className?: string;\n  style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n  primary: \"#080808\",\n  secondary: \"#666666\",\n  white: \"#ffffff\",\n  primaryBlue: \"#089CCB\"\n};\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n  sm: \"640px\",\n  md: \"768px\",\n  lg: \"1024px\",\n  xl: \"1280px\",\n  \"2xl\": \"1536px\"\n};\n\nconst processSizes = (\n  sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n  if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n  const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n  const mediaQueries: Record<string, string> = {};\n  let baseSize: string | undefined;\n\n  // Process each size\n  sizeArray.forEach((size) => {\n    if (typeof size === \"number\") {\n      baseSize = `${size}px`;\n    } else {\n      const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n      const value = parseInt(valueStr, 10);\n      mediaQueries[`@media (min-width: ${BREAKPOINT_MAP[breakpoint]})`] =\n        `${value}px`;\n    }\n  });\n\n  // Create the style object with the correct structure\n  return {\n    width: baseSize || \"24px\",\n    height: baseSize || \"24px\",\n    ...Object.entries(mediaQueries).reduce(\n      (acc, [query, size]) => ({\n        ...acc,\n        [query]: {\n          width: size,\n          height: size\n        }\n      }),\n      {}\n    )\n  };\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n  (\n    {\n      name,\n      size = 24,\n      color = \"primary\",\n      title,\n      className,\n      style = {},\n      ...props\n    },\n    ref\n  ) => {\n    const IconComponent = IconMap[name];\n    const sizeStyles = processSizes(size);\n\n    return (\n      <div\n        className={cn(\"flex justify-center items-center\", className)}\n        style={{\n          ...sizeStyles,\n          [\"--icon-stroke\" as string]: COLOR_MAP[color],\n          ...style\n        }}\n      >\n        <IconComponent\n          ref={ref}\n          aria-hidden={!title}\n          aria-label={title}\n          stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\n\nIcon.displayName = \"Icon\";\n","import React, { useState, useCallback, HTMLAttributes } from \"react\";\nimport { Text } from \"./Text\";\nimport { Pressable, PressableProps } from \"./Pressable\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\n\nexport type TagProps = {\n  children: React.ReactNode;\n  padded?: boolean;\n  color?: \"primary\" | \"text\";\n  onClose?: () => void;\n} & HTMLAttributes<HTMLDivElement> &\n  PressableProps;\n\nexport const Tag = ({\n  children,\n  color = \"primary\",\n  className,\n  onClose,\n  ...pressableProps\n}: TagProps) => {\n  const [isHovered, setIsHovered] = useState(false);\n\n  const handleMouseEnter = useCallback(() => {\n    setIsHovered(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setIsHovered(false);\n  }, []);\n\n  const content = (\n    <div\n      className={cn(\n        \"flex gap-2\",\n        onClose\n          ? \"justify-between items-center\"\n          : \"items-center justify-center\",\n        \"hover:bg-primary-100 rounded bg-secondary-400 px-2 py-1 sm:px-3 sm:py-1.5 h-min hover:text-white\",\n        color === \"primary\" ? \"text-primary-100\" : \"text-primary\",\n        className\n      )}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      {typeof children === \"string\" ? (\n        <Text\n          color=\"inherit\"\n          variant={[\"md:body-default-medium\", \"body-xxs-medium\"]}\n          className=\"truncate pt-0.5\"\n        >\n          {children}\n        </Text>\n      ) : (\n        children\n      )}\n      {onClose && (\n        <Pressable\n          {...pressableProps}\n          onClick={onClose}\n          className=\"flex items-center justify-center\"\n        >\n          <Icon\n            name=\"close\"\n            size={10}\n            color={isHovered ? \"white\" : \"primaryBlue\"}\n          />\n        </Pressable>\n      )}\n    </div>\n  );\n\n  return onClose ? (\n    content\n  ) : (\n    <Pressable {...pressableProps}>{content}</Pressable>\n  );\n};\n"]}
+{"version":3,"sources":["../../src/components/Text.tsx","../../src/utils/tailwind.ts","../../src/utils/index.ts","../../src/components/Pressable.tsx","../../src/components/Icon.tsx","../../src/components/Tag.tsx"],"names":["HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","size","fontWeight","processVariants","variants","breakpoint","typographyClass","Text","React","color","as","className","children","weight","props","ref","typographyClasses","colorClasses","suggestedElement","baseVariant","focusRingStyles","cn","inputs","twMerge","clsx","Pressable","type","disabled","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","valueStr","value","acc","query","Icon","name","title","style","IconComponent","IconMap","sizeStyles","Tag","onClose","pressableProps","isHovered","setIsHovered","useState","handleMouseEnter","useCallback","handleMouseLeave","content"],"mappings":"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","file":"Tag.js","sourcesContent":["import React from \"react\";\nimport { Typography } from \"../types/tailwind\";\n\ntype TextElement =\n  | \"p\"\n  | \"span\"\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"strong\"\n  | \"em\"\n  | \"blockquote\"\n  | \"pre\"\n  | \"code\"\n  | \"small\"\n  | \"label\"\n  | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n  p: HTMLParagraphElement;\n  span: HTMLSpanElement;\n  h1: HTMLHeadingElement;\n  h2: HTMLHeadingElement;\n  h3: HTMLHeadingElement;\n  h4: HTMLHeadingElement;\n  h5: HTMLHeadingElement;\n  h6: HTMLHeadingElement;\n  strong: HTMLElement;\n  em: HTMLElement;\n  blockquote: HTMLQuoteElement;\n  pre: HTMLPreElement;\n  code: HTMLElement;\n  small: HTMLElement;\n  label: HTMLLabelElement;\n  a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n  p: React.HTMLAttributes<HTMLParagraphElement>;\n  span: React.HTMLAttributes<HTMLSpanElement>;\n  h1: React.HTMLAttributes<HTMLHeadingElement>;\n  h2: React.HTMLAttributes<HTMLHeadingElement>;\n  h3: React.HTMLAttributes<HTMLHeadingElement>;\n  h4: React.HTMLAttributes<HTMLHeadingElement>;\n  h5: React.HTMLAttributes<HTMLHeadingElement>;\n  h6: React.HTMLAttributes<HTMLHeadingElement>;\n  strong: React.HTMLAttributes<HTMLElement>;\n  em: React.HTMLAttributes<HTMLElement>;\n  blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n  pre: React.HTMLAttributes<HTMLPreElement>;\n  code: React.HTMLAttributes<HTMLElement>;\n  small: React.HTMLAttributes<HTMLElement>;\n  label: React.LabelHTMLAttributes<HTMLLabelElement>;\n  a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n  | \"primary\"\n  | \"secondary\"\n  | \"white\"\n  | \"primary-blue\"\n  | \"disabled\"\n  | \"danger\"\n  | \"inherit\";\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n  xl: \"h1\",\n  lg: \"h1\",\n  md: \"h2\",\n  sm: \"h3\",\n  xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n  const [category, size] = variant.split(\"-\");\n\n  if (category === \"heading\") {\n    return HEADING_ELEMENT_MAP[size] || \"p\";\n  }\n\n  if (category === \"label\") {\n    return \"label\";\n  }\n\n  return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n  light: \"font-light\",\n  regular: \"font-regular\",\n  semibold: \"font-semibold\",\n  bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n  keyof Typography[T],\n  string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n  [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n  variant?: ResponsiveVariant | ResponsiveVariant[];\n  color?: TextColor;\n  as?: T;\n  className?: string;\n  children: React.ReactNode;\n  weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n  variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n  if (!variants) return \"text-body-default\";\n\n  const variantArray = Array.isArray(variants) ? variants : [variants];\n\n  return variantArray\n    .map((variant) => {\n      if (variant.includes(\":\")) {\n        const [breakpoint, typographyClass] = variant.split(\":\");\n        return `${breakpoint}:text-${typographyClass}`;\n      }\n      return `text-${variant}`;\n    })\n    .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n  <T extends TextElement = \"p\">(\n    {\n      variant = \"body-default\",\n      color = \"primary\",\n      as,\n      className,\n      children,\n      weight,\n      ...props\n    }: TextProps<T>,\n    ref: React.ForwardedRef<HTMLElementByTag[T]>\n  ) => {\n    // Process typography classes with breakpoints\n    const typographyClasses = processVariants(variant);\n\n    // Get color styles\n    const colorClasses =\n      color === \"inherit\" ? \"text-inherit\" : `text-text-${color}`;\n\n    const suggestedElement = React.useMemo(() => {\n      const baseVariant =\n        typeof variant === \"string\"\n          ? variant.split(\":\").pop()!\n          : Array.isArray(variant)\n            ? variant[0].split(\":\").pop()!\n            : \"body-default\";\n      return getElementFromVariant(baseVariant as TypographyKey);\n    }, [variant]);\n\n    const Component = (as || suggestedElement) as T;\n\n    return (\n      // @ts-expect-error TODO: figure this out\n      <Component\n        ref={ref}\n        className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n          weight ? `!${fontWeight[weight]}` : \"\"\n        } ${className ?? \"\"}`}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nText.displayName = \"Text\";\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n  const colorNames = Object.keys(colors) as (keyof Colors)[];\n  const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n  const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n  const safelist: string[] = [];\n\n  colorNames.forEach((colorName) => {\n    if (typeof colors[colorName] === \"object\") {\n      // Handle nested color objects (with number keys)\n      Object.keys(colors[colorName]).forEach((shade) => {\n        utilities.forEach((utility) => {\n          // Base utility\n          safelist.push(`${utility}-${colorName}-${shade}`);\n\n          // Variant utilities\n          variants.forEach((variant) => {\n            safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n          });\n        });\n      });\n    } else {\n      // Handle direct color values\n      utilities.forEach((utility) => {\n        safelist.push(`${utility}-${colorName}`);\n\n        variants.forEach((variant) => {\n          safelist.push(`${variant}${utility}-${colorName}`);\n        });\n      });\n    }\n  });\n\n  // Generate typography classes\n  Object.entries(typography).forEach(([family, sizes]) => {\n    Object.keys(sizes).forEach((size) => {\n      // Base typography classes\n      safelist.push(`text-${family}-${size}`);\n\n      // Add variants\n      variants.forEach((variant) => {\n        safelist.push(`${variant}text-${family}-${size}`);\n      });\n    });\n  });\n\n  const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n  const typographyClasses = Object.entries(typography).flatMap(\n    ([category, sizes]) =>\n      Object.keys(sizes).map((size) => `text-${category}-${size}`)\n  );\n\n  // Generate responsive variants\n  const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n    breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n  );\n\n  return [\n    ...typographyClasses,\n    ...responsiveTypographyClasses\n    // ... rest of your safelist\n  ];\n};\n\nexport const focusRingStyles =\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable = React.forwardRef<HTMLButtonElement, PressableProps>(\n  ({ children, type = \"button\", className, disabled, ...props }, ref) => (\n    <button\n      ref={ref}\n      type={type}\n      disabled={disabled}\n      className={cn(\n        \"appearance-none hover:opacity-80 transition-all active:scale-95\",\n        focusRingStyles,\n        disabled && \"opacity-50 cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n);\n\nPressable.displayName = \"Pressable\";\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n  name: IconName;\n  /** @default 24 */\n  size?: ResponsiveSize | ResponsiveSize[];\n  /** @default primary */\n  color?: IconColors;\n  title?: string;\n  className?: string;\n  style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n  primary: \"#080808\",\n  secondary: \"#666666\",\n  white: \"#ffffff\",\n  primaryBlue: \"#089CCB\",\n  disabled: \"#888888\"\n};\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n  sm: \"640px\",\n  md: \"768px\",\n  lg: \"1024px\",\n  xl: \"1280px\",\n  \"2xl\": \"1536px\"\n};\n\nconst processSizes = (\n  sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n  if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n  const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n  const mediaQueries: Record<string, string> = {};\n  let baseSize: string | undefined;\n\n  // Process each size\n  sizeArray.forEach((size) => {\n    if (typeof size === \"number\") {\n      baseSize = `${size}px`;\n    } else {\n      const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n      const value = parseInt(valueStr, 10);\n      mediaQueries[`@media (min-width: ${BREAKPOINT_MAP[breakpoint]})`] =\n        `${value}px`;\n    }\n  });\n\n  // Create the style object with the correct structure\n  return {\n    width: baseSize || \"24px\",\n    height: baseSize || \"24px\",\n    ...Object.entries(mediaQueries).reduce(\n      (acc, [query, size]) => ({\n        ...acc,\n        [query]: {\n          width: size,\n          height: size\n        }\n      }),\n      {}\n    )\n  };\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n  (\n    {\n      name,\n      size = 24,\n      color = \"primary\",\n      title,\n      className,\n      style = {},\n      ...props\n    },\n    ref\n  ) => {\n    const IconComponent = IconMap[name];\n    const sizeStyles = processSizes(size);\n\n    return (\n      <div\n        className={cn(\"flex justify-center items-center\", className)}\n        style={{\n          ...sizeStyles,\n          [\"--icon-stroke\" as string]: COLOR_MAP[color],\n          ...style\n        }}\n      >\n        <IconComponent\n          ref={ref}\n          aria-hidden={!title}\n          aria-label={title}\n          stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\n\nIcon.displayName = \"Icon\";\n","import React, { useState, useCallback, HTMLAttributes } from \"react\";\nimport { Text } from \"./Text\";\nimport { Pressable, PressableProps } from \"./Pressable\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\n\nexport type TagProps = {\n  children: React.ReactNode;\n  padded?: boolean;\n  color?: \"primary\" | \"text\";\n  onClose?: () => void;\n} & HTMLAttributes<HTMLDivElement> &\n  PressableProps;\n\nexport const Tag = ({\n  children,\n  color = \"primary\",\n  className,\n  onClose,\n  ...pressableProps\n}: TagProps) => {\n  const [isHovered, setIsHovered] = useState(false);\n\n  const handleMouseEnter = useCallback(() => {\n    setIsHovered(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setIsHovered(false);\n  }, []);\n\n  const content = (\n    <div\n      className={cn(\n        \"flex gap-2\",\n        onClose\n          ? \"justify-between items-center\"\n          : \"items-center justify-center\",\n        \"hover:bg-primary-100 rounded bg-secondary-400 px-2 py-1 sm:px-3 sm:py-1.5 h-min hover:text-white\",\n        color === \"primary\" ? \"text-primary-100\" : \"text-text\",\n        className\n      )}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      {typeof children === \"string\" ? (\n        <Text\n          color=\"inherit\"\n          variant={[\"md:body-default-medium\", \"body-xxs-medium\"]}\n          className=\"truncate pt-0.5\"\n        >\n          {children}\n        </Text>\n      ) : (\n        children\n      )}\n      {onClose && (\n        <Pressable\n          {...pressableProps}\n          onClick={onClose}\n          className=\"flex items-center justify-center\"\n        >\n          <Icon\n            name=\"close\"\n            size={10}\n            color={isHovered ? \"white\" : \"primaryBlue\"}\n          />\n        </Pressable>\n      )}\n    </div>\n  );\n\n  return onClose ? (\n    content\n  ) : (\n    <Pressable {...pressableProps}>{content}</Pressable>\n  );\n};\n"]}

package/dist/components/Text.cjs

@@ -1,2 +1,2 @@
-'use strict';var o=require('react');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var o__default=/*#__PURE__*/_interopDefault(o);var g={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},H=e=>{let[t,r]=e.split("-");return t==="heading"?g[r]||"p":t==="label"?"label":"p"},d={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},h=e=>e?(Array.isArray(e)?e:[e]).map(r=>{if(r.includes(":")){let[a,n]=r.split(":");return `${a}:text-${n}`}return `text-${r}`}).join(" "):"text-body-default",M=o__default.default.forwardRef(({variant:e="body-default",color:t="text-primary",as:r,className:a,children:n,weight:l,...s},T)=>{let p=h(e),i=t&&t==="inherit"?"inherit":t?`text-${t}`:"",y=o__default.default.useMemo(()=>{let m=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return H(m)},[e]);return o__default.default.createElement(r||y,{ref:T,className:`font-sans antialiased ${p} ${i} ${l?`!${d[l]}`:""} ${a??""}`,...s},n)});M.displayName="Text";if (exports.default) module.exports = exports.default;exports.Text=M;//# sourceMappingURL=Text.cjs.map
+'use strict';var o=require('react');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var o__default=/*#__PURE__*/_interopDefault(o);var H={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},g=e=>{let[n,t]=e.split("-");return n==="heading"?H[t]||"p":n==="label"?"label":"p"},h={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},M=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[r,a]=t.split(":");return `${r}:text-${a}`}return `text-${t}`}).join(" "):"text-body-default",L=o__default.default.forwardRef(({variant:e="body-default",color:n="primary",as:t,className:r,children:a,weight:l,...s},p)=>{let T=M(e),i=n==="inherit"?"text-inherit":`text-text-${n}`,m=o__default.default.useMemo(()=>{let y=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return g(y)},[e]);return o__default.default.createElement(t||m,{ref:p,className:`font-sans antialiased ${T} ${i} ${l?`!${h[l]}`:""} ${r??""}`,...s},a)});L.displayName="Text";if (exports.default) module.exports = exports.default;exports.Text=L;//# sourceMappingURL=Text.cjs.map
 //# sourceMappingURL=Text.cjs.map