@deckai/deck-ui 0.0.13 → 0.0.14

package/dist/components/AddWorkCard.cjs

@@ -0,0 +1,117 @@
+'use strict';var d=require('react'),icons=require('@deckai/icons'),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 d__namespace=/*#__PURE__*/_interopNamespace(d);function c(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var x={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB",disabled:"#888888"},E={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},R=e=>{if(!e)return {width:"24px",height:"24px"};let o=Array.isArray(e)?e:[e],t={},s;return o.forEach(n=>{if(typeof n=="number")s=`${n}px`;else {let[i,r]=n.split(":"),a=parseInt(r,10);t[`@media (min-width: ${E[i]})`]=`${a}px`;}}),{width:s||"24px",height:s||"24px",...Object.entries(t).reduce((n,[i,r])=>({...n,[i]:{width:r,height:r}}),{})}},g=d__namespace.default.forwardRef(({name:e,size:o=24,color:t="primary",title:s,className:n,style:i={},...r},a)=>{let m=icons.IconMap[e],u=R(o);return d__namespace.default.createElement("div",{className:c("flex justify-center items-center",n),style:{...u,"--icon-stroke":x[t],...i}},d__namespace.default.createElement(m,{ref:a,"aria-hidden":!s,"aria-label":s,stroke:e.includes("filled")?void 0:x[t],...r}))});g.displayName="Icon";var w={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},v=e=>{let[o,t]=e.split("-");return o==="heading"?w[t]||"p":o==="label"?"label":"p"},A={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},$=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[s,n]=t.split(":");return `${s}:text-${n}`}return `text-${t}`}).join(" "):"text-body-default",l=d__namespace.default.forwardRef(({variant:e="body-default",color:o="primary",as:t,className:s,children:n,weight:i,...r},a)=>{let m=$(e),u=o==="inherit"?"text-inherit":`text-text-${o}`,k=d__namespace.default.useMemo(()=>{let M=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return v(M)},[e]);return d__namespace.default.createElement(t||k,{ref:a,className:`font-sans antialiased ${m} ${u} ${i?`!${A[i]}`:""} ${s??""}`,...r},n)});l.displayName="Text";var T="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var S={black:"bg-text-text text-white",accent:"bg-primary-100 text-white",secondary:"bg-secondary-100 text-secondary"},B={black:"border border-text text-text",accent:"border border-primary-100 text-primary-100",secondary:"border border-text-secondary text-secondary"},f=d__namespace.forwardRef(({className:e,variant:o="filled",color:t="black",isLoading:s=!1,children:n,disabled:i,...r},a)=>d__namespace.createElement("button",{ref:a,className:c(`
+          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`,T,o==="filled"?S[t]:B[t],e),disabled:i||s,type:"button",...r},typeof n=="string"?d__namespace.createElement(l,{variant:["sm:body-default-bold","body-xxs-semibold"],color:"inherit"},n):n));f.displayName="Button";var b=({icon:e,size:o=40,className:t})=>{let s=d.useMemo(()=>{let r=new DOMParser().parseFromString(e,"image/svg+xml").querySelector("svg");if(!r)return null;r.setAttribute("width","100%"),r.setAttribute("height","100%"),r.setAttribute("preserveAspectRatio","xMidYMid meet");let a=r.getAttribute("viewBox")||"0 0 40 40";return r.setAttribute("viewBox",a),r.outerHTML},[e]);return s?d__namespace.default.createElement("div",{style:{width:o,height:o,display:"flex",alignItems:"center",justifyContent:"center"},className:t,dangerouslySetInnerHTML:{__html:s}}):null};b.displayName="IconRenderer";var ae=({onClick:e,backgroundImage:o=j})=>d__namespace.default.createElement("div",{className:"bg-secondary-500 relative flex flex-col gap-2 items-center justify-center sm:w-[227px] sm:h-[371px] w-[148px] h-[234px] rounded-2xl overflow-hidden ",style:{backgroundImage:` url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg' shape-rendering='crispEdges'%3e%3crect width='100%25' height='100%25' fill='none' rx='14' ry='14' stroke='%23089CCB' stroke-width='6' stroke-dasharray='48%2c 48' stroke-dashoffset='32' stroke-linecap='square'/%3e%3c/svg%3e")`}},d__namespace.default.createElement(l,{variant:"body-lg-semibold",className:"text-center"},"Add Work"),d__namespace.default.createElement(f,{color:"accent",variant:"filled",className:"!px-3 !py-3",onClick:e},d__namespace.default.createElement(g,{name:"add",color:"white"})),d__namespace.default.createElement(b,{icon:o,size:140,className:"absolute bottom-5 right-5"})),j=`
+  <svg
+    width="142"
+    height="125"
+    viewBox="0 0 142 125"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M71.5547 102.032C79.4023 93.5129 89.9353 89.6444 98.7438 92.479C100.796 93.1396 103.961 94.5522 107.135 97.8417C116.801 92.7348 126.513 93.1456 131.303 98.177C135.066 102.129 136.181 109.339 133.485 113.093C129.692 118.375 116.094 119.974 71.5547 102.032Z"
+      stroke="#666666"
+      stroke-width="0.133287"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M6.55596 119.585C6.55596 119.585 115.773 130.642 132.466 119.59C149.158 108.539 95.3777 95.2427 74.0623 97.4889C52.747 99.7351 43.7256 109.377 28.8999 106.428C14.0743 103.478 -9.92027 116.734 6.55596 119.585Z"
+      fill="white"
+      stroke="#666666"
+      stroke-width="0.133287"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M139.779 6.88037L141 1.7254C141 1.7254 137.087 -1.03175 136.46 1.7254L135.914 4.12255C136.913 4.86995 137.925 5.55389 139.02 6.33001C139.269 6.52704 139.522 6.70938 139.779 6.88037Z"
+      fill="#080808"
+      stroke="#666666"
+      stroke-width="0.0666433"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M136.899 9.35082C137.687 9.62333 138.432 9.67075 139.145 9.56188L139.78 6.8802C139.521 6.70778 139.268 6.52441 139.022 6.3305C137.926 5.55372 136.914 4.87044 135.916 4.12305L135.02 8.06041C135.523 8.66287 136.186 9.10636 136.899 9.35082Z"
+      fill="white"
+      stroke="#666666"
+      stroke-width="0.133287"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M136.897 9.35096C136.184 9.1065 135.521 8.66301 135.017 8.06055L116.969 87.3661L120.065 90.1139L139.142 9.56269C138.43 9.67022 137.686 9.62347 136.897 9.35096Z"
+      fill="white"
+      stroke="#666666"
+      stroke-width="0.133287"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M116.087 88.6451C116.087 88.6451 111.491 93.6852 112.668 101.034C113.846 108.382 111.281 109.928 111.449 110.63C111.617 111.332 117.413 108.826 118.824 104.017C120.235 99.2082 121.706 92.9826 120.235 88.9103C117.628 88.1141 116.087 88.6451 116.087 88.6451Z"
+      fill="#080808"
+      stroke="#666666"
+      stroke-width="0.0666433"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M116.976 86.4168C115.891 86.2111 115.454 88.5969 115.751 89.2695C116.047 89.9421 120.478 91.1463 121.127 89.8539C121.774 88.5615 121.493 88.6958 121.214 88.0619C120.935 87.4281 118.061 86.6225 116.976 86.4168Z"
+      fill="white"
+      stroke="#666666"
+      stroke-width="0.133287"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M97.9297 64.584H107.884V74.3202H97.9297V64.584Z"
+      fill="#080808"
+      stroke="#666666"
+      stroke-width="0.0666433"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M101.461 58.9668H112.104V69.4517H101.461V58.9668Z"
+      fill="white"
+      stroke="#666666"
+      stroke-width="0.133287"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M135.629 91.1991C137.878 91.1991 139.7 89.1695 139.7 86.666C139.7 84.1624 137.878 82.1328 135.629 82.1328C133.381 82.1328 131.559 84.1624 131.559 86.666C131.559 89.1695 133.381 91.1991 135.629 91.1991Z"
+      fill="#089CCB"
+      stroke="#080808"
+      stroke-width="0.133287"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M105.77 50.6441C107.46 50.6441 108.83 49.1188 108.83 47.2371C108.83 45.3555 107.46 43.8301 105.77 43.8301C104.081 43.8301 102.711 45.3555 102.711 47.2371C102.711 49.1188 104.081 50.6441 105.77 50.6441Z"
+      fill="#080808"
+      stroke="#666666"
+      stroke-width="0.0666433"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+`;if (exports.default) module.exports = exports.default;exports.AddWorkCard=ae;//# sourceMappingURL=AddWorkCard.cjs.map
+//# sourceMappingURL=AddWorkCard.cjs.map

package/dist/components/AddWorkCard.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../src/components/Button.tsx","../../src/utils/tailwind.ts","../../src/components/IconRenderer.tsx","../../src/components/AddWorkCard.tsx"],"names":["cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","children","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","focusRingStyles","filled","outlined","Button","p","isLoading","disabled","IconRenderer","icon","sanitizedSvg","useMemo","svg","viewBox","AddWorkCard","onClick","backgroundImage","defaultBackgroundImage"],"mappings":"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","file":"AddWorkCard.cjs","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 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 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 * 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 { 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, { useMemo } from \"react\";\n\nexport type IconRendererProps = {\n  icon: string;\n  size?: number;\n  className?: string;\n};\n\nexport const IconRenderer = ({\n  icon,\n  size = 40,\n  className\n}: IconRendererProps) => {\n  const sanitizedSvg = useMemo(() => {\n    const parser = new DOMParser();\n    const doc = parser.parseFromString(icon, \"image/svg+xml\");\n    const svg = doc.querySelector(\"svg\");\n\n    if (!svg) return null;\n\n    // Set size attributes but preserve aspect ratio\n    svg.setAttribute(\"width\", \"100%\");\n    svg.setAttribute(\"height\", \"100%\");\n    svg.setAttribute(\"preserveAspectRatio\", \"xMidYMid meet\");\n\n    // Get the original viewBox or use the default\n    const viewBox = svg.getAttribute(\"viewBox\") || \"0 0 40 40\";\n    svg.setAttribute(\"viewBox\", viewBox);\n\n    return svg.outerHTML;\n  }, [icon]);\n\n  if (!sanitizedSvg) return null;\n\n  return (\n    <div\n      style={{\n        width: size,\n        height: size,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\"\n      }}\n      className={className}\n      dangerouslySetInnerHTML={{ __html: sanitizedSvg }}\n    />\n  );\n};\n\nIconRenderer.displayName = \"IconRenderer\";\n","import React from \"react\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\nimport { Button } from \"./Button\";\nimport { IconRenderer } from \"./IconRenderer\";\n\nexport type AddWorkCardProps = {\n  onClick: () => void;\n  backgroundImage?: string;\n};\n\nexport const AddWorkCard = ({\n  onClick,\n  backgroundImage = defaultBackgroundImage\n}: AddWorkCardProps) => {\n  return (\n    <div\n      className={`bg-secondary-500 relative flex flex-col gap-2 items-center justify-center sm:w-[227px] sm:h-[371px] w-[148px] h-[234px] rounded-2xl overflow-hidden `}\n      style={{\n        backgroundImage: ` url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg' shape-rendering='crispEdges'%3e%3crect width='100%25' height='100%25' fill='none' rx='14' ry='14' stroke='%23089CCB' stroke-width='6' stroke-dasharray='48%2c 48' stroke-dashoffset='32' stroke-linecap='square'/%3e%3c/svg%3e\")`\n      }}\n    >\n      <Text variant=\"body-lg-semibold\" className=\"text-center\">\n        Add Work\n      </Text>\n\n      <Button\n        color=\"accent\"\n        variant=\"filled\"\n        className=\"!px-3 !py-3\"\n        onClick={onClick}\n      >\n        <Icon name=\"add\" color=\"white\" />\n      </Button>\n      <IconRenderer\n        icon={backgroundImage}\n        size={140}\n        className=\"absolute bottom-5 right-5\"\n      />\n    </div>\n  );\n};\n\nconst defaultBackgroundImage = `\n  <svg\n    width=\"142\"\n    height=\"125\"\n    viewBox=\"0 0 142 125\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M71.5547 102.032C79.4023 93.5129 89.9353 89.6444 98.7438 92.479C100.796 93.1396 103.961 94.5522 107.135 97.8417C116.801 92.7348 126.513 93.1456 131.303 98.177C135.066 102.129 136.181 109.339 133.485 113.093C129.692 118.375 116.094 119.974 71.5547 102.032Z\"\n      stroke=\"#666666\"\n      stroke-width=\"0.133287\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M6.55596 119.585C6.55596 119.585 115.773 130.642 132.466 119.59C149.158 108.539 95.3777 95.2427 74.0623 97.4889C52.747 99.7351 43.7256 109.377 28.8999 106.428C14.0743 103.478 -9.92027 116.734 6.55596 119.585Z\"\n      fill=\"white\"\n      stroke=\"#666666\"\n      stroke-width=\"0.133287\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M139.779 6.88037L141 1.7254C141 1.7254 137.087 -1.03175 136.46 1.7254L135.914 4.12255C136.913 4.86995 137.925 5.55389 139.02 6.33001C139.269 6.52704 139.522 6.70938 139.779 6.88037Z\"\n      fill=\"#080808\"\n      stroke=\"#666666\"\n      stroke-width=\"0.0666433\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M136.899 9.35082C137.687 9.62333 138.432 9.67075 139.145 9.56188L139.78 6.8802C139.521 6.70778 139.268 6.52441 139.022 6.3305C137.926 5.55372 136.914 4.87044 135.916 4.12305L135.02 8.06041C135.523 8.66287 136.186 9.10636 136.899 9.35082Z\"\n      fill=\"white\"\n      stroke=\"#666666\"\n      stroke-width=\"0.133287\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M136.897 9.35096C136.184 9.1065 135.521 8.66301 135.017 8.06055L116.969 87.3661L120.065 90.1139L139.142 9.56269C138.43 9.67022 137.686 9.62347 136.897 9.35096Z\"\n      fill=\"white\"\n      stroke=\"#666666\"\n      stroke-width=\"0.133287\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M116.087 88.6451C116.087 88.6451 111.491 93.6852 112.668 101.034C113.846 108.382 111.281 109.928 111.449 110.63C111.617 111.332 117.413 108.826 118.824 104.017C120.235 99.2082 121.706 92.9826 120.235 88.9103C117.628 88.1141 116.087 88.6451 116.087 88.6451Z\"\n      fill=\"#080808\"\n      stroke=\"#666666\"\n      stroke-width=\"0.0666433\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M116.976 86.4168C115.891 86.2111 115.454 88.5969 115.751 89.2695C116.047 89.9421 120.478 91.1463 121.127 89.8539C121.774 88.5615 121.493 88.6958 121.214 88.0619C120.935 87.4281 118.061 86.6225 116.976 86.4168Z\"\n      fill=\"white\"\n      stroke=\"#666666\"\n      stroke-width=\"0.133287\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M97.9297 64.584H107.884V74.3202H97.9297V64.584Z\"\n      fill=\"#080808\"\n      stroke=\"#666666\"\n      stroke-width=\"0.0666433\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M101.461 58.9668H112.104V69.4517H101.461V58.9668Z\"\n      fill=\"white\"\n      stroke=\"#666666\"\n      stroke-width=\"0.133287\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M135.629 91.1991C137.878 91.1991 139.7 89.1695 139.7 86.666C139.7 84.1624 137.878 82.1328 135.629 82.1328C133.381 82.1328 131.559 84.1624 131.559 86.666C131.559 89.1695 133.381 91.1991 135.629 91.1991Z\"\n      fill=\"#089CCB\"\n      stroke=\"#080808\"\n      stroke-width=\"0.133287\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M105.77 50.6441C107.46 50.6441 108.83 49.1188 108.83 47.2371C108.83 45.3555 107.46 43.8301 105.77 43.8301C104.081 43.8301 102.711 45.3555 102.711 47.2371C102.711 49.1188 104.081 50.6441 105.77 50.6441Z\"\n      fill=\"#080808\"\n      stroke=\"#666666\"\n      stroke-width=\"0.0666433\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n`;\n"]}

package/dist/components/AddWorkCard.js

@@ -0,0 +1,117 @@
+import*as d from'react';import d__default,{useMemo}from'react';import {IconMap}from'@deckai/icons';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';function c(...e){return twMerge(clsx(e))}var x={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB",disabled:"#888888"},E={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},R=e=>{if(!e)return {width:"24px",height:"24px"};let o=Array.isArray(e)?e:[e],t={},s;return o.forEach(n=>{if(typeof n=="number")s=`${n}px`;else {let[i,r]=n.split(":"),a=parseInt(r,10);t[`@media (min-width: ${E[i]})`]=`${a}px`;}}),{width:s||"24px",height:s||"24px",...Object.entries(t).reduce((n,[i,r])=>({...n,[i]:{width:r,height:r}}),{})}},g=d__default.forwardRef(({name:e,size:o=24,color:t="primary",title:s,className:n,style:i={},...r},a)=>{let m=IconMap[e],u=R(o);return d__default.createElement("div",{className:c("flex justify-center items-center",n),style:{...u,"--icon-stroke":x[t],...i}},d__default.createElement(m,{ref:a,"aria-hidden":!s,"aria-label":s,stroke:e.includes("filled")?void 0:x[t],...r}))});g.displayName="Icon";var w={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},v=e=>{let[o,t]=e.split("-");return o==="heading"?w[t]||"p":o==="label"?"label":"p"},A={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},$=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[s,n]=t.split(":");return `${s}:text-${n}`}return `text-${t}`}).join(" "):"text-body-default",l=d__default.forwardRef(({variant:e="body-default",color:o="primary",as:t,className:s,children:n,weight:i,...r},a)=>{let m=$(e),u=o==="inherit"?"text-inherit":`text-text-${o}`,k=d__default.useMemo(()=>{let M=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return v(M)},[e]);return d__default.createElement(t||k,{ref:a,className:`font-sans antialiased ${m} ${u} ${i?`!${A[i]}`:""} ${s??""}`,...r},n)});l.displayName="Text";var T="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var S={black:"bg-text-text text-white",accent:"bg-primary-100 text-white",secondary:"bg-secondary-100 text-secondary"},B={black:"border border-text text-text",accent:"border border-primary-100 text-primary-100",secondary:"border border-text-secondary text-secondary"},f=d.forwardRef(({className:e,variant:o="filled",color:t="black",isLoading:s=!1,children:n,disabled:i,...r},a)=>d.createElement("button",{ref:a,className:c(`
+          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`,T,o==="filled"?S[t]:B[t],e),disabled:i||s,type:"button",...r},typeof n=="string"?d.createElement(l,{variant:["sm:body-default-bold","body-xxs-semibold"],color:"inherit"},n):n));f.displayName="Button";var b=({icon:e,size:o=40,className:t})=>{let s=useMemo(()=>{let r=new DOMParser().parseFromString(e,"image/svg+xml").querySelector("svg");if(!r)return null;r.setAttribute("width","100%"),r.setAttribute("height","100%"),r.setAttribute("preserveAspectRatio","xMidYMid meet");let a=r.getAttribute("viewBox")||"0 0 40 40";return r.setAttribute("viewBox",a),r.outerHTML},[e]);return s?d__default.createElement("div",{style:{width:o,height:o,display:"flex",alignItems:"center",justifyContent:"center"},className:t,dangerouslySetInnerHTML:{__html:s}}):null};b.displayName="IconRenderer";var ae=({onClick:e,backgroundImage:o=j})=>d__default.createElement("div",{className:"bg-secondary-500 relative flex flex-col gap-2 items-center justify-center sm:w-[227px] sm:h-[371px] w-[148px] h-[234px] rounded-2xl overflow-hidden ",style:{backgroundImage:` url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg' shape-rendering='crispEdges'%3e%3crect width='100%25' height='100%25' fill='none' rx='14' ry='14' stroke='%23089CCB' stroke-width='6' stroke-dasharray='48%2c 48' stroke-dashoffset='32' stroke-linecap='square'/%3e%3c/svg%3e")`}},d__default.createElement(l,{variant:"body-lg-semibold",className:"text-center"},"Add Work"),d__default.createElement(f,{color:"accent",variant:"filled",className:"!px-3 !py-3",onClick:e},d__default.createElement(g,{name:"add",color:"white"})),d__default.createElement(b,{icon:o,size:140,className:"absolute bottom-5 right-5"})),j=`
+  <svg
+    width="142"
+    height="125"
+    viewBox="0 0 142 125"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M71.5547 102.032C79.4023 93.5129 89.9353 89.6444 98.7438 92.479C100.796 93.1396 103.961 94.5522 107.135 97.8417C116.801 92.7348 126.513 93.1456 131.303 98.177C135.066 102.129 136.181 109.339 133.485 113.093C129.692 118.375 116.094 119.974 71.5547 102.032Z"
+      stroke="#666666"
+      stroke-width="0.133287"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M6.55596 119.585C6.55596 119.585 115.773 130.642 132.466 119.59C149.158 108.539 95.3777 95.2427 74.0623 97.4889C52.747 99.7351 43.7256 109.377 28.8999 106.428C14.0743 103.478 -9.92027 116.734 6.55596 119.585Z"
+      fill="white"
+      stroke="#666666"
+      stroke-width="0.133287"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M139.779 6.88037L141 1.7254C141 1.7254 137.087 -1.03175 136.46 1.7254L135.914 4.12255C136.913 4.86995 137.925 5.55389 139.02 6.33001C139.269 6.52704 139.522 6.70938 139.779 6.88037Z"
+      fill="#080808"
+      stroke="#666666"
+      stroke-width="0.0666433"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M136.899 9.35082C137.687 9.62333 138.432 9.67075 139.145 9.56188L139.78 6.8802C139.521 6.70778 139.268 6.52441 139.022 6.3305C137.926 5.55372 136.914 4.87044 135.916 4.12305L135.02 8.06041C135.523 8.66287 136.186 9.10636 136.899 9.35082Z"
+      fill="white"
+      stroke="#666666"
+      stroke-width="0.133287"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M136.897 9.35096C136.184 9.1065 135.521 8.66301 135.017 8.06055L116.969 87.3661L120.065 90.1139L139.142 9.56269C138.43 9.67022 137.686 9.62347 136.897 9.35096Z"
+      fill="white"
+      stroke="#666666"
+      stroke-width="0.133287"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M116.087 88.6451C116.087 88.6451 111.491 93.6852 112.668 101.034C113.846 108.382 111.281 109.928 111.449 110.63C111.617 111.332 117.413 108.826 118.824 104.017C120.235 99.2082 121.706 92.9826 120.235 88.9103C117.628 88.1141 116.087 88.6451 116.087 88.6451Z"
+      fill="#080808"
+      stroke="#666666"
+      stroke-width="0.0666433"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M116.976 86.4168C115.891 86.2111 115.454 88.5969 115.751 89.2695C116.047 89.9421 120.478 91.1463 121.127 89.8539C121.774 88.5615 121.493 88.6958 121.214 88.0619C120.935 87.4281 118.061 86.6225 116.976 86.4168Z"
+      fill="white"
+      stroke="#666666"
+      stroke-width="0.133287"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M97.9297 64.584H107.884V74.3202H97.9297V64.584Z"
+      fill="#080808"
+      stroke="#666666"
+      stroke-width="0.0666433"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M101.461 58.9668H112.104V69.4517H101.461V58.9668Z"
+      fill="white"
+      stroke="#666666"
+      stroke-width="0.133287"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M135.629 91.1991C137.878 91.1991 139.7 89.1695 139.7 86.666C139.7 84.1624 137.878 82.1328 135.629 82.1328C133.381 82.1328 131.559 84.1624 131.559 86.666C131.559 89.1695 133.381 91.1991 135.629 91.1991Z"
+      fill="#089CCB"
+      stroke="#080808"
+      stroke-width="0.133287"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M105.77 50.6441C107.46 50.6441 108.83 49.1188 108.83 47.2371C108.83 45.3555 107.46 43.8301 105.77 43.8301C104.081 43.8301 102.711 45.3555 102.711 47.2371C102.711 49.1188 104.081 50.6441 105.77 50.6441Z"
+      fill="#080808"
+      stroke="#666666"
+      stroke-width="0.0666433"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+`;if (exports.default) module.exports = exports.default;export{ae as AddWorkCard};//# sourceMappingURL=AddWorkCard.js.map
+//# sourceMappingURL=AddWorkCard.js.map

package/dist/components/AddWorkCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../src/components/Button.tsx","../../src/utils/tailwind.ts","../../src/components/IconRenderer.tsx","../../src/components/AddWorkCard.tsx"],"names":["cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","children","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","focusRingStyles","filled","outlined","Button","p","isLoading","disabled","IconRenderer","icon","sanitizedSvg","useMemo","svg","viewBox","AddWorkCard","onClick","backgroundImage","defaultBackgroundImage"],"mappings":"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","file":"AddWorkCard.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 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 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 * 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 { 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, { useMemo } from \"react\";\n\nexport type IconRendererProps = {\n  icon: string;\n  size?: number;\n  className?: string;\n};\n\nexport const IconRenderer = ({\n  icon,\n  size = 40,\n  className\n}: IconRendererProps) => {\n  const sanitizedSvg = useMemo(() => {\n    const parser = new DOMParser();\n    const doc = parser.parseFromString(icon, \"image/svg+xml\");\n    const svg = doc.querySelector(\"svg\");\n\n    if (!svg) return null;\n\n    // Set size attributes but preserve aspect ratio\n    svg.setAttribute(\"width\", \"100%\");\n    svg.setAttribute(\"height\", \"100%\");\n    svg.setAttribute(\"preserveAspectRatio\", \"xMidYMid meet\");\n\n    // Get the original viewBox or use the default\n    const viewBox = svg.getAttribute(\"viewBox\") || \"0 0 40 40\";\n    svg.setAttribute(\"viewBox\", viewBox);\n\n    return svg.outerHTML;\n  }, [icon]);\n\n  if (!sanitizedSvg) return null;\n\n  return (\n    <div\n      style={{\n        width: size,\n        height: size,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\"\n      }}\n      className={className}\n      dangerouslySetInnerHTML={{ __html: sanitizedSvg }}\n    />\n  );\n};\n\nIconRenderer.displayName = \"IconRenderer\";\n","import React from \"react\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\nimport { Button } from \"./Button\";\nimport { IconRenderer } from \"./IconRenderer\";\n\nexport type AddWorkCardProps = {\n  onClick: () => void;\n  backgroundImage?: string;\n};\n\nexport const AddWorkCard = ({\n  onClick,\n  backgroundImage = defaultBackgroundImage\n}: AddWorkCardProps) => {\n  return (\n    <div\n      className={`bg-secondary-500 relative flex flex-col gap-2 items-center justify-center sm:w-[227px] sm:h-[371px] w-[148px] h-[234px] rounded-2xl overflow-hidden `}\n      style={{\n        backgroundImage: ` url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg' shape-rendering='crispEdges'%3e%3crect width='100%25' height='100%25' fill='none' rx='14' ry='14' stroke='%23089CCB' stroke-width='6' stroke-dasharray='48%2c 48' stroke-dashoffset='32' stroke-linecap='square'/%3e%3c/svg%3e\")`\n      }}\n    >\n      <Text variant=\"body-lg-semibold\" className=\"text-center\">\n        Add Work\n      </Text>\n\n      <Button\n        color=\"accent\"\n        variant=\"filled\"\n        className=\"!px-3 !py-3\"\n        onClick={onClick}\n      >\n        <Icon name=\"add\" color=\"white\" />\n      </Button>\n      <IconRenderer\n        icon={backgroundImage}\n        size={140}\n        className=\"absolute bottom-5 right-5\"\n      />\n    </div>\n  );\n};\n\nconst defaultBackgroundImage = `\n  <svg\n    width=\"142\"\n    height=\"125\"\n    viewBox=\"0 0 142 125\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M71.5547 102.032C79.4023 93.5129 89.9353 89.6444 98.7438 92.479C100.796 93.1396 103.961 94.5522 107.135 97.8417C116.801 92.7348 126.513 93.1456 131.303 98.177C135.066 102.129 136.181 109.339 133.485 113.093C129.692 118.375 116.094 119.974 71.5547 102.032Z\"\n      stroke=\"#666666\"\n      stroke-width=\"0.133287\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M6.55596 119.585C6.55596 119.585 115.773 130.642 132.466 119.59C149.158 108.539 95.3777 95.2427 74.0623 97.4889C52.747 99.7351 43.7256 109.377 28.8999 106.428C14.0743 103.478 -9.92027 116.734 6.55596 119.585Z\"\n      fill=\"white\"\n      stroke=\"#666666\"\n      stroke-width=\"0.133287\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M139.779 6.88037L141 1.7254C141 1.7254 137.087 -1.03175 136.46 1.7254L135.914 4.12255C136.913 4.86995 137.925 5.55389 139.02 6.33001C139.269 6.52704 139.522 6.70938 139.779 6.88037Z\"\n      fill=\"#080808\"\n      stroke=\"#666666\"\n      stroke-width=\"0.0666433\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M136.899 9.35082C137.687 9.62333 138.432 9.67075 139.145 9.56188L139.78 6.8802C139.521 6.70778 139.268 6.52441 139.022 6.3305C137.926 5.55372 136.914 4.87044 135.916 4.12305L135.02 8.06041C135.523 8.66287 136.186 9.10636 136.899 9.35082Z\"\n      fill=\"white\"\n      stroke=\"#666666\"\n      stroke-width=\"0.133287\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M136.897 9.35096C136.184 9.1065 135.521 8.66301 135.017 8.06055L116.969 87.3661L120.065 90.1139L139.142 9.56269C138.43 9.67022 137.686 9.62347 136.897 9.35096Z\"\n      fill=\"white\"\n      stroke=\"#666666\"\n      stroke-width=\"0.133287\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M116.087 88.6451C116.087 88.6451 111.491 93.6852 112.668 101.034C113.846 108.382 111.281 109.928 111.449 110.63C111.617 111.332 117.413 108.826 118.824 104.017C120.235 99.2082 121.706 92.9826 120.235 88.9103C117.628 88.1141 116.087 88.6451 116.087 88.6451Z\"\n      fill=\"#080808\"\n      stroke=\"#666666\"\n      stroke-width=\"0.0666433\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M116.976 86.4168C115.891 86.2111 115.454 88.5969 115.751 89.2695C116.047 89.9421 120.478 91.1463 121.127 89.8539C121.774 88.5615 121.493 88.6958 121.214 88.0619C120.935 87.4281 118.061 86.6225 116.976 86.4168Z\"\n      fill=\"white\"\n      stroke=\"#666666\"\n      stroke-width=\"0.133287\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M97.9297 64.584H107.884V74.3202H97.9297V64.584Z\"\n      fill=\"#080808\"\n      stroke=\"#666666\"\n      stroke-width=\"0.0666433\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M101.461 58.9668H112.104V69.4517H101.461V58.9668Z\"\n      fill=\"white\"\n      stroke=\"#666666\"\n      stroke-width=\"0.133287\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M135.629 91.1991C137.878 91.1991 139.7 89.1695 139.7 86.666C139.7 84.1624 137.878 82.1328 135.629 82.1328C133.381 82.1328 131.559 84.1624 131.559 86.666C131.559 89.1695 133.381 91.1991 135.629 91.1991Z\"\n      fill=\"#089CCB\"\n      stroke=\"#080808\"\n      stroke-width=\"0.133287\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M105.77 50.6441C107.46 50.6441 108.83 49.1188 108.83 47.2371C108.83 45.3555 107.46 43.8301 105.77 43.8301C104.081 43.8301 102.711 45.3555 102.711 47.2371C102.711 49.1188 104.081 50.6441 105.77 50.6441Z\"\n      fill=\"#080808\"\n      stroke=\"#666666\"\n      stroke-width=\"0.0666433\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n`;\n"]}

package/dist/components/Avatar.cjs

@@ -1,2 +1,2 @@
-'use strict';var a=require('react');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var a__default=/*#__PURE__*/_interopDefault(a);var p="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var c=({children:t,type:n="button",className:r,disabled:s,...e})=>a__default.default.createElement("button",{type:n,disabled:s,className:`appearance-none hover:opacity-80 transition-all active:scale-95 ${p} ${r} ${s?"opacity-50 cursor-not-allowed":""}`,...e},t);var f={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},b=t=>{if(!t)return {width:"48px",height:"48px"};let n=Array.isArray(t)?t:[t],r={},s;return n.forEach(e=>{if(typeof e=="number")s=`${e}px`;else {let[o,i]=e.split(":"),l=parseInt(i,10);r[`@media (minWidth: ${f[o]})`]=`${l}px`;}}),{width:s||"48px",height:s||"48px",...Object.entries(r).reduce((e,[o,i])=>({...e,[o]:{width:i,height:i}}),{})}},v=({src:t,size:n=48,onClick:r,...s})=>{let e=b(n),o=t?a__default.default.createElement("img",{src:t,alt:"avatar",className:"rounded-full",style:e,...s}):a__default.default.createElement("div",{style:e,className:"rounded-full bg-gray-200"});return r?a__default.default.createElement(c,{onClick:r},o):o};if (exports.default) module.exports = exports.default;exports.Avatar=v;//# sourceMappingURL=Avatar.cjs.map
+'use strict';var p=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var p__default=/*#__PURE__*/_interopDefault(p);var c="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 a=p__default.default.forwardRef(({children:e,type:n="button",className:o,disabled:s,...t},r)=>p__default.default.createElement("button",{ref:r,type:n,disabled:s,className:l("appearance-none hover:opacity-80 transition-all active:scale-95",c,s&&"opacity-50 cursor-not-allowed",o),...t},e));a.displayName="Pressable";var m={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},x=e=>{if(!e)return {width:"48px",height:"48px"};let n=Array.isArray(e)?e:[e],o={},s;return n.forEach(t=>{if(typeof t=="number")s=`${t}px`;else {let[r,i]=t.split(":"),u=parseInt(i,10);o[`@media (minWidth: ${m[r]})`]=`${u}px`;}}),{width:s||"48px",height:s||"48px",...Object.entries(o).reduce((t,[r,i])=>({...t,[r]:{width:i,height:i}}),{})}},A=({src:e,size:n=48,onClick:o,...s})=>{let t=x(n),r=e?p__default.default.createElement("img",{src:e,alt:"avatar",className:"rounded-full",style:t,...s}):p__default.default.createElement("div",{style:t,className:"rounded-full bg-gray-200"});return o?p__default.default.createElement(a,{onClick:o,...s},r):r};if (exports.default) module.exports = exports.default;exports.Avatar=A;//# sourceMappingURL=Avatar.cjs.map
 //# sourceMappingURL=Avatar.cjs.map

package/dist/components/Avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/components/Avatar.tsx"],"names":["focusRingStyles","Pressable","children","type","className","disabled","props","React","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Avatar","src","onClick","sizeStyles","content"],"mappings":"oJAmEO,IAAMA,CAAAA,CACX,qGC/DK,CAAA,IAAMC,CAAsC,CAAA,CAAC,CAClD,QAAAC,CAAAA,CAAAA,CACA,IAAAC,CAAAA,CAAAA,CAAO,QACP,CAAA,SAAA,CAAAC,EACA,QAAAC,CAAAA,CAAAA,CACA,GAAGC,CACL,CACEC,GAAAA,kBAAAA,CAAA,cAAC,QAEC,CAAA,CAAA,IAAA,CAAMJ,CACN,CAAA,QAAA,CAAUE,CACV,CAAA,SAAA,CAAW,mEAAmEL,CAAe,CAAA,CAAA,EAAII,CAAS,CAAA,CAAA,EAAIC,CAAW,CAAA,+BAAA,CAAkC,EAAE,CAC5J,CAAA,CAAA,GAAGC,CAEHJ,CAAAA,CAAAA,CACH,CCdF,CAAA,IAAMM,EAA6C,CACjD,EAAA,CAAI,OACJ,CAAA,EAAA,CAAI,OACJ,CAAA,EAAA,CAAI,SACJ,EAAI,CAAA,QAAA,CACJ,MAAO,QACT,CAAA,CAOMC,EACJC,CACwB,EAAA,CACxB,GAAI,CAACA,CAAO,CAAA,OAAO,CAAE,KAAO,CAAA,MAAA,CAAQ,MAAQ,CAAA,MAAO,CAEnD,CAAA,IAAMC,EAAY,KAAM,CAAA,OAAA,CAAQD,CAAK,CAAA,CAAIA,CAAQ,CAAA,CAACA,CAAK,CACjDE,CAAAA,CAAAA,CAAuC,EAAC,CAC1CC,CAGJ,CAAA,OAAAF,EAAU,OAASG,CAAAA,CAAAA,EAAS,CAC1B,GAAI,OAAOA,CAAAA,EAAS,SAClBD,CAAW,CAAA,CAAA,EAAGC,CAAI,CAAA,EAAA,CAAA,CAAA,KACb,CACL,GAAM,CAACC,CAAYC,CAAAA,CAAQ,CAAIF,CAAAA,CAAAA,CAAK,KAAM,CAAA,GAAG,EACvCG,CAAQ,CAAA,QAAA,CAASD,EAAU,EAAE,CAAA,CACnCJ,EAAa,CAAqBJ,kBAAAA,EAAAA,CAAAA,CAAeO,CAAU,CAAC,CAAG,CAAA,CAAA,CAAA,CAC7D,GAAGE,CAAK,CAAA,EAAA,EACZ,CACF,CAAC,CAGM,CAAA,CACL,MAAOJ,CAAY,EAAA,MAAA,CACnB,MAAQA,CAAAA,CAAAA,EAAY,MACpB,CAAA,GAAG,OAAO,OAAQD,CAAAA,CAAY,CAAE,CAAA,MAAA,CAC9B,CAACM,CAAAA,CAAK,CAACC,CAAOL,CAAAA,CAAI,CAAO,IAAA,CACvB,GAAGI,CAAAA,CACH,CAACC,CAAK,EAAG,CACP,KAAA,CAAOL,CACP,CAAA,MAAA,CAAQA,CACV,CACF,CAAA,CAAA,CACA,EACF,CACF,CACF,EAEaM,CAAS,CAAA,CAAC,CAAE,GAAA,CAAAC,CAAK,CAAA,IAAA,CAAAP,EAAO,EAAI,CAAA,OAAA,CAAAQ,CAAS,CAAA,GAAGhB,CAAM,CAAA,GAAmB,CAC5E,IAAMiB,CAAAA,CAAad,CAAaK,CAAAA,CAAI,CAE9BU,CAAAA,CAAAA,CAAUH,EACdd,kBAAA,CAAA,aAAA,CAAC,KACC,CAAA,CAAA,GAAA,CAAKc,CACL,CAAA,GAAA,CAAI,SACJ,SAAU,CAAA,cAAA,CACV,KAAOE,CAAAA,CAAAA,CACN,GAAGjB,CAAAA,CACN,EAEAC,kBAAA,CAAA,aAAA,CAAC,KAAI,CAAA,CAAA,KAAA,CAAOgB,CAAY,CAAA,SAAA,CAAU,2BAA2B,CAG/D,CAAA,OAAOD,CAAUf,CAAAA,kBAAAA,CAAA,aAACN,CAAAA,CAAAA,CAAA,CAAU,OAASqB,CAAAA,CAAAA,CAAAA,CAAUE,CAAQ,CAAA,CAAeA,CACxE","file":"Avatar.cjs","sourcesContent":["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 React from \"react\";\nimport { Pressable } from \"./Pressable\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n  sm: \"640px\",\n  md: \"768px\",\n  lg: \"1024px\",\n  xl: \"1280px\",\n  \"2xl\": \"1536px\"\n};\n\nexport type AvatarProps = {\n  src?: string;\n  size?: ResponsiveSize | ResponsiveSize[];\n} & Pick<React.ComponentProps<typeof Pressable>, \"onClick\">;\n\nconst processSizes = (\n  sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n  if (!sizes) return { width: \"48px\", height: \"48px\" };\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 (minWidth: ${BREAKPOINT_MAP[breakpoint]})`] =\n        `${value}px`;\n    }\n  });\n\n  // Create the style object with the correct structure\n  return {\n    width: baseSize || \"48px\",\n    height: baseSize || \"48px\",\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 Avatar = ({ src, size = 48, onClick, ...props }: AvatarProps) => {\n  const sizeStyles = processSizes(size);\n\n  const content = src ? (\n    <img\n      src={src}\n      alt=\"avatar\"\n      className=\"rounded-full\"\n      style={sizeStyles}\n      {...props}\n    />\n  ) : (\n    <div style={sizeStyles} className=\"rounded-full bg-gray-200\" />\n  );\n\n  return onClick ? <Pressable onClick={onClick}>{content}</Pressable> : content;\n};\n"]}
+{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/utils/index.ts","../../src/components/Pressable.tsx","../../src/components/Avatar.tsx"],"names":["focusRingStyles","cn","inputs","twMerge","clsx","Pressable","React","children","type","className","disabled","props","ref","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Avatar","src","onClick","sizeStyles","content"],"mappings":"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","file":"Avatar.cjs","sourcesContent":["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 from \"react\";\nimport { Pressable } from \"./Pressable\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n  sm: \"640px\",\n  md: \"768px\",\n  lg: \"1024px\",\n  xl: \"1280px\",\n  \"2xl\": \"1536px\"\n};\n\nexport type AvatarProps = {\n  src?: string;\n  size?: ResponsiveSize | ResponsiveSize[];\n} & Pick<React.ComponentProps<typeof Pressable>, \"onClick\">;\n\nconst processSizes = (\n  sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n  if (!sizes) return { width: \"48px\", height: \"48px\" };\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 (minWidth: ${BREAKPOINT_MAP[breakpoint]})`] =\n        `${value}px`;\n    }\n  });\n\n  // Create the style object with the correct structure\n  return {\n    width: baseSize || \"48px\",\n    height: baseSize || \"48px\",\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 Avatar = ({ src, size = 48, onClick, ...props }: AvatarProps) => {\n  const sizeStyles = processSizes(size);\n\n  const content = src ? (\n    <img\n      src={src}\n      alt=\"avatar\"\n      className=\"rounded-full\"\n      style={sizeStyles}\n      {...props}\n    />\n  ) : (\n    <div style={sizeStyles} className=\"rounded-full bg-gray-200\" />\n  );\n\n  return onClick ? (\n    <Pressable onClick={onClick} {...props}>\n      {content}\n    </Pressable>\n  ) : (\n    content\n  );\n};\n"]}

