@deckai/deck-ui 0.0.23 → 0.0.25
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 +5 -5
- package/dist/components/AboutCard.cjs.map +1 -1
- package/dist/components/AboutCard.js +5 -5
- package/dist/components/AboutCard.js.map +1 -1
- package/dist/components/Accordion.cjs +1 -1
- package/dist/components/Accordion.cjs.map +1 -1
- package/dist/components/Accordion.js +1 -1
- package/dist/components/Accordion.js.map +1 -1
- package/dist/components/AddWorkCard.cjs +5 -5
- package/dist/components/AddWorkCard.cjs.map +1 -1
- package/dist/components/AddWorkCard.js +5 -5
- package/dist/components/AddWorkCard.js.map +1 -1
- package/dist/components/AutocompleteInput.cjs +6 -6
- package/dist/components/AutocompleteInput.cjs.map +1 -1
- package/dist/components/AutocompleteInput.d.cts +1 -1
- package/dist/components/AutocompleteInput.d.ts +1 -1
- package/dist/components/AutocompleteInput.js +6 -6
- package/dist/components/AutocompleteInput.js.map +1 -1
- package/dist/components/Avatar.cjs +1 -1
- package/dist/components/Avatar.cjs.map +1 -1
- package/dist/components/Avatar.js +1 -1
- package/dist/components/Avatar.js.map +1 -1
- package/dist/components/Badge.cjs +2 -2
- package/dist/components/Badge.cjs.map +1 -1
- package/dist/components/Badge.d.cts +1 -1
- package/dist/components/Badge.d.ts +1 -1
- package/dist/components/Badge.js +2 -2
- package/dist/components/Badge.js.map +1 -1
- package/dist/components/Breadcrumbs.cjs +2 -2
- package/dist/components/Breadcrumbs.cjs.map +1 -1
- package/dist/components/Breadcrumbs.js +2 -2
- package/dist/components/Breadcrumbs.js.map +1 -1
- package/dist/components/Button.cjs +6 -6
- package/dist/components/Button.cjs.map +1 -1
- package/dist/components/Button.d.cts +5 -0
- package/dist/components/Button.d.ts +5 -0
- package/dist/components/Button.js +6 -6
- 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 +3 -1
- package/dist/components/Carousel.d.ts +3 -1
- package/dist/components/Carousel.js +1 -1
- package/dist/components/Carousel.js.map +1 -1
- package/dist/components/Collapsible.cjs +5 -5
- package/dist/components/Collapsible.cjs.map +1 -1
- package/dist/components/Collapsible.js +5 -5
- package/dist/components/Collapsible.js.map +1 -1
- package/dist/components/Combobox.cjs +3 -3
- package/dist/components/Combobox.cjs.map +1 -1
- package/dist/components/Combobox.d.cts +2 -1
- package/dist/components/Combobox.d.ts +2 -1
- package/dist/components/Combobox.js +3 -3
- package/dist/components/Combobox.js.map +1 -1
- package/dist/components/ContactItem.cjs +2 -2
- package/dist/components/ContactItem.cjs.map +1 -1
- package/dist/components/ContactItem.js +2 -2
- package/dist/components/ContactItem.js.map +1 -1
- package/dist/components/CreatorCard.cjs +8 -0
- package/dist/components/CreatorCard.cjs.map +1 -0
- package/dist/components/CreatorCard.d.cts +33 -0
- package/dist/components/CreatorCard.d.ts +33 -0
- package/dist/components/CreatorCard.js +8 -0
- package/dist/components/CreatorCard.js.map +1 -0
- package/dist/components/Dropdown.cjs +2 -2
- package/dist/components/Dropdown.cjs.map +1 -1
- package/dist/components/Dropdown.js +2 -2
- package/dist/components/Dropdown.js.map +1 -1
- package/dist/components/EditButton.cjs +4 -4
- package/dist/components/EditButton.cjs.map +1 -1
- package/dist/components/EditButton.js +4 -4
- package/dist/components/EditButton.js.map +1 -1
- package/dist/components/Hero.cjs +8 -0
- package/dist/components/Hero.cjs.map +1 -0
- package/dist/components/Hero.d.cts +19 -0
- package/dist/components/Hero.d.ts +19 -0
- package/dist/components/Hero.js +8 -0
- package/dist/components/Hero.js.map +1 -0
- 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.js +1 -1
- package/dist/components/IconRenderer.js.map +1 -1
- package/dist/components/Input.cjs +2 -2
- package/dist/components/Input.cjs.map +1 -1
- package/dist/components/Input.d.cts +2 -2
- package/dist/components/Input.d.ts +2 -2
- package/dist/components/Input.js +2 -2
- package/dist/components/Input.js.map +1 -1
- package/dist/components/Link.cjs +1 -1
- package/dist/components/Link.cjs.map +1 -1
- package/dist/components/Link.d.cts +1 -1
- package/dist/components/Link.d.ts +1 -1
- package/dist/components/Link.js +1 -1
- package/dist/components/Link.js.map +1 -1
- package/dist/components/Modal.cjs +1 -1
- package/dist/components/Modal.cjs.map +1 -1
- package/dist/components/Modal.js +1 -1
- package/dist/components/Modal.js.map +1 -1
- package/dist/components/MultiSelectCombobox.cjs +2 -2
- package/dist/components/MultiSelectCombobox.cjs.map +1 -1
- package/dist/components/MultiSelectCombobox.js +2 -2
- package/dist/components/MultiSelectCombobox.js.map +1 -1
- package/dist/components/Navbar.cjs +14 -6
- package/dist/components/Navbar.cjs.map +1 -1
- package/dist/components/Navbar.d.cts +4 -2
- package/dist/components/Navbar.d.ts +4 -2
- package/dist/components/Navbar.js +14 -6
- package/dist/components/Navbar.js.map +1 -1
- package/dist/components/NavbarItem.cjs +3 -3
- 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 +3 -3
- package/dist/components/NavbarItem.js.map +1 -1
- package/dist/components/Option.cjs +3 -3
- package/dist/components/Option.cjs.map +1 -1
- package/dist/components/Option.js +3 -3
- package/dist/components/Option.js.map +1 -1
- package/dist/components/ProfileCard.cjs +2 -2
- package/dist/components/ProfileCard.cjs.map +1 -1
- package/dist/components/ProfileCard.js +2 -2
- package/dist/components/ProfileCard.js.map +1 -1
- package/dist/components/ProgressBar.cjs.map +1 -1
- package/dist/components/ProgressBar.js.map +1 -1
- package/dist/components/RadioGroup.cjs +2 -2
- package/dist/components/RadioGroup.cjs.map +1 -1
- package/dist/components/RadioGroup.js +2 -2
- package/dist/components/RadioGroup.js.map +1 -1
- package/dist/components/SegmentedTabs.cjs +6 -6
- package/dist/components/SegmentedTabs.cjs.map +1 -1
- package/dist/components/SegmentedTabs.js +6 -6
- 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.map +1 -1
- package/dist/components/SlideButton.js.map +1 -1
- package/dist/components/SocialCard.cjs +4 -4
- package/dist/components/SocialCard.cjs.map +1 -1
- package/dist/components/SocialCard.js +4 -4
- package/dist/components/SocialCard.js.map +1 -1
- package/dist/components/Tabs.cjs +5 -5
- package/dist/components/Tabs.cjs.map +1 -1
- package/dist/components/Tabs.js +5 -5
- package/dist/components/Tabs.js.map +1 -1
- package/dist/components/Tag.cjs +4 -4
- package/dist/components/Tag.cjs.map +1 -1
- package/dist/components/Tag.js +4 -4
- package/dist/components/Tag.js.map +1 -1
- package/dist/components/Text.cjs +3 -3
- 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 +3 -3
- package/dist/components/Text.js.map +1 -1
- package/dist/components/TextArea.cjs +2 -2
- package/dist/components/TextArea.cjs.map +1 -1
- package/dist/components/TextArea.js +2 -2
- package/dist/components/TextArea.js.map +1 -1
- package/dist/components/Toast.cjs +5 -5
- package/dist/components/Toast.cjs.map +1 -1
- package/dist/components/Toast.d.cts +4 -1
- package/dist/components/Toast.d.ts +4 -1
- package/dist/components/Toast.js +5 -5
- package/dist/components/Toast.js.map +1 -1
- package/dist/components/Tooltip.cjs +3 -3
- package/dist/components/Tooltip.cjs.map +1 -1
- package/dist/components/Tooltip.js +3 -3
- package/dist/components/Tooltip.js.map +1 -1
- package/dist/components/VideoPlayer.cjs +2 -2
- package/dist/components/VideoPlayer.cjs.map +1 -1
- package/dist/components/VideoPlayer.js +2 -2
- package/dist/components/VideoPlayer.js.map +1 -1
- package/dist/components/WorkCard.cjs +4 -4
- package/dist/components/WorkCard.cjs.map +1 -1
- package/dist/components/WorkCard.js +4 -4
- package/dist/components/WorkCard.js.map +1 -1
- package/dist/index.cjs +6 -6
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +6 -6
- package/dist/index.js.map +1 -1
- package/dist/styles/styles.css +1 -1
- package/dist/styles/styles.css.map +1 -1
- package/dist/tailwind-D0Cc0jDS.d.cts +38 -0
- package/dist/tailwind-D0Cc0jDS.d.ts +38 -0
- package/dist/tailwind-DIVT5G0q.d.cts +38 -0
- package/dist/tailwind-DIVT5G0q.d.ts +38 -0
- package/package.json +6 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/tailwind.ts","../../src/components/Text.tsx","../../src/components/Link.tsx"],"names":["cn","inputs","twMerge","clsx","focusRingStyles","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","Link","href"],"mappings":"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","file":"Link.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import type { 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 const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const sizes = [\"24\", \"42\", \"48\", \"64\", \"72\"]; // Add all the sizes you need\n\n const safelist: (string | { pattern: RegExp; variants: 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 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 // Generate size classes with responsive variants\n const sizeClasses = sizes.flatMap((size) => [\n `h-[${size}px]`,\n `w-[${size}px]`,\n ...breakpoints.flatMap((bp) => [\n `${bp}:h-[${size}px]`,\n `${bp}:w-[${size}px]`\n ])\n ]);\n\n return [...typographyClasses, ...responsiveTypographyClasses, ...sizeClasses];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100\";\nexport const focusRingWithinStyles =\n \"focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-100\";\nexport const focusRingStylesCoerced = \"ring-2 ring-primary-100\";\n","import React from \"react\";\n\nimport type { Typography } from \"../types/tailwind\";\nimport type { Breakpoint } from \"../utils/responsive\";\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\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 using Tailwind classes that reference CSS variables\n const colorClasses = color === \"inherit\" ? \"text-inherit\" : `text-${color}`;\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`\n font-sans antialiased\n ${typographyClasses}\n ${colorClasses}\n ${weight && `!${fontWeight[weight]}`}\n ${className}\n `}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import React from \"react\";\n\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport type { TextProps } from \"./Text\";\nimport { Text } from \"./Text\";\n\nexport type LinkProps = {\n href: string;\n children: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n} & Pick<TextProps, \"variant\" | \"color\"> &\n React.AnchorHTMLAttributes<HTMLAnchorElement>;\n\nexport function Link({\n children,\n color = \"inherit\",\n variant = \"body-default-semibold\",\n href,\n className,\n ...props\n}: LinkProps) {\n return (\n <Text variant={variant} color={color}>\n <a\n href={href}\n className={cn(\n \"hover:opacity-80 transition-all ease-in-out active:scale-95 hover:underline text-ellipsis\",\n focusRingStyles,\n className\n )}\n {...props}\n >\n {children}\n </a>\n </Text>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/tailwind.ts","../../src/components/Text.tsx","../../src/components/Link.tsx"],"names":["cn","inputs","twMerge","clsx","focusRingStyles","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","Link","href"],"mappings":"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","file":"Link.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import type { 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 const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const sizes = [\"24\", \"42\", \"48\", \"64\", \"72\"]; // Add all the sizes you need\n\n const safelist: (string | { pattern: RegExp; variants: 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 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 // Generate size classes with responsive variants\n const sizeClasses = sizes.flatMap((size) => [\n `h-[${size}px]`,\n `w-[${size}px]`,\n ...breakpoints.flatMap((bp) => [\n `${bp}:h-[${size}px]`,\n `${bp}:w-[${size}px]`\n ])\n ]);\n\n return [...typographyClasses, ...responsiveTypographyClasses, ...sizeClasses];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100\";\nexport const focusRingWithinStyles =\n \"focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-100\";\nexport const focusRingStylesCoerced = \"ring-2 ring-primary-100\";\n","import React from \"react\";\n\nimport type { Typography } from \"../types/tailwind\";\nimport type { Breakpoint } from \"../utils/responsive\";\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\nexport type ResponsiveVariant =\n | TypographyKey\n | `${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 using Tailwind classes that reference CSS variables\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 React.ElementType;\n\n return (\n <Component\n ref={ref}\n className={`\n font-sans antialiased\n ${typographyClasses}\n ${colorClasses}\n ${weight && `!${fontWeight[weight]}`}\n ${className}\n `}\n {...(props as HTMLPropsMap[T])}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import React from \"react\";\n\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport type { TextProps } from \"./Text\";\nimport { Text } from \"./Text\";\n\nexport type LinkProps = {\n href: string;\n children: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n} & Pick<TextProps, \"variant\" | \"color\"> &\n React.AnchorHTMLAttributes<HTMLAnchorElement>;\n\nexport function Link({\n children,\n color = \"inherit\",\n variant = \"body-default-semibold\",\n href,\n className,\n ...props\n}: LinkProps) {\n return (\n <Text variant={variant} color={color}>\n <a\n href={href}\n className={cn(\n \"hover:opacity-80 transition-all ease-in-out active:scale-95 hover:underline text-ellipsis\",\n focusRingStyles,\n className\n )}\n {...props}\n >\n {children}\n </a>\n </Text>\n );\n}\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var
|
|
1
|
+
'use strict';var x=require('@radix-ui/react-dialog'),i=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),icons=require('@deckai/icons');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 x__namespace=/*#__PURE__*/_interopNamespace(x);var i__default=/*#__PURE__*/_interopDefault(i);function a(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var w={12:"h-[12px] w-[12px]",16:"h-[16px] w-[16px]",18:"h-[18px] w-[18px]",20:"h-[20px] w-[20px]",24:"h-[24px] w-[24px]",32:"h-[32px] w-[32px]",36:"h-[36px] w-[36px]",40:"h-[40px] w-[40px]",42:"h-[42px] w-[42px]",48:"h-[48px] w-[48px]",64:"h-[64px] w-[64px]",72:"h-[72px] w-[72px]",80:"h-[80px] w-[80px]"},u={sm:{12:"sm:h-[12px] sm:w-[12px]",16:"sm:h-[16px] sm:w-[16px]",18:"sm:h-[18px] sm:w-[18px]",20:"sm:h-[20px] sm:w-[20px]",24:"sm:h-[24px] sm:w-[24px]",32:"sm:h-[32px] sm:w-[32px]",36:"sm:h-[36px] sm:w-[36px]",40:"sm:h-[40px] sm:w-[40px]",42:"sm:h-[42px] sm:w-[42px]",48:"sm:h-[48px] sm:w-[48px]",64:"sm:h-[64px] sm:w-[64px]",72:"sm:h-[72px] sm:w-[72px]",80:"sm:h-[80px] sm:w-[80px]"},md:{12:"md:h-[12px] md:w-[12px]",16:"md:h-[16px] md:w-[16px]",18:"md:h-[18px] md:w-[18px]",20:"md:h-[20px] md:w-[20px]",24:"md:h-[24px] md:w-[24px]",32:"md:h-[32px] md:w-[32px]",36:"md:h-[36px] md:w-[36px]",40:"md:h-[40px] md:w-[40px]",42:"md:h-[42px] md:w-[42px]",48:"md:h-[48px] md:w-[48px]",64:"md:h-[64px] md:w-[64px]",72:"md:h-[72px] md:w-[72px]",80:"md:h-[80px] md:w-[80px]"},lg:{12:"lg:h-[12px] lg:w-[12px]",16:"lg:h-[16px] lg:w-[16px]",18:"lg:h-[18px] lg:w-[18px]",20:"lg:h-[20px] lg:w-[20px]",24:"lg:h-[24px] lg:w-[24px]",32:"lg:h-[32px] lg:w-[32px]",36:"lg:h-[36px] lg:w-[36px]",40:"lg:h-[40px] lg:w-[40px]",42:"lg:h-[42px] lg:w-[42px]",48:"lg:h-[48px] lg:w-[48px]",64:"lg:h-[64px] lg:w-[64px]",72:"lg:h-[72px] lg:w-[72px]",80:"lg:h-[80px] lg:w-[80px]"},xl:{12:"xl:h-[12px] xl:w-[12px]",16:"xl:h-[16px] xl:w-[16px]",18:"xl:h-[18px] xl:w-[18px]",20:"xl:h-[20px] xl:w-[20px]",24:"xl:h-[24px] xl:w-[24px]",32:"xl:h-[32px] xl:w-[32px]",36:"xl:h-[36px] xl:w-[36px]",40:"xl:h-[40px] xl:w-[40px]",42:"xl:h-[42px] xl:w-[42px]",48:"xl:h-[48px] xl:w-[48px]",64:"xl:h-[64px] xl:w-[64px]",72:"xl:h-[72px] xl:w-[72px]",80:"xl:h-[80px] xl:w-[80px]"},"2xl":{12:"2xl:h-[12px] 2xl:w-[12px]",16:"2xl:h-[16px] 2xl:w-[16px]",18:"2xl:h-[18px] 2xl:w-[18px]",20:"2xl:h-[20px] 2xl:w-[20px]",24:"2xl:h-[24px] 2xl:w-[24px]",32:"2xl:h-[32px] 2xl:w-[32px]",36:"2xl:h-[36px] 2xl:w-[36px]",40:"2xl:h-[40px] 2xl:w-[40px]",42:"2xl:h-[42px] 2xl:w-[42px]",48:"2xl:h-[48px] 2xl:w-[48px]",64:"2xl:h-[64px] 2xl:w-[64px]",72:"2xl:h-[72px] 2xl:w-[72px]",80:"2xl:h-[80px] 2xl:w-[80px]"}},d=e=>String(e),v=(e,s=24)=>{let o=[],p={};if(e===void 0){let t=d(s);t?o.push(w[t]):(p.height=`${s}px`,p.width=`${s}px`);}if(typeof e=="number"){let t=d(e);t?o.push(w[t]):(p.height=`${e}px`,p.width=`${e}px`);}if(Array.isArray(e)){let t=d(s),r=[t&&w[t]||`h-[${s}px] w-[${s}px]`];e.forEach(n=>{if(typeof n=="string"){let[l,h]=n.split(":"),m=parseInt(h,10),c=d(m);o.push(c&&u[l]?.[c]||`${l}:h-[${m}px] ${l}:w-[${m}px]`);}}),o.push(...r);}if(typeof e=="string"){let[t,r]=e.split(":"),n=parseInt(r,10),l=d(n);o.push(l&&u[t]?.[l]||`${t}:h-[${n}px] ${t}:w-[${n}px]`);}return {responsiveSizeClasses:o.join(" "),responsiveSizeStyles:p}};var b={primary:"var(--color-primary)",secondary:"var(--color-secondary)",white:"var(--color-white)",primaryBlue:"var(--color-primary-100)",disabled:"var(--color-disabled)",danger:"var(--color-danger)",tertiary:"var(--color-tertiary-20)"},y=i__default.default.forwardRef(({name:e,size:s=24,color:o="primary",title:p,className:t,style:r={},...n},l)=>{let h=icons.IconMap[e],{responsiveSizeClasses:m,responsiveSizeStyles:c}=v(s,24);return i__default.default.createElement("div",{className:a("flex justify-center items-center",m,t),style:{"--icon-stroke":b[o],...c,...r}},i__default.default.createElement(h,{ref:l,"aria-hidden":!p,"aria-label":p,stroke:e.includes("filled")?void 0:b[o],...n}))});y.displayName="Icon";var $="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100";var g=i__default.default.forwardRef(({children:e,type:s="button",className:o,disabled:p,...t},r)=>i__default.default.createElement("button",{ref:r,type:s,disabled:p,className:a("appearance-none hover:opacity-80 transition-all active:scale-95",$,p&&"opacity-50 cursor-not-allowed",o),...t},e));g.displayName="Pressable";var E=(e,{isActive:s=true,preventScroll:o=false}={})=>{let p=i.useCallback(t=>{let r=e[t.key];r&&r(t);},[e]);i.useEffect(()=>(s&&(document.addEventListener("keydown",p),o&&(document.body.style.overflow="hidden")),()=>{document.removeEventListener("keydown",p),o&&(document.body.style.overflow="unset");}),[s,p,o]);};function K({children:e,open:s,onClose:o,className:p,showCloseButton:t=true}){return E({Escape:o},{isActive:s,preventScroll:true}),i__default.default.createElement(x__namespace.Root,{open:s,onOpenChange:o},i__default.default.createElement(x__namespace.Portal,null,i__default.default.createElement(x__namespace.Overlay,{className:a("fixed inset-0 z-50 bg-sidebarOverlay backdrop-blur-[2px]","data-[state=open]:animate-overlay-show","data-[state=closed]:animate-overlay-hide")}),i__default.default.createElement(x__namespace.Content,{className:a("fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2","w-[90vw] max-w-[90vw] max-h-[90vh]","rounded-xl overflow-hidden","data-[state=open]:animate-in data-[state=closed]:animate-out","data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0","data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95","data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2","data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]",p)},e,t&&i__default.default.createElement(x__namespace.Close,{asChild:true},i__default.default.createElement(g,{className:"inline-flex items-center justify-center text-secondary absolute top-4 right-4","aria-label":"Close"},i__default.default.createElement(y,{name:"close",size:12}))))))}K.displayName="Modal";exports.Modal=K;//# sourceMappingURL=Modal.cjs.map
|
|
2
2
|
//# sourceMappingURL=Modal.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/responsive.ts","../../src/components/Icon.tsx","../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/utils/usePortalKeyboardEvent.ts","../../src/components/Modal.tsx"],"names":["cn","inputs","twMerge","clsx","BASE_SIZES","RESPONSIVE_SIZES","getSizeKey","size","getResponsiveSize","baseSize","classes","styles","key","baseKey","responsiveClasses","s","breakpoint","valueStr","value","valueKey","COLOR_MAP","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","responsiveSizeClasses","responsiveSizeStyles","focusRingStyles","Pressable","children","type","disabled","usePortalKeyboardEvent","eventMap","isActive","preventScroll","handleKeyDown","useCallback","event","handler","useEffect","Modal","open","onClose","showCloseButton","n"],"mappings":"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","file":"Modal.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","export type Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\nexport type ResponsiveSize = number | `${Breakpoint}:${number}`;\n\ntype SizeKey =\n | \"12\"\n | \"16\"\n | \"18\"\n | \"20\"\n | \"24\"\n | \"32\"\n | \"36\"\n | \"40\"\n | \"42\"\n | \"48\"\n | \"64\"\n | \"72\";\n\n// These constants help Tailwind identify the classes during compilation\nconst BASE_SIZES: Record<SizeKey, string> = {\n \"12\": \"h-[12px] w-[12px]\",\n \"16\": \"h-[16px] w-[16px]\",\n \"18\": \"h-[18px] w-[18px]\",\n \"20\": \"h-[20px] w-[20px]\",\n \"24\": \"h-[24px] w-[24px]\",\n \"32\": \"h-[32px] w-[32px]\",\n \"36\": \"h-[36px] w-[36px]\",\n \"40\": \"h-[40px] w-[40px]\",\n \"42\": \"h-[42px] w-[42px]\",\n \"48\": \"h-[48px] w-[48px]\",\n \"64\": \"h-[64px] w-[64px]\",\n \"72\": \"h-[72px] w-[72px]\"\n};\n\nconst RESPONSIVE_SIZES: Record<Breakpoint, Record<SizeKey, string>> = {\n sm: {\n \"12\": \"sm:h-[12px] sm:w-[12px]\",\n \"16\": \"sm:h-[16px] sm:w-[16px]\",\n \"18\": \"sm:h-[18px] sm:w-[18px]\",\n \"20\": \"sm:h-[20px] sm:w-[20px]\",\n \"24\": \"sm:h-[24px] sm:w-[24px]\",\n \"32\": \"sm:h-[32px] sm:w-[32px]\",\n \"36\": \"sm:h-[36px] sm:w-[36px]\",\n \"40\": \"sm:h-[40px] sm:w-[40px]\",\n \"42\": \"sm:h-[42px] sm:w-[42px]\",\n \"48\": \"sm:h-[48px] sm:w-[48px]\",\n \"64\": \"sm:h-[64px] sm:w-[64px]\",\n \"72\": \"sm:h-[72px] sm:w-[72px]\"\n },\n md: {\n \"12\": \"md:h-[12px] md:w-[12px]\",\n \"16\": \"md:h-[16px] md:w-[16px]\",\n \"18\": \"md:h-[18px] md:w-[18px]\",\n \"20\": \"md:h-[20px] md:w-[20px]\",\n \"24\": \"md:h-[24px] md:w-[24px]\",\n \"32\": \"md:h-[32px] md:w-[32px]\",\n \"36\": \"md:h-[36px] md:w-[36px]\",\n \"40\": \"md:h-[40px] md:w-[40px]\",\n \"42\": \"md:h-[42px] md:w-[42px]\",\n \"48\": \"md:h-[48px] md:w-[48px]\",\n \"64\": \"md:h-[64px] md:w-[64px]\",\n \"72\": \"md:h-[72px] md:w-[72px]\"\n },\n lg: {\n \"12\": \"lg:h-[12px] lg:w-[12px]\",\n \"16\": \"lg:h-[16px] lg:w-[16px]\",\n \"18\": \"lg:h-[18px] lg:w-[18px]\",\n \"20\": \"lg:h-[20px] lg:w-[20px]\",\n \"24\": \"lg:h-[24px] lg:w-[24px]\",\n \"32\": \"lg:h-[32px] lg:w-[32px]\",\n \"36\": \"lg:h-[36px] lg:w-[36px]\",\n \"40\": \"lg:h-[40px] lg:w-[40px]\",\n \"42\": \"lg:h-[42px] lg:w-[42px]\",\n \"48\": \"lg:h-[48px] lg:w-[48px]\",\n \"64\": \"lg:h-[64px] lg:w-[64px]\",\n \"72\": \"lg:h-[72px] lg:w-[72px]\"\n },\n xl: {\n \"12\": \"xl:h-[12px] xl:w-[12px]\",\n \"16\": \"xl:h-[16px] xl:w-[16px]\",\n \"18\": \"xl:h-[18px] xl:w-[18px]\",\n \"20\": \"xl:h-[20px] xl:w-[20px]\",\n \"24\": \"xl:h-[24px] xl:w-[24px]\",\n \"32\": \"xl:h-[32px] xl:w-[32px]\",\n \"36\": \"xl:h-[36px] xl:w-[36px]\",\n \"40\": \"xl:h-[40px] xl:w-[40px]\",\n \"42\": \"xl:h-[42px] xl:w-[42px]\",\n \"48\": \"xl:h-[48px] xl:w-[48px]\",\n \"64\": \"xl:h-[64px] xl:w-[64px]\",\n \"72\": \"xl:h-[72px] xl:w-[72px]\"\n },\n \"2xl\": {\n \"12\": \"2xl:h-[12px] 2xl:w-[12px]\",\n \"16\": \"2xl:h-[16px] 2xl:w-[16px]\",\n \"18\": \"2xl:h-[18px] 2xl:w-[18px]\",\n \"20\": \"2xl:h-[20px] 2xl:w-[20px]\",\n \"24\": \"2xl:h-[24px] 2xl:w-[24px]\",\n \"32\": \"2xl:h-[32px] 2xl:w-[32px]\",\n \"36\": \"2xl:h-[36px] 2xl:w-[36px]\",\n \"40\": \"2xl:h-[40px] 2xl:w-[40px]\",\n \"42\": \"2xl:h-[42px] 2xl:w-[42px]\",\n \"48\": \"2xl:h-[48px] 2xl:w-[48px]\",\n \"64\": \"2xl:h-[64px] 2xl:w-[64px]\",\n \"72\": \"2xl:h-[72px] 2xl:w-[72px]\"\n }\n};\n\nconst getSizeKey = (size: number): SizeKey | undefined => {\n return String(size) as SizeKey;\n};\n\nexport const getResponsiveSize = (\n size: ResponsiveSize | ResponsiveSize[] | undefined,\n baseSize: number = 24\n): {\n responsiveSizeClasses: string;\n responsiveSizeStyles: Record<string, string>;\n} => {\n const classes: string[] = [];\n const styles: Record<string, string> = {};\n\n // If no size provided, use baseSize\n if (size === undefined) {\n const key = getSizeKey(baseSize);\n if (key) {\n classes.push(BASE_SIZES[key]);\n } else {\n styles.height = `${baseSize}px`;\n styles.width = `${baseSize}px`;\n }\n }\n\n // If size is a number, use that directly\n if (typeof size === \"number\") {\n const key = getSizeKey(size);\n if (key) {\n classes.push(BASE_SIZES[key]);\n } else {\n styles.height = `${size}px`;\n styles.width = `${size}px`;\n }\n }\n\n // If array of responsive sizes, generate responsive classes\n if (Array.isArray(size)) {\n const baseKey = getSizeKey(baseSize);\n const responsiveClasses = [\n (baseKey && BASE_SIZES[baseKey]) || `h-[${baseSize}px] w-[${baseSize}px]`\n ];\n\n size.forEach((s) => {\n if (typeof s === \"string\") {\n const [breakpoint, valueStr] = s.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n const key = getSizeKey(value);\n classes.push(\n (key && RESPONSIVE_SIZES[breakpoint]?.[key]) ||\n `${breakpoint}:h-[${value}px] ${breakpoint}:w-[${value}px]`\n );\n }\n });\n\n classes.push(...responsiveClasses);\n }\n\n if (typeof size === \"string\") {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n const valueKey = getSizeKey(value);\n classes.push(\n (valueKey && RESPONSIVE_SIZES[breakpoint]?.[valueKey]) ||\n `${breakpoint}:h-[${value}px] ${breakpoint}:w-[${value}px]`\n );\n }\n\n return {\n responsiveSizeClasses: classes.join(\" \"),\n responsiveSizeStyles: styles\n };\n};\n","import type { IconName } from \"@deckai/icons\";\nimport { IconMap } from \"@deckai/icons\";\nimport type { SVGProps } from \"react\";\nimport React from \"react\";\n\nimport type { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\nimport type { ResponsiveSize } from \"../utils/responsive\";\nimport { getResponsiveSize } from \"../utils/responsive\";\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\n// Using CSS variables to support dark mode\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"var(--color-primary)\",\n secondary: \"var(--color-secondary)\",\n white: \"var(--color-white)\",\n primaryBlue: \"var(--color-primary-100)\",\n disabled: \"var(--color-disabled)\",\n danger: \"var(--color-danger)\"\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 { responsiveSizeClasses, responsiveSizeStyles } = getResponsiveSize(\n size,\n 24\n );\n\n return (\n <div\n className={cn(\n \"flex justify-center items-center\",\n responsiveSizeClasses,\n className\n )}\n style={{\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...responsiveSizeStyles,\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 type { 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 const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const sizes = [\"24\", \"42\", \"48\", \"64\", \"72\"]; // Add all the sizes you need\n\n const safelist: (string | { pattern: RegExp; variants: 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 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 // Generate size classes with responsive variants\n const sizeClasses = sizes.flatMap((size) => [\n `h-[${size}px]`,\n `w-[${size}px]`,\n ...breakpoints.flatMap((bp) => [\n `${bp}:h-[${size}px]`,\n `${bp}:w-[${size}px]`\n ])\n ]);\n\n return [...typographyClasses, ...responsiveTypographyClasses, ...sizeClasses];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100\";\nexport const focusRingWithinStyles =\n \"focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-100\";\nexport const focusRingStylesCoerced = \"ring-2 ring-primary-100\";\n","import type { ButtonHTMLAttributes } from \"react\";\nimport React from \"react\";\n\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\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 } from \"react\";\n\ntype KeyboardEventHandler = (event: KeyboardEvent) => void;\n\ntype KeyboardEventOptions = {\n /**\n * Whether the event should be active\n */\n isActive?: boolean;\n /**\n * Whether to prevent body scroll when active\n * @default false\n */\n preventScroll?: boolean;\n};\n\n/**\n * Hook for handling keyboard events within portals\n * @param eventMap - Map of keyboard events to their handlers\n * @param options - Options for the keyboard events\n * @example\n * ```tsx\n * const handleKeyboardEvents = usePortalKeyboardEvent({\n * Escape: onClose,\n * Enter: onConfirm,\n * }, { isActive: isOpen });\n * ```\n */\nexport const usePortalKeyboardEvent = (\n eventMap: Record<string, KeyboardEventHandler>,\n { isActive = true, preventScroll = false }: KeyboardEventOptions = {}\n) => {\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n const handler = eventMap[event.key];\n if (handler) {\n handler(event);\n }\n },\n [eventMap]\n );\n\n useEffect(() => {\n if (isActive) {\n document.addEventListener(\"keydown\", handleKeyDown);\n if (preventScroll) {\n document.body.style.overflow = \"hidden\";\n }\n }\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n if (preventScroll) {\n document.body.style.overflow = \"unset\";\n }\n };\n }, [isActive, handleKeyDown, preventScroll]);\n};\n","import * as Dialog from \"@radix-ui/react-dialog\";\nimport React, { type ReactNode } from \"react\";\n\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\nimport { Pressable } from \"./Pressable\";\nimport { usePortalKeyboardEvent } from \"../utils/usePortalKeyboardEvent\";\n\nexport type ModalProps = {\n /**\n * The content to be rendered inside the modal\n */\n children: ReactNode;\n /**\n * Whether the modal is open\n */\n open: boolean;\n /**\n * Callback fired when the modal is closed\n */\n onClose: () => void;\n /**\n * Additional class names to be applied to the modal\n */\n className?: string;\n /**\n * Whether to show the close button\n * @default true\n */\n showCloseButton?: boolean;\n};\n\nexport function Modal({\n children,\n open,\n onClose,\n className,\n showCloseButton = true\n}: ModalProps) {\n usePortalKeyboardEvent(\n { Escape: onClose },\n { isActive: open, preventScroll: true }\n );\n\n return (\n <Dialog.Root open={open} onOpenChange={onClose}>\n <Dialog.Portal>\n <Dialog.Overlay\n className={cn(\n \"fixed inset-0 z-50 bg-sidebarOverlay backdrop-blur-[2px]\",\n \"data-[state=open]:animate-overlay-show\",\n \"data-[state=closed]:animate-overlay-hide\"\n )}\n />\n <Dialog.Content\n className={cn(\n \"fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2\",\n \"w-[90vw] max-w-[90vw] max-h-[90vh]\",\n \"rounded-xl overflow-hidden\",\n \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n \"data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2\",\n \"data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]\",\n className\n )}\n >\n {children}\n {showCloseButton && (\n <Dialog.Close asChild>\n <Pressable\n className=\"inline-flex items-center justify-center text-secondary absolute top-4 right-4\"\n aria-label=\"Close\"\n >\n <Icon name=\"close\" size={12} />\n </Pressable>\n </Dialog.Close>\n )}\n </Dialog.Content>\n </Dialog.Portal>\n </Dialog.Root>\n );\n}\n\nModal.displayName = \"Modal\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/responsive.ts","../../src/components/Icon.tsx","../../src/components/Pressable.tsx","../../src/utils/tailwind.ts","../../src/utils/usePortalKeyboardEvent.ts","../../src/components/Modal.tsx"],"names":["cn","inputs","twMerge","clsx","BASE_SIZES","RESPONSIVE_SIZES","getSizeKey","size","getResponsiveSize","baseSize","classes","styles","key","baseKey","responsiveClasses","s","breakpoint","valueStr","value","valueKey","COLOR_MAP","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","responsiveSizeClasses","responsiveSizeStyles","focusRingStyles","Pressable","children","type","disabled","usePortalKeyboardEvent","eventMap","isActive","preventScroll","handleKeyDown","useCallback","event","handler","useEffect","Modal","open","onClose","showCloseButton","x"],"mappings":"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","file":"Modal.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","export type Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\nexport type ResponsiveSize = number | `${Breakpoint}:${number}`;\n\ntype SizeKey =\n | \"12\"\n | \"16\"\n | \"18\"\n | \"20\"\n | \"24\"\n | \"32\"\n | \"36\"\n | \"40\"\n | \"42\"\n | \"48\"\n | \"64\"\n | \"72\"\n | \"80\";\n\n// These constants help Tailwind identify the classes during compilation\nconst BASE_SIZES: Record<SizeKey, string> = {\n \"12\": \"h-[12px] w-[12px]\",\n \"16\": \"h-[16px] w-[16px]\",\n \"18\": \"h-[18px] w-[18px]\",\n \"20\": \"h-[20px] w-[20px]\",\n \"24\": \"h-[24px] w-[24px]\",\n \"32\": \"h-[32px] w-[32px]\",\n \"36\": \"h-[36px] w-[36px]\",\n \"40\": \"h-[40px] w-[40px]\",\n \"42\": \"h-[42px] w-[42px]\",\n \"48\": \"h-[48px] w-[48px]\",\n \"64\": \"h-[64px] w-[64px]\",\n \"72\": \"h-[72px] w-[72px]\",\n \"80\": \"h-[80px] w-[80px]\"\n};\n\nconst RESPONSIVE_SIZES: Record<Breakpoint, Record<SizeKey, string>> = {\n sm: {\n \"12\": \"sm:h-[12px] sm:w-[12px]\",\n \"16\": \"sm:h-[16px] sm:w-[16px]\",\n \"18\": \"sm:h-[18px] sm:w-[18px]\",\n \"20\": \"sm:h-[20px] sm:w-[20px]\",\n \"24\": \"sm:h-[24px] sm:w-[24px]\",\n \"32\": \"sm:h-[32px] sm:w-[32px]\",\n \"36\": \"sm:h-[36px] sm:w-[36px]\",\n \"40\": \"sm:h-[40px] sm:w-[40px]\",\n \"42\": \"sm:h-[42px] sm:w-[42px]\",\n \"48\": \"sm:h-[48px] sm:w-[48px]\",\n \"64\": \"sm:h-[64px] sm:w-[64px]\",\n \"72\": \"sm:h-[72px] sm:w-[72px]\",\n \"80\": \"sm:h-[80px] sm:w-[80px]\"\n },\n md: {\n \"12\": \"md:h-[12px] md:w-[12px]\",\n \"16\": \"md:h-[16px] md:w-[16px]\",\n \"18\": \"md:h-[18px] md:w-[18px]\",\n \"20\": \"md:h-[20px] md:w-[20px]\",\n \"24\": \"md:h-[24px] md:w-[24px]\",\n \"32\": \"md:h-[32px] md:w-[32px]\",\n \"36\": \"md:h-[36px] md:w-[36px]\",\n \"40\": \"md:h-[40px] md:w-[40px]\",\n \"42\": \"md:h-[42px] md:w-[42px]\",\n \"48\": \"md:h-[48px] md:w-[48px]\",\n \"64\": \"md:h-[64px] md:w-[64px]\",\n \"72\": \"md:h-[72px] md:w-[72px]\",\n \"80\": \"md:h-[80px] md:w-[80px]\"\n },\n lg: {\n \"12\": \"lg:h-[12px] lg:w-[12px]\",\n \"16\": \"lg:h-[16px] lg:w-[16px]\",\n \"18\": \"lg:h-[18px] lg:w-[18px]\",\n \"20\": \"lg:h-[20px] lg:w-[20px]\",\n \"24\": \"lg:h-[24px] lg:w-[24px]\",\n \"32\": \"lg:h-[32px] lg:w-[32px]\",\n \"36\": \"lg:h-[36px] lg:w-[36px]\",\n \"40\": \"lg:h-[40px] lg:w-[40px]\",\n \"42\": \"lg:h-[42px] lg:w-[42px]\",\n \"48\": \"lg:h-[48px] lg:w-[48px]\",\n \"64\": \"lg:h-[64px] lg:w-[64px]\",\n \"72\": \"lg:h-[72px] lg:w-[72px]\",\n \"80\": \"lg:h-[80px] lg:w-[80px]\"\n },\n xl: {\n \"12\": \"xl:h-[12px] xl:w-[12px]\",\n \"16\": \"xl:h-[16px] xl:w-[16px]\",\n \"18\": \"xl:h-[18px] xl:w-[18px]\",\n \"20\": \"xl:h-[20px] xl:w-[20px]\",\n \"24\": \"xl:h-[24px] xl:w-[24px]\",\n \"32\": \"xl:h-[32px] xl:w-[32px]\",\n \"36\": \"xl:h-[36px] xl:w-[36px]\",\n \"40\": \"xl:h-[40px] xl:w-[40px]\",\n \"42\": \"xl:h-[42px] xl:w-[42px]\",\n \"48\": \"xl:h-[48px] xl:w-[48px]\",\n \"64\": \"xl:h-[64px] xl:w-[64px]\",\n \"72\": \"xl:h-[72px] xl:w-[72px]\",\n \"80\": \"xl:h-[80px] xl:w-[80px]\"\n },\n \"2xl\": {\n \"12\": \"2xl:h-[12px] 2xl:w-[12px]\",\n \"16\": \"2xl:h-[16px] 2xl:w-[16px]\",\n \"18\": \"2xl:h-[18px] 2xl:w-[18px]\",\n \"20\": \"2xl:h-[20px] 2xl:w-[20px]\",\n \"24\": \"2xl:h-[24px] 2xl:w-[24px]\",\n \"32\": \"2xl:h-[32px] 2xl:w-[32px]\",\n \"36\": \"2xl:h-[36px] 2xl:w-[36px]\",\n \"40\": \"2xl:h-[40px] 2xl:w-[40px]\",\n \"42\": \"2xl:h-[42px] 2xl:w-[42px]\",\n \"48\": \"2xl:h-[48px] 2xl:w-[48px]\",\n \"64\": \"2xl:h-[64px] 2xl:w-[64px]\",\n \"72\": \"2xl:h-[72px] 2xl:w-[72px]\",\n \"80\": \"2xl:h-[80px] 2xl:w-[80px]\"\n }\n};\n\nconst getSizeKey = (size: number): SizeKey | undefined => {\n return String(size) as SizeKey;\n};\n\nexport const getResponsiveSize = (\n size: ResponsiveSize | ResponsiveSize[] | undefined,\n baseSize: number = 24\n): {\n responsiveSizeClasses: string;\n responsiveSizeStyles: Record<string, string>;\n} => {\n const classes: string[] = [];\n const styles: Record<string, string> = {};\n\n // If no size provided, use baseSize\n if (size === undefined) {\n const key = getSizeKey(baseSize);\n if (key) {\n classes.push(BASE_SIZES[key]);\n } else {\n styles.height = `${baseSize}px`;\n styles.width = `${baseSize}px`;\n }\n }\n\n // If size is a number, use that directly\n if (typeof size === \"number\") {\n const key = getSizeKey(size);\n if (key) {\n classes.push(BASE_SIZES[key]);\n } else {\n styles.height = `${size}px`;\n styles.width = `${size}px`;\n }\n }\n\n // If array of responsive sizes, generate responsive classes\n if (Array.isArray(size)) {\n const baseKey = getSizeKey(baseSize);\n const responsiveClasses = [\n (baseKey && BASE_SIZES[baseKey]) || `h-[${baseSize}px] w-[${baseSize}px]`\n ];\n\n size.forEach((s) => {\n if (typeof s === \"string\") {\n const [breakpoint, valueStr] = s.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n const key = getSizeKey(value);\n classes.push(\n (key && RESPONSIVE_SIZES[breakpoint]?.[key]) ||\n `${breakpoint}:h-[${value}px] ${breakpoint}:w-[${value}px]`\n );\n }\n });\n\n classes.push(...responsiveClasses);\n }\n\n if (typeof size === \"string\") {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n const valueKey = getSizeKey(value);\n classes.push(\n (valueKey && RESPONSIVE_SIZES[breakpoint]?.[valueKey]) ||\n `${breakpoint}:h-[${value}px] ${breakpoint}:w-[${value}px]`\n );\n }\n\n return {\n responsiveSizeClasses: classes.join(\" \"),\n responsiveSizeStyles: styles\n };\n};\n","import type { IconName } from \"@deckai/icons\";\nimport { IconMap } from \"@deckai/icons\";\nimport type { SVGProps } from \"react\";\nimport React from \"react\";\n\nimport type { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\nimport type { ResponsiveSize } from \"../utils/responsive\";\nimport { getResponsiveSize } from \"../utils/responsive\";\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\n// Using CSS variables to support dark mode\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"var(--color-primary)\",\n secondary: \"var(--color-secondary)\",\n white: \"var(--color-white)\",\n primaryBlue: \"var(--color-primary-100)\",\n disabled: \"var(--color-disabled)\",\n danger: \"var(--color-danger)\",\n tertiary: \"var(--color-tertiary-20)\"\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 { responsiveSizeClasses, responsiveSizeStyles } = getResponsiveSize(\n size,\n 24\n );\n\n return (\n <div\n className={cn(\n \"flex justify-center items-center\",\n responsiveSizeClasses,\n className\n )}\n style={{\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...responsiveSizeStyles,\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 type { ButtonHTMLAttributes } from \"react\";\nimport React from \"react\";\n\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\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 type { 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 const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const sizes = [\"24\", \"42\", \"48\", \"64\", \"72\"]; // Add all the sizes you need\n\n const safelist: (string | { pattern: RegExp; variants: 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 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 // Generate size classes with responsive variants\n const sizeClasses = sizes.flatMap((size) => [\n `h-[${size}px]`,\n `w-[${size}px]`,\n ...breakpoints.flatMap((bp) => [\n `${bp}:h-[${size}px]`,\n `${bp}:w-[${size}px]`\n ])\n ]);\n\n return [...typographyClasses, ...responsiveTypographyClasses, ...sizeClasses];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100\";\nexport const focusRingWithinStyles =\n \"focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-100\";\nexport const focusRingStylesCoerced = \"ring-2 ring-primary-100\";\n","import { useCallback, useEffect } from \"react\";\n\ntype KeyboardEventHandler = (event: KeyboardEvent) => void;\n\ntype KeyboardEventOptions = {\n /**\n * Whether the event should be active\n */\n isActive?: boolean;\n /**\n * Whether to prevent body scroll when active\n * @default false\n */\n preventScroll?: boolean;\n};\n\n/**\n * Hook for handling keyboard events within portals\n * @param eventMap - Map of keyboard events to their handlers\n * @param options - Options for the keyboard events\n * @example\n * ```tsx\n * const handleKeyboardEvents = usePortalKeyboardEvent({\n * Escape: onClose,\n * Enter: onConfirm,\n * }, { isActive: isOpen });\n * ```\n */\nexport const usePortalKeyboardEvent = (\n eventMap: Record<string, KeyboardEventHandler>,\n { isActive = true, preventScroll = false }: KeyboardEventOptions = {}\n) => {\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n const handler = eventMap[event.key];\n if (handler) {\n handler(event);\n }\n },\n [eventMap]\n );\n\n useEffect(() => {\n if (isActive) {\n document.addEventListener(\"keydown\", handleKeyDown);\n if (preventScroll) {\n document.body.style.overflow = \"hidden\";\n }\n }\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n if (preventScroll) {\n document.body.style.overflow = \"unset\";\n }\n };\n }, [isActive, handleKeyDown, preventScroll]);\n};\n","import * as Dialog from \"@radix-ui/react-dialog\";\nimport React, { type ReactNode } from \"react\";\n\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\nimport { Pressable } from \"./Pressable\";\nimport { usePortalKeyboardEvent } from \"../utils/usePortalKeyboardEvent\";\n\nexport type ModalProps = {\n /**\n * The content to be rendered inside the modal\n */\n children: ReactNode;\n /**\n * Whether the modal is open\n */\n open: boolean;\n /**\n * Callback fired when the modal is closed\n */\n onClose: () => void;\n /**\n * Additional class names to be applied to the modal\n */\n className?: string;\n /**\n * Whether to show the close button\n * @default true\n */\n showCloseButton?: boolean;\n};\n\nexport function Modal({\n children,\n open,\n onClose,\n className,\n showCloseButton = true\n}: ModalProps) {\n usePortalKeyboardEvent(\n { Escape: onClose },\n { isActive: open, preventScroll: true }\n );\n\n return (\n <Dialog.Root open={open} onOpenChange={onClose}>\n <Dialog.Portal>\n <Dialog.Overlay\n className={cn(\n \"fixed inset-0 z-50 bg-sidebarOverlay backdrop-blur-[2px]\",\n \"data-[state=open]:animate-overlay-show\",\n \"data-[state=closed]:animate-overlay-hide\"\n )}\n />\n <Dialog.Content\n className={cn(\n \"fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2\",\n \"w-[90vw] max-w-[90vw] max-h-[90vh]\",\n \"rounded-xl overflow-hidden\",\n \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n \"data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2\",\n \"data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]\",\n className\n )}\n >\n {children}\n {showCloseButton && (\n <Dialog.Close asChild>\n <Pressable\n className=\"inline-flex items-center justify-center text-secondary absolute top-4 right-4\"\n aria-label=\"Close\"\n >\n <Icon name=\"close\" size={12} />\n </Pressable>\n </Dialog.Close>\n )}\n </Dialog.Content>\n </Dialog.Portal>\n </Dialog.Root>\n );\n}\n\nModal.displayName = \"Modal\";\n"]}
|
package/dist/components/Modal.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as x from'@radix-ui/react-dialog';import i,{useCallback,useEffect}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {IconMap}from'@deckai/icons';function a(...e){return twMerge(clsx(e))}var w={12:"h-[12px] w-[12px]",16:"h-[16px] w-[16px]",18:"h-[18px] w-[18px]",20:"h-[20px] w-[20px]",24:"h-[24px] w-[24px]",32:"h-[32px] w-[32px]",36:"h-[36px] w-[36px]",40:"h-[40px] w-[40px]",42:"h-[42px] w-[42px]",48:"h-[48px] w-[48px]",64:"h-[64px] w-[64px]",72:"h-[72px] w-[72px]",80:"h-[80px] w-[80px]"},u={sm:{12:"sm:h-[12px] sm:w-[12px]",16:"sm:h-[16px] sm:w-[16px]",18:"sm:h-[18px] sm:w-[18px]",20:"sm:h-[20px] sm:w-[20px]",24:"sm:h-[24px] sm:w-[24px]",32:"sm:h-[32px] sm:w-[32px]",36:"sm:h-[36px] sm:w-[36px]",40:"sm:h-[40px] sm:w-[40px]",42:"sm:h-[42px] sm:w-[42px]",48:"sm:h-[48px] sm:w-[48px]",64:"sm:h-[64px] sm:w-[64px]",72:"sm:h-[72px] sm:w-[72px]",80:"sm:h-[80px] sm:w-[80px]"},md:{12:"md:h-[12px] md:w-[12px]",16:"md:h-[16px] md:w-[16px]",18:"md:h-[18px] md:w-[18px]",20:"md:h-[20px] md:w-[20px]",24:"md:h-[24px] md:w-[24px]",32:"md:h-[32px] md:w-[32px]",36:"md:h-[36px] md:w-[36px]",40:"md:h-[40px] md:w-[40px]",42:"md:h-[42px] md:w-[42px]",48:"md:h-[48px] md:w-[48px]",64:"md:h-[64px] md:w-[64px]",72:"md:h-[72px] md:w-[72px]",80:"md:h-[80px] md:w-[80px]"},lg:{12:"lg:h-[12px] lg:w-[12px]",16:"lg:h-[16px] lg:w-[16px]",18:"lg:h-[18px] lg:w-[18px]",20:"lg:h-[20px] lg:w-[20px]",24:"lg:h-[24px] lg:w-[24px]",32:"lg:h-[32px] lg:w-[32px]",36:"lg:h-[36px] lg:w-[36px]",40:"lg:h-[40px] lg:w-[40px]",42:"lg:h-[42px] lg:w-[42px]",48:"lg:h-[48px] lg:w-[48px]",64:"lg:h-[64px] lg:w-[64px]",72:"lg:h-[72px] lg:w-[72px]",80:"lg:h-[80px] lg:w-[80px]"},xl:{12:"xl:h-[12px] xl:w-[12px]",16:"xl:h-[16px] xl:w-[16px]",18:"xl:h-[18px] xl:w-[18px]",20:"xl:h-[20px] xl:w-[20px]",24:"xl:h-[24px] xl:w-[24px]",32:"xl:h-[32px] xl:w-[32px]",36:"xl:h-[36px] xl:w-[36px]",40:"xl:h-[40px] xl:w-[40px]",42:"xl:h-[42px] xl:w-[42px]",48:"xl:h-[48px] xl:w-[48px]",64:"xl:h-[64px] xl:w-[64px]",72:"xl:h-[72px] xl:w-[72px]",80:"xl:h-[80px] xl:w-[80px]"},"2xl":{12:"2xl:h-[12px] 2xl:w-[12px]",16:"2xl:h-[16px] 2xl:w-[16px]",18:"2xl:h-[18px] 2xl:w-[18px]",20:"2xl:h-[20px] 2xl:w-[20px]",24:"2xl:h-[24px] 2xl:w-[24px]",32:"2xl:h-[32px] 2xl:w-[32px]",36:"2xl:h-[36px] 2xl:w-[36px]",40:"2xl:h-[40px] 2xl:w-[40px]",42:"2xl:h-[42px] 2xl:w-[42px]",48:"2xl:h-[48px] 2xl:w-[48px]",64:"2xl:h-[64px] 2xl:w-[64px]",72:"2xl:h-[72px] 2xl:w-[72px]",80:"2xl:h-[80px] 2xl:w-[80px]"}},d=e=>String(e),v=(e,s=24)=>{let o=[],p={};if(e===void 0){let t=d(s);t?o.push(w[t]):(p.height=`${s}px`,p.width=`${s}px`);}if(typeof e=="number"){let t=d(e);t?o.push(w[t]):(p.height=`${e}px`,p.width=`${e}px`);}if(Array.isArray(e)){let t=d(s),r=[t&&w[t]||`h-[${s}px] w-[${s}px]`];e.forEach(n=>{if(typeof n=="string"){let[l,h]=n.split(":"),m=parseInt(h,10),c=d(m);o.push(c&&u[l]?.[c]||`${l}:h-[${m}px] ${l}:w-[${m}px]`);}}),o.push(...r);}if(typeof e=="string"){let[t,r]=e.split(":"),n=parseInt(r,10),l=d(n);o.push(l&&u[t]?.[l]||`${t}:h-[${n}px] ${t}:w-[${n}px]`);}return {responsiveSizeClasses:o.join(" "),responsiveSizeStyles:p}};var b={primary:"var(--color-primary)",secondary:"var(--color-secondary)",white:"var(--color-white)",primaryBlue:"var(--color-primary-100)",disabled:"var(--color-disabled)",danger:"var(--color-danger)",tertiary:"var(--color-tertiary-20)"},y=i.forwardRef(({name:e,size:s=24,color:o="primary",title:p,className:t,style:r={},...n},l)=>{let h=IconMap[e],{responsiveSizeClasses:m,responsiveSizeStyles:c}=v(s,24);return i.createElement("div",{className:a("flex justify-center items-center",m,t),style:{"--icon-stroke":b[o],...c,...r}},i.createElement(h,{ref:l,"aria-hidden":!p,"aria-label":p,stroke:e.includes("filled")?void 0:b[o],...n}))});y.displayName="Icon";var $="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100";var g=i.forwardRef(({children:e,type:s="button",className:o,disabled:p,...t},r)=>i.createElement("button",{ref:r,type:s,disabled:p,className:a("appearance-none hover:opacity-80 transition-all active:scale-95",$,p&&"opacity-50 cursor-not-allowed",o),...t},e));g.displayName="Pressable";var E=(e,{isActive:s=true,preventScroll:o=false}={})=>{let p=useCallback(t=>{let r=e[t.key];r&&r(t);},[e]);useEffect(()=>(s&&(document.addEventListener("keydown",p),o&&(document.body.style.overflow="hidden")),()=>{document.removeEventListener("keydown",p),o&&(document.body.style.overflow="unset");}),[s,p,o]);};function K({children:e,open:s,onClose:o,className:p,showCloseButton:t=true}){return E({Escape:o},{isActive:s,preventScroll:true}),i.createElement(x.Root,{open:s,onOpenChange:o},i.createElement(x.Portal,null,i.createElement(x.Overlay,{className:a("fixed inset-0 z-50 bg-sidebarOverlay backdrop-blur-[2px]","data-[state=open]:animate-overlay-show","data-[state=closed]:animate-overlay-hide")}),i.createElement(x.Content,{className:a("fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2","w-[90vw] max-w-[90vw] max-h-[90vh]","rounded-xl overflow-hidden","data-[state=open]:animate-in data-[state=closed]:animate-out","data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0","data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95","data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2","data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]",p)},e,t&&i.createElement(x.Close,{asChild:true},i.createElement(g,{className:"inline-flex items-center justify-center text-secondary absolute top-4 right-4","aria-label":"Close"},i.createElement(y,{name:"close",size:12}))))))}K.displayName="Modal";export{K as Modal};//# sourceMappingURL=Modal.js.map
|
|
2
2
|
//# sourceMappingURL=Modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/responsive.ts","../../src/components/Icon.tsx","../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/utils/usePortalKeyboardEvent.ts","../../src/components/Modal.tsx"],"names":["cn","inputs","twMerge","clsx","BASE_SIZES","RESPONSIVE_SIZES","getSizeKey","size","getResponsiveSize","baseSize","classes","styles","key","baseKey","responsiveClasses","s","breakpoint","valueStr","value","valueKey","COLOR_MAP","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","responsiveSizeClasses","responsiveSizeStyles","focusRingStyles","Pressable","children","type","disabled","usePortalKeyboardEvent","eventMap","isActive","preventScroll","handleKeyDown","useCallback","event","handler","useEffect","Modal","open","onClose","showCloseButton"],"mappings":"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","file":"Modal.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","export type Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\nexport type ResponsiveSize = number | `${Breakpoint}:${number}`;\n\ntype SizeKey =\n | \"12\"\n | \"16\"\n | \"18\"\n | \"20\"\n | \"24\"\n | \"32\"\n | \"36\"\n | \"40\"\n | \"42\"\n | \"48\"\n | \"64\"\n | \"72\";\n\n// These constants help Tailwind identify the classes during compilation\nconst BASE_SIZES: Record<SizeKey, string> = {\n \"12\": \"h-[12px] w-[12px]\",\n \"16\": \"h-[16px] w-[16px]\",\n \"18\": \"h-[18px] w-[18px]\",\n \"20\": \"h-[20px] w-[20px]\",\n \"24\": \"h-[24px] w-[24px]\",\n \"32\": \"h-[32px] w-[32px]\",\n \"36\": \"h-[36px] w-[36px]\",\n \"40\": \"h-[40px] w-[40px]\",\n \"42\": \"h-[42px] w-[42px]\",\n \"48\": \"h-[48px] w-[48px]\",\n \"64\": \"h-[64px] w-[64px]\",\n \"72\": \"h-[72px] w-[72px]\"\n};\n\nconst RESPONSIVE_SIZES: Record<Breakpoint, Record<SizeKey, string>> = {\n sm: {\n \"12\": \"sm:h-[12px] sm:w-[12px]\",\n \"16\": \"sm:h-[16px] sm:w-[16px]\",\n \"18\": \"sm:h-[18px] sm:w-[18px]\",\n \"20\": \"sm:h-[20px] sm:w-[20px]\",\n \"24\": \"sm:h-[24px] sm:w-[24px]\",\n \"32\": \"sm:h-[32px] sm:w-[32px]\",\n \"36\": \"sm:h-[36px] sm:w-[36px]\",\n \"40\": \"sm:h-[40px] sm:w-[40px]\",\n \"42\": \"sm:h-[42px] sm:w-[42px]\",\n \"48\": \"sm:h-[48px] sm:w-[48px]\",\n \"64\": \"sm:h-[64px] sm:w-[64px]\",\n \"72\": \"sm:h-[72px] sm:w-[72px]\"\n },\n md: {\n \"12\": \"md:h-[12px] md:w-[12px]\",\n \"16\": \"md:h-[16px] md:w-[16px]\",\n \"18\": \"md:h-[18px] md:w-[18px]\",\n \"20\": \"md:h-[20px] md:w-[20px]\",\n \"24\": \"md:h-[24px] md:w-[24px]\",\n \"32\": \"md:h-[32px] md:w-[32px]\",\n \"36\": \"md:h-[36px] md:w-[36px]\",\n \"40\": \"md:h-[40px] md:w-[40px]\",\n \"42\": \"md:h-[42px] md:w-[42px]\",\n \"48\": \"md:h-[48px] md:w-[48px]\",\n \"64\": \"md:h-[64px] md:w-[64px]\",\n \"72\": \"md:h-[72px] md:w-[72px]\"\n },\n lg: {\n \"12\": \"lg:h-[12px] lg:w-[12px]\",\n \"16\": \"lg:h-[16px] lg:w-[16px]\",\n \"18\": \"lg:h-[18px] lg:w-[18px]\",\n \"20\": \"lg:h-[20px] lg:w-[20px]\",\n \"24\": \"lg:h-[24px] lg:w-[24px]\",\n \"32\": \"lg:h-[32px] lg:w-[32px]\",\n \"36\": \"lg:h-[36px] lg:w-[36px]\",\n \"40\": \"lg:h-[40px] lg:w-[40px]\",\n \"42\": \"lg:h-[42px] lg:w-[42px]\",\n \"48\": \"lg:h-[48px] lg:w-[48px]\",\n \"64\": \"lg:h-[64px] lg:w-[64px]\",\n \"72\": \"lg:h-[72px] lg:w-[72px]\"\n },\n xl: {\n \"12\": \"xl:h-[12px] xl:w-[12px]\",\n \"16\": \"xl:h-[16px] xl:w-[16px]\",\n \"18\": \"xl:h-[18px] xl:w-[18px]\",\n \"20\": \"xl:h-[20px] xl:w-[20px]\",\n \"24\": \"xl:h-[24px] xl:w-[24px]\",\n \"32\": \"xl:h-[32px] xl:w-[32px]\",\n \"36\": \"xl:h-[36px] xl:w-[36px]\",\n \"40\": \"xl:h-[40px] xl:w-[40px]\",\n \"42\": \"xl:h-[42px] xl:w-[42px]\",\n \"48\": \"xl:h-[48px] xl:w-[48px]\",\n \"64\": \"xl:h-[64px] xl:w-[64px]\",\n \"72\": \"xl:h-[72px] xl:w-[72px]\"\n },\n \"2xl\": {\n \"12\": \"2xl:h-[12px] 2xl:w-[12px]\",\n \"16\": \"2xl:h-[16px] 2xl:w-[16px]\",\n \"18\": \"2xl:h-[18px] 2xl:w-[18px]\",\n \"20\": \"2xl:h-[20px] 2xl:w-[20px]\",\n \"24\": \"2xl:h-[24px] 2xl:w-[24px]\",\n \"32\": \"2xl:h-[32px] 2xl:w-[32px]\",\n \"36\": \"2xl:h-[36px] 2xl:w-[36px]\",\n \"40\": \"2xl:h-[40px] 2xl:w-[40px]\",\n \"42\": \"2xl:h-[42px] 2xl:w-[42px]\",\n \"48\": \"2xl:h-[48px] 2xl:w-[48px]\",\n \"64\": \"2xl:h-[64px] 2xl:w-[64px]\",\n \"72\": \"2xl:h-[72px] 2xl:w-[72px]\"\n }\n};\n\nconst getSizeKey = (size: number): SizeKey | undefined => {\n return String(size) as SizeKey;\n};\n\nexport const getResponsiveSize = (\n size: ResponsiveSize | ResponsiveSize[] | undefined,\n baseSize: number = 24\n): {\n responsiveSizeClasses: string;\n responsiveSizeStyles: Record<string, string>;\n} => {\n const classes: string[] = [];\n const styles: Record<string, string> = {};\n\n // If no size provided, use baseSize\n if (size === undefined) {\n const key = getSizeKey(baseSize);\n if (key) {\n classes.push(BASE_SIZES[key]);\n } else {\n styles.height = `${baseSize}px`;\n styles.width = `${baseSize}px`;\n }\n }\n\n // If size is a number, use that directly\n if (typeof size === \"number\") {\n const key = getSizeKey(size);\n if (key) {\n classes.push(BASE_SIZES[key]);\n } else {\n styles.height = `${size}px`;\n styles.width = `${size}px`;\n }\n }\n\n // If array of responsive sizes, generate responsive classes\n if (Array.isArray(size)) {\n const baseKey = getSizeKey(baseSize);\n const responsiveClasses = [\n (baseKey && BASE_SIZES[baseKey]) || `h-[${baseSize}px] w-[${baseSize}px]`\n ];\n\n size.forEach((s) => {\n if (typeof s === \"string\") {\n const [breakpoint, valueStr] = s.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n const key = getSizeKey(value);\n classes.push(\n (key && RESPONSIVE_SIZES[breakpoint]?.[key]) ||\n `${breakpoint}:h-[${value}px] ${breakpoint}:w-[${value}px]`\n );\n }\n });\n\n classes.push(...responsiveClasses);\n }\n\n if (typeof size === \"string\") {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n const valueKey = getSizeKey(value);\n classes.push(\n (valueKey && RESPONSIVE_SIZES[breakpoint]?.[valueKey]) ||\n `${breakpoint}:h-[${value}px] ${breakpoint}:w-[${value}px]`\n );\n }\n\n return {\n responsiveSizeClasses: classes.join(\" \"),\n responsiveSizeStyles: styles\n };\n};\n","import type { IconName } from \"@deckai/icons\";\nimport { IconMap } from \"@deckai/icons\";\nimport type { SVGProps } from \"react\";\nimport React from \"react\";\n\nimport type { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\nimport type { ResponsiveSize } from \"../utils/responsive\";\nimport { getResponsiveSize } from \"../utils/responsive\";\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\n// Using CSS variables to support dark mode\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"var(--color-primary)\",\n secondary: \"var(--color-secondary)\",\n white: \"var(--color-white)\",\n primaryBlue: \"var(--color-primary-100)\",\n disabled: \"var(--color-disabled)\",\n danger: \"var(--color-danger)\"\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 { responsiveSizeClasses, responsiveSizeStyles } = getResponsiveSize(\n size,\n 24\n );\n\n return (\n <div\n className={cn(\n \"flex justify-center items-center\",\n responsiveSizeClasses,\n className\n )}\n style={{\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...responsiveSizeStyles,\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 type { 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 const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const sizes = [\"24\", \"42\", \"48\", \"64\", \"72\"]; // Add all the sizes you need\n\n const safelist: (string | { pattern: RegExp; variants: 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 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 // Generate size classes with responsive variants\n const sizeClasses = sizes.flatMap((size) => [\n `h-[${size}px]`,\n `w-[${size}px]`,\n ...breakpoints.flatMap((bp) => [\n `${bp}:h-[${size}px]`,\n `${bp}:w-[${size}px]`\n ])\n ]);\n\n return [...typographyClasses, ...responsiveTypographyClasses, ...sizeClasses];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100\";\nexport const focusRingWithinStyles =\n \"focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-100\";\nexport const focusRingStylesCoerced = \"ring-2 ring-primary-100\";\n","import type { ButtonHTMLAttributes } from \"react\";\nimport React from \"react\";\n\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\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 } from \"react\";\n\ntype KeyboardEventHandler = (event: KeyboardEvent) => void;\n\ntype KeyboardEventOptions = {\n /**\n * Whether the event should be active\n */\n isActive?: boolean;\n /**\n * Whether to prevent body scroll when active\n * @default false\n */\n preventScroll?: boolean;\n};\n\n/**\n * Hook for handling keyboard events within portals\n * @param eventMap - Map of keyboard events to their handlers\n * @param options - Options for the keyboard events\n * @example\n * ```tsx\n * const handleKeyboardEvents = usePortalKeyboardEvent({\n * Escape: onClose,\n * Enter: onConfirm,\n * }, { isActive: isOpen });\n * ```\n */\nexport const usePortalKeyboardEvent = (\n eventMap: Record<string, KeyboardEventHandler>,\n { isActive = true, preventScroll = false }: KeyboardEventOptions = {}\n) => {\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n const handler = eventMap[event.key];\n if (handler) {\n handler(event);\n }\n },\n [eventMap]\n );\n\n useEffect(() => {\n if (isActive) {\n document.addEventListener(\"keydown\", handleKeyDown);\n if (preventScroll) {\n document.body.style.overflow = \"hidden\";\n }\n }\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n if (preventScroll) {\n document.body.style.overflow = \"unset\";\n }\n };\n }, [isActive, handleKeyDown, preventScroll]);\n};\n","import * as Dialog from \"@radix-ui/react-dialog\";\nimport React, { type ReactNode } from \"react\";\n\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\nimport { Pressable } from \"./Pressable\";\nimport { usePortalKeyboardEvent } from \"../utils/usePortalKeyboardEvent\";\n\nexport type ModalProps = {\n /**\n * The content to be rendered inside the modal\n */\n children: ReactNode;\n /**\n * Whether the modal is open\n */\n open: boolean;\n /**\n * Callback fired when the modal is closed\n */\n onClose: () => void;\n /**\n * Additional class names to be applied to the modal\n */\n className?: string;\n /**\n * Whether to show the close button\n * @default true\n */\n showCloseButton?: boolean;\n};\n\nexport function Modal({\n children,\n open,\n onClose,\n className,\n showCloseButton = true\n}: ModalProps) {\n usePortalKeyboardEvent(\n { Escape: onClose },\n { isActive: open, preventScroll: true }\n );\n\n return (\n <Dialog.Root open={open} onOpenChange={onClose}>\n <Dialog.Portal>\n <Dialog.Overlay\n className={cn(\n \"fixed inset-0 z-50 bg-sidebarOverlay backdrop-blur-[2px]\",\n \"data-[state=open]:animate-overlay-show\",\n \"data-[state=closed]:animate-overlay-hide\"\n )}\n />\n <Dialog.Content\n className={cn(\n \"fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2\",\n \"w-[90vw] max-w-[90vw] max-h-[90vh]\",\n \"rounded-xl overflow-hidden\",\n \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n \"data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2\",\n \"data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]\",\n className\n )}\n >\n {children}\n {showCloseButton && (\n <Dialog.Close asChild>\n <Pressable\n className=\"inline-flex items-center justify-center text-secondary absolute top-4 right-4\"\n aria-label=\"Close\"\n >\n <Icon name=\"close\" size={12} />\n </Pressable>\n </Dialog.Close>\n )}\n </Dialog.Content>\n </Dialog.Portal>\n </Dialog.Root>\n );\n}\n\nModal.displayName = \"Modal\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/responsive.ts","../../src/components/Icon.tsx","../../src/components/Pressable.tsx","../../src/utils/tailwind.ts","../../src/utils/usePortalKeyboardEvent.ts","../../src/components/Modal.tsx"],"names":["cn","inputs","twMerge","clsx","BASE_SIZES","RESPONSIVE_SIZES","getSizeKey","size","getResponsiveSize","baseSize","classes","styles","key","baseKey","responsiveClasses","s","breakpoint","valueStr","value","valueKey","COLOR_MAP","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","responsiveSizeClasses","responsiveSizeStyles","focusRingStyles","Pressable","children","type","disabled","usePortalKeyboardEvent","eventMap","isActive","preventScroll","handleKeyDown","useCallback","event","handler","useEffect","Modal","open","onClose","showCloseButton"],"mappings":"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","file":"Modal.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","export type Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\nexport type ResponsiveSize = number | `${Breakpoint}:${number}`;\n\ntype SizeKey =\n | \"12\"\n | \"16\"\n | \"18\"\n | \"20\"\n | \"24\"\n | \"32\"\n | \"36\"\n | \"40\"\n | \"42\"\n | \"48\"\n | \"64\"\n | \"72\"\n | \"80\";\n\n// These constants help Tailwind identify the classes during compilation\nconst BASE_SIZES: Record<SizeKey, string> = {\n \"12\": \"h-[12px] w-[12px]\",\n \"16\": \"h-[16px] w-[16px]\",\n \"18\": \"h-[18px] w-[18px]\",\n \"20\": \"h-[20px] w-[20px]\",\n \"24\": \"h-[24px] w-[24px]\",\n \"32\": \"h-[32px] w-[32px]\",\n \"36\": \"h-[36px] w-[36px]\",\n \"40\": \"h-[40px] w-[40px]\",\n \"42\": \"h-[42px] w-[42px]\",\n \"48\": \"h-[48px] w-[48px]\",\n \"64\": \"h-[64px] w-[64px]\",\n \"72\": \"h-[72px] w-[72px]\",\n \"80\": \"h-[80px] w-[80px]\"\n};\n\nconst RESPONSIVE_SIZES: Record<Breakpoint, Record<SizeKey, string>> = {\n sm: {\n \"12\": \"sm:h-[12px] sm:w-[12px]\",\n \"16\": \"sm:h-[16px] sm:w-[16px]\",\n \"18\": \"sm:h-[18px] sm:w-[18px]\",\n \"20\": \"sm:h-[20px] sm:w-[20px]\",\n \"24\": \"sm:h-[24px] sm:w-[24px]\",\n \"32\": \"sm:h-[32px] sm:w-[32px]\",\n \"36\": \"sm:h-[36px] sm:w-[36px]\",\n \"40\": \"sm:h-[40px] sm:w-[40px]\",\n \"42\": \"sm:h-[42px] sm:w-[42px]\",\n \"48\": \"sm:h-[48px] sm:w-[48px]\",\n \"64\": \"sm:h-[64px] sm:w-[64px]\",\n \"72\": \"sm:h-[72px] sm:w-[72px]\",\n \"80\": \"sm:h-[80px] sm:w-[80px]\"\n },\n md: {\n \"12\": \"md:h-[12px] md:w-[12px]\",\n \"16\": \"md:h-[16px] md:w-[16px]\",\n \"18\": \"md:h-[18px] md:w-[18px]\",\n \"20\": \"md:h-[20px] md:w-[20px]\",\n \"24\": \"md:h-[24px] md:w-[24px]\",\n \"32\": \"md:h-[32px] md:w-[32px]\",\n \"36\": \"md:h-[36px] md:w-[36px]\",\n \"40\": \"md:h-[40px] md:w-[40px]\",\n \"42\": \"md:h-[42px] md:w-[42px]\",\n \"48\": \"md:h-[48px] md:w-[48px]\",\n \"64\": \"md:h-[64px] md:w-[64px]\",\n \"72\": \"md:h-[72px] md:w-[72px]\",\n \"80\": \"md:h-[80px] md:w-[80px]\"\n },\n lg: {\n \"12\": \"lg:h-[12px] lg:w-[12px]\",\n \"16\": \"lg:h-[16px] lg:w-[16px]\",\n \"18\": \"lg:h-[18px] lg:w-[18px]\",\n \"20\": \"lg:h-[20px] lg:w-[20px]\",\n \"24\": \"lg:h-[24px] lg:w-[24px]\",\n \"32\": \"lg:h-[32px] lg:w-[32px]\",\n \"36\": \"lg:h-[36px] lg:w-[36px]\",\n \"40\": \"lg:h-[40px] lg:w-[40px]\",\n \"42\": \"lg:h-[42px] lg:w-[42px]\",\n \"48\": \"lg:h-[48px] lg:w-[48px]\",\n \"64\": \"lg:h-[64px] lg:w-[64px]\",\n \"72\": \"lg:h-[72px] lg:w-[72px]\",\n \"80\": \"lg:h-[80px] lg:w-[80px]\"\n },\n xl: {\n \"12\": \"xl:h-[12px] xl:w-[12px]\",\n \"16\": \"xl:h-[16px] xl:w-[16px]\",\n \"18\": \"xl:h-[18px] xl:w-[18px]\",\n \"20\": \"xl:h-[20px] xl:w-[20px]\",\n \"24\": \"xl:h-[24px] xl:w-[24px]\",\n \"32\": \"xl:h-[32px] xl:w-[32px]\",\n \"36\": \"xl:h-[36px] xl:w-[36px]\",\n \"40\": \"xl:h-[40px] xl:w-[40px]\",\n \"42\": \"xl:h-[42px] xl:w-[42px]\",\n \"48\": \"xl:h-[48px] xl:w-[48px]\",\n \"64\": \"xl:h-[64px] xl:w-[64px]\",\n \"72\": \"xl:h-[72px] xl:w-[72px]\",\n \"80\": \"xl:h-[80px] xl:w-[80px]\"\n },\n \"2xl\": {\n \"12\": \"2xl:h-[12px] 2xl:w-[12px]\",\n \"16\": \"2xl:h-[16px] 2xl:w-[16px]\",\n \"18\": \"2xl:h-[18px] 2xl:w-[18px]\",\n \"20\": \"2xl:h-[20px] 2xl:w-[20px]\",\n \"24\": \"2xl:h-[24px] 2xl:w-[24px]\",\n \"32\": \"2xl:h-[32px] 2xl:w-[32px]\",\n \"36\": \"2xl:h-[36px] 2xl:w-[36px]\",\n \"40\": \"2xl:h-[40px] 2xl:w-[40px]\",\n \"42\": \"2xl:h-[42px] 2xl:w-[42px]\",\n \"48\": \"2xl:h-[48px] 2xl:w-[48px]\",\n \"64\": \"2xl:h-[64px] 2xl:w-[64px]\",\n \"72\": \"2xl:h-[72px] 2xl:w-[72px]\",\n \"80\": \"2xl:h-[80px] 2xl:w-[80px]\"\n }\n};\n\nconst getSizeKey = (size: number): SizeKey | undefined => {\n return String(size) as SizeKey;\n};\n\nexport const getResponsiveSize = (\n size: ResponsiveSize | ResponsiveSize[] | undefined,\n baseSize: number = 24\n): {\n responsiveSizeClasses: string;\n responsiveSizeStyles: Record<string, string>;\n} => {\n const classes: string[] = [];\n const styles: Record<string, string> = {};\n\n // If no size provided, use baseSize\n if (size === undefined) {\n const key = getSizeKey(baseSize);\n if (key) {\n classes.push(BASE_SIZES[key]);\n } else {\n styles.height = `${baseSize}px`;\n styles.width = `${baseSize}px`;\n }\n }\n\n // If size is a number, use that directly\n if (typeof size === \"number\") {\n const key = getSizeKey(size);\n if (key) {\n classes.push(BASE_SIZES[key]);\n } else {\n styles.height = `${size}px`;\n styles.width = `${size}px`;\n }\n }\n\n // If array of responsive sizes, generate responsive classes\n if (Array.isArray(size)) {\n const baseKey = getSizeKey(baseSize);\n const responsiveClasses = [\n (baseKey && BASE_SIZES[baseKey]) || `h-[${baseSize}px] w-[${baseSize}px]`\n ];\n\n size.forEach((s) => {\n if (typeof s === \"string\") {\n const [breakpoint, valueStr] = s.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n const key = getSizeKey(value);\n classes.push(\n (key && RESPONSIVE_SIZES[breakpoint]?.[key]) ||\n `${breakpoint}:h-[${value}px] ${breakpoint}:w-[${value}px]`\n );\n }\n });\n\n classes.push(...responsiveClasses);\n }\n\n if (typeof size === \"string\") {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n const valueKey = getSizeKey(value);\n classes.push(\n (valueKey && RESPONSIVE_SIZES[breakpoint]?.[valueKey]) ||\n `${breakpoint}:h-[${value}px] ${breakpoint}:w-[${value}px]`\n );\n }\n\n return {\n responsiveSizeClasses: classes.join(\" \"),\n responsiveSizeStyles: styles\n };\n};\n","import type { IconName } from \"@deckai/icons\";\nimport { IconMap } from \"@deckai/icons\";\nimport type { SVGProps } from \"react\";\nimport React from \"react\";\n\nimport type { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\nimport type { ResponsiveSize } from \"../utils/responsive\";\nimport { getResponsiveSize } from \"../utils/responsive\";\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\n// Using CSS variables to support dark mode\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"var(--color-primary)\",\n secondary: \"var(--color-secondary)\",\n white: \"var(--color-white)\",\n primaryBlue: \"var(--color-primary-100)\",\n disabled: \"var(--color-disabled)\",\n danger: \"var(--color-danger)\",\n tertiary: \"var(--color-tertiary-20)\"\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 { responsiveSizeClasses, responsiveSizeStyles } = getResponsiveSize(\n size,\n 24\n );\n\n return (\n <div\n className={cn(\n \"flex justify-center items-center\",\n responsiveSizeClasses,\n className\n )}\n style={{\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...responsiveSizeStyles,\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 type { ButtonHTMLAttributes } from \"react\";\nimport React from \"react\";\n\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\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 type { 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 const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const sizes = [\"24\", \"42\", \"48\", \"64\", \"72\"]; // Add all the sizes you need\n\n const safelist: (string | { pattern: RegExp; variants: 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 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 // Generate size classes with responsive variants\n const sizeClasses = sizes.flatMap((size) => [\n `h-[${size}px]`,\n `w-[${size}px]`,\n ...breakpoints.flatMap((bp) => [\n `${bp}:h-[${size}px]`,\n `${bp}:w-[${size}px]`\n ])\n ]);\n\n return [...typographyClasses, ...responsiveTypographyClasses, ...sizeClasses];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100\";\nexport const focusRingWithinStyles =\n \"focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-100\";\nexport const focusRingStylesCoerced = \"ring-2 ring-primary-100\";\n","import { useCallback, useEffect } from \"react\";\n\ntype KeyboardEventHandler = (event: KeyboardEvent) => void;\n\ntype KeyboardEventOptions = {\n /**\n * Whether the event should be active\n */\n isActive?: boolean;\n /**\n * Whether to prevent body scroll when active\n * @default false\n */\n preventScroll?: boolean;\n};\n\n/**\n * Hook for handling keyboard events within portals\n * @param eventMap - Map of keyboard events to their handlers\n * @param options - Options for the keyboard events\n * @example\n * ```tsx\n * const handleKeyboardEvents = usePortalKeyboardEvent({\n * Escape: onClose,\n * Enter: onConfirm,\n * }, { isActive: isOpen });\n * ```\n */\nexport const usePortalKeyboardEvent = (\n eventMap: Record<string, KeyboardEventHandler>,\n { isActive = true, preventScroll = false }: KeyboardEventOptions = {}\n) => {\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n const handler = eventMap[event.key];\n if (handler) {\n handler(event);\n }\n },\n [eventMap]\n );\n\n useEffect(() => {\n if (isActive) {\n document.addEventListener(\"keydown\", handleKeyDown);\n if (preventScroll) {\n document.body.style.overflow = \"hidden\";\n }\n }\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n if (preventScroll) {\n document.body.style.overflow = \"unset\";\n }\n };\n }, [isActive, handleKeyDown, preventScroll]);\n};\n","import * as Dialog from \"@radix-ui/react-dialog\";\nimport React, { type ReactNode } from \"react\";\n\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\nimport { Pressable } from \"./Pressable\";\nimport { usePortalKeyboardEvent } from \"../utils/usePortalKeyboardEvent\";\n\nexport type ModalProps = {\n /**\n * The content to be rendered inside the modal\n */\n children: ReactNode;\n /**\n * Whether the modal is open\n */\n open: boolean;\n /**\n * Callback fired when the modal is closed\n */\n onClose: () => void;\n /**\n * Additional class names to be applied to the modal\n */\n className?: string;\n /**\n * Whether to show the close button\n * @default true\n */\n showCloseButton?: boolean;\n};\n\nexport function Modal({\n children,\n open,\n onClose,\n className,\n showCloseButton = true\n}: ModalProps) {\n usePortalKeyboardEvent(\n { Escape: onClose },\n { isActive: open, preventScroll: true }\n );\n\n return (\n <Dialog.Root open={open} onOpenChange={onClose}>\n <Dialog.Portal>\n <Dialog.Overlay\n className={cn(\n \"fixed inset-0 z-50 bg-sidebarOverlay backdrop-blur-[2px]\",\n \"data-[state=open]:animate-overlay-show\",\n \"data-[state=closed]:animate-overlay-hide\"\n )}\n />\n <Dialog.Content\n className={cn(\n \"fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2\",\n \"w-[90vw] max-w-[90vw] max-h-[90vh]\",\n \"rounded-xl overflow-hidden\",\n \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n \"data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2\",\n \"data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]\",\n className\n )}\n >\n {children}\n {showCloseButton && (\n <Dialog.Close asChild>\n <Pressable\n className=\"inline-flex items-center justify-center text-secondary absolute top-4 right-4\"\n aria-label=\"Close\"\n >\n <Icon name=\"close\" size={12} />\n </Pressable>\n </Dialog.Close>\n )}\n </Dialog.Content>\n </Dialog.Portal>\n </Dialog.Root>\n );\n}\n\nModal.displayName = \"Modal\";\n"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
'use strict';var V=require('@radix-ui/react-collapsible'),O=require('@radix-ui/react-popover'),
|
|
1
|
+
'use strict';var V=require('@radix-ui/react-collapsible'),O=require('@radix-ui/react-popover'),u=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),icons=require('@deckai/icons'),P=require('@radix-ui/react-tooltip');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var V__namespace=/*#__PURE__*/_interopNamespace(V);var O__namespace=/*#__PURE__*/_interopNamespace(O);var u__namespace=/*#__PURE__*/_interopNamespace(u);var P__namespace=/*#__PURE__*/_interopNamespace(P);function g(...t){return tailwindMerge.twMerge(clsx.clsx(t))}var xe="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100";var ue="ring-2 ring-primary-100";var ne={12:"h-[12px] w-[12px]",16:"h-[16px] w-[16px]",18:"h-[18px] w-[18px]",20:"h-[20px] w-[20px]",24:"h-[24px] w-[24px]",32:"h-[32px] w-[32px]",36:"h-[36px] w-[36px]",40:"h-[40px] w-[40px]",42:"h-[42px] w-[42px]",48:"h-[48px] w-[48px]",64:"h-[64px] w-[64px]",72:"h-[72px] w-[72px]",80:"h-[80px] w-[80px]"},fe={sm:{12:"sm:h-[12px] sm:w-[12px]",16:"sm:h-[16px] sm:w-[16px]",18:"sm:h-[18px] sm:w-[18px]",20:"sm:h-[20px] sm:w-[20px]",24:"sm:h-[24px] sm:w-[24px]",32:"sm:h-[32px] sm:w-[32px]",36:"sm:h-[36px] sm:w-[36px]",40:"sm:h-[40px] sm:w-[40px]",42:"sm:h-[42px] sm:w-[42px]",48:"sm:h-[48px] sm:w-[48px]",64:"sm:h-[64px] sm:w-[64px]",72:"sm:h-[72px] sm:w-[72px]",80:"sm:h-[80px] sm:w-[80px]"},md:{12:"md:h-[12px] md:w-[12px]",16:"md:h-[16px] md:w-[16px]",18:"md:h-[18px] md:w-[18px]",20:"md:h-[20px] md:w-[20px]",24:"md:h-[24px] md:w-[24px]",32:"md:h-[32px] md:w-[32px]",36:"md:h-[36px] md:w-[36px]",40:"md:h-[40px] md:w-[40px]",42:"md:h-[42px] md:w-[42px]",48:"md:h-[48px] md:w-[48px]",64:"md:h-[64px] md:w-[64px]",72:"md:h-[72px] md:w-[72px]",80:"md:h-[80px] md:w-[80px]"},lg:{12:"lg:h-[12px] lg:w-[12px]",16:"lg:h-[16px] lg:w-[16px]",18:"lg:h-[18px] lg:w-[18px]",20:"lg:h-[20px] lg:w-[20px]",24:"lg:h-[24px] lg:w-[24px]",32:"lg:h-[32px] lg:w-[32px]",36:"lg:h-[36px] lg:w-[36px]",40:"lg:h-[40px] lg:w-[40px]",42:"lg:h-[42px] lg:w-[42px]",48:"lg:h-[48px] lg:w-[48px]",64:"lg:h-[64px] lg:w-[64px]",72:"lg:h-[72px] lg:w-[72px]",80:"lg:h-[80px] lg:w-[80px]"},xl:{12:"xl:h-[12px] xl:w-[12px]",16:"xl:h-[16px] xl:w-[16px]",18:"xl:h-[18px] xl:w-[18px]",20:"xl:h-[20px] xl:w-[20px]",24:"xl:h-[24px] xl:w-[24px]",32:"xl:h-[32px] xl:w-[32px]",36:"xl:h-[36px] xl:w-[36px]",40:"xl:h-[40px] xl:w-[40px]",42:"xl:h-[42px] xl:w-[42px]",48:"xl:h-[48px] xl:w-[48px]",64:"xl:h-[64px] xl:w-[64px]",72:"xl:h-[72px] xl:w-[72px]",80:"xl:h-[80px] xl:w-[80px]"},"2xl":{12:"2xl:h-[12px] 2xl:w-[12px]",16:"2xl:h-[16px] 2xl:w-[16px]",18:"2xl:h-[18px] 2xl:w-[18px]",20:"2xl:h-[20px] 2xl:w-[20px]",24:"2xl:h-[24px] 2xl:w-[24px]",32:"2xl:h-[32px] 2xl:w-[32px]",36:"2xl:h-[36px] 2xl:w-[36px]",40:"2xl:h-[40px] 2xl:w-[40px]",42:"2xl:h-[42px] 2xl:w-[42px]",48:"2xl:h-[48px] 2xl:w-[48px]",64:"2xl:h-[64px] 2xl:w-[64px]",72:"2xl:h-[72px] 2xl:w-[72px]",80:"2xl:h-[80px] 2xl:w-[80px]"}},W=t=>String(t),ge=(t,o=24)=>{let r=[],a={};if(t===void 0){let s=W(o);s?r.push(ne[s]):(a.height=`${o}px`,a.width=`${o}px`);}if(typeof t=="number"){let s=W(t);s?r.push(ne[s]):(a.height=`${t}px`,a.width=`${t}px`);}if(Array.isArray(t)){let s=W(o),p=[s&&ne[s]||`h-[${o}px] w-[${o}px]`];t.forEach(m=>{if(typeof m=="string"){let[i,f]=m.split(":"),d=parseInt(f,10),T=W(d);r.push(T&&fe[i]?.[T]||`${i}:h-[${d}px] ${i}:w-[${d}px]`);}}),r.push(...p);}if(typeof t=="string"){let[s,p]=t.split(":"),m=parseInt(p,10),i=W(m);r.push(i&&fe[s]?.[i]||`${s}:h-[${m}px] ${s}:w-[${m}px]`);}return {responsiveSizeClasses:r.join(" "),responsiveSizeStyles:a}};var he={primary:"var(--color-primary)",secondary:"var(--color-secondary)",white:"var(--color-white)",primaryBlue:"var(--color-primary-100)",disabled:"var(--color-disabled)",danger:"var(--color-danger)",tertiary:"var(--color-tertiary-20)"},I=u__namespace.default.forwardRef(({name:t,size:o=24,color:r="primary",title:a,className:s,style:p={},...m},i)=>{let f=icons.IconMap[t],{responsiveSizeClasses:d,responsiveSizeStyles:T}=ge(o,24);return u__namespace.default.createElement("div",{className:g("flex justify-center items-center",d,s),style:{"--icon-stroke":he[r],...T,...p}},u__namespace.default.createElement(f,{ref:i,"aria-hidden":!a,"aria-label":a,stroke:t.includes("filled")?void 0:he[r],...m}))});I.displayName="Icon";var Ie={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},Re=t=>{let[o,r]=t.split("-");return o==="heading"?Ie[r]||"p":o==="label"?"label":"p"},Ae={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},Oe=t=>t?(Array.isArray(t)?t:[t]).map(r=>{if(r.includes(":")){let[a,s]=r.split(":");return `${a}:text-${s}`}return `text-${r}`}).join(" "):"text-body-default",h=u__namespace.default.forwardRef(({variant:t="body-default",color:o="primary",as:r,className:a,children:s,weight:p,...m},i)=>{let f=Oe(t),d=o==="inherit"?"text-inherit":`text-${o}`,T=u__namespace.default.useMemo(()=>{let y=typeof t=="string"?t.split(":").pop():Array.isArray(t)?t[0].split(":").pop():"body-default";return Re(y)},[t]);return u__namespace.default.createElement(r||T,{ref:i,className:`
|
|
2
2
|
font-sans antialiased
|
|
3
3
|
${f}
|
|
4
4
|
${d}
|
|
5
5
|
${p&&`!${Ae[p]}`}
|
|
6
6
|
${a}
|
|
7
|
-
`,...m},s)});h.displayName="Text";var ee=x__namespace.forwardRef(({className:t,end:o,iconName:r,color:a,size:s,title:p,label:m,labelClassName:i,id:f,children:d,forceShowFocusRing:T,error:w,errorMessage:y,helperText:S,showCharacterCount:H,maxLength:N,value:E,defaultValue:l,onChange:L,disabled:b,...D},Q)=>{let[F,c]=x__namespace.useState(E?.toString()||l?.toString()||"");x__namespace.useEffect(()=>{E!==void 0&&c(E?.toString()||"");},[E]);let M=G=>{let A=G.target.value;c(A),L?.(G);},Z=F.length,J=H||!!N;return x__namespace.createElement("div",{className:"gap-1 flex flex-col"},m&&x__namespace.createElement(h,{variant:"label-default",htmlFor:f,as:"label",color:w?"danger":"primary",className:g(i)},m),x__namespace.createElement("div",{className:g("relative flex flex-col gap-2 w-full rounded-lg border bg-background-0 px-3 md:py-3 py-2 text-secondary transition-colors duration-150",!w&&!T&&"border-secondary-50",w&&"border-tertiary-10",b&&"cursor-not-allowed opacity-50","focus-within:ring-2 focus-within:ring-primary-100",T&&xe)},x__namespace.createElement("div",{className:"flex relative"},x__namespace.createElement("input",{ref:Q,id:f,className:g("font-sans text-sm flex w-full bg-background-0 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-secondary text-primary disabled:cursor-not-allowed focus:outline-none rounded-lg",o&&"pr-10",t),value:F,maxLength:N,onChange:M,"aria-invalid":w,disabled:b,...D}),(o||r)&&x__namespace.createElement("div",{className:"absolute inset-y-0 right-0 flex items-center"},r?x__namespace.createElement(I,{name:r,color:w?"danger":"secondary",size:s,title:p}):o)),d),x__namespace.createElement("div",{className:"flex justify-between gap-2"},w&&y||S?x__namespace.createElement(h,{variant:"body-xxs",color:w?"danger":"secondary",className:"mt-1"},w?y:S):null,J&&x__namespace.createElement(h,{variant:"body-xxs",color:w?"danger":"secondary",className:"text-right mt-1"},x__namespace.createElement(h,{variant:"body-xxs",as:"span",className:"font-bold"},Z),N&&`/${N}`," characters")))});var le=x.forwardRef(({value:t,suggestion:o,onChange:r,onKeyDown:a,className:s,"aria-controls":p,"aria-activedescendant":m,"aria-autocomplete":i,...f},d)=>x__namespace.default.createElement("div",{className:"relative w-full"},x__namespace.default.createElement(ee,{ref:d,value:t,onChange:T=>r(T.target.value),onKeyDown:a,className:g("bg-transparent",s),"aria-controls":p,"aria-activedescendant":m,"aria-autocomplete":i,...f}),o&&t&&x__namespace.default.createElement("div",{className:"absolute inset-0 top-6 flex items-center px-3 md:py-3 py-2 text-secondary opacity-40 pointer-events-none text-sm"},t,o.slice(t.length))));le.displayName="AutocompleteInput";var ye={pink:"bg-tertiary-5",orange:"bg-tertiary-15",green:"bg-tertiary-25",purple:"bg-secondary-300"},Ke=t=>{let o=Object.keys(ye),r=t.split("").reduce((p,m)=>m.charCodeAt(0)+((p<<5)-p),0),a=Math.abs(r)%o.length;return o[a]},pe=x__namespace.forwardRef(({className:t,variant:o,iconName:r,children:a,...s},p)=>{let m=o||(typeof a=="string"?Ke(a):"pink");return x__namespace.createElement("span",{ref:p,className:g("inline-flex items-center gap-2","rounded px-2 py-1.5","text-sm font-medium",ye[m],t),...s},r&&x__namespace.createElement(I,{size:16,name:r}),x__namespace.createElement(h,{variant:"body-xxs-semibold",className:"mt-0.5"},a))});pe.displayName="Badge";function be({content:t,children:o,side:r="bottom",align:a="center",className:s,delayDuration:p=200,defaultOpen:m,open:i,onOpenChange:f,longPressDuration:d=500}){let[T,w]=x.useState(m||false),y=null,S=i??T,H=x.useCallback(l=>{i||w(l),f?.(l);},[i,f]),N=x.useCallback(()=>{y=setTimeout(()=>{H(true);},d);},[H,d]),E=x.useCallback(()=>{y&&(clearTimeout(y),y=null),setTimeout(()=>H(false),1500);},[y,H]);return x__namespace.createElement(P__namespace.Provider,{delayDuration:p},x__namespace.createElement(P__namespace.Root,{open:S,onOpenChange:H},x__namespace.createElement(P__namespace.Trigger,{asChild:true},x__namespace.createElement("span",{tabIndex:0,onTouchStart:N,onTouchEnd:E,onTouchCancel:E},o)),x__namespace.createElement(P__namespace.Portal,null,x__namespace.createElement(P__namespace.Content,{side:r,align:a,sideOffset:4,className:g("z-50 overflow-hidden rounded-lg","bg-primary px-3 py-1.5","text-xs text-white","animate-in fade-in-0 zoom-in-95","data-[state=closed]:animate-out data-[state=closed]:fade-out-0","data-[side=bottom]:slide-in-from-top-2","data-[side=top]:slide-in-from-bottom-2","select-none","max-w-60","touch-none",s)},typeof t=="string"?x__namespace.createElement(h,{variant:"body-default-medium",color:"white"},t):t,x__namespace.createElement(P__namespace.Arrow,{className:"fill-text-primary",width:10,height:5})))))}function Ge({text:t,highlight:o}){if(!o)return x__namespace.default.createElement(x__namespace.default.Fragment,null,t);let r=t.split(new RegExp(`(${o})`,"i"));return x__namespace.default.createElement(x__namespace.default.Fragment,null,r.map((a,s)=>a.toLowerCase()===o.toLowerCase()?x__namespace.default.createElement("span",{key:s,className:"font-bold"},a):a))}var ve=x__namespace.default.forwardRef(({value:t,label:o,onChange:r,onKeyDown:a,onMouseEnter:s,onMouseLeave:p,selected:m,color:i,disabled:f,className:d,id:T,role:w,"aria-selected":y,searchValue:S="",tooltip:H,onClick:N,badge:E},l)=>{let L=x__namespace.default.createElement("button",{ref:l,type:"button",id:T,role:w,"aria-selected":y,disabled:f,className:g("relative w-full text-left px-2 py-1.5 text-sm rounded outline-none","cursor-pointer hover:bg-gray-100","disabled:opacity-50 disabled:cursor-not-allowed",m&&"bg-gray-100","flex items-center gap-2",d),onClick:()=>{r?.(t),N?.();},onKeyDown:a,onMouseEnter:s,onMouseLeave:p},x__namespace.default.createElement(h,{variant:"body-default-medium",color:i==="danger"?"danger":"inherit"},typeof o=="string"?x__namespace.default.createElement(Ge,{text:o,highlight:S}):o),E&&x__namespace.default.createElement(pe,null,E));return H?x__namespace.default.createElement(be,{content:H},L):L});var te=x__namespace.default.forwardRef(({children:t,type:o="button",className:r,disabled:a,...s},p)=>x__namespace.default.createElement("button",{ref:p,type:o,disabled:a,className:g("appearance-none hover:opacity-80 transition-all active:scale-95",ue,a&&"opacity-50 cursor-not-allowed",r),...s},t));te.displayName="Pressable";function Me({children:t,color:o="primary",className:r,onClose:a,...s}){let[p,m]=x.useState(false),i=x.useCallback(()=>{m(true);},[]),f=x.useCallback(()=>{m(false);},[]),d=x__namespace.default.createElement("div",{className:g("flex gap-2",a?"justify-between items-center max-w-fit":"items-center justify-center","hover:bg-primary-100 rounded bg-secondary-400 px-2 py-1 sm:px-3 sm:py-1.5 h-min hover:text-white",o==="primary"?"text-primary-100":"text-primary",r),onMouseEnter:i,onMouseLeave:f},typeof t=="string"?x__namespace.default.createElement(h,{color:"inherit",variant:["md:body-default-medium","body-xxs-medium"],className:"truncate pt-0.5"},t):t,a&&x__namespace.default.createElement(te,{...s,onClick:a,className:"flex items-center justify-center"},x__namespace.default.createElement(I,{name:"close",size:12,color:p?"white":"primaryBlue"})));return a?d:x__namespace.default.createElement(te,{...s},d)}function jt({options:t,selectedValues:o,onSelectionChange:r,placeholder:a="Select items...",className:s,label:p,labelClassName:m,id:i,maxSelections:f,disabled:d,noOptionsMessage:T,loading:w,error:y,errorMessage:S,helperText:H,container:N,autocomplete:E=false}){let[l,L]=x.useState(false),[b,D]=x.useState(""),[Q,F]=x.useState({}),[c,M]=x.useState(-1),[Z,J]=x.useState(-1),G=x.useRef(null),A=x.useRef(null),j=x.useMemo(()=>t.length>0&&"options"in t[0],[t]),X=x.useMemo(()=>t.length?j?t.reduce((e,n)=>[...e,...n.options],[]):t:[],[j,t]),ce=x.useMemo(()=>X.filter(e=>o.includes(e.value)),[X,o]),K=x.useMemo(()=>f!==void 0&&o.length>=f,[f,o]),u=x.useMemo(()=>X.filter(e=>o.includes(e.value)||K?false:b&&typeof e.label=="string"?e.label.toLowerCase().includes(b.toLowerCase()):true),[X,b,o,K]),Le=x.useMemo(()=>j?t.map(e=>({...e,options:e.options.filter(n=>o.includes(n.value)||K?false:b&&typeof n.label=="string"?n.label.toLowerCase().includes(b.toLowerCase()):true)})).filter(e=>e.options.length>0):u.length>0?[{label:"",options:u}]:[],[j,t,b,o,u,K]),k=x.useCallback(e=>{o.includes(e)?r(o.filter(C=>C!==e)):K||r([...o,e]),A.current&&A.current.focus({preventScroll:true});},[o,r,K]),He=x.useCallback(e=>{F(n=>({...n,[e]:!n[e]}));},[]),re=x.useMemo(()=>!E||!b||!l?"":u.find(n=>typeof n.label=="string"&&n.label.toLowerCase().startsWith(b.toLowerCase())&&n.label.toLowerCase()!==b.toLowerCase()&&!o.includes(n.value))?.label?.toString()||"",[E,b,u,l,o]),de=x.useCallback(e=>{switch(e.key){case "ArrowDown":e.preventDefault(),e.altKey?L(true):l?M(n=>n<u.length-1?n+1:0):(L(true),M(0));break;case "ArrowUp":e.preventDefault(),e.altKey?L(false):l?M(n=>n>0?n-1:u.length-1):(L(true),M(u.length-1));break;case "PageUp":e.preventDefault(),l&&M(n=>Math.max(0,n-10));break;case "PageDown":e.preventDefault(),l&&M(n=>Math.min(u.length-1,n+10));break;case "Home":e.preventDefault(),l&&M(0);break;case "End":e.preventDefault(),l&&M(u.length-1);break;case "Enter":if(e.preventDefault(),c>=0&&u[c])k(u[c].value);else if(E&&re){let n=u.find(C=>typeof C.label=="string"&&C.label.toLowerCase().startsWith(b.toLowerCase())&&!o.includes(C.value));n&&k(n.value);}break;case "Tab":l?c>=0&&u[c]&&(e.preventDefault(),k(u[c].value)):(e.preventDefault(),L(true),M(0));break;case "Escape":e.preventDefault(),L(false),D("");break}},[l,c,u,k,E,re,b,o]),Ce=x.useCallback(e=>{switch(e.key){case "ArrowDown":e.preventDefault(),M(n=>n<u.length-1?n+1:0);break;case "ArrowUp":e.preventDefault(),M(n=>n>0?n-1:u.length-1);break;case "Enter":case "Space":e.preventDefault(),c>=0&&u[c]&&k(u[c].value);break;case "Escape":e.preventDefault(),L(false),A.current?.focus();break;case "Tab":e.preventDefault(),c>=0&&u[c]&&k(u[c].value);break}},[c,u,k]);return x.useEffect(()=>{if(l){let e=A.current;if(e){e.focus({preventScroll:true});let n=e.value.length;e.setSelectionRange(n,n);}}},[l]),x.useEffect(()=>{l||M(-1);},[l]),x.useEffect(()=>{if(l&&c>=0&&G.current){let e=G.current.querySelector(`[id="${i}-option-${c}"]`);e&&e.scrollIntoView({block:"nearest",behavior:"smooth"});}},[c,l,i]),x.useEffect(()=>{l&&c===-1&&M(0);},[l,c]),x.useEffect(()=>{if(j){let e=t.reduce((n,C)=>({...n,[C.label]:true}),{});F(e);}},[j,t]),x__namespace.default.createElement("div",{className:g("flex flex-col gap-2",s)},p&&x__namespace.default.createElement(h,{variant:"label-default",htmlFor:i,as:"label",color:y?"danger":"primary",className:g(m)},p),x__namespace.default.createElement(O__namespace.Root,{open:l&&!d,onOpenChange:e=>{d||(L(e),e||(D(""),M(-1)));}},x__namespace.default.createElement("div",{className:"relative w-full font-sans text-secondary"},x__namespace.default.createElement(O__namespace.Trigger,{asChild:true},x__namespace.default.createElement("button",{type:"button",className:"w-full text-left",disabled:d},E?x__namespace.default.createElement(le,{ref:A,id:i,placeholder:a,value:b,suggestion:re,onChange:e=>{D(e),l||L(true);},onKeyDown:de,className:"flex-1",forceShowFocusRing:l,disabled:d,error:y,"aria-expanded":l,"aria-haspopup":"listbox","aria-controls":`${i}-listbox`,"aria-activedescendant":c>=0?`${i}-option-${c}`:void 0}):x__namespace.default.createElement(ee,{ref:A,id:i,placeholder:a,value:b,onChange:e=>{D(e.target.value),l||L(true);},onKeyDown:de,className:"flex-1",forceShowFocusRing:l,error:y,"aria-expanded":l,"aria-haspopup":"listbox","aria-controls":`${i}-listbox`,"aria-activedescendant":c>=0?`${i}-option-${c}`:void 0,disabled:d||!!f&&o.length>=f}))),x__namespace.default.createElement(O__namespace.Portal,{container:N},x__namespace.default.createElement(O__namespace.Content,{className:"w-[--radix-popover-trigger-width] overflow-y-scroll-auto p-1 bg-background-0 rounded-md shadow-lg border z-[9999] data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out outline-none",side:"bottom",align:"start",sideOffset:4,onOpenAutoFocus:e=>e.preventDefault(),onCloseAutoFocus:e=>e.preventDefault(),onFocusOutside:e=>e.preventDefault(),onInteractOutside:e=>{e.preventDefault(),L(false),D(""),M(-1);}},x__namespace.default.createElement("div",{ref:G,className:"max-h-60 flex flex-col items-start outline-none",role:"listbox",id:`${i}-listbox`,"aria-label":p,"aria-multiselectable":"true","aria-busy":w},w?x__namespace.default.createElement(h,{variant:"label-default",className:"text-secondary p-2"},"Loading..."):u.length>0?Le.map((e,n)=>x__namespace.default.createElement(V__namespace.Root,{key:e.label||n,className:"w-full",open:Q[e.label]??true,onOpenChange:()=>e.label&&He(e.label)},e.label&&x__namespace.default.createElement(V__namespace.Trigger,{asChild:true},x__namespace.default.createElement("div",{className:"w-full flex items-center justify-between px-2 py-1.5 hover:bg-gray-50",tabIndex:-1},x__namespace.default.createElement(h,{variant:"body-default-bold",color:"secondary"},e.label),x__namespace.default.createElement(I,{name:"arrow-down",className:g("transition-transform",Q[e.label]&&"rotate-180"),size:16}))),x__namespace.default.createElement(V__namespace.Content,{className:"data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up"},e.options.map((C,Pe)=>{let Y=u.findIndex($e=>$e.value===C.value);return x__namespace.default.createElement(ve,{key:`${n}-${Pe}`,label:C.label,value:C.value,onChange:k,onKeyDown:Ce,className:"pl-4",selected:Z===Y||Z===-1&&c===Y,id:`${i}-option-${Y}`,role:"option","aria-selected":o.includes(C.value),searchValue:b,onMouseEnter:()=>J(Y),onMouseLeave:()=>J(-1)})})))):x__namespace.default.createElement(h,{variant:"label-default",className:"text-secondary p-2"},T||"No results found")))))),ce.length>0&&x__namespace.default.createElement("div",{className:"flex flex-col gap-2"},x__namespace.default.createElement("div",{className:"flex flex-wrap gap-2"},ce.map(e=>x__namespace.default.createElement(Me,{key:e.value,onClose:()=>k(e.value),disabled:d},e.label))),K&&x__namespace.default.createElement(h,{variant:"body-xxs",color:"secondary"},"Maximum of ",f," items selected")),y&&S||H?x__namespace.default.createElement(h,{variant:"body-xxs",color:y?"danger":"secondary",className:"mt-1"},y?S:H):null)}exports.MultiSelectCombobox=jt;//# sourceMappingURL=MultiSelectCombobox.cjs.map
|
|
7
|
+
`,...m},s)});h.displayName="Text";var ee=u__namespace.forwardRef(({className:t,end:o,iconName:r,color:a,size:s,title:p,label:m,labelClassName:i,id:f,children:d,forceShowFocusRing:T,error:w,errorMessage:y,helperText:k,showCharacterCount:H,maxLength:N,value:E,defaultValue:l,onChange:L,disabled:b,...D},Q)=>{let[F,c]=u__namespace.useState(E?.toString()||l?.toString()||"");u__namespace.useEffect(()=>{E!==void 0&&c(E?.toString()||"");},[E]);let M=G=>{let A=G.target.value;c(A),L?.(G);},Z=F.length,J=H||!!N;return u__namespace.createElement("div",{className:"gap-1 flex flex-col"},m&&u__namespace.createElement(h,{variant:"label-default",htmlFor:f,as:"label",color:w?"danger":"primary",className:g(i)},m),u__namespace.createElement("div",{className:g("relative flex flex-col gap-2 w-full rounded-lg border bg-background-0 px-3 md:py-3 py-2 text-secondary transition-colors duration-150",!w&&!T&&"border-secondary-50",w&&"border-tertiary-10",b&&"cursor-not-allowed opacity-50","focus-within:ring-2 focus-within:ring-primary-100",T&&ue)},u__namespace.createElement("div",{className:"flex relative"},u__namespace.createElement("input",{ref:Q,id:f,className:g("font-sans text-sm flex w-full bg-background-0 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-secondary text-primary disabled:cursor-not-allowed focus:outline-none rounded-lg",o&&"pr-10",t),value:F,maxLength:N,onChange:M,"aria-invalid":w,disabled:b,...D}),(o||r)&&u__namespace.createElement("div",{className:"absolute inset-y-0 right-0 flex items-center"},r?u__namespace.createElement(I,{name:r,color:w?"danger":"secondary",size:s,title:p}):o)),d),u__namespace.createElement("div",{className:"flex justify-between gap-2"},w&&y||k?u__namespace.createElement(h,{variant:"body-xxs",color:w?"danger":"secondary",className:"mt-1"},w?y:k):null,J&&u__namespace.createElement(h,{variant:"body-xxs",color:w?"danger":"secondary",className:"text-right mt-1"},u__namespace.createElement(h,{variant:"body-xxs",as:"span",className:"font-bold"},Z),N&&`/${N}`," characters")))});var le=u.forwardRef(({value:t,suggestion:o,onChange:r,onKeyDown:a,className:s,"aria-controls":p,"aria-activedescendant":m,"aria-autocomplete":i,...f},d)=>u__namespace.default.createElement("div",{className:"relative w-full"},u__namespace.default.createElement(ee,{ref:d,value:t,onChange:T=>r(T.target.value),onKeyDown:a,className:g("bg-transparent",s),"aria-controls":p,"aria-activedescendant":m,"aria-autocomplete":i,...f}),o&&t&&u__namespace.default.createElement("div",{className:"absolute inset-0 top-6 flex items-center px-3 md:py-3 py-2 text-secondary opacity-40 pointer-events-none text-sm"},t,o.slice(t.length))));le.displayName="AutocompleteInput";var ye={pink:"bg-tertiary-5",orange:"bg-tertiary-15",green:"bg-tertiary-25",purple:"bg-secondary-300"},Ke=t=>{let o=Object.keys(ye),r=t.split("").reduce((p,m)=>m.charCodeAt(0)+((p<<5)-p),0),a=Math.abs(r)%o.length;return o[a]},pe=u__namespace.forwardRef(({className:t,variant:o,iconName:r,children:a,...s},p)=>{let m=o||(typeof a=="string"?Ke(a):"pink");return u__namespace.createElement("span",{ref:p,className:g("inline-flex items-center gap-2","rounded px-2 py-1.5","text-sm font-medium",ye[m],t),...s},r&&u__namespace.createElement(I,{size:16,name:r}),u__namespace.createElement(h,{variant:"body-xxs-semibold",className:"mt-0.5"},a))});pe.displayName="Badge";function be({content:t,children:o,side:r="bottom",align:a="center",className:s,delayDuration:p=200,defaultOpen:m,open:i,onOpenChange:f,longPressDuration:d=500}){let[T,w]=u.useState(m||false),y=null,k=i??T,H=u.useCallback(l=>{i||w(l),f?.(l);},[i,f]),N=u.useCallback(()=>{y=setTimeout(()=>{H(true);},d);},[H,d]),E=u.useCallback(()=>{y&&(clearTimeout(y),y=null),setTimeout(()=>H(false),1500);},[y,H]);return u__namespace.createElement(P__namespace.Provider,{delayDuration:p},u__namespace.createElement(P__namespace.Root,{open:k,onOpenChange:H},u__namespace.createElement(P__namespace.Trigger,{asChild:true},u__namespace.createElement("span",{tabIndex:0,onTouchStart:N,onTouchEnd:E,onTouchCancel:E},o)),u__namespace.createElement(P__namespace.Portal,null,u__namespace.createElement(P__namespace.Content,{side:r,align:a,sideOffset:4,className:g("z-50 overflow-hidden rounded-lg","bg-primary px-3 py-1.5","text-xs text-white","animate-in fade-in-0 zoom-in-95","data-[state=closed]:animate-out data-[state=closed]:fade-out-0","data-[side=bottom]:slide-in-from-top-2","data-[side=top]:slide-in-from-bottom-2","select-none","max-w-60","touch-none",s)},typeof t=="string"?u__namespace.createElement(h,{variant:"body-default-medium",color:"white"},t):t,u__namespace.createElement(P__namespace.Arrow,{className:"fill-text-primary",width:10,height:5})))))}function Ge({text:t,highlight:o}){if(!o)return u__namespace.default.createElement(u__namespace.default.Fragment,null,t);let r=t.split(new RegExp(`(${o})`,"i"));return u__namespace.default.createElement(u__namespace.default.Fragment,null,r.map((a,s)=>a.toLowerCase()===o.toLowerCase()?u__namespace.default.createElement("span",{key:s,className:"font-bold"},a):a))}var ve=u__namespace.default.forwardRef(({value:t,label:o,onChange:r,onKeyDown:a,onMouseEnter:s,onMouseLeave:p,selected:m,color:i,disabled:f,className:d,id:T,role:w,"aria-selected":y,searchValue:k="",tooltip:H,onClick:N,badge:E},l)=>{let L=u__namespace.default.createElement("button",{ref:l,type:"button",id:T,role:w,"aria-selected":y,disabled:f,className:g("relative w-full text-left px-2 py-1.5 text-sm rounded outline-none text-primary","cursor-pointer hover:bg-background-50","disabled:opacity-50 disabled:cursor-not-allowed",m&&"bg-background-50","flex items-center gap-2",d),onClick:()=>{r?.(t),N?.();},onKeyDown:a,onMouseEnter:s,onMouseLeave:p},u__namespace.default.createElement(h,{variant:"body-default-medium",color:i==="danger"?"danger":"inherit"},typeof o=="string"?u__namespace.default.createElement(Ge,{text:o,highlight:k}):o),E&&u__namespace.default.createElement(pe,null,E));return H?u__namespace.default.createElement(be,{content:H},L):L});var te=u__namespace.default.forwardRef(({children:t,type:o="button",className:r,disabled:a,...s},p)=>u__namespace.default.createElement("button",{ref:p,type:o,disabled:a,className:g("appearance-none hover:opacity-80 transition-all active:scale-95",xe,a&&"opacity-50 cursor-not-allowed",r),...s},t));te.displayName="Pressable";function Me({children:t,color:o="primary",className:r,onClose:a,...s}){let[p,m]=u.useState(false),i=u.useCallback(()=>{m(true);},[]),f=u.useCallback(()=>{m(false);},[]),d=u__namespace.default.createElement("div",{className:g("flex gap-2",a?"justify-between items-center max-w-fit":"items-center justify-center","hover:bg-primary-100 rounded bg-secondary-400 px-2 py-1 sm:px-3 sm:py-1.5 h-min hover:text-white",o==="primary"?"text-primary-100":"text-primary",r),onMouseEnter:i,onMouseLeave:f},typeof t=="string"?u__namespace.default.createElement(h,{color:"inherit",variant:["md:body-default-medium","body-xxs-medium"],className:"truncate pt-0.5"},t):t,a&&u__namespace.default.createElement(te,{...s,onClick:a,className:"flex items-center justify-center"},u__namespace.default.createElement(I,{name:"close",size:12,color:p?"white":"primaryBlue"})));return a?d:u__namespace.default.createElement(te,{...s},d)}function jt({options:t,selectedValues:o,onSelectionChange:r,placeholder:a="Select items...",className:s,label:p,labelClassName:m,id:i,maxSelections:f,disabled:d,noOptionsMessage:T,loading:w,error:y,errorMessage:k,helperText:H,container:N,autocomplete:E=false}){let[l,L]=u.useState(false),[b,D]=u.useState(""),[Q,F]=u.useState({}),[c,M]=u.useState(-1),[Z,J]=u.useState(-1),G=u.useRef(null),A=u.useRef(null),j=u.useMemo(()=>t.length>0&&"options"in t[0],[t]),X=u.useMemo(()=>t.length?j?t.reduce((e,n)=>[...e,...n.options],[]):t:[],[j,t]),ce=u.useMemo(()=>X.filter(e=>o.includes(e.value)),[X,o]),K=u.useMemo(()=>f!==void 0&&o.length>=f,[f,o]),x=u.useMemo(()=>X.filter(e=>o.includes(e.value)||K?false:b&&typeof e.label=="string"?e.label.toLowerCase().includes(b.toLowerCase()):true),[X,b,o,K]),Le=u.useMemo(()=>j?t.map(e=>({...e,options:e.options.filter(n=>o.includes(n.value)||K?false:b&&typeof n.label=="string"?n.label.toLowerCase().includes(b.toLowerCase()):true)})).filter(e=>e.options.length>0):x.length>0?[{label:"",options:x}]:[],[j,t,b,o,x,K]),S=u.useCallback(e=>{o.includes(e)?r(o.filter(C=>C!==e)):K||r([...o,e]),A.current&&A.current.focus({preventScroll:true});},[o,r,K]),He=u.useCallback(e=>{F(n=>({...n,[e]:!n[e]}));},[]),re=u.useMemo(()=>!E||!b||!l?"":x.find(n=>typeof n.label=="string"&&n.label.toLowerCase().startsWith(b.toLowerCase())&&n.label.toLowerCase()!==b.toLowerCase()&&!o.includes(n.value))?.label?.toString()||"",[E,b,x,l,o]),de=u.useCallback(e=>{switch(e.key){case "ArrowDown":e.preventDefault(),e.altKey?L(true):l?M(n=>n<x.length-1?n+1:0):(L(true),M(0));break;case "ArrowUp":e.preventDefault(),e.altKey?L(false):l?M(n=>n>0?n-1:x.length-1):(L(true),M(x.length-1));break;case "PageUp":e.preventDefault(),l&&M(n=>Math.max(0,n-10));break;case "PageDown":e.preventDefault(),l&&M(n=>Math.min(x.length-1,n+10));break;case "Home":e.preventDefault(),l&&M(0);break;case "End":e.preventDefault(),l&&M(x.length-1);break;case "Enter":if(e.preventDefault(),c>=0&&x[c])S(x[c].value);else if(E&&re){let n=x.find(C=>typeof C.label=="string"&&C.label.toLowerCase().startsWith(b.toLowerCase())&&!o.includes(C.value));n&&S(n.value);}break;case "Tab":l?c>=0&&x[c]&&(e.preventDefault(),S(x[c].value)):(e.preventDefault(),L(true),M(0));break;case "Escape":e.preventDefault(),L(false),D("");break}},[l,c,x,S,E,re,b,o]),Ce=u.useCallback(e=>{switch(e.key){case "ArrowDown":e.preventDefault(),M(n=>n<x.length-1?n+1:0);break;case "ArrowUp":e.preventDefault(),M(n=>n>0?n-1:x.length-1);break;case "Enter":case "Space":e.preventDefault(),c>=0&&x[c]&&S(x[c].value);break;case "Escape":e.preventDefault(),L(false),A.current?.focus();break;case "Tab":e.preventDefault(),c>=0&&x[c]&&S(x[c].value);break}},[c,x,S]);return u.useEffect(()=>{if(l){let e=A.current;if(e){e.focus({preventScroll:true});let n=e.value.length;e.setSelectionRange(n,n);}}},[l]),u.useEffect(()=>{l||M(-1);},[l]),u.useEffect(()=>{if(l&&c>=0&&G.current){let e=G.current.querySelector(`[id="${i}-option-${c}"]`);e&&e.scrollIntoView({block:"nearest",behavior:"smooth"});}},[c,l,i]),u.useEffect(()=>{l&&c===-1&&M(0);},[l,c]),u.useEffect(()=>{if(j){let e=t.reduce((n,C)=>({...n,[C.label]:true}),{});F(e);}},[j,t]),u__namespace.default.createElement("div",{className:g("flex flex-col gap-2",s)},p&&u__namespace.default.createElement(h,{variant:"label-default",htmlFor:i,as:"label",color:y?"danger":"primary",className:g(m)},p),u__namespace.default.createElement(O__namespace.Root,{open:l&&!d,onOpenChange:e=>{d||(L(e),e||(D(""),M(-1)));}},u__namespace.default.createElement("div",{className:"relative w-full font-sans text-secondary"},u__namespace.default.createElement(O__namespace.Trigger,{asChild:true},u__namespace.default.createElement("button",{type:"button",className:"w-full text-left",disabled:d},E?u__namespace.default.createElement(le,{ref:A,id:i,placeholder:a,value:b,suggestion:re,onChange:e=>{D(e),l||L(true);},onKeyDown:de,className:"flex-1",forceShowFocusRing:l,disabled:d,error:y,"aria-expanded":l,"aria-haspopup":"listbox","aria-controls":`${i}-listbox`,"aria-activedescendant":c>=0?`${i}-option-${c}`:void 0}):u__namespace.default.createElement(ee,{ref:A,id:i,placeholder:a,value:b,onChange:e=>{D(e.target.value),l||L(true);},onKeyDown:de,className:"flex-1",forceShowFocusRing:l,error:y,"aria-expanded":l,"aria-haspopup":"listbox","aria-controls":`${i}-listbox`,"aria-activedescendant":c>=0?`${i}-option-${c}`:void 0,disabled:d||!!f&&o.length>=f}))),u__namespace.default.createElement(O__namespace.Portal,{container:N},u__namespace.default.createElement(O__namespace.Content,{className:"w-[--radix-popover-trigger-width] overflow-y-scroll-auto p-1 bg-background-0 rounded-md shadow-lg border z-[9999] data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out outline-none",side:"bottom",align:"start",sideOffset:4,onOpenAutoFocus:e=>e.preventDefault(),onCloseAutoFocus:e=>e.preventDefault(),onFocusOutside:e=>e.preventDefault(),onInteractOutside:e=>{e.preventDefault(),L(false),D(""),M(-1);}},u__namespace.default.createElement("div",{ref:G,className:"max-h-60 flex flex-col items-start outline-none",role:"listbox",id:`${i}-listbox`,"aria-label":p,"aria-multiselectable":"true","aria-busy":w},w?u__namespace.default.createElement(h,{variant:"label-default",className:"text-secondary p-2"},"Loading..."):x.length>0?Le.map((e,n)=>u__namespace.default.createElement(V__namespace.Root,{key:e.label||n,className:"w-full",open:Q[e.label]??true,onOpenChange:()=>e.label&&He(e.label)},e.label&&u__namespace.default.createElement(V__namespace.Trigger,{asChild:true},u__namespace.default.createElement("div",{className:"w-full flex items-center justify-between px-2 py-1.5 hover:bg-gray-50",tabIndex:-1},u__namespace.default.createElement(h,{variant:"body-default-bold",color:"secondary"},e.label),u__namespace.default.createElement(I,{name:"arrow-down",className:g("transition-transform",Q[e.label]&&"rotate-180"),size:16}))),u__namespace.default.createElement(V__namespace.Content,{className:"data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up"},e.options.map((C,Pe)=>{let Y=x.findIndex($e=>$e.value===C.value);return u__namespace.default.createElement(ve,{key:`${n}-${Pe}`,label:C.label,value:C.value,onChange:S,onKeyDown:Ce,className:"pl-4",selected:Z===Y||Z===-1&&c===Y,id:`${i}-option-${Y}`,role:"option","aria-selected":o.includes(C.value),searchValue:b,onMouseEnter:()=>J(Y),onMouseLeave:()=>J(-1)})})))):u__namespace.default.createElement(h,{variant:"label-default",className:"text-secondary p-2"},T||"No results found")))))),ce.length>0&&u__namespace.default.createElement("div",{className:"flex flex-col gap-2"},u__namespace.default.createElement("div",{className:"flex flex-wrap gap-2"},ce.map(e=>u__namespace.default.createElement(Me,{key:e.value,onClose:()=>S(e.value),disabled:d},e.label))),K&&u__namespace.default.createElement(h,{variant:"body-xxs",color:"secondary"},"Maximum of ",f," items selected")),y&&k||H?u__namespace.default.createElement(h,{variant:"body-xxs",color:y?"danger":"secondary",className:"mt-1"},y?k:H):null)}exports.MultiSelectCombobox=jt;//# sourceMappingURL=MultiSelectCombobox.cjs.map
|
|
8
8
|
//# sourceMappingURL=MultiSelectCombobox.cjs.map
|