@deckai/deck-ui 0.0.18 → 0.0.19

package/dist/components/Sidebar.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useMediaQuery.ts","../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/components/Sidebar.tsx"],"names":["useIsomorphicLayoutEffect","useEffect","useMediaQuery","query","matches","setMatches","useState","getMatches","useCallback","mediaQuery","handleChange","cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","sizeStyles","focusRingStyles","Pressable","children","type","disabled","Sidebar","open","onClose","width","footer","position","isMobile","handleEscapeKey","event","positionClasses","useMemo","i"],"mappings":"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","file":"Sidebar.cjs","sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\n\nconst useIsomorphicLayoutEffect =\n  typeof window !== \"undefined\" ? useEffect : () => {};\n\nexport const useMediaQuery = (query: string): boolean => {\n  // Initialize with null to prevent hydration mismatch\n  const [matches, setMatches] = useState<boolean | null>(null);\n\n  const getMatches = useCallback((query: string): boolean => {\n    if (typeof window !== \"undefined\") {\n      return window.matchMedia(query).matches;\n    }\n    return false;\n  }, []);\n\n  // Update matches after mount to prevent hydration mismatch\n  useIsomorphicLayoutEffect(() => {\n    setMatches(getMatches(query));\n  }, [query, getMatches]);\n\n  useEffect(() => {\n    if (typeof window !== \"undefined\") {\n      const mediaQuery = window.matchMedia(query);\n\n      const handleChange = () => {\n        setMatches(getMatches(query));\n      };\n\n      mediaQuery.addEventListener(\"change\", handleChange);\n\n      return () => {\n        mediaQuery.removeEventListener(\"change\", handleChange);\n      };\n    }\n  }, [query, getMatches]);\n\n  // Return false during SSR, actual value after hydration\n  return matches ?? false;\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n  name: IconName;\n  /** @default 24 */\n  size?: ResponsiveSize | ResponsiveSize[];\n  /** @default primary */\n  color?: IconColors;\n  title?: string;\n  className?: string;\n  style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n  primary: \"#080808\",\n  secondary: \"#666666\",\n  white: \"#ffffff\",\n  primaryBlue: \"#089CCB\",\n  disabled: \"#888888\",\n  danger: \"#FF0000\"\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:border-2 focus-visible:border-primary-100\";\n\nexport const focusRingStylesCoerced = \"border-2 border-primary-100\";\n","import React, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable = React.forwardRef<HTMLButtonElement, PressableProps>(\n  ({ children, type = \"button\", className, disabled, ...props }, ref) => (\n    <button\n      ref={ref}\n      type={type}\n      disabled={disabled}\n      className={cn(\n        \"appearance-none hover:opacity-80 transition-all active:scale-95\",\n        focusRingStyles,\n        disabled && \"opacity-50 cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n);\n\nPressable.displayName = \"Pressable\";\n","import React, { useCallback, useEffect, useMemo, type ReactNode } from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { useMediaQuery } from \"../hooks/useMediaQuery\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\nimport { Pressable } from \"./Pressable\";\n\nexport type SidebarProps = {\n  /**\n   * The content to be rendered inside the sidebar\n   */\n  children: ReactNode;\n  /**\n   * Whether the sidebar is open\n   */\n  open: boolean;\n  /**\n   * Callback fired when the sidebar is closed\n   */\n  onClose: () => void;\n  /** @default left */\n  position?: \"left\" | \"right\";\n  /**\n   * The width of the sidebar on desktop. Defaults to 480px.\n   */\n  width?: number;\n  /**\n   * Additional class names to be applied to the sidebar\n   */\n  className?: string;\n  /**\n   * The title to display in the header\n   */\n  title?: string;\n  /**\n   * Optional footer content\n   */\n  footer?: ReactNode;\n};\n\nexport const Sidebar = ({\n  children,\n  open,\n  onClose,\n  width = 480,\n  className,\n  title,\n  footer,\n  position = \"left\"\n}: SidebarProps) => {\n  const isMobile = useMediaQuery(\"(max-width: 834px)\");\n\n  // Handle escape key press\n  const handleEscapeKey = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onClose();\n      }\n    },\n    [onClose]\n  );\n\n  useEffect(() => {\n    if (open) {\n      document.addEventListener(\"keydown\", handleEscapeKey);\n      // Prevent body scroll when sidebar is open\n      document.body.style.overflow = \"hidden\";\n    } else {\n      // Ensure we clean up when sidebar is closed\n      document.removeEventListener(\"keydown\", handleEscapeKey);\n      document.body.style.overflow = \"unset\";\n    }\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleEscapeKey);\n      document.body.style.overflow = \"unset\";\n    };\n  }, [open, handleEscapeKey]);\n\n  const positionClasses = useMemo(\n    () =>\n      position === \"right\"\n        ? {\n            position: \"right-0\",\n            enter: \"data-[state=open]:animate-slide-in-from-right\",\n            exit: \"data-[state=closed]:animate-slide-out-to-right\",\n            transform: \"translate-x-full\"\n          }\n        : {\n            position: \"left-0\",\n            enter: \"data-[state=open]:animate-slide-in-from-left\",\n            exit: \"data-[state=closed]:animate-slide-out-to-left\",\n            transform: \"-translate-x-full\"\n          },\n    [position]\n  );\n\n  return (\n    <Dialog.Root open={open} onOpenChange={onClose}>\n      <Dialog.Portal>\n        <Dialog.Overlay\n          className={cn(\n            \"fixed inset-0 z-50 bg-sidebarOverlay backdrop-blur-[2px]\",\n            \"data-[state=open]:animate-overlay-show\",\n            \"data-[state=closed]:animate-overlay-hide\"\n          )}\n        />\n        <Dialog.Content\n          className={cn(\n            \"fixed top-0 z-50 flex h-full flex-col bg-white\",\n            positionClasses.position,\n            positionClasses.enter,\n            positionClasses.exit,\n            // During SSR, default to desktop layout\n            typeof window === \"undefined\" || !isMobile\n              ? position === \"right\"\n                ? \"border-l\"\n                : \"border-r\"\n              : \"w-full\",\n            \"border-stroke\",\n            className\n          )}\n          style={{\n            width: typeof window === \"undefined\" || !isMobile ? width : \"100%\"\n          }}\n        >\n          {/* Header */}\n          <div className=\"flex items-center justify-between border-b border-secondary-50 px-8 py-6\">\n            <Dialog.Title className=\"text-heading-xs text-center w-full\">\n              {title}\n            </Dialog.Title>\n            <Dialog.Close asChild>\n              <Pressable\n                className=\"inline-flex items-center justify-center text-secondary hover:bg-secondary-100 rounded-lg\"\n                aria-label=\"Close\"\n              >\n                <Icon name=\"close\" size={12} />\n              </Pressable>\n            </Dialog.Close>\n          </div>\n\n          {/* Content */}\n          <div className=\"flex-1 overflow-y-auto\">\n            <div className=\"p-6\">{children}</div>\n          </div>\n\n          {/* Footer */}\n          {footer && <div className=\"px-6 pb-6 bg-background\">{footer}</div>}\n        </Dialog.Content>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n};\n"]}
+{"version":3,"sources":["../../src/hooks/useMediaQuery.ts","../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/components/Sidebar.tsx"],"names":["useIsomorphicLayoutEffect","useEffect","useMediaQuery","query","matches","setMatches","useState","getMatches","useCallback","mediaQuery","handleChange","cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","sizeStyles","focusRingStyles","Pressable","children","type","disabled","Sidebar","open","onClose","width","footer","position","isMobile","handleEscapeKey","event","positionClasses","useMemo","i"],"mappings":"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","file":"Sidebar.cjs","sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\n\nconst useIsomorphicLayoutEffect =\n  typeof window !== \"undefined\" ? useEffect : () => {};\n\nexport const useMediaQuery = (query: string): boolean => {\n  // Initialize with null to prevent hydration mismatch\n  const [matches, setMatches] = useState<boolean | null>(null);\n\n  const getMatches = useCallback((query: string): boolean => {\n    if (typeof window !== \"undefined\") {\n      return window.matchMedia(query).matches;\n    }\n    return false;\n  }, []);\n\n  // Update matches after mount to prevent hydration mismatch\n  useIsomorphicLayoutEffect(() => {\n    setMatches(getMatches(query));\n  }, [query, getMatches]);\n\n  useEffect(() => {\n    if (typeof window !== \"undefined\") {\n      const mediaQuery = window.matchMedia(query);\n\n      const handleChange = () => {\n        setMatches(getMatches(query));\n      };\n\n      mediaQuery.addEventListener(\"change\", handleChange);\n\n      return () => {\n        mediaQuery.removeEventListener(\"change\", handleChange);\n      };\n    }\n  }, [query, getMatches]);\n\n  // Return false during SSR, actual value after hydration\n  return matches ?? false;\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n  name: IconName;\n  /** @default 24 */\n  size?: ResponsiveSize | ResponsiveSize[];\n  /** @default primary */\n  color?: IconColors;\n  title?: string;\n  className?: string;\n  style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n  primary: \"#080808\",\n  secondary: \"#666666\",\n  white: \"#ffffff\",\n  primaryBlue: \"#089CCB\",\n  disabled: \"#888888\",\n  danger: \"#FF0000\"\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-primary-100\";\nexport const focusRingWithinStyles =\n  \"focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-100\";\nexport const focusRingStylesCoerced = \"ring-2 ring-primary-100\";\n","import React, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable = React.forwardRef<HTMLButtonElement, PressableProps>(\n  ({ children, type = \"button\", className, disabled, ...props }, ref) => (\n    <button\n      ref={ref}\n      type={type}\n      disabled={disabled}\n      className={cn(\n        \"appearance-none hover:opacity-80 transition-all active:scale-95\",\n        focusRingStyles,\n        disabled && \"opacity-50 cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n);\n\nPressable.displayName = \"Pressable\";\n","import React, { useCallback, useEffect, useMemo, type ReactNode } from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { useMediaQuery } from \"../hooks/useMediaQuery\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\nimport { Pressable } from \"./Pressable\";\n\nexport type SidebarProps = {\n  /**\n   * The content to be rendered inside the sidebar\n   */\n  children: ReactNode;\n  /**\n   * Whether the sidebar is open\n   */\n  open: boolean;\n  /**\n   * Callback fired when the sidebar is closed\n   */\n  onClose: () => void;\n  /** @default left */\n  position?: \"left\" | \"right\";\n  /**\n   * The width of the sidebar on desktop. Defaults to 480px.\n   */\n  width?: number;\n  /**\n   * Additional class names to be applied to the sidebar\n   */\n  className?: string;\n  /**\n   * The title to display in the header\n   */\n  title?: string;\n  /**\n   * Optional footer content\n   */\n  footer?: ReactNode;\n};\n\nexport const Sidebar = ({\n  children,\n  open,\n  onClose,\n  width = 480,\n  className,\n  title,\n  footer,\n  position = \"left\"\n}: SidebarProps) => {\n  const isMobile = useMediaQuery(\"(max-width: 834px)\");\n\n  // Handle escape key press\n  const handleEscapeKey = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onClose();\n      }\n    },\n    [onClose]\n  );\n\n  useEffect(() => {\n    if (open) {\n      document.addEventListener(\"keydown\", handleEscapeKey);\n      // Prevent body scroll when sidebar is open\n      document.body.style.overflow = \"hidden\";\n    } else {\n      // Ensure we clean up when sidebar is closed\n      document.removeEventListener(\"keydown\", handleEscapeKey);\n      document.body.style.overflow = \"unset\";\n    }\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleEscapeKey);\n      document.body.style.overflow = \"unset\";\n    };\n  }, [open, handleEscapeKey]);\n\n  const positionClasses = useMemo(\n    () =>\n      position === \"right\"\n        ? {\n            position: \"right-0\",\n            enter: \"data-[state=open]:animate-slide-in-from-right\",\n            exit: \"data-[state=closed]:animate-slide-out-to-right\",\n            transform: \"translate-x-full\"\n          }\n        : {\n            position: \"left-0\",\n            enter: \"data-[state=open]:animate-slide-in-from-left\",\n            exit: \"data-[state=closed]:animate-slide-out-to-left\",\n            transform: \"-translate-x-full\"\n          },\n    [position]\n  );\n\n  return (\n    <Dialog.Root open={open} onOpenChange={onClose}>\n      <Dialog.Portal>\n        <Dialog.Overlay\n          className={cn(\n            \"fixed inset-0 z-50 bg-sidebarOverlay backdrop-blur-[2px]\",\n            \"data-[state=open]:animate-overlay-show\",\n            \"data-[state=closed]:animate-overlay-hide\"\n          )}\n        />\n        <Dialog.Content\n          className={cn(\n            \"fixed top-0 z-50 flex h-full flex-col bg-white\",\n            positionClasses.position,\n            positionClasses.enter,\n            positionClasses.exit,\n            // During SSR, default to desktop layout\n            typeof window === \"undefined\" || !isMobile\n              ? position === \"right\"\n                ? \"border-l\"\n                : \"border-r\"\n              : \"w-full\",\n            \"border-stroke\",\n            className\n          )}\n          style={{\n            width: typeof window === \"undefined\" || !isMobile ? width : \"100%\"\n          }}\n        >\n          {/* Header */}\n          <div className=\"flex items-center justify-between border-b border-secondary-50 px-8 py-6\">\n            <Dialog.Title className=\"text-heading-xs text-center w-full\">\n              {title}\n            </Dialog.Title>\n            <Dialog.Close asChild>\n              <Pressable\n                className=\"inline-flex items-center justify-center text-secondary hover:bg-secondary-100 rounded-lg\"\n                aria-label=\"Close\"\n              >\n                <Icon name=\"close\" size={12} />\n              </Pressable>\n            </Dialog.Close>\n          </div>\n\n          {/* Content */}\n          <div className=\"flex-1 overflow-y-auto\">\n            <div className=\"p-6\">{children}</div>\n          </div>\n\n          {/* Footer */}\n          {footer && <div className=\"px-6 pb-6 bg-background\">{footer}</div>}\n        </Dialog.Content>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n};\n"]}

