@deckai/deck-ui 0.0.12 → 0.0.14

package/dist/components/NavbarItem.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/components/NavbarItem.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","focusRingStyles","Pressable","children","type","disabled","NavbarItem","iconName","hasNotification"],"mappings":"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","file":"NavbarItem.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};\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 { 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 { IconName } from \"@deckai/icons\";\nimport { Icon, IconProps } from \"./Icon\";\nimport { Pressable, PressableProps } from \"./Pressable\";\n\nexport type NavbarItemProps = {\n  iconName: IconName;\n  hasNotification?: boolean;\n} & Pick<IconProps, \"color\" | \"title\"> &\n  PressableProps;\n\nexport const NavbarItem = ({\n  iconName,\n  hasNotification,\n  color,\n  title,\n  ...props\n}: NavbarItemProps) => {\n  console.log({ hasNotification });\n  return (\n    <Pressable className=\"relative lg:px-7 md:px-5 py-3\" {...props}>\n      <Icon name={iconName} color={color} title={title} />\n      {hasNotification && (\n        <div className=\"w-3 h-3 bg-red-500 rounded-full absolute top-3 right-5\" />\n      )}\n    </Pressable>\n  );\n};\n"]}
+{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/components/Pressable.tsx","../../src/utils/tailwind.ts","../../src/components/NavbarItem.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","focusRingStyles","Pressable","children","type","disabled","NavbarItem","iconName","hasNotification"],"mappings":"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","file":"NavbarItem.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, { 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 { 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 from \"react\";\nimport { IconName } from \"@deckai/icons\";\nimport { Icon, IconProps } from \"./Icon\";\nimport { Pressable, PressableProps } from \"./Pressable\";\n\nexport type NavbarItemProps = {\n  iconName: IconName;\n  hasNotification?: boolean;\n} & Pick<IconProps, \"color\" | \"title\"> &\n  PressableProps;\n\nexport const NavbarItem = ({\n  iconName,\n  hasNotification,\n  color,\n  title,\n  ...props\n}: NavbarItemProps) => {\n  console.log({ hasNotification });\n  return (\n    <Pressable className=\"relative lg:px-7 md:px-5 py-3\" {...props}>\n      <Icon name={iconName} color={color} title={title} />\n      {hasNotification && (\n        <div className=\"w-3 h-3 bg-red-500 rounded-full absolute top-3 right-5\" />\n      )}\n    </Pressable>\n  );\n};\n"]}

package/dist/components/NavbarItem.js

@@ -1,2 +1,2 @@
-import p from'react';import {IconMap}from'@deckai/icons';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';function f(...e){return twMerge(clsx(e))}var m={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB"},$={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},v=e=>{if(!e)return {width:"24px",height:"24px"};let s=Array.isArray(e)?e:[e],r={},t;return s.forEach(o=>{if(typeof o=="number")t=`${o}px`;else {let[i,n]=o.split(":"),a=parseInt(n,10);r[`@media (min-width: ${$[i]})`]=`${a}px`;}}),{width:t||"24px",height:t||"24px",...Object.entries(r).reduce((o,[i,n])=>({...o,[i]:{width:n,height:n}}),{})}},c=p.forwardRef(({name:e,size:s=24,color:r="primary",title:t,className:o,style:i={},...n},a)=>{let d=IconMap[e],g=v(s);return p.createElement("div",{className:f("flex justify-center items-center",o),style:{...g,"--icon-stroke":m[r],...i}},p.createElement(d,{ref:a,"aria-hidden":!t,"aria-label":t,stroke:e.includes("filled")?void 0:m[r],...n}))});c.displayName="Icon";var u="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var b=({children:e,type:s="button",className:r,disabled:t,...o})=>p.createElement("button",{type:s,disabled:t,className:`appearance-none hover:opacity-80 transition-all active:scale-95 ${u} ${r} ${t?"opacity-50 cursor-not-allowed":""}`,...o},e);var F=({iconName:e,hasNotification:s,color:r,title:t,...o})=>(console.log({hasNotification:s}),p.createElement(b,{className:"relative lg:px-7 md:px-5 py-3",...o},p.createElement(c,{name:e,color:r,title:t}),s&&p.createElement("div",{className:"w-3 h-3 bg-red-500 rounded-full absolute top-3 right-5"})));if (exports.default) module.exports = exports.default;export{F as NavbarItem};//# sourceMappingURL=NavbarItem.js.map
+import c from'react';import {IconMap}from'@deckai/icons';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';function a(...e){return twMerge(clsx(e))}var u={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB",disabled:"#888888"},$={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},v=e=>{if(!e)return {width:"24px",height:"24px"};let s=Array.isArray(e)?e:[e],t={},o;return s.forEach(r=>{if(typeof r=="number")o=`${r}px`;else {let[n,i]=r.split(":"),p=parseInt(i,10);t[`@media (min-width: ${$[n]})`]=`${p}px`;}}),{width:o||"24px",height:o||"24px",...Object.entries(t).reduce((r,[n,i])=>({...r,[n]:{width:i,height:i}}),{})}},l=c.forwardRef(({name:e,size:s=24,color:t="primary",title:o,className:r,style:n={},...i},p)=>{let g=IconMap[e],x=v(s);return c.createElement("div",{className:a("flex justify-center items-center",r),style:{...x,"--icon-stroke":u[t],...n}},c.createElement(g,{ref:p,"aria-hidden":!o,"aria-label":o,stroke:e.includes("filled")?void 0:u[t],...i}))});l.displayName="Icon";var d="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var f=c.forwardRef(({children:e,type:s="button",className:t,disabled:o,...r},n)=>c.createElement("button",{ref:n,type:s,disabled:o,className:a("appearance-none hover:opacity-80 transition-all active:scale-95",d,o&&"opacity-50 cursor-not-allowed",t),...r},e));f.displayName="Pressable";var F=({iconName:e,hasNotification:s,color:t,title:o,...r})=>(console.log({hasNotification:s}),c.createElement(f,{className:"relative lg:px-7 md:px-5 py-3",...r},c.createElement(l,{name:e,color:t,title:o}),s&&c.createElement("div",{className:"w-3 h-3 bg-red-500 rounded-full absolute top-3 right-5"})));if (exports.default) module.exports = exports.default;export{F as NavbarItem};//# sourceMappingURL=NavbarItem.js.map
 //# sourceMappingURL=NavbarItem.js.map

package/dist/components/NavbarItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/components/NavbarItem.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","focusRingStyles","Pressable","children","type","disabled","NavbarItem","iconName","hasNotification"],"mappings":"sHAGO,SAASA,CAAAA,CAAAA,GAAMC,CAAsB,CAAA,CAC1C,OAAOC,OAAQC,CAAAA,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CCcA,IAAMG,CAAwC,CAAA,CAC5C,QAAS,SACT,CAAA,SAAA,CAAW,UACX,KAAO,CAAA,SAAA,CACP,YAAa,SACf,CAAA,CAEMC,CAA6C,CAAA,CACjD,GAAI,OACJ,CAAA,EAAA,CAAI,OACJ,CAAA,EAAA,CAAI,SACJ,EAAI,CAAA,QAAA,CACJ,KAAO,CAAA,QACT,EAEMC,CACJC,CAAAA,CAAAA,EACwB,CACxB,GAAI,CAACA,EAAO,OAAO,CAAE,KAAO,CAAA,MAAA,CAAQ,OAAQ,MAAO,CAAA,CAEnD,IAAMC,CAAAA,CAAY,MAAM,OAAQD,CAAAA,CAAK,CAAIA,CAAAA,CAAAA,CAAQ,CAACA,CAAK,CAAA,CACjDE,EAAuC,EAAC,CAC1CC,EAGJ,OAAAF,CAAAA,CAAU,OAASG,CAAAA,CAAAA,EAAS,CAC1B,GAAI,OAAOA,CAAS,EAAA,QAAA,CAClBD,EAAW,CAAGC,EAAAA,CAAI,CACb,EAAA,CAAA,CAAA,KAAA,CACL,GAAM,CAACC,CAAAA,CAAYC,CAAQ,CAAIF,CAAAA,CAAAA,CAAK,MAAM,GAAG,CAAA,CACvCG,CAAQ,CAAA,QAAA,CAASD,EAAU,EAAE,CAAA,CACnCJ,CAAa,CAAA,CAAA,mBAAA,EAAsBJ,EAAeO,CAAU,CAAC,CAAG,CAAA,CAAA,CAAA,CAC9D,GAAGE,CAAK,CAAA,EAAA,EACZ,CACF,CAAC,CAAA,CAGM,CACL,KAAOJ,CAAAA,CAAAA,EAAY,MACnB,CAAA,MAAA,CAAQA,GAAY,MACpB,CAAA,GAAG,MAAO,CAAA,OAAA,CAAQD,CAAY,CAAE,CAAA,MAAA,CAC9B,CAACM,CAAAA,CAAK,CAACC,CAAOL,CAAAA,CAAI,KAAO,CACvB,GAAGI,EACH,CAACC,CAAK,EAAG,CACP,MAAOL,CACP,CAAA,MAAA,CAAQA,CACV,CACF,GACA,EACF,CACF,CACF,EAEaM,CAAOC,CAAAA,CAAAA,CAAM,WACxB,CACE,CACE,KAAAC,CACA,CAAA,IAAA,CAAAR,CAAO,CAAA,EAAA,CACP,MAAAS,CAAQ,CAAA,SAAA,CACR,KAAAC,CAAAA,CAAAA,CACA,UAAAC,CACA,CAAA,KAAA,CAAAC,CAAQ,CAAA,GACR,GAAGC,CACL,EACAC,CACG,GAAA,CACH,IAAMC,CAAgBC,CAAAA,OAAAA,CAAQR,CAAI,CAAA,CAC5BS,EAAatB,CAAaK,CAAAA,CAAI,CAEpC,CAAA,OACEO,EAAA,aAAC,CAAA,KAAA,CAAA,CACC,SAAWlB,CAAAA,CAAAA,CAAG,mCAAoCsB,CAAS,CAAA,CAC3D,MAAO,CACL,GAAGM,EACF,eAA4BxB,CAAAA,CAAAA,CAAUgB,CAAK,CAAA,CAC5C,GAAGG,CACL,CAAA,CAAA,CAEAL,CAAA,CAAA,aAAA,CAACQ,EAAA,CACC,GAAA,CAAKD,CACL,CAAA,aAAA,CAAa,CAACJ,CACd,CAAA,YAAA,CAAYA,EACZ,MAAQF,CAAAA,CAAAA,CAAK,SAAS,QAAQ,CAAA,CAAI,KAAYf,CAAAA,CAAAA,CAAAA,CAAUgB,CAAK,CAC5D,CAAA,GAAGI,CACN,CAAA,CACF,CAEJ,CACF,CAAA,CAEAP,CAAK,CAAA,WAAA,CAAc,OC1CZ,IAAMY,CAAAA,CACX,sGC/DK,IAAMC,CAAAA,CAAsC,CAAC,CAClD,SAAAC,CACA,CAAA,IAAA,CAAAC,CAAO,CAAA,QAAA,CACP,UAAAV,CACA,CAAA,QAAA,CAAAW,CACA,CAAA,GAAGT,CACL,CACEN,GAAAA,CAAAA,CAAA,cAAC,QAEC,CAAA,CAAA,IAAA,CAAMc,EACN,QAAUC,CAAAA,CAAAA,CACV,SAAW,CAAA,CAAA,gEAAA,EAAmEJ,CAAe,CAAIP,CAAAA,EAAAA,CAAS,CAAIW,CAAAA,EAAAA,CAAAA,CAAW,gCAAkC,EAAE,CAAA,CAAA,CAC5J,GAAGT,CAAAA,CAAAA,CAEHO,CACH,CCTK,CAAA,IAAMG,EAAa,CAAC,CACzB,SAAAC,CACA,CAAA,eAAA,CAAAC,CACA,CAAA,KAAA,CAAAhB,EACA,KAAAC,CAAAA,CAAAA,CACA,GAAGG,CACL,KACE,OAAQ,CAAA,GAAA,CAAI,CAAE,eAAA,CAAAY,CAAgB,CAAC,CAAA,CAE7BlB,EAAA,aAACY,CAAAA,CAAAA,CAAA,CAAU,SAAU,CAAA,+BAAA,CAAiC,GAAGN,CAAAA,CAAAA,CACvDN,EAAA,aAACD,CAAAA,CAAAA,CAAA,CAAK,IAAA,CAAMkB,EAAU,KAAOf,CAAAA,CAAAA,CAAO,KAAOC,CAAAA,CAAAA,CAAO,EACjDe,CACClB,EAAAA,CAAAA,CAAA,cAAC,KAAI,CAAA,CAAA,SAAA,CAAU,yDAAyD,CAE5E,CAAA","file":"NavbarItem.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};\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 { 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 { IconName } from \"@deckai/icons\";\nimport { Icon, IconProps } from \"./Icon\";\nimport { Pressable, PressableProps } from \"./Pressable\";\n\nexport type NavbarItemProps = {\n  iconName: IconName;\n  hasNotification?: boolean;\n} & Pick<IconProps, \"color\" | \"title\"> &\n  PressableProps;\n\nexport const NavbarItem = ({\n  iconName,\n  hasNotification,\n  color,\n  title,\n  ...props\n}: NavbarItemProps) => {\n  console.log({ hasNotification });\n  return (\n    <Pressable className=\"relative lg:px-7 md:px-5 py-3\" {...props}>\n      <Icon name={iconName} color={color} title={title} />\n      {hasNotification && (\n        <div className=\"w-3 h-3 bg-red-500 rounded-full absolute top-3 right-5\" />\n      )}\n    </Pressable>\n  );\n};\n"]}
+{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/components/Pressable.tsx","../../src/utils/tailwind.ts","../../src/components/NavbarItem.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","focusRingStyles","Pressable","children","type","disabled","NavbarItem","iconName","hasNotification"],"mappings":"sHAGO,SAASA,CAAAA,CAAAA,GAAMC,CAAsB,CAAA,CAC1C,OAAOC,OAAQC,CAAAA,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CCcA,IAAMG,CAAAA,CAAwC,CAC5C,OAAA,CAAS,UACT,SAAW,CAAA,SAAA,CACX,MAAO,SACP,CAAA,WAAA,CAAa,UACb,QAAU,CAAA,SACZ,CAEMC,CAAAA,CAAAA,CAA6C,CACjD,EAAI,CAAA,OAAA,CACJ,EAAI,CAAA,OAAA,CACJ,GAAI,QACJ,CAAA,EAAA,CAAI,QACJ,CAAA,KAAA,CAAO,QACT,CAEMC,CAAAA,CAAAA,CACJC,GACwB,CACxB,GAAI,CAACA,CAAO,CAAA,OAAO,CAAE,KAAA,CAAO,OAAQ,MAAQ,CAAA,MAAO,EAEnD,IAAMC,CAAAA,CAAY,MAAM,OAAQD,CAAAA,CAAK,CAAIA,CAAAA,CAAAA,CAAQ,CAACA,CAAK,CAAA,CACjDE,EAAuC,EAAC,CAC1CC,EAGJ,OAAAF,CAAAA,CAAU,OAASG,CAAAA,CAAAA,EAAS,CAC1B,GAAI,OAAOA,CAAS,EAAA,QAAA,CAClBD,EAAW,CAAGC,EAAAA,CAAI,CACb,EAAA,CAAA,CAAA,KAAA,CACL,GAAM,CAACC,CAAAA,CAAYC,CAAQ,CAAIF,CAAAA,CAAAA,CAAK,MAAM,GAAG,CAAA,CACvCG,CAAQ,CAAA,QAAA,CAASD,EAAU,EAAE,CAAA,CACnCJ,EAAa,CAAsBJ,mBAAAA,EAAAA,CAAAA,CAAeO,CAAU,CAAC,CAAA,CAAA,CAAG,CAC9D,CAAA,CAAA,EAAGE,CAAK,CACZ,EAAA,EAAA,CACF,CAAC,CAGM,CAAA,CACL,MAAOJ,CAAY,EAAA,MAAA,CACnB,MAAQA,CAAAA,CAAAA,EAAY,OACpB,GAAG,MAAA,CAAO,OAAQD,CAAAA,CAAY,EAAE,MAC9B,CAAA,CAACM,CAAK,CAAA,CAACC,EAAOL,CAAI,CAAA,IAAO,CACvB,GAAGI,CAAAA,CACH,CAACC,CAAK,EAAG,CACP,KAAA,CAAOL,EACP,MAAQA,CAAAA,CACV,CACF,CACA,CAAA,CAAA,EACF,CACF,CACF,CAEaM,CAAAA,CAAAA,CAAOC,EAAM,UACxB,CAAA,CACE,CACE,IAAAC,CAAAA,CAAAA,CACA,KAAAR,CAAO,CAAA,EAAA,CACP,KAAAS,CAAAA,CAAAA,CAAQ,UACR,KAAAC,CAAAA,CAAAA,CACA,SAAAC,CAAAA,CAAAA,CACA,MAAAC,CAAQ,CAAA,EACR,CAAA,GAAGC,CACL,CACAC,CAAAA,CAAAA,GACG,CACH,IAAMC,CAAAA,CAAgBC,QAAQR,CAAI,CAAA,CAC5BS,CAAatB,CAAAA,CAAAA,CAAaK,CAAI,CAEpC,CAAA,OACEO,EAAA,aAAC,CAAA,KAAA,CAAA,CACC,UAAWlB,CAAG,CAAA,kCAAA,CAAoCsB,CAAS,CAAA,CAC3D,MAAO,CACL,GAAGM,EACF,eAA4BxB,CAAAA,CAAAA,CAAUgB,CAAK,CAC5C,CAAA,GAAGG,CACL,CAAA,CAAA,CAEAL,EAAA,aAACQ,CAAAA,CAAAA,CAAA,CACC,GAAA,CAAKD,EACL,aAAa,CAAA,CAACJ,CACd,CAAA,YAAA,CAAYA,EACZ,MAAQF,CAAAA,CAAAA,CAAK,SAAS,QAAQ,CAAA,CAAI,OAAYf,CAAUgB,CAAAA,CAAK,CAC5D,CAAA,GAAGI,EACN,CACF,CAEJ,CACF,CAEAP,CAAAA,CAAAA,CAAK,YAAc,MC9GnB,CCmEO,IAAMY,CACX,CAAA,qGAAA,CD9DK,IAAMC,CAAYZ,CAAAA,CAAAA,CAAM,WAC7B,CAAC,CAAE,QAAAa,CAAAA,CAAAA,CAAU,KAAAC,CAAO,CAAA,QAAA,CAAU,SAAAV,CAAAA,CAAAA,CAAW,SAAAW,CAAU,CAAA,GAAGT,CAAM,CAAA,CAAGC,IAC7DP,CAAA,CAAA,aAAA,CAAC,UACC,GAAKO,CAAAA,CAAAA,CACL,KAAMO,CACN,CAAA,QAAA,CAAUC,CACV,CAAA,SAAA,CAAWjC,EACT,iEACA6B,CAAAA,CAAAA,CACAI,GAAY,+BACZX,CAAAA,CACF,EACC,GAAGE,CAAAA,CAAAA,CAEHO,CACH,CAEJ,EAEAD,CAAU,CAAA,WAAA,CAAc,YEdXI,IAAAA,CAAAA,CAAa,CAAC,CACzB,QAAA,CAAAC,CACA,CAAA,eAAA,CAAAC,EACA,KAAAhB,CAAAA,CAAAA,CACA,MAAAC,CACA,CAAA,GAAGG,CACL,CACE,IAAA,OAAA,CAAQ,GAAI,CAAA,CAAE,gBAAAY,CAAgB,CAAC,EAE7BlB,CAAA,CAAA,aAAA,CAACY,EAAA,CAAU,SAAA,CAAU,+BAAiC,CAAA,GAAGN,GACvDN,CAAA,CAAA,aAAA,CAACD,EAAA,CAAK,IAAA,CAAMkB,EAAU,KAAOf,CAAAA,CAAAA,CAAO,KAAOC,CAAAA,CAAAA,CAAO,EACjDe,CACClB,EAAAA,CAAAA,CAAA,cAAC,KAAI,CAAA,CAAA,SAAA,CAAU,yDAAyD,CAE5E,CAAA","file":"NavbarItem.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, { 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 { 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 from \"react\";\nimport { IconName } from \"@deckai/icons\";\nimport { Icon, IconProps } from \"./Icon\";\nimport { Pressable, PressableProps } from \"./Pressable\";\n\nexport type NavbarItemProps = {\n  iconName: IconName;\n  hasNotification?: boolean;\n} & Pick<IconProps, \"color\" | \"title\"> &\n  PressableProps;\n\nexport const NavbarItem = ({\n  iconName,\n  hasNotification,\n  color,\n  title,\n  ...props\n}: NavbarItemProps) => {\n  console.log({ hasNotification });\n  return (\n    <Pressable className=\"relative lg:px-7 md:px-5 py-3\" {...props}>\n      <Icon name={iconName} color={color} title={title} />\n      {hasNotification && (\n        <div className=\"w-3 h-3 bg-red-500 rounded-full absolute top-3 right-5\" />\n      )}\n    </Pressable>\n  );\n};\n"]}

package/dist/components/Option.cjs

@@ -1,2 +1,2 @@
-'use strict';var s=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var s__default=/*#__PURE__*/_interopDefault(s);function t(...o){return tailwindMerge.twMerge(clsx.clsx(o))}var f=({value:o,label:r,onChange:e,selected:n})=>s__default.default.createElement("button",{type:"button",className:t("relative w-full h-full text-left px-2 py-1.5 text-sm cursor-pointer hover:bg-gray-100 rounded",n&&"bg-gray-100"),onClick:()=>{e?.(o);}},r);if (exports.default) module.exports = exports.default;exports.Option=f;//# sourceMappingURL=Option.cjs.map
+'use strict';var l=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var l__default=/*#__PURE__*/_interopDefault(l);function p(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var H={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},f=e=>{let[r,t]=e.split("-");return r==="heading"?H[t]||"p":r==="label"?"label":"p"},M={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},L=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[o,n]=t.split(":");return `${o}:text-${n}`}return `text-${t}`}).join(" "):"text-body-default",i=l__default.default.forwardRef(({variant:e="body-default",color:r="primary",as:t,className:o,children:n,weight:a,...s},g)=>{let y=L(e),m=r==="inherit"?"text-inherit":`text-text-${r}`,d=l__default.default.useMemo(()=>{let h=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return f(h)},[e]);return l__default.default.createElement(t||d,{ref:g,className:`font-sans antialiased ${y} ${m} ${a?`!${M[a]}`:""} ${o??""}`,...s},n)});i.displayName="Text";var c="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var j=({value:e,label:r,onChange:t,selected:o,color:n,disabled:a,className:s})=>l__default.default.createElement("button",{type:"button",disabled:a,className:p("relative w-full text-left px-2 py-1.5 text-sm rounded","cursor-pointer hover:bg-gray-100","disabled:opacity-50 disabled:cursor-not-allowed",o&&"bg-gray-100","flex items-center gap-2",c,s),onClick:()=>{t?.(e);}},l__default.default.createElement(i,{variant:"body-default-medium",color:n==="danger"?"danger":"inherit"},r));if (exports.default) module.exports = exports.default;exports.Option=j;//# sourceMappingURL=Option.cjs.map
 //# sourceMappingURL=Option.cjs.map

