@deckai/deck-ui 0.0.12 → 0.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +127 -1
- package/dist/components/AboutCard.cjs +2 -2
- package/dist/components/AboutCard.cjs.map +1 -1
- package/dist/components/AboutCard.js +2 -2
- package/dist/components/AboutCard.js.map +1 -1
- package/dist/components/Breadcrumbs.cjs +1 -1
- package/dist/components/Breadcrumbs.cjs.map +1 -1
- package/dist/components/Breadcrumbs.js +1 -1
- package/dist/components/Breadcrumbs.js.map +1 -1
- package/dist/components/Combobox.cjs +1 -1
- package/dist/components/Combobox.cjs.map +1 -1
- package/dist/components/Combobox.d.cts +7 -1
- package/dist/components/Combobox.d.ts +7 -1
- package/dist/components/Combobox.js +1 -1
- package/dist/components/Combobox.js.map +1 -1
- package/dist/components/ContactItem.cjs +1 -1
- package/dist/components/ContactItem.cjs.map +1 -1
- package/dist/components/ContactItem.js +1 -1
- package/dist/components/ContactItem.js.map +1 -1
- package/dist/components/Icon.d.cts +1 -1
- package/dist/components/Icon.d.ts +1 -1
- package/dist/components/Input.cjs +1 -1
- package/dist/components/Input.cjs.map +1 -1
- package/dist/components/Input.d.cts +6 -2
- package/dist/components/Input.d.ts +6 -2
- package/dist/components/Input.js +1 -1
- package/dist/components/Input.js.map +1 -1
- package/dist/components/Link.cjs +1 -1
- package/dist/components/Link.cjs.map +1 -1
- package/dist/components/Link.d.cts +1 -1
- package/dist/components/Link.d.ts +1 -1
- package/dist/components/Link.js +1 -1
- package/dist/components/Link.js.map +1 -1
- package/dist/components/MultiSelectCombobox.cjs +2 -0
- package/dist/components/MultiSelectCombobox.cjs.map +1 -0
- package/dist/components/MultiSelectCombobox.d.cts +21 -0
- package/dist/components/MultiSelectCombobox.d.ts +21 -0
- package/dist/components/MultiSelectCombobox.js +2 -0
- package/dist/components/MultiSelectCombobox.js.map +1 -0
- package/dist/components/Navbar.cjs +2 -2
- package/dist/components/Navbar.cjs.map +1 -1
- package/dist/components/Navbar.d.cts +1 -1
- package/dist/components/Navbar.d.ts +1 -1
- package/dist/components/Navbar.js +2 -2
- package/dist/components/Navbar.js.map +1 -1
- package/dist/components/NavbarItem.d.cts +1 -1
- package/dist/components/NavbarItem.d.ts +1 -1
- package/dist/components/ProfileCard.cjs +2 -2
- package/dist/components/ProfileCard.cjs.map +1 -1
- package/dist/components/ProfileCard.js +2 -2
- package/dist/components/ProfileCard.js.map +1 -1
- package/dist/components/Sidebar.cjs +2 -0
- package/dist/components/Sidebar.cjs.map +1 -0
- package/dist/components/Sidebar.d.cts +37 -0
- package/dist/components/Sidebar.d.ts +37 -0
- package/dist/components/Sidebar.js +2 -0
- package/dist/components/Sidebar.js.map +1 -0
- package/dist/components/Tag.cjs +1 -1
- package/dist/components/Tag.cjs.map +1 -1
- package/dist/components/Tag.d.cts +2 -1
- package/dist/components/Tag.d.ts +2 -1
- package/dist/components/Tag.js +1 -1
- package/dist/components/Tag.js.map +1 -1
- package/dist/components/Text.d.cts +2 -2
- package/dist/components/Text.d.ts +2 -2
- package/dist/components/TextArea.cjs +2 -0
- package/dist/components/TextArea.cjs.map +1 -0
- package/dist/components/TextArea.d.cts +19 -0
- package/dist/components/TextArea.d.ts +19 -0
- package/dist/components/TextArea.js +2 -0
- package/dist/components/TextArea.js.map +1 -0
- package/dist/components/WorkCard.cjs +1 -1
- package/dist/components/WorkCard.cjs.map +1 -1
- package/dist/components/WorkCard.js +1 -1
- package/dist/components/WorkCard.js.map +1 -1
- package/dist/index.cjs +3 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +78 -23
- package/dist/index.d.ts +78 -23
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/dist/styles/styles.css +1 -1
- package/dist/{tailwind-BKauZ5Yx.d.cts → tailwind-CIZ10fKA.d.cts} +1 -0
- package/dist/{tailwind-BKauZ5Yx.d.ts → tailwind-CIZ10fKA.d.ts} +1 -0
- package/package.json +3 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../src/components/Link.tsx","../../src/utils/tailwind.ts","../../src/components/Breadcrumbs.tsx"],"names":["cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","children","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","focusRingStyles","Link","href","DefaultSeparator","Breadcrumbs","items","SeparatorComponent","onHomeClick","renderSeparator","item","index","isLastItem"],"mappings":"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","file":"Breadcrumbs.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: ResponsiveSize | ResponsiveSize[];\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\"\n};\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n \"2xl\": \"1536px\"\n};\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n const mediaQueries: Record<string, string> = {};\n let baseSize: string | undefined;\n\n // Process each size\n sizeArray.forEach((size) => {\n if (typeof size === \"number\") {\n baseSize = `${size}px`;\n } else {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n mediaQueries[`@media (min-width: ${BREAKPOINT_MAP[breakpoint]})`] =\n `${value}px`;\n }\n });\n\n // Create the style object with the correct structure\n return {\n width: baseSize || \"24px\",\n height: baseSize || \"24px\",\n ...Object.entries(mediaQueries).reduce(\n (acc, [query, size]) => ({\n ...acc,\n [query]: {\n width: size,\n height: size\n }\n }),\n {}\n )\n };\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const sizeStyles = processSizes(size);\n\n return (\n <div\n className={cn(\"flex justify-center items-center\", className)}\n style={{\n ...sizeStyles,\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import React from \"react\";\nimport {\n Colors,\n TextColorVariant,\n PrimaryShades,\n SecondaryShades,\n TertiaryShades,\n Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n ? TextColorVariant\n : T extends \"primary\"\n ? keyof PrimaryShades\n : T extends \"secondary\"\n ? keyof SecondaryShades\n : T extends \"tertiary\"\n ? keyof TertiaryShades\n : never;\n\ntype ColorKey = {\n [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: ColorKey | \"inherit\";\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"text-primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import React from \"react\";\nimport { Text, TextProps } from \"./Text\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type LinkProps = {\n href: string;\n children: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n} & Pick<TextProps, \"variant\" | \"color\"> &\n React.AnchorHTMLAttributes<HTMLAnchorElement>;\n\nexport const Link = ({\n children,\n color = \"text-primary\",\n variant = \"body-default-semibold\",\n href,\n className,\n ...props\n}: LinkProps) => (\n <Text variant={variant} color={color}>\n <a\n href={href}\n className={cn(\n \"hover:opacity-80 transition-all active:scale-95\",\n focusRingStyles,\n className\n )}\n {...props}\n >\n {children}\n </a>\n </Text>\n);\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React from \"react\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\nimport { Link } from \"./Link\";\n\ntype BreadcrumbItem = {\n label: string;\n href?: string;\n};\n\nexport type BreadcrumbsProps = {\n items: BreadcrumbItem[];\n className?: string;\n SeparatorComponent?: React.ReactElement;\n onHomeClick: () => void;\n};\n\nconst DefaultSeparator = () => (\n <Text variant={[\"sm:body-lg\", \"body-xs\"]} color=\"text-primary\">\n /\n </Text>\n);\n\nexport const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(\n (\n { items, className, SeparatorComponent = DefaultSeparator, onHomeClick },\n ref\n ) => {\n const renderSeparator = () =>\n typeof SeparatorComponent === \"function\" ? (\n <SeparatorComponent />\n ) : (\n React.cloneElement(SeparatorComponent)\n );\n\n return (\n <nav\n ref={ref}\n aria-label=\"Breadcrumb\"\n className={cn(\n \"sm:relative sticky top-0 sm:border-none border-secondary-50 border-b-[1px] pb-2\",\n className\n )}\n >\n <ol className=\"flex flex-wrap items-center gap-2\">\n <Icon\n onClick={onHomeClick}\n name=\"home\"\n size={[\"sm:20\", 16]}\n color=\"secondary\"\n className=\"pb-0.5\"\n />\n {renderSeparator()}\n {items.map((item, index) => {\n const isLastItem = index === items.length - 1;\n\n return isLastItem || !item.href ? (\n <Text\n variant={\n isLastItem\n ? [\"body-xs-medium\", \"md:body-default-semibold\"]\n : [\"body-xs\", \"md:body-default\"]\n }\n color={isLastItem ? \"text-primary\" : \"text-secondary\"}\n aria-current={isLastItem ? \"page\" : undefined}\n key={item.label}\n >\n {item.label}\n </Text>\n ) : (\n <>\n <Link href={item.href} key={item.label}>\n {item.label}\n </Link>\n {renderSeparator()}\n </>\n );\n })}\n </ol>\n </nav>\n );\n }\n);\n\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../src/components/Link.tsx","../../src/utils/tailwind.ts","../../src/components/Breadcrumbs.tsx"],"names":["cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","children","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","focusRingStyles","Link","href","DefaultSeparator","Breadcrumbs","items","SeparatorComponent","onHomeClick","renderSeparator","item","index","isLastItem"],"mappings":"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","file":"Breadcrumbs.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: ResponsiveSize | ResponsiveSize[];\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\"\n};\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n \"2xl\": \"1536px\"\n};\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n const mediaQueries: Record<string, string> = {};\n let baseSize: string | undefined;\n\n // Process each size\n sizeArray.forEach((size) => {\n if (typeof size === \"number\") {\n baseSize = `${size}px`;\n } else {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n mediaQueries[`@media (min-width: ${BREAKPOINT_MAP[breakpoint]})`] =\n `${value}px`;\n }\n });\n\n // Create the style object with the correct structure\n return {\n width: baseSize || \"24px\",\n height: baseSize || \"24px\",\n ...Object.entries(mediaQueries).reduce(\n (acc, [query, size]) => ({\n ...acc,\n [query]: {\n width: size,\n height: size\n }\n }),\n {}\n )\n };\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const sizeStyles = processSizes(size);\n\n return (\n <div\n className={cn(\"flex justify-center items-center\", className)}\n style={{\n ...sizeStyles,\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import React from \"react\";\nimport {\n Colors,\n TextColorVariant,\n PrimaryShades,\n SecondaryShades,\n TertiaryShades,\n Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n ? TextColorVariant\n : T extends \"primary\"\n ? keyof PrimaryShades\n : T extends \"secondary\"\n ? keyof SecondaryShades\n : T extends \"tertiary\"\n ? keyof TertiaryShades\n : never;\n\ntype ColorKey = {\n [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: ColorKey | \"inherit\";\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"text-primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import React from \"react\";\nimport { Text, TextProps } from \"./Text\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type LinkProps = {\n href: string;\n children: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n} & Pick<TextProps, \"variant\" | \"color\"> &\n React.AnchorHTMLAttributes<HTMLAnchorElement>;\n\nexport const Link = ({\n children,\n color = \"text-primary\",\n variant = \"body-default-semibold\",\n href,\n className,\n ...props\n}: LinkProps) => (\n <Text variant={variant} color={color}>\n <a\n href={href}\n className={cn(\n \"hover:opacity-80 transition-all active:scale-95 hover:underline\",\n focusRingStyles,\n className\n )}\n {...props}\n >\n {children}\n </a>\n </Text>\n);\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React from \"react\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\nimport { Link } from \"./Link\";\n\ntype BreadcrumbItem = {\n label: string;\n href?: string;\n};\n\nexport type BreadcrumbsProps = {\n items: BreadcrumbItem[];\n className?: string;\n SeparatorComponent?: React.ReactElement;\n onHomeClick: () => void;\n};\n\nconst DefaultSeparator = () => (\n <Text variant={[\"sm:body-lg\", \"body-xs\"]} color=\"text-primary\">\n /\n </Text>\n);\n\nexport const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(\n (\n { items, className, SeparatorComponent = DefaultSeparator, onHomeClick },\n ref\n ) => {\n const renderSeparator = () =>\n typeof SeparatorComponent === \"function\" ? (\n <SeparatorComponent />\n ) : (\n React.cloneElement(SeparatorComponent)\n );\n\n return (\n <nav\n ref={ref}\n aria-label=\"Breadcrumb\"\n className={cn(\n \"sm:relative sticky top-0 sm:border-none border-secondary-50 border-b-[1px] pb-2\",\n className\n )}\n >\n <ol className=\"flex flex-wrap items-center gap-2\">\n <Icon\n onClick={onHomeClick}\n name=\"home\"\n size={[\"sm:20\", 16]}\n color=\"secondary\"\n className=\"pb-0.5\"\n />\n {renderSeparator()}\n {items.map((item, index) => {\n const isLastItem = index === items.length - 1;\n\n return isLastItem || !item.href ? (\n <Text\n variant={\n isLastItem\n ? [\"body-xs-medium\", \"md:body-default-semibold\"]\n : [\"body-xs\", \"md:body-default\"]\n }\n color={isLastItem ? \"text-primary\" : \"text-secondary\"}\n aria-current={isLastItem ? \"page\" : undefined}\n key={item.label}\n >\n {item.label}\n </Text>\n ) : (\n <>\n <Link href={item.href} key={item.label}>\n {item.label}\n </Link>\n {renderSeparator()}\n </>\n );\n })}\n </ol>\n </nav>\n );\n }\n);\n\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import i from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {IconMap}from'@deckai/icons';function c(...e){return twMerge(clsx(e))}var f={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB"},C={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},R=e=>{if(!e)return {width:"24px",height:"24px"};let r=Array.isArray(e)?e:[e],t={},s;return r.forEach(o=>{if(typeof o=="number")s=`${o}px`;else {let[a,n]=o.split(":"),p=parseInt(n,10);t[`@media (min-width: ${C[a]})`]=`${p}px`;}}),{width:s||"24px",height:s||"24px",...Object.entries(t).reduce((o,[a,n])=>({...o,[a]:{width:n,height:n}}),{})}},T=i.forwardRef(({name:e,size:r=24,color:t="primary",title:s,className:o,style:a={},...n},p)=>{let l=IconMap[e],y=R(r);return i.createElement("div",{className:c("flex justify-center items-center",o),style:{...y,"--icon-stroke":f[t],...a}},i.createElement(l,{ref:p,"aria-hidden":!s,"aria-label":s,stroke:e.includes("filled")?void 0:f[t],...n}))});T.displayName="Icon";var $={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},k=e=>{let[r,t]=e.split("-");return r==="heading"?$[t]||"p":r==="label"?"label":"p"},A={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},S=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[s,o]=t.split(":");return `${s}:text-${o}`}return `text-${t}`}).join(" "):"text-body-default",m=i.forwardRef(({variant:e="body-default",color:r="text-primary",as:t,className:s,children:o,weight:a,...n},p)=>{let l=S(e),y=r&&r==="inherit"?"inherit":r?`text-${r}`:"",x=i.useMemo(()=>{let H=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return k(H)},[e]);return i.createElement(t||x,{ref:p,className:`font-sans antialiased ${l} ${y} ${a?`!${A[a]}`:""} ${s??""}`,...n},o)});m.displayName="Text";var h="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var b=({children:e,color:r="text-primary",variant:t="body-default-semibold",href:s,className:o,...a})=>i.createElement(m,{variant:t,color:r},i.createElement("a",{href:s,className:c("hover:opacity-80 transition-all active:scale-95",h,o),...a},e));var
|
|
1
|
+
import i from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {IconMap}from'@deckai/icons';function c(...e){return twMerge(clsx(e))}var f={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB"},C={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},R=e=>{if(!e)return {width:"24px",height:"24px"};let r=Array.isArray(e)?e:[e],t={},s;return r.forEach(o=>{if(typeof o=="number")s=`${o}px`;else {let[a,n]=o.split(":"),p=parseInt(n,10);t[`@media (min-width: ${C[a]})`]=`${p}px`;}}),{width:s||"24px",height:s||"24px",...Object.entries(t).reduce((o,[a,n])=>({...o,[a]:{width:n,height:n}}),{})}},T=i.forwardRef(({name:e,size:r=24,color:t="primary",title:s,className:o,style:a={},...n},p)=>{let l=IconMap[e],y=R(r);return i.createElement("div",{className:c("flex justify-center items-center",o),style:{...y,"--icon-stroke":f[t],...a}},i.createElement(l,{ref:p,"aria-hidden":!s,"aria-label":s,stroke:e.includes("filled")?void 0:f[t],...n}))});T.displayName="Icon";var $={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},k=e=>{let[r,t]=e.split("-");return r==="heading"?$[t]||"p":r==="label"?"label":"p"},A={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},S=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[s,o]=t.split(":");return `${s}:text-${o}`}return `text-${t}`}).join(" "):"text-body-default",m=i.forwardRef(({variant:e="body-default",color:r="text-primary",as:t,className:s,children:o,weight:a,...n},p)=>{let l=S(e),y=r&&r==="inherit"?"inherit":r?`text-${r}`:"",x=i.useMemo(()=>{let H=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return k(H)},[e]);return i.createElement(t||x,{ref:p,className:`font-sans antialiased ${l} ${y} ${a?`!${A[a]}`:""} ${s??""}`,...n},o)});m.displayName="Text";var h="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var b=({children:e,color:r="text-primary",variant:t="body-default-semibold",href:s,className:o,...a})=>i.createElement(m,{variant:t,color:r},i.createElement("a",{href:s,className:c("hover:opacity-80 transition-all active:scale-95 hover:underline",h,o),...a},e));var v=()=>i.createElement(m,{variant:["sm:body-lg","body-xs"],color:"text-primary"},"/"),P=i.forwardRef(({items:e,className:r,SeparatorComponent:t=v,onHomeClick:s},o)=>{let a=()=>typeof t=="function"?i.createElement(t,null):i.cloneElement(t);return i.createElement("nav",{ref:o,"aria-label":"Breadcrumb",className:c("sm:relative sticky top-0 sm:border-none border-secondary-50 border-b-[1px] pb-2",r)},i.createElement("ol",{className:"flex flex-wrap items-center gap-2"},i.createElement(T,{onClick:s,name:"home",size:["sm:20",16],color:"secondary",className:"pb-0.5"}),a(),e.map((n,p)=>{let l=p===e.length-1;return l||!n.href?i.createElement(m,{variant:l?["body-xs-medium","md:body-default-semibold"]:["body-xs","md:body-default"],color:l?"text-primary":"text-secondary","aria-current":l?"page":void 0,key:n.label},n.label):i.createElement(i.Fragment,null,i.createElement(b,{href:n.href,key:n.label},n.label),a())})))});P.displayName="Breadcrumbs";if (exports.default) module.exports = exports.default;export{P as Breadcrumbs};//# sourceMappingURL=Breadcrumbs.js.map
|
|
2
2
|
//# sourceMappingURL=Breadcrumbs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../src/components/Link.tsx","../../src/utils/tailwind.ts","../../src/components/Breadcrumbs.tsx"],"names":["cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","children","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","focusRingStyles","Link","href","DefaultSeparator","Breadcrumbs","items","SeparatorComponent","onHomeClick","renderSeparator","item","index","isLastItem"],"mappings":"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","file":"Breadcrumbs.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: ResponsiveSize | ResponsiveSize[];\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\"\n};\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n \"2xl\": \"1536px\"\n};\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n const mediaQueries: Record<string, string> = {};\n let baseSize: string | undefined;\n\n // Process each size\n sizeArray.forEach((size) => {\n if (typeof size === \"number\") {\n baseSize = `${size}px`;\n } else {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n mediaQueries[`@media (min-width: ${BREAKPOINT_MAP[breakpoint]})`] =\n `${value}px`;\n }\n });\n\n // Create the style object with the correct structure\n return {\n width: baseSize || \"24px\",\n height: baseSize || \"24px\",\n ...Object.entries(mediaQueries).reduce(\n (acc, [query, size]) => ({\n ...acc,\n [query]: {\n width: size,\n height: size\n }\n }),\n {}\n )\n };\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const sizeStyles = processSizes(size);\n\n return (\n <div\n className={cn(\"flex justify-center items-center\", className)}\n style={{\n ...sizeStyles,\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import React from \"react\";\nimport {\n Colors,\n TextColorVariant,\n PrimaryShades,\n SecondaryShades,\n TertiaryShades,\n Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n ? TextColorVariant\n : T extends \"primary\"\n ? keyof PrimaryShades\n : T extends \"secondary\"\n ? keyof SecondaryShades\n : T extends \"tertiary\"\n ? keyof TertiaryShades\n : never;\n\ntype ColorKey = {\n [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: ColorKey | \"inherit\";\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"text-primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import React from \"react\";\nimport { Text, TextProps } from \"./Text\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type LinkProps = {\n href: string;\n children: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n} & Pick<TextProps, \"variant\" | \"color\"> &\n React.AnchorHTMLAttributes<HTMLAnchorElement>;\n\nexport const Link = ({\n children,\n color = \"text-primary\",\n variant = \"body-default-semibold\",\n href,\n className,\n ...props\n}: LinkProps) => (\n <Text variant={variant} color={color}>\n <a\n href={href}\n className={cn(\n \"hover:opacity-80 transition-all active:scale-95\",\n focusRingStyles,\n className\n )}\n {...props}\n >\n {children}\n </a>\n </Text>\n);\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React from \"react\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\nimport { Link } from \"./Link\";\n\ntype BreadcrumbItem = {\n label: string;\n href?: string;\n};\n\nexport type BreadcrumbsProps = {\n items: BreadcrumbItem[];\n className?: string;\n SeparatorComponent?: React.ReactElement;\n onHomeClick: () => void;\n};\n\nconst DefaultSeparator = () => (\n <Text variant={[\"sm:body-lg\", \"body-xs\"]} color=\"text-primary\">\n /\n </Text>\n);\n\nexport const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(\n (\n { items, className, SeparatorComponent = DefaultSeparator, onHomeClick },\n ref\n ) => {\n const renderSeparator = () =>\n typeof SeparatorComponent === \"function\" ? (\n <SeparatorComponent />\n ) : (\n React.cloneElement(SeparatorComponent)\n );\n\n return (\n <nav\n ref={ref}\n aria-label=\"Breadcrumb\"\n className={cn(\n \"sm:relative sticky top-0 sm:border-none border-secondary-50 border-b-[1px] pb-2\",\n className\n )}\n >\n <ol className=\"flex flex-wrap items-center gap-2\">\n <Icon\n onClick={onHomeClick}\n name=\"home\"\n size={[\"sm:20\", 16]}\n color=\"secondary\"\n className=\"pb-0.5\"\n />\n {renderSeparator()}\n {items.map((item, index) => {\n const isLastItem = index === items.length - 1;\n\n return isLastItem || !item.href ? (\n <Text\n variant={\n isLastItem\n ? [\"body-xs-medium\", \"md:body-default-semibold\"]\n : [\"body-xs\", \"md:body-default\"]\n }\n color={isLastItem ? \"text-primary\" : \"text-secondary\"}\n aria-current={isLastItem ? \"page\" : undefined}\n key={item.label}\n >\n {item.label}\n </Text>\n ) : (\n <>\n <Link href={item.href} key={item.label}>\n {item.label}\n </Link>\n {renderSeparator()}\n </>\n );\n })}\n </ol>\n </nav>\n );\n }\n);\n\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../src/components/Link.tsx","../../src/utils/tailwind.ts","../../src/components/Breadcrumbs.tsx"],"names":["cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","children","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","focusRingStyles","Link","href","DefaultSeparator","Breadcrumbs","items","SeparatorComponent","onHomeClick","renderSeparator","item","index","isLastItem"],"mappings":"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","file":"Breadcrumbs.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: ResponsiveSize | ResponsiveSize[];\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\"\n};\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n \"2xl\": \"1536px\"\n};\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n const mediaQueries: Record<string, string> = {};\n let baseSize: string | undefined;\n\n // Process each size\n sizeArray.forEach((size) => {\n if (typeof size === \"number\") {\n baseSize = `${size}px`;\n } else {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n mediaQueries[`@media (min-width: ${BREAKPOINT_MAP[breakpoint]})`] =\n `${value}px`;\n }\n });\n\n // Create the style object with the correct structure\n return {\n width: baseSize || \"24px\",\n height: baseSize || \"24px\",\n ...Object.entries(mediaQueries).reduce(\n (acc, [query, size]) => ({\n ...acc,\n [query]: {\n width: size,\n height: size\n }\n }),\n {}\n )\n };\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const sizeStyles = processSizes(size);\n\n return (\n <div\n className={cn(\"flex justify-center items-center\", className)}\n style={{\n ...sizeStyles,\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import React from \"react\";\nimport {\n Colors,\n TextColorVariant,\n PrimaryShades,\n SecondaryShades,\n TertiaryShades,\n Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n ? TextColorVariant\n : T extends \"primary\"\n ? keyof PrimaryShades\n : T extends \"secondary\"\n ? keyof SecondaryShades\n : T extends \"tertiary\"\n ? keyof TertiaryShades\n : never;\n\ntype ColorKey = {\n [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: ColorKey | \"inherit\";\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"text-primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import React from \"react\";\nimport { Text, TextProps } from \"./Text\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type LinkProps = {\n href: string;\n children: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n} & Pick<TextProps, \"variant\" | \"color\"> &\n React.AnchorHTMLAttributes<HTMLAnchorElement>;\n\nexport const Link = ({\n children,\n color = \"text-primary\",\n variant = \"body-default-semibold\",\n href,\n className,\n ...props\n}: LinkProps) => (\n <Text variant={variant} color={color}>\n <a\n href={href}\n className={cn(\n \"hover:opacity-80 transition-all active:scale-95 hover:underline\",\n focusRingStyles,\n className\n )}\n {...props}\n >\n {children}\n </a>\n </Text>\n);\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React from \"react\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\nimport { Link } from \"./Link\";\n\ntype BreadcrumbItem = {\n label: string;\n href?: string;\n};\n\nexport type BreadcrumbsProps = {\n items: BreadcrumbItem[];\n className?: string;\n SeparatorComponent?: React.ReactElement;\n onHomeClick: () => void;\n};\n\nconst DefaultSeparator = () => (\n <Text variant={[\"sm:body-lg\", \"body-xs\"]} color=\"text-primary\">\n /\n </Text>\n);\n\nexport const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(\n (\n { items, className, SeparatorComponent = DefaultSeparator, onHomeClick },\n ref\n ) => {\n const renderSeparator = () =>\n typeof SeparatorComponent === \"function\" ? (\n <SeparatorComponent />\n ) : (\n React.cloneElement(SeparatorComponent)\n );\n\n return (\n <nav\n ref={ref}\n aria-label=\"Breadcrumb\"\n className={cn(\n \"sm:relative sticky top-0 sm:border-none border-secondary-50 border-b-[1px] pb-2\",\n className\n )}\n >\n <ol className=\"flex flex-wrap items-center gap-2\">\n <Icon\n onClick={onHomeClick}\n name=\"home\"\n size={[\"sm:20\", 16]}\n color=\"secondary\"\n className=\"pb-0.5\"\n />\n {renderSeparator()}\n {items.map((item, index) => {\n const isLastItem = index === items.length - 1;\n\n return isLastItem || !item.href ? (\n <Text\n variant={\n isLastItem\n ? [\"body-xs-medium\", \"md:body-default-semibold\"]\n : [\"body-xs\", \"md:body-default\"]\n }\n color={isLastItem ? \"text-primary\" : \"text-secondary\"}\n aria-current={isLastItem ? \"page\" : undefined}\n key={item.label}\n >\n {item.label}\n </Text>\n ) : (\n <>\n <Link href={item.href} key={item.label}>\n {item.label}\n </Link>\n {renderSeparator()}\n </>\n );\n })}\n </ol>\n </nav>\n );\n }\n);\n\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var i=require('react'),
|
|
1
|
+
'use strict';var i=require('react'),p=require('@radix-ui/react-popover'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),icons=require('@deckai/icons');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var i__namespace=/*#__PURE__*/_interopNamespace(i);var p__namespace=/*#__PURE__*/_interopNamespace(p);function m(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var P="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",$="ring-2 ring-ring ring-offset-2";var I={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB"},M={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},T=e=>{if(!e)return {width:"24px",height:"24px"};let r=Array.isArray(e)?e:[e],o={},t;return r.forEach(s=>{if(typeof s=="number")t=`${s}px`;else {let[a,n]=s.split(":"),c=parseInt(n,10);o[`@media (min-width: ${M[a]})`]=`${c}px`;}}),{width:t||"24px",height:t||"24px",...Object.entries(o).reduce((s,[a,n])=>({...s,[a]:{width:n,height:n}}),{})}},b=i__namespace.default.forwardRef(({name:e,size:r=24,color:o="primary",title:t,className:s,style:a={},...n},c)=>{let f=icons.IconMap[e],u=T(r);return i__namespace.default.createElement("div",{className:m("flex justify-center items-center",s),style:{...u,"--icon-stroke":I[o],...a}},i__namespace.default.createElement(f,{ref:c,"aria-hidden":!t,"aria-label":t,stroke:e.includes("filled")?void 0:I[o],...n}))});b.displayName="Icon";var S=({className:e,end:r,iconName:o,color:t,size:s,title:a,label:n,labelClassName:c,id:f,...u})=>i__namespace.createElement("div",{className:"space-y-2"},n&&i__namespace.createElement("label",{htmlFor:f,className:m("block text-sm font-medium text-text-primary",c)},n),i__namespace.createElement("div",{className:"relative"},i__namespace.createElement("input",{id:f,className:m(`font-sans lg:text-body-default text-xs flex w-full rounded-lg border border-secondary-50 bg-background-0 px-3 md:py-3 py-2 text-secondary ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-secondary text-text-primary ${P} disabled:cursor-not-allowed disabled:opacity-50 md:text-md`,r&&"pr-10",e),...u}),r&&i__namespace.createElement("div",{className:"absolute inset-y-0 right-0 flex items-center pr-3"},o?i__namespace.createElement(b,{name:o,color:t,size:s,title:a}):r)));var N=({value:e,label:r,onChange:o,selected:t})=>i__namespace.default.createElement("button",{type:"button",className:m("relative w-full h-full text-left px-2 py-1.5 text-sm cursor-pointer hover:bg-gray-100 rounded",t&&"bg-gray-100"),onClick:()=>{o?.(e);}},r);var le=({options:e,placeholder:r="Select an item...",value:o,onChange:t,end:s,className:a,label:n,labelClassName:c,id:f})=>{let[u,v]=i.useState(!1),[g,y]=i.useState(o),h=i.useMemo(()=>e.find(l=>l.value===g),[g,e]),C=e.filter(l=>g?l.label.toLowerCase().includes(g.toLowerCase()):e),k=i.useCallback(l=>{t(l),v(!1),y(h?.label);},[t,h?.label]);return i__namespace.default.createElement(p__namespace.Root,{open:u,onOpenChange:v},i__namespace.default.createElement("div",{className:`relative w-full font-sans text-text-secondary ${a}`},i__namespace.default.createElement(p__namespace.Trigger,{asChild:!0},i__namespace.default.createElement("div",{className:"flex"},i__namespace.default.createElement("div",{className:"relative flex-1"},i__namespace.default.createElement(S,{id:f,label:n,labelClassName:c,placeholder:r,value:g,onChange:l=>y(l.target.value),end:s,className:`flex-1 ${u&&$}`})))),i__namespace.default.createElement(p__namespace.Portal,null,i__namespace.default.createElement(p__namespace.Content,{className:"w-[--radix-popover-trigger-width] p-1 bg-white rounded-md shadow-lg border mt-1 z-20",sideOffset:5},i__namespace.default.createElement("div",{className:"max-h-60 overflow-auto flex flex-col items-start"},C.length>0?C.map(({label:l,value:w},E)=>i__namespace.default.createElement(N,{onChange:k,value:w,key:E,label:l})):i__namespace.default.createElement("div",{className:"px-2 py-1.5 text-sm text-gray-500"},"No results found"))))))};if (exports.default) module.exports = exports.default;exports.Combobox=le;//# sourceMappingURL=Combobox.cjs.map
|
|
2
2
|
//# sourceMappingURL=Combobox.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/tailwind.ts","../../src/components/Icon.tsx","../../src/components/Input.tsx","../../src/components/Option.tsx","../../src/components/Combobox.tsx"],"names":["cn","inputs","twMerge","clsx","focusRingStyles","focusRingStylesCoerced","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","sizeStyles","Input","end","iconName","m","Option","label","onChange","selected","Combobox","options","placeholder","open","setOpen","useState","inputValue","setInputValue","selectedOption","useMemo","option","filteredItems","handleOptionChange","useCallback","l","e","optionValue","index"],"mappings":"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","file":"Combobox.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-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: ResponsiveSize | ResponsiveSize[];\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\"\n};\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n \"2xl\": \"1536px\"\n};\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n const mediaQueries: Record<string, string> = {};\n let baseSize: string | undefined;\n\n // Process each size\n sizeArray.forEach((size) => {\n if (typeof size === \"number\") {\n baseSize = `${size}px`;\n } else {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n mediaQueries[`@media (min-width: ${BREAKPOINT_MAP[breakpoint]})`] =\n `${value}px`;\n }\n });\n\n // Create the style object with the correct structure\n return {\n width: baseSize || \"24px\",\n height: baseSize || \"24px\",\n ...Object.entries(mediaQueries).reduce(\n (acc, [query, size]) => ({\n ...acc,\n [query]: {\n width: size,\n height: size\n }\n }),\n {}\n )\n };\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const sizeStyles = processSizes(size);\n\n return (\n <div\n className={cn(\"flex justify-center items-center\", className)}\n style={{\n ...sizeStyles,\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import * as React from \"react\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { IconName } from \"@deckai/icons\";\nimport { Icon, IconProps } from \"./Icon\";\n\nexport type InputProps = {\n className?: string;\n end?: React.ReactNode;\n /** renders an icon in the end slot */\n iconName?: IconName;\n} & React.InputHTMLAttributes<HTMLInputElement> &\n Pick<IconProps, \"color\" | \"size\" | \"title\">;\n\nexport const Input = ({\n className,\n end,\n iconName,\n color,\n size,\n title,\n ...props\n}: InputProps) => (\n <div className=\"relative\">\n <input\n className={cn(\n `font-sans lg:text-body-default text-xs flex w-full rounded-lg border border-secondary-50 bg-background-0 px-3 md:py-3 py-2 text-secondary ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-secondary text-text-primary ${focusRingStyles} disabled:cursor-not-allowed disabled:opacity-50 md:text-md`,\n end && \"pr-10\",\n className\n )}\n {...props}\n />\n {end && (\n <div className=\"absolute inset-y-0 right-0 flex items-center pr-3\">\n {iconName ? (\n <Icon name={iconName} color={color} size={size} title={title} />\n ) : (\n end\n )}\n </div>\n )}\n </div>\n);\n","import React from \"react\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\n\nexport type OptionProps = {\n label: string;\n value: string;\n onChange?: (value: string) => void;\n selected?: boolean;\n};\n\nexport const Option = ({ value, label, onChange, selected }: OptionProps) => (\n <button\n type=\"button\"\n className={cn(\n \"relative w-full h-full text-left px-2 py-1.5 text-sm cursor-pointer hover:bg-gray-100 rounded\",\n selected && \"bg-gray-100\"\n )}\n onClick={() => {\n onChange?.(value);\n }}\n >\n {label}\n </button>\n);\n","import React, { useCallback, useMemo, useState } from \"react\";\nimport * as Popover from \"@radix-ui/react-popover\";\nimport { Input } from \"./Input\";\nimport { OptionProps, Option } from \"./Option\";\nimport { focusRingStylesCoerced } from \"../utils/tailwind\";\n\nexport type ComboboxProps = {\n options: OptionProps[];\n placeholder?: string;\n value?: string;\n onChange: (value: string) => void;\n end?: React.ReactNode;\n className?: string;\n};\n\nexport const Combobox = ({\n options,\n placeholder = \"Select an item...\",\n value,\n onChange,\n end,\n className\n}: ComboboxProps) => {\n const [open, setOpen] = useState(false);\n const [inputValue, setInputValue] = useState<string | undefined>(value);\n\n const selectedOption: OptionProps | undefined = useMemo(\n () => options.find((option) => option.value === inputValue),\n [inputValue, options]\n );\n\n const filteredItems = options.filter((option) =>\n inputValue\n ? option.label.toLowerCase().includes(inputValue.toLowerCase())\n : options\n );\n\n const handleOptionChange = useCallback(\n (option: string) => {\n onChange(option);\n setOpen(false);\n setInputValue(selectedOption?.label);\n },\n [onChange, selectedOption?.label]\n );\n\n return (\n <Popover.Root open={open} onOpenChange={setOpen}>\n <div\n className={`relative w-full font-sans text-text-secondary ${className}`}\n >\n <Popover.Trigger asChild>\n <div className=\"flex\">\n <div className=\"relative flex-1\">\n <Input\n placeholder={placeholder}\n value={inputValue}\n onChange={(e) => setInputValue(e.target.value)}\n end={end}\n className={`flex-1 ${open && focusRingStylesCoerced}`}\n />\n </div>\n </div>\n </Popover.Trigger>\n\n <Popover.Portal>\n <Popover.Content\n className=\"w-[--radix-popover-trigger-width] p-1 bg-white rounded-md shadow-lg border mt-1 z-20\"\n sideOffset={5}\n >\n <div className=\"max-h-60 overflow-auto flex flex-col items-start\">\n {filteredItems.length > 0 ? (\n filteredItems.map(({ label, value: optionValue }, index) => (\n <Option\n onChange={handleOptionChange}\n value={optionValue}\n key={index}\n label={label}\n />\n ))\n ) : (\n <div className=\"px-2 py-1.5 text-sm text-gray-500\">\n No results found\n </div>\n )}\n </div>\n </Popover.Content>\n </Popover.Portal>\n </div>\n </Popover.Root>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/tailwind.ts","../../src/components/Icon.tsx","../../src/components/Input.tsx","../../src/components/Option.tsx","../../src/components/Combobox.tsx"],"names":["cn","inputs","twMerge","clsx","focusRingStyles","focusRingStylesCoerced","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","sizeStyles","Input","end","iconName","label","labelClassName","id","d","Option","onChange","selected","Combobox","options","placeholder","open","setOpen","useState","inputValue","setInputValue","selectedOption","useMemo","option","filteredItems","handleOptionChange","useCallback","p","e","optionLabel","optionValue","index"],"mappings":"8jBAGO,SAASA,CAAMC,CAAAA,GAAAA,CAAAA,CAAsB,CAC1C,OAAOC,sBAAQC,SAAKF,CAAAA,CAAM,CAAC,CAC7B,CC8DO,IAAMG,CAAAA,CACX,qGAEWC,CAAAA,CAAAA,CAAyB,gCCtEtC,CAmBA,IAAMC,CAAwC,CAAA,CAC5C,OAAS,CAAA,SAAA,CACT,UAAW,SACX,CAAA,KAAA,CAAO,SACP,CAAA,WAAA,CAAa,SACf,CAAA,CAEMC,CAA6C,CAAA,CACjD,GAAI,OACJ,CAAA,EAAA,CAAI,OACJ,CAAA,EAAA,CAAI,SACJ,EAAI,CAAA,QAAA,CACJ,KAAO,CAAA,QACT,EAEMC,CACJC,CAAAA,CAAAA,EACwB,CACxB,GAAI,CAACA,CAAAA,CAAO,OAAO,CAAE,MAAO,MAAQ,CAAA,MAAA,CAAQ,MAAO,CAAA,CAEnD,IAAMC,CAAAA,CAAY,KAAM,CAAA,OAAA,CAAQD,CAAK,CAAIA,CAAAA,CAAAA,CAAQ,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,CAAYC,CAAAA,CAAQ,EAAIF,CAAK,CAAA,KAAA,CAAM,GAAG,CAAA,CACvCG,CAAQ,CAAA,QAAA,CAASD,CAAU,CAAA,EAAE,EACnCJ,CAAa,CAAA,CAAA,mBAAA,EAAsBJ,CAAeO,CAAAA,CAAU,CAAC,CAAA,CAAA,CAAG,CAC9D,CAAA,CAAA,EAAGE,CAAK,CACZ,EAAA,EAAA,CACF,CAAC,CAAA,CAGM,CACL,KAAOJ,CAAAA,CAAAA,EAAY,MACnB,CAAA,MAAA,CAAQA,GAAY,MACpB,CAAA,GAAG,MAAO,CAAA,OAAA,CAAQD,CAAY,CAAA,CAAE,MAC9B,CAAA,CAACM,EAAK,CAACC,CAAAA,CAAOL,CAAI,CAAA,IAAO,CACvB,GAAGI,CACH,CAAA,CAACC,CAAK,EAAG,CACP,KAAOL,CAAAA,CAAAA,CACP,MAAQA,CAAAA,CACV,CACF,CAAA,CAAA,CACA,EACF,CACF,CACF,CAAA,CAEaM,EAAOC,oBAAM,CAAA,UAAA,CACxB,CACE,CACE,KAAAC,CACA,CAAA,IAAA,CAAAR,CAAO,CAAA,EAAA,CACP,KAAAS,CAAAA,CAAAA,CAAQ,SACR,CAAA,KAAA,CAAAC,EACA,SAAAC,CAAAA,CAAAA,CACA,KAAAC,CAAAA,CAAAA,CAAQ,EAAC,CACT,GAAGC,CACL,EACAC,CACG,GAAA,CACH,IAAMC,CAAAA,CAAgBC,aAAQR,CAAAA,CAAI,CAC5BS,CAAAA,CAAAA,CAAatB,EAAaK,CAAI,CAAA,CAEpC,OACEO,oBAAAA,CAAA,cAAC,KACC,CAAA,CAAA,SAAA,CAAWpB,CAAG,CAAA,kCAAA,CAAoCwB,CAAS,CAC3D,CAAA,KAAA,CAAO,CACL,GAAGM,CACF,CAAA,eAAA,CAA4BxB,CAAUgB,CAAAA,CAAK,EAC5C,GAAGG,CACL,CAEAL,CAAAA,CAAAA,oBAAAA,CAAA,aAACQ,CAAAA,CAAAA,CAAA,CACC,GAAA,CAAKD,EACL,aAAa,CAAA,CAACJ,CACd,CAAA,YAAA,CAAYA,CACZ,CAAA,MAAA,CAAQF,CAAK,CAAA,QAAA,CAAS,QAAQ,CAAI,CAAA,KAAA,CAAA,CAAYf,CAAUgB,CAAAA,CAAK,EAC5D,GAAGI,CAAAA,CACN,CACF,CAEJ,CACF,CAEAP,CAAAA,CAAAA,CAAK,WAAc,CAAA,MAAA,CC3FZ,IAAMY,CAAAA,CAAQ,CAAC,CACpB,UAAAP,CACA,CAAA,GAAA,CAAAQ,CACA,CAAA,QAAA,CAAAC,CACA,CAAA,KAAA,CAAAX,CACA,CAAA,IAAA,CAAAT,EACA,KAAAU,CAAAA,CAAAA,CACA,KAAAW,CAAAA,CAAAA,CACA,cAAAC,CAAAA,CAAAA,CACA,EAAAC,CAAAA,CAAAA,CACA,GAAGV,CACL,CAAA,GACEW,YAAC,CAAA,aAAA,CAAA,KAAA,CAAA,CAAI,UAAU,WACZH,CAAAA,CAAAA,CAAAA,EACCG,YAAC,CAAA,aAAA,CAAA,OAAA,CAAA,CACC,QAASD,CACT,CAAA,SAAA,CAAWpC,CACT,CAAA,6CAAA,CACAmC,CACF,CAAA,CAAA,CAECD,CACH,CAAA,CAEFG,2BAAC,KAAI,CAAA,CAAA,SAAA,CAAU,UACb,CAAA,CAAAA,YAAA,CAAA,aAAA,CAAC,OACC,CAAA,CAAA,EAAA,CAAID,CACJ,CAAA,SAAA,CAAWpC,EACT,CAAsSI,mSAAAA,EAAAA,CAAe,CACrT4B,2DAAAA,CAAAA,CAAAA,CAAAA,EAAO,OACPR,CAAAA,CACF,CACC,CAAA,GAAGE,EACN,CACCM,CAAAA,CAAAA,EACCK,YAAC,CAAA,aAAA,CAAA,KAAA,CAAA,CAAI,UAAU,mDACZJ,CAAAA,CAAAA,CAAAA,CACCI,YAAClB,CAAAA,aAAAA,CAAAA,CAAAA,CAAA,CAAK,IAAMc,CAAAA,CAAAA,CAAU,KAAOX,CAAAA,CAAAA,CAAO,IAAMT,CAAAA,CAAAA,CAAM,KAAOU,CAAAA,CAAAA,CAAO,EAE9DS,CAEJ,CAEJ,CACF,CAAA,CCnDK,IAAMM,EAAS,CAAC,CAAE,KAAAtB,CAAAA,CAAAA,CAAO,KAAAkB,CAAAA,CAAAA,CAAO,QAAAK,CAAAA,CAAAA,CAAU,SAAAC,CAAS,CAAA,GACxDpB,oBAAA,CAAA,aAAA,CAAC,UACC,IAAK,CAAA,QAAA,CACL,SAAWpB,CAAAA,CAAAA,CACT,gGACAwC,CAAY,EAAA,aACd,CACA,CAAA,OAAA,CAAS,IAAM,CACbD,CAAWvB,GAAAA,CAAK,EAClB,CAECkB,CAAAA,CAAAA,CACH,CCFK,CAAA,IAAMO,EAAW,CAAA,CAAC,CACvB,OAAA,CAAAC,EACA,WAAAC,CAAAA,CAAAA,CAAc,mBACd,CAAA,KAAA,CAAA3B,CACA,CAAA,QAAA,CAAAuB,CACA,CAAA,GAAA,CAAAP,EACA,SAAAR,CAAAA,CAAAA,CACA,KAAAU,CAAAA,CAAAA,CACA,eAAAC,CACA,CAAA,EAAA,CAAAC,CACF,CAAA,GAAqB,CACnB,GAAM,CAACQ,CAAMC,CAAAA,CAAO,CAAIC,CAAAA,UAAAA,CAAS,CAAK,CAAA,CAAA,CAChC,CAACC,CAAYC,CAAAA,CAAa,CAAIF,CAAAA,UAAAA,CAA6B9B,CAAK,CAAA,CAEhEiC,CAA0CC,CAAAA,SAAAA,CAC9C,IAAMR,CAAQ,CAAA,IAAA,CAAMS,CAAWA,EAAAA,CAAAA,CAAO,KAAUJ,GAAAA,CAAU,CAC1D,CAAA,CAACA,EAAYL,CAAO,CACtB,CAEMU,CAAAA,CAAAA,CAAgBV,EAAQ,MAAQS,CAAAA,CAAAA,EACpCJ,CACII,CAAAA,CAAAA,CAAO,MAAM,WAAY,EAAA,CAAE,QAASJ,CAAAA,CAAAA,CAAW,WAAY,EAAC,CAC5DL,CAAAA,CACN,EAEMW,CAAqBC,CAAAA,aAAAA,CACxBH,CAAmB,EAAA,CAClBZ,CAASY,CAAAA,CAAM,CACfN,CAAAA,CAAAA,CAAQ,EAAK,CACbG,CAAAA,CAAAA,CAAcC,CAAgB,EAAA,KAAK,EACrC,CAAA,CACA,CAACV,CAAAA,CAAUU,GAAgB,KAAK,CAClC,CAEA,CAAA,OACE7B,qBAAA,aAAS,CAAAmC,YAAA,CAAA,IAAA,CAAR,CAAa,IAAA,CAAMX,EAAM,YAAcC,CAAAA,CAAAA,CAAAA,CACtCzB,oBAAA,CAAA,aAAA,CAAC,KACC,CAAA,CAAA,SAAA,CAAW,CAAiDI,8CAAAA,EAAAA,CAAS,IAErEJ,oBAAA,CAAA,aAAA,CAASmC,YAAR,CAAA,OAAA,CAAA,CAAgB,OAAO,CAAA,CAAA,CAAA,CAAA,CACtBnC,oBAAA,CAAA,aAAA,CAAC,OAAI,SAAU,CAAA,MAAA,CAAA,CACbA,oBAAA,CAAA,aAAA,CAAC,KAAI,CAAA,CAAA,SAAA,CAAU,iBACbA,CAAAA,CAAAA,oBAAAA,CAAA,cAACW,CAAA,CAAA,CACC,EAAIK,CAAAA,CAAAA,CACJ,MAAOF,CACP,CAAA,cAAA,CAAgBC,CAChB,CAAA,WAAA,CAAaQ,EACb,KAAOI,CAAAA,CAAAA,CACP,QAAWS,CAAAA,CAAAA,EAAMR,CAAcQ,CAAAA,CAAAA,CAAE,MAAO,CAAA,KAAK,EAC7C,GAAKxB,CAAAA,CAAAA,CACL,SAAW,CAAA,CAAA,OAAA,EAAUY,CAAQvC,EAAAA,CAAsB,CACrD,CAAA,CAAA,CACF,CACF,CACF,CAAA,CAEAe,oBAAA,CAAA,aAAA,CAASmC,YAAR,CAAA,MAAA,CAAA,IAAA,CACCnC,oBAAA,CAAA,aAAA,CAASmC,qBAAR,CACC,SAAA,CAAU,sFACV,CAAA,UAAA,CAAY,GAEZnC,oBAAA,CAAA,aAAA,CAAC,KAAI,CAAA,CAAA,SAAA,CAAU,oDACZgC,CAAc,CAAA,MAAA,CAAS,CACtBA,CAAAA,CAAAA,CAAc,GACZ,CAAA,CAAC,CAAE,KAAA,CAAOK,EAAa,KAAOC,CAAAA,CAAY,CAAGC,CAAAA,CAAAA,GAC3CvC,qBAAA,aAACkB,CAAAA,CAAAA,CAAA,CACC,QAAA,CAAUe,EACV,KAAOK,CAAAA,CAAAA,CACP,GAAKC,CAAAA,CAAAA,CACL,KAAOF,CAAAA,CAAAA,CACT,CAEJ,CAAA,CAEArC,qBAAA,aAAC,CAAA,KAAA,CAAA,CAAI,SAAU,CAAA,mCAAA,CAAA,CAAoC,kBAEnD,CAEJ,CACF,CACF,CACF,CACF,CAEJ","file":"Combobox.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-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: ResponsiveSize | ResponsiveSize[];\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\"\n};\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n \"2xl\": \"1536px\"\n};\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n const mediaQueries: Record<string, string> = {};\n let baseSize: string | undefined;\n\n // Process each size\n sizeArray.forEach((size) => {\n if (typeof size === \"number\") {\n baseSize = `${size}px`;\n } else {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n mediaQueries[`@media (min-width: ${BREAKPOINT_MAP[breakpoint]})`] =\n `${value}px`;\n }\n });\n\n // Create the style object with the correct structure\n return {\n width: baseSize || \"24px\",\n height: baseSize || \"24px\",\n ...Object.entries(mediaQueries).reduce(\n (acc, [query, size]) => ({\n ...acc,\n [query]: {\n width: size,\n height: size\n }\n }),\n {}\n )\n };\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const sizeStyles = processSizes(size);\n\n return (\n <div\n className={cn(\"flex justify-center items-center\", className)}\n style={{\n ...sizeStyles,\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import * as React from \"react\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { IconName } from \"@deckai/icons\";\nimport { Icon, IconProps } from \"./Icon\";\n\nexport type InputProps = {\n className?: string;\n end?: React.ReactNode;\n /** renders an icon in the end slot */\n iconName?: IconName;\n /** Label text for the input */\n label?: string;\n /** Additional classes for the label */\n labelClassName?: string;\n} & React.InputHTMLAttributes<HTMLInputElement> &\n Pick<IconProps, \"color\" | \"size\" | \"title\">;\n\nexport const Input = ({\n className,\n end,\n iconName,\n color,\n size,\n title,\n label,\n labelClassName,\n id,\n ...props\n}: InputProps) => (\n <div className=\"space-y-2\">\n {label && (\n <label\n htmlFor={id}\n className={cn(\n \"block text-sm font-medium text-text-primary\",\n labelClassName\n )}\n >\n {label}\n </label>\n )}\n <div className=\"relative\">\n <input\n id={id}\n className={cn(\n `font-sans lg:text-body-default text-xs flex w-full rounded-lg border border-secondary-50 bg-background-0 px-3 md:py-3 py-2 text-secondary ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-secondary text-text-primary ${focusRingStyles} disabled:cursor-not-allowed disabled:opacity-50 md:text-md`,\n end && \"pr-10\",\n className\n )}\n {...props}\n />\n {end && (\n <div className=\"absolute inset-y-0 right-0 flex items-center pr-3\">\n {iconName ? (\n <Icon name={iconName} color={color} size={size} title={title} />\n ) : (\n end\n )}\n </div>\n )}\n </div>\n </div>\n);\n","import React from \"react\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\n\nexport type OptionProps = {\n label: string;\n value: string;\n onChange?: (value: string) => void;\n selected?: boolean;\n};\n\nexport const Option = ({ value, label, onChange, selected }: OptionProps) => (\n <button\n type=\"button\"\n className={cn(\n \"relative w-full h-full text-left px-2 py-1.5 text-sm cursor-pointer hover:bg-gray-100 rounded\",\n selected && \"bg-gray-100\"\n )}\n onClick={() => {\n onChange?.(value);\n }}\n >\n {label}\n </button>\n);\n","import React, { useCallback, useMemo, useState } from \"react\";\nimport * as Popover from \"@radix-ui/react-popover\";\nimport { Input } from \"./Input\";\nimport { OptionProps, Option } from \"./Option\";\nimport { focusRingStylesCoerced } from \"../utils/tailwind\";\n\nexport type ComboboxProps = {\n options: OptionProps[];\n placeholder?: string;\n value?: string;\n onChange: (value: string) => void;\n end?: React.ReactNode;\n className?: string;\n /** Label text for the combobox */\n label?: string;\n /** Additional classes for the label */\n labelClassName?: string;\n /** ID for accessibility */\n id?: string;\n};\n\nexport const Combobox = ({\n options,\n placeholder = \"Select an item...\",\n value,\n onChange,\n end,\n className,\n label,\n labelClassName,\n id\n}: ComboboxProps) => {\n const [open, setOpen] = useState(false);\n const [inputValue, setInputValue] = useState<string | undefined>(value);\n\n const selectedOption: OptionProps | undefined = useMemo(\n () => options.find((option) => option.value === inputValue),\n [inputValue, options]\n );\n\n const filteredItems = options.filter((option) =>\n inputValue\n ? option.label.toLowerCase().includes(inputValue.toLowerCase())\n : options\n );\n\n const handleOptionChange = useCallback(\n (option: string) => {\n onChange(option);\n setOpen(false);\n setInputValue(selectedOption?.label);\n },\n [onChange, selectedOption?.label]\n );\n\n return (\n <Popover.Root open={open} onOpenChange={setOpen}>\n <div\n className={`relative w-full font-sans text-text-secondary ${className}`}\n >\n <Popover.Trigger asChild>\n <div className=\"flex\">\n <div className=\"relative flex-1\">\n <Input\n id={id}\n label={label}\n labelClassName={labelClassName}\n placeholder={placeholder}\n value={inputValue}\n onChange={(e) => setInputValue(e.target.value)}\n end={end}\n className={`flex-1 ${open && focusRingStylesCoerced}`}\n />\n </div>\n </div>\n </Popover.Trigger>\n\n <Popover.Portal>\n <Popover.Content\n className=\"w-[--radix-popover-trigger-width] p-1 bg-white rounded-md shadow-lg border mt-1 z-20\"\n sideOffset={5}\n >\n <div className=\"max-h-60 overflow-auto flex flex-col items-start\">\n {filteredItems.length > 0 ? (\n filteredItems.map(\n ({ label: optionLabel, value: optionValue }, index) => (\n <Option\n onChange={handleOptionChange}\n value={optionValue}\n key={index}\n label={optionLabel}\n />\n )\n )\n ) : (\n <div className=\"px-2 py-1.5 text-sm text-gray-500\">\n No results found\n </div>\n )}\n </div>\n </Popover.Content>\n </Popover.Portal>\n </div>\n </Popover.Root>\n );\n};\n"]}
|
|
@@ -8,7 +8,13 @@ type ComboboxProps = {
|
|
|
8
8
|
onChange: (value: string) => void;
|
|
9
9
|
end?: React__default.ReactNode;
|
|
10
10
|
className?: string;
|
|
11
|
+
/** Label text for the combobox */
|
|
12
|
+
label?: string;
|
|
13
|
+
/** Additional classes for the label */
|
|
14
|
+
labelClassName?: string;
|
|
15
|
+
/** ID for accessibility */
|
|
16
|
+
id?: string;
|
|
11
17
|
};
|
|
12
|
-
declare const Combobox: ({ options, placeholder, value, onChange, end, className }: ComboboxProps) => React__default.JSX.Element;
|
|
18
|
+
declare const Combobox: ({ options, placeholder, value, onChange, end, className, label, labelClassName, id }: ComboboxProps) => React__default.JSX.Element;
|
|
13
19
|
|
|
14
20
|
export { Combobox, type ComboboxProps };
|
|
@@ -8,7 +8,13 @@ type ComboboxProps = {
|
|
|
8
8
|
onChange: (value: string) => void;
|
|
9
9
|
end?: React__default.ReactNode;
|
|
10
10
|
className?: string;
|
|
11
|
+
/** Label text for the combobox */
|
|
12
|
+
label?: string;
|
|
13
|
+
/** Additional classes for the label */
|
|
14
|
+
labelClassName?: string;
|
|
15
|
+
/** ID for accessibility */
|
|
16
|
+
id?: string;
|
|
11
17
|
};
|
|
12
|
-
declare const Combobox: ({ options, placeholder, value, onChange, end, className }: ComboboxProps) => React__default.JSX.Element;
|
|
18
|
+
declare const Combobox: ({ options, placeholder, value, onChange, end, className, label, labelClassName, id }: ComboboxProps) => React__default.JSX.Element;
|
|
13
19
|
|
|
14
20
|
export { Combobox, type ComboboxProps };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as i from'react';import i__default,{useState,useMemo,useCallback}from'react';import*as
|
|
1
|
+
import*as i from'react';import i__default,{useState,useMemo,useCallback}from'react';import*as p from'@radix-ui/react-popover';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {IconMap}from'@deckai/icons';function m(...e){return twMerge(clsx(e))}var P="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",$="ring-2 ring-ring ring-offset-2";var I={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB"},M={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},T=e=>{if(!e)return {width:"24px",height:"24px"};let r=Array.isArray(e)?e:[e],o={},t;return r.forEach(s=>{if(typeof s=="number")t=`${s}px`;else {let[a,n]=s.split(":"),c=parseInt(n,10);o[`@media (min-width: ${M[a]})`]=`${c}px`;}}),{width:t||"24px",height:t||"24px",...Object.entries(o).reduce((s,[a,n])=>({...s,[a]:{width:n,height:n}}),{})}},b=i__default.forwardRef(({name:e,size:r=24,color:o="primary",title:t,className:s,style:a={},...n},c)=>{let f=IconMap[e],u=T(r);return i__default.createElement("div",{className:m("flex justify-center items-center",s),style:{...u,"--icon-stroke":I[o],...a}},i__default.createElement(f,{ref:c,"aria-hidden":!t,"aria-label":t,stroke:e.includes("filled")?void 0:I[o],...n}))});b.displayName="Icon";var S=({className:e,end:r,iconName:o,color:t,size:s,title:a,label:n,labelClassName:c,id:f,...u})=>i.createElement("div",{className:"space-y-2"},n&&i.createElement("label",{htmlFor:f,className:m("block text-sm font-medium text-text-primary",c)},n),i.createElement("div",{className:"relative"},i.createElement("input",{id:f,className:m(`font-sans lg:text-body-default text-xs flex w-full rounded-lg border border-secondary-50 bg-background-0 px-3 md:py-3 py-2 text-secondary ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-secondary text-text-primary ${P} disabled:cursor-not-allowed disabled:opacity-50 md:text-md`,r&&"pr-10",e),...u}),r&&i.createElement("div",{className:"absolute inset-y-0 right-0 flex items-center pr-3"},o?i.createElement(b,{name:o,color:t,size:s,title:a}):r)));var N=({value:e,label:r,onChange:o,selected:t})=>i__default.createElement("button",{type:"button",className:m("relative w-full h-full text-left px-2 py-1.5 text-sm cursor-pointer hover:bg-gray-100 rounded",t&&"bg-gray-100"),onClick:()=>{o?.(e);}},r);var le=({options:e,placeholder:r="Select an item...",value:o,onChange:t,end:s,className:a,label:n,labelClassName:c,id:f})=>{let[u,v]=useState(!1),[g,y]=useState(o),h=useMemo(()=>e.find(l=>l.value===g),[g,e]),C=e.filter(l=>g?l.label.toLowerCase().includes(g.toLowerCase()):e),k=useCallback(l=>{t(l),v(!1),y(h?.label);},[t,h?.label]);return i__default.createElement(p.Root,{open:u,onOpenChange:v},i__default.createElement("div",{className:`relative w-full font-sans text-text-secondary ${a}`},i__default.createElement(p.Trigger,{asChild:!0},i__default.createElement("div",{className:"flex"},i__default.createElement("div",{className:"relative flex-1"},i__default.createElement(S,{id:f,label:n,labelClassName:c,placeholder:r,value:g,onChange:l=>y(l.target.value),end:s,className:`flex-1 ${u&&$}`})))),i__default.createElement(p.Portal,null,i__default.createElement(p.Content,{className:"w-[--radix-popover-trigger-width] p-1 bg-white rounded-md shadow-lg border mt-1 z-20",sideOffset:5},i__default.createElement("div",{className:"max-h-60 overflow-auto flex flex-col items-start"},C.length>0?C.map(({label:l,value:w},E)=>i__default.createElement(N,{onChange:k,value:w,key:E,label:l})):i__default.createElement("div",{className:"px-2 py-1.5 text-sm text-gray-500"},"No results found"))))))};if (exports.default) module.exports = exports.default;export{le as Combobox};//# sourceMappingURL=Combobox.js.map
|
|
2
2
|
//# sourceMappingURL=Combobox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/tailwind.ts","../../src/components/Icon.tsx","../../src/components/Input.tsx","../../src/components/Option.tsx","../../src/components/Combobox.tsx"],"names":["cn","inputs","twMerge","clsx","focusRingStyles","focusRingStylesCoerced","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","sizeStyles","Input","end","iconName","m","Option","label","onChange","selected","Combobox","options","placeholder","open","setOpen","useState","inputValue","setInputValue","selectedOption","useMemo","option","filteredItems","handleOptionChange","useCallback","e","optionValue","index"],"mappings":"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","file":"Combobox.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: ResponsiveSize | ResponsiveSize[];\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\"\n};\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n \"2xl\": \"1536px\"\n};\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n const mediaQueries: Record<string, string> = {};\n let baseSize: string | undefined;\n\n // Process each size\n sizeArray.forEach((size) => {\n if (typeof size === \"number\") {\n baseSize = `${size}px`;\n } else {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n mediaQueries[`@media (min-width: ${BREAKPOINT_MAP[breakpoint]})`] =\n `${value}px`;\n }\n });\n\n // Create the style object with the correct structure\n return {\n width: baseSize || \"24px\",\n height: baseSize || \"24px\",\n ...Object.entries(mediaQueries).reduce(\n (acc, [query, size]) => ({\n ...acc,\n [query]: {\n width: size,\n height: size\n }\n }),\n {}\n )\n };\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const sizeStyles = processSizes(size);\n\n return (\n <div\n className={cn(\"flex justify-center items-center\", className)}\n style={{\n ...sizeStyles,\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import * as React from \"react\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { IconName } from \"@deckai/icons\";\nimport { Icon, IconProps } from \"./Icon\";\n\nexport type InputProps = {\n className?: string;\n end?: React.ReactNode;\n /** renders an icon in the end slot */\n iconName?: IconName;\n} & React.InputHTMLAttributes<HTMLInputElement> &\n Pick<IconProps, \"color\" | \"size\" | \"title\">;\n\nexport const Input = ({\n className,\n end,\n iconName,\n color,\n size,\n title,\n ...props\n}: InputProps) => (\n <div className=\"relative\">\n <input\n className={cn(\n `font-sans lg:text-body-default text-xs flex w-full rounded-lg border border-secondary-50 bg-background-0 px-3 md:py-3 py-2 text-secondary ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-secondary text-text-primary ${focusRingStyles} disabled:cursor-not-allowed disabled:opacity-50 md:text-md`,\n end && \"pr-10\",\n className\n )}\n {...props}\n />\n {end && (\n <div className=\"absolute inset-y-0 right-0 flex items-center pr-3\">\n {iconName ? (\n <Icon name={iconName} color={color} size={size} title={title} />\n ) : (\n end\n )}\n </div>\n )}\n </div>\n);\n","import React from \"react\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\n\nexport type OptionProps = {\n label: string;\n value: string;\n onChange?: (value: string) => void;\n selected?: boolean;\n};\n\nexport const Option = ({ value, label, onChange, selected }: OptionProps) => (\n <button\n type=\"button\"\n className={cn(\n \"relative w-full h-full text-left px-2 py-1.5 text-sm cursor-pointer hover:bg-gray-100 rounded\",\n selected && \"bg-gray-100\"\n )}\n onClick={() => {\n onChange?.(value);\n }}\n >\n {label}\n </button>\n);\n","import React, { useCallback, useMemo, useState } from \"react\";\nimport * as Popover from \"@radix-ui/react-popover\";\nimport { Input } from \"./Input\";\nimport { OptionProps, Option } from \"./Option\";\nimport { focusRingStylesCoerced } from \"../utils/tailwind\";\n\nexport type ComboboxProps = {\n options: OptionProps[];\n placeholder?: string;\n value?: string;\n onChange: (value: string) => void;\n end?: React.ReactNode;\n className?: string;\n};\n\nexport const Combobox = ({\n options,\n placeholder = \"Select an item...\",\n value,\n onChange,\n end,\n className\n}: ComboboxProps) => {\n const [open, setOpen] = useState(false);\n const [inputValue, setInputValue] = useState<string | undefined>(value);\n\n const selectedOption: OptionProps | undefined = useMemo(\n () => options.find((option) => option.value === inputValue),\n [inputValue, options]\n );\n\n const filteredItems = options.filter((option) =>\n inputValue\n ? option.label.toLowerCase().includes(inputValue.toLowerCase())\n : options\n );\n\n const handleOptionChange = useCallback(\n (option: string) => {\n onChange(option);\n setOpen(false);\n setInputValue(selectedOption?.label);\n },\n [onChange, selectedOption?.label]\n );\n\n return (\n <Popover.Root open={open} onOpenChange={setOpen}>\n <div\n className={`relative w-full font-sans text-text-secondary ${className}`}\n >\n <Popover.Trigger asChild>\n <div className=\"flex\">\n <div className=\"relative flex-1\">\n <Input\n placeholder={placeholder}\n value={inputValue}\n onChange={(e) => setInputValue(e.target.value)}\n end={end}\n className={`flex-1 ${open && focusRingStylesCoerced}`}\n />\n </div>\n </div>\n </Popover.Trigger>\n\n <Popover.Portal>\n <Popover.Content\n className=\"w-[--radix-popover-trigger-width] p-1 bg-white rounded-md shadow-lg border mt-1 z-20\"\n sideOffset={5}\n >\n <div className=\"max-h-60 overflow-auto flex flex-col items-start\">\n {filteredItems.length > 0 ? (\n filteredItems.map(({ label, value: optionValue }, index) => (\n <Option\n onChange={handleOptionChange}\n value={optionValue}\n key={index}\n label={label}\n />\n ))\n ) : (\n <div className=\"px-2 py-1.5 text-sm text-gray-500\">\n No results found\n </div>\n )}\n </div>\n </Popover.Content>\n </Popover.Portal>\n </div>\n </Popover.Root>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/tailwind.ts","../../src/components/Icon.tsx","../../src/components/Input.tsx","../../src/components/Option.tsx","../../src/components/Combobox.tsx"],"names":["cn","inputs","twMerge","clsx","focusRingStyles","focusRingStylesCoerced","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","sizeStyles","Input","end","iconName","label","labelClassName","id","d","Option","onChange","selected","Combobox","options","placeholder","open","setOpen","useState","inputValue","setInputValue","selectedOption","useMemo","option","filteredItems","handleOptionChange","useCallback","e","optionLabel","optionValue","index"],"mappings":"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","file":"Combobox.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: ResponsiveSize | ResponsiveSize[];\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\"\n};\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n \"2xl\": \"1536px\"\n};\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n const mediaQueries: Record<string, string> = {};\n let baseSize: string | undefined;\n\n // Process each size\n sizeArray.forEach((size) => {\n if (typeof size === \"number\") {\n baseSize = `${size}px`;\n } else {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n mediaQueries[`@media (min-width: ${BREAKPOINT_MAP[breakpoint]})`] =\n `${value}px`;\n }\n });\n\n // Create the style object with the correct structure\n return {\n width: baseSize || \"24px\",\n height: baseSize || \"24px\",\n ...Object.entries(mediaQueries).reduce(\n (acc, [query, size]) => ({\n ...acc,\n [query]: {\n width: size,\n height: size\n }\n }),\n {}\n )\n };\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const sizeStyles = processSizes(size);\n\n return (\n <div\n className={cn(\"flex justify-center items-center\", className)}\n style={{\n ...sizeStyles,\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import * as React from \"react\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { IconName } from \"@deckai/icons\";\nimport { Icon, IconProps } from \"./Icon\";\n\nexport type InputProps = {\n className?: string;\n end?: React.ReactNode;\n /** renders an icon in the end slot */\n iconName?: IconName;\n /** Label text for the input */\n label?: string;\n /** Additional classes for the label */\n labelClassName?: string;\n} & React.InputHTMLAttributes<HTMLInputElement> &\n Pick<IconProps, \"color\" | \"size\" | \"title\">;\n\nexport const Input = ({\n className,\n end,\n iconName,\n color,\n size,\n title,\n label,\n labelClassName,\n id,\n ...props\n}: InputProps) => (\n <div className=\"space-y-2\">\n {label && (\n <label\n htmlFor={id}\n className={cn(\n \"block text-sm font-medium text-text-primary\",\n labelClassName\n )}\n >\n {label}\n </label>\n )}\n <div className=\"relative\">\n <input\n id={id}\n className={cn(\n `font-sans lg:text-body-default text-xs flex w-full rounded-lg border border-secondary-50 bg-background-0 px-3 md:py-3 py-2 text-secondary ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-secondary text-text-primary ${focusRingStyles} disabled:cursor-not-allowed disabled:opacity-50 md:text-md`,\n end && \"pr-10\",\n className\n )}\n {...props}\n />\n {end && (\n <div className=\"absolute inset-y-0 right-0 flex items-center pr-3\">\n {iconName ? (\n <Icon name={iconName} color={color} size={size} title={title} />\n ) : (\n end\n )}\n </div>\n )}\n </div>\n </div>\n);\n","import React from \"react\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\n\nexport type OptionProps = {\n label: string;\n value: string;\n onChange?: (value: string) => void;\n selected?: boolean;\n};\n\nexport const Option = ({ value, label, onChange, selected }: OptionProps) => (\n <button\n type=\"button\"\n className={cn(\n \"relative w-full h-full text-left px-2 py-1.5 text-sm cursor-pointer hover:bg-gray-100 rounded\",\n selected && \"bg-gray-100\"\n )}\n onClick={() => {\n onChange?.(value);\n }}\n >\n {label}\n </button>\n);\n","import React, { useCallback, useMemo, useState } from \"react\";\nimport * as Popover from \"@radix-ui/react-popover\";\nimport { Input } from \"./Input\";\nimport { OptionProps, Option } from \"./Option\";\nimport { focusRingStylesCoerced } from \"../utils/tailwind\";\n\nexport type ComboboxProps = {\n options: OptionProps[];\n placeholder?: string;\n value?: string;\n onChange: (value: string) => void;\n end?: React.ReactNode;\n className?: string;\n /** Label text for the combobox */\n label?: string;\n /** Additional classes for the label */\n labelClassName?: string;\n /** ID for accessibility */\n id?: string;\n};\n\nexport const Combobox = ({\n options,\n placeholder = \"Select an item...\",\n value,\n onChange,\n end,\n className,\n label,\n labelClassName,\n id\n}: ComboboxProps) => {\n const [open, setOpen] = useState(false);\n const [inputValue, setInputValue] = useState<string | undefined>(value);\n\n const selectedOption: OptionProps | undefined = useMemo(\n () => options.find((option) => option.value === inputValue),\n [inputValue, options]\n );\n\n const filteredItems = options.filter((option) =>\n inputValue\n ? option.label.toLowerCase().includes(inputValue.toLowerCase())\n : options\n );\n\n const handleOptionChange = useCallback(\n (option: string) => {\n onChange(option);\n setOpen(false);\n setInputValue(selectedOption?.label);\n },\n [onChange, selectedOption?.label]\n );\n\n return (\n <Popover.Root open={open} onOpenChange={setOpen}>\n <div\n className={`relative w-full font-sans text-text-secondary ${className}`}\n >\n <Popover.Trigger asChild>\n <div className=\"flex\">\n <div className=\"relative flex-1\">\n <Input\n id={id}\n label={label}\n labelClassName={labelClassName}\n placeholder={placeholder}\n value={inputValue}\n onChange={(e) => setInputValue(e.target.value)}\n end={end}\n className={`flex-1 ${open && focusRingStylesCoerced}`}\n />\n </div>\n </div>\n </Popover.Trigger>\n\n <Popover.Portal>\n <Popover.Content\n className=\"w-[--radix-popover-trigger-width] p-1 bg-white rounded-md shadow-lg border mt-1 z-20\"\n sideOffset={5}\n >\n <div className=\"max-h-60 overflow-auto flex flex-col items-start\">\n {filteredItems.length > 0 ? (\n filteredItems.map(\n ({ label: optionLabel, value: optionValue }, index) => (\n <Option\n onChange={handleOptionChange}\n value={optionValue}\n key={index}\n label={optionLabel}\n />\n )\n )\n ) : (\n <div className=\"px-2 py-1.5 text-sm text-gray-500\">\n No results found\n </div>\n )}\n </div>\n </Popover.Content>\n </Popover.Portal>\n </div>\n </Popover.Root>\n );\n};\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var
|
|
1
|
+
'use strict';var i=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var i__default=/*#__PURE__*/_interopDefault(i);var p=({icon:e,size:t=40,className:r})=>{let o=i.useMemo(()=>{let n=new DOMParser().parseFromString(e,"image/svg+xml").querySelector("svg");if(!n)return null;n.setAttribute("width","100%"),n.setAttribute("height","100%"),n.setAttribute("preserveAspectRatio","xMidYMid meet");let l=n.getAttribute("viewBox")||"0 0 40 40";return n.setAttribute("viewBox",l),n.outerHTML},[e]);return o?i__default.default.createElement("div",{style:{width:t,height:t,display:"flex",alignItems:"center",justifyContent:"center"},className:r,dangerouslySetInnerHTML:{__html:o}}):null};p.displayName="IconRenderer";var L={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},x=e=>{let[t,r]=e.split("-");return t==="heading"?L[r]||"p":t==="label"?"label":"p"},E={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},A=e=>e?(Array.isArray(e)?e:[e]).map(r=>{if(r.includes(":")){let[o,s]=r.split(":");return `${o}:text-${s}`}return `text-${r}`}).join(" "):"text-body-default",m=i__default.default.forwardRef(({variant:e="body-default",color:t="text-primary",as:r,className:o,children:s,weight:a,...n},l)=>{let h=A(e),u=t&&t==="inherit"?"inherit":t?`text-${t}`:"",f=i__default.default.useMemo(()=>{let b=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return x(b)},[e]);return i__default.default.createElement(r||f,{ref:l,className:`font-sans antialiased ${h} ${u} ${a?`!${E[a]}`:""} ${o??""}`,...n},s)});m.displayName="Text";function y(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var T="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var g=({children:e,color:t="text-primary",variant:r="body-default-semibold",href:o,className:s,...a})=>i__default.default.createElement(m,{variant:r,color:t},i__default.default.createElement("a",{href:o,className:y("hover:opacity-80 transition-all active:scale-95 hover:underline",T,s),...a},e));var Q=({icon:e,children:t,href:r,...o})=>i__default.default.createElement("div",{className:"row gap-2 flex items-center"},i__default.default.createElement("div",{className:"bg-secondary-400 rounded-full p-2.5 items-center justify-center"},i__default.default.createElement(p,{icon:e,size:24,className:"text-primary"})),i__default.default.createElement(g,{className:"hover:underline",href:r,...o,variant:["body-default-semibold","md:body-default-medium"]},t));if (exports.default) module.exports = exports.default;exports.ContactItem=Q;//# sourceMappingURL=ContactItem.cjs.map
|
|
2
2
|
//# sourceMappingURL=ContactItem.cjs.map
|