package/dist/components/Sidebar.js

@@ -1,2 +1,2 @@
-import n,{useCallback,useEffect,useMemo,useState}from'react';import*as i from'@radix-ui/react-dialog';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {IconMap}from'@deckai/icons';var $=typeof window<"u"?useEffect:()=>{},g=e=>{let[a,r]=useState(null),t=useCallback(o=>typeof window<"u"?window.matchMedia(o).matches:!1,[]);return $(()=>{r(t(e));},[e,t]),useEffect(()=>{if(typeof window<"u"){let o=window.matchMedia(e),s=()=>{r(t(e));};return o.addEventListener("change",s),()=>{o.removeEventListener("change",s);}}},[e,t]),a??!1};function c(...e){return twMerge(clsx(e))}var x={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB",disabled:"#888888",danger:"#FF0000"},N={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},I=e=>{if(!e)return {width:"24px",height:"24px"};let a=Array.isArray(e)?e:[e],r={},t;return a.forEach(o=>{if(typeof o=="number")t=`${o}px`;else {let[s,l]=o.split(":"),d=parseInt(l,10);r[`@media (min-width: ${N[s]})`]=`${d}px`;}}),{width:t||"24px",height:t||"24px",...Object.entries(r).reduce((o,[s,l])=>({...o,[s]:{width:l,height:l}}),{})}},b=n.forwardRef(({name:e,size:a=24,color:r="primary",title:t,className:o,style:s={},...l},d)=>{let f=IconMap[e],p=I(a);return n.createElement("div",{className:c("flex justify-center items-center",o),style:{...p,"--icon-stroke":x[r],...s}},n.createElement(f,{ref:d,"aria-hidden":!t,"aria-label":t,stroke:e.includes("filled")?void 0:x[r],...l}))});b.displayName="Icon";var v="focus-visible:outline-none focus-visible:border-2 focus-visible:border-primary-100";var y=n.forwardRef(({children:e,type:a="button",className:r,disabled:t,...o},s)=>n.createElement("button",{ref:s,type:a,disabled:t,className:c("appearance-none hover:opacity-80 transition-all active:scale-95",v,t&&"opacity-50 cursor-not-allowed",r),...o},e));y.displayName="Pressable";var oe=({children:e,open:a,onClose:r,width:t=480,className:o,title:s,footer:l,position:d="left"})=>{let f=g("(max-width: 834px)"),p=useCallback(C=>{C.key==="Escape"&&r();},[r]);useEffect(()=>(a?(document.addEventListener("keydown",p),document.body.style.overflow="hidden"):(document.removeEventListener("keydown",p),document.body.style.overflow="unset"),()=>{document.removeEventListener("keydown",p),document.body.style.overflow="unset";}),[a,p]);let m=useMemo(()=>d==="right"?{position:"right-0",enter:"data-[state=open]:animate-slide-in-from-right",exit:"data-[state=closed]:animate-slide-out-to-right",transform:"translate-x-full"}:{position:"left-0",enter:"data-[state=open]:animate-slide-in-from-left",exit:"data-[state=closed]:animate-slide-out-to-left",transform:"-translate-x-full"},[d]);return n.createElement(i.Root,{open:a,onOpenChange:r},n.createElement(i.Portal,null,n.createElement(i.Overlay,{className:c("fixed inset-0 z-50 bg-sidebarOverlay backdrop-blur-[2px]","data-[state=open]:animate-overlay-show","data-[state=closed]:animate-overlay-hide")}),n.createElement(i.Content,{className:c("fixed top-0 z-50 flex h-full flex-col bg-white",m.position,m.enter,m.exit,typeof window>"u"||!f?d==="right"?"border-l":"border-r":"w-full","border-stroke",o),style:{width:typeof window>"u"||!f?t:"100%"}},n.createElement("div",{className:"flex items-center justify-between border-b border-secondary-50 px-8 py-6"},n.createElement(i.Title,{className:"text-heading-xs text-center w-full"},s),n.createElement(i.Close,{asChild:!0},n.createElement(y,{className:"inline-flex items-center justify-center text-secondary hover:bg-secondary-100 rounded-lg","aria-label":"Close"},n.createElement(b,{name:"close",size:12})))),n.createElement("div",{className:"flex-1 overflow-y-auto"},n.createElement("div",{className:"p-6"},e)),l&&n.createElement("div",{className:"px-6 pb-6 bg-background"},l))))};export{oe as Sidebar};//# sourceMappingURL=Sidebar.js.map
+import n,{useCallback,useEffect,useMemo,useState}from'react';import*as i from'@radix-ui/react-dialog';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {IconMap}from'@deckai/icons';var $=typeof window<"u"?useEffect:()=>{},b=e=>{let[a,r]=useState(null),t=useCallback(o=>typeof window<"u"?window.matchMedia(o).matches:!1,[]);return $(()=>{r(t(e));},[e,t]),useEffect(()=>{if(typeof window<"u"){let o=window.matchMedia(e),s=()=>{r(t(e));};return o.addEventListener("change",s),()=>{o.removeEventListener("change",s);}}},[e,t]),a??!1};function d(...e){return twMerge(clsx(e))}var x={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB",disabled:"#888888",danger:"#FF0000"},N={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},I=e=>{if(!e)return {width:"24px",height:"24px"};let a=Array.isArray(e)?e:[e],r={},t;return a.forEach(o=>{if(typeof o=="number")t=`${o}px`;else {let[s,l]=o.split(":"),c=parseInt(l,10);r[`@media (min-width: ${N[s]})`]=`${c}px`;}}),{width:t||"24px",height:t||"24px",...Object.entries(r).reduce((o,[s,l])=>({...o,[s]:{width:l,height:l}}),{})}},y=n.forwardRef(({name:e,size:a=24,color:r="primary",title:t,className:o,style:s={},...l},c)=>{let f=IconMap[e],p=I(a);return n.createElement("div",{className:d("flex justify-center items-center",o),style:{...p,"--icon-stroke":x[r],...s}},n.createElement(f,{ref:c,"aria-hidden":!t,"aria-label":t,stroke:e.includes("filled")?void 0:x[r],...l}))});y.displayName="Icon";var v="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100";var g=n.forwardRef(({children:e,type:a="button",className:r,disabled:t,...o},s)=>n.createElement("button",{ref:s,type:a,disabled:t,className:d("appearance-none hover:opacity-80 transition-all active:scale-95",v,t&&"opacity-50 cursor-not-allowed",r),...o},e));g.displayName="Pressable";var oe=({children:e,open:a,onClose:r,width:t=480,className:o,title:s,footer:l,position:c="left"})=>{let f=b("(max-width: 834px)"),p=useCallback(S=>{S.key==="Escape"&&r();},[r]);useEffect(()=>(a?(document.addEventListener("keydown",p),document.body.style.overflow="hidden"):(document.removeEventListener("keydown",p),document.body.style.overflow="unset"),()=>{document.removeEventListener("keydown",p),document.body.style.overflow="unset";}),[a,p]);let m=useMemo(()=>c==="right"?{position:"right-0",enter:"data-[state=open]:animate-slide-in-from-right",exit:"data-[state=closed]:animate-slide-out-to-right",transform:"translate-x-full"}:{position:"left-0",enter:"data-[state=open]:animate-slide-in-from-left",exit:"data-[state=closed]:animate-slide-out-to-left",transform:"-translate-x-full"},[c]);return n.createElement(i.Root,{open:a,onOpenChange:r},n.createElement(i.Portal,null,n.createElement(i.Overlay,{className:d("fixed inset-0 z-50 bg-sidebarOverlay backdrop-blur-[2px]","data-[state=open]:animate-overlay-show","data-[state=closed]:animate-overlay-hide")}),n.createElement(i.Content,{className:d("fixed top-0 z-50 flex h-full flex-col bg-white",m.position,m.enter,m.exit,typeof window>"u"||!f?c==="right"?"border-l":"border-r":"w-full","border-stroke",o),style:{width:typeof window>"u"||!f?t:"100%"}},n.createElement("div",{className:"flex items-center justify-between border-b border-secondary-50 px-8 py-6"},n.createElement(i.Title,{className:"text-heading-xs text-center w-full"},s),n.createElement(i.Close,{asChild:!0},n.createElement(g,{className:"inline-flex items-center justify-center text-secondary hover:bg-secondary-100 rounded-lg","aria-label":"Close"},n.createElement(y,{name:"close",size:12})))),n.createElement("div",{className:"flex-1 overflow-y-auto"},n.createElement("div",{className:"p-6"},e)),l&&n.createElement("div",{className:"px-6 pb-6 bg-background"},l))))};export{oe as Sidebar};//# sourceMappingURL=Sidebar.js.map
 //# sourceMappingURL=Sidebar.js.map

package/dist/components/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useMediaQuery.ts","../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/components/Sidebar.tsx"],"names":["useIsomorphicLayoutEffect","useEffect","useMediaQuery","query","matches","setMatches","useState","getMatches","useCallback","mediaQuery","handleChange","cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","sizeStyles","focusRingStyles","Pressable","children","type","disabled","Sidebar","open","onClose","width","footer","position","isMobile","handleEscapeKey","event","positionClasses","useMemo"],"mappings":"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","file":"Sidebar.js","sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\n\nconst useIsomorphicLayoutEffect =\n  typeof window !== \"undefined\" ? useEffect : () => {};\n\nexport const useMediaQuery = (query: string): boolean => {\n  // Initialize with null to prevent hydration mismatch\n  const [matches, setMatches] = useState<boolean | null>(null);\n\n  const getMatches = useCallback((query: string): boolean => {\n    if (typeof window !== \"undefined\") {\n      return window.matchMedia(query).matches;\n    }\n    return false;\n  }, []);\n\n  // Update matches after mount to prevent hydration mismatch\n  useIsomorphicLayoutEffect(() => {\n    setMatches(getMatches(query));\n  }, [query, getMatches]);\n\n  useEffect(() => {\n    if (typeof window !== \"undefined\") {\n      const mediaQuery = window.matchMedia(query);\n\n      const handleChange = () => {\n        setMatches(getMatches(query));\n      };\n\n      mediaQuery.addEventListener(\"change\", handleChange);\n\n      return () => {\n        mediaQuery.removeEventListener(\"change\", handleChange);\n      };\n    }\n  }, [query, getMatches]);\n\n  // Return false during SSR, actual value after hydration\n  return matches ?? false;\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n  name: IconName;\n  /** @default 24 */\n  size?: ResponsiveSize | ResponsiveSize[];\n  /** @default primary */\n  color?: IconColors;\n  title?: string;\n  className?: string;\n  style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n  primary: \"#080808\",\n  secondary: \"#666666\",\n  white: \"#ffffff\",\n  primaryBlue: \"#089CCB\",\n  disabled: \"#888888\",\n  danger: \"#FF0000\"\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:border-2 focus-visible:border-primary-100\";\n\nexport const focusRingStylesCoerced = \"border-2 border-primary-100\";\n","import React, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable = React.forwardRef<HTMLButtonElement, PressableProps>(\n  ({ children, type = \"button\", className, disabled, ...props }, ref) => (\n    <button\n      ref={ref}\n      type={type}\n      disabled={disabled}\n      className={cn(\n        \"appearance-none hover:opacity-80 transition-all active:scale-95\",\n        focusRingStyles,\n        disabled && \"opacity-50 cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n);\n\nPressable.displayName = \"Pressable\";\n","import React, { useCallback, useEffect, useMemo, type ReactNode } from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { useMediaQuery } from \"../hooks/useMediaQuery\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\nimport { Pressable } from \"./Pressable\";\n\nexport type SidebarProps = {\n  /**\n   * The content to be rendered inside the sidebar\n   */\n  children: ReactNode;\n  /**\n   * Whether the sidebar is open\n   */\n  open: boolean;\n  /**\n   * Callback fired when the sidebar is closed\n   */\n  onClose: () => void;\n  /** @default left */\n  position?: \"left\" | \"right\";\n  /**\n   * The width of the sidebar on desktop. Defaults to 480px.\n   */\n  width?: number;\n  /**\n   * Additional class names to be applied to the sidebar\n   */\n  className?: string;\n  /**\n   * The title to display in the header\n   */\n  title?: string;\n  /**\n   * Optional footer content\n   */\n  footer?: ReactNode;\n};\n\nexport const Sidebar = ({\n  children,\n  open,\n  onClose,\n  width = 480,\n  className,\n  title,\n  footer,\n  position = \"left\"\n}: SidebarProps) => {\n  const isMobile = useMediaQuery(\"(max-width: 834px)\");\n\n  // Handle escape key press\n  const handleEscapeKey = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onClose();\n      }\n    },\n    [onClose]\n  );\n\n  useEffect(() => {\n    if (open) {\n      document.addEventListener(\"keydown\", handleEscapeKey);\n      // Prevent body scroll when sidebar is open\n      document.body.style.overflow = \"hidden\";\n    } else {\n      // Ensure we clean up when sidebar is closed\n      document.removeEventListener(\"keydown\", handleEscapeKey);\n      document.body.style.overflow = \"unset\";\n    }\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleEscapeKey);\n      document.body.style.overflow = \"unset\";\n    };\n  }, [open, handleEscapeKey]);\n\n  const positionClasses = useMemo(\n    () =>\n      position === \"right\"\n        ? {\n            position: \"right-0\",\n            enter: \"data-[state=open]:animate-slide-in-from-right\",\n            exit: \"data-[state=closed]:animate-slide-out-to-right\",\n            transform: \"translate-x-full\"\n          }\n        : {\n            position: \"left-0\",\n            enter: \"data-[state=open]:animate-slide-in-from-left\",\n            exit: \"data-[state=closed]:animate-slide-out-to-left\",\n            transform: \"-translate-x-full\"\n          },\n    [position]\n  );\n\n  return (\n    <Dialog.Root open={open} onOpenChange={onClose}>\n      <Dialog.Portal>\n        <Dialog.Overlay\n          className={cn(\n            \"fixed inset-0 z-50 bg-sidebarOverlay backdrop-blur-[2px]\",\n            \"data-[state=open]:animate-overlay-show\",\n            \"data-[state=closed]:animate-overlay-hide\"\n          )}\n        />\n        <Dialog.Content\n          className={cn(\n            \"fixed top-0 z-50 flex h-full flex-col bg-white\",\n            positionClasses.position,\n            positionClasses.enter,\n            positionClasses.exit,\n            // During SSR, default to desktop layout\n            typeof window === \"undefined\" || !isMobile\n              ? position === \"right\"\n                ? \"border-l\"\n                : \"border-r\"\n              : \"w-full\",\n            \"border-stroke\",\n            className\n          )}\n          style={{\n            width: typeof window === \"undefined\" || !isMobile ? width : \"100%\"\n          }}\n        >\n          {/* Header */}\n          <div className=\"flex items-center justify-between border-b border-secondary-50 px-8 py-6\">\n            <Dialog.Title className=\"text-heading-xs text-center w-full\">\n              {title}\n            </Dialog.Title>\n            <Dialog.Close asChild>\n              <Pressable\n                className=\"inline-flex items-center justify-center text-secondary hover:bg-secondary-100 rounded-lg\"\n                aria-label=\"Close\"\n              >\n                <Icon name=\"close\" size={12} />\n              </Pressable>\n            </Dialog.Close>\n          </div>\n\n          {/* Content */}\n          <div className=\"flex-1 overflow-y-auto\">\n            <div className=\"p-6\">{children}</div>\n          </div>\n\n          {/* Footer */}\n          {footer && <div className=\"px-6 pb-6 bg-background\">{footer}</div>}\n        </Dialog.Content>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n};\n"]}
+{"version":3,"sources":["../../src/hooks/useMediaQuery.ts","../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/components/Sidebar.tsx"],"names":["useIsomorphicLayoutEffect","useEffect","useMediaQuery","query","matches","setMatches","useState","getMatches","useCallback","mediaQuery","handleChange","cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","sizeStyles","focusRingStyles","Pressable","children","type","disabled","Sidebar","open","onClose","width","footer","position","isMobile","handleEscapeKey","event","positionClasses","useMemo"],"mappings":"uMAEA,IAAMA,EACJ,OAAO,MAAA,CAAW,GAAcC,CAAAA,SAAAA,CAAY,IAAM,EAAC,CAExCC,CAAiBC,CAAAA,CAAAA,EAA2B,CAEvD,GAAM,CAACC,CAASC,CAAAA,CAAU,EAAIC,QAAyB,CAAA,IAAI,CAErDC,CAAAA,CAAAA,CAAaC,YAAaL,CAC1B,EAAA,OAAO,MAAW,CAAA,GAAA,CACb,OAAO,UAAWA,CAAAA,CAAK,CAAE,CAAA,OAAA,CAE3B,GACN,EAAE,CAGL,CAAA,OAAAH,EAA0B,IAAM,CAC9BK,CAAWE,CAAAA,CAAAA,CAAWJ,CAAK,CAAC,EAC9B,CAAG,CAAA,CAACA,EAAOI,CAAU,CAAC,CAEtBN,CAAAA,SAAAA,CAAU,IAAM,CACd,GAAI,OAAO,MAAW,CAAA,GAAA,CAAa,CACjC,IAAMQ,CAAAA,CAAa,MAAO,CAAA,UAAA,CAAWN,CAAK,CAEpCO,CAAAA,CAAAA,CAAe,IAAM,CACzBL,EAAWE,CAAWJ,CAAAA,CAAK,CAAC,EAC9B,EAEA,OAAAM,CAAAA,CAAW,gBAAiB,CAAA,QAAA,CAAUC,CAAY,CAE3C,CAAA,IAAM,CACXD,CAAAA,CAAW,oBAAoB,QAAUC,CAAAA,CAAY,EACvD,CACF,CACF,CAAG,CAAA,CAACP,CAAOI,CAAAA,CAAU,CAAC,CAGfH,CAAAA,CAAAA,EAAW,CACpB,CAAA,CAAA,CCpCO,SAASO,CAAAA,CAAAA,GAAMC,EAAsB,CAC1C,OAAOC,OAAQC,CAAAA,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CCcA,IAAMG,CAAAA,CAAwC,CAC5C,OAAA,CAAS,UACT,SAAW,CAAA,SAAA,CACX,KAAO,CAAA,SAAA,CACP,YAAa,SACb,CAAA,QAAA,CAAU,UACV,MAAQ,CAAA,SACV,EAEMC,CAA6C,CAAA,CACjD,EAAI,CAAA,OAAA,CACJ,GAAI,OACJ,CAAA,EAAA,CAAI,QACJ,CAAA,EAAA,CAAI,SACJ,KAAO,CAAA,QACT,CAEMC,CAAAA,CAAAA,CACJC,GACwB,CACxB,GAAI,CAACA,CAAAA,CAAO,OAAO,CAAE,KAAA,CAAO,MAAQ,CAAA,MAAA,CAAQ,MAAO,CAEnD,CAAA,IAAMC,CAAY,CAAA,KAAA,CAAM,QAAQD,CAAK,CAAA,CAAIA,CAAQ,CAAA,CAACA,CAAK,CACjDE,CAAAA,CAAAA,CAAuC,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,CAAA,CAAIF,EAAK,KAAM,CAAA,GAAG,CACvCG,CAAAA,CAAAA,CAAQ,SAASD,CAAU,CAAA,EAAE,CACnCJ,CAAAA,CAAAA,CAAa,sBAAsBJ,CAAeO,CAAAA,CAAU,CAAC,CAAA,CAAA,CAAG,EAC9D,CAAGE,EAAAA,CAAK,KACZ,CACF,CAAC,EAGM,CACL,KAAA,CAAOJ,CAAY,EAAA,MAAA,CACnB,OAAQA,CAAY,EAAA,MAAA,CACpB,GAAG,MAAA,CAAO,QAAQD,CAAY,CAAA,CAAE,MAC9B,CAAA,CAACM,EAAK,CAACvB,CAAAA,CAAOmB,CAAI,CAAA,IAAO,CACvB,GAAGI,CAAAA,CACH,CAACvB,CAAK,EAAG,CACP,KAAA,CAAOmB,CACP,CAAA,MAAA,CAAQA,CACV,CACF,CAAA,CAAA,CACA,EACF,CACF,CACF,CAAA,CAEaK,EAAOC,CAAM,CAAA,UAAA,CACxB,CACE,CACE,IAAA,CAAAC,CACA,CAAA,IAAA,CAAAP,EAAO,EACP,CAAA,KAAA,CAAAQ,CAAQ,CAAA,SAAA,CACR,MAAAC,CACA,CAAA,SAAA,CAAAC,CACA,CAAA,KAAA,CAAAC,EAAQ,EAAC,CACT,GAAGC,CACL,EACAC,CACG,GAAA,CACH,IAAMC,CAAAA,CAAgBC,QAAQR,CAAI,CAAA,CAC5BS,CAAarB,CAAAA,CAAAA,CAAaK,CAAI,CAEpC,CAAA,OACEM,CAAA,CAAA,aAAA,CAAC,OACC,SAAWjB,CAAAA,CAAAA,CAAG,mCAAoCqB,CAAS,CAAA,CAC3D,MAAO,CACL,GAAGM,CACF,CAAA,eAAA,CAA4BvB,EAAUe,CAAK,CAAA,CAC5C,GAAGG,CACL,GAEAL,CAAA,CAAA,aAAA,CAACQ,CAAA,CAAA,CACC,IAAKD,CACL,CAAA,aAAA,CAAa,CAACJ,CAAAA,CACd,aAAYA,CACZ,CAAA,MAAA,CAAQF,CAAK,CAAA,QAAA,CAAS,QAAQ,CAAI,CAAA,KAAA,CAAA,CAAYd,CAAUe,CAAAA,CAAK,EAC5D,GAAGI,CAAAA,CACN,CACF,CAEJ,CACF,CAEAP,CAAAA,CAAAA,CAAK,WAAc,CAAA,MAAA,CC5CZ,IAAMY,CAAAA,CACX,iFC9DK,IAAMC,CAAAA,CAAYZ,CAAM,CAAA,UAAA,CAC7B,CAAC,CAAE,QAAA,CAAAa,CAAU,CAAA,IAAA,CAAAC,EAAO,QAAU,CAAA,SAAA,CAAAV,CAAW,CAAA,QAAA,CAAAW,EAAU,GAAGT,CAAM,CAAGC,CAAAA,CAAAA,GAC7DP,EAAA,aAAC,CAAA,QAAA,CAAA,CACC,GAAKO,CAAAA,CAAAA,CACL,KAAMO,CACN,CAAA,QAAA,CAAUC,CACV,CAAA,SAAA,CAAWhC,EACT,iEACA4B,CAAAA,CAAAA,CACAI,GAAY,+BACZX,CAAAA,CACF,EACC,GAAGE,CAAAA,CAAAA,CAEHO,CACH,CAEJ,EAEAD,CAAU,CAAA,WAAA,CAAc,WCejB,CAAA,IAAMI,GAAU,CAAC,CACtB,QAAAH,CAAAA,CAAAA,CACA,KAAAI,CACA,CAAA,OAAA,CAAAC,CACA,CAAA,KAAA,CAAAC,EAAQ,GACR,CAAA,SAAA,CAAAf,CACA,CAAA,KAAA,CAAAD,EACA,MAAAiB,CAAAA,CAAAA,CACA,QAAAC,CAAAA,CAAAA,CAAW,MACb,CAAoB,GAAA,CAClB,IAAMC,CAAAA,CAAWhD,EAAc,oBAAoB,CAAA,CAG7CiD,EAAkB3C,WACrB4C,CAAAA,CAAAA,EAAyB,CACpBA,CAAM,CAAA,GAAA,GAAQ,QAChBN,EAAAA,CAAAA,GAEJ,CACA,CAAA,CAACA,CAAO,CACV,EAEA7C,SAAU,CAAA,KACJ4C,CACF,EAAA,QAAA,CAAS,iBAAiB,SAAWM,CAAAA,CAAe,CAEpD,CAAA,QAAA,CAAS,KAAK,KAAM,CAAA,QAAA,CAAW,QAG/B,GAAA,QAAA,CAAS,oBAAoB,SAAWA,CAAAA,CAAe,CACvD,CAAA,QAAA,CAAS,KAAK,KAAM,CAAA,QAAA,CAAW,OAG1B,CAAA,CAAA,IAAM,CACX,QAAS,CAAA,mBAAA,CAAoB,UAAWA,CAAe,CAAA,CACvD,SAAS,IAAK,CAAA,KAAA,CAAM,QAAW,CAAA,QACjC,GACC,CAACN,CAAAA,CAAMM,CAAe,CAAC,EAE1B,IAAME,CAAAA,CAAkBC,OACtB,CAAA,IACEL,IAAa,OACT,CAAA,CACE,QAAU,CAAA,SAAA,CACV,MAAO,+CACP,CAAA,IAAA,CAAM,gDACN,CAAA,SAAA,CAAW,kBACb,CACA,CAAA,CACE,QAAU,CAAA,QAAA,CACV,MAAO,8CACP,CAAA,IAAA,CAAM,+CACN,CAAA,SAAA,CAAW,mBACb,CACN,CAAA,CAACA,CAAQ,CACX,EAEA,OACErB,CAAAA,CAAA,aAAQ,CAAA,CAAA,CAAA,IAAA,CAAP,CAAY,IAAMiB,CAAAA,CAAAA,CAAM,YAAcC,CAAAA,CAAAA,CAAAA,CACrClB,EAAA,aAAQ,CAAA,CAAA,CAAA,MAAA,CAAP,IACCA,CAAAA,CAAAA,CAAA,cAAQ,CAAP,CAAA,OAAA,CAAA,CACC,SAAWjB,CAAAA,CAAAA,CACT,2DACA,wCACA,CAAA,0CACF,CACF,CAAA,CAAA,CACAiB,EAAA,aAAQ,CAAA,CAAA,CAAA,OAAA,CAAP,CACC,SAAA,CAAWjB,EACT,gDACA0C,CAAAA,CAAAA,CAAgB,QAChBA,CAAAA,CAAAA,CAAgB,MAChBA,CAAgB,CAAA,IAAA,CAEhB,OAAO,MAAW,CAAA,GAAA,EAAe,CAACH,CAC9BD,CAAAA,CAAAA,GAAa,OACX,CAAA,UAAA,CACA,WACF,QACJ,CAAA,eAAA,CACAjB,CACF,CAAA,CACA,MAAO,CACL,KAAA,CAAO,OAAO,MAAA,CAAW,KAAe,CAACkB,CAAAA,CAAWH,CAAQ,CAAA,MAC9D,GAGAnB,CAAA,CAAA,aAAA,CAAC,KAAI,CAAA,CAAA,SAAA,CAAU,4EACbA,CAAA,CAAA,aAAA,CAAQ,CAAP,CAAA,KAAA,CAAA,CAAa,UAAU,oCACrBG,CAAAA,CAAAA,CACH,CACAH,CAAAA,CAAAA,CAAA,cAAQ,CAAP,CAAA,KAAA,CAAA,CAAa,QAAO,CACnBA,CAAAA,CAAAA,CAAAA,CAAAA,CAAA,cAACY,CAAA,CAAA,CACC,SAAU,CAAA,0FAAA,CACV,aAAW,OAEXZ,CAAAA,CAAAA,CAAAA,CAAA,aAACD,CAAAA,CAAAA,CAAA,CAAK,IAAK,CAAA,OAAA,CAAQ,IAAM,CAAA,EAAA,CAAI,CAC/B,CACF,CACF,CAGAC,CAAAA,CAAAA,CAAA,cAAC,KAAI,CAAA,CAAA,SAAA,CAAU,wBACbA,CAAAA,CAAAA,CAAAA,CAAA,cAAC,KAAI,CAAA,CAAA,SAAA,CAAU,KAAOa,CAAAA,CAAAA,CAAS,CACjC,CAGCO,CAAAA,CAAAA,EAAUpB,CAAA,CAAA,aAAA,CAAC,OAAI,SAAU,CAAA,yBAAA,CAAA,CAA2BoB,CAAO,CAC9D,CACF,CACF,CAEJ","file":"Sidebar.js","sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\n\nconst useIsomorphicLayoutEffect =\n  typeof window !== \"undefined\" ? useEffect : () => {};\n\nexport const useMediaQuery = (query: string): boolean => {\n  // Initialize with null to prevent hydration mismatch\n  const [matches, setMatches] = useState<boolean | null>(null);\n\n  const getMatches = useCallback((query: string): boolean => {\n    if (typeof window !== \"undefined\") {\n      return window.matchMedia(query).matches;\n    }\n    return false;\n  }, []);\n\n  // Update matches after mount to prevent hydration mismatch\n  useIsomorphicLayoutEffect(() => {\n    setMatches(getMatches(query));\n  }, [query, getMatches]);\n\n  useEffect(() => {\n    if (typeof window !== \"undefined\") {\n      const mediaQuery = window.matchMedia(query);\n\n      const handleChange = () => {\n        setMatches(getMatches(query));\n      };\n\n      mediaQuery.addEventListener(\"change\", handleChange);\n\n      return () => {\n        mediaQuery.removeEventListener(\"change\", handleChange);\n      };\n    }\n  }, [query, getMatches]);\n\n  // Return false during SSR, actual value after hydration\n  return matches ?? false;\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n  name: IconName;\n  /** @default 24 */\n  size?: ResponsiveSize | ResponsiveSize[];\n  /** @default primary */\n  color?: IconColors;\n  title?: string;\n  className?: string;\n  style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n  primary: \"#080808\",\n  secondary: \"#666666\",\n  white: \"#ffffff\",\n  primaryBlue: \"#089CCB\",\n  disabled: \"#888888\",\n  danger: \"#FF0000\"\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-primary-100\";\nexport const focusRingWithinStyles =\n  \"focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-100\";\nexport const focusRingStylesCoerced = \"ring-2 ring-primary-100\";\n","import React, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable = React.forwardRef<HTMLButtonElement, PressableProps>(\n  ({ children, type = \"button\", className, disabled, ...props }, ref) => (\n    <button\n      ref={ref}\n      type={type}\n      disabled={disabled}\n      className={cn(\n        \"appearance-none hover:opacity-80 transition-all active:scale-95\",\n        focusRingStyles,\n        disabled && \"opacity-50 cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n);\n\nPressable.displayName = \"Pressable\";\n","import React, { useCallback, useEffect, useMemo, type ReactNode } from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { useMediaQuery } from \"../hooks/useMediaQuery\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\nimport { Pressable } from \"./Pressable\";\n\nexport type SidebarProps = {\n  /**\n   * The content to be rendered inside the sidebar\n   */\n  children: ReactNode;\n  /**\n   * Whether the sidebar is open\n   */\n  open: boolean;\n  /**\n   * Callback fired when the sidebar is closed\n   */\n  onClose: () => void;\n  /** @default left */\n  position?: \"left\" | \"right\";\n  /**\n   * The width of the sidebar on desktop. Defaults to 480px.\n   */\n  width?: number;\n  /**\n   * Additional class names to be applied to the sidebar\n   */\n  className?: string;\n  /**\n   * The title to display in the header\n   */\n  title?: string;\n  /**\n   * Optional footer content\n   */\n  footer?: ReactNode;\n};\n\nexport const Sidebar = ({\n  children,\n  open,\n  onClose,\n  width = 480,\n  className,\n  title,\n  footer,\n  position = \"left\"\n}: SidebarProps) => {\n  const isMobile = useMediaQuery(\"(max-width: 834px)\");\n\n  // Handle escape key press\n  const handleEscapeKey = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onClose();\n      }\n    },\n    [onClose]\n  );\n\n  useEffect(() => {\n    if (open) {\n      document.addEventListener(\"keydown\", handleEscapeKey);\n      // Prevent body scroll when sidebar is open\n      document.body.style.overflow = \"hidden\";\n    } else {\n      // Ensure we clean up when sidebar is closed\n      document.removeEventListener(\"keydown\", handleEscapeKey);\n      document.body.style.overflow = \"unset\";\n    }\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleEscapeKey);\n      document.body.style.overflow = \"unset\";\n    };\n  }, [open, handleEscapeKey]);\n\n  const positionClasses = useMemo(\n    () =>\n      position === \"right\"\n        ? {\n            position: \"right-0\",\n            enter: \"data-[state=open]:animate-slide-in-from-right\",\n            exit: \"data-[state=closed]:animate-slide-out-to-right\",\n            transform: \"translate-x-full\"\n          }\n        : {\n            position: \"left-0\",\n            enter: \"data-[state=open]:animate-slide-in-from-left\",\n            exit: \"data-[state=closed]:animate-slide-out-to-left\",\n            transform: \"-translate-x-full\"\n          },\n    [position]\n  );\n\n  return (\n    <Dialog.Root open={open} onOpenChange={onClose}>\n      <Dialog.Portal>\n        <Dialog.Overlay\n          className={cn(\n            \"fixed inset-0 z-50 bg-sidebarOverlay backdrop-blur-[2px]\",\n            \"data-[state=open]:animate-overlay-show\",\n            \"data-[state=closed]:animate-overlay-hide\"\n          )}\n        />\n        <Dialog.Content\n          className={cn(\n            \"fixed top-0 z-50 flex h-full flex-col bg-white\",\n            positionClasses.position,\n            positionClasses.enter,\n            positionClasses.exit,\n            // During SSR, default to desktop layout\n            typeof window === \"undefined\" || !isMobile\n              ? position === \"right\"\n                ? \"border-l\"\n                : \"border-r\"\n              : \"w-full\",\n            \"border-stroke\",\n            className\n          )}\n          style={{\n            width: typeof window === \"undefined\" || !isMobile ? width : \"100%\"\n          }}\n        >\n          {/* Header */}\n          <div className=\"flex items-center justify-between border-b border-secondary-50 px-8 py-6\">\n            <Dialog.Title className=\"text-heading-xs text-center w-full\">\n              {title}\n            </Dialog.Title>\n            <Dialog.Close asChild>\n              <Pressable\n                className=\"inline-flex items-center justify-center text-secondary hover:bg-secondary-100 rounded-lg\"\n                aria-label=\"Close\"\n              >\n                <Icon name=\"close\" size={12} />\n              </Pressable>\n            </Dialog.Close>\n          </div>\n\n          {/* Content */}\n          <div className=\"flex-1 overflow-y-auto\">\n            <div className=\"p-6\">{children}</div>\n          </div>\n\n          {/* Footer */}\n          {footer && <div className=\"px-6 pb-6 bg-background\">{footer}</div>}\n        </Dialog.Content>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n};\n"]}