package/dist/components/Avatar.js

@@ -1,2 +1,2 @@
-import a from'react';var p="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var c=({children:t,type:n="button",className:r,disabled:s,...e})=>a.createElement("button",{type:n,disabled:s,className:`appearance-none hover:opacity-80 transition-all active:scale-95 ${p} ${r} ${s?"opacity-50 cursor-not-allowed":""}`,...e},t);var f={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},b=t=>{if(!t)return {width:"48px",height:"48px"};let n=Array.isArray(t)?t:[t],r={},s;return n.forEach(e=>{if(typeof e=="number")s=`${e}px`;else {let[o,i]=e.split(":"),l=parseInt(i,10);r[`@media (minWidth: ${f[o]})`]=`${l}px`;}}),{width:s||"48px",height:s||"48px",...Object.entries(r).reduce((e,[o,i])=>({...e,[o]:{width:i,height:i}}),{})}},v=({src:t,size:n=48,onClick:r,...s})=>{let e=b(n),o=t?a.createElement("img",{src:t,alt:"avatar",className:"rounded-full",style:e,...s}):a.createElement("div",{style:e,className:"rounded-full bg-gray-200"});return r?a.createElement(c,{onClick:r},o):o};if (exports.default) module.exports = exports.default;export{v as Avatar};//# sourceMappingURL=Avatar.js.map
+import p from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';var c="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 a=p.forwardRef(({children:e,type:n="button",className:o,disabled:s,...t},r)=>p.createElement("button",{ref:r,type:n,disabled:s,className:l("appearance-none hover:opacity-80 transition-all active:scale-95",c,s&&"opacity-50 cursor-not-allowed",o),...t},e));a.displayName="Pressable";var m={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},x=e=>{if(!e)return {width:"48px",height:"48px"};let n=Array.isArray(e)?e:[e],o={},s;return n.forEach(t=>{if(typeof t=="number")s=`${t}px`;else {let[r,i]=t.split(":"),u=parseInt(i,10);o[`@media (minWidth: ${m[r]})`]=`${u}px`;}}),{width:s||"48px",height:s||"48px",...Object.entries(o).reduce((t,[r,i])=>({...t,[r]:{width:i,height:i}}),{})}},A=({src:e,size:n=48,onClick:o,...s})=>{let t=x(n),r=e?p.createElement("img",{src:e,alt:"avatar",className:"rounded-full",style:t,...s}):p.createElement("div",{style:t,className:"rounded-full bg-gray-200"});return o?p.createElement(a,{onClick:o,...s},r):r};if (exports.default) module.exports = exports.default;export{A as Avatar};//# sourceMappingURL=Avatar.js.map
 //# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/components/Avatar.tsx"],"names":["focusRingStyles","Pressable","children","type","className","disabled","props","React","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Avatar","src","onClick","sizeStyles","content"],"mappings":"qBAmEO,IAAMA,CAAAA,CACX,qGC/DK,CAAA,IAAMC,CAAsC,CAAA,CAAC,CAClD,QAAAC,CAAAA,CAAAA,CACA,IAAAC,CAAAA,CAAAA,CAAO,QACP,CAAA,SAAA,CAAAC,EACA,QAAAC,CAAAA,CAAAA,CACA,GAAGC,CACL,CACEC,GAAAA,CAAAA,CAAA,cAAC,QAEC,CAAA,CAAA,IAAA,CAAMJ,CACN,CAAA,QAAA,CAAUE,CACV,CAAA,SAAA,CAAW,mEAAmEL,CAAe,CAAA,CAAA,EAAII,CAAS,CAAA,CAAA,EAAIC,CAAW,CAAA,+BAAA,CAAkC,EAAE,CAC5J,CAAA,CAAA,GAAGC,CAEHJ,CAAAA,CAAAA,CACH,CCdF,CAAA,IAAMM,EAA6C,CACjD,EAAA,CAAI,OACJ,CAAA,EAAA,CAAI,OACJ,CAAA,EAAA,CAAI,SACJ,EAAI,CAAA,QAAA,CACJ,MAAO,QACT,CAAA,CAOMC,EACJC,CACwB,EAAA,CACxB,GAAI,CAACA,CAAO,CAAA,OAAO,CAAE,KAAO,CAAA,MAAA,CAAQ,MAAQ,CAAA,MAAO,CAEnD,CAAA,IAAMC,EAAY,KAAM,CAAA,OAAA,CAAQD,CAAK,CAAA,CAAIA,CAAQ,CAAA,CAACA,CAAK,CACjDE,CAAAA,CAAAA,CAAuC,EAAC,CAC1CC,CAGJ,CAAA,OAAAF,EAAU,OAASG,CAAAA,CAAAA,EAAS,CAC1B,GAAI,OAAOA,CAAAA,EAAS,SAClBD,CAAW,CAAA,CAAA,EAAGC,CAAI,CAAA,EAAA,CAAA,CAAA,KACb,CACL,GAAM,CAACC,CAAYC,CAAAA,CAAQ,CAAIF,CAAAA,CAAAA,CAAK,KAAM,CAAA,GAAG,EACvCG,CAAQ,CAAA,QAAA,CAASD,EAAU,EAAE,CAAA,CACnCJ,EAAa,CAAqBJ,kBAAAA,EAAAA,CAAAA,CAAeO,CAAU,CAAC,CAAG,CAAA,CAAA,CAAA,CAC7D,GAAGE,CAAK,CAAA,EAAA,EACZ,CACF,CAAC,CAGM,CAAA,CACL,MAAOJ,CAAY,EAAA,MAAA,CACnB,MAAQA,CAAAA,CAAAA,EAAY,MACpB,CAAA,GAAG,OAAO,OAAQD,CAAAA,CAAY,CAAE,CAAA,MAAA,CAC9B,CAACM,CAAAA,CAAK,CAACC,CAAOL,CAAAA,CAAI,CAAO,IAAA,CACvB,GAAGI,CAAAA,CACH,CAACC,CAAK,EAAG,CACP,KAAA,CAAOL,CACP,CAAA,MAAA,CAAQA,CACV,CACF,CAAA,CAAA,CACA,EACF,CACF,CACF,EAEaM,CAAS,CAAA,CAAC,CAAE,GAAA,CAAAC,CAAK,CAAA,IAAA,CAAAP,EAAO,EAAI,CAAA,OAAA,CAAAQ,CAAS,CAAA,GAAGhB,CAAM,CAAA,GAAmB,CAC5E,IAAMiB,CAAAA,CAAad,CAAaK,CAAAA,CAAI,CAE9BU,CAAAA,CAAAA,CAAUH,EACdd,CAAA,CAAA,aAAA,CAAC,KACC,CAAA,CAAA,GAAA,CAAKc,CACL,CAAA,GAAA,CAAI,SACJ,SAAU,CAAA,cAAA,CACV,KAAOE,CAAAA,CAAAA,CACN,GAAGjB,CAAAA,CACN,EAEAC,CAAA,CAAA,aAAA,CAAC,KAAI,CAAA,CAAA,KAAA,CAAOgB,CAAY,CAAA,SAAA,CAAU,2BAA2B,CAG/D,CAAA,OAAOD,CAAUf,CAAAA,CAAAA,CAAA,aAACN,CAAAA,CAAAA,CAAA,CAAU,OAASqB,CAAAA,CAAAA,CAAAA,CAAUE,CAAQ,CAAA,CAAeA,CACxE","file":"Avatar.js","sourcesContent":["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 React from \"react\";\nimport { Pressable } from \"./Pressable\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n  sm: \"640px\",\n  md: \"768px\",\n  lg: \"1024px\",\n  xl: \"1280px\",\n  \"2xl\": \"1536px\"\n};\n\nexport type AvatarProps = {\n  src?: string;\n  size?: ResponsiveSize | ResponsiveSize[];\n} & Pick<React.ComponentProps<typeof Pressable>, \"onClick\">;\n\nconst processSizes = (\n  sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n  if (!sizes) return { width: \"48px\", height: \"48px\" };\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 (minWidth: ${BREAKPOINT_MAP[breakpoint]})`] =\n        `${value}px`;\n    }\n  });\n\n  // Create the style object with the correct structure\n  return {\n    width: baseSize || \"48px\",\n    height: baseSize || \"48px\",\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 Avatar = ({ src, size = 48, onClick, ...props }: AvatarProps) => {\n  const sizeStyles = processSizes(size);\n\n  const content = src ? (\n    <img\n      src={src}\n      alt=\"avatar\"\n      className=\"rounded-full\"\n      style={sizeStyles}\n      {...props}\n    />\n  ) : (\n    <div style={sizeStyles} className=\"rounded-full bg-gray-200\" />\n  );\n\n  return onClick ? <Pressable onClick={onClick}>{content}</Pressable> : content;\n};\n"]}
