@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/components/Text.tsx","../../src/utils/tailwind.ts","../../src/utils/index.ts","../../src/components/Button.tsx"],"names":["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","cn","inputs","twMerge","clsx","filled","outlined","Button","a","isLoading","disabled","end"],"mappings":"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","file":"Button.cjs","sourcesContent":["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 { 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 * as React from \"react\";\nimport { Text } from \"./Text\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type ButtonProps = {\n /** @default filled */\n variant?: \"filled\" | \"outlined\";\n /** @default primary */\n color?: \"black\" | \"accent\" | \"secondary\";\n isLoading?: boolean;\n children: React.ReactNode;\n className?: string;\n disabled?: boolean;\n start?: React.ReactNode;\n end?: React.ReactNode;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const filled = {\n black: \"bg-text-text text-white\",\n // fade it slightly\n accent: \"bg-primary-100 text-white\",\n secondary: \"bg-secondary-100 text-secondary\"\n};\n\nexport const outlined = {\n black: \"border border-text text-text\",\n accent: \"border border-primary-100 text-primary-100\",\n secondary: \"border border-text-secondary text-secondary\"\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant = \"filled\",\n color = \"black\",\n isLoading = false,\n children,\n disabled,\n end,\n ...props\n },\n ref\n ) => (\n <button\n ref={ref}\n className={cn(\n `\n sm:px-7 px-4\n py-2\n inline-flex items-center justify-center\n rounded-lg \n transition-colors duration-200\n disabled:opacity-50 disabled:pointer-events-none\n hover:opacity-80 active:scale-95 \n truncate`,\n focusRingStyles,\n variant === \"filled\" ? filled[color] : outlined[color],\n className\n )}\n disabled={disabled || isLoading}\n type=\"button\"\n {...props}\n >\n {typeof children === \"string\" ? (\n <Text\n variant={[\"sm:body-default-bold\", \"body-xxs-semibold\"]}\n color=\"inherit\"\n >\n {children}\n </Text>\n ) : (\n children\n )}\n {end}\n </button>\n )\n);\n\nButton.displayName = \"Button\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/Text.tsx","../../src/utils/tailwind.ts","../../src/utils/index.ts","../../src/components/Button.tsx"],"names":["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","cn","inputs","twMerge","clsx","filled","outlined","Button","a","isLoading","disabled","end"],"mappings":"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","file":"Button.cjs","sourcesContent":["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 { 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 * as React from \"react\";\nimport { Text } from \"./Text\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type ButtonProps = {\n /** @default filled */\n variant?: \"filled\" | \"outlined\" | \"transparent\";\n /** @default primary */\n color?: \"black\" | \"accent\" | \"secondary\";\n isLoading?: boolean;\n children: React.ReactNode;\n className?: string;\n disabled?: boolean;\n start?: React.ReactNode;\n end?: React.ReactNode;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const filled = {\n black: \"bg-primary text-white\",\n // fade it slightly\n accent: \"bg-primary-100 text-white\",\n secondary: \"bg-secondary-100 text-secondary\"\n};\n\nexport const outlined = {\n black: \"border border-text text-primary\",\n accent: \"border border-primary-100 text-primary-100\",\n secondary: \"border border-text-secondary text-secondary\"\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant = \"filled\",\n color = \"black\",\n isLoading = false,\n children,\n disabled,\n end,\n ...props\n },\n ref\n ) => (\n <button\n ref={ref}\n className={cn(\n `\n sm:px-7 px-4\n py-2\n inline-flex items-center justify-center\n rounded-lg \n transition-colors duration-200\n disabled:opacity-50 disabled:pointer-events-none\n hover:opacity-80 active:scale-95 \n truncate`,\n focusRingStyles,\n variant === \"filled\"\n ? filled[color]\n : variant === \"transparent\"\n ? \"bg-transparent text-text\"\n : outlined[color],\n className\n )}\n disabled={disabled || isLoading}\n type=\"button\"\n {...props}\n >\n {typeof children === \"string\" ? (\n <Text\n variant={[\"sm:body-default-bold\", \"body-xxs-semibold\"]}\n color=\"inherit\"\n >\n {children}\n </Text>\n ) : (\n children\n )}\n {end}\n </button>\n )\n);\n\nButton.displayName = \"Button\";\n"]}
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
|
|
3
3
|
type ButtonProps = {
|
|
4
4
|
/** @default filled */
|
|
5
|
-
variant?: "filled" | "outlined";
|
|
5
|
+
variant?: "filled" | "outlined" | "transparent";
|
|
6
6
|
/** @default primary */
|
|
7
7
|
color?: "black" | "accent" | "secondary";
|
|
8
8
|
isLoading?: boolean;
|
|
@@ -24,7 +24,7 @@ declare const outlined: {
|
|
|
24
24
|
};
|
|
25
25
|
declare const Button: React.ForwardRefExoticComponent<{
|
|
26
26
|
/** @default filled */
|
|
27
|
-
variant?: "filled" | "outlined";
|
|
27
|
+
variant?: "filled" | "outlined" | "transparent";
|
|
28
28
|
/** @default primary */
|
|
29
29
|
color?: "black" | "accent" | "secondary";
|
|
30
30
|
isLoading?: boolean;
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
|
|
3
3
|
type ButtonProps = {
|
|
4
4
|
/** @default filled */
|
|
5
|
-
variant?: "filled" | "outlined";
|
|
5
|
+
variant?: "filled" | "outlined" | "transparent";
|
|
6
6
|
/** @default primary */
|
|
7
7
|
color?: "black" | "accent" | "secondary";
|
|
8
8
|
isLoading?: boolean;
|
|
@@ -24,7 +24,7 @@ declare const outlined: {
|
|
|
24
24
|
};
|
|
25
25
|
declare const Button: React.ForwardRefExoticComponent<{
|
|
26
26
|
/** @default filled */
|
|
27
|
-
variant?: "filled" | "outlined";
|
|
27
|
+
variant?: "filled" | "outlined" | "transparent";
|
|
28
28
|
/** @default primary */
|
|
29
29
|
color?: "black" | "accent" | "secondary";
|
|
30
30
|
isLoading?: boolean;
|
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
import*as c from'react';import c__default from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';var u={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},h=e=>{let[r,t]=e.split("-");return r==="heading"?u[t]||"p":r==="label"?"label":"p"},
|
|
1
|
+
import*as c from'react';import c__default from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';var u={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},h=e=>{let[r,t]=e.split("-");return r==="heading"?u[t]||"p":r==="label"?"label":"p"},H={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},f=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[n,o]=t.split(":");return `${n}:text-${o}`}return `text-${t}`}).join(" "):"text-body-default",y=c__default.forwardRef(({variant:e="body-default",color:r="primary",as:t,className:n,children:o,weight:s,...i},l)=>{let p=f(e),T=r==="inherit"?"text-inherit":`text-${r}`,b=c__default.useMemo(()=>{let g=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return h(g)},[e]);return c__default.createElement(t||b,{ref:l,className:`
|
|
2
|
+
font-sans antialiased
|
|
3
|
+
${p}
|
|
4
|
+
${T}
|
|
5
|
+
${s&&`!${H[s]}`}
|
|
6
|
+
${n}
|
|
7
|
+
`,...i},o)});y.displayName="Text";var d="focus-visible:outline-none focus-visible:border-2 focus-visible:border-primary-100";function m(...e){return twMerge(clsx(e))}var x={black:"bg-primary text-white",accent:"bg-primary-100 text-white",secondary:"bg-secondary-100 text-secondary"},E={black:"border border-text text-primary",accent:"border border-primary-100 text-primary-100",secondary:"border border-text-secondary text-secondary"},R=c.forwardRef(({className:e,variant:r="filled",color:t="black",isLoading:n=!1,children:o,disabled:s,end:i,...l},p)=>c.createElement("button",{ref:p,className:m(`
|
|
2
8
|
sm:px-7 px-4
|
|
3
9
|
py-2
|
|
4
10
|
inline-flex items-center justify-center
|
|
@@ -6,5 +12,5 @@ import*as c from'react';import c__default from'react';import {clsx}from'clsx';im
|
|
|
6
12
|
transition-colors duration-200
|
|
7
13
|
disabled:opacity-50 disabled:pointer-events-none
|
|
8
14
|
hover:opacity-80 active:scale-95
|
|
9
|
-
truncate`,
|
|
15
|
+
truncate`,d,r==="filled"?x[t]:r==="transparent"?"bg-transparent text-text":E[t],e),disabled:s||n,type:"button",...l},typeof o=="string"?c.createElement(y,{variant:["sm:body-default-bold","body-xxs-semibold"],color:"inherit"},o):o,i));R.displayName="Button";export{R as Button,x as filled,E as outlined};//# sourceMappingURL=Button.js.map
|
|
10
16
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Text.tsx","../../src/utils/tailwind.ts","../../src/utils/index.ts","../../src/components/Button.tsx"],"names":["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","cn","inputs","twMerge","clsx","filled","outlined","Button","a","isLoading","disabled","end"],"mappings":"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","file":"Button.js","sourcesContent":["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 { 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 * as React from \"react\";\nimport { Text } from \"./Text\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type ButtonProps = {\n /** @default filled */\n variant?: \"filled\" | \"outlined\";\n /** @default primary */\n color?: \"black\" | \"accent\" | \"secondary\";\n isLoading?: boolean;\n children: React.ReactNode;\n className?: string;\n disabled?: boolean;\n start?: React.ReactNode;\n end?: React.ReactNode;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const filled = {\n black: \"bg-text-text text-white\",\n // fade it slightly\n accent: \"bg-primary-100 text-white\",\n secondary: \"bg-secondary-100 text-secondary\"\n};\n\nexport const outlined = {\n black: \"border border-text text-text\",\n accent: \"border border-primary-100 text-primary-100\",\n secondary: \"border border-text-secondary text-secondary\"\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant = \"filled\",\n color = \"black\",\n isLoading = false,\n children,\n disabled,\n end,\n ...props\n },\n ref\n ) => (\n <button\n ref={ref}\n className={cn(\n `\n sm:px-7 px-4\n py-2\n inline-flex items-center justify-center\n rounded-lg \n transition-colors duration-200\n disabled:opacity-50 disabled:pointer-events-none\n hover:opacity-80 active:scale-95 \n truncate`,\n focusRingStyles,\n variant === \"filled\" ? filled[color] : outlined[color],\n className\n )}\n disabled={disabled || isLoading}\n type=\"button\"\n {...props}\n >\n {typeof children === \"string\" ? (\n <Text\n variant={[\"sm:body-default-bold\", \"body-xxs-semibold\"]}\n color=\"inherit\"\n >\n {children}\n </Text>\n ) : (\n children\n )}\n {end}\n </button>\n )\n);\n\nButton.displayName = \"Button\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/Text.tsx","../../src/utils/tailwind.ts","../../src/utils/index.ts","../../src/components/Button.tsx"],"names":["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","cn","inputs","twMerge","clsx","filled","outlined","Button","a","isLoading","disabled","end"],"mappings":"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","file":"Button.js","sourcesContent":["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 { 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 * as React from \"react\";\nimport { Text } from \"./Text\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type ButtonProps = {\n /** @default filled */\n variant?: \"filled\" | \"outlined\" | \"transparent\";\n /** @default primary */\n color?: \"black\" | \"accent\" | \"secondary\";\n isLoading?: boolean;\n children: React.ReactNode;\n className?: string;\n disabled?: boolean;\n start?: React.ReactNode;\n end?: React.ReactNode;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const filled = {\n black: \"bg-primary text-white\",\n // fade it slightly\n accent: \"bg-primary-100 text-white\",\n secondary: \"bg-secondary-100 text-secondary\"\n};\n\nexport const outlined = {\n black: \"border border-text text-primary\",\n accent: \"border border-primary-100 text-primary-100\",\n secondary: \"border border-text-secondary text-secondary\"\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant = \"filled\",\n color = \"black\",\n isLoading = false,\n children,\n disabled,\n end,\n ...props\n },\n ref\n ) => (\n <button\n ref={ref}\n className={cn(\n `\n sm:px-7 px-4\n py-2\n inline-flex items-center justify-center\n rounded-lg \n transition-colors duration-200\n disabled:opacity-50 disabled:pointer-events-none\n hover:opacity-80 active:scale-95 \n truncate`,\n focusRingStyles,\n variant === \"filled\"\n ? filled[color]\n : variant === \"transparent\"\n ? \"bg-transparent text-text\"\n : outlined[color],\n className\n )}\n disabled={disabled || isLoading}\n type=\"button\"\n {...props}\n >\n {typeof children === \"string\" ? (\n <Text\n variant={[\"sm:body-default-bold\", \"body-xxs-semibold\"]}\n color=\"inherit\"\n >\n {children}\n </Text>\n ) : (\n children\n )}\n {end}\n </button>\n )\n);\n\nButton.displayName = \"Button\";\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var
|
|
1
|
+
'use strict';var s=require('react'),x=require('@radix-ui/react-scroll-area'),icons=require('@deckai/icons'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}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 s__default=/*#__PURE__*/_interopDefault(s);var x__namespace=/*#__PURE__*/_interopNamespace(x);function g(...o){return tailwindMerge.twMerge(clsx.clsx(o))}var R={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB",disabled:"#888888",danger:"#FF0000"},F={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},_=o=>{if(!o)return {width:"24px",height:"24px"};let u=Array.isArray(o)?o:[o],i={},t;return u.forEach(n=>{if(typeof n=="number")t=`${n}px`;else {let[l,f]=n.split(":"),h=parseInt(f,10);i[`@media (min-width: ${F[l]})`]=`${h}px`;}}),{width:t||"24px",height:t||"24px",...Object.entries(i).reduce((n,[l,f])=>({...n,[l]:{width:f,height:f}}),{})}},S=s__default.default.forwardRef(({name:o,size:u=24,color:i="primary",title:t,className:n,style:l={},...f},h)=>{let E=icons.IconMap[o],b=_(u);return s__default.default.createElement("div",{className:g("flex justify-center items-center",n),style:{...b,"--icon-stroke":R[i],...l}},s__default.default.createElement(E,{ref:h,"aria-hidden":!t,"aria-label":t,stroke:o.includes("filled")?void 0:R[i],...f}))});S.displayName="Icon";var A="focus-visible:outline-none focus-visible:border-2 focus-visible:border-primary-100";var w=s__default.default.forwardRef(({children:o,type:u="button",className:i,disabled:t,...n},l)=>s__default.default.createElement("button",{ref:l,type:u,disabled:t,className:g("appearance-none hover:opacity-80 transition-all active:scale-95",A,t&&"opacity-50 cursor-not-allowed",i),...n},o));w.displayName="Pressable";var U=typeof window<"u"?s.useEffect:()=>{},N=o=>{let[u,i]=s.useState(null),t=s.useCallback(n=>typeof window<"u"?window.matchMedia(n).matches:!1,[]);return U(()=>{i(t(o));},[o,t]),s.useEffect(()=>{if(typeof window<"u"){let n=window.matchMedia(o),l=()=>{i(t(o));};return n.addEventListener("change",l),()=>{n.removeEventListener("change",l);}}},[o,t]),u??!1};var we=({children:o,className:u="",gap:i=20})=>{let t=s.useRef(null),[n,l]=s.useState(!1),[f,h]=s.useState(!1),[E,b]=s.useState(!1),[B,T]=s.useState(!1),[M,H]=s.useState(null),[C,L]=s.useState(null),$=N("(max-width: 768px)"),v=s.useCallback(()=>{let e=t.current;if(!e)return;let{scrollLeft:r,scrollWidth:a,clientWidth:c}=e;l(r>0),h(Math.ceil(r+c)<a);},[]),j=s.useCallback(e=>{if($)return;let a=e.currentTarget.getBoundingClientRect(),c=e.clientX-a.left,y=300;b(c<y),T(c>a.width-y);},[$]),V=s.useCallback(e=>{H(e.touches[0].clientX),L(null);},[]),z=s.useCallback(e=>{L(e.touches[0].clientX);},[]),W=s.useCallback(()=>{if(!M||!C)return;let e=t.current;if(!e)return;let r=M-C;if(Math.abs(r)<50)return;let c=e.clientWidth,y=r>0?1:-1,G=e.scrollLeft+c*y;e.scrollTo({left:G,behavior:"smooth"});},[M,C]),P=s.useCallback(e=>{let r=t.current;if(!r)return;let a=Math.abs(e.deltaX)>Math.abs(e.deltaY);if(!a&&!e.shiftKey)return;e.preventDefault();let c=a?e.deltaX:e.deltaY;r.scrollBy({left:c,behavior:"smooth"});},[]);s.useEffect(()=>{let e=t.current;if(!e)return;let r=new ResizeObserver(v);return r.observe(e),e.addEventListener("scroll",v),e.addEventListener("wheel",P,{passive:!1}),()=>{r.disconnect(),e.removeEventListener("scroll",v),e.removeEventListener("wheel",P);}},[v,P]);let m=s.useCallback(e=>{let r=t.current;if(!r)return;let a=r.clientWidth,c=r.scrollLeft+(e==="left"?-a:a);r.scrollTo({left:c,behavior:"smooth"});},[]),D=s.useCallback(e=>{e.key==="ArrowLeft"?m("left"):e.key==="ArrowRight"&&m("right");},[m]);return s__default.default.createElement("div",{className:`relative group ${u}`,onKeyDown:D,onMouseMove:j,onMouseLeave:()=>{b(!1),T(!1);},onTouchStart:V,onTouchMove:z,onTouchEnd:W,role:"region","aria-label":"Carousel"},s__default.default.createElement(x__namespace.Root,{className:"overflow-hidden",type:"hover"},s__default.default.createElement(x__namespace.Viewport,{ref:t,className:"w-full overflow-x-auto snap-x snap-mandatory",style:{scrollbarWidth:"none",msOverflowStyle:"none",WebkitOverflowScrolling:"touch"}},s__default.default.createElement("div",{className:"inline-flex",style:{gap:`${i}px`}},s__default.default.Children.map(o,e=>e===null?null:s__default.default.createElement("div",{className:"snap-start shrink-0"},e))))),!$&&s__default.default.createElement(s__default.default.Fragment,null,n&&E&&s__default.default.createElement(w,{onClick:()=>m("left"),className:"absolute left-4 top-1/2 -translate-y-1/2 z-20 transition-opacity duration-200","aria-label":"Scroll left"},s__default.default.createElement("div",{className:"flex items-center justify-center w-10 h-10 rounded-full bg-overlay backdrop-blur-sm"},s__default.default.createElement(S,{name:"arrow-left",size:24,color:"white"}))),f&&B&&s__default.default.createElement(w,{onClick:()=>m("right"),className:"absolute right-4 top-1/2 -translate-y-1/2 z-20 transition-opacity duration-200","aria-label":"Scroll right"},s__default.default.createElement("div",{className:"flex items-center justify-center w-10 h-10 rounded-full bg-overlay backdrop-blur-sm"},s__default.default.createElement(S,{name:"arrow-right",size:24,color:"white"})))))};exports.Carousel=we;//# sourceMappingURL=Carousel.cjs.map
|
|
2
2
|
//# sourceMappingURL=Carousel.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/hooks/useMediaQuery.ts","../../src/components/Carousel.tsx"],"names":["cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","sizeStyles","focusRingStyles","Pressable","children","type","disabled","useIsomorphicLayoutEffect","useEffect","useMediaQuery","matches","setMatches","useState","getMatches","useCallback","mediaQuery","handleChange","Carousel","gap","showDots","scrollContainerRef","useRef","showLeftPaddle","setShowLeftPaddle","showRightPaddle","setShowRightPaddle","isHoveringStart","setIsHoveringStart","isHoveringEnd","setIsHoveringEnd","activeIndex","setActiveIndex","touchStart","setTouchStart","touchEnd","setTouchEnd","isMobile","totalSlides","checkScrollPosition","container","scrollLeft","scrollWidth","clientWidth","slideElements","maxVisibleArea","mostVisibleIndex","slide","index","rect","containerRect","visibleLeft","visibleRight","visibleArea","handleMouseMove","mouseX","HOVER_THRESHOLD","handleTouchStart","handleTouchMove","handleTouchEnd","distance","itemWidth","direction","targetScroll","handleWheel","isHorizontalScroll","scrollAmount","observer","scroll","handleKeyDown","goToSlide","E","child","_"],"mappings":"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","file":"Carousel.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 { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\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 { useCallback, useEffect, useState } from \"react\";\n\nconst useIsomorphicLayoutEffect =\n typeof window !== \"undefined\" ? useEffect : () => {};\n\nexport const useMediaQuery = (query: string): boolean => {\n // Initialize with null to prevent hydration mismatch\n const [matches, setMatches] = useState<boolean | null>(null);\n\n const getMatches = useCallback((query: string): boolean => {\n if (typeof window !== \"undefined\") {\n return window.matchMedia(query).matches;\n }\n return false;\n }, []);\n\n // Update matches after mount to prevent hydration mismatch\n useIsomorphicLayoutEffect(() => {\n setMatches(getMatches(query));\n }, [query, getMatches]);\n\n useEffect(() => {\n if (typeof window !== \"undefined\") {\n const mediaQuery = window.matchMedia(query);\n\n const handleChange = () => {\n setMatches(getMatches(query));\n };\n\n mediaQuery.addEventListener(\"change\", handleChange);\n\n return () => {\n mediaQuery.removeEventListener(\"change\", handleChange);\n };\n }\n }, [query, getMatches]);\n\n // Return false during SSR, actual value after hydration\n return matches ?? false;\n};\n","import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport * as ScrollArea from \"@radix-ui/react-scroll-area\";\nimport { Icon } from \"./Icon\";\nimport { Pressable } from \"./Pressable\";\nimport { useMediaQuery } from \"../hooks/useMediaQuery\";\n\nexport type CarouselProps = {\n children: React.ReactNode;\n /** Optional className for the root element */\n className?: string;\n /** Optional gap between items in pixels */\n gap?: number;\n /** Show navigation dots on mobile */\n showDots?: boolean;\n};\n\nexport const Carousel = ({\n children,\n className = \"\",\n gap = 20,\n showDots = true\n}: CarouselProps) => {\n const scrollContainerRef = useRef<HTMLDivElement>(null);\n const [showLeftPaddle, setShowLeftPaddle] = useState(false);\n const [showRightPaddle, setShowRightPaddle] = useState(false);\n const [isHoveringStart, setIsHoveringStart] = useState(false);\n const [isHoveringEnd, setIsHoveringEnd] = useState(false);\n const [activeIndex, setActiveIndex] = useState(0);\n const [touchStart, setTouchStart] = useState<number | null>(null);\n const [touchEnd, setTouchEnd] = useState<number | null>(null);\n const isMobile = useMediaQuery(\"(max-width: 768px)\");\n\n const childrenArray = React.Children.toArray(children);\n const totalSlides = childrenArray.length;\n\n const checkScrollPosition = useCallback(() => {\n const container = scrollContainerRef.current;\n if (!container) return;\n\n const { scrollLeft, scrollWidth, clientWidth } = container;\n setShowLeftPaddle(scrollLeft > 0);\n setShowRightPaddle(Math.ceil(scrollLeft + clientWidth) < scrollWidth);\n\n // Find the most visible slide\n const slideElements = container.querySelectorAll(\".snap-start\");\n let maxVisibleArea = 0;\n let mostVisibleIndex = 0;\n\n slideElements.forEach((slide, index) => {\n const rect = slide.getBoundingClientRect();\n const containerRect = container.getBoundingClientRect();\n\n // Calculate how much of the slide is visible\n const visibleLeft = Math.max(rect.left, containerRect.left);\n const visibleRight = Math.min(rect.right, containerRect.right);\n const visibleArea = Math.max(0, visibleRight - visibleLeft);\n\n if (visibleArea > maxVisibleArea) {\n maxVisibleArea = visibleArea;\n mostVisibleIndex = index;\n }\n });\n\n setActiveIndex(mostVisibleIndex);\n }, []);\n\n const handleMouseMove = useCallback(\n (e: React.MouseEvent) => {\n if (isMobile) return;\n\n const container = e.currentTarget;\n const rect = container.getBoundingClientRect();\n const mouseX = e.clientX - rect.left;\n const HOVER_THRESHOLD = 300;\n\n setIsHoveringStart(mouseX < HOVER_THRESHOLD);\n setIsHoveringEnd(mouseX > rect.width - HOVER_THRESHOLD);\n },\n [isMobile]\n );\n\n // Touch handling\n const handleTouchStart = useCallback((e: React.TouchEvent) => {\n setTouchStart(e.touches[0].clientX);\n setTouchEnd(null);\n }, []);\n\n const handleTouchMove = useCallback((e: React.TouchEvent) => {\n setTouchEnd(e.touches[0].clientX);\n }, []);\n\n const handleTouchEnd = useCallback(() => {\n if (!touchStart || !touchEnd) return;\n\n const container = scrollContainerRef.current;\n if (!container) return;\n\n const distance = touchStart - touchEnd;\n const minSwipeDistance = 50;\n\n if (Math.abs(distance) < minSwipeDistance) {\n return;\n }\n\n const itemWidth = container.clientWidth;\n const direction = distance > 0 ? 1 : -1;\n const targetScroll = container.scrollLeft + itemWidth * direction;\n\n container.scrollTo({\n left: targetScroll,\n behavior: \"smooth\"\n });\n }, [touchStart, touchEnd]);\n\n const handleWheel = useCallback((e: WheelEvent) => {\n const container = scrollContainerRef.current;\n if (!container) return;\n\n // Check if the scroll is predominantly horizontal or if shift key is pressed\n const isHorizontalScroll = Math.abs(e.deltaX) > Math.abs(e.deltaY);\n if (!isHorizontalScroll && !e.shiftKey) return;\n\n e.preventDefault();\n\n // Determine the scroll amount based on the input type\n const scrollAmount = isHorizontalScroll ? e.deltaX : e.deltaY;\n\n // Apply smooth scrolling\n container.scrollBy({\n left: scrollAmount,\n behavior: \"smooth\"\n });\n }, []);\n\n useEffect(() => {\n const container = scrollContainerRef.current;\n if (!container) return;\n\n const observer = new ResizeObserver(checkScrollPosition);\n observer.observe(container);\n\n container.addEventListener(\"scroll\", checkScrollPosition);\n container.addEventListener(\"wheel\", handleWheel, { passive: false });\n\n return () => {\n observer.disconnect();\n container.removeEventListener(\"scroll\", checkScrollPosition);\n container.removeEventListener(\"wheel\", handleWheel);\n };\n }, [checkScrollPosition, handleWheel]);\n\n const scroll = useCallback((direction: \"left\" | \"right\") => {\n const container = scrollContainerRef.current;\n if (!container) return;\n\n const scrollAmount = container.clientWidth;\n const targetScroll =\n container.scrollLeft +\n (direction === \"left\" ? -scrollAmount : scrollAmount);\n\n container.scrollTo({\n left: targetScroll,\n behavior: \"smooth\"\n });\n }, []);\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === \"ArrowLeft\") {\n scroll(\"left\");\n } else if (e.key === \"ArrowRight\") {\n scroll(\"right\");\n }\n },\n [scroll]\n );\n\n const goToSlide = useCallback((index: number) => {\n const container = scrollContainerRef.current;\n if (!container) return;\n\n const { clientWidth } = container;\n const targetScroll = clientWidth * index;\n\n container.scrollTo({\n left: targetScroll,\n behavior: \"smooth\"\n });\n }, []);\n\n return (\n <div\n className={`relative group ${className}`}\n onKeyDown={handleKeyDown}\n onMouseMove={handleMouseMove}\n onMouseLeave={() => {\n setIsHoveringStart(false);\n setIsHoveringEnd(false);\n }}\n onTouchStart={handleTouchStart}\n onTouchMove={handleTouchMove}\n onTouchEnd={handleTouchEnd}\n role=\"region\"\n aria-label=\"Carousel\"\n >\n <ScrollArea.Root className=\"overflow-hidden\" type=\"hover\">\n <ScrollArea.Viewport\n ref={scrollContainerRef}\n className=\"w-full overflow-x-auto snap-x snap-mandatory\"\n style={{\n scrollbarWidth: \"none\",\n msOverflowStyle: \"none\",\n WebkitOverflowScrolling: \"touch\"\n }}\n >\n <div\n className=\"inline-flex\"\n style={{\n gap: `${gap}px`\n }}\n >\n {React.Children.map(children, (child) => (\n <div className=\"snap-start shrink-0\">{child}</div>\n ))}\n </div>\n </ScrollArea.Viewport>\n </ScrollArea.Root>\n\n {/* Navigation Paddles - Only show on desktop */}\n {!isMobile && (\n <>\n {showLeftPaddle && isHoveringStart && (\n <Pressable\n onClick={() => scroll(\"left\")}\n className=\"absolute left-4 top-1/2 -translate-y-1/2 z-20 transition-opacity duration-200\"\n aria-label=\"Scroll left\"\n >\n <div className=\"flex items-center justify-center w-10 h-10 rounded-full bg-overlay backdrop-blur-sm\">\n <Icon name=\"arrow-left\" size={24} color=\"white\" />\n </div>\n </Pressable>\n )}\n\n {showRightPaddle && isHoveringEnd && (\n <Pressable\n onClick={() => scroll(\"right\")}\n className=\"absolute right-4 top-1/2 -translate-y-1/2 z-20 transition-opacity duration-200\"\n aria-label=\"Scroll right\"\n >\n <div className=\"flex items-center justify-center w-10 h-10 rounded-full bg-overlay backdrop-blur-sm\">\n <Icon name=\"arrow-right\" size={24} color=\"white\" />\n </div>\n </Pressable>\n )}\n </>\n )}\n\n {/* Navigation Dots - Only show on mobile */}\n {isMobile && showDots && totalSlides > 1 && (\n <div className=\"absolute -bottom-2 left-1/2 -translate-x-1/2 flex gap-2 bg-overlay rounded-full p-2\">\n {Array.from({ length: totalSlides }).map((_, index) => (\n <button\n key={index}\n onClick={() => goToSlide(index)}\n className={`w-2 h-2 rounded-full transition-all ${\n index === activeIndex\n ? \"bg-white scale-125\"\n : \"bg-white/50 hover:bg-white/75\"\n }`}\n aria-label={`Go to slide ${index + 1} of ${totalSlides}`}\n />\n ))}\n </div>\n )}\n </div>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/hooks/useMediaQuery.ts","../../src/components/Carousel.tsx"],"names":["cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","sizeStyles","focusRingStyles","Pressable","children","type","disabled","useIsomorphicLayoutEffect","useEffect","useMediaQuery","matches","setMatches","useState","getMatches","useCallback","mediaQuery","handleChange","Carousel","gap","scrollContainerRef","useRef","showLeftPaddle","setShowLeftPaddle","showRightPaddle","setShowRightPaddle","isHoveringStart","setIsHoveringStart","isHoveringEnd","setIsHoveringEnd","touchStart","setTouchStart","touchEnd","setTouchEnd","isMobile","checkScrollPosition","container","scrollLeft","scrollWidth","clientWidth","handleMouseMove","rect","mouseX","HOVER_THRESHOLD","handleTouchStart","handleTouchMove","handleTouchEnd","distance","itemWidth","direction","targetScroll","handleWheel","isHorizontalScroll","scrollAmount","observer","scroll","handleKeyDown","x","child"],"mappings":"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","file":"Carousel.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 { 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 { useCallback, useEffect, useState } from \"react\";\n\nconst useIsomorphicLayoutEffect =\n typeof window !== \"undefined\" ? useEffect : () => {};\n\nexport const useMediaQuery = (query: string): boolean => {\n // Initialize with null to prevent hydration mismatch\n const [matches, setMatches] = useState<boolean | null>(null);\n\n const getMatches = useCallback((query: string): boolean => {\n if (typeof window !== \"undefined\") {\n return window.matchMedia(query).matches;\n }\n return false;\n }, []);\n\n // Update matches after mount to prevent hydration mismatch\n useIsomorphicLayoutEffect(() => {\n setMatches(getMatches(query));\n }, [query, getMatches]);\n\n useEffect(() => {\n if (typeof window !== \"undefined\") {\n const mediaQuery = window.matchMedia(query);\n\n const handleChange = () => {\n setMatches(getMatches(query));\n };\n\n mediaQuery.addEventListener(\"change\", handleChange);\n\n return () => {\n mediaQuery.removeEventListener(\"change\", handleChange);\n };\n }\n }, [query, getMatches]);\n\n // Return false during SSR, actual value after hydration\n return matches ?? false;\n};\n","import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport * as ScrollArea from \"@radix-ui/react-scroll-area\";\nimport { Icon } from \"./Icon\";\nimport { Pressable } from \"./Pressable\";\nimport { useMediaQuery } from \"../hooks/useMediaQuery\";\n\nexport type CarouselProps = {\n children: React.ReactNode;\n /** Optional className for the root element */\n className?: string;\n /** Optional gap between items in pixels */\n gap?: number;\n};\n\nexport const Carousel = ({\n children,\n className = \"\",\n gap = 20\n}: CarouselProps) => {\n const scrollContainerRef = useRef<HTMLDivElement>(null);\n const [showLeftPaddle, setShowLeftPaddle] = useState(false);\n const [showRightPaddle, setShowRightPaddle] = useState(false);\n const [isHoveringStart, setIsHoveringStart] = useState(false);\n const [isHoveringEnd, setIsHoveringEnd] = useState(false);\n const [touchStart, setTouchStart] = useState<number | null>(null);\n const [touchEnd, setTouchEnd] = useState<number | null>(null);\n const isMobile = useMediaQuery(\"(max-width: 768px)\");\n\n const checkScrollPosition = useCallback(() => {\n const container = scrollContainerRef.current;\n if (!container) return;\n\n const { scrollLeft, scrollWidth, clientWidth } = container;\n setShowLeftPaddle(scrollLeft > 0);\n setShowRightPaddle(Math.ceil(scrollLeft + clientWidth) < scrollWidth);\n }, []);\n\n const handleMouseMove = useCallback(\n (e: React.MouseEvent) => {\n if (isMobile) return;\n\n const container = e.currentTarget;\n const rect = container.getBoundingClientRect();\n const mouseX = e.clientX - rect.left;\n const HOVER_THRESHOLD = 300;\n\n setIsHoveringStart(mouseX < HOVER_THRESHOLD);\n setIsHoveringEnd(mouseX > rect.width - HOVER_THRESHOLD);\n },\n [isMobile]\n );\n\n // Touch handling\n const handleTouchStart = useCallback((e: React.TouchEvent) => {\n setTouchStart(e.touches[0].clientX);\n setTouchEnd(null);\n }, []);\n\n const handleTouchMove = useCallback((e: React.TouchEvent) => {\n setTouchEnd(e.touches[0].clientX);\n }, []);\n\n const handleTouchEnd = useCallback(() => {\n if (!touchStart || !touchEnd) return;\n\n const container = scrollContainerRef.current;\n if (!container) return;\n\n const distance = touchStart - touchEnd;\n const minSwipeDistance = 50;\n\n if (Math.abs(distance) < minSwipeDistance) {\n return;\n }\n\n const itemWidth = container.clientWidth;\n const direction = distance > 0 ? 1 : -1;\n const targetScroll = container.scrollLeft + itemWidth * direction;\n\n container.scrollTo({\n left: targetScroll,\n behavior: \"smooth\"\n });\n }, [touchStart, touchEnd]);\n\n const handleWheel = useCallback((e: WheelEvent) => {\n const container = scrollContainerRef.current;\n if (!container) return;\n\n // Check if the scroll is predominantly horizontal or if shift key is pressed\n const isHorizontalScroll = Math.abs(e.deltaX) > Math.abs(e.deltaY);\n if (!isHorizontalScroll && !e.shiftKey) return;\n\n e.preventDefault();\n\n // Determine the scroll amount based on the input type\n const scrollAmount = isHorizontalScroll ? e.deltaX : e.deltaY;\n\n // Apply smooth scrolling\n container.scrollBy({\n left: scrollAmount,\n behavior: \"smooth\"\n });\n }, []);\n\n useEffect(() => {\n const container = scrollContainerRef.current;\n if (!container) return;\n\n const observer = new ResizeObserver(checkScrollPosition);\n observer.observe(container);\n\n container.addEventListener(\"scroll\", checkScrollPosition);\n container.addEventListener(\"wheel\", handleWheel, { passive: false });\n\n return () => {\n observer.disconnect();\n container.removeEventListener(\"scroll\", checkScrollPosition);\n container.removeEventListener(\"wheel\", handleWheel);\n };\n }, [checkScrollPosition, handleWheel]);\n\n const scroll = useCallback((direction: \"left\" | \"right\") => {\n const container = scrollContainerRef.current;\n if (!container) return;\n\n const scrollAmount = container.clientWidth;\n const targetScroll =\n container.scrollLeft +\n (direction === \"left\" ? -scrollAmount : scrollAmount);\n\n container.scrollTo({\n left: targetScroll,\n behavior: \"smooth\"\n });\n }, []);\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === \"ArrowLeft\") {\n scroll(\"left\");\n } else if (e.key === \"ArrowRight\") {\n scroll(\"right\");\n }\n },\n [scroll]\n );\n\n return (\n <div\n className={`relative group ${className}`}\n onKeyDown={handleKeyDown}\n onMouseMove={handleMouseMove}\n onMouseLeave={() => {\n setIsHoveringStart(false);\n setIsHoveringEnd(false);\n }}\n onTouchStart={handleTouchStart}\n onTouchMove={handleTouchMove}\n onTouchEnd={handleTouchEnd}\n role=\"region\"\n aria-label=\"Carousel\"\n >\n <ScrollArea.Root className=\"overflow-hidden\" type=\"hover\">\n <ScrollArea.Viewport\n ref={scrollContainerRef}\n className=\"w-full overflow-x-auto snap-x snap-mandatory\"\n style={{\n scrollbarWidth: \"none\",\n msOverflowStyle: \"none\",\n WebkitOverflowScrolling: \"touch\"\n }}\n >\n <div\n className=\"inline-flex\"\n style={{\n gap: `${gap}px`\n }}\n >\n {React.Children.map(children, (child) =>\n child === null ? null : (\n <div className=\"snap-start shrink-0\">{child}</div>\n )\n )}\n </div>\n </ScrollArea.Viewport>\n </ScrollArea.Root>\n\n {/* Navigation Paddles - Only show on desktop */}\n {!isMobile && (\n <>\n {showLeftPaddle && isHoveringStart && (\n <Pressable\n onClick={() => scroll(\"left\")}\n className=\"absolute left-4 top-1/2 -translate-y-1/2 z-20 transition-opacity duration-200\"\n aria-label=\"Scroll left\"\n >\n <div className=\"flex items-center justify-center w-10 h-10 rounded-full bg-overlay backdrop-blur-sm\">\n <Icon name=\"arrow-left\" size={24} color=\"white\" />\n </div>\n </Pressable>\n )}\n\n {showRightPaddle && isHoveringEnd && (\n <Pressable\n onClick={() => scroll(\"right\")}\n className=\"absolute right-4 top-1/2 -translate-y-1/2 z-20 transition-opacity duration-200\"\n aria-label=\"Scroll right\"\n >\n <div className=\"flex items-center justify-center w-10 h-10 rounded-full bg-overlay backdrop-blur-sm\">\n <Icon name=\"arrow-right\" size={24} color=\"white\" />\n </div>\n </Pressable>\n )}\n </>\n )}\n </div>\n );\n};\n"]}
|
|
@@ -6,9 +6,7 @@ type CarouselProps = {
|
|
|
6
6
|
className?: string;
|
|
7
7
|
/** Optional gap between items in pixels */
|
|
8
8
|
gap?: number;
|
|
9
|
-
/** Show navigation dots on mobile */
|
|
10
|
-
showDots?: boolean;
|
|
11
9
|
};
|
|
12
|
-
declare const Carousel: ({ children, className, gap
|
|
10
|
+
declare const Carousel: ({ children, className, gap }: CarouselProps) => React__default.JSX.Element;
|
|
13
11
|
|
|
14
12
|
export { Carousel, type CarouselProps };
|
|
@@ -6,9 +6,7 @@ type CarouselProps = {
|
|
|
6
6
|
className?: string;
|
|
7
7
|
/** Optional gap between items in pixels */
|
|
8
8
|
gap?: number;
|
|
9
|
-
/** Show navigation dots on mobile */
|
|
10
|
-
showDots?: boolean;
|
|
11
9
|
};
|
|
12
|
-
declare const Carousel: ({ children, className, gap
|
|
10
|
+
declare const Carousel: ({ children, className, gap }: CarouselProps) => React__default.JSX.Element;
|
|
13
11
|
|
|
14
12
|
export { Carousel, type CarouselProps };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import s,{useRef,useState,useCallback,useEffect}from'react';import*as x from'@radix-ui/react-scroll-area';import {IconMap}from'@deckai/icons';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';function g(...o){return twMerge(clsx(o))}var R={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB",disabled:"#888888",danger:"#FF0000"},F={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},_=o=>{if(!o)return {width:"24px",height:"24px"};let u=Array.isArray(o)?o:[o],i={},t;return u.forEach(n=>{if(typeof n=="number")t=`${n}px`;else {let[l,f]=n.split(":"),h=parseInt(f,10);i[`@media (min-width: ${F[l]})`]=`${h}px`;}}),{width:t||"24px",height:t||"24px",...Object.entries(i).reduce((n,[l,f])=>({...n,[l]:{width:f,height:f}}),{})}},S=s.forwardRef(({name:o,size:u=24,color:i="primary",title:t,className:n,style:l={},...f},h)=>{let E=IconMap[o],b=_(u);return s.createElement("div",{className:g("flex justify-center items-center",n),style:{...b,"--icon-stroke":R[i],...l}},s.createElement(E,{ref:h,"aria-hidden":!t,"aria-label":t,stroke:o.includes("filled")?void 0:R[i],...f}))});S.displayName="Icon";var A="focus-visible:outline-none focus-visible:border-2 focus-visible:border-primary-100";var w=s.forwardRef(({children:o,type:u="button",className:i,disabled:t,...n},l)=>s.createElement("button",{ref:l,type:u,disabled:t,className:g("appearance-none hover:opacity-80 transition-all active:scale-95",A,t&&"opacity-50 cursor-not-allowed",i),...n},o));w.displayName="Pressable";var U=typeof window<"u"?useEffect:()=>{},N=o=>{let[u,i]=useState(null),t=useCallback(n=>typeof window<"u"?window.matchMedia(n).matches:!1,[]);return U(()=>{i(t(o));},[o,t]),useEffect(()=>{if(typeof window<"u"){let n=window.matchMedia(o),l=()=>{i(t(o));};return n.addEventListener("change",l),()=>{n.removeEventListener("change",l);}}},[o,t]),u??!1};var we=({children:o,className:u="",gap:i=20})=>{let t=useRef(null),[n,l]=useState(!1),[f,h]=useState(!1),[E,b]=useState(!1),[B,T]=useState(!1),[M,H]=useState(null),[C,L]=useState(null),$=N("(max-width: 768px)"),v=useCallback(()=>{let e=t.current;if(!e)return;let{scrollLeft:r,scrollWidth:a,clientWidth:c}=e;l(r>0),h(Math.ceil(r+c)<a);},[]),j=useCallback(e=>{if($)return;let a=e.currentTarget.getBoundingClientRect(),c=e.clientX-a.left,y=300;b(c<y),T(c>a.width-y);},[$]),V=useCallback(e=>{H(e.touches[0].clientX),L(null);},[]),z=useCallback(e=>{L(e.touches[0].clientX);},[]),W=useCallback(()=>{if(!M||!C)return;let e=t.current;if(!e)return;let r=M-C;if(Math.abs(r)<50)return;let c=e.clientWidth,y=r>0?1:-1,G=e.scrollLeft+c*y;e.scrollTo({left:G,behavior:"smooth"});},[M,C]),P=useCallback(e=>{let r=t.current;if(!r)return;let a=Math.abs(e.deltaX)>Math.abs(e.deltaY);if(!a&&!e.shiftKey)return;e.preventDefault();let c=a?e.deltaX:e.deltaY;r.scrollBy({left:c,behavior:"smooth"});},[]);useEffect(()=>{let e=t.current;if(!e)return;let r=new ResizeObserver(v);return r.observe(e),e.addEventListener("scroll",v),e.addEventListener("wheel",P,{passive:!1}),()=>{r.disconnect(),e.removeEventListener("scroll",v),e.removeEventListener("wheel",P);}},[v,P]);let m=useCallback(e=>{let r=t.current;if(!r)return;let a=r.clientWidth,c=r.scrollLeft+(e==="left"?-a:a);r.scrollTo({left:c,behavior:"smooth"});},[]),D=useCallback(e=>{e.key==="ArrowLeft"?m("left"):e.key==="ArrowRight"&&m("right");},[m]);return s.createElement("div",{className:`relative group ${u}`,onKeyDown:D,onMouseMove:j,onMouseLeave:()=>{b(!1),T(!1);},onTouchStart:V,onTouchMove:z,onTouchEnd:W,role:"region","aria-label":"Carousel"},s.createElement(x.Root,{className:"overflow-hidden",type:"hover"},s.createElement(x.Viewport,{ref:t,className:"w-full overflow-x-auto snap-x snap-mandatory",style:{scrollbarWidth:"none",msOverflowStyle:"none",WebkitOverflowScrolling:"touch"}},s.createElement("div",{className:"inline-flex",style:{gap:`${i}px`}},s.Children.map(o,e=>e===null?null:s.createElement("div",{className:"snap-start shrink-0"},e))))),!$&&s.createElement(s.Fragment,null,n&&E&&s.createElement(w,{onClick:()=>m("left"),className:"absolute left-4 top-1/2 -translate-y-1/2 z-20 transition-opacity duration-200","aria-label":"Scroll left"},s.createElement("div",{className:"flex items-center justify-center w-10 h-10 rounded-full bg-overlay backdrop-blur-sm"},s.createElement(S,{name:"arrow-left",size:24,color:"white"}))),f&&B&&s.createElement(w,{onClick:()=>m("right"),className:"absolute right-4 top-1/2 -translate-y-1/2 z-20 transition-opacity duration-200","aria-label":"Scroll right"},s.createElement("div",{className:"flex items-center justify-center w-10 h-10 rounded-full bg-overlay backdrop-blur-sm"},s.createElement(S,{name:"arrow-right",size:24,color:"white"})))))};export{we as Carousel};//# sourceMappingURL=Carousel.js.map
|
|
2
2
|
//# sourceMappingURL=Carousel.js.map
|