package/dist/components/SocialCard.cjs

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

package/dist/components/SocialCard.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/utils/index.ts","../../src/components/Pressable.tsx","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../src/components/SocialCard.tsx"],"names":["focusRingStyles","cn","inputs","twMerge","clsx","Pressable","React","children","type","className","disabled","props","ref","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Icon","name","color","title","style","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","SocialCard","icon","followers","engagement","pressableProps"],"mappings":"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","file":"SocialCard.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:border-2 focus-visible:border-primary-100\";\n\nexport const focusRingStylesCoerced = \"border-2 border-primary-100\";\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable = React.forwardRef<HTMLButtonElement, PressableProps>(\n  ({ children, type = \"button\", className, disabled, ...props }, ref) => (\n    <button\n      ref={ref}\n      type={type}\n      disabled={disabled}\n      className={cn(\n        \"appearance-none hover:opacity-80 transition-all active:scale-95\",\n        focusRingStyles,\n        disabled && \"opacity-50 cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n);\n\nPressable.displayName = \"Pressable\";\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n  name: IconName;\n  /** @default 24 */\n  size?: ResponsiveSize | ResponsiveSize[];\n  /** @default primary */\n  color?: IconColors;\n  title?: string;\n  className?: string;\n  style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n  primary: \"#080808\",\n  secondary: \"#666666\",\n  white: \"#ffffff\",\n  primaryBlue: \"#089CCB\",\n  disabled: \"#888888\",\n  danger: \"#FF0000\"\n};\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n  sm: \"640px\",\n  md: \"768px\",\n  lg: \"1024px\",\n  xl: \"1280px\",\n  \"2xl\": \"1536px\"\n};\n\nconst processSizes = (\n  sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n  if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n  const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n  const mediaQueries: Record<string, string> = {};\n  let baseSize: string | undefined;\n\n  // Process each size\n  sizeArray.forEach((size) => {\n    if (typeof size === \"number\") {\n      baseSize = `${size}px`;\n    } else {\n      const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n      const value = parseInt(valueStr, 10);\n      mediaQueries[`@media (min-width: ${BREAKPOINT_MAP[breakpoint]})`] =\n        `${value}px`;\n    }\n  });\n\n  // Create the style object with the correct structure\n  return {\n    width: baseSize || \"24px\",\n    height: baseSize || \"24px\",\n    ...Object.entries(mediaQueries).reduce(\n      (acc, [query, size]) => ({\n        ...acc,\n        [query]: {\n          width: size,\n          height: size\n        }\n      }),\n      {}\n    )\n  };\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n  (\n    {\n      name,\n      size = 24,\n      color = \"primary\",\n      title,\n      className,\n      style = {},\n      ...props\n    },\n    ref\n  ) => {\n    const IconComponent = IconMap[name];\n    const sizeStyles = processSizes(size);\n\n    return (\n      <div\n        className={cn(\"flex justify-center items-center\", className)}\n        style={{\n          ...sizeStyles,\n          [\"--icon-stroke\" as string]: COLOR_MAP[color],\n          ...style\n        }}\n      >\n        <IconComponent\n          ref={ref}\n          aria-hidden={!title}\n          aria-label={title}\n          stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\n\nIcon.displayName = \"Icon\";\n","import React from \"react\";\nimport { Typography } from \"../types/tailwind\";\n\ntype TextElement =\n  | \"p\"\n  | \"span\"\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"strong\"\n  | \"em\"\n  | \"blockquote\"\n  | \"pre\"\n  | \"code\"\n  | \"small\"\n  | \"label\"\n  | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n  p: HTMLParagraphElement;\n  span: HTMLSpanElement;\n  h1: HTMLHeadingElement;\n  h2: HTMLHeadingElement;\n  h3: HTMLHeadingElement;\n  h4: HTMLHeadingElement;\n  h5: HTMLHeadingElement;\n  h6: HTMLHeadingElement;\n  strong: HTMLElement;\n  em: HTMLElement;\n  blockquote: HTMLQuoteElement;\n  pre: HTMLPreElement;\n  code: HTMLElement;\n  small: HTMLElement;\n  label: HTMLLabelElement;\n  a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n  p: React.HTMLAttributes<HTMLParagraphElement>;\n  span: React.HTMLAttributes<HTMLSpanElement>;\n  h1: React.HTMLAttributes<HTMLHeadingElement>;\n  h2: React.HTMLAttributes<HTMLHeadingElement>;\n  h3: React.HTMLAttributes<HTMLHeadingElement>;\n  h4: React.HTMLAttributes<HTMLHeadingElement>;\n  h5: React.HTMLAttributes<HTMLHeadingElement>;\n  h6: React.HTMLAttributes<HTMLHeadingElement>;\n  strong: React.HTMLAttributes<HTMLElement>;\n  em: React.HTMLAttributes<HTMLElement>;\n  blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n  pre: React.HTMLAttributes<HTMLPreElement>;\n  code: React.HTMLAttributes<HTMLElement>;\n  small: React.HTMLAttributes<HTMLElement>;\n  label: React.LabelHTMLAttributes<HTMLLabelElement>;\n  a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n  | \"primary\"\n  | \"secondary\"\n  | \"white\"\n  | \"primary-blue\"\n  | \"disabled\"\n  | \"danger\"\n  | \"inherit\"\n  | \"primary-100\";\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 = color === \"inherit\" ? \"text-inherit\" : `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={`\n          font-sans antialiased\n          ${typographyClasses}\n          ${colorClasses}\n          ${weight && `!${fontWeight[weight]}`}\n          ${className}\n        `}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nText.displayName = \"Text\";\n","import React from \"react\";\nimport { Pressable, PressableProps } from \"./Pressable\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\nimport { IconName } from \"@deckai/icons\";\n\nexport type SocialCardProps = {\n  icon: IconName;\n  followers: string;\n  engagement?: string;\n} & PressableProps;\n\nexport const SocialCard = ({\n  icon,\n  followers,\n  engagement,\n  ...pressableProps\n}: SocialCardProps) => (\n  <Pressable\n    className=\"sm:w-max w-full hover:bg-secondary-400 rounded-lg\"\n    {...pressableProps}\n  >\n    <div className=\"flex sm:flex-row flex-col items-center sm:gap-4 gap-1 sm:px-6 sm:py-4 p-2 border border-stroke rounded-lg\">\n      <Icon name={icon} size={[\"lg:40\", 32]} color=\"primaryBlue\" />\n      <div className=\"flex items-center sm:pt-0 pt-3\">\n        <Icon name=\"profile\" size={[\"sm:20\", 16]} />\n        <Text variant={[\"body-default-medium\", \"md:body-xs-medium\"]}>\n          {followers}\n        </Text>\n      </div>\n      {engagement && (\n        <div className=\"flex items-center\">\n          <Icon name=\"like-1\" size={[\"sm:20\", 16]} />\n          <Text variant={[\"body-default-medium\", \"md:body-xs-medium\"]}>\n            {engagement}\n          </Text>\n        </div>\n      )}\n    </div>\n  </Pressable>\n);\n"]}
+{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/utils/index.ts","../../src/components/Pressable.tsx","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../src/components/SocialCard.tsx"],"names":["focusRingStyles","cn","inputs","twMerge","clsx","Pressable","React","children","type","className","disabled","props","ref","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Icon","name","color","title","style","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","SocialCard","icon","followers","engagement","pressableProps"],"mappings":"gPAmEO,IAAMA,CAAAA,CACX,gFCpEF,CAGO,SAASC,CAAAA,CAAAA,GAAMC,CAAsB,CAAA,CAC1C,OAAOC,qBAAAA,CAAQC,SAAKF,CAAAA,CAAM,CAAC,CAC7B,CCCO,IAAMG,EAAYC,kBAAM,CAAA,UAAA,CAC7B,CAAC,CAAE,QAAAC,CAAAA,CAAAA,CAAU,IAAAC,CAAAA,CAAAA,CAAO,QAAU,CAAA,SAAA,CAAAC,CAAW,CAAA,QAAA,CAAAC,CAAU,CAAA,GAAGC,CAAM,CAAGC,CAAAA,CAAAA,GAC7DN,kBAAA,CAAA,aAAA,CAAC,QACC,CAAA,CAAA,GAAA,CAAKM,CACL,CAAA,IAAA,CAAMJ,CACN,CAAA,QAAA,CAAUE,CACV,CAAA,SAAA,CAAWT,CACT,CAAA,iEAAA,CACAD,EACAU,CAAY,EAAA,+BAAA,CACZD,CACF,CAAA,CACC,GAAGE,CAAAA,CAAAA,CAEHJ,CACH,CAEJ,CAEAF,CAAAA,CAAAA,CAAU,WAAc,CAAA,WAAA,CCNxB,IAAMQ,CAAAA,CAAwC,CAC5C,OAAA,CAAS,SACT,CAAA,SAAA,CAAW,SACX,CAAA,KAAA,CAAO,SACP,CAAA,WAAA,CAAa,UACb,QAAU,CAAA,SAAA,CACV,MAAQ,CAAA,SACV,CAEMC,CAAAA,CAAAA,CAA6C,CACjD,EAAA,CAAI,OACJ,CAAA,EAAA,CAAI,OACJ,CAAA,EAAA,CAAI,QACJ,CAAA,EAAA,CAAI,SACJ,KAAO,CAAA,QACT,CAEMC,CAAAA,CAAAA,CACJC,CACwB,EAAA,CACxB,GAAI,CAACA,CAAO,CAAA,OAAO,CAAE,KAAA,CAAO,MAAQ,CAAA,MAAA,CAAQ,MAAO,CAEnD,CAAA,IAAMC,CAAY,CAAA,KAAA,CAAM,OAAQD,CAAAA,CAAK,CAAIA,CAAAA,CAAAA,CAAQ,CAACA,CAAK,CACjDE,CAAAA,CAAAA,CAAuC,EAAC,CAC1CC,EAGJ,OAAAF,CAAAA,CAAU,OAASG,CAAAA,CAAAA,EAAS,CAC1B,GAAI,OAAOA,CAAAA,EAAS,QAClBD,CAAAA,CAAAA,CAAW,CAAGC,EAAAA,CAAI,CACb,EAAA,CAAA,CAAA,KAAA,CACL,GAAM,CAACC,CAAAA,CAAYC,CAAQ,CAAA,CAAIF,CAAK,CAAA,KAAA,CAAM,GAAG,CAAA,CACvCG,CAAQ,CAAA,QAAA,CAASD,CAAU,CAAA,EAAE,CACnCJ,CAAAA,CAAAA,CAAa,sBAAsBJ,CAAeO,CAAAA,CAAU,CAAC,CAAA,CAAA,CAAG,CAC9D,CAAA,CAAA,EAAGE,CAAK,CAAA,EAAA,EACZ,CACF,CAAC,CAGM,CAAA,CACL,KAAOJ,CAAAA,CAAAA,EAAY,OACnB,MAAQA,CAAAA,CAAAA,EAAY,MACpB,CAAA,GAAG,MAAO,CAAA,OAAA,CAAQD,CAAY,CAAA,CAAE,MAC9B,CAAA,CAACM,CAAK,CAAA,CAACC,CAAOL,CAAAA,CAAI,KAAO,CACvB,GAAGI,CACH,CAAA,CAACC,CAAK,EAAG,CACP,KAAA,CAAOL,CACP,CAAA,MAAA,CAAQA,CACV,CACF,CACA,CAAA,CAAA,EACF,CACF,CACF,CAEaM,CAAAA,CAAAA,CAAOpB,kBAAM,CAAA,UAAA,CACxB,CACE,CACE,IAAAqB,CAAAA,CAAAA,CACA,IAAAP,CAAAA,CAAAA,CAAO,EACP,CAAA,KAAA,CAAAQ,EAAQ,SACR,CAAA,KAAA,CAAAC,CACA,CAAA,SAAA,CAAApB,CACA,CAAA,KAAA,CAAAqB,CAAQ,CAAA,EACR,CAAA,GAAGnB,CACL,CAAA,CACAC,CACG,GAAA,CACH,IAAMmB,CAAgBC,CAAAA,aAAAA,CAAQL,CAAI,CAAA,CAC5BM,CAAalB,CAAAA,CAAAA,CAAaK,CAAI,CAAA,CAEpC,OACEd,kBAAAA,CAAA,aAAC,CAAA,KAAA,CAAA,CACC,SAAWL,CAAAA,CAAAA,CAAG,mCAAoCQ,CAAS,CAAA,CAC3D,KAAO,CAAA,CACL,GAAGwB,CAAAA,CACF,eAA4BpB,CAAAA,CAAAA,CAAUe,CAAK,CAAA,CAC5C,GAAGE,CACL,CAEAxB,CAAAA,CAAAA,kBAAAA,CAAA,cAACyB,CAAA,CAAA,CACC,GAAKnB,CAAAA,CAAAA,CACL,aAAa,CAAA,CAACiB,CACd,CAAA,YAAA,CAAYA,CACZ,CAAA,MAAA,CAAQF,CAAK,CAAA,QAAA,CAAS,QAAQ,CAAA,CAAI,OAAYd,CAAUe,CAAAA,CAAK,CAC5D,CAAA,GAAGjB,CACN,CAAA,CACF,CAEJ,CACF,CAEAe,CAAAA,CAAAA,CAAK,WAAc,CAAA,MAAA,CCxCnB,IAAMQ,CAAAA,CAAmD,CACvD,EAAA,CAAI,IACJ,CAAA,EAAA,CAAI,IACJ,CAAA,EAAA,CAAI,IACJ,CAAA,EAAA,CAAI,IACJ,CAAA,EAAA,CAAI,IACN,CAAA,CAEMC,EAAyBC,CAAwC,EAAA,CACrE,GAAM,CAACC,CAAUjB,CAAAA,CAAI,CAAIgB,CAAAA,CAAAA,CAAQ,KAAM,CAAA,GAAG,CAE1C,CAAA,OAAIC,CAAa,GAAA,SAAA,CACRH,EAAoBd,CAAI,CAAA,EAAK,GAGlCiB,CAAAA,CAAAA,GAAa,OACR,CAAA,OAAA,CAGF,GACT,CAAA,CAIMC,CAAqC,CAAA,CACzC,KAAO,CAAA,YAAA,CACP,OAAS,CAAA,cAAA,CACT,SAAU,eACV,CAAA,IAAA,CAAM,WACR,CAAA,CA0BMC,CACJC,CAAAA,CAAAA,EAEKA,CAEgB,CAAA,CAAA,KAAA,CAAM,OAAQA,CAAAA,CAAQ,CAAIA,CAAAA,CAAAA,CAAW,CAACA,CAAQ,GAGhE,GAAKJ,CAAAA,CAAAA,EAAY,CAChB,GAAIA,CAAQ,CAAA,QAAA,CAAS,GAAG,CAAA,CAAG,CACzB,GAAM,CAACf,CAAAA,CAAYoB,CAAe,CAAA,CAAIL,EAAQ,KAAM,CAAA,GAAG,CACvD,CAAA,OAAO,CAAGf,EAAAA,CAAU,CAASoB,MAAAA,EAAAA,CAAe,CAC9C,CAAA,CACA,OAAO,CAAA,KAAA,EAAQL,CAAO,CAAA,CACxB,CAAC,CACA,CAAA,IAAA,CAAK,GAAG,CAAA,CAZW,mBAeXM,CAAAA,CAAAA,CAAOpC,kBAAM,CAAA,UAAA,CACxB,CACE,CACE,OAAA8B,CAAAA,CAAAA,CAAU,cACV,CAAA,KAAA,CAAAR,EAAQ,SACR,CAAA,EAAA,CAAAe,CACA,CAAA,SAAA,CAAAlC,CACA,CAAA,QAAA,CAAAF,CACA,CAAA,MAAA,CAAAqC,CACA,CAAA,GAAGjC,CACL,CAAA,CACAC,CACG,GAAA,CAEH,IAAMiC,CAAoBN,CAAAA,CAAAA,CAAgBH,CAAO,CAAA,CAG3CU,CAAelB,CAAAA,CAAAA,GAAU,SAAY,CAAA,cAAA,CAAiB,CAAQA,KAAAA,EAAAA,CAAK,CAEnEmB,CAAAA,CAAAA,CAAAA,CAAmBzC,kBAAM,CAAA,OAAA,CAAQ,IAAM,CAC3C,IAAM0C,CACJ,CAAA,OAAOZ,CAAY,EAAA,QAAA,CACfA,CAAQ,CAAA,KAAA,CAAM,GAAG,CAAA,CAAE,GAAI,EAAA,CACvB,KAAM,CAAA,OAAA,CAAQA,CAAO,CACnBA,CAAAA,CAAAA,CAAQ,CAAC,CAAA,CAAE,KAAM,CAAA,GAAG,CAAE,CAAA,GAAA,EACtB,CAAA,cAAA,CACR,OAAOD,CAAAA,CAAsBa,CAA4B,CAC3D,EAAG,CAACZ,CAAO,CAAC,CAAA,CAIZ,OAEE9B,kBAAAA,CAAA,aAJiBqC,CAAAA,CAAAA,EAAMI,CAItB,CAAA,CACC,GAAKnC,CAAAA,CAAAA,CACL,SAAW,CAAA;AAAA;AAAA,UAAA,EAEPiC,CAAiB;AAAA,UAAA,EACjBC,CAAY;AAAA,UAAA,EACZF,CAAU,EAAA,CAAA,CAAA,EAAIN,CAAWM,CAAAA,CAAM,CAAC,CAAE,CAAA;AAAA,UAAA,EAClCnC,CAAS;AAAA,QAEZ,CAAA,CAAA,GAAGE,CAEHJ,CAAAA,CAAAA,CACH,CAEJ,CACF,EAEAmC,CAAK,CAAA,WAAA,CAAc,MCtLZ,CAAA,IAAMO,EAAa,CAAA,CAAC,CACzB,IAAAC,CAAAA,CAAAA,CACA,SAAAC,CAAAA,CAAAA,CACA,UAAAC,CAAAA,CAAAA,CACA,GAAGC,CACL,CAAA,GACE/C,kBAAA,CAAA,aAAA,CAACD,CAAA,CAAA,CACC,UAAU,mDACT,CAAA,GAAGgD,CAEJ/C,CAAAA,CAAAA,kBAAAA,CAAA,aAAC,CAAA,KAAA,CAAA,CAAI,UAAU,2GACbA,CAAAA,CAAAA,kBAAAA,CAAA,aAACoB,CAAAA,CAAAA,CAAA,CAAK,IAAA,CAAMwB,EAAM,IAAM,CAAA,CAAC,OAAS,CAAA,EAAE,CAAG,CAAA,KAAA,CAAM,cAAc,CAC3D5C,CAAAA,kBAAAA,CAAA,aAAC,CAAA,KAAA,CAAA,CAAI,SAAU,CAAA,gCAAA,CAAA,CACbA,mBAAA,aAACoB,CAAAA,CAAAA,CAAA,CAAK,IAAA,CAAK,SAAU,CAAA,IAAA,CAAM,CAAC,OAAS,CAAA,EAAE,CAAG,CAAA,CAAA,CAC1CpB,kBAAA,CAAA,aAAA,CAACoC,EAAA,CAAK,OAAA,CAAS,CAAC,qBAAA,CAAuB,mBAAmB,CAAA,CAAA,CACvDS,CACH,CACF,CAAA,CACCC,CACC9C,EAAAA,kBAAAA,CAAA,aAAC,CAAA,KAAA,CAAA,CAAI,UAAU,mBACbA,CAAAA,CAAAA,kBAAAA,CAAA,aAACoB,CAAAA,CAAAA,CAAA,CAAK,IAAA,CAAK,SAAS,IAAM,CAAA,CAAC,OAAS,CAAA,EAAE,CAAG,CAAA,CAAA,CACzCpB,mBAAA,aAACoC,CAAAA,CAAAA,CAAA,CAAK,OAAA,CAAS,CAAC,qBAAA,CAAuB,mBAAmB,CACvDU,CAAAA,CAAAA,CACH,CACF,CAEJ,CACF","file":"SocialCard.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-primary-100\";\nexport const focusRingWithinStyles =\n  \"focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-100\";\nexport const focusRingStylesCoerced = \"ring-2 ring-primary-100\";\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable = React.forwardRef<HTMLButtonElement, PressableProps>(\n  ({ children, type = \"button\", className, disabled, ...props }, ref) => (\n    <button\n      ref={ref}\n      type={type}\n      disabled={disabled}\n      className={cn(\n        \"appearance-none hover:opacity-80 transition-all active:scale-95\",\n        focusRingStyles,\n        disabled && \"opacity-50 cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n);\n\nPressable.displayName = \"Pressable\";\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n  name: IconName;\n  /** @default 24 */\n  size?: ResponsiveSize | ResponsiveSize[];\n  /** @default primary */\n  color?: IconColors;\n  title?: string;\n  className?: string;\n  style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n  primary: \"#080808\",\n  secondary: \"#666666\",\n  white: \"#ffffff\",\n  primaryBlue: \"#089CCB\",\n  disabled: \"#888888\",\n  danger: \"#FF0000\"\n};\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n  sm: \"640px\",\n  md: \"768px\",\n  lg: \"1024px\",\n  xl: \"1280px\",\n  \"2xl\": \"1536px\"\n};\n\nconst processSizes = (\n  sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n  if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n  const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n  const mediaQueries: Record<string, string> = {};\n  let baseSize: string | undefined;\n\n  // Process each size\n  sizeArray.forEach((size) => {\n    if (typeof size === \"number\") {\n      baseSize = `${size}px`;\n    } else {\n      const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n      const value = parseInt(valueStr, 10);\n      mediaQueries[`@media (min-width: ${BREAKPOINT_MAP[breakpoint]})`] =\n        `${value}px`;\n    }\n  });\n\n  // Create the style object with the correct structure\n  return {\n    width: baseSize || \"24px\",\n    height: baseSize || \"24px\",\n    ...Object.entries(mediaQueries).reduce(\n      (acc, [query, size]) => ({\n        ...acc,\n        [query]: {\n          width: size,\n          height: size\n        }\n      }),\n      {}\n    )\n  };\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n  (\n    {\n      name,\n      size = 24,\n      color = \"primary\",\n      title,\n      className,\n      style = {},\n      ...props\n    },\n    ref\n  ) => {\n    const IconComponent = IconMap[name];\n    const sizeStyles = processSizes(size);\n\n    return (\n      <div\n        className={cn(\"flex justify-center items-center\", className)}\n        style={{\n          ...sizeStyles,\n          [\"--icon-stroke\" as string]: COLOR_MAP[color],\n          ...style\n        }}\n      >\n        <IconComponent\n          ref={ref}\n          aria-hidden={!title}\n          aria-label={title}\n          stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\n\nIcon.displayName = \"Icon\";\n","import React from \"react\";\nimport { Typography } from \"../types/tailwind\";\n\ntype TextElement =\n  | \"p\"\n  | \"span\"\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"strong\"\n  | \"em\"\n  | \"blockquote\"\n  | \"pre\"\n  | \"code\"\n  | \"small\"\n  | \"label\"\n  | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n  p: HTMLParagraphElement;\n  span: HTMLSpanElement;\n  h1: HTMLHeadingElement;\n  h2: HTMLHeadingElement;\n  h3: HTMLHeadingElement;\n  h4: HTMLHeadingElement;\n  h5: HTMLHeadingElement;\n  h6: HTMLHeadingElement;\n  strong: HTMLElement;\n  em: HTMLElement;\n  blockquote: HTMLQuoteElement;\n  pre: HTMLPreElement;\n  code: HTMLElement;\n  small: HTMLElement;\n  label: HTMLLabelElement;\n  a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n  p: React.HTMLAttributes<HTMLParagraphElement>;\n  span: React.HTMLAttributes<HTMLSpanElement>;\n  h1: React.HTMLAttributes<HTMLHeadingElement>;\n  h2: React.HTMLAttributes<HTMLHeadingElement>;\n  h3: React.HTMLAttributes<HTMLHeadingElement>;\n  h4: React.HTMLAttributes<HTMLHeadingElement>;\n  h5: React.HTMLAttributes<HTMLHeadingElement>;\n  h6: React.HTMLAttributes<HTMLHeadingElement>;\n  strong: React.HTMLAttributes<HTMLElement>;\n  em: React.HTMLAttributes<HTMLElement>;\n  blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n  pre: React.HTMLAttributes<HTMLPreElement>;\n  code: React.HTMLAttributes<HTMLElement>;\n  small: React.HTMLAttributes<HTMLElement>;\n  label: React.LabelHTMLAttributes<HTMLLabelElement>;\n  a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n  | \"primary\"\n  | \"secondary\"\n  | \"white\"\n  | \"primary-blue\"\n  | \"disabled\"\n  | \"danger\"\n  | \"inherit\"\n  | \"primary-100\";\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 = color === \"inherit\" ? \"text-inherit\" : `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={`\n          font-sans antialiased\n          ${typographyClasses}\n          ${colorClasses}\n          ${weight && `!${fontWeight[weight]}`}\n          ${className}\n        `}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nText.displayName = \"Text\";\n","import React from \"react\";\nimport { Pressable, PressableProps } from \"./Pressable\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\nimport { IconName } from \"@deckai/icons\";\n\nexport type SocialCardProps = {\n  icon: IconName;\n  followers: string;\n  engagement?: string;\n} & PressableProps;\n\nexport const SocialCard = ({\n  icon,\n  followers,\n  engagement,\n  ...pressableProps\n}: SocialCardProps) => (\n  <Pressable\n    className=\"sm:w-max w-full hover:bg-secondary-400 rounded-lg\"\n    {...pressableProps}\n  >\n    <div className=\"flex sm:flex-row flex-col items-center sm:gap-4 gap-1 sm:px-6 sm:py-4 p-2 border border-stroke rounded-lg\">\n      <Icon name={icon} size={[\"lg:40\", 32]} color=\"primaryBlue\" />\n      <div className=\"flex items-center sm:pt-0 pt-3\">\n        <Icon name=\"profile\" size={[\"sm:20\", 16]} />\n        <Text variant={[\"body-default-medium\", \"md:body-xs-medium\"]}>\n          {followers}\n        </Text>\n      </div>\n      {engagement && (\n        <div className=\"flex items-center\">\n          <Icon name=\"like-1\" size={[\"sm:20\", 16]} />\n          <Text variant={[\"body-default-medium\", \"md:body-xs-medium\"]}>\n            {engagement}\n          </Text>\n        </div>\n      )}\n    </div>\n  </Pressable>\n);\n"]}