+{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/utils/index.ts","../../src/components/Pressable.tsx","../../src/components/Avatar.tsx"],"names":["focusRingStyles","cn","inputs","twMerge","clsx","Pressable","React","children","type","className","disabled","props","ref","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Avatar","src","onClick","sizeStyles","content"],"mappings":"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","file":"Avatar.js","sourcesContent":["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 from \"react\";\nimport { Pressable } from \"./Pressable\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n  sm: \"640px\",\n  md: \"768px\",\n  lg: \"1024px\",\n  xl: \"1280px\",\n  \"2xl\": \"1536px\"\n};\n\nexport type AvatarProps = {\n  src?: string;\n  size?: ResponsiveSize | ResponsiveSize[];\n} & Pick<React.ComponentProps<typeof Pressable>, \"onClick\">;\n\nconst processSizes = (\n  sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n  if (!sizes) return { width: \"48px\", height: \"48px\" };\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 (minWidth: ${BREAKPOINT_MAP[breakpoint]})`] =\n        `${value}px`;\n    }\n  });\n\n  // Create the style object with the correct structure\n  return {\n    width: baseSize || \"48px\",\n    height: baseSize || \"48px\",\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 Avatar = ({ src, size = 48, onClick, ...props }: AvatarProps) => {\n  const sizeStyles = processSizes(size);\n\n  const content = src ? (\n    <img\n      src={src}\n      alt=\"avatar\"\n      className=\"rounded-full\"\n      style={sizeStyles}\n      {...props}\n    />\n  ) : (\n    <div style={sizeStyles} className=\"rounded-full bg-gray-200\" />\n  );\n\n  return onClick ? (\n    <Pressable onClick={onClick} {...props}>\n      {content}\n    </Pressable>\n  ) : (\n    content\n  );\n};\n"]}