package/dist/components/Option.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Option.tsx"],"names":["cn","inputs","twMerge","clsx","Option","value","label","onChange","selected","React"],"mappings":"iNAGO,SAASA,CAAAA,CAAAA,GAAMC,EAAsB,CAC1C,OAAOC,qBAAQC,CAAAA,SAAAA,CAAKF,CAAM,CAAC,CAC7B,CCMO,IAAMG,CAAS,CAAA,CAAC,CAAE,KAAA,CAAAC,EAAO,KAAAC,CAAAA,CAAAA,CAAO,QAAAC,CAAAA,CAAAA,CAAU,QAAAC,CAAAA,CAAS,IACxDC,kBAAA,CAAA,aAAA,CAAC,QACC,CAAA,CAAA,IAAA,CAAK,QACL,CAAA,SAAA,CAAWT,EACT,+FACAQ,CAAAA,CAAAA,EAAY,aACd,CAAA,CACA,OAAS,CAAA,IAAM,CACbD,CAAWF,GAAAA,CAAK,EAClB,CAAA,CAAA,CAECC,CACH","file":"Option.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 from \"react\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\n\nexport type OptionProps = {\n  label: string;\n  value: string;\n  onChange?: (value: string) => void;\n  selected?: boolean;\n};\n\nexport const Option = ({ value, label, onChange, selected }: OptionProps) => (\n  <button\n    type=\"button\"\n    className={cn(\n      \"relative w-full h-full text-left px-2 py-1.5 text-sm cursor-pointer hover:bg-gray-100 rounded\",\n      selected && \"bg-gray-100\"\n    )}\n    onClick={() => {\n      onChange?.(value);\n    }}\n  >\n    {label}\n  </button>\n);\n"]}
+{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Text.tsx","../../src/utils/tailwind.ts","../../src/components/Option.tsx"],"names":["cn","inputs","twMerge","clsx","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","size","fontWeight","processVariants","variants","breakpoint","typographyClass","Text","React","color","as","className","children","weight","props","ref","typographyClasses","colorClasses","suggestedElement","baseVariant","focusRingStyles","Option","value","label","onChange","selected","disabled"],"mappings":"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","file":"Option.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 from \"react\";\nimport { Typography } from \"../types/tailwind\";\n\ntype TextElement =\n  | \"p\"\n  | \"span\"\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"strong\"\n  | \"em\"\n  | \"blockquote\"\n  | \"pre\"\n  | \"code\"\n  | \"small\"\n  | \"label\"\n  | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n  p: HTMLParagraphElement;\n  span: HTMLSpanElement;\n  h1: HTMLHeadingElement;\n  h2: HTMLHeadingElement;\n  h3: HTMLHeadingElement;\n  h4: HTMLHeadingElement;\n  h5: HTMLHeadingElement;\n  h6: HTMLHeadingElement;\n  strong: HTMLElement;\n  em: HTMLElement;\n  blockquote: HTMLQuoteElement;\n  pre: HTMLPreElement;\n  code: HTMLElement;\n  small: HTMLElement;\n  label: HTMLLabelElement;\n  a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n  p: React.HTMLAttributes<HTMLParagraphElement>;\n  span: React.HTMLAttributes<HTMLSpanElement>;\n  h1: React.HTMLAttributes<HTMLHeadingElement>;\n  h2: React.HTMLAttributes<HTMLHeadingElement>;\n  h3: React.HTMLAttributes<HTMLHeadingElement>;\n  h4: React.HTMLAttributes<HTMLHeadingElement>;\n  h5: React.HTMLAttributes<HTMLHeadingElement>;\n  h6: React.HTMLAttributes<HTMLHeadingElement>;\n  strong: React.HTMLAttributes<HTMLElement>;\n  em: React.HTMLAttributes<HTMLElement>;\n  blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n  pre: React.HTMLAttributes<HTMLPreElement>;\n  code: React.HTMLAttributes<HTMLElement>;\n  small: React.HTMLAttributes<HTMLElement>;\n  label: React.LabelHTMLAttributes<HTMLLabelElement>;\n  a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n  | \"primary\"\n  | \"secondary\"\n  | \"white\"\n  | \"primary-blue\"\n  | \"disabled\"\n  | \"danger\"\n  | \"inherit\";\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n  xl: \"h1\",\n  lg: \"h1\",\n  md: \"h2\",\n  sm: \"h3\",\n  xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n  const [category, size] = variant.split(\"-\");\n\n  if (category === \"heading\") {\n    return HEADING_ELEMENT_MAP[size] || \"p\";\n  }\n\n  if (category === \"label\") {\n    return \"label\";\n  }\n\n  return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n  light: \"font-light\",\n  regular: \"font-regular\",\n  semibold: \"font-semibold\",\n  bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n  keyof Typography[T],\n  string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n  [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n  variant?: ResponsiveVariant | ResponsiveVariant[];\n  color?: TextColor;\n  as?: T;\n  className?: string;\n  children: React.ReactNode;\n  weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n  variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n  if (!variants) return \"text-body-default\";\n\n  const variantArray = Array.isArray(variants) ? variants : [variants];\n\n  return variantArray\n    .map((variant) => {\n      if (variant.includes(\":\")) {\n        const [breakpoint, typographyClass] = variant.split(\":\");\n        return `${breakpoint}:text-${typographyClass}`;\n      }\n      return `text-${variant}`;\n    })\n    .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n  <T extends TextElement = \"p\">(\n    {\n      variant = \"body-default\",\n      color = \"primary\",\n      as,\n      className,\n      children,\n      weight,\n      ...props\n    }: TextProps<T>,\n    ref: React.ForwardedRef<HTMLElementByTag[T]>\n  ) => {\n    // Process typography classes with breakpoints\n    const typographyClasses = processVariants(variant);\n\n    // Get color styles\n    const colorClasses =\n      color === \"inherit\" ? \"text-inherit\" : `text-text-${color}`;\n\n    const suggestedElement = React.useMemo(() => {\n      const baseVariant =\n        typeof variant === \"string\"\n          ? variant.split(\":\").pop()!\n          : Array.isArray(variant)\n            ? variant[0].split(\":\").pop()!\n            : \"body-default\";\n      return getElementFromVariant(baseVariant as TypographyKey);\n    }, [variant]);\n\n    const Component = (as || suggestedElement) as T;\n\n    return (\n      // @ts-expect-error TODO: figure this out\n      <Component\n        ref={ref}\n        className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n          weight ? `!${fontWeight[weight]}` : \"\"\n        } ${className ?? \"\"}`}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nText.displayName = \"Text\";\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n  const colorNames = Object.keys(colors) as (keyof Colors)[];\n  const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n  const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n  const safelist: string[] = [];\n\n  colorNames.forEach((colorName) => {\n    if (typeof colors[colorName] === \"object\") {\n      // Handle nested color objects (with number keys)\n      Object.keys(colors[colorName]).forEach((shade) => {\n        utilities.forEach((utility) => {\n          // Base utility\n          safelist.push(`${utility}-${colorName}-${shade}`);\n\n          // Variant utilities\n          variants.forEach((variant) => {\n            safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n          });\n        });\n      });\n    } else {\n      // Handle direct color values\n      utilities.forEach((utility) => {\n        safelist.push(`${utility}-${colorName}`);\n\n        variants.forEach((variant) => {\n          safelist.push(`${variant}${utility}-${colorName}`);\n        });\n      });\n    }\n  });\n\n  // Generate typography classes\n  Object.entries(typography).forEach(([family, sizes]) => {\n    Object.keys(sizes).forEach((size) => {\n      // Base typography classes\n      safelist.push(`text-${family}-${size}`);\n\n      // Add variants\n      variants.forEach((variant) => {\n        safelist.push(`${variant}text-${family}-${size}`);\n      });\n    });\n  });\n\n  const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n  const typographyClasses = Object.entries(typography).flatMap(\n    ([category, sizes]) =>\n      Object.keys(sizes).map((size) => `text-${category}-${size}`)\n  );\n\n  // Generate responsive variants\n  const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n    breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n  );\n\n  return [\n    ...typographyClasses,\n    ...responsiveTypographyClasses\n    // ... rest of your safelist\n  ];\n};\n\nexport const focusRingStyles =\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React from \"react\";\nimport { cn } from \"../utils\";\nimport { Text } from \"./Text\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nexport type OptionProps = {\n  label: React.ReactNode;\n  value: string;\n  /** Optional color override for specific items like \"Logout\" in red */\n  color?: \"default\" | \"danger\";\n  /** Optional disabled state */\n  disabled?: boolean;\n  onChange?: (value: string) => void;\n  selected?: boolean;\n  className?: string;\n};\n\nexport const Option = ({\n  value,\n  label,\n  onChange,\n  selected,\n  color,\n  disabled,\n  className\n}: OptionProps) => (\n  <button\n    type=\"button\"\n    disabled={disabled}\n    className={cn(\n      \"relative w-full text-left px-2 py-1.5 text-sm rounded\",\n      \"cursor-pointer hover:bg-gray-100\",\n      \"disabled:opacity-50 disabled:cursor-not-allowed\",\n      selected && \"bg-gray-100\",\n      \"flex items-center gap-2\",\n      focusRingStyles,\n      className\n    )}\n    onClick={() => {\n      onChange?.(value);\n    }}\n  >\n    <Text\n      variant=\"body-default-medium\"\n      color={color === \"danger\" ? \"danger\" : \"inherit\"}\n    >\n      {label}\n    </Text>\n  </button>\n);\n"]}