package/dist/components/SocialCard.js

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

package/dist/components/SocialCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/utils/index.ts","../../src/components/Pressable.tsx","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../src/components/SocialCard.tsx"],"names":["focusRingStyles","cn","inputs","twMerge","clsx","Pressable","React","children","type","className","disabled","props","ref","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Icon","name","color","title","style","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","SocialCard","icon","followers","engagement","pressableProps"],"mappings":"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","file":"SocialCard.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:border-2 focus-visible:border-primary-100\";\n\nexport const focusRingStylesCoerced = \"border-2 border-primary-100\";\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable = React.forwardRef<HTMLButtonElement, PressableProps>(\n  ({ children, type = \"button\", className, disabled, ...props }, ref) => (\n    <button\n      ref={ref}\n      type={type}\n      disabled={disabled}\n      className={cn(\n        \"appearance-none hover:opacity-80 transition-all active:scale-95\",\n        focusRingStyles,\n        disabled && \"opacity-50 cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n);\n\nPressable.displayName = \"Pressable\";\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n  name: IconName;\n  /** @default 24 */\n  size?: ResponsiveSize | ResponsiveSize[];\n  /** @default primary */\n  color?: IconColors;\n  title?: string;\n  className?: string;\n  style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n  primary: \"#080808\",\n  secondary: \"#666666\",\n  white: \"#ffffff\",\n  primaryBlue: \"#089CCB\",\n  disabled: \"#888888\",\n  danger: \"#FF0000\"\n};\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n  sm: \"640px\",\n  md: \"768px\",\n  lg: \"1024px\",\n  xl: \"1280px\",\n  \"2xl\": \"1536px\"\n};\n\nconst processSizes = (\n  sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n  if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n  const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n  const mediaQueries: Record<string, string> = {};\n  let baseSize: string | undefined;\n\n  // Process each size\n  sizeArray.forEach((size) => {\n    if (typeof size === \"number\") {\n      baseSize = `${size}px`;\n    } else {\n      const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n      const value = parseInt(valueStr, 10);\n      mediaQueries[`@media (min-width: ${BREAKPOINT_MAP[breakpoint]})`] =\n        `${value}px`;\n    }\n  });\n\n  // Create the style object with the correct structure\n  return {\n    width: baseSize || \"24px\",\n    height: baseSize || \"24px\",\n    ...Object.entries(mediaQueries).reduce(\n      (acc, [query, size]) => ({\n        ...acc,\n        [query]: {\n          width: size,\n          height: size\n        }\n      }),\n      {}\n    )\n  };\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n  (\n    {\n      name,\n      size = 24,\n      color = \"primary\",\n      title,\n      className,\n      style = {},\n      ...props\n    },\n    ref\n  ) => {\n    const IconComponent = IconMap[name];\n    const sizeStyles = processSizes(size);\n\n    return (\n      <div\n        className={cn(\"flex justify-center items-center\", className)}\n        style={{\n          ...sizeStyles,\n          [\"--icon-stroke\" as string]: COLOR_MAP[color],\n          ...style\n        }}\n      >\n        <IconComponent\n          ref={ref}\n          aria-hidden={!title}\n          aria-label={title}\n          stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\n\nIcon.displayName = \"Icon\";\n","import React from \"react\";\nimport { Typography } from \"../types/tailwind\";\n\ntype TextElement =\n  | \"p\"\n  | \"span\"\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"strong\"\n  | \"em\"\n  | \"blockquote\"\n  | \"pre\"\n  | \"code\"\n  | \"small\"\n  | \"label\"\n  | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n  p: HTMLParagraphElement;\n  span: HTMLSpanElement;\n  h1: HTMLHeadingElement;\n  h2: HTMLHeadingElement;\n  h3: HTMLHeadingElement;\n  h4: HTMLHeadingElement;\n  h5: HTMLHeadingElement;\n  h6: HTMLHeadingElement;\n  strong: HTMLElement;\n  em: HTMLElement;\n  blockquote: HTMLQuoteElement;\n  pre: HTMLPreElement;\n  code: HTMLElement;\n  small: HTMLElement;\n  label: HTMLLabelElement;\n  a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n  p: React.HTMLAttributes<HTMLParagraphElement>;\n  span: React.HTMLAttributes<HTMLSpanElement>;\n  h1: React.HTMLAttributes<HTMLHeadingElement>;\n  h2: React.HTMLAttributes<HTMLHeadingElement>;\n  h3: React.HTMLAttributes<HTMLHeadingElement>;\n  h4: React.HTMLAttributes<HTMLHeadingElement>;\n  h5: React.HTMLAttributes<HTMLHeadingElement>;\n  h6: React.HTMLAttributes<HTMLHeadingElement>;\n  strong: React.HTMLAttributes<HTMLElement>;\n  em: React.HTMLAttributes<HTMLElement>;\n  blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n  pre: React.HTMLAttributes<HTMLPreElement>;\n  code: React.HTMLAttributes<HTMLElement>;\n  small: React.HTMLAttributes<HTMLElement>;\n  label: React.LabelHTMLAttributes<HTMLLabelElement>;\n  a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n  | \"primary\"\n  | \"secondary\"\n  | \"white\"\n  | \"primary-blue\"\n  | \"disabled\"\n  | \"danger\"\n  | \"inherit\"\n  | \"primary-100\";\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 = color === \"inherit\" ? \"text-inherit\" : `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={`\n          font-sans antialiased\n          ${typographyClasses}\n          ${colorClasses}\n          ${weight && `!${fontWeight[weight]}`}\n          ${className}\n        `}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nText.displayName = \"Text\";\n","import React from \"react\";\nimport { Pressable, PressableProps } from \"./Pressable\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\nimport { IconName } from \"@deckai/icons\";\n\nexport type SocialCardProps = {\n  icon: IconName;\n  followers: string;\n  engagement?: string;\n} & PressableProps;\n\nexport const SocialCard = ({\n  icon,\n  followers,\n  engagement,\n  ...pressableProps\n}: SocialCardProps) => (\n  <Pressable\n    className=\"sm:w-max w-full hover:bg-secondary-400 rounded-lg\"\n    {...pressableProps}\n  >\n    <div className=\"flex sm:flex-row flex-col items-center sm:gap-4 gap-1 sm:px-6 sm:py-4 p-2 border border-stroke rounded-lg\">\n      <Icon name={icon} size={[\"lg:40\", 32]} color=\"primaryBlue\" />\n      <div className=\"flex items-center sm:pt-0 pt-3\">\n        <Icon name=\"profile\" size={[\"sm:20\", 16]} />\n        <Text variant={[\"body-default-medium\", \"md:body-xs-medium\"]}>\n          {followers}\n        </Text>\n      </div>\n      {engagement && (\n        <div className=\"flex items-center\">\n          <Icon name=\"like-1\" size={[\"sm:20\", 16]} />\n          <Text variant={[\"body-default-medium\", \"md:body-xs-medium\"]}>\n            {engagement}\n          </Text>\n        </div>\n      )}\n    </div>\n  </Pressable>\n);\n"]}
+{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/utils/index.ts","../../src/components/Pressable.tsx","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../src/components/SocialCard.tsx"],"names":["focusRingStyles","cn","inputs","twMerge","clsx","Pressable","React","children","type","className","disabled","props","ref","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Icon","name","color","title","style","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","SocialCard","icon","followers","engagement","pressableProps"],"mappings":"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","file":"SocialCard.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-primary-100\";\nexport const focusRingWithinStyles =\n  \"focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-100\";\nexport const focusRingStylesCoerced = \"ring-2 ring-primary-100\";\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable = React.forwardRef<HTMLButtonElement, PressableProps>(\n  ({ children, type = \"button\", className, disabled, ...props }, ref) => (\n    <button\n      ref={ref}\n      type={type}\n      disabled={disabled}\n      className={cn(\n        \"appearance-none hover:opacity-80 transition-all active:scale-95\",\n        focusRingStyles,\n        disabled && \"opacity-50 cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n);\n\nPressable.displayName = \"Pressable\";\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n  name: IconName;\n  /** @default 24 */\n  size?: ResponsiveSize | ResponsiveSize[];\n  /** @default primary */\n  color?: IconColors;\n  title?: string;\n  className?: string;\n  style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n  primary: \"#080808\",\n  secondary: \"#666666\",\n  white: \"#ffffff\",\n  primaryBlue: \"#089CCB\",\n  disabled: \"#888888\",\n  danger: \"#FF0000\"\n};\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n  sm: \"640px\",\n  md: \"768px\",\n  lg: \"1024px\",\n  xl: \"1280px\",\n  \"2xl\": \"1536px\"\n};\n\nconst processSizes = (\n  sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n  if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n  const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n  const mediaQueries: Record<string, string> = {};\n  let baseSize: string | undefined;\n\n  // Process each size\n  sizeArray.forEach((size) => {\n    if (typeof size === \"number\") {\n      baseSize = `${size}px`;\n    } else {\n      const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n      const value = parseInt(valueStr, 10);\n      mediaQueries[`@media (min-width: ${BREAKPOINT_MAP[breakpoint]})`] =\n        `${value}px`;\n    }\n  });\n\n  // Create the style object with the correct structure\n  return {\n    width: baseSize || \"24px\",\n    height: baseSize || \"24px\",\n    ...Object.entries(mediaQueries).reduce(\n      (acc, [query, size]) => ({\n        ...acc,\n        [query]: {\n          width: size,\n          height: size\n        }\n      }),\n      {}\n    )\n  };\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n  (\n    {\n      name,\n      size = 24,\n      color = \"primary\",\n      title,\n      className,\n      style = {},\n      ...props\n    },\n    ref\n  ) => {\n    const IconComponent = IconMap[name];\n    const sizeStyles = processSizes(size);\n\n    return (\n      <div\n        className={cn(\"flex justify-center items-center\", className)}\n        style={{\n          ...sizeStyles,\n          [\"--icon-stroke\" as string]: COLOR_MAP[color],\n          ...style\n        }}\n      >\n        <IconComponent\n          ref={ref}\n          aria-hidden={!title}\n          aria-label={title}\n          stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\n\nIcon.displayName = \"Icon\";\n","import React from \"react\";\nimport { Typography } from \"../types/tailwind\";\n\ntype TextElement =\n  | \"p\"\n  | \"span\"\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"strong\"\n  | \"em\"\n  | \"blockquote\"\n  | \"pre\"\n  | \"code\"\n  | \"small\"\n  | \"label\"\n  | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n  p: HTMLParagraphElement;\n  span: HTMLSpanElement;\n  h1: HTMLHeadingElement;\n  h2: HTMLHeadingElement;\n  h3: HTMLHeadingElement;\n  h4: HTMLHeadingElement;\n  h5: HTMLHeadingElement;\n  h6: HTMLHeadingElement;\n  strong: HTMLElement;\n  em: HTMLElement;\n  blockquote: HTMLQuoteElement;\n  pre: HTMLPreElement;\n  code: HTMLElement;\n  small: HTMLElement;\n  label: HTMLLabelElement;\n  a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n  p: React.HTMLAttributes<HTMLParagraphElement>;\n  span: React.HTMLAttributes<HTMLSpanElement>;\n  h1: React.HTMLAttributes<HTMLHeadingElement>;\n  h2: React.HTMLAttributes<HTMLHeadingElement>;\n  h3: React.HTMLAttributes<HTMLHeadingElement>;\n  h4: React.HTMLAttributes<HTMLHeadingElement>;\n  h5: React.HTMLAttributes<HTMLHeadingElement>;\n  h6: React.HTMLAttributes<HTMLHeadingElement>;\n  strong: React.HTMLAttributes<HTMLElement>;\n  em: React.HTMLAttributes<HTMLElement>;\n  blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n  pre: React.HTMLAttributes<HTMLPreElement>;\n  code: React.HTMLAttributes<HTMLElement>;\n  small: React.HTMLAttributes<HTMLElement>;\n  label: React.LabelHTMLAttributes<HTMLLabelElement>;\n  a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n  | \"primary\"\n  | \"secondary\"\n  | \"white\"\n  | \"primary-blue\"\n  | \"disabled\"\n  | \"danger\"\n  | \"inherit\"\n  | \"primary-100\";\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 = color === \"inherit\" ? \"text-inherit\" : `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={`\n          font-sans antialiased\n          ${typographyClasses}\n          ${colorClasses}\n          ${weight && `!${fontWeight[weight]}`}\n          ${className}\n        `}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nText.displayName = \"Text\";\n","import React from \"react\";\nimport { Pressable, PressableProps } from \"./Pressable\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\nimport { IconName } from \"@deckai/icons\";\n\nexport type SocialCardProps = {\n  icon: IconName;\n  followers: string;\n  engagement?: string;\n} & PressableProps;\n\nexport const SocialCard = ({\n  icon,\n  followers,\n  engagement,\n  ...pressableProps\n}: SocialCardProps) => (\n  <Pressable\n    className=\"sm:w-max w-full hover:bg-secondary-400 rounded-lg\"\n    {...pressableProps}\n  >\n    <div className=\"flex sm:flex-row flex-col items-center sm:gap-4 gap-1 sm:px-6 sm:py-4 p-2 border border-stroke rounded-lg\">\n      <Icon name={icon} size={[\"lg:40\", 32]} color=\"primaryBlue\" />\n      <div className=\"flex items-center sm:pt-0 pt-3\">\n        <Icon name=\"profile\" size={[\"sm:20\", 16]} />\n        <Text variant={[\"body-default-medium\", \"md:body-xs-medium\"]}>\n          {followers}\n        </Text>\n      </div>\n      {engagement && (\n        <div className=\"flex items-center\">\n          <Icon name=\"like-1\" size={[\"sm:20\", 16]} />\n          <Text variant={[\"body-default-medium\", \"md:body-xs-medium\"]}>\n            {engagement}\n          </Text>\n        </div>\n      )}\n    </div>\n  </Pressable>\n);\n"]}