package/dist/components/Badge.cjs

@@ -1,2 +1,2 @@
-'use strict';var i=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),icons=require('@deckai/icons');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 i__namespace=/*#__PURE__*/_interopNamespace(i);function l(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var h={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB"},b={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},E=e=>{if(!e)return {width:"24px",height:"24px"};let r=Array.isArray(e)?e:[e],t={},n;return r.forEach(o=>{if(typeof o=="number")n=`${o}px`;else {let[a,s]=o.split(":"),p=parseInt(s,10);t[`@media (min-width: ${b[a]})`]=`${p}px`;}}),{width:n||"24px",height:n||"24px",...Object.entries(t).reduce((o,[a,s])=>({...o,[a]:{width:s,height:s}}),{})}},T=i__namespace.default.forwardRef(({name:e,size:r=24,color:t="primary",title:n,className:o,style:a={},...s},p)=>{let m=icons.IconMap[e],y=E(r);return i__namespace.default.createElement("div",{className:l("flex justify-center items-center",o),style:{...y,"--icon-stroke":h[t],...a}},i__namespace.default.createElement(m,{ref:p,"aria-hidden":!n,"aria-label":n,stroke:e.includes("filled")?void 0:h[t],...s}))});T.displayName="Icon";var R={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},C=e=>{let[r,t]=e.split("-");return r==="heading"?R[t]||"p":r==="label"?"label":"p"},A={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},S=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[n,o]=t.split(":");return `${n}:text-${o}`}return `text-${t}`}).join(" "):"text-body-default",g=i__namespace.default.forwardRef(({variant:e="body-default",color:r="text-primary",as:t,className:n,children:o,weight:a,...s},p)=>{let m=S(e),y=r&&r==="inherit"?"inherit":r?`text-${r}`:"",f=i__namespace.default.useMemo(()=>{let H=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return C(H)},[e]);return i__namespace.default.createElement(t||f,{ref:p,className:`font-sans antialiased ${m} ${y} ${a?`!${A[a]}`:""} ${n??""}`,...s},o)});g.displayName="Text";var u={pink:"bg-tertiary-5",orange:"bg-tertiary-15",green:"bg-tertiary-25",purple:"bg-secondary-300"},k=e=>{let r=Object.keys(u),t=e.split("").reduce((a,s)=>s.charCodeAt(0)+((a<<5)-a),0),n=Math.abs(t)%r.length,o=r[n];return console.log({input:e,hash:t,variantKeys:r,index:n,selectedVariant:o}),o},V=i__namespace.forwardRef(({className:e,variant:r,iconName:t,children:n,...o},a)=>{let s=r||(typeof n=="string"?k(n):"pink");return i__namespace.createElement("span",{ref:a,className:l("inline-flex items-center gap-2","rounded-lg px-2 py-1","text-sm font-medium",u[s],e),...o},t&&i__namespace.createElement(T,{size:16,name:t}),i__namespace.createElement(g,{variant:"body-xxs-medium"},n))});V.displayName="Badge";if (exports.default) module.exports = exports.default;exports.Badge=V;//# sourceMappingURL=Badge.cjs.map
+'use strict';var i=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),icons=require('@deckai/icons');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 i__namespace=/*#__PURE__*/_interopNamespace(i);function l(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var u={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB",disabled:"#888888"},x={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},E=e=>{if(!e)return {width:"24px",height:"24px"};let n=Array.isArray(e)?e:[e],t={},r;return n.forEach(o=>{if(typeof o=="number")r=`${o}px`;else {let[a,s]=o.split(":"),p=parseInt(s,10);t[`@media (min-width: ${x[a]})`]=`${p}px`;}}),{width:r||"24px",height:r||"24px",...Object.entries(t).reduce((o,[a,s])=>({...o,[a]:{width:s,height:s}}),{})}},T=i__namespace.default.forwardRef(({name:e,size:n=24,color:t="primary",title:r,className:o,style:a={},...s},p)=>{let m=icons.IconMap[e],c=E(n);return i__namespace.default.createElement("div",{className:l("flex justify-center items-center",o),style:{...c,"--icon-stroke":u[t],...a}},i__namespace.default.createElement(m,{ref:p,"aria-hidden":!r,"aria-label":r,stroke:e.includes("filled")?void 0:u[t],...s}))});T.displayName="Icon";var R={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},A=e=>{let[n,t]=e.split("-");return n==="heading"?R[t]||"p":n==="label"?"label":"p"},C={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},S=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[r,o]=t.split(":");return `${r}:text-${o}`}return `text-${t}`}).join(" "):"text-body-default",g=i__namespace.default.forwardRef(({variant:e="body-default",color:n="primary",as:t,className:r,children:o,weight:a,...s},p)=>{let m=S(e),c=n==="inherit"?"text-inherit":`text-text-${n}`,H=i__namespace.default.useMemo(()=>{let f=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return A(f)},[e]);return i__namespace.default.createElement(t||H,{ref:p,className:`font-sans antialiased ${m} ${c} ${a?`!${C[a]}`:""} ${r??""}`,...s},o)});g.displayName="Text";var h={pink:"bg-tertiary-5",orange:"bg-tertiary-15",green:"bg-tertiary-25",purple:"bg-secondary-300"},k=e=>{let n=Object.keys(h),t=e.split("").reduce((a,s)=>s.charCodeAt(0)+((a<<5)-a),0),r=Math.abs(t)%n.length,o=n[r];return console.log({input:e,hash:t,variantKeys:n,index:r,selectedVariant:o}),o},V=i__namespace.forwardRef(({className:e,variant:n,iconName:t,children:r,...o},a)=>{let s=n||(typeof r=="string"?k(r):"pink");return i__namespace.createElement("span",{ref:a,className:l("inline-flex items-center gap-2","rounded px-2 py-1.5","text-sm font-medium",h[s],e),...o},t&&i__namespace.createElement(T,{size:16,name:t}),i__namespace.createElement(g,{variant:"body-xxs-semibold",className:"mt-0.5"},r))});V.displayName="Badge";if (exports.default) module.exports = exports.default;exports.Badge=V;//# sourceMappingURL=Badge.cjs.map
 //# sourceMappingURL=Badge.cjs.map