package/dist/components/Option.js

@@ -1,2 +1,2 @@
-import s from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';function t(...o){return twMerge(clsx(o))}var f=({value:o,label:r,onChange:e,selected:n})=>s.createElement("button",{type:"button",className:t("relative w-full h-full text-left px-2 py-1.5 text-sm cursor-pointer hover:bg-gray-100 rounded",n&&"bg-gray-100"),onClick:()=>{e?.(o);}},r);if (exports.default) module.exports = exports.default;export{f as Option};//# sourceMappingURL=Option.js.map
+import l from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';function p(...e){return twMerge(clsx(e))}var H={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},f=e=>{let[r,t]=e.split("-");return r==="heading"?H[t]||"p":r==="label"?"label":"p"},M={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},L=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[o,n]=t.split(":");return `${o}:text-${n}`}return `text-${t}`}).join(" "):"text-body-default",i=l.forwardRef(({variant:e="body-default",color:r="primary",as:t,className:o,children:n,weight:a,...s},g)=>{let y=L(e),m=r==="inherit"?"text-inherit":`text-text-${r}`,d=l.useMemo(()=>{let h=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return f(h)},[e]);return l.createElement(t||d,{ref:g,className:`font-sans antialiased ${y} ${m} ${a?`!${M[a]}`:""} ${o??""}`,...s},n)});i.displayName="Text";var c="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var j=({value:e,label:r,onChange:t,selected:o,color:n,disabled:a,className:s})=>l.createElement("button",{type:"button",disabled:a,className:p("relative w-full text-left px-2 py-1.5 text-sm rounded","cursor-pointer hover:bg-gray-100","disabled:opacity-50 disabled:cursor-not-allowed",o&&"bg-gray-100","flex items-center gap-2",c,s),onClick:()=>{t?.(e);}},l.createElement(i,{variant:"body-default-medium",color:n==="danger"?"danger":"inherit"},r));if (exports.default) module.exports = exports.default;export{j as Option};//# sourceMappingURL=Option.js.map
 //# sourceMappingURL=Option.js.map