package/dist/components/Switch.cjs

@@ -1,2 +1,2 @@
-'use strict';var e=require('react'),t=require('@radix-ui/react-switch'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var e__namespace=/*#__PURE__*/_interopNamespace(e);var t__namespace=/*#__PURE__*/_interopNamespace(t);function i(...s){return tailwindMerge.twMerge(clsx.clsx(s))}var c="focus-visible:outline-none focus-visible:border-2 focus-visible:border-primary-100";var f=e__namespace.forwardRef(({className:s,label:o,description:r,...a},n)=>e__namespace.createElement("div",{className:"flex items-center gap-2"},e__namespace.createElement(t__namespace.Root,{className:i("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",c,"disabled:cursor-not-allowed disabled:opacity-50","data-[state=checked]:bg-primary-50 data-[state=unchecked]:bg-secondary-50",s),...a,ref:n},e__namespace.createElement(t__namespace.Thumb,{className:i("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-primary",htmlFor:a.id},o),r&&e__namespace.createElement("span",{className:"text-xs text-secondary"},r))));f.displayName="Switch";exports.Switch=f;//# sourceMappingURL=Switch.cjs.map
+'use strict';var t=require('react'),e=require('@radix-ui/react-switch'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var t__namespace=/*#__PURE__*/_interopNamespace(t);var e__namespace=/*#__PURE__*/_interopNamespace(e);function r(...s){return tailwindMerge.twMerge(clsx.clsx(s))}var a="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100";var f=t__namespace.forwardRef(({className:s,label:o,description:i,...n},c)=>t__namespace.createElement("div",{className:"flex items-center gap-2"},t__namespace.createElement(e__namespace.Root,{className:r("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",a,"disabled:cursor-not-allowed disabled:opacity-50","data-[state=checked]:bg-primary-50 data-[state=unchecked]:bg-secondary-50",s),...n,ref:c},t__namespace.createElement(e__namespace.Thumb,{className:r("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||i)&&t__namespace.createElement("div",{className:"flex flex-col"},o&&t__namespace.createElement("label",{className:"text-sm font-medium text-primary",htmlFor:n.id},o),i&&t__namespace.createElement("span",{className:"text-xs text-secondary"},i))));f.displayName="Switch";exports.Switch=f;//# sourceMappingURL=Switch.cjs.map
 //# sourceMappingURL=Switch.cjs.map

package/dist/components/Switch.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/tailwind.ts","../../src/components/Switch.tsx"],"names":["cn","inputs","twMerge","clsx","focusRingStyles","Switch","e","className","label","description","props","ref","t"],"mappings":"8hBAGO,SAASA,KAAMC,CAAsB,CAAA,CAC1C,OAAOC,qBAAQC,CAAAA,SAAAA,CAAKF,CAAM,CAAC,CAC7B,CC8DO,IAAMG,CACX,CAAA,oFAAA,KCxDWC,CAAe,CAAAC,YAAA,CAAA,UAAA,CAG1B,CAAC,CAAE,SAAA,CAAAC,CAAW,CAAA,KAAA,CAAAC,CAAO,CAAA,WAAA,CAAAC,EAAa,GAAGC,CAAM,CAAGC,CAAAA,CAAAA,GAC9CL,YAAC,CAAA,aAAA,CAAA,KAAA,CAAA,CAAI,UAAU,yBACb,CAAA,CAAAA,YAAA,CAAA,aAAA,CAAiBM,YAAhB,CAAA,IAAA,CAAA,CACC,SAAWZ,CAAAA,CAAAA,CACT,oDACA,uDACA,CAAA,8CAAA,CACAI,EACA,iDACA,CAAA,2EAAA,CACAG,CACF,CACC,CAAA,GAAGG,CACJ,CAAA,GAAA,CAAKC,CAEL,CAAA,CAAAL,YAAA,CAAA,aAAA,CAAiBM,mBAAhB,CACC,SAAA,CAAWZ,CACT,CAAA,mCAAA,CACA,wCACA,CAAA,sBAAA,CACA,qCACA,sCACF,CAAA,CACF,CACF,CAAA,CAAA,CACEQ,CAASC,EAAAA,CAAAA,GACTH,2BAAC,KAAI,CAAA,CAAA,SAAA,CAAU,iBACZE,CACC,EAAAF,YAAA,CAAA,aAAA,CAAC,SACC,SAAU,CAAA,kCAAA,CACV,OAASI,CAAAA,CAAAA,CAAM,EAEdF,CAAAA,CAAAA,CACH,EAEDC,CACC,EAAAH,YAAA,CAAA,aAAA,CAAC,MAAK,CAAA,CAAA,SAAA,CAAU,wBAA0BG,CAAAA,CAAAA,CAAY,CAE1D,CAEJ,CACD,EAEDJ,CAAAA,CAAO,WAAc,CAAA,QAAA","file":"Switch.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 { 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:border-2 focus-visible:border-primary-100\";\n\nexport const focusRingStylesCoerced = \"border-2 border-primary-100\";\n","import * as React from \"react\";\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type SwitchProps = React.ComponentPropsWithoutRef<\n  typeof SwitchPrimitive.Root\n> & {\n  label?: string;\n  description?: string;\n};\n\nexport const Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitive.Root>,\n  SwitchProps\n>(({ className, label, description, ...props }, ref) => (\n  <div className=\"flex items-center gap-2\">\n    <SwitchPrimitive.Root\n      className={cn(\n        \"peer inline-flex h-6 w-11 shrink-0 cursor-pointer\",\n        \"items-center rounded-full border-2 border-transparent\",\n        \"transition-colors focus-visible:outline-none\",\n        focusRingStyles,\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        \"data-[state=checked]:bg-primary-50 data-[state=unchecked]:bg-secondary-50\",\n        className\n      )}\n      {...props}\n      ref={ref}\n    >\n      <SwitchPrimitive.Thumb\n        className={cn(\n          \"pointer-events-none block h-5 w-5\",\n          \"rounded-full bg-white shadow-lg ring-0\",\n          \"transition-transform\",\n          \"data-[state=checked]:translate-x-5\",\n          \"data-[state=unchecked]:translate-x-0\"\n        )}\n      />\n    </SwitchPrimitive.Root>\n    {(label || description) && (\n      <div className=\"flex flex-col\">\n        {label && (\n          <label\n            className=\"text-sm font-medium text-primary\"\n            htmlFor={props.id}\n          >\n            {label}\n          </label>\n        )}\n        {description && (\n          <span className=\"text-xs text-secondary\">{description}</span>\n        )}\n      </div>\n    )}\n  </div>\n));\n\nSwitch.displayName = \"Switch\";\n"]}
+{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/tailwind.ts","../../src/components/Switch.tsx"],"names":["cn","inputs","twMerge","clsx","focusRingStyles","Switch","t","className","label","description","props","ref","e"],"mappings":"8hBAGO,SAASA,KAAMC,CAAsB,CAAA,CAC1C,OAAOC,qBAAQC,CAAAA,SAAAA,CAAKF,CAAM,CAAC,CAC7B,CC8DO,IAAMG,CACX,CAAA,gFAAA,KCxDWC,CAAe,CAAAC,YAAA,CAAA,UAAA,CAG1B,CAAC,CAAE,SAAA,CAAAC,CAAW,CAAA,KAAA,CAAAC,CAAO,CAAA,WAAA,CAAAC,EAAa,GAAGC,CAAM,CAAGC,CAAAA,CAAAA,GAC9CL,YAAC,CAAA,aAAA,CAAA,KAAA,CAAA,CAAI,UAAU,yBACb,CAAA,CAAAA,YAAA,CAAA,aAAA,CAAiBM,YAAhB,CAAA,IAAA,CAAA,CACC,SAAWZ,CAAAA,CAAAA,CACT,oDACA,uDACA,CAAA,8CAAA,CACAI,EACA,iDACA,CAAA,2EAAA,CACAG,CACF,CACC,CAAA,GAAGG,CACJ,CAAA,GAAA,CAAKC,CAEL,CAAA,CAAAL,YAAA,CAAA,aAAA,CAAiBM,mBAAhB,CACC,SAAA,CAAWZ,CACT,CAAA,mCAAA,CACA,wCACA,CAAA,sBAAA,CACA,qCACA,sCACF,CAAA,CACF,CACF,CAAA,CAAA,CACEQ,CAASC,EAAAA,CAAAA,GACTH,2BAAC,KAAI,CAAA,CAAA,SAAA,CAAU,iBACZE,CACC,EAAAF,YAAA,CAAA,aAAA,CAAC,SACC,SAAU,CAAA,kCAAA,CACV,OAASI,CAAAA,CAAAA,CAAM,EAEdF,CAAAA,CAAAA,CACH,EAEDC,CACC,EAAAH,YAAA,CAAA,aAAA,CAAC,MAAK,CAAA,CAAA,SAAA,CAAU,wBAA0BG,CAAAA,CAAAA,CAAY,CAE1D,CAEJ,CACD,EAEDJ,CAAAA,CAAO,WAAc,CAAA,QAAA","file":"Switch.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 { 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-primary-100\";\nexport const focusRingWithinStyles =\n  \"focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-100\";\nexport const focusRingStylesCoerced = \"ring-2 ring-primary-100\";\n","import * as React from \"react\";\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type SwitchProps = React.ComponentPropsWithoutRef<\n  typeof SwitchPrimitive.Root\n> & {\n  label?: string;\n  description?: string;\n};\n\nexport const Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitive.Root>,\n  SwitchProps\n>(({ className, label, description, ...props }, ref) => (\n  <div className=\"flex items-center gap-2\">\n    <SwitchPrimitive.Root\n      className={cn(\n        \"peer inline-flex h-6 w-11 shrink-0 cursor-pointer\",\n        \"items-center rounded-full border-2 border-transparent\",\n        \"transition-colors focus-visible:outline-none\",\n        focusRingStyles,\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        \"data-[state=checked]:bg-primary-50 data-[state=unchecked]:bg-secondary-50\",\n        className\n      )}\n      {...props}\n      ref={ref}\n    >\n      <SwitchPrimitive.Thumb\n        className={cn(\n          \"pointer-events-none block h-5 w-5\",\n          \"rounded-full bg-white shadow-lg ring-0\",\n          \"transition-transform\",\n          \"data-[state=checked]:translate-x-5\",\n          \"data-[state=unchecked]:translate-x-0\"\n        )}\n      />\n    </SwitchPrimitive.Root>\n    {(label || description) && (\n      <div className=\"flex flex-col\">\n        {label && (\n          <label\n            className=\"text-sm font-medium text-primary\"\n            htmlFor={props.id}\n          >\n            {label}\n          </label>\n        )}\n        {description && (\n          <span className=\"text-xs text-secondary\">{description}</span>\n        )}\n      </div>\n    )}\n  </div>\n));\n\nSwitch.displayName = \"Switch\";\n"]}

package/dist/components/Switch.js

@@ -1,2 +1,2 @@
-import*as e from'react';import*as t from'@radix-ui/react-switch';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';function i(...s){return twMerge(clsx(s))}var c="focus-visible:outline-none focus-visible:border-2 focus-visible:border-primary-100";var f=e.forwardRef(({className:s,label:o,description:r,...a},n)=>e.createElement("div",{className:"flex items-center gap-2"},e.createElement(t.Root,{className:i("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",c,"disabled:cursor-not-allowed disabled:opacity-50","data-[state=checked]:bg-primary-50 data-[state=unchecked]:bg-secondary-50",s),...a,ref:n},e.createElement(t.Thumb,{className:i("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.createElement("div",{className:"flex flex-col"},o&&e.createElement("label",{className:"text-sm font-medium text-primary",htmlFor:a.id},o),r&&e.createElement("span",{className:"text-xs text-secondary"},r))));f.displayName="Switch";export{f as Switch};//# sourceMappingURL=Switch.js.map
+import*as t from'react';import*as e from'@radix-ui/react-switch';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';function r(...s){return twMerge(clsx(s))}var a="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100";var f=t.forwardRef(({className:s,label:o,description:i,...n},c)=>t.createElement("div",{className:"flex items-center gap-2"},t.createElement(e.Root,{className:r("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",a,"disabled:cursor-not-allowed disabled:opacity-50","data-[state=checked]:bg-primary-50 data-[state=unchecked]:bg-secondary-50",s),...n,ref:c},t.createElement(e.Thumb,{className:r("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||i)&&t.createElement("div",{className:"flex flex-col"},o&&t.createElement("label",{className:"text-sm font-medium text-primary",htmlFor:n.id},o),i&&t.createElement("span",{className:"text-xs text-secondary"},i))));f.displayName="Switch";export{f as Switch};//# sourceMappingURL=Switch.js.map
 //# sourceMappingURL=Switch.js.map