@deckai/deck-ui 0.0.16 → 0.0.18
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/dist/components/AboutCard.cjs +8 -2
- package/dist/components/AboutCard.cjs.map +1 -1
- package/dist/components/AboutCard.js +8 -2
- package/dist/components/AboutCard.js.map +1 -1
- package/dist/components/Accordion.cjs +7 -1
- package/dist/components/Accordion.cjs.map +1 -1
- package/dist/components/Accordion.js +7 -1
- package/dist/components/Accordion.js.map +1 -1
- package/dist/components/AddWorkCard.cjs +9 -3
- package/dist/components/AddWorkCard.cjs.map +1 -1
- package/dist/components/AddWorkCard.js +9 -3
- package/dist/components/AddWorkCard.js.map +1 -1
- package/dist/components/AutocompleteInput.cjs +8 -0
- package/dist/components/AutocompleteInput.cjs.map +1 -0
- package/dist/components/AutocompleteInput.d.cts +28 -0
- package/dist/components/AutocompleteInput.d.ts +28 -0
- package/dist/components/AutocompleteInput.js +8 -0
- package/dist/components/AutocompleteInput.js.map +1 -0
- package/dist/components/Avatar.cjs +1 -1
- package/dist/components/Avatar.cjs.map +1 -1
- package/dist/components/Avatar.d.cts +3 -1
- package/dist/components/Avatar.d.ts +3 -1
- package/dist/components/Avatar.js +1 -1
- package/dist/components/Avatar.js.map +1 -1
- package/dist/components/Badge.cjs +7 -1
- package/dist/components/Badge.cjs.map +1 -1
- package/dist/components/Badge.js +7 -1
- package/dist/components/Badge.js.map +1 -1
- package/dist/components/Breadcrumbs.cjs +7 -1
- package/dist/components/Breadcrumbs.cjs.map +1 -1
- package/dist/components/Breadcrumbs.js +7 -1
- package/dist/components/Breadcrumbs.js.map +1 -1
- package/dist/components/Button.cjs +8 -2
- package/dist/components/Button.cjs.map +1 -1
- package/dist/components/Button.d.cts +2 -2
- package/dist/components/Button.d.ts +2 -2
- package/dist/components/Button.js +8 -2
- package/dist/components/Button.js.map +1 -1
- package/dist/components/Carousel.cjs +1 -1
- package/dist/components/Carousel.cjs.map +1 -1
- package/dist/components/Carousel.d.cts +1 -3
- package/dist/components/Carousel.d.ts +1 -3
- package/dist/components/Carousel.js +1 -1
- package/dist/components/Carousel.js.map +1 -1
- package/dist/components/Collapsible.cjs +8 -2
- package/dist/components/Collapsible.cjs.map +1 -1
- package/dist/components/Collapsible.js +8 -2
- package/dist/components/Collapsible.js.map +1 -1
- package/dist/components/Combobox.cjs +7 -1
- package/dist/components/Combobox.cjs.map +1 -1
- package/dist/components/Combobox.d.cts +10 -1
- package/dist/components/Combobox.d.ts +10 -1
- package/dist/components/Combobox.js +7 -1
- package/dist/components/Combobox.js.map +1 -1
- package/dist/components/ContactItem.cjs +7 -1
- package/dist/components/ContactItem.cjs.map +1 -1
- package/dist/components/ContactItem.js +7 -1
- package/dist/components/ContactItem.js.map +1 -1
- package/dist/components/Dropdown.cjs +7 -1
- package/dist/components/Dropdown.cjs.map +1 -1
- package/dist/components/Dropdown.js +7 -1
- package/dist/components/Dropdown.js.map +1 -1
- package/dist/components/EditButton.cjs +8 -2
- package/dist/components/EditButton.cjs.map +1 -1
- package/dist/components/EditButton.js +8 -2
- package/dist/components/EditButton.js.map +1 -1
- package/dist/components/Icon.cjs +1 -1
- package/dist/components/Icon.cjs.map +1 -1
- package/dist/components/Icon.d.cts +1 -1
- package/dist/components/Icon.d.ts +1 -1
- package/dist/components/Icon.js +1 -1
- package/dist/components/Icon.js.map +1 -1
- package/dist/components/IconRenderer.cjs +1 -1
- package/dist/components/IconRenderer.cjs.map +1 -1
- package/dist/components/IconRenderer.d.cts +1 -1
- package/dist/components/IconRenderer.d.ts +1 -1
- package/dist/components/IconRenderer.js +1 -1
- package/dist/components/IconRenderer.js.map +1 -1
- package/dist/components/Input.cjs +7 -1
- package/dist/components/Input.cjs.map +1 -1
- package/dist/components/Input.d.cts +33 -2
- package/dist/components/Input.d.ts +33 -2
- package/dist/components/Input.js +7 -1
- package/dist/components/Input.js.map +1 -1
- package/dist/components/Link.cjs +7 -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 +7 -1
- package/dist/components/Link.js.map +1 -1
- package/dist/components/MultiSelectCombobox.cjs +7 -1
- package/dist/components/MultiSelectCombobox.cjs.map +1 -1
- package/dist/components/MultiSelectCombobox.d.cts +25 -4
- package/dist/components/MultiSelectCombobox.d.ts +25 -4
- package/dist/components/MultiSelectCombobox.js +7 -1
- package/dist/components/MultiSelectCombobox.js.map +1 -1
- package/dist/components/Navbar.cjs +8 -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 +8 -2
- package/dist/components/Navbar.js.map +1 -1
- package/dist/components/NavbarItem.cjs +1 -1
- package/dist/components/NavbarItem.cjs.map +1 -1
- package/dist/components/NavbarItem.d.cts +1 -1
- package/dist/components/NavbarItem.d.ts +1 -1
- package/dist/components/NavbarItem.js +1 -1
- package/dist/components/NavbarItem.js.map +1 -1
- package/dist/components/Option.cjs +7 -1
- package/dist/components/Option.cjs.map +1 -1
- package/dist/components/Option.d.cts +13 -2
- package/dist/components/Option.d.ts +13 -2
- package/dist/components/Option.js +7 -1
- package/dist/components/Option.js.map +1 -1
- package/dist/components/Pressable.cjs +1 -1
- package/dist/components/Pressable.cjs.map +1 -1
- package/dist/components/Pressable.js +1 -1
- package/dist/components/Pressable.js.map +1 -1
- package/dist/components/ProfileCard.cjs +7 -1
- package/dist/components/ProfileCard.cjs.map +1 -1
- package/dist/components/ProfileCard.js +7 -1
- package/dist/components/ProfileCard.js.map +1 -1
- package/dist/components/ProgressBar.cjs +7 -1
- package/dist/components/ProgressBar.cjs.map +1 -1
- package/dist/components/ProgressBar.d.cts +4 -0
- package/dist/components/ProgressBar.d.ts +4 -0
- package/dist/components/ProgressBar.js +7 -1
- package/dist/components/ProgressBar.js.map +1 -1
- package/dist/components/RadioGroup.cjs +8 -0
- package/dist/components/RadioGroup.cjs.map +1 -0
- package/dist/components/RadioGroup.d.cts +38 -0
- package/dist/components/RadioGroup.d.ts +38 -0
- package/dist/components/RadioGroup.js +8 -0
- package/dist/components/RadioGroup.js.map +1 -0
- package/dist/components/SegmentedTabs.cjs +8 -2
- package/dist/components/SegmentedTabs.cjs.map +1 -1
- package/dist/components/SegmentedTabs.js +8 -2
- package/dist/components/SegmentedTabs.js.map +1 -1
- package/dist/components/Sidebar.cjs +1 -1
- package/dist/components/Sidebar.cjs.map +1 -1
- package/dist/components/Sidebar.js +1 -1
- package/dist/components/Sidebar.js.map +1 -1
- package/dist/components/SlideButton.cjs +7 -1
- package/dist/components/SlideButton.cjs.map +1 -1
- package/dist/components/SlideButton.js +7 -1
- package/dist/components/SlideButton.js.map +1 -1
- package/dist/components/SocialCard.cjs +7 -1
- package/dist/components/SocialCard.cjs.map +1 -1
- package/dist/components/SocialCard.d.cts +1 -1
- package/dist/components/SocialCard.d.ts +1 -1
- package/dist/components/SocialCard.js +7 -1
- package/dist/components/SocialCard.js.map +1 -1
- package/dist/components/Switch.cjs +1 -1
- package/dist/components/Switch.cjs.map +1 -1
- package/dist/components/Switch.js +1 -1
- package/dist/components/Switch.js.map +1 -1
- package/dist/components/Tabs.cjs +8 -2
- package/dist/components/Tabs.cjs.map +1 -1
- package/dist/components/Tabs.js +8 -2
- package/dist/components/Tabs.js.map +1 -1
- package/dist/components/Tag.cjs +7 -1
- package/dist/components/Tag.cjs.map +1 -1
- package/dist/components/Tag.js +7 -1
- package/dist/components/Tag.js.map +1 -1
- package/dist/components/Text.cjs +7 -1
- package/dist/components/Text.cjs.map +1 -1
- package/dist/components/Text.d.cts +3 -3
- package/dist/components/Text.d.ts +3 -3
- package/dist/components/Text.js +7 -1
- package/dist/components/Text.js.map +1 -1
- package/dist/components/TextArea.cjs +7 -1
- package/dist/components/TextArea.cjs.map +1 -1
- package/dist/components/TextArea.d.cts +5 -1
- package/dist/components/TextArea.d.ts +5 -1
- package/dist/components/TextArea.js +7 -1
- package/dist/components/TextArea.js.map +1 -1
- package/dist/components/Toast.cjs +8 -2
- package/dist/components/Toast.cjs.map +1 -1
- package/dist/components/Toast.d.cts +24 -12
- package/dist/components/Toast.d.ts +24 -12
- package/dist/components/Toast.js +8 -2
- package/dist/components/Toast.js.map +1 -1
- package/dist/components/WorkCard.cjs +7 -1
- package/dist/components/WorkCard.cjs.map +1 -1
- package/dist/components/WorkCard.js +7 -1
- package/dist/components/WorkCard.js.map +1 -1
- package/dist/index.cjs +10 -52
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -2
- package/dist/index.d.ts +3 -2
- package/dist/index.js +10 -52
- package/dist/index.js.map +1 -1
- package/dist/styles/styles.css +1 -1
- package/dist/{tailwind-CuJn6tv4.d.cts → tailwind-Cl3vNM6S.d.cts} +9 -7
- package/dist/{tailwind-CuJn6tv4.d.ts → tailwind-Cl3vNM6S.d.ts} +9 -7
- package/package.json +3 -3
- package/dist/components/Illustration.cjs +0 -50
- package/dist/components/Illustration.cjs.map +0 -1
- package/dist/components/Illustration.d.cts +0 -10
- package/dist/components/Illustration.d.ts +0 -10
- package/dist/components/Illustration.js +0 -50
- package/dist/components/Illustration.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Text.tsx","../../src/utils/tailwind.ts","../../src/components/Option.tsx"],"names":["cn","inputs","twMerge","clsx","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","size","fontWeight","processVariants","variants","breakpoint","typographyClass","Text","React","color","as","className","children","weight","props","ref","typographyClasses","colorClasses","suggestedElement","baseVariant","focusRingStyles","Option","value","label","onChange","selected","disabled"],"mappings":"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","file":"Option.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React from \"react\";\nimport { Typography } from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n | \"primary\"\n | \"secondary\"\n | \"white\"\n | \"primary-blue\"\n | \"disabled\"\n | \"danger\"\n | \"inherit\";\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: TextColor;\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color === \"inherit\" ? \"text-inherit\" : `text-text-${color}`;\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React from \"react\";\nimport { cn } from \"../utils\";\nimport { Text } from \"./Text\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nexport type OptionProps = {\n label: React.ReactNode;\n value: string;\n /** Optional color override for specific items like \"Logout\" in red */\n color?: \"default\" | \"danger\";\n /** Optional disabled state */\n disabled?: boolean;\n onChange?: (value: string) => void;\n selected?: boolean;\n className?: string;\n};\n\nexport const Option = ({\n value,\n label,\n onChange,\n selected,\n color,\n disabled,\n className\n}: OptionProps) => (\n <button\n type=\"button\"\n disabled={disabled}\n className={cn(\n \"relative w-full text-left px-2 py-1.5 text-sm rounded\",\n \"cursor-pointer hover:bg-gray-100\",\n \"disabled:opacity-50 disabled:cursor-not-allowed\",\n selected && \"bg-gray-100\",\n \"flex items-center gap-2\",\n focusRingStyles,\n className\n )}\n onClick={() => {\n onChange?.(value);\n }}\n >\n <Text\n variant=\"body-default-medium\"\n color={color === \"danger\" ? \"danger\" : \"inherit\"}\n >\n {label}\n </Text>\n </button>\n);\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Text.tsx","../../src/components/Option.tsx"],"names":["cn","inputs","twMerge","clsx","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","size","fontWeight","processVariants","variants","breakpoint","typographyClass","Text","React","color","as","className","children","weight","props","ref","typographyClasses","colorClasses","suggestedElement","baseVariant","HighlightedText","text","highlight","parts","part","i","Option","value","label","onChange","onKeyDown","onMouseEnter","onMouseLeave","selected","disabled","id","role","ariaSelected","searchValue"],"mappings":"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","file":"Option.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React from \"react\";\nimport { Typography } from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n | \"primary\"\n | \"secondary\"\n | \"white\"\n | \"primary-blue\"\n | \"disabled\"\n | \"danger\"\n | \"inherit\"\n | \"primary-100\";\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: TextColor;\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses = color === \"inherit\" ? \"text-inherit\" : `text-${color}`;\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`\n font-sans antialiased\n ${typographyClasses}\n ${colorClasses}\n ${weight && `!${fontWeight[weight]}`}\n ${className}\n `}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import React, { KeyboardEvent } from \"react\";\nimport { cn } from \"../utils\";\nimport { Text } from \"./Text\";\n\nexport type OptionProps = {\n label: React.ReactNode;\n value: string;\n /** Optional color override for specific items like \"Logout\" in red */\n color?: \"default\" | \"danger\";\n /** Optional disabled state */\n disabled?: boolean;\n onChange?: (value: string) => void;\n onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n selected?: boolean;\n className?: string;\n /** ID for accessibility */\n id?: string;\n /** ARIA role */\n role?: string;\n /** ARIA selected state */\n \"aria-selected\"?: boolean;\n /** Current search value for highlighting matches */\n searchValue?: string;\n};\n\nconst HighlightedText = ({\n text,\n highlight\n}: {\n text: string;\n highlight: string;\n}) => {\n if (!highlight) return <>{text}</>;\n\n const parts = text.split(new RegExp(`(${highlight})`, \"i\"));\n return (\n <>\n {parts.map((part, i) =>\n part.toLowerCase() === highlight.toLowerCase() ? (\n <span key={i} className=\"font-bold\">\n {part}\n </span>\n ) : (\n part\n )\n )}\n </>\n );\n};\n\nexport const Option = React.forwardRef<HTMLButtonElement, OptionProps>(\n (\n {\n value,\n label,\n onChange,\n onKeyDown,\n onMouseEnter,\n onMouseLeave,\n selected,\n color,\n disabled,\n className,\n id,\n role,\n \"aria-selected\": ariaSelected,\n searchValue = \"\"\n },\n ref\n ) => (\n <button\n ref={ref}\n type=\"button\"\n id={id}\n role={role}\n aria-selected={ariaSelected}\n disabled={disabled}\n className={cn(\n \"relative w-full text-left px-2 py-1.5 text-sm rounded outline-none\",\n \"cursor-pointer hover:bg-gray-100\",\n \"disabled:opacity-50 disabled:cursor-not-allowed\",\n selected && \"bg-gray-100\",\n \"flex items-center gap-2\",\n className\n )}\n onClick={() => {\n onChange?.(value);\n }}\n onKeyDown={onKeyDown}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n >\n <Text\n variant=\"body-default-medium\"\n color={color === \"danger\" ? \"danger\" : \"inherit\"}\n >\n {typeof label === \"string\" ? (\n <HighlightedText text={label} highlight={searchValue} />\n ) : (\n label\n )}\n </Text>\n </button>\n )\n);\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React__default from 'react';
|
|
1
|
+
import React__default, { KeyboardEvent } from 'react';
|
|
2
2
|
|
|
3
3
|
type OptionProps = {
|
|
4
4
|
label: React__default.ReactNode;
|
|
@@ -8,9 +8,20 @@ type OptionProps = {
|
|
|
8
8
|
/** Optional disabled state */
|
|
9
9
|
disabled?: boolean;
|
|
10
10
|
onChange?: (value: string) => void;
|
|
11
|
+
onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void;
|
|
12
|
+
onMouseEnter?: () => void;
|
|
13
|
+
onMouseLeave?: () => void;
|
|
11
14
|
selected?: boolean;
|
|
12
15
|
className?: string;
|
|
16
|
+
/** ID for accessibility */
|
|
17
|
+
id?: string;
|
|
18
|
+
/** ARIA role */
|
|
19
|
+
role?: string;
|
|
20
|
+
/** ARIA selected state */
|
|
21
|
+
"aria-selected"?: boolean;
|
|
22
|
+
/** Current search value for highlighting matches */
|
|
23
|
+
searchValue?: string;
|
|
13
24
|
};
|
|
14
|
-
declare const Option:
|
|
25
|
+
declare const Option: React__default.ForwardRefExoticComponent<OptionProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
15
26
|
|
|
16
27
|
export { Option, type OptionProps };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React__default from 'react';
|
|
1
|
+
import React__default, { KeyboardEvent } from 'react';
|
|
2
2
|
|
|
3
3
|
type OptionProps = {
|
|
4
4
|
label: React__default.ReactNode;
|
|
@@ -8,9 +8,20 @@ type OptionProps = {
|
|
|
8
8
|
/** Optional disabled state */
|
|
9
9
|
disabled?: boolean;
|
|
10
10
|
onChange?: (value: string) => void;
|
|
11
|
+
onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void;
|
|
12
|
+
onMouseEnter?: () => void;
|
|
13
|
+
onMouseLeave?: () => void;
|
|
11
14
|
selected?: boolean;
|
|
12
15
|
className?: string;
|
|
16
|
+
/** ID for accessibility */
|
|
17
|
+
id?: string;
|
|
18
|
+
/** ARIA role */
|
|
19
|
+
role?: string;
|
|
20
|
+
/** ARIA selected state */
|
|
21
|
+
"aria-selected"?: boolean;
|
|
22
|
+
/** Current search value for highlighting matches */
|
|
23
|
+
searchValue?: string;
|
|
13
24
|
};
|
|
14
|
-
declare const Option:
|
|
25
|
+
declare const Option: React__default.ForwardRefExoticComponent<OptionProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
15
26
|
|
|
16
27
|
export { Option, type OptionProps };
|
|
@@ -1,2 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import o from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';function c(...e){return twMerge(clsx(e))}var b={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},E=e=>{let[t,n]=e.split("-");return t==="heading"?b[n]||"p":t==="label"?"label":"p"},f={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},x=e=>e?(Array.isArray(e)?e:[e]).map(n=>{if(n.includes(":")){let[r,a]=n.split(":");return `${r}:text-${a}`}return `text-${n}`}).join(" "):"text-body-default",g=o.forwardRef(({variant:e="body-default",color:t="primary",as:n,className:r,children:a,weight:s,...l},i)=>{let p=x(e),T=t==="inherit"?"text-inherit":`text-${t}`,m=o.useMemo(()=>{let y=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return E(y)},[e]);return o.createElement(n||m,{ref:i,className:`
|
|
2
|
+
font-sans antialiased
|
|
3
|
+
${p}
|
|
4
|
+
${T}
|
|
5
|
+
${s&&`!${f[s]}`}
|
|
6
|
+
${r}
|
|
7
|
+
`,...l},a)});g.displayName="Text";var A=({text:e,highlight:t})=>{if(!t)return o.createElement(o.Fragment,null,e);let n=e.split(new RegExp(`(${t})`,"i"));return o.createElement(o.Fragment,null,n.map((r,a)=>r.toLowerCase()===t.toLowerCase()?o.createElement("span",{key:a,className:"font-bold"},r):r))},K=o.forwardRef(({value:e,label:t,onChange:n,onKeyDown:r,onMouseEnter:a,onMouseLeave:s,selected:l,color:i,disabled:p,className:T,id:m,role:u,"aria-selected":y,searchValue:H=""},M)=>o.createElement("button",{ref:M,type:"button",id:m,role:u,"aria-selected":y,disabled:p,className:c("relative w-full text-left px-2 py-1.5 text-sm rounded outline-none","cursor-pointer hover:bg-gray-100","disabled:opacity-50 disabled:cursor-not-allowed",l&&"bg-gray-100","flex items-center gap-2",T),onClick:()=>{n?.(e);},onKeyDown:r,onMouseEnter:a,onMouseLeave:s},o.createElement(g,{variant:"body-default-medium",color:i==="danger"?"danger":"inherit"},typeof t=="string"?o.createElement(A,{text:t,highlight:H}):t)));export{K as Option};//# sourceMappingURL=Option.js.map
|
|
2
8
|
//# sourceMappingURL=Option.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Text.tsx","../../src/utils/tailwind.ts","../../src/components/Option.tsx"],"names":["cn","inputs","twMerge","clsx","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","size","fontWeight","processVariants","variants","breakpoint","typographyClass","Text","React","color","as","className","children","weight","props","ref","typographyClasses","colorClasses","suggestedElement","baseVariant","focusRingStyles","Option","value","label","onChange","selected","disabled"],"mappings":"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","file":"Option.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React from \"react\";\nimport { Typography } from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n | \"primary\"\n | \"secondary\"\n | \"white\"\n | \"primary-blue\"\n | \"disabled\"\n | \"danger\"\n | \"inherit\";\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: TextColor;\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color === \"inherit\" ? \"text-inherit\" : `text-text-${color}`;\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React from \"react\";\nimport { cn } from \"../utils\";\nimport { Text } from \"./Text\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nexport type OptionProps = {\n label: React.ReactNode;\n value: string;\n /** Optional color override for specific items like \"Logout\" in red */\n color?: \"default\" | \"danger\";\n /** Optional disabled state */\n disabled?: boolean;\n onChange?: (value: string) => void;\n selected?: boolean;\n className?: string;\n};\n\nexport const Option = ({\n value,\n label,\n onChange,\n selected,\n color,\n disabled,\n className\n}: OptionProps) => (\n <button\n type=\"button\"\n disabled={disabled}\n className={cn(\n \"relative w-full text-left px-2 py-1.5 text-sm rounded\",\n \"cursor-pointer hover:bg-gray-100\",\n \"disabled:opacity-50 disabled:cursor-not-allowed\",\n selected && \"bg-gray-100\",\n \"flex items-center gap-2\",\n focusRingStyles,\n className\n )}\n onClick={() => {\n onChange?.(value);\n }}\n >\n <Text\n variant=\"body-default-medium\"\n color={color === \"danger\" ? \"danger\" : \"inherit\"}\n >\n {label}\n </Text>\n </button>\n);\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Text.tsx","../../src/components/Option.tsx"],"names":["cn","inputs","twMerge","clsx","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","size","fontWeight","processVariants","variants","breakpoint","typographyClass","Text","React","color","as","className","children","weight","props","ref","typographyClasses","colorClasses","suggestedElement","baseVariant","HighlightedText","text","highlight","parts","part","i","Option","value","label","onChange","onKeyDown","onMouseEnter","onMouseLeave","selected","disabled","id","role","ariaSelected","searchValue"],"mappings":"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","file":"Option.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React from \"react\";\nimport { Typography } from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n | \"primary\"\n | \"secondary\"\n | \"white\"\n | \"primary-blue\"\n | \"disabled\"\n | \"danger\"\n | \"inherit\"\n | \"primary-100\";\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: TextColor;\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses = color === \"inherit\" ? \"text-inherit\" : `text-${color}`;\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`\n font-sans antialiased\n ${typographyClasses}\n ${colorClasses}\n ${weight && `!${fontWeight[weight]}`}\n ${className}\n `}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import React, { KeyboardEvent } from \"react\";\nimport { cn } from \"../utils\";\nimport { Text } from \"./Text\";\n\nexport type OptionProps = {\n label: React.ReactNode;\n value: string;\n /** Optional color override for specific items like \"Logout\" in red */\n color?: \"default\" | \"danger\";\n /** Optional disabled state */\n disabled?: boolean;\n onChange?: (value: string) => void;\n onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n selected?: boolean;\n className?: string;\n /** ID for accessibility */\n id?: string;\n /** ARIA role */\n role?: string;\n /** ARIA selected state */\n \"aria-selected\"?: boolean;\n /** Current search value for highlighting matches */\n searchValue?: string;\n};\n\nconst HighlightedText = ({\n text,\n highlight\n}: {\n text: string;\n highlight: string;\n}) => {\n if (!highlight) return <>{text}</>;\n\n const parts = text.split(new RegExp(`(${highlight})`, \"i\"));\n return (\n <>\n {parts.map((part, i) =>\n part.toLowerCase() === highlight.toLowerCase() ? (\n <span key={i} className=\"font-bold\">\n {part}\n </span>\n ) : (\n part\n )\n )}\n </>\n );\n};\n\nexport const Option = React.forwardRef<HTMLButtonElement, OptionProps>(\n (\n {\n value,\n label,\n onChange,\n onKeyDown,\n onMouseEnter,\n onMouseLeave,\n selected,\n color,\n disabled,\n className,\n id,\n role,\n \"aria-selected\": ariaSelected,\n searchValue = \"\"\n },\n ref\n ) => (\n <button\n ref={ref}\n type=\"button\"\n id={id}\n role={role}\n aria-selected={ariaSelected}\n disabled={disabled}\n className={cn(\n \"relative w-full text-left px-2 py-1.5 text-sm rounded outline-none\",\n \"cursor-pointer hover:bg-gray-100\",\n \"disabled:opacity-50 disabled:cursor-not-allowed\",\n selected && \"bg-gray-100\",\n \"flex items-center gap-2\",\n className\n )}\n onClick={() => {\n onChange?.(value);\n }}\n onKeyDown={onKeyDown}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n >\n <Text\n variant=\"body-default-medium\"\n color={color === \"danger\" ? \"danger\" : \"inherit\"}\n >\n {typeof label === \"string\" ? (\n <HighlightedText text={label} highlight={searchValue} />\n ) : (\n label\n )}\n </Text>\n </button>\n )\n);\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var r=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var r__default=/*#__PURE__*/_interopDefault(r);var
|
|
1
|
+
'use strict';var r=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var r__default=/*#__PURE__*/_interopDefault(r);var o="focus-visible:outline-none focus-visible:border-2 focus-visible:border-primary-100";function s(...t){return tailwindMerge.twMerge(clsx.clsx(t))}var l=r__default.default.forwardRef(({children:t,type:n="button",className:a,disabled:e,...p},c)=>r__default.default.createElement("button",{ref:c,type:n,disabled:e,className:s("appearance-none hover:opacity-80 transition-all active:scale-95",o,e&&"opacity-50 cursor-not-allowed",a),...p},t));l.displayName="Pressable";exports.Pressable=l;//# sourceMappingURL=Pressable.cjs.map
|
|
2
2
|
//# sourceMappingURL=Pressable.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/utils/index.ts","../../src/components/Pressable.tsx"],"names":["focusRingStyles","cn","inputs","twMerge","clsx","Pressable","React","children","type","className","disabled","props","ref"],"mappings":"iNAmEO,IAAMA,CAAAA,CACX,
|
|
1
|
+
{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/utils/index.ts","../../src/components/Pressable.tsx"],"names":["focusRingStyles","cn","inputs","twMerge","clsx","Pressable","React","children","type","className","disabled","props","ref"],"mappings":"iNAmEO,IAAMA,CAAAA,CACX,oFCpEF,CAGO,SAASC,CAAAA,CAAAA,GAAMC,CAAsB,CAAA,CAC1C,OAAOC,qBAAAA,CAAQC,SAAKF,CAAAA,CAAM,CAAC,CAC7B,CCCaG,IAAAA,CAAAA,CAAYC,kBAAM,CAAA,UAAA,CAC7B,CAAC,CAAE,SAAAC,CAAU,CAAA,IAAA,CAAAC,CAAO,CAAA,QAAA,CAAU,SAAAC,CAAAA,CAAAA,CAAW,QAAAC,CAAAA,CAAAA,CAAU,GAAGC,CAAM,CAAGC,CAAAA,CAAAA,GAC7DN,kBAAA,CAAA,aAAA,CAAC,QACC,CAAA,CAAA,GAAA,CAAKM,EACL,IAAMJ,CAAAA,CAAAA,CACN,QAAUE,CAAAA,CAAAA,CACV,SAAWT,CAAAA,CAAAA,CACT,iEACAD,CAAAA,CAAAA,CACAU,GAAY,+BACZD,CAAAA,CACF,CACC,CAAA,GAAGE,CAEHJ,CAAAA,CAAAA,CACH,CAEJ,EAEAF,EAAU,WAAc,CAAA,WAAA","file":"Pressable.cjs","sourcesContent":["import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:border-2 focus-visible:border-primary-100\";\n\nexport const focusRingStylesCoerced = \"border-2 border-primary-100\";\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable = React.forwardRef<HTMLButtonElement, PressableProps>(\n ({ children, type = \"button\", className, disabled, ...props }, ref) => (\n <button\n ref={ref}\n type={type}\n disabled={disabled}\n className={cn(\n \"appearance-none hover:opacity-80 transition-all active:scale-95\",\n focusRingStyles,\n disabled && \"opacity-50 cursor-not-allowed\",\n className\n )}\n {...props}\n >\n {children}\n </button>\n )\n);\n\nPressable.displayName = \"Pressable\";\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import r from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';var
|
|
1
|
+
import r from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';var o="focus-visible:outline-none focus-visible:border-2 focus-visible:border-primary-100";function s(...t){return twMerge(clsx(t))}var l=r.forwardRef(({children:t,type:n="button",className:a,disabled:e,...p},c)=>r.createElement("button",{ref:c,type:n,disabled:e,className:s("appearance-none hover:opacity-80 transition-all active:scale-95",o,e&&"opacity-50 cursor-not-allowed",a),...p},t));l.displayName="Pressable";export{l as Pressable};//# sourceMappingURL=Pressable.js.map
|
|
2
2
|
//# sourceMappingURL=Pressable.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/utils/index.ts","../../src/components/Pressable.tsx"],"names":["focusRingStyles","cn","inputs","twMerge","clsx","Pressable","React","children","type","className","disabled","props","ref"],"mappings":"kFAmEO,IAAMA,CAAAA,CACX,
|
|
1
|
+
{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/utils/index.ts","../../src/components/Pressable.tsx"],"names":["focusRingStyles","cn","inputs","twMerge","clsx","Pressable","React","children","type","className","disabled","props","ref"],"mappings":"kFAmEO,IAAMA,CAAAA,CACX,oFCpEF,CAGO,SAASC,CAAAA,CAAAA,GAAMC,CAAsB,CAAA,CAC1C,OAAOC,OAAAA,CAAQC,IAAKF,CAAAA,CAAM,CAAC,CAC7B,CCCaG,IAAAA,CAAAA,CAAYC,CAAM,CAAA,UAAA,CAC7B,CAAC,CAAE,SAAAC,CAAU,CAAA,IAAA,CAAAC,CAAO,CAAA,QAAA,CAAU,SAAAC,CAAAA,CAAAA,CAAW,QAAAC,CAAAA,CAAAA,CAAU,GAAGC,CAAM,CAAGC,CAAAA,CAAAA,GAC7DN,CAAA,CAAA,aAAA,CAAC,QACC,CAAA,CAAA,GAAA,CAAKM,EACL,IAAMJ,CAAAA,CAAAA,CACN,QAAUE,CAAAA,CAAAA,CACV,SAAWT,CAAAA,CAAAA,CACT,iEACAD,CAAAA,CAAAA,CACAU,GAAY,+BACZD,CAAAA,CACF,CACC,CAAA,GAAGE,CAEHJ,CAAAA,CAAAA,CACH,CAEJ,EAEAF,EAAU,WAAc,CAAA,WAAA","file":"Pressable.js","sourcesContent":["import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:border-2 focus-visible:border-primary-100\";\n\nexport const focusRingStylesCoerced = \"border-2 border-primary-100\";\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable = React.forwardRef<HTMLButtonElement, PressableProps>(\n ({ children, type = \"button\", className, disabled, ...props }, ref) => (\n <button\n ref={ref}\n type={type}\n disabled={disabled}\n className={cn(\n \"appearance-none hover:opacity-80 transition-all active:scale-95\",\n focusRingStyles,\n disabled && \"opacity-50 cursor-not-allowed\",\n className\n )}\n {...props}\n >\n {children}\n </button>\n )\n);\n\nPressable.displayName = \"Pressable\";\n"]}
|
|
@@ -1,2 +1,8 @@
|
|
|
1
|
-
'use strict';var r=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),icons=require('@deckai/icons'),c=require('@radix-ui/react-tooltip'),L=require('@radix-ui/react-switch');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var r__namespace=/*#__PURE__*/_interopNamespace(r);var c__namespace=/*#__PURE__*/_interopNamespace(c);var L__namespace=/*#__PURE__*/_interopNamespace(L);function m(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var V={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB",disabled:"#888888"},q={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},Q=e=>{if(!e)return {width:"24px",height:"24px"};let s=Array.isArray(e)?e:[e],i={},o;return s.forEach(t=>{if(typeof t=="number")o=`${t}px`;else {let[n,a]=t.split(":"),p=parseInt(a,10);i[`@media (min-width: ${q[n]})`]=`${p}px`;}}),{width:o||"24px",height:o||"24px",...Object.entries(i).reduce((t,[n,a])=>({...t,[n]:{width:a,height:a}}),{})}},y=r__namespace.default.forwardRef(({name:e,size:s=24,color:i="primary",title:o,className:t,style:n={},...a},p)=>{let u=icons.IconMap[e],d=Q(s);return r__namespace.default.createElement("div",{className:m("flex justify-center items-center",t),style:{...d,"--icon-stroke":V[i],...n}},r__namespace.default.createElement(u,{ref:p,"aria-hidden":!o,"aria-label":o,stroke:e.includes("filled")?void 0:V[i],...a}))});y.displayName="Icon";var X={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},J=e=>{let[s,i]=e.split("-");return s==="heading"?X[i]||"p":s==="label"?"label":"p"},U={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},Y=e=>e?(Array.isArray(e)?e:[e]).map(i=>{if(i.includes(":")){let[o,t]=i.split(":");return `${o}:text-${t}`}return `text-${i}`}).join(" "):"text-body-default",l=r__namespace.default.forwardRef(({variant:e="body-default",color:s="primary",as:i,className:o,children:t,weight:n,...a},p)=>{let u=Y(e),d=s==="inherit"?"text-inherit":`text-text-${s}`,b=r__namespace.default.useMemo(()=>{let g=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return J(g)},[e]);return r__namespace.default.createElement(i||b,{ref:p,className:`font-sans antialiased ${u} ${d} ${n?`!${U[n]}`:""} ${o??""}`,...a},t)});l.displayName="Text";var O={pink:"bg-tertiary-5",orange:"bg-tertiary-15",green:"bg-tertiary-25",purple:"bg-secondary-300"},Z=e=>{let s=Object.keys(O),i=e.split("").reduce((n,a)=>a.charCodeAt(0)+((n<<5)-n),0),o=Math.abs(i)%s.length,t=s[o];return console.log({input:e,hash:i,variantKeys:s,index:o,selectedVariant:t}),t},R=r__namespace.forwardRef(({className:e,variant:s,iconName:i,children:o,...t},n)=>{let a=s||(typeof o=="string"?Z(o):"pink");return r__namespace.createElement("span",{ref:n,className:m("inline-flex items-center gap-2","rounded px-2 py-1.5","text-sm font-medium",O[a],e),...t},i&&r__namespace.createElement(y,{size:16,name:i}),r__namespace.createElement(l,{variant:"body-xxs-semibold",className:"mt-0.5"},o))});R.displayName="Badge";var E=({content:e,children:s,side:i="bottom",align:o="center",className:t,delayDuration:n=200,defaultOpen:a,open:p,onOpenChange:u,longPressDuration:d=500})=>{let[b,H]=r.useState(a||!1),g=null,A=p??b,f=r.useCallback(k=>{p||H(k),u?.(k);},[p,u]),v=r.useCallback(()=>{g=setTimeout(()=>{f(!0);},d);},[f,d]),B=r.useCallback(()=>{g&&(clearTimeout(g),g=null),setTimeout(()=>f(!1),1500);},[g,f]);return r__namespace.createElement(c__namespace.Provider,{delayDuration:n},r__namespace.createElement(c__namespace.Root,{open:A,onOpenChange:f},r__namespace.createElement(c__namespace.Trigger,{asChild:!0},r__namespace.createElement("span",{tabIndex:0,onTouchStart:v,onTouchEnd:B,onTouchCancel:B},s)),r__namespace.createElement(c__namespace.Portal,null,r__namespace.createElement(c__namespace.Content,{side:i,align:o,sideOffset:4,className:m("z-50 overflow-hidden rounded-lg","bg-black px-3 py-1.5","text-xs text-white","animate-in fade-in-0 zoom-in-95","data-[state=closed]:animate-out data-[state=closed]:fade-out-0","data-[side=bottom]:slide-in-from-top-2","data-[side=top]:slide-in-from-bottom-2","select-none","max-w-60","touch-none",t)},e,r__namespace.createElement(c__namespace.Arrow,{className:"fill-text-primary",width:10,height:5})))))};var P="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var j=r__namespace.forwardRef(({className:e,label:s,description:i,...o},t)=>r__namespace.createElement("div",{className:"flex items-center gap-2"},r__namespace.createElement(L__namespace.Root,{className:m("peer inline-flex h-6 w-11 shrink-0 cursor-pointer","items-center rounded-full border-2 border-transparent","transition-colors focus-visible:outline-none",P,"disabled:cursor-not-allowed disabled:opacity-50","data-[state=checked]:bg-primary-50 data-[state=unchecked]:bg-secondary-50",e),...o,ref:t},r__namespace.createElement(L__namespace.Thumb,{className:m("pointer-events-none block h-5 w-5","rounded-full bg-white shadow-lg ring-0","transition-transform","data-[state=checked]:translate-x-5","data-[state=unchecked]:translate-x-0")})),(s||i)&&r__namespace.createElement("div",{className:"flex flex-col"},s&&r__namespace.createElement("label",{className:"text-sm font-medium text-text",htmlFor:o.id},s),i&&r__namespace.createElement("span",{className:"text-xs text-text-secondary"},i))));j.displayName="Switch";var w=r__namespace.default.forwardRef(({children:e,type:s="button",className:i,disabled:o,...t},n)=>r__namespace.default.createElement("button",{ref:n,type:s,disabled:o,className:m("appearance-none hover:opacity-80 transition-all active:scale-95",P,o&&"opacity-50 cursor-not-allowed",i),...t},e));w.displayName="Pressable";var K=({children:e,color:s="primary",className:i,onClose:o,...t})=>{let[n,a]=r.useState(!1),p=r.useCallback(()=>{a(!0);},[]),u=r.useCallback(()=>{a(!1);},[]),d=r__namespace.default.createElement("div",{className:m("flex gap-2",o?"justify-between items-center":"items-center justify-center","hover:bg-primary-100 rounded bg-secondary-400 px-2 py-1 sm:px-3 sm:py-1.5 h-min hover:text-white",s==="primary"?"text-primary-100":"text-text",i),onMouseEnter:p,onMouseLeave:u},typeof e=="string"?r__namespace.default.createElement(l,{color:"inherit",variant:["md:body-default-medium","body-xxs-medium"],className:"truncate pt-0.5"},e):e,o&&r__namespace.default.createElement(w,{...t,onClick:o,className:"flex items-center justify-center"},r__namespace.default.createElement(y,{name:"close",size:10,color:n?"white":"primaryBlue"})));return o?d:r__namespace.default.createElement(w,{...t},d)};var N=4,S=3,Fe=({profileImage:e,name:s,location:i,memberSince:o,interests:t,badges:n,isEditMode:a=!1})=>{let p=r.useId(),u=r.useMemo(()=>t?.slice(0,N)||[],[t]),d=r.useMemo(()=>n?.slice(0,S)||[],[n]),b=t&&t.length>N,H=n&&n.length>S,g=t?t.length-N:0,A=n?n.length-S:0;return r__namespace.default.createElement("div",{className:"lg:p-10 md:p-8 p-4 rounded-xl border border-stroke relative flex gap-6 md:flex-row flex-col"},r__namespace.default.createElement("div",{className:"flex md:flex-row flex-col gap-6"},r__namespace.default.createElement("div",{className:"flex flex-col gap-4 md:items-start items-center"},r__namespace.default.createElement("div",{className:"flex items-center justify-center w-[164px] h-[164px]"},r__namespace.default.createElement("img",{src:e,alt:`Profile for ${s}`,className:"object-cover rounded-full w-full h-full"}))),r__namespace.default.createElement("div",{className:"flex flex-col gap-2"},r__namespace.default.createElement(l,{as:"h1",variant:["lg:heading-lg","md:heading-md","heading-sm"],className:"text-wrap text-center md:text-left"},s),n&&r__namespace.default.createElement("div",{className:"flex gap-2 flex-wrap py-2 sm:justify-start justify-center items-center"},d.map((f,v)=>r__namespace.default.createElement(R,{key:v,...f})),H&&r__namespace.default.createElement(E,{content:n.slice(S).map(f=>f.children).join(", ")},r__namespace.default.createElement(l,{variant:"label-default"},"+",A," more"))),r__namespace.default.createElement("div",{className:"flex gap-2 items-center sm:justify-start justify-center pt-1"},r__namespace.default.createElement(y,{name:"location",color:"secondary"}),r__namespace.default.createElement(l,{variant:["lg:body-lg","md:body-default","body-xs"],color:"secondary",className:"sm:text-left text-center truncate max-w-[300px]"},i)),r__namespace.default.createElement("div",{className:"flex gap-2 items-center sm:justify-start justify-center"},r__namespace.default.createElement(y,{name:"profile",color:"secondary"}),r__namespace.default.createElement(l,{variant:["lg:body-lg","md:body-default","body-xs"],color:"secondary",className:"sm:text-left text-center truncate max-w-[300px]"},"Member Since"," ",r__namespace.default.createElement(l,{as:"span",variant:["lg:body-lg-semibold","md:body-default-bold","body-xs-bold"]},o))),t&&r__namespace.default.createElement("div",{className:"flex flex-col gap-2 pt-4"},r__namespace.default.createElement(l,{variant:["sm:heading-xs","body-default-bold"],className:"sm:text-left text-center"},"Interests"),r__namespace.default.createElement("div",{className:"flex flex-wrap gap-2 sm:justify-start justify-center items-center"},u.map((f,v)=>r__namespace.default.createElement(K,{key:v},f)),b&&r__namespace.default.createElement(E,{content:t.slice(N).join(", ")},r__namespace.default.createElement(l,{variant:"label-default"},"+",g," more")))),a&&r__namespace.default.createElement("div",{className:"sm:hidden flex justify-between border-t-[1px] border-secondary-50 pt-4"},r__namespace.default.createElement("div",null,r__namespace.default.createElement(l,{as:"label",htmlFor:p,variant:"body-default-semibold"},"Private Mode"),r__namespace.default.createElement("div",{className:"flex items-center gap-1"},r__namespace.default.createElement(l,{variant:"body-default",color:"secondary"},"What is this?"),r__namespace.default.createElement(E,{content:"Turning this on makes you not appear in searches. People who follow you will still be able to view your profile. Go to your settings to make changes to Private Mode."},r__namespace.default.createElement(y,{name:"message-question",color:"secondary",size:16})))),r__namespace.default.createElement(j,{id:p})))))};exports.ProfileCard=Fe;//# sourceMappingURL=ProfileCard.cjs.map
|
|
1
|
+
'use strict';var a=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),icons=require('@deckai/icons'),m=require('@radix-ui/react-tooltip');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 a__namespace=/*#__PURE__*/_interopNamespace(a);var m__namespace=/*#__PURE__*/_interopNamespace(m);function y(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var I={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB",disabled:"#888888",danger:"#FF0000"},D={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},F=e=>{if(!e)return {width:"24px",height:"24px"};let s=Array.isArray(e)?e:[e],n={},o;return s.forEach(t=>{if(typeof t=="number")o=`${t}px`;else {let[r,i]=t.split(":"),p=parseInt(i,10);n[`@media (min-width: ${D[r]})`]=`${p}px`;}}),{width:o||"24px",height:o||"24px",...Object.entries(n).reduce((t,[r,i])=>({...t,[r]:{width:i,height:i}}),{})}},g=a__namespace.default.forwardRef(({name:e,size:s=24,color:n="primary",title:o,className:t,style:r={},...i},p)=>{let f=icons.IconMap[e],c=F(s);return a__namespace.default.createElement("div",{className:y("flex justify-center items-center",t),style:{...c,"--icon-stroke":I[n],...r}},a__namespace.default.createElement(f,{ref:p,"aria-hidden":!o,"aria-label":o,stroke:e.includes("filled")?void 0:I[n],...i}))});g.displayName="Icon";var W={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},q=e=>{let[s,n]=e.split("-");return s==="heading"?W[n]||"p":s==="label"?"label":"p"},Q={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},X=e=>e?(Array.isArray(e)?e:[e]).map(n=>{if(n.includes(":")){let[o,t]=n.split(":");return `${o}:text-${t}`}return `text-${n}`}).join(" "):"text-body-default",l=a__namespace.default.forwardRef(({variant:e="body-default",color:s="primary",as:n,className:o,children:t,weight:r,...i},p)=>{let f=X(e),c=s==="inherit"?"text-inherit":`text-${s}`,b=a__namespace.default.useMemo(()=>{let u=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return q(u)},[e]);return a__namespace.default.createElement(n||b,{ref:p,className:`
|
|
2
|
+
font-sans antialiased
|
|
3
|
+
${f}
|
|
4
|
+
${c}
|
|
5
|
+
${r&&`!${Q[r]}`}
|
|
6
|
+
${o}
|
|
7
|
+
`,...i},t)});l.displayName="Text";var w={pink:"bg-tertiary-5",orange:"bg-tertiary-15",green:"bg-tertiary-25",purple:"bg-secondary-300"},J=e=>{let s=Object.keys(w),n=e.split("").reduce((r,i)=>i.charCodeAt(0)+((r<<5)-r),0),o=Math.abs(n)%s.length,t=s[o];return console.log({input:e,hash:n,variantKeys:s,index:o,selectedVariant:t}),t},$=a__namespace.forwardRef(({className:e,variant:s,iconName:n,children:o,...t},r)=>{let i=s||(typeof o=="string"?J(o):"pink");return a__namespace.createElement("span",{ref:r,className:y("inline-flex items-center gap-2","rounded px-2 py-1.5","text-sm font-medium",w[i],e),...t},n&&a__namespace.createElement(g,{size:16,name:n}),a__namespace.createElement(l,{variant:"body-xxs-semibold",className:"mt-0.5"},o))});$.displayName="Badge";var k=({content:e,children:s,side:n="bottom",align:o="center",className:t,delayDuration:r=200,defaultOpen:i,open:p,onOpenChange:f,longPressDuration:c=500})=>{let[b,v]=a.useState(i||!1),u=null,P=p??b,d=a.useCallback(A=>{p||v(A),f?.(A);},[p,f]),h=a.useCallback(()=>{u=setTimeout(()=>{d(!0);},c);},[d,c]),R=a.useCallback(()=>{u&&(clearTimeout(u),u=null),setTimeout(()=>d(!1),1500);},[u,d]);return a__namespace.createElement(m__namespace.Provider,{delayDuration:r},a__namespace.createElement(m__namespace.Root,{open:P,onOpenChange:d},a__namespace.createElement(m__namespace.Trigger,{asChild:!0},a__namespace.createElement("span",{tabIndex:0,onTouchStart:h,onTouchEnd:R,onTouchCancel:R},s)),a__namespace.createElement(m__namespace.Portal,null,a__namespace.createElement(m__namespace.Content,{side:n,align:o,sideOffset:4,className:y("z-50 overflow-hidden rounded-lg","bg-black px-3 py-1.5","text-xs text-white","animate-in fade-in-0 zoom-in-95","data-[state=closed]:animate-out data-[state=closed]:fade-out-0","data-[side=bottom]:slide-in-from-top-2","data-[side=top]:slide-in-from-bottom-2","select-none","max-w-60","touch-none",t)},e,a__namespace.createElement(m__namespace.Arrow,{className:"fill-text-primary",width:10,height:5})))))};var B="focus-visible:outline-none focus-visible:border-2 focus-visible:border-primary-100";var H=a__namespace.default.forwardRef(({children:e,type:s="button",className:n,disabled:o,...t},r)=>a__namespace.default.createElement("button",{ref:r,type:s,disabled:o,className:y("appearance-none hover:opacity-80 transition-all active:scale-95",B,o&&"opacity-50 cursor-not-allowed",n),...t},e));H.displayName="Pressable";var O=({children:e,color:s="primary",className:n,onClose:o,...t})=>{let[r,i]=a.useState(!1),p=a.useCallback(()=>{i(!0);},[]),f=a.useCallback(()=>{i(!1);},[]),c=a__namespace.default.createElement("div",{className:y("flex gap-2",o?"justify-between items-center":"items-center justify-center","hover:bg-primary-100 rounded bg-secondary-400 px-2 py-1 sm:px-3 sm:py-1.5 h-min hover:text-white",s==="primary"?"text-primary-100":"text-primary",n),onMouseEnter:p,onMouseLeave:f},typeof e=="string"?a__namespace.default.createElement(l,{color:"inherit",variant:["md:body-default-medium","body-xxs-medium"],className:"truncate pt-0.5"},e):e,o&&a__namespace.default.createElement(H,{...t,onClick:o,className:"flex items-center justify-center"},a__namespace.default.createElement(g,{name:"close",size:10,color:r?"white":"primaryBlue"})));return o?c:a__namespace.default.createElement(H,{...t},c)};var E=4,L=3,Oe=({profileImage:e,name:s,location:n,memberSince:o,interests:t,badges:r,isEditMode:i=!1})=>{a.useId();let f=a.useMemo(()=>t?.slice(0,E)||[],[t]),c=a.useMemo(()=>r?.slice(0,L)||[],[r]),b=t&&t.length>E,v=r&&r.length>L,u=t?t.length-E:0,P=r?r.length-L:0;return a__namespace.default.createElement("div",{className:"lg:p-10 md:p-8 p-4 rounded-xl border border-stroke relative flex gap-6 md:flex-row flex-col"},a__namespace.default.createElement("div",{className:"flex md:flex-row flex-col gap-6"},a__namespace.default.createElement("div",{className:"flex flex-col gap-4 md:items-start items-center"},a__namespace.default.createElement("div",{className:"flex items-center justify-center w-[164px] h-[164px]"},a__namespace.default.createElement("img",{src:e,alt:`Profile for ${s}`,className:"object-cover rounded-full w-full h-full"}))),a__namespace.default.createElement("div",{className:"flex flex-col gap-2"},a__namespace.default.createElement(l,{as:"h1",variant:["lg:heading-lg","md:heading-md","heading-sm"],className:"text-wrap text-center md:text-left"},s),r&&a__namespace.default.createElement("div",{className:"flex gap-2 flex-wrap py-2 sm:justify-start justify-center items-center"},c.map((d,h)=>a__namespace.default.createElement($,{key:h,...d})),v&&a__namespace.default.createElement(k,{content:r.slice(L).map(d=>d.children).join(", ")},a__namespace.default.createElement(l,{variant:"label-default"},"+",P," more"))),a__namespace.default.createElement("div",{className:"flex gap-2 items-center sm:justify-start justify-center pt-1"},a__namespace.default.createElement(g,{name:"location",color:"secondary"}),a__namespace.default.createElement(l,{variant:["lg:body-lg","md:body-default","body-xs"],color:"secondary",className:"sm:text-left text-center truncate max-w-[300px]"},n)),a__namespace.default.createElement("div",{className:"flex gap-2 items-center sm:justify-start justify-center"},a__namespace.default.createElement(g,{name:"profile",color:"secondary"}),a__namespace.default.createElement(l,{variant:["lg:body-lg","md:body-default","body-xs"],color:"secondary",className:"sm:text-left text-center truncate max-w-[300px]"},"Member Since"," ",a__namespace.default.createElement(l,{as:"span",variant:["lg:body-lg-semibold","md:body-default-bold","body-xs-bold"]},o))),t&&a__namespace.default.createElement("div",{className:"flex flex-col gap-2 pt-4"},a__namespace.default.createElement(l,{variant:["sm:heading-xs","body-default-bold"],className:"sm:text-left text-center"},"Interests"),a__namespace.default.createElement("div",{className:"flex flex-wrap gap-2 sm:justify-start justify-center items-center"},f.map((d,h)=>a__namespace.default.createElement(O,{key:h},d)),b&&a__namespace.default.createElement(k,{content:t.slice(E).join(", ")},a__namespace.default.createElement(l,{variant:"label-default"},"+",u," more")))))))};exports.ProfileCard=Oe;//# sourceMappingURL=ProfileCard.cjs.map
|
|
2
8
|
//# sourceMappingURL=ProfileCard.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../src/components/Badge.tsx","../../src/components/Tooltip.tsx","../../src/utils/tailwind.ts","../../src/components/Switch.tsx","../../src/components/Pressable.tsx","../../src/components/Tag.tsx","../../src/components/ProfileCard.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","stringToVariant","str","variantKeys","hash","char","index","selectedVariant","Badge","T","iconName","finalVariant","Tooltip","content","side","align","delayDuration","defaultOpen","controlledOpen","onOpenChange","longPressDuration","isOpen","setIsOpen","useState","longPressTimer","open","handleOpenChange","useCallback","newOpen","handleTouchStart","handleTouchEnd","x","c","focusRingStyles","Switch","h","label","description","L","Pressable","type","disabled","Tag","onClose","pressableProps","isHovered","setIsHovered","handleMouseEnter","handleMouseLeave","MAX_INTERESTS","MAX_BADGES","ProfileCard","profileImage","location","memberSince","interests","badges","isEditMode","randomId","useId","visibleInterests","useMemo","visibleBadges","hasMoreInterests","hasMoreBadges","remainingInterests","remainingBadges","badge","idx","b","interest"],"mappings":"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","file":"ProfileCard.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: ResponsiveSize | ResponsiveSize[];\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\",\n disabled: \"#888888\"\n};\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n \"2xl\": \"1536px\"\n};\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n const mediaQueries: Record<string, string> = {};\n let baseSize: string | undefined;\n\n // Process each size\n sizeArray.forEach((size) => {\n if (typeof size === \"number\") {\n baseSize = `${size}px`;\n } else {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n mediaQueries[`@media (min-width: ${BREAKPOINT_MAP[breakpoint]})`] =\n `${value}px`;\n }\n });\n\n // Create the style object with the correct structure\n return {\n width: baseSize || \"24px\",\n height: baseSize || \"24px\",\n ...Object.entries(mediaQueries).reduce(\n (acc, [query, size]) => ({\n ...acc,\n [query]: {\n width: size,\n height: size\n }\n }),\n {}\n )\n };\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const sizeStyles = processSizes(size);\n\n return (\n <div\n className={cn(\"flex justify-center items-center\", className)}\n style={{\n ...sizeStyles,\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import React from \"react\";\nimport { Typography } from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n | \"primary\"\n | \"secondary\"\n | \"white\"\n | \"primary-blue\"\n | \"disabled\"\n | \"danger\"\n | \"inherit\";\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: TextColor;\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color === \"inherit\" ? \"text-inherit\" : `text-text-${color}`;\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import * as React from \"react\";\nimport { IconName } from \"@deckai/icons\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\n\nexport type BadgeProps = {\n variant?: \"pink\" | \"orange\" | \"green\" | \"purple\";\n iconName?: IconName;\n} & React.HTMLAttributes<HTMLSpanElement>;\n\nconst variants = {\n pink: \"bg-tertiary-5\",\n orange: \"bg-tertiary-15\",\n green: \"bg-tertiary-25\",\n purple: \"bg-secondary-300\"\n};\n\nconst stringToVariant = (str: string): keyof typeof variants => {\n const variantKeys = Object.keys(variants) as Array<keyof typeof variants>;\n // Let's log some values to understand what's happening\n const hash = str\n .split(\"\")\n .reduce((acc, char) => char.charCodeAt(0) + ((acc << 5) - acc), 0);\n\n const index = Math.abs(hash) % variantKeys.length;\n const selectedVariant = variantKeys[index];\n\n console.log({\n input: str,\n hash,\n variantKeys,\n index,\n selectedVariant\n });\n\n return selectedVariant;\n};\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n ({ className, variant, iconName, children, ...props }, ref) => {\n const finalVariant =\n variant ||\n (typeof children === \"string\" ? stringToVariant(children) : \"pink\");\n return (\n <span\n ref={ref}\n className={cn(\n \"inline-flex items-center gap-2\",\n \"rounded px-2 py-1.5\",\n \"text-sm font-medium\",\n variants[finalVariant],\n className\n )}\n {...props}\n >\n {iconName && <Icon size={16} name={iconName} />}\n <Text variant=\"body-xxs-semibold\" className=\"mt-0.5\">\n {children}\n </Text>\n </span>\n );\n }\n);\n\nBadge.displayName = \"Badge\";\n","import * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { cn } from \"../utils\";\nimport { useCallback, useState } from \"react\";\n\nexport interface TooltipProps {\n content: React.ReactNode;\n children: React.ReactNode;\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n align?: \"start\" | \"center\" | \"end\";\n className?: string;\n delayDuration?: number;\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n /** Duration in ms for long press on mobile devices */\n longPressDuration?: number;\n}\n\nexport const Tooltip = ({\n content,\n children,\n side = \"bottom\",\n align = \"center\",\n className,\n delayDuration = 200,\n defaultOpen,\n open: controlledOpen,\n onOpenChange,\n longPressDuration = 500\n}: TooltipProps) => {\n const [isOpen, setIsOpen] = useState(defaultOpen || false);\n let longPressTimer: Timer | null = null;\n\n const open = controlledOpen ?? isOpen;\n const handleOpenChange = useCallback(\n (newOpen: boolean) => {\n if (!controlledOpen) {\n setIsOpen(newOpen);\n }\n onOpenChange?.(newOpen);\n },\n [controlledOpen, onOpenChange]\n );\n\n const handleTouchStart = useCallback(() => {\n const timer = setTimeout(() => {\n handleOpenChange(true);\n }, longPressDuration);\n longPressTimer = timer;\n }, [handleOpenChange, longPressDuration]);\n\n const handleTouchEnd = useCallback(() => {\n if (longPressTimer) {\n clearTimeout(longPressTimer);\n longPressTimer = null;\n }\n // Keep tooltip open for a brief moment after touch\n setTimeout(() => handleOpenChange(false), 1500);\n }, [longPressTimer, handleOpenChange]);\n\n return (\n <TooltipPrimitive.Provider delayDuration={delayDuration}>\n <TooltipPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n <TooltipPrimitive.Trigger asChild>\n <span\n tabIndex={0}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onTouchCancel={handleTouchEnd}\n >\n {children}\n </span>\n </TooltipPrimitive.Trigger>\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Content\n side={side}\n align={align}\n sideOffset={4}\n className={cn(\n \"z-50 overflow-hidden rounded-lg\",\n \"bg-black px-3 py-1.5\",\n \"text-xs text-white\",\n \"animate-in fade-in-0 zoom-in-95\",\n \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0\",\n \"data-[side=bottom]:slide-in-from-top-2\",\n \"data-[side=top]:slide-in-from-bottom-2\",\n \"select-none\",\n \"max-w-60\",\n \"touch-none\", // Prevent touch events from interfering with scrolling\n className\n )}\n >\n {content}\n <TooltipPrimitive.Arrow\n className=\"fill-text-primary\"\n width={10}\n height={5}\n />\n </TooltipPrimitive.Content>\n </TooltipPrimitive.Portal>\n </TooltipPrimitive.Root>\n </TooltipPrimitive.Provider>\n );\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 * as React from \"react\";\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type SwitchProps = React.ComponentPropsWithoutRef<\n typeof SwitchPrimitive.Root\n> & {\n label?: string;\n description?: string;\n};\n\nexport const Switch = React.forwardRef<\n React.ElementRef<typeof SwitchPrimitive.Root>,\n SwitchProps\n>(({ className, label, description, ...props }, ref) => (\n <div className=\"flex items-center gap-2\">\n <SwitchPrimitive.Root\n className={cn(\n \"peer inline-flex h-6 w-11 shrink-0 cursor-pointer\",\n \"items-center rounded-full border-2 border-transparent\",\n \"transition-colors focus-visible:outline-none\",\n focusRingStyles,\n \"disabled:cursor-not-allowed disabled:opacity-50\",\n \"data-[state=checked]:bg-primary-50 data-[state=unchecked]:bg-secondary-50\",\n className\n )}\n {...props}\n ref={ref}\n >\n <SwitchPrimitive.Thumb\n className={cn(\n \"pointer-events-none block h-5 w-5\",\n \"rounded-full bg-white shadow-lg ring-0\",\n \"transition-transform\",\n \"data-[state=checked]:translate-x-5\",\n \"data-[state=unchecked]:translate-x-0\"\n )}\n />\n </SwitchPrimitive.Root>\n {(label || description) && (\n <div className=\"flex flex-col\">\n {label && (\n <label className=\"text-sm font-medium text-text\" htmlFor={props.id}>\n {label}\n </label>\n )}\n {description && (\n <span className=\"text-xs text-text-secondary\">{description}</span>\n )}\n </div>\n )}\n </div>\n));\n\nSwitch.displayName = \"Switch\";\n","import React, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable = React.forwardRef<HTMLButtonElement, PressableProps>(\n ({ children, type = \"button\", className, disabled, ...props }, ref) => (\n <button\n ref={ref}\n type={type}\n disabled={disabled}\n className={cn(\n \"appearance-none hover:opacity-80 transition-all active:scale-95\",\n focusRingStyles,\n disabled && \"opacity-50 cursor-not-allowed\",\n className\n )}\n {...props}\n >\n {children}\n </button>\n )\n);\n\nPressable.displayName = \"Pressable\";\n","import React, { useState, useCallback, HTMLAttributes } from \"react\";\nimport { Text } from \"./Text\";\nimport { Pressable, PressableProps } from \"./Pressable\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\n\nexport type TagProps = {\n children: React.ReactNode;\n padded?: boolean;\n color?: \"primary\" | \"text\";\n onClose?: () => void;\n} & HTMLAttributes<HTMLDivElement> &\n PressableProps;\n\nexport const Tag = ({\n children,\n color = \"primary\",\n className,\n onClose,\n ...pressableProps\n}: TagProps) => {\n const [isHovered, setIsHovered] = useState(false);\n\n const handleMouseEnter = useCallback(() => {\n setIsHovered(true);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setIsHovered(false);\n }, []);\n\n const content = (\n <div\n className={cn(\n \"flex gap-2\",\n onClose\n ? \"justify-between items-center\"\n : \"items-center justify-center\",\n \"hover:bg-primary-100 rounded bg-secondary-400 px-2 py-1 sm:px-3 sm:py-1.5 h-min hover:text-white\",\n color === \"primary\" ? \"text-primary-100\" : \"text-text\",\n className\n )}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n {typeof children === \"string\" ? (\n <Text\n color=\"inherit\"\n variant={[\"md:body-default-medium\", \"body-xxs-medium\"]}\n className=\"truncate pt-0.5\"\n >\n {children}\n </Text>\n ) : (\n children\n )}\n {onClose && (\n <Pressable\n {...pressableProps}\n onClick={onClose}\n className=\"flex items-center justify-center\"\n >\n <Icon\n name=\"close\"\n size={10}\n color={isHovered ? \"white\" : \"primaryBlue\"}\n />\n </Pressable>\n )}\n </div>\n );\n\n return onClose ? (\n content\n ) : (\n <Pressable {...pressableProps}>{content}</Pressable>\n );\n};\n","import React, { useId, useMemo } from \"react\";\nimport { Badge, BadgeProps } from \"./Badge\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\nimport { Tooltip } from \"./Tooltip\";\nimport { Switch } from \"./Switch\";\nimport { Tag } from \"./Tag\";\n\nexport type ProfileCardProps = {\n profileImage: string;\n name: string;\n location: string;\n memberSince?: string;\n interests?: string[];\n badges?: BadgeProps[];\n isEditMode?: boolean;\n onEditClick?: () => void;\n};\n\nconst MAX_INTERESTS = 4;\nconst MAX_BADGES = 3;\n\nexport const ProfileCard = ({\n profileImage,\n name,\n location,\n memberSince,\n interests,\n badges,\n isEditMode = false\n}: ProfileCardProps) => {\n const randomId = useId();\n\n const visibleInterests = useMemo(\n () => interests?.slice(0, MAX_INTERESTS) || [],\n [interests]\n );\n\n const visibleBadges = useMemo(\n () => badges?.slice(0, MAX_BADGES) || [],\n [badges]\n );\n\n const hasMoreInterests = interests && interests.length > MAX_INTERESTS;\n const hasMoreBadges = badges && badges.length > MAX_BADGES;\n const remainingInterests = interests ? interests.length - MAX_INTERESTS : 0;\n const remainingBadges = badges ? badges.length - MAX_BADGES : 0;\n\n return (\n <div className=\"lg:p-10 md:p-8 p-4 rounded-xl border border-stroke relative flex gap-6 md:flex-row flex-col\">\n <div className=\"flex md:flex-row flex-col gap-6\">\n <div className=\"flex flex-col gap-4 md:items-start items-center\">\n <div className=\"flex items-center justify-center w-[164px] h-[164px]\">\n <img\n src={profileImage}\n alt={`Profile for ${name}`}\n className=\"object-cover rounded-full w-full h-full\"\n />\n </div>\n </div>\n <div className=\"flex flex-col gap-2\">\n <Text\n as=\"h1\"\n variant={[\"lg:heading-lg\", \"md:heading-md\", \"heading-sm\"]}\n className=\"text-wrap text-center md:text-left\"\n >\n {name}\n </Text>\n {badges && (\n <div className=\"flex gap-2 flex-wrap py-2 sm:justify-start justify-center items-center\">\n {visibleBadges.map((badge, idx) => (\n <Badge key={idx} {...badge} />\n ))}\n {hasMoreBadges && (\n <Tooltip\n content={badges\n .slice(MAX_BADGES)\n .map((b) => b.children)\n .join(\", \")}\n >\n <Text variant=\"label-default\">+{remainingBadges} more</Text>\n </Tooltip>\n )}\n </div>\n )}\n <div className=\"flex gap-2 items-center sm:justify-start justify-center pt-1\">\n <Icon name=\"location\" color=\"secondary\" />\n <Text\n variant={[\"lg:body-lg\", \"md:body-default\", \"body-xs\"]}\n color=\"secondary\"\n className=\"sm:text-left text-center truncate max-w-[300px]\"\n >\n {location}\n </Text>\n </div>\n <div className=\"flex gap-2 items-center sm:justify-start justify-center\">\n <Icon name=\"profile\" color=\"secondary\" />\n <Text\n variant={[\"lg:body-lg\", \"md:body-default\", \"body-xs\"]}\n color=\"secondary\"\n className=\"sm:text-left text-center truncate max-w-[300px]\"\n >\n Member Since{\" \"}\n <Text\n as=\"span\"\n variant={[\n \"lg:body-lg-semibold\",\n \"md:body-default-bold\",\n \"body-xs-bold\"\n ]}\n >\n {memberSince}\n </Text>\n </Text>\n </div>\n {interests && (\n <div className=\"flex flex-col gap-2 pt-4\">\n <Text\n variant={[\"sm:heading-xs\", \"body-default-bold\"]}\n className=\"sm:text-left text-center\"\n >\n Interests\n </Text>\n <div className=\"flex flex-wrap gap-2 sm:justify-start justify-center items-center\">\n {visibleInterests.map((interest, idx) => (\n <Tag key={idx}>{interest}</Tag>\n ))}\n {hasMoreInterests && (\n <Tooltip content={interests.slice(MAX_INTERESTS).join(\", \")}>\n <Text variant=\"label-default\">\n +{remainingInterests} more\n </Text>\n </Tooltip>\n )}\n </div>\n </div>\n )}\n\n {/* mobile only */}\n {isEditMode && (\n <div className=\"sm:hidden flex justify-between border-t-[1px] border-secondary-50 pt-4\">\n <div>\n <Text\n as=\"label\"\n htmlFor={randomId}\n variant=\"body-default-semibold\"\n >\n Private Mode\n </Text>\n <div className=\"flex items-center gap-1\">\n <Text variant=\"body-default\" color=\"secondary\">\n What is this?\n </Text>\n <Tooltip content=\"Turning this on makes you not appear in searches. People who follow you will still be able to view your profile. Go to your settings to make changes to Private Mode.\">\n <Icon name=\"message-question\" color=\"secondary\" size={16} />\n </Tooltip>\n </div>\n </div>\n <Switch id={randomId} />\n </div>\n )}\n </div>\n </div>\n </div>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../src/components/Badge.tsx","../../src/components/Tooltip.tsx","../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/components/Tag.tsx","../../src/components/ProfileCard.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","stringToVariant","str","variantKeys","hash","char","index","selectedVariant","Badge","x","iconName","finalVariant","Tooltip","content","side","align","delayDuration","defaultOpen","controlledOpen","onOpenChange","longPressDuration","isOpen","setIsOpen","useState","longPressTimer","open","handleOpenChange","useCallback","newOpen","handleTouchStart","handleTouchEnd","T","m","focusRingStyles","Pressable","type","disabled","Tag","onClose","pressableProps","isHovered","setIsHovered","handleMouseEnter","handleMouseLeave","MAX_INTERESTS","MAX_BADGES","ProfileCard","profileImage","location","memberSince","interests","badges","isEditMode","useId","visibleInterests","useMemo","visibleBadges","hasMoreInterests","hasMoreBadges","remainingInterests","remainingBadges","badge","idx","b","interest"],"mappings":"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","file":"ProfileCard.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: ResponsiveSize | ResponsiveSize[];\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\",\n disabled: \"#888888\",\n danger: \"#FF0000\"\n};\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n \"2xl\": \"1536px\"\n};\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n const mediaQueries: Record<string, string> = {};\n let baseSize: string | undefined;\n\n // Process each size\n sizeArray.forEach((size) => {\n if (typeof size === \"number\") {\n baseSize = `${size}px`;\n } else {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n mediaQueries[`@media (min-width: ${BREAKPOINT_MAP[breakpoint]})`] =\n `${value}px`;\n }\n });\n\n // Create the style object with the correct structure\n return {\n width: baseSize || \"24px\",\n height: baseSize || \"24px\",\n ...Object.entries(mediaQueries).reduce(\n (acc, [query, size]) => ({\n ...acc,\n [query]: {\n width: size,\n height: size\n }\n }),\n {}\n )\n };\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const sizeStyles = processSizes(size);\n\n return (\n <div\n className={cn(\"flex justify-center items-center\", className)}\n style={{\n ...sizeStyles,\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import React from \"react\";\nimport { Typography } from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n | \"primary\"\n | \"secondary\"\n | \"white\"\n | \"primary-blue\"\n | \"disabled\"\n | \"danger\"\n | \"inherit\"\n | \"primary-100\";\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: TextColor;\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses = color === \"inherit\" ? \"text-inherit\" : `text-${color}`;\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`\n font-sans antialiased\n ${typographyClasses}\n ${colorClasses}\n ${weight && `!${fontWeight[weight]}`}\n ${className}\n `}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import * as React from \"react\";\nimport { IconName } from \"@deckai/icons\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\n\nexport type BadgeProps = {\n variant?: \"pink\" | \"orange\" | \"green\" | \"purple\";\n iconName?: IconName;\n} & React.HTMLAttributes<HTMLSpanElement>;\n\nconst variants = {\n pink: \"bg-tertiary-5\",\n orange: \"bg-tertiary-15\",\n green: \"bg-tertiary-25\",\n purple: \"bg-secondary-300\"\n};\n\nconst stringToVariant = (str: string): keyof typeof variants => {\n const variantKeys = Object.keys(variants) as Array<keyof typeof variants>;\n // Let's log some values to understand what's happening\n const hash = str\n .split(\"\")\n .reduce((acc, char) => char.charCodeAt(0) + ((acc << 5) - acc), 0);\n\n const index = Math.abs(hash) % variantKeys.length;\n const selectedVariant = variantKeys[index];\n\n console.log({\n input: str,\n hash,\n variantKeys,\n index,\n selectedVariant\n });\n\n return selectedVariant;\n};\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n ({ className, variant, iconName, children, ...props }, ref) => {\n const finalVariant =\n variant ||\n (typeof children === \"string\" ? stringToVariant(children) : \"pink\");\n return (\n <span\n ref={ref}\n className={cn(\n \"inline-flex items-center gap-2\",\n \"rounded px-2 py-1.5\",\n \"text-sm font-medium\",\n variants[finalVariant],\n className\n )}\n {...props}\n >\n {iconName && <Icon size={16} name={iconName} />}\n <Text variant=\"body-xxs-semibold\" className=\"mt-0.5\">\n {children}\n </Text>\n </span>\n );\n }\n);\n\nBadge.displayName = \"Badge\";\n","import * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { cn } from \"../utils\";\nimport { useCallback, useState } from \"react\";\n\nexport interface TooltipProps {\n content: React.ReactNode;\n children: React.ReactNode;\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n align?: \"start\" | \"center\" | \"end\";\n className?: string;\n delayDuration?: number;\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n /** Duration in ms for long press on mobile devices */\n longPressDuration?: number;\n}\n\nexport const Tooltip = ({\n content,\n children,\n side = \"bottom\",\n align = \"center\",\n className,\n delayDuration = 200,\n defaultOpen,\n open: controlledOpen,\n onOpenChange,\n longPressDuration = 500\n}: TooltipProps) => {\n const [isOpen, setIsOpen] = useState(defaultOpen || false);\n let longPressTimer: Timer | null = null;\n\n const open = controlledOpen ?? isOpen;\n const handleOpenChange = useCallback(\n (newOpen: boolean) => {\n if (!controlledOpen) {\n setIsOpen(newOpen);\n }\n onOpenChange?.(newOpen);\n },\n [controlledOpen, onOpenChange]\n );\n\n const handleTouchStart = useCallback(() => {\n const timer = setTimeout(() => {\n handleOpenChange(true);\n }, longPressDuration);\n longPressTimer = timer;\n }, [handleOpenChange, longPressDuration]);\n\n const handleTouchEnd = useCallback(() => {\n if (longPressTimer) {\n clearTimeout(longPressTimer);\n longPressTimer = null;\n }\n // Keep tooltip open for a brief moment after touch\n setTimeout(() => handleOpenChange(false), 1500);\n }, [longPressTimer, handleOpenChange]);\n\n return (\n <TooltipPrimitive.Provider delayDuration={delayDuration}>\n <TooltipPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n <TooltipPrimitive.Trigger asChild>\n <span\n tabIndex={0}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onTouchCancel={handleTouchEnd}\n >\n {children}\n </span>\n </TooltipPrimitive.Trigger>\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Content\n side={side}\n align={align}\n sideOffset={4}\n className={cn(\n \"z-50 overflow-hidden rounded-lg\",\n \"bg-black px-3 py-1.5\",\n \"text-xs text-white\",\n \"animate-in fade-in-0 zoom-in-95\",\n \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0\",\n \"data-[side=bottom]:slide-in-from-top-2\",\n \"data-[side=top]:slide-in-from-bottom-2\",\n \"select-none\",\n \"max-w-60\",\n \"touch-none\", // Prevent touch events from interfering with scrolling\n className\n )}\n >\n {content}\n <TooltipPrimitive.Arrow\n className=\"fill-text-primary\"\n width={10}\n height={5}\n />\n </TooltipPrimitive.Content>\n </TooltipPrimitive.Portal>\n </TooltipPrimitive.Root>\n </TooltipPrimitive.Provider>\n );\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:border-2 focus-visible:border-primary-100\";\n\nexport const focusRingStylesCoerced = \"border-2 border-primary-100\";\n","import React, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable = React.forwardRef<HTMLButtonElement, PressableProps>(\n ({ children, type = \"button\", className, disabled, ...props }, ref) => (\n <button\n ref={ref}\n type={type}\n disabled={disabled}\n className={cn(\n \"appearance-none hover:opacity-80 transition-all active:scale-95\",\n focusRingStyles,\n disabled && \"opacity-50 cursor-not-allowed\",\n className\n )}\n {...props}\n >\n {children}\n </button>\n )\n);\n\nPressable.displayName = \"Pressable\";\n","import React, { useState, useCallback, HTMLAttributes } from \"react\";\nimport { Text } from \"./Text\";\nimport { Pressable, PressableProps } from \"./Pressable\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\n\nexport type TagProps = {\n children: React.ReactNode;\n padded?: boolean;\n color?: \"primary\" | \"text\";\n onClose?: () => void;\n} & HTMLAttributes<HTMLDivElement> &\n PressableProps;\n\nexport const Tag = ({\n children,\n color = \"primary\",\n className,\n onClose,\n ...pressableProps\n}: TagProps) => {\n const [isHovered, setIsHovered] = useState(false);\n\n const handleMouseEnter = useCallback(() => {\n setIsHovered(true);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setIsHovered(false);\n }, []);\n\n const content = (\n <div\n className={cn(\n \"flex gap-2\",\n onClose\n ? \"justify-between items-center\"\n : \"items-center justify-center\",\n \"hover:bg-primary-100 rounded bg-secondary-400 px-2 py-1 sm:px-3 sm:py-1.5 h-min hover:text-white\",\n color === \"primary\" ? \"text-primary-100\" : \"text-primary\",\n className\n )}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n {typeof children === \"string\" ? (\n <Text\n color=\"inherit\"\n variant={[\"md:body-default-medium\", \"body-xxs-medium\"]}\n className=\"truncate pt-0.5\"\n >\n {children}\n </Text>\n ) : (\n children\n )}\n {onClose && (\n <Pressable\n {...pressableProps}\n onClick={onClose}\n className=\"flex items-center justify-center\"\n >\n <Icon\n name=\"close\"\n size={10}\n color={isHovered ? \"white\" : \"primaryBlue\"}\n />\n </Pressable>\n )}\n </div>\n );\n\n return onClose ? (\n content\n ) : (\n <Pressable {...pressableProps}>{content}</Pressable>\n );\n};\n","import React, { useId, useMemo } from \"react\";\nimport { Badge, BadgeProps } from \"./Badge\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\nimport { Tooltip } from \"./Tooltip\";\nimport { Tag } from \"./Tag\";\n\nexport type ProfileCardProps = {\n profileImage: string;\n name: string;\n location: string;\n memberSince?: string;\n interests?: string[];\n badges?: BadgeProps[];\n isEditMode?: boolean;\n onEditClick?: () => void;\n};\n\nconst MAX_INTERESTS = 4;\nconst MAX_BADGES = 3;\n\nexport const ProfileCard = ({\n profileImage,\n name,\n location,\n memberSince,\n interests,\n badges,\n isEditMode = false\n}: ProfileCardProps) => {\n const randomId = useId();\n\n const visibleInterests = useMemo(\n () => interests?.slice(0, MAX_INTERESTS) || [],\n [interests]\n );\n\n const visibleBadges = useMemo(\n () => badges?.slice(0, MAX_BADGES) || [],\n [badges]\n );\n\n const hasMoreInterests = interests && interests.length > MAX_INTERESTS;\n const hasMoreBadges = badges && badges.length > MAX_BADGES;\n const remainingInterests = interests ? interests.length - MAX_INTERESTS : 0;\n const remainingBadges = badges ? badges.length - MAX_BADGES : 0;\n\n return (\n <div className=\"lg:p-10 md:p-8 p-4 rounded-xl border border-stroke relative flex gap-6 md:flex-row flex-col\">\n <div className=\"flex md:flex-row flex-col gap-6\">\n <div className=\"flex flex-col gap-4 md:items-start items-center\">\n <div className=\"flex items-center justify-center w-[164px] h-[164px]\">\n <img\n src={profileImage}\n alt={`Profile for ${name}`}\n className=\"object-cover rounded-full w-full h-full\"\n />\n </div>\n </div>\n <div className=\"flex flex-col gap-2\">\n <Text\n as=\"h1\"\n variant={[\"lg:heading-lg\", \"md:heading-md\", \"heading-sm\"]}\n className=\"text-wrap text-center md:text-left\"\n >\n {name}\n </Text>\n {badges && (\n <div className=\"flex gap-2 flex-wrap py-2 sm:justify-start justify-center items-center\">\n {visibleBadges.map((badge, idx) => (\n <Badge key={idx} {...badge} />\n ))}\n {hasMoreBadges && (\n <Tooltip\n content={badges\n .slice(MAX_BADGES)\n .map((b) => b.children)\n .join(\", \")}\n >\n <Text variant=\"label-default\">+{remainingBadges} more</Text>\n </Tooltip>\n )}\n </div>\n )}\n <div className=\"flex gap-2 items-center sm:justify-start justify-center pt-1\">\n <Icon name=\"location\" color=\"secondary\" />\n <Text\n variant={[\"lg:body-lg\", \"md:body-default\", \"body-xs\"]}\n color=\"secondary\"\n className=\"sm:text-left text-center truncate max-w-[300px]\"\n >\n {location}\n </Text>\n </div>\n <div className=\"flex gap-2 items-center sm:justify-start justify-center\">\n <Icon name=\"profile\" color=\"secondary\" />\n <Text\n variant={[\"lg:body-lg\", \"md:body-default\", \"body-xs\"]}\n color=\"secondary\"\n className=\"sm:text-left text-center truncate max-w-[300px]\"\n >\n Member Since{\" \"}\n <Text\n as=\"span\"\n variant={[\n \"lg:body-lg-semibold\",\n \"md:body-default-bold\",\n \"body-xs-bold\"\n ]}\n >\n {memberSince}\n </Text>\n </Text>\n </div>\n {interests && (\n <div className=\"flex flex-col gap-2 pt-4\">\n <Text\n variant={[\"sm:heading-xs\", \"body-default-bold\"]}\n className=\"sm:text-left text-center\"\n >\n Interests\n </Text>\n <div className=\"flex flex-wrap gap-2 sm:justify-start justify-center items-center\">\n {visibleInterests.map((interest, idx) => (\n <Tag key={idx}>{interest}</Tag>\n ))}\n {hasMoreInterests && (\n <Tooltip content={interests.slice(MAX_INTERESTS).join(\", \")}>\n <Text variant=\"label-default\">\n +{remainingInterests} more\n </Text>\n </Tooltip>\n )}\n </div>\n </div>\n )}\n </div>\n </div>\n </div>\n );\n};\n"]}
|