package/dist/components/Option.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Option.tsx"],"names":["cn","inputs","twMerge","clsx","Option","value","label","onChange","selected","React"],"mappings":"kFAGO,SAASA,CAAAA,CAAAA,GAAMC,EAAsB,CAC1C,OAAOC,OAAQC,CAAAA,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CCMO,IAAMG,CAAS,CAAA,CAAC,CAAE,KAAA,CAAAC,EAAO,KAAAC,CAAAA,CAAAA,CAAO,QAAAC,CAAAA,CAAAA,CAAU,QAAAC,CAAAA,CAAS,IACxDC,CAAA,CAAA,aAAA,CAAC,QACC,CAAA,CAAA,IAAA,CAAK,QACL,CAAA,SAAA,CAAWT,EACT,+FACAQ,CAAAA,CAAAA,EAAY,aACd,CAAA,CACA,OAAS,CAAA,IAAM,CACbD,CAAWF,GAAAA,CAAK,EAClB,CAAA,CAAA,CAECC,CACH","file":"Option.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 from \"react\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\n\nexport type OptionProps = {\n  label: string;\n  value: string;\n  onChange?: (value: string) => void;\n  selected?: boolean;\n};\n\nexport const Option = ({ value, label, onChange, selected }: OptionProps) => (\n  <button\n    type=\"button\"\n    className={cn(\n      \"relative w-full h-full text-left px-2 py-1.5 text-sm cursor-pointer hover:bg-gray-100 rounded\",\n      selected && \"bg-gray-100\"\n    )}\n    onClick={() => {\n      onChange?.(value);\n    }}\n  >\n    {label}\n  </button>\n);\n"]}
+{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Text.tsx","../../src/utils/tailwind.ts","../../src/components/Option.tsx"],"names":["cn","inputs","twMerge","clsx","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","size","fontWeight","processVariants","variants","breakpoint","typographyClass","Text","React","color","as","className","children","weight","props","ref","typographyClasses","colorClasses","suggestedElement","baseVariant","focusRingStyles","Option","value","label","onChange","selected","disabled"],"mappings":"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","file":"Option.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 from \"react\";\nimport { Typography } from \"../types/tailwind\";\n\ntype TextElement =\n  | \"p\"\n  | \"span\"\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"strong\"\n  | \"em\"\n  | \"blockquote\"\n  | \"pre\"\n  | \"code\"\n  | \"small\"\n  | \"label\"\n  | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n  p: HTMLParagraphElement;\n  span: HTMLSpanElement;\n  h1: HTMLHeadingElement;\n  h2: HTMLHeadingElement;\n  h3: HTMLHeadingElement;\n  h4: HTMLHeadingElement;\n  h5: HTMLHeadingElement;\n  h6: HTMLHeadingElement;\n  strong: HTMLElement;\n  em: HTMLElement;\n  blockquote: HTMLQuoteElement;\n  pre: HTMLPreElement;\n  code: HTMLElement;\n  small: HTMLElement;\n  label: HTMLLabelElement;\n  a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n  p: React.HTMLAttributes<HTMLParagraphElement>;\n  span: React.HTMLAttributes<HTMLSpanElement>;\n  h1: React.HTMLAttributes<HTMLHeadingElement>;\n  h2: React.HTMLAttributes<HTMLHeadingElement>;\n  h3: React.HTMLAttributes<HTMLHeadingElement>;\n  h4: React.HTMLAttributes<HTMLHeadingElement>;\n  h5: React.HTMLAttributes<HTMLHeadingElement>;\n  h6: React.HTMLAttributes<HTMLHeadingElement>;\n  strong: React.HTMLAttributes<HTMLElement>;\n  em: React.HTMLAttributes<HTMLElement>;\n  blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n  pre: React.HTMLAttributes<HTMLPreElement>;\n  code: React.HTMLAttributes<HTMLElement>;\n  small: React.HTMLAttributes<HTMLElement>;\n  label: React.LabelHTMLAttributes<HTMLLabelElement>;\n  a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n  | \"primary\"\n  | \"secondary\"\n  | \"white\"\n  | \"primary-blue\"\n  | \"disabled\"\n  | \"danger\"\n  | \"inherit\";\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n  xl: \"h1\",\n  lg: \"h1\",\n  md: \"h2\",\n  sm: \"h3\",\n  xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n  const [category, size] = variant.split(\"-\");\n\n  if (category === \"heading\") {\n    return HEADING_ELEMENT_MAP[size] || \"p\";\n  }\n\n  if (category === \"label\") {\n    return \"label\";\n  }\n\n  return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n  light: \"font-light\",\n  regular: \"font-regular\",\n  semibold: \"font-semibold\",\n  bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n  keyof Typography[T],\n  string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n  [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n  variant?: ResponsiveVariant | ResponsiveVariant[];\n  color?: TextColor;\n  as?: T;\n  className?: string;\n  children: React.ReactNode;\n  weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n  variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n  if (!variants) return \"text-body-default\";\n\n  const variantArray = Array.isArray(variants) ? variants : [variants];\n\n  return variantArray\n    .map((variant) => {\n      if (variant.includes(\":\")) {\n        const [breakpoint, typographyClass] = variant.split(\":\");\n        return `${breakpoint}:text-${typographyClass}`;\n      }\n      return `text-${variant}`;\n    })\n    .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n  <T extends TextElement = \"p\">(\n    {\n      variant = \"body-default\",\n      color = \"primary\",\n      as,\n      className,\n      children,\n      weight,\n      ...props\n    }: TextProps<T>,\n    ref: React.ForwardedRef<HTMLElementByTag[T]>\n  ) => {\n    // Process typography classes with breakpoints\n    const typographyClasses = processVariants(variant);\n\n    // Get color styles\n    const colorClasses =\n      color === \"inherit\" ? \"text-inherit\" : `text-text-${color}`;\n\n    const suggestedElement = React.useMemo(() => {\n      const baseVariant =\n        typeof variant === \"string\"\n          ? variant.split(\":\").pop()!\n          : Array.isArray(variant)\n            ? variant[0].split(\":\").pop()!\n            : \"body-default\";\n      return getElementFromVariant(baseVariant as TypographyKey);\n    }, [variant]);\n\n    const Component = (as || suggestedElement) as T;\n\n    return (\n      // @ts-expect-error TODO: figure this out\n      <Component\n        ref={ref}\n        className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n          weight ? `!${fontWeight[weight]}` : \"\"\n        } ${className ?? \"\"}`}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nText.displayName = \"Text\";\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n  const colorNames = Object.keys(colors) as (keyof Colors)[];\n  const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n  const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n  const safelist: string[] = [];\n\n  colorNames.forEach((colorName) => {\n    if (typeof colors[colorName] === \"object\") {\n      // Handle nested color objects (with number keys)\n      Object.keys(colors[colorName]).forEach((shade) => {\n        utilities.forEach((utility) => {\n          // Base utility\n          safelist.push(`${utility}-${colorName}-${shade}`);\n\n          // Variant utilities\n          variants.forEach((variant) => {\n            safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n          });\n        });\n      });\n    } else {\n      // Handle direct color values\n      utilities.forEach((utility) => {\n        safelist.push(`${utility}-${colorName}`);\n\n        variants.forEach((variant) => {\n          safelist.push(`${variant}${utility}-${colorName}`);\n        });\n      });\n    }\n  });\n\n  // Generate typography classes\n  Object.entries(typography).forEach(([family, sizes]) => {\n    Object.keys(sizes).forEach((size) => {\n      // Base typography classes\n      safelist.push(`text-${family}-${size}`);\n\n      // Add variants\n      variants.forEach((variant) => {\n        safelist.push(`${variant}text-${family}-${size}`);\n      });\n    });\n  });\n\n  const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n  const typographyClasses = Object.entries(typography).flatMap(\n    ([category, sizes]) =>\n      Object.keys(sizes).map((size) => `text-${category}-${size}`)\n  );\n\n  // Generate responsive variants\n  const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n    breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n  );\n\n  return [\n    ...typographyClasses,\n    ...responsiveTypographyClasses\n    // ... rest of your safelist\n  ];\n};\n\nexport const focusRingStyles =\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React from \"react\";\nimport { cn } from \"../utils\";\nimport { Text } from \"./Text\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nexport type OptionProps = {\n  label: React.ReactNode;\n  value: string;\n  /** Optional color override for specific items like \"Logout\" in red */\n  color?: \"default\" | \"danger\";\n  /** Optional disabled state */\n  disabled?: boolean;\n  onChange?: (value: string) => void;\n  selected?: boolean;\n  className?: string;\n};\n\nexport const Option = ({\n  value,\n  label,\n  onChange,\n  selected,\n  color,\n  disabled,\n  className\n}: OptionProps) => (\n  <button\n    type=\"button\"\n    disabled={disabled}\n    className={cn(\n      \"relative w-full text-left px-2 py-1.5 text-sm rounded\",\n      \"cursor-pointer hover:bg-gray-100\",\n      \"disabled:opacity-50 disabled:cursor-not-allowed\",\n      selected && \"bg-gray-100\",\n      \"flex items-center gap-2\",\n      focusRingStyles,\n      className\n    )}\n    onClick={() => {\n      onChange?.(value);\n    }}\n  >\n    <Text\n      variant=\"body-default-medium\"\n      color={color === \"danger\" ? \"danger\" : \"inherit\"}\n    >\n      {label}\n    </Text>\n  </button>\n);\n"]}

package/dist/components/Pressable.cjs

@@ -1,2 +1,2 @@
-'use strict';var i=require('react');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var i__default=/*#__PURE__*/_interopDefault(i);var e="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var l=({children:s,type:o="button",className:r,disabled:t,...n})=>i__default.default.createElement("button",{type:o,disabled:t,className:`appearance-none hover:opacity-80 transition-all active:scale-95 ${e} ${r} ${t?"opacity-50 cursor-not-allowed":""}`,...n},s);if (exports.default) module.exports = exports.default;exports.Pressable=l;//# sourceMappingURL=Pressable.cjs.map
+'use strict';var r=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var r__default=/*#__PURE__*/_interopDefault(r);var s="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";function o(...t){return tailwindMerge.twMerge(clsx.clsx(t))}var l=r__default.default.forwardRef(({children:t,type:n="button",className:i,disabled:e,...a},c)=>r__default.default.createElement("button",{ref:c,type:n,disabled:e,className:o("appearance-none hover:opacity-80 transition-all active:scale-95",s,e&&"opacity-50 cursor-not-allowed",i),...a},t));l.displayName="Pressable";if (exports.default) module.exports = exports.default;exports.Pressable=l;//# sourceMappingURL=Pressable.cjs.map
 //# sourceMappingURL=Pressable.cjs.map

package/dist/components/Pressable.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/components/Pressable.tsx"],"names":["focusRingStyles","Pressable","children","type","className","disabled","props","React"],"mappings":"oJAmEO,IAAMA,EACX,qGC/DK,CAAA,IAAMC,EAAsC,CAAC,CAClD,QAAAC,CAAAA,CAAAA,CACA,KAAAC,CAAO,CAAA,QAAA,CACP,UAAAC,CACA,CAAA,QAAA,CAAAC,EACA,GAAGC,CACL,CACEC,GAAAA,kBAAAA,CAAA,cAAC,QAEC,CAAA,CAAA,IAAA,CAAMJ,EACN,QAAUE,CAAAA,CAAAA,CACV,UAAW,CAAmEL,gEAAAA,EAAAA,CAAe,CAAII,CAAAA,EAAAA,CAAS,IAAIC,CAAW,CAAA,+BAAA,CAAkC,EAAE,CAC5J,CAAA,CAAA,GAAGC,GAEHJ,CACH","file":"Pressable.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"]}
+{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/utils/index.ts","../../src/components/Pressable.tsx"],"names":["focusRingStyles","cn","inputs","twMerge","clsx","Pressable","React","children","type","className","disabled","props","ref"],"mappings":"iNAmEO,IAAMA,CAAAA,CACX,qGCpEF,CAGO,SAASC,CAAAA,CAAAA,GAAMC,CAAsB,CAAA,CAC1C,OAAOC,qBAAAA,CAAQC,SAAKF,CAAAA,CAAM,CAAC,CAC7B,CCCaG,IAAAA,CAAAA,CAAYC,kBAAM,CAAA,UAAA,CAC7B,CAAC,CAAE,SAAAC,CAAU,CAAA,IAAA,CAAAC,CAAO,CAAA,QAAA,CAAU,SAAAC,CAAAA,CAAAA,CAAW,QAAAC,CAAAA,CAAAA,CAAU,GAAGC,CAAM,CAAGC,CAAAA,CAAAA,GAC7DN,kBAAA,CAAA,aAAA,CAAC,QACC,CAAA,CAAA,GAAA,CAAKM,EACL,IAAMJ,CAAAA,CAAAA,CACN,QAAUE,CAAAA,CAAAA,CACV,SAAWT,CAAAA,CAAAA,CACT,iEACAD,CAAAA,CAAAA,CACAU,GAAY,+BACZD,CAAAA,CACF,CACC,CAAA,GAAGE,CAEHJ,CAAAA,CAAAA,CACH,CAEJ,EAEAF,EAAU,WAAc,CAAA,WAAA","file":"Pressable.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"]}

package/dist/components/Pressable.js

@@ -1,2 +1,2 @@
-import i from'react';var e="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var l=({children:s,type:o="button",className:r,disabled:t,...n})=>i.createElement("button",{type:o,disabled:t,className:`appearance-none hover:opacity-80 transition-all active:scale-95 ${e} ${r} ${t?"opacity-50 cursor-not-allowed":""}`,...n},s);if (exports.default) module.exports = exports.default;export{l as Pressable};//# sourceMappingURL=Pressable.js.map
+import r from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';var s="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";function o(...t){return twMerge(clsx(t))}var l=r.forwardRef(({children:t,type:n="button",className:i,disabled:e,...a},c)=>r.createElement("button",{ref:c,type:n,disabled:e,className:o("appearance-none hover:opacity-80 transition-all active:scale-95",s,e&&"opacity-50 cursor-not-allowed",i),...a},t));l.displayName="Pressable";if (exports.default) module.exports = exports.default;export{l as Pressable};//# sourceMappingURL=Pressable.js.map
 //# sourceMappingURL=Pressable.js.map

package/dist/components/Pressable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/components/Pressable.tsx"],"names":["focusRingStyles","Pressable","children","type","className","disabled","props","React"],"mappings":"qBAmEO,IAAMA,EACX,qGC/DK,CAAA,IAAMC,EAAsC,CAAC,CAClD,QAAAC,CAAAA,CAAAA,CACA,KAAAC,CAAO,CAAA,QAAA,CACP,UAAAC,CACA,CAAA,QAAA,CAAAC,EACA,GAAGC,CACL,CACEC,GAAAA,CAAAA,CAAA,cAAC,QAEC,CAAA,CAAA,IAAA,CAAMJ,EACN,QAAUE,CAAAA,CAAAA,CACV,UAAW,CAAmEL,gEAAAA,EAAAA,CAAe,CAAII,CAAAA,EAAAA,CAAS,IAAIC,CAAW,CAAA,+BAAA,CAAkC,EAAE,CAC5J,CAAA,CAAA,GAAGC,GAEHJ,CACH","file":"Pressable.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"]}
+{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/utils/index.ts","../../src/components/Pressable.tsx"],"names":["focusRingStyles","cn","inputs","twMerge","clsx","Pressable","React","children","type","className","disabled","props","ref"],"mappings":"kFAmEO,IAAMA,CAAAA,CACX,qGCpEF,CAGO,SAASC,CAAAA,CAAAA,GAAMC,CAAsB,CAAA,CAC1C,OAAOC,OAAAA,CAAQC,IAAKF,CAAAA,CAAM,CAAC,CAC7B,CCCaG,IAAAA,CAAAA,CAAYC,CAAM,CAAA,UAAA,CAC7B,CAAC,CAAE,SAAAC,CAAU,CAAA,IAAA,CAAAC,CAAO,CAAA,QAAA,CAAU,SAAAC,CAAAA,CAAAA,CAAW,QAAAC,CAAAA,CAAAA,CAAU,GAAGC,CAAM,CAAGC,CAAAA,CAAAA,GAC7DN,CAAA,CAAA,aAAA,CAAC,QACC,CAAA,CAAA,GAAA,CAAKM,EACL,IAAMJ,CAAAA,CAAAA,CACN,QAAUE,CAAAA,CAAAA,CACV,SAAWT,CAAAA,CAAAA,CACT,iEACAD,CAAAA,CAAAA,CACAU,GAAY,+BACZD,CAAAA,CACF,CACC,CAAA,GAAGE,CAEHJ,CAAAA,CAAAA,CACH,CAEJ,EAEAF,EAAU,WAAc,CAAA,WAAA","file":"Pressable.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"]}

package/dist/components/ProfileCard.cjs

@@ -1,10 +1,2 @@
-'use strict';var e=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),icons=require('@deckai/icons'),m=require('@radix-ui/react-tooltip'),M=require('@radix-ui/react-switch');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 e__namespace=/*#__PURE__*/_interopNamespace(e);var m__namespace=/*#__PURE__*/_interopNamespace(m);var M__namespace=/*#__PURE__*/_interopNamespace(M);function p(...t){return tailwindMerge.twMerge(clsx.clsx(t))}var j={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB"},Q={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},X=t=>{if(!t)return {width:"24px",height:"24px"};let o=Array.isArray(t)?t:[t],r={},a;return o.forEach(i=>{if(typeof i=="number")a=`${i}px`;else {let[s,n]=i.split(":"),c=parseInt(n,10);r[`@media (min-width: ${Q[s]})`]=`${c}px`;}}),{width:a||"24px",height:a||"24px",...Object.entries(r).reduce((i,[s,n])=>({...i,[s]:{width:n,height:n}}),{})}},d=e__namespace.default.forwardRef(({name:t,size:o=24,color:r="primary",title:a,className:i,style:s={},...n},c)=>{let f=icons.IconMap[t],T=X(o);return e__namespace.default.createElement("div",{className:p("flex justify-center items-center",i),style:{...T,"--icon-stroke":j[r],...s}},e__namespace.default.createElement(f,{ref:c,"aria-hidden":!a,"aria-label":a,stroke:t.includes("filled")?void 0:j[r],...n}))});d.displayName="Icon";var J={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},U=t=>{let[o,r]=t.split("-");return o==="heading"?J[r]||"p":o==="label"?"label":"p"},Y={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},Z=t=>t?(Array.isArray(t)?t:[t]).map(r=>{if(r.includes(":")){let[a,i]=r.split(":");return `${a}:text-${i}`}return `text-${r}`}).join(" "):"text-body-default",l=e__namespace.default.forwardRef(({variant:t="body-default",color:o="text-primary",as:r,className:a,children:i,weight:s,...n},c)=>{let f=Z(t),T=o&&o==="inherit"?"inherit":o?`text-${o}`:"",w=e__namespace.default.useMemo(()=>{let N=typeof t=="string"?t.split(":").pop():Array.isArray(t)?t[0].split(":").pop():"body-default";return U(N)},[t]);return e__namespace.default.createElement(r||w,{ref:c,className:`font-sans antialiased ${f} ${T} ${s?`!${Y[s]}`:""} ${a??""}`,...n},i)});l.displayName="Text";var V={pink:"bg-tertiary-5",orange:"bg-tertiary-15",green:"bg-tertiary-25",purple:"bg-secondary-300"},ee=t=>{let o=Object.keys(V),r=t.split("").reduce((s,n)=>n.charCodeAt(0)+((s<<5)-s),0),a=Math.abs(r)%o.length,i=o[a];return console.log({input:t,hash:r,variantKeys:o,index:a,selectedVariant:i}),i},$=e__namespace.forwardRef(({className:t,variant:o,iconName:r,children:a,...i},s)=>{let n=o||(typeof a=="string"?ee(a):"pink");return e__namespace.createElement("span",{ref:s,className:p("inline-flex items-center gap-2","rounded-lg px-2 py-1","text-sm font-medium",V[n],t),...i},r&&e__namespace.createElement(d,{size:16,name:r}),e__namespace.createElement(l,{variant:"body-xxs-medium"},a))});$.displayName="Badge";var b="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var te={black:"bg-text-primary text-white",accent:"bg-primary-100 text-white",secondary:"bg-secondary-100 text-secondary"},A={black:"border border-text-primary text-text-primary",accent:"border border-primary-100 text-primary-100",secondary:"border border-text-secondary text-secondary"},B=e__namespace.forwardRef(({className:t,variant:o="filled",color:r="black",isLoading:a=!1,children:i,disabled:s,...n},c)=>e__namespace.createElement("button",{ref:c,className:p(`
-          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`,b,o==="filled"?te[r]:A[r],t),disabled:s||a,type:"button",...n},typeof i=="string"?e__namespace.createElement(l,{variant:["sm:body-default-bold","body-xxs-semibold"],color:"inherit"},i):i));B.displayName="Button";var u=({content:t,children:o,side:r="bottom",align:a="center",className:i,delayDuration:s=200})=>e__namespace.createElement(m__namespace.Provider,{delayDuration:s},e__namespace.createElement(m__namespace.Root,null,e__namespace.createElement(m__namespace.Trigger,{asChild:!0},e__namespace.createElement("span",{tabIndex:0},o)),e__namespace.createElement(m__namespace.Portal,null,e__namespace.createElement(m__namespace.Content,{side:r,align:a,sideOffset:4,className:p("z-50 overflow-hidden rounded-lg","bg-text-primary px-3 py-1.5","text-xs text-white","animate-in fade-in-0 zoom-in-95","data-[state=closed]:animate-out data-[state=closed]:fade-out-0","data-[side=bottom]:slide-in-from-top-2","data-[side=top]:slide-in-from-bottom-2","select-none","max-w-60",i)},t,e__namespace.createElement(m__namespace.Arrow,{className:"fill-text-primary",width:10,height:5})))));var P=e__namespace.forwardRef(({className:t,label:o,description:r,...a},i)=>e__namespace.createElement("div",{className:"flex items-center gap-2"},e__namespace.createElement(M__namespace.Root,{className:p("peer inline-flex h-6 w-11 shrink-0 cursor-pointer","items-center rounded-full border-2 border-transparent","transition-colors focus-visible:outline-none",b,"disabled:cursor-not-allowed disabled:opacity-50","data-[state=checked]:bg-primary-50 data-[state=unchecked]:bg-secondary-50",t),...a,ref:i},e__namespace.createElement(M__namespace.Thumb,{className:p("pointer-events-none block h-5 w-5","rounded-full bg-white shadow-lg ring-0","transition-transform","data-[state=checked]:translate-x-5","data-[state=unchecked]:translate-x-0")})),(o||r)&&e__namespace.createElement("div",{className:"flex flex-col"},o&&e__namespace.createElement("label",{className:"text-sm font-medium text-text-primary",htmlFor:a.id},o),r&&e__namespace.createElement("span",{className:"text-xs text-text-secondary"},r))));P.displayName="Switch";var H=({children:t,type:o="button",className:r,disabled:a,...i})=>e__namespace.default.createElement("button",{type:o,disabled:a,className:`appearance-none hover:opacity-80 transition-all active:scale-95 ${b} ${r} ${a?"opacity-50 cursor-not-allowed":""}`,...i},t);var G=({children:t,color:o="primary",className:r,...a})=>e__namespace.default.createElement(H,{className:p("hover:bg-primary-100 rounded bg-secondary-400 px-2 py-1 sm:px-3 sm:py-1.5 h-min hover:text-white",o==="primary"?"text-primary-100":"text-primary",r),...a},typeof t=="string"?e__namespace.default.createElement(l,{color:"inherit",variant:["md:body-default-medium","body-xxs-medium"],className:"truncate"},t):t);var R=({className:t,onClick:o})=>e__namespace.default.createElement(H,{className:p("absolute lg:top-10 md:top-8 top-4 lg:right-10 md:right-8 right-4 lg:px-2 lg:py-2 px-1 py-1 rounded-lg",A.black,t),onClick:o},e__namespace.default.createElement(d,{color:"primary",name:"edit-2"}));R.displayName="EditButton";var E=4,L=3,ot=({profileImage:t,name:o,location:r,memberSince:a,interests:i,badges:s,isEditMode:n=!1,onEditClick:c})=>{let f=e.useId(),T=e.useMemo(()=>i?.slice(0,E)||[],[i]),w=e.useMemo(()=>s?.slice(0,L)||[],[s]),I=i&&i.length>E,N=s&&s.length>L,F=i?i.length-E:0,W=s?s.length-L:0;return e__namespace.default.createElement("div",{className:"lg:p-10 md:p-8 p-4 rounded-xl border border-stroke relative flex gap-6 md:flex-row flex-col"},n&&e__namespace.default.createElement(R,{onClick:c}),e__namespace.default.createElement("div",{className:"flex md:flex-row flex-col gap-6"},e__namespace.default.createElement("div",{className:"flex flex-col gap-4 md:items-start items-center"},e__namespace.default.createElement("div",{className:"flex items-center justify-center xl:w-[206px] lg:w-[164px] w-[147px]"},e__namespace.default.createElement("img",{src:t,alt:`Profile for ${o}`,className:"object-cover rounded-lg w-full h-full"})),n&&e__namespace.default.createElement(B,{variant:"filled"},"Preview Profile"),n&&e__namespace.default.createElement("div",{className:"hidden sm:flex sm:flex-col gap-1 w-full"},e__namespace.default.createElement("div",{className:"flex flex-row justify-between"},e__namespace.default.createElement("div",null,e__namespace.default.createElement(l,{as:"label",htmlFor:f,variant:"body-default-semibold"},"Private Mode"),e__namespace.default.createElement("div",{className:"flex items-center gap-1"},e__namespace.default.createElement(l,{variant:"body-default",color:"text-secondary"},"What is this?"),e__namespace.default.createElement(u,{content:"Turning this on makes you not appear in searches. People who follow you will still be able to view your profile. Go to your settings to make changes to Private Mode."},e__namespace.default.createElement(d,{name:"message-question",color:"secondary",size:16})))),e__namespace.default.createElement(P,{id:f})))),e__namespace.default.createElement("div",{className:"flex flex-col gap-2"},e__namespace.default.createElement(l,{as:"h1",variant:["lg:heading-lg","md:heading-md","heading-sm"],className:"text-wrap text-center md:text-left"},o),e__namespace.default.createElement("div",{className:"flex gap-2 items-center sm:justify-start justify-center"},e__namespace.default.createElement(d,{name:"location",color:"secondary"}),e__namespace.default.createElement(u,{content:r},e__namespace.default.createElement(l,{variant:["lg:body-lg","md:body-default","body-xs"],color:"text-secondary",className:"sm:text-left text-center truncate max-w-[300px]"},r))),e__namespace.default.createElement("div",{className:"flex gap-2 items-center sm:justify-start justify-center"},e__namespace.default.createElement(d,{name:"profile",color:"secondary"}),e__namespace.default.createElement(u,{content:`Member Since ${a}`},e__namespace.default.createElement(l,{variant:["lg:body-lg","md:body-default","body-xs"],color:"text-secondary",className:"sm:text-left text-center truncate max-w-[300px]"},"Member Since"," ",e__namespace.default.createElement(l,{as:"span",variant:["lg:body-lg-semibold","md:body-default-bold","body-xs-bold"]},a)))),i&&e__namespace.default.createElement("div",{className:"flex flex-col gap-2 pt-4"},e__namespace.default.createElement(l,{variant:["sm:heading-xs","body-default-bold"],className:"sm:text-left text-center"},"Interests"),e__namespace.default.createElement("div",{className:"flex flex-wrap gap-2 sm:justify-start justify-center items-center"},T.map((h,C)=>e__namespace.default.createElement(G,{key:C},h)),I&&e__namespace.default.createElement(u,{content:i.slice(E).join(", ")},e__namespace.default.createElement(l,{variant:"label-default"},"+",F," more")))),s&&e__namespace.default.createElement("div",{className:"flex gap-2 flex-wrap py-4 sm:justify-start justify-center items-center"},w.map((h,C)=>e__namespace.default.createElement($,{key:C,...h})),N&&e__namespace.default.createElement(u,{content:s.slice(L).map(h=>h.children).join(", ")},e__namespace.default.createElement(l,{variant:"label-default"},"+",W," more"))),n&&e__namespace.default.createElement("div",{className:"sm:hidden flex justify-between border-t-[1px] border-secondary-50 pt-4"},e__namespace.default.createElement("div",null,e__namespace.default.createElement(l,{as:"label",htmlFor:f,variant:"body-default-semibold"},"Private Mode"),e__namespace.default.createElement("div",{className:"flex items-center gap-1"},e__namespace.default.createElement(l,{variant:"body-default",color:"text-secondary"},"What is this?"),e__namespace.default.createElement(u,{content:"Turning this on makes you not appear in searches. People who follow you will still be able to view your profile. Go to your settings to make changes to Private Mode."},e__namespace.default.createElement(d,{name:"message-question",color:"secondary",size:16})))),e__namespace.default.createElement(P,{id:f})))))};if (exports.default) module.exports = exports.default;exports.ProfileCard=ot;//# sourceMappingURL=ProfileCard.cjs.map
+'use strict';var r=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),icons=require('@deckai/icons'),m=require('@radix-ui/react-tooltip'),M=require('@radix-ui/react-switch');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 r__namespace=/*#__PURE__*/_interopNamespace(r);var m__namespace=/*#__PURE__*/_interopNamespace(m);var M__namespace=/*#__PURE__*/_interopNamespace(M);function p(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var R={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB",disabled:"#888888"},D={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},F=e=>{if(!e)return {width:"24px",height:"24px"};let s=Array.isArray(e)?e:[e],i={},o;return s.forEach(t=>{if(typeof t=="number")o=`${t}px`;else {let[n,a]=t.split(":"),c=parseInt(a,10);i[`@media (min-width: ${D[n]})`]=`${c}px`;}}),{width:o||"24px",height:o||"24px",...Object.entries(i).reduce((t,[n,a])=>({...t,[n]:{width:a,height:a}}),{})}},f=r__namespace.default.forwardRef(({name:e,size:s=24,color:i="primary",title:o,className:t,style:n={},...a},c)=>{let d=icons.IconMap[e],g=F(s);return r__namespace.default.createElement("div",{className:p("flex justify-center items-center",t),style:{...g,"--icon-stroke":R[i],...n}},r__namespace.default.createElement(d,{ref:c,"aria-hidden":!o,"aria-label":o,stroke:e.includes("filled")?void 0:R[i],...a}))});f.displayName="Icon";var q={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},Q=e=>{let[s,i]=e.split("-");return s==="heading"?q[i]||"p":s==="label"?"label":"p"},X={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},J=e=>e?(Array.isArray(e)?e:[e]).map(i=>{if(i.includes(":")){let[o,t]=i.split(":");return `${o}:text-${t}`}return `text-${i}`}).join(" "):"text-body-default",l=r__namespace.default.forwardRef(({variant:e="body-default",color:s="primary",as:i,className:o,children:t,weight:n,...a},c)=>{let d=J(e),g=s==="inherit"?"text-inherit":`text-text-${s}`,L=r__namespace.default.useMemo(()=>{let w=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return Q(w)},[e]);return r__namespace.default.createElement(i||L,{ref:c,className:`font-sans antialiased ${d} ${g} ${n?`!${X[n]}`:""} ${o??""}`,...a},t)});l.displayName="Text";var I={pink:"bg-tertiary-5",orange:"bg-tertiary-15",green:"bg-tertiary-25",purple:"bg-secondary-300"},U=e=>{let s=Object.keys(I),i=e.split("").reduce((n,a)=>a.charCodeAt(0)+((n<<5)-n),0),o=Math.abs(i)%s.length,t=s[o];return console.log({input:e,hash:i,variantKeys:s,index:o,selectedVariant:t}),t},k=r__namespace.forwardRef(({className:e,variant:s,iconName:i,children:o,...t},n)=>{let a=s||(typeof o=="string"?U(o):"pink");return r__namespace.createElement("span",{ref:n,className:p("inline-flex items-center gap-2","rounded px-2 py-1.5","text-sm font-medium",I[a],e),...t},i&&r__namespace.createElement(f,{size:16,name:i}),r__namespace.createElement(l,{variant:"body-xxs-semibold",className:"mt-0.5"},o))});k.displayName="Badge";var b=({content:e,children:s,side:i="bottom",align:o="center",className:t,delayDuration:n=200,defaultOpen:a,open:c,onOpenChange:d})=>r__namespace.createElement(m__namespace.Provider,{delayDuration:n},r__namespace.createElement(m__namespace.Root,{defaultOpen:a,open:c,onOpenChange:d},r__namespace.createElement(m__namespace.Trigger,{asChild:!0},r__namespace.createElement("span",{tabIndex:0},s)),r__namespace.createElement(m__namespace.Portal,null,r__namespace.createElement(m__namespace.Content,{side:i,align:o,sideOffset:4,className:p("z-50 overflow-hidden rounded-lg","bg-black px-3 py-1.5","text-xs text-white","animate-in fade-in-0 zoom-in-95","data-[state=closed]:animate-out data-[state=closed]:fade-out-0","data-[side=bottom]:slide-in-from-top-2","data-[side=top]:slide-in-from-bottom-2","select-none","max-w-60",t)},e,r__namespace.createElement(m__namespace.Arrow,{className:"fill-text-primary",width:10,height:5})))));var v="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var C=r__namespace.forwardRef(({className:e,label:s,description:i,...o},t)=>r__namespace.createElement("div",{className:"flex items-center gap-2"},r__namespace.createElement(M__namespace.Root,{className:p("peer inline-flex h-6 w-11 shrink-0 cursor-pointer","items-center rounded-full border-2 border-transparent","transition-colors focus-visible:outline-none",v,"disabled:cursor-not-allowed disabled:opacity-50","data-[state=checked]:bg-primary-50 data-[state=unchecked]:bg-secondary-50",e),...o,ref:t},r__namespace.createElement(M__namespace.Thumb,{className:p("pointer-events-none block h-5 w-5","rounded-full bg-white shadow-lg ring-0","transition-transform","data-[state=checked]:translate-x-5","data-[state=unchecked]:translate-x-0")})),(s||i)&&r__namespace.createElement("div",{className:"flex flex-col"},s&&r__namespace.createElement("label",{className:"text-sm font-medium text-text",htmlFor:o.id},s),i&&r__namespace.createElement("span",{className:"text-xs text-text-secondary"},i))));C.displayName="Switch";var H=r__namespace.default.forwardRef(({children:e,type:s="button",className:i,disabled:o,...t},n)=>r__namespace.default.createElement("button",{ref:n,type:s,disabled:o,className:p("appearance-none hover:opacity-80 transition-all active:scale-95",v,o&&"opacity-50 cursor-not-allowed",i),...t},e));H.displayName="Pressable";var V=({children:e,color:s="primary",className:i,onClose:o,...t})=>{let[n,a]=r.useState(!1),c=r.useCallback(()=>{a(!0);},[]),d=r.useCallback(()=>{a(!1);},[]),g=r__namespace.default.createElement("div",{className:p("flex gap-2",o?"justify-between items-center":"items-center justify-center","hover:bg-primary-100 rounded bg-secondary-400 px-2 py-1 sm:px-3 sm:py-1.5 h-min hover:text-white",s==="primary"?"text-primary-100":"text-text",i),onMouseEnter:c,onMouseLeave:d},typeof e=="string"?r__namespace.default.createElement(l,{color:"inherit",variant:["md:body-default-medium","body-xxs-medium"],className:"truncate pt-0.5"},e):e,o&&r__namespace.default.createElement(H,{...t,onClick:o,className:"flex items-center justify-center"},r__namespace.default.createElement(f,{name:"close",size:10,color:n?"white":"primaryBlue"})));return o?g:r__namespace.default.createElement(H,{...t},g)};var E=4,P=3,Ke=({profileImage:e,name:s,location:i,memberSince:o,interests:t,badges:n,isEditMode:a=!1,onEditClick:c})=>{let d=r.useId(),g=r.useMemo(()=>t?.slice(0,E)||[],[t]),L=r.useMemo(()=>n?.slice(0,P)||[],[n]),$=t&&t.length>E,w=n&&n.length>P,z=t?t.length-E:0,G=n?n.length-P:0;return r__namespace.default.createElement("div",{className:"lg:p-10 md:p-8 p-4 rounded-xl border border-stroke relative flex gap-6 md:flex-row flex-col"},r__namespace.default.createElement("div",{className:"flex md:flex-row flex-col gap-6"},r__namespace.default.createElement("div",{className:"flex flex-col gap-4 md:items-start items-center"},r__namespace.default.createElement("div",{className:"flex items-center justify-center w-[164px] h-[164px]"},r__namespace.default.createElement("img",{src:e,alt:`Profile for ${s}`,className:"object-cover rounded-full w-full h-full"}))),r__namespace.default.createElement("div",{className:"flex flex-col gap-2"},r__namespace.default.createElement(l,{as:"h1",variant:["lg:heading-lg","md:heading-md","heading-sm"],className:"text-wrap text-center md:text-left"},s),n&&r__namespace.default.createElement("div",{className:"flex gap-2 flex-wrap py-2 sm:justify-start justify-center items-center"},L.map((h,N)=>r__namespace.default.createElement(k,{key:N,...h})),w&&r__namespace.default.createElement(b,{content:n.slice(P).map(h=>h.children).join(", ")},r__namespace.default.createElement(l,{variant:"label-default"},"+",G," more"))),r__namespace.default.createElement("div",{className:"flex gap-2 items-center sm:justify-start justify-center pt-1"},r__namespace.default.createElement(f,{name:"location",color:"secondary"}),r__namespace.default.createElement(l,{variant:["lg:body-lg","md:body-default","body-xs"],color:"secondary",className:"sm:text-left text-center truncate max-w-[300px]"},i)),r__namespace.default.createElement("div",{className:"flex gap-2 items-center sm:justify-start justify-center"},r__namespace.default.createElement(f,{name:"profile",color:"secondary"}),r__namespace.default.createElement(l,{variant:["lg:body-lg","md:body-default","body-xs"],color:"secondary",className:"sm:text-left text-center truncate max-w-[300px]"},"Member Since"," ",r__namespace.default.createElement(l,{as:"span",variant:["lg:body-lg-semibold","md:body-default-bold","body-xs-bold"]},o))),t&&r__namespace.default.createElement("div",{className:"flex flex-col gap-2 pt-4"},r__namespace.default.createElement(l,{variant:["sm:heading-xs","body-default-bold"],className:"sm:text-left text-center"},"Interests"),r__namespace.default.createElement("div",{className:"flex flex-wrap gap-2 sm:justify-start justify-center items-center"},g.map((h,N)=>r__namespace.default.createElement(V,{key:N},h)),$&&r__namespace.default.createElement(b,{content:t.slice(E).join(", ")},r__namespace.default.createElement(l,{variant:"label-default"},"+",z," more")))),a&&r__namespace.default.createElement("div",{className:"sm:hidden flex justify-between border-t-[1px] border-secondary-50 pt-4"},r__namespace.default.createElement("div",null,r__namespace.default.createElement(l,{as:"label",htmlFor:d,variant:"body-default-semibold"},"Private Mode"),r__namespace.default.createElement("div",{className:"flex items-center gap-1"},r__namespace.default.createElement(l,{variant:"body-default",color:"secondary"},"What is this?"),r__namespace.default.createElement(b,{content:"Turning this on makes you not appear in searches. People who follow you will still be able to view your profile. Go to your settings to make changes to Private Mode."},r__namespace.default.createElement(f,{name:"message-question",color:"secondary",size:16})))),r__namespace.default.createElement(C,{id:d})))))};if (exports.default) module.exports = exports.default;exports.ProfileCard=Ke;//# sourceMappingURL=ProfileCard.cjs.map
 //# sourceMappingURL=ProfileCard.cjs.map