@deckai/deck-ui 0.0.9 → 0.0.12
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 +3 -7
- package/dist/components/AboutCard.cjs.map +1 -1
- package/dist/components/AboutCard.d.cts +3 -2
- package/dist/components/AboutCard.d.ts +3 -2
- package/dist/components/AboutCard.js +3 -7
- package/dist/components/AboutCard.js.map +1 -1
- package/dist/components/Avatar.cjs +1 -1
- package/dist/components/Avatar.cjs.map +1 -1
- package/dist/components/Avatar.d.cts +4 -2
- package/dist/components/Avatar.d.ts +4 -2
- package/dist/components/Avatar.js +1 -1
- package/dist/components/Avatar.js.map +1 -1
- package/dist/components/Badge.cjs +1 -1
- package/dist/components/Badge.cjs.map +1 -1
- package/dist/components/Badge.d.cts +2 -2
- package/dist/components/Badge.d.ts +2 -2
- package/dist/components/Badge.js +1 -1
- package/dist/components/Badge.js.map +1 -1
- package/dist/components/Breadcrumbs.cjs +1 -1
- package/dist/components/Breadcrumbs.cjs.map +1 -1
- package/dist/components/Breadcrumbs.js +1 -1
- package/dist/components/Breadcrumbs.js.map +1 -1
- package/dist/components/Button.cjs +3 -7
- package/dist/components/Button.cjs.map +1 -1
- package/dist/components/Button.d.cts +11 -1
- package/dist/components/Button.d.ts +11 -1
- package/dist/components/Button.js +3 -7
- package/dist/components/Button.js.map +1 -1
- package/dist/components/Collapsible.cjs +2 -0
- package/dist/components/Collapsible.cjs.map +1 -0
- package/dist/components/Collapsible.d.cts +12 -0
- package/dist/components/Collapsible.d.ts +12 -0
- package/dist/components/Collapsible.js +2 -0
- package/dist/components/Collapsible.js.map +1 -0
- package/dist/components/Combobox.cjs +1 -1
- package/dist/components/Combobox.cjs.map +1 -1
- package/dist/components/Combobox.js +1 -1
- package/dist/components/Combobox.js.map +1 -1
- package/dist/components/ContactItem.cjs +1 -1
- package/dist/components/ContactItem.cjs.map +1 -1
- package/dist/components/ContactItem.d.cts +2 -3
- package/dist/components/ContactItem.d.ts +2 -3
- package/dist/components/ContactItem.js +1 -1
- package/dist/components/ContactItem.js.map +1 -1
- package/dist/components/EditButton.cjs +10 -0
- package/dist/components/EditButton.cjs.map +1 -0
- package/dist/components/EditButton.d.cts +12 -0
- package/dist/components/EditButton.d.ts +12 -0
- package/dist/components/EditButton.js +10 -0
- package/dist/components/EditButton.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 +4 -3
- package/dist/components/Icon.d.ts +4 -3
- package/dist/components/Icon.js +1 -1
- package/dist/components/Icon.js.map +1 -1
- package/dist/components/IconRenderer.cjs +2 -0
- package/dist/components/IconRenderer.cjs.map +1 -0
- package/dist/components/IconRenderer.d.cts +13 -0
- package/dist/components/IconRenderer.d.ts +13 -0
- package/dist/components/IconRenderer.js +2 -0
- package/dist/components/IconRenderer.js.map +1 -0
- package/dist/components/Illustration.cjs +50 -0
- package/dist/components/Illustration.cjs.map +1 -0
- package/dist/components/Illustration.d.cts +10 -0
- package/dist/components/Illustration.d.ts +10 -0
- package/dist/components/Illustration.js +50 -0
- package/dist/components/Illustration.js.map +1 -0
- package/dist/components/Input.cjs +1 -1
- package/dist/components/Input.cjs.map +1 -1
- package/dist/components/Input.d.cts +1 -1
- package/dist/components/Input.d.ts +1 -1
- package/dist/components/Input.js +1 -1
- package/dist/components/Input.js.map +1 -1
- package/dist/components/Link.cjs +1 -1
- package/dist/components/Link.cjs.map +1 -1
- package/dist/components/Link.d.cts +1 -1
- package/dist/components/Link.d.ts +1 -1
- package/dist/components/Link.js +1 -1
- package/dist/components/Link.js.map +1 -1
- package/dist/components/Logo.cjs +1 -1
- package/dist/components/Logo.cjs.map +1 -1
- package/dist/components/Logo.d.cts +2 -5
- package/dist/components/Logo.d.ts +2 -5
- package/dist/components/Logo.js +1 -1
- package/dist/components/Logo.js.map +1 -1
- package/dist/components/Navbar.cjs +2 -2
- package/dist/components/Navbar.cjs.map +1 -1
- package/dist/components/Navbar.d.cts +1 -1
- package/dist/components/Navbar.d.ts +1 -1
- package/dist/components/Navbar.js +2 -2
- package/dist/components/Navbar.js.map +1 -1
- package/dist/components/NavbarItem.cjs +1 -1
- package/dist/components/NavbarItem.cjs.map +1 -1
- package/dist/components/NavbarItem.d.cts +1 -1
- package/dist/components/NavbarItem.d.ts +1 -1
- package/dist/components/NavbarItem.js +1 -1
- package/dist/components/NavbarItem.js.map +1 -1
- package/dist/components/Pressable.cjs +1 -1
- package/dist/components/Pressable.cjs.map +1 -1
- package/dist/components/Pressable.js +1 -1
- package/dist/components/Pressable.js.map +1 -1
- package/dist/components/ProfileCard.cjs +3 -7
- package/dist/components/ProfileCard.cjs.map +1 -1
- package/dist/components/ProfileCard.d.cts +3 -1
- package/dist/components/ProfileCard.d.ts +3 -1
- package/dist/components/ProfileCard.js +3 -7
- package/dist/components/ProfileCard.js.map +1 -1
- package/dist/components/SocialCard.cjs +1 -1
- package/dist/components/SocialCard.cjs.map +1 -1
- package/dist/components/SocialCard.js +1 -1
- package/dist/components/SocialCard.js.map +1 -1
- package/dist/components/Spinner.cjs +2 -0
- package/dist/components/Spinner.cjs.map +1 -0
- package/dist/components/Spinner.d.cts +19 -0
- package/dist/components/Spinner.d.ts +19 -0
- package/dist/components/Spinner.js +2 -0
- package/dist/components/Spinner.js.map +1 -0
- package/dist/components/Tabs.cjs +1 -1
- package/dist/components/Tabs.cjs.map +1 -1
- package/dist/components/Tabs.js +1 -1
- package/dist/components/Tabs.js.map +1 -1
- package/dist/components/Tag.cjs +1 -1
- package/dist/components/Tag.cjs.map +1 -1
- package/dist/components/Tag.d.cts +3 -2
- package/dist/components/Tag.d.ts +3 -2
- package/dist/components/Tag.js +1 -1
- package/dist/components/Tag.js.map +1 -1
- package/dist/components/Text.cjs +1 -1
- package/dist/components/Text.cjs.map +1 -1
- package/dist/components/Text.d.cts +2 -2
- package/dist/components/Text.d.ts +2 -2
- package/dist/components/Text.js +1 -1
- package/dist/components/Text.js.map +1 -1
- package/dist/components/WorkCard.cjs +1 -1
- package/dist/components/WorkCard.cjs.map +1 -1
- package/dist/components/WorkCard.js +1 -1
- package/dist/components/WorkCard.js.map +1 -1
- package/dist/index.cjs +51 -7
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +40 -20
- package/dist/index.d.ts +40 -20
- package/dist/index.js +51 -7
- package/dist/index.js.map +1 -1
- package/dist/styles/styles.css +1 -1
- package/dist/{tailwind-DJFscIlV.d.cts → tailwind-BKauZ5Yx.d.cts} +3 -3
- package/dist/{tailwind-DJFscIlV.d.ts → tailwind-BKauZ5Yx.d.ts} +3 -3
- package/package.json +3 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/components/Icon.tsx","../../src/utils/index.ts","../../src/components/Text.tsx","../../src/components/SocialCard.tsx"],"names":["focusRingStyles","Pressable","children","type","className","props","React","cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","baseSize","style","mediaQueries","size","acc","breakpoint","value","Icon","name","color","title","ref","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","SocialCard","icon","followers","engagement","pressableProps"],"mappings":"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","file":"SocialCard.cjs","sourcesContent":["import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable: React.FC<PressableProps> = ({\n children,\n type = \"button\",\n className,\n ...props\n}) => (\n <button\n // eslint-disable-next-line react/butt on-has-type\n type={type}\n className={`appearance-none hover:opacity-80 transition-all active:scale-95 ${focusRingStyles} ${className}`}\n {...props}\n >\n {children}\n </button>\n);\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: number | `${Breakpoint}:${number}`;\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\"\n};\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"@media (min-width: 640px)\",\n md: \"@media (min-width: 768px)\",\n lg: \"@media (min-width: 1024px)\",\n xl: \"@media (min-width: 1280px)\",\n \"2xl\": \"@media (min-width: 1536px)\"\n};\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n const baseSize = typeof sizeArray[0] === \"number\" ? sizeArray[0] : 24;\n\n const style: React.CSSProperties = {\n width: `${baseSize}px`,\n height: `${baseSize}px`\n };\n\n // Add media queries for responsive sizes\n const mediaQueries = sizeArray\n .filter(\n (size): size is `${Breakpoint}:${number}` =>\n typeof size === \"string\" && size.includes(\":\")\n )\n .reduce(\n (acc, size) => {\n const [breakpoint, value] = size.split(\":\") as [Breakpoint, string];\n acc[BREAKPOINT_MAP[breakpoint]] = {\n width: `${value}px`,\n height: `${value}px`\n };\n return acc;\n },\n {} as Record<string, React.CSSProperties>\n );\n\n if (Object.keys(mediaQueries).length > 0) {\n (style as any)[\"@media\"] = mediaQueries;\n }\n\n return style;\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const sizeStyles = processSizes(size);\n\n return (\n <div\n className={cn(\"flex justify-center items-center\", className)}\n style={{\n ...sizeStyles,\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React from \"react\";\nimport {\n Colors,\n TextColorVariant,\n PrimaryShades,\n SecondaryShades,\n TertiaryShades,\n Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n ? TextColorVariant\n : T extends \"primary\"\n ? keyof PrimaryShades\n : T extends \"secondary\"\n ? keyof SecondaryShades\n : T extends \"tertiary\"\n ? keyof TertiaryShades\n : never;\n\ntype ColorKey = {\n [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: ColorKey | \"inherit\";\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return Array.isArray(variants) ? `lg:text-${variant}` : `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"text-primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import React from \"react\";\nimport { Pressable, PressableProps } from \"./Pressable\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\nimport { IconName } from \"@deckai/icons\";\n\nexport type SocialCardProps = {\n icon: IconName;\n followers: string;\n engagement: string;\n} & PressableProps;\n\nexport const SocialCard = ({\n icon,\n followers,\n engagement,\n ...pressableProps\n}: SocialCardProps) => (\n <Pressable {...pressableProps}>\n <div className=\"flex gap-4 px-6 py-4 border border-secondary rounded-lg\">\n <Icon name={icon} size={40} />\n <div className=\"flex items-center\">\n <Icon name=\"profile\" size={20} />\n <Text variant={[\"body-default-medium\", \"md:body-xs-medium\"]}>\n {followers}\n </Text>\n </div>\n <div className=\"flex items-center\">\n <Icon name=\"arrow-swap-horizontal\" className=\"rotate-90\" size={20} />\n <Text variant={[\"body-default-medium\", \"md:body-xs-medium\"]}>\n {engagement}\n </Text>\n </div>\n </div>\n </Pressable>\n);\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/components/Icon.tsx","../../src/utils/index.ts","../../src/components/Text.tsx","../../src/components/SocialCard.tsx"],"names":["focusRingStyles","Pressable","children","type","className","disabled","props","React","cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Icon","name","color","title","style","ref","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","SocialCard","icon","followers","engagement","pressableProps"],"mappings":"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","file":"SocialCard.cjs","sourcesContent":["import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable: React.FC<PressableProps> = ({\n children,\n type = \"button\",\n className,\n disabled,\n ...props\n}) => (\n <button\n // eslint-disable-next-line react/butt on-has-type\n type={type}\n disabled={disabled}\n className={`appearance-none hover:opacity-80 transition-all active:scale-95 ${focusRingStyles} ${className} ${disabled ? \"opacity-50 cursor-not-allowed\" : \"\"}`}\n {...props}\n >\n {children}\n </button>\n);\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: ResponsiveSize | ResponsiveSize[];\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\"\n};\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n \"2xl\": \"1536px\"\n};\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n const mediaQueries: Record<string, string> = {};\n let baseSize: string | undefined;\n\n // Process each size\n sizeArray.forEach((size) => {\n if (typeof size === \"number\") {\n baseSize = `${size}px`;\n } else {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n mediaQueries[`@media (min-width: ${BREAKPOINT_MAP[breakpoint]})`] =\n `${value}px`;\n }\n });\n\n // Create the style object with the correct structure\n return {\n width: baseSize || \"24px\",\n height: baseSize || \"24px\",\n ...Object.entries(mediaQueries).reduce(\n (acc, [query, size]) => ({\n ...acc,\n [query]: {\n width: size,\n height: size\n }\n }),\n {}\n )\n };\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const sizeStyles = processSizes(size);\n\n return (\n <div\n className={cn(\"flex justify-center items-center\", className)}\n style={{\n ...sizeStyles,\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React from \"react\";\nimport {\n Colors,\n TextColorVariant,\n PrimaryShades,\n SecondaryShades,\n TertiaryShades,\n Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n ? TextColorVariant\n : T extends \"primary\"\n ? keyof PrimaryShades\n : T extends \"secondary\"\n ? keyof SecondaryShades\n : T extends \"tertiary\"\n ? keyof TertiaryShades\n : never;\n\ntype ColorKey = {\n [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: ColorKey | \"inherit\";\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"text-primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import React from \"react\";\nimport { Pressable, PressableProps } from \"./Pressable\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\nimport { IconName } from \"@deckai/icons\";\n\nexport type SocialCardProps = {\n icon: IconName;\n followers: string;\n engagement: string;\n} & PressableProps;\n\nexport const SocialCard = ({\n icon,\n followers,\n engagement,\n ...pressableProps\n}: SocialCardProps) => (\n <Pressable\n className=\"sm:w-max w-full hover:bg-secondary-400\"\n {...pressableProps}\n >\n <div className=\"flex sm:flex-row flex-col items-center sm:gap-4 gap-1 sm:px-6 sm:py-4 p-2 border border-secondary rounded-lg\">\n <Icon name={icon} size={[\"lg:40\", 32]} color=\"primaryBlue\" />\n <div className=\"flex items-center sm:pt-0 pt-3\">\n <Icon name=\"profile\" size={[\"sm:20\", 16]} />\n <Text variant={[\"body-default-medium\", \"md:body-xs-medium\"]}>\n {followers}\n </Text>\n </div>\n <div className=\"flex items-center\">\n <Icon name=\"like-1\" size={[\"sm:20\", 16]} />\n <Text variant={[\"body-default-medium\", \"md:body-xs-medium\"]}>\n {engagement}\n </Text>\n </div>\n </div>\n </Pressable>\n);\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import n from'react';import {IconMap}from'@deckai/icons';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';var g="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var u=({children:e,type:r="button",className:t,disabled:o,...s})=>n.createElement("button",{type:r,disabled:o,className:`appearance-none hover:opacity-80 transition-all active:scale-95 ${g} ${t} ${o?"opacity-50 cursor-not-allowed":""}`,...s},e);function f(...e){return twMerge(clsx(e))}var h={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB"},C={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},$=e=>{if(!e)return {width:"24px",height:"24px"};let r=Array.isArray(e)?e:[e],t={},o;return r.forEach(s=>{if(typeof s=="number")o=`${s}px`;else {let[a,i]=s.split(":"),l=parseInt(i,10);t[`@media (min-width: ${C[a]})`]=`${l}px`;}}),{width:o||"24px",height:o||"24px",...Object.entries(t).reduce((s,[a,i])=>({...s,[a]:{width:i,height:i}}),{})}},p=n.forwardRef(({name:e,size:r=24,color:t="primary",title:o,className:s,style:a={},...i},l)=>{let c=IconMap[e],y=$(r);return n.createElement("div",{className:f("flex justify-center items-center",s),style:{...y,"--icon-stroke":h[t],...a}},n.createElement(c,{ref:l,"aria-hidden":!o,"aria-label":o,stroke:e.includes("filled")?void 0:h[t],...i}))});p.displayName="Icon";var R={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},S=e=>{let[r,t]=e.split("-");return r==="heading"?R[t]||"p":r==="label"?"label":"p"},A={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},P=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[o,s]=t.split(":");return `${o}:text-${s}`}return `text-${t}`}).join(" "):"text-body-default",m=n.forwardRef(({variant:e="body-default",color:r="text-primary",as:t,className:o,children:s,weight:a,...i},l)=>{let c=P(e),y=r&&r==="inherit"?"inherit":r?`text-${r}`:"",b=n.useMemo(()=>{let x=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return S(x)},[e]);return n.createElement(t||b,{ref:l,className:`font-sans antialiased ${c} ${y} ${a?`!${A[a]}`:""} ${o??""}`,...i},s)});m.displayName="Text";var Z=({icon:e,followers:r,engagement:t,...o})=>n.createElement(u,{className:"sm:w-max w-full hover:bg-secondary-400",...o},n.createElement("div",{className:"flex sm:flex-row flex-col items-center sm:gap-4 gap-1 sm:px-6 sm:py-4 p-2 border border-secondary rounded-lg"},n.createElement(p,{name:e,size:["lg:40",32],color:"primaryBlue"}),n.createElement("div",{className:"flex items-center sm:pt-0 pt-3"},n.createElement(p,{name:"profile",size:["sm:20",16]}),n.createElement(m,{variant:["body-default-medium","md:body-xs-medium"]},r)),n.createElement("div",{className:"flex items-center"},n.createElement(p,{name:"like-1",size:["sm:20",16]}),n.createElement(m,{variant:["body-default-medium","md:body-xs-medium"]},t))));if (exports.default) module.exports = exports.default;export{Z as SocialCard};//# sourceMappingURL=SocialCard.js.map
|
|
2
2
|
//# sourceMappingURL=SocialCard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/components/Icon.tsx","../../src/utils/index.ts","../../src/components/Text.tsx","../../src/components/SocialCard.tsx"],"names":["focusRingStyles","Pressable","children","type","className","props","React","cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","baseSize","style","mediaQueries","size","acc","breakpoint","value","Icon","name","color","title","ref","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","SocialCard","icon","followers","engagement","pressableProps"],"mappings":"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","file":"SocialCard.js","sourcesContent":["import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable: React.FC<PressableProps> = ({\n children,\n type = \"button\",\n className,\n ...props\n}) => (\n <button\n // eslint-disable-next-line react/butt on-has-type\n type={type}\n className={`appearance-none hover:opacity-80 transition-all active:scale-95 ${focusRingStyles} ${className}`}\n {...props}\n >\n {children}\n </button>\n);\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: number | `${Breakpoint}:${number}`;\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\"\n};\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"@media (min-width: 640px)\",\n md: \"@media (min-width: 768px)\",\n lg: \"@media (min-width: 1024px)\",\n xl: \"@media (min-width: 1280px)\",\n \"2xl\": \"@media (min-width: 1536px)\"\n};\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n const baseSize = typeof sizeArray[0] === \"number\" ? sizeArray[0] : 24;\n\n const style: React.CSSProperties = {\n width: `${baseSize}px`,\n height: `${baseSize}px`\n };\n\n // Add media queries for responsive sizes\n const mediaQueries = sizeArray\n .filter(\n (size): size is `${Breakpoint}:${number}` =>\n typeof size === \"string\" && size.includes(\":\")\n )\n .reduce(\n (acc, size) => {\n const [breakpoint, value] = size.split(\":\") as [Breakpoint, string];\n acc[BREAKPOINT_MAP[breakpoint]] = {\n width: `${value}px`,\n height: `${value}px`\n };\n return acc;\n },\n {} as Record<string, React.CSSProperties>\n );\n\n if (Object.keys(mediaQueries).length > 0) {\n (style as any)[\"@media\"] = mediaQueries;\n }\n\n return style;\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const sizeStyles = processSizes(size);\n\n return (\n <div\n className={cn(\"flex justify-center items-center\", className)}\n style={{\n ...sizeStyles,\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React from \"react\";\nimport {\n Colors,\n TextColorVariant,\n PrimaryShades,\n SecondaryShades,\n TertiaryShades,\n Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n ? TextColorVariant\n : T extends \"primary\"\n ? keyof PrimaryShades\n : T extends \"secondary\"\n ? keyof SecondaryShades\n : T extends \"tertiary\"\n ? keyof TertiaryShades\n : never;\n\ntype ColorKey = {\n [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: ColorKey | \"inherit\";\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return Array.isArray(variants) ? `lg:text-${variant}` : `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"text-primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import React from \"react\";\nimport { Pressable, PressableProps } from \"./Pressable\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\nimport { IconName } from \"@deckai/icons\";\n\nexport type SocialCardProps = {\n icon: IconName;\n followers: string;\n engagement: string;\n} & PressableProps;\n\nexport const SocialCard = ({\n icon,\n followers,\n engagement,\n ...pressableProps\n}: SocialCardProps) => (\n <Pressable {...pressableProps}>\n <div className=\"flex gap-4 px-6 py-4 border border-secondary rounded-lg\">\n <Icon name={icon} size={40} />\n <div className=\"flex items-center\">\n <Icon name=\"profile\" size={20} />\n <Text variant={[\"body-default-medium\", \"md:body-xs-medium\"]}>\n {followers}\n </Text>\n </div>\n <div className=\"flex items-center\">\n <Icon name=\"arrow-swap-horizontal\" className=\"rotate-90\" size={20} />\n <Text variant={[\"body-default-medium\", \"md:body-xs-medium\"]}>\n {engagement}\n </Text>\n </div>\n </div>\n </Pressable>\n);\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/components/Icon.tsx","../../src/utils/index.ts","../../src/components/Text.tsx","../../src/components/SocialCard.tsx"],"names":["focusRingStyles","Pressable","children","type","className","disabled","props","React","cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Icon","name","color","title","style","ref","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","SocialCard","icon","followers","engagement","pressableProps"],"mappings":"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","file":"SocialCard.js","sourcesContent":["import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable: React.FC<PressableProps> = ({\n children,\n type = \"button\",\n className,\n disabled,\n ...props\n}) => (\n <button\n // eslint-disable-next-line react/butt on-has-type\n type={type}\n disabled={disabled}\n className={`appearance-none hover:opacity-80 transition-all active:scale-95 ${focusRingStyles} ${className} ${disabled ? \"opacity-50 cursor-not-allowed\" : \"\"}`}\n {...props}\n >\n {children}\n </button>\n);\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: ResponsiveSize | ResponsiveSize[];\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\"\n};\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n \"2xl\": \"1536px\"\n};\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n const mediaQueries: Record<string, string> = {};\n let baseSize: string | undefined;\n\n // Process each size\n sizeArray.forEach((size) => {\n if (typeof size === \"number\") {\n baseSize = `${size}px`;\n } else {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n mediaQueries[`@media (min-width: ${BREAKPOINT_MAP[breakpoint]})`] =\n `${value}px`;\n }\n });\n\n // Create the style object with the correct structure\n return {\n width: baseSize || \"24px\",\n height: baseSize || \"24px\",\n ...Object.entries(mediaQueries).reduce(\n (acc, [query, size]) => ({\n ...acc,\n [query]: {\n width: size,\n height: size\n }\n }),\n {}\n )\n };\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const sizeStyles = processSizes(size);\n\n return (\n <div\n className={cn(\"flex justify-center items-center\", className)}\n style={{\n ...sizeStyles,\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React from \"react\";\nimport {\n Colors,\n TextColorVariant,\n PrimaryShades,\n SecondaryShades,\n TertiaryShades,\n Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n ? TextColorVariant\n : T extends \"primary\"\n ? keyof PrimaryShades\n : T extends \"secondary\"\n ? keyof SecondaryShades\n : T extends \"tertiary\"\n ? keyof TertiaryShades\n : never;\n\ntype ColorKey = {\n [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: ColorKey | \"inherit\";\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"text-primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import React from \"react\";\nimport { Pressable, PressableProps } from \"./Pressable\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\nimport { IconName } from \"@deckai/icons\";\n\nexport type SocialCardProps = {\n icon: IconName;\n followers: string;\n engagement: string;\n} & PressableProps;\n\nexport const SocialCard = ({\n icon,\n followers,\n engagement,\n ...pressableProps\n}: SocialCardProps) => (\n <Pressable\n className=\"sm:w-max w-full hover:bg-secondary-400\"\n {...pressableProps}\n >\n <div className=\"flex sm:flex-row flex-col items-center sm:gap-4 gap-1 sm:px-6 sm:py-4 p-2 border border-secondary rounded-lg\">\n <Icon name={icon} size={[\"lg:40\", 32]} color=\"primaryBlue\" />\n <div className=\"flex items-center sm:pt-0 pt-3\">\n <Icon name=\"profile\" size={[\"sm:20\", 16]} />\n <Text variant={[\"body-default-medium\", \"md:body-xs-medium\"]}>\n {followers}\n </Text>\n </div>\n <div className=\"flex items-center\">\n <Icon name=\"like-1\" size={[\"sm:20\", 16]} />\n <Text variant={[\"body-default-medium\", \"md:body-xs-medium\"]}>\n {engagement}\n </Text>\n </div>\n </div>\n </Pressable>\n);\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';var d=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var d__namespace=/*#__PURE__*/_interopNamespace(d);var f=t=>typeof t=="boolean"?`${t}`:t===0?"0":t,y=clsx.clsx,V=(t,r)=>e=>{var o;if(r?.variants==null)return y(t,e?.class,e?.className);let{variants:u,defaultVariants:a}=r,b=Object.keys(u).map(n=>{let s=e?.[n],l=a?.[n];if(s===null)return null;let i=f(s)||f(l);return u[n][i]}),c=e&&Object.entries(e).reduce((n,s)=>{let[l,i]=s;return i===void 0||(n[l]=i),n},{}),x=r==null||(o=r.compoundVariants)===null||o===void 0?void 0:o.reduce((n,s)=>{let{class:l,className:i,...h}=s;return Object.entries(h).every(N=>{let[v,m]=N;return Array.isArray(m)?m.includes({...a,...c}[v]):{...a,...c}[v]===m})?[...n,l,i]:n},[]);return y(t,b,x,e?.class,e?.className)};function p(...t){return tailwindMerge.twMerge(clsx.clsx(t))}var g=V("animate-spin rounded-full border-current border-t-transparent",{variants:{size:{sm:"h-4 w-4 border-4",md:"h-6 w-6 border-4",lg:"h-8 w-8 border-8"}},defaultVariants:{size:"md"}}),M=d__namespace.forwardRef(({size:t,className:r,customSize:e,...o},u)=>{let a=e?{width:e,height:e,borderWidth:Math.max(2,Math.floor(e/16))}:{};return d__namespace.createElement("div",{role:"status","aria-label":"Loading",ref:u,className:p(g({size:t}),"text-primary-100",r),style:a,...o},d__namespace.createElement("span",{className:"sr-only"},"Loading..."))});M.displayName="Spinner";if (exports.default) module.exports = exports.default;exports.Spinner=M;//# sourceMappingURL=Spinner.cjs.map
|
|
2
|
+
//# sourceMappingURL=Spinner.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../node_modules/class-variance-authority/dist/index.mjs","../../src/utils/index.ts","../../src/components/Spinner.tsx"],"names":["falsyToString","value","cx","clsx","cva","base","config","props","_config_compoundVariants","variants","defaultVariants","getVariantClassNames","variant","variantProp","defaultVariantProp","variantKey","propsWithoutUndefined","acc","param","key","getCompoundVariantClassNames","cvClass","cvClassName","compoundVariantOptions","cn","inputs","twMerge","spinnerVariants","Spinner","d","size","className","customSize","ref","styles"],"mappings":"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","file":"Spinner.cjs","sourcesContent":["/**\n * Copyright 2022 Joe Bell. All rights reserved.\n *\n * This file is licensed to you under the Apache License, Version 2.0\n * (the \"License\"); you may not use this file except in compliance with the\n * License. You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the\n * License for the specific language governing permissions and limitations under\n * the License.\n */ import { clsx } from \"clsx\";\nconst falsyToString = (value)=>typeof value === \"boolean\" ? `${value}` : value === 0 ? \"0\" : value;\nexport const cx = clsx;\nexport const cva = (base, config)=>(props)=>{\n var _config_compoundVariants;\n if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);\n const { variants, defaultVariants } = config;\n const getVariantClassNames = Object.keys(variants).map((variant)=>{\n const variantProp = props === null || props === void 0 ? void 0 : props[variant];\n const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];\n if (variantProp === null) return null;\n const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);\n return variants[variant][variantKey];\n });\n const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param)=>{\n let [key, value] = param;\n if (value === undefined) {\n return acc;\n }\n acc[key] = value;\n return acc;\n }, {});\n const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param)=>{\n let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;\n return Object.entries(compoundVariantOptions).every((param)=>{\n let [key, value] = param;\n return Array.isArray(value) ? value.includes({\n ...defaultVariants,\n ...propsWithoutUndefined\n }[key]) : ({\n ...defaultVariants,\n ...propsWithoutUndefined\n })[key] === value;\n }) ? [\n ...acc,\n cvClass,\n cvClassName\n ] : acc;\n }, []);\n return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);\n };\n\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../utils\";\n\nconst spinnerVariants = cva(\n \"animate-spin rounded-full border-current border-t-transparent\",\n {\n variants: {\n size: {\n sm: \"h-4 w-4 border-4\",\n md: \"h-6 w-6 border-4\",\n lg: \"h-8 w-8 border-8\"\n }\n },\n defaultVariants: {\n size: \"md\"\n }\n }\n);\n\nexport type SpinnerProps = {\n className?: string;\n customSize?: number;\n} & VariantProps<typeof spinnerVariants>;\n\nexport const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(\n ({ size, className, customSize, ...props }, ref) => {\n const styles = customSize\n ? {\n width: customSize,\n height: customSize,\n borderWidth: Math.max(2, Math.floor(customSize / 16))\n }\n : {};\n\n return (\n <div\n role=\"status\"\n aria-label=\"Loading\"\n ref={ref}\n className={cn(spinnerVariants({ size }), \"text-primary-100\", className)}\n style={styles}\n {...props}\n >\n <span className=\"sr-only\">Loading...</span>\n </div>\n );\n }\n);\n\nSpinner.displayName = \"Spinner\";\n"]}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { VariantProps } from 'class-variance-authority';
|
|
4
|
+
|
|
5
|
+
declare const spinnerVariants: (props?: ({
|
|
6
|
+
size?: "lg" | "md" | "sm" | null | undefined;
|
|
7
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
8
|
+
type SpinnerProps = {
|
|
9
|
+
className?: string;
|
|
10
|
+
customSize?: number;
|
|
11
|
+
} & VariantProps<typeof spinnerVariants>;
|
|
12
|
+
declare const Spinner: React.ForwardRefExoticComponent<{
|
|
13
|
+
className?: string;
|
|
14
|
+
customSize?: number;
|
|
15
|
+
} & VariantProps<(props?: ({
|
|
16
|
+
size?: "lg" | "md" | "sm" | null | undefined;
|
|
17
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
|
|
18
|
+
|
|
19
|
+
export { Spinner, type SpinnerProps };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { VariantProps } from 'class-variance-authority';
|
|
4
|
+
|
|
5
|
+
declare const spinnerVariants: (props?: ({
|
|
6
|
+
size?: "lg" | "md" | "sm" | null | undefined;
|
|
7
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
8
|
+
type SpinnerProps = {
|
|
9
|
+
className?: string;
|
|
10
|
+
customSize?: number;
|
|
11
|
+
} & VariantProps<typeof spinnerVariants>;
|
|
12
|
+
declare const Spinner: React.ForwardRefExoticComponent<{
|
|
13
|
+
className?: string;
|
|
14
|
+
customSize?: number;
|
|
15
|
+
} & VariantProps<(props?: ({
|
|
16
|
+
size?: "lg" | "md" | "sm" | null | undefined;
|
|
17
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
|
|
18
|
+
|
|
19
|
+
export { Spinner, type SpinnerProps };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import*as d from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';var f=t=>typeof t=="boolean"?`${t}`:t===0?"0":t,y=clsx,V=(t,r)=>e=>{var o;if(r?.variants==null)return y(t,e?.class,e?.className);let{variants:u,defaultVariants:a}=r,b=Object.keys(u).map(n=>{let s=e?.[n],l=a?.[n];if(s===null)return null;let i=f(s)||f(l);return u[n][i]}),c=e&&Object.entries(e).reduce((n,s)=>{let[l,i]=s;return i===void 0||(n[l]=i),n},{}),x=r==null||(o=r.compoundVariants)===null||o===void 0?void 0:o.reduce((n,s)=>{let{class:l,className:i,...h}=s;return Object.entries(h).every(N=>{let[v,m]=N;return Array.isArray(m)?m.includes({...a,...c}[v]):{...a,...c}[v]===m})?[...n,l,i]:n},[]);return y(t,b,x,e?.class,e?.className)};function p(...t){return twMerge(clsx(t))}var g=V("animate-spin rounded-full border-current border-t-transparent",{variants:{size:{sm:"h-4 w-4 border-4",md:"h-6 w-6 border-4",lg:"h-8 w-8 border-8"}},defaultVariants:{size:"md"}}),M=d.forwardRef(({size:t,className:r,customSize:e,...o},u)=>{let a=e?{width:e,height:e,borderWidth:Math.max(2,Math.floor(e/16))}:{};return d.createElement("div",{role:"status","aria-label":"Loading",ref:u,className:p(g({size:t}),"text-primary-100",r),style:a,...o},d.createElement("span",{className:"sr-only"},"Loading..."))});M.displayName="Spinner";if (exports.default) module.exports = exports.default;export{M as Spinner};//# sourceMappingURL=Spinner.js.map
|
|
2
|
+
//# sourceMappingURL=Spinner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../node_modules/class-variance-authority/dist/index.mjs","../../src/utils/index.ts","../../src/components/Spinner.tsx"],"names":["falsyToString","value","cx","clsx","cva","base","config","props","_config_compoundVariants","variants","defaultVariants","getVariantClassNames","variant","variantProp","defaultVariantProp","variantKey","propsWithoutUndefined","acc","param","key","getCompoundVariantClassNames","cvClass","cvClassName","compoundVariantOptions","cn","inputs","twMerge","spinnerVariants","Spinner","size","className","customSize","ref","styles"],"mappings":"qFAeA,IAAMA,CAAAA,CAAiBC,CAAQ,EAAA,OAAOA,GAAU,SAAY,CAAA,CAAA,EAAGA,CAAK,CAAA,CAAA,CAAKA,IAAU,CAAI,CAAA,GAAA,CAAMA,CAChFC,CAAAA,CAAAA,CAAKC,KACLC,CAAM,CAAA,CAACC,CAAMC,CAAAA,CAAAA,GAAUC,GAAQ,CACpC,IAAIC,CACJ,CAAA,GAAqDF,GAAO,QAAa,EAAA,IAAA,CAAM,OAAOJ,CAAAA,CAAGG,EAAoDE,CAAM,EAAA,KAAA,CAAqDA,CAAM,EAAA,SAAS,EACvN,GAAM,CAAE,QAAAE,CAAAA,CAAAA,CAAU,gBAAAC,CAAgB,CAAA,CAAIJ,CAChCK,CAAAA,CAAAA,CAAuB,OAAO,IAAKF,CAAAA,CAAQ,CAAE,CAAA,GAAA,CAAKG,GAAU,CAC9D,IAAMC,CAA4DN,CAAAA,CAAAA,GAAMK,CAAO,CACzEE,CAAAA,CAAAA,CAAuFJ,CAAgBE,GAAAA,CAAO,EACpH,GAAIC,CAAAA,GAAgB,IAAM,CAAA,OAAO,KACjC,IAAME,CAAAA,CAAaf,CAAca,CAAAA,CAAW,GAAKb,CAAcc,CAAAA,CAAkB,CACjF,CAAA,OAAOL,EAASG,CAAO,CAAA,CAAEG,CAAU,CACvC,CAAC,CACKC,CAAAA,CAAAA,CAAwBT,CAAS,EAAA,MAAA,CAAO,QAAQA,CAAK,CAAA,CAAE,MAAO,CAAA,CAACU,EAAKC,CAAQ,GAAA,CAC9E,GAAI,CAACC,EAAKlB,CAAK,CAAA,CAAIiB,CACnB,CAAA,OAAIjB,IAAU,KAGdgB,CAAAA,GAAAA,CAAAA,CAAIE,CAAG,CAAA,CAAIlB,GACJgB,CACX,CAAA,CAAG,EAAE,EACCG,CAA+Bd,CAAAA,CAAAA,EAAW,IAAsCE,EAAAA,CAAAA,CAAAA,CAA2BF,EAAO,gBAAsB,IAAA,IAAA,EAAQE,CAA6B,GAAA,KAAA,CAAA,CAAvG,OAAyHA,CAAyB,CAAA,MAAA,CAAO,CAACS,CAAAA,CAAKC,IAAQ,CAC/O,GAAI,CAAE,KAAA,CAAOG,EAAS,SAAWC,CAAAA,CAAAA,CAAa,GAAGC,CAAuB,EAAIL,CAC5E,CAAA,OAAO,MAAO,CAAA,OAAA,CAAQK,CAAsB,CAAE,CAAA,KAAA,CAAOL,CAAQ,EAAA,CACzD,GAAI,CAACC,CAAAA,CAAKlB,CAAK,CAAIiB,CAAAA,CAAAA,CACnB,OAAO,KAAM,CAAA,OAAA,CAAQjB,CAAK,CAAA,CAAIA,EAAM,QAAS,CAAA,CACzC,GAAGS,CAAAA,CACH,GAAGM,CACP,CAAA,CAAEG,CAAG,CAAC,EAAK,CACP,GAAGT,CACH,CAAA,GAAGM,CACP,CAAGG,CAAAA,CAAG,CAAMlB,GAAAA,CAChB,CAAC,CAAI,CAAA,CACD,GAAGgB,CAAAA,CACHI,EACAC,CACJ,CAAA,CAAIL,CACR,CAAA,CAAG,EAAE,CAAA,CACL,OAAOf,CAAAA,CAAGG,EAAMM,CAAsBS,CAAAA,CAAAA,CAA4Eb,CAAM,EAAA,KAAA,CAAqDA,GAAM,SAAS,CAChM,CCtDJ,CAGO,SAASiB,CAAMC,CAAAA,GAAAA,CAAAA,CAAsB,CAC1C,OAAOC,OAAAA,CAAQvB,IAAKsB,CAAAA,CAAM,CAAC,CAC7B,CCDME,IAAAA,CAAAA,CAAkBvB,EACtB,+DACA,CAAA,CACE,QAAU,CAAA,CACR,KAAM,CACJ,EAAA,CAAI,kBACJ,CAAA,EAAA,CAAI,mBACJ,EAAI,CAAA,kBACN,CACF,CAAA,CACA,gBAAiB,CACf,IAAA,CAAM,IACR,CACF,CACF,CAOawB,CAAAA,CAAAA,CAAgB,CAC3B,CAAA,UAAA,CAAA,CAAC,CAAE,IAAAC,CAAAA,CAAAA,CAAM,SAAAC,CAAAA,CAAAA,CAAW,WAAAC,CAAY,CAAA,GAAGxB,CAAM,CAAA,CAAGyB,IAAQ,CAClD,IAAMC,CAASF,CAAAA,CAAAA,CACX,CACE,KAAOA,CAAAA,CAAAA,CACP,MAAQA,CAAAA,CAAAA,CACR,YAAa,IAAK,CAAA,GAAA,CAAI,CAAG,CAAA,IAAA,CAAK,MAAMA,CAAa,CAAA,EAAE,CAAC,CACtD,EACA,EAAC,CAEL,OACE,CAAA,CAAA,aAAA,CAAC,OACC,IAAK,CAAA,QAAA,CACL,YAAW,CAAA,SAAA,CACX,IAAKC,CACL,CAAA,SAAA,CAAWR,CAAGG,CAAAA,CAAAA,CAAgB,CAAE,IAAAE,CAAAA,CAAK,CAAC,CAAA,CAAG,mBAAoBC,CAAS,CAAA,CACtE,KAAOG,CAAAA,CAAAA,CACN,GAAG1B,CAEJ,CAAA,CAAA,CAAA,CAAA,aAAA,CAAC,MAAK,CAAA,CAAA,SAAA,CAAU,WAAU,YAAU,CACtC,CAEJ,CACF,EAEAqB,EAAQ,WAAc,CAAA,SAAA","file":"Spinner.js","sourcesContent":["/**\n * Copyright 2022 Joe Bell. All rights reserved.\n *\n * This file is licensed to you under the Apache License, Version 2.0\n * (the \"License\"); you may not use this file except in compliance with the\n * License. You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the\n * License for the specific language governing permissions and limitations under\n * the License.\n */ import { clsx } from \"clsx\";\nconst falsyToString = (value)=>typeof value === \"boolean\" ? `${value}` : value === 0 ? \"0\" : value;\nexport const cx = clsx;\nexport const cva = (base, config)=>(props)=>{\n var _config_compoundVariants;\n if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);\n const { variants, defaultVariants } = config;\n const getVariantClassNames = Object.keys(variants).map((variant)=>{\n const variantProp = props === null || props === void 0 ? void 0 : props[variant];\n const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];\n if (variantProp === null) return null;\n const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);\n return variants[variant][variantKey];\n });\n const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param)=>{\n let [key, value] = param;\n if (value === undefined) {\n return acc;\n }\n acc[key] = value;\n return acc;\n }, {});\n const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param)=>{\n let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;\n return Object.entries(compoundVariantOptions).every((param)=>{\n let [key, value] = param;\n return Array.isArray(value) ? value.includes({\n ...defaultVariants,\n ...propsWithoutUndefined\n }[key]) : ({\n ...defaultVariants,\n ...propsWithoutUndefined\n })[key] === value;\n }) ? [\n ...acc,\n cvClass,\n cvClassName\n ] : acc;\n }, []);\n return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);\n };\n\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../utils\";\n\nconst spinnerVariants = cva(\n \"animate-spin rounded-full border-current border-t-transparent\",\n {\n variants: {\n size: {\n sm: \"h-4 w-4 border-4\",\n md: \"h-6 w-6 border-4\",\n lg: \"h-8 w-8 border-8\"\n }\n },\n defaultVariants: {\n size: \"md\"\n }\n }\n);\n\nexport type SpinnerProps = {\n className?: string;\n customSize?: number;\n} & VariantProps<typeof spinnerVariants>;\n\nexport const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(\n ({ size, className, customSize, ...props }, ref) => {\n const styles = customSize\n ? {\n width: customSize,\n height: customSize,\n borderWidth: Math.max(2, Math.floor(customSize / 16))\n }\n : {};\n\n return (\n <div\n role=\"status\"\n aria-label=\"Loading\"\n ref={ref}\n className={cn(spinnerVariants({ size }), \"text-primary-100\", className)}\n style={styles}\n {...props}\n >\n <span className=\"sr-only\">Loading...</span>\n </div>\n );\n }\n);\n\nSpinner.displayName = \"Spinner\";\n"]}
|
package/dist/components/Tabs.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var n=require('react'),o=require('@radix-ui/react-tabs');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 n__default=/*#__PURE__*/_interopDefault(n);var o__namespace=/*#__PURE__*/_interopNamespace(o);var
|
|
1
|
+
'use strict';var n=require('react'),o=require('@radix-ui/react-tabs');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 n__default=/*#__PURE__*/_interopDefault(n);var o__namespace=/*#__PURE__*/_interopNamespace(o);var u={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},c=e=>{let[t,r]=e.split("-");return t==="heading"?u[r]||"p":t==="label"?"label":"p"},h={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},H=e=>e?(Array.isArray(e)?e:[e]).map(r=>{if(r.includes(":")){let[s,l]=r.split(":");return `${s}:text-${l}`}return `text-${r}`}).join(" "):"text-body-default",T=n__default.default.forwardRef(({variant:e="body-default",color:t="text-primary",as:r,className:s,children:l,weight:a,...p},y)=>{let m=H(e),d=t&&t==="inherit"?"inherit":t?`text-${t}`:"",g=n__default.default.useMemo(()=>{let b=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return c(b)},[e]);return n__default.default.createElement(r||g,{ref:y,className:`font-sans antialiased ${m} ${d} ${a?`!${h[a]}`:""} ${s??""}`,...p},l)});T.displayName="Text";var L=n__default.default.forwardRef(({items:e,defaultValue:t,className:r="",onChange:s},l)=>n__default.default.createElement(o__namespace.Root,{defaultValue:t||e[0]?.value,onValueChange:s,className:r},n__default.default.createElement(o__namespace.List,{ref:l,className:"flex gap-8 border-b border-stroke mb-8"},e.map(a=>n__default.default.createElement(o__namespace.Trigger,{key:a.value,value:a.value,className:"group pb-4 relative flex-1"},n__default.default.createElement(T,{variant:["sm:body-lg-semibold","body-default-semibold"],color:"text-secondary",className:"group-data-[state=active]:text-text-primary transition-colors sm:text-inherit"},a.label),n__default.default.createElement("div",{className:"absolute bottom-0 left-0 right-0 h-1 bg-primary-100 scale-x-0 group-data-[state=active]:scale-x-100 transition-transform"})))),e.map(a=>n__default.default.createElement(o__namespace.Content,{key:a.value,value:a.value},a.content))));L.displayName="Tabs";if (exports.default) module.exports = exports.default;exports.Tabs=L;//# sourceMappingURL=Tabs.cjs.map
|
|
2
2
|
//# sourceMappingURL=Tabs.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Text.tsx","../../src/components/Tabs.tsx"],"names":["HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","size","fontWeight","processVariants","variants","breakpoint","typographyClass","Text","React","color","as","className","children","weight","props","ref","typographyClasses","colorClasses","suggestedElement","baseVariant","Tabs","items","defaultValue","onChange","o","item"],"mappings":"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","file":"Tabs.cjs","sourcesContent":["import React from \"react\";\nimport {\n Colors,\n TextColorVariant,\n PrimaryShades,\n SecondaryShades,\n TertiaryShades,\n Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n ? TextColorVariant\n : T extends \"primary\"\n ? keyof PrimaryShades\n : T extends \"secondary\"\n ? keyof SecondaryShades\n : T extends \"tertiary\"\n ? keyof TertiaryShades\n : never;\n\ntype ColorKey = {\n [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: ColorKey | \"inherit\";\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return Array.isArray(variants) ? `lg:text-${variant}` : `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"text-primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import React from \"react\";\nimport * as RadixTabs from \"@radix-ui/react-tabs\";\nimport { Text } from \"./Text\";\n\nexport type TabItem = {\n value: string;\n label: string;\n content: React.ReactNode;\n};\n\nexport type TabsProps = {\n items: TabItem[];\n defaultValue?: string;\n className?: string;\n onChange?: (value: string) => void;\n};\n\nexport const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(\n ({ items, defaultValue, className = \"\", onChange }, ref) => {\n return (\n <RadixTabs.Root\n defaultValue={defaultValue || items[0]?.value}\n onValueChange={onChange}\n className={className}\n >\n <RadixTabs.List\n ref={ref}\n className=\"flex gap-8 border-b border-stroke mb-8\"\n >\n {items.map((item) => (\n <RadixTabs.Trigger\n key={item.value}\n value={item.value}\n className=\"group pb-4 relative flex-1\"\n >\n <Text\n variant=\"body-lg-semibold\"\n color=\"text-secondary\"\n className=\"group-data-[state=active]:text-text-primary transition-colors\"\n >\n {item.label}\n </Text>\n <div className=\"absolute bottom-0 left-0 right-0 h-1 bg-primary-100 scale-x-0 group-data-[state=active]:scale-x-100 transition-transform\" />\n </RadixTabs.Trigger>\n ))}\n </RadixTabs.List>\n\n {items.map((item) => (\n <RadixTabs.Content key={item.value} value={item.value}>\n {item.content}\n </RadixTabs.Content>\n ))}\n </RadixTabs.Root>\n );\n }\n);\n\nTabs.displayName = \"Tabs\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/Text.tsx","../../src/components/Tabs.tsx"],"names":["HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","size","fontWeight","processVariants","variants","breakpoint","typographyClass","Text","React","color","as","className","children","weight","props","ref","typographyClasses","colorClasses","suggestedElement","baseVariant","Tabs","items","defaultValue","onChange","o","item"],"mappings":"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","file":"Tabs.cjs","sourcesContent":["import React from \"react\";\nimport {\n Colors,\n TextColorVariant,\n PrimaryShades,\n SecondaryShades,\n TertiaryShades,\n Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n ? TextColorVariant\n : T extends \"primary\"\n ? keyof PrimaryShades\n : T extends \"secondary\"\n ? keyof SecondaryShades\n : T extends \"tertiary\"\n ? keyof TertiaryShades\n : never;\n\ntype ColorKey = {\n [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: ColorKey | \"inherit\";\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"text-primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import React from \"react\";\nimport * as RadixTabs from \"@radix-ui/react-tabs\";\nimport { Text } from \"./Text\";\n\nexport type TabItem = {\n value: string;\n label: string;\n content: React.ReactNode;\n};\n\nexport type TabsProps = {\n items: TabItem[];\n defaultValue?: string;\n className?: string;\n onChange?: (value: string) => void;\n};\n\nexport const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(\n ({ items, defaultValue, className = \"\", onChange }, ref) => {\n return (\n <RadixTabs.Root\n defaultValue={defaultValue || items[0]?.value}\n onValueChange={onChange}\n className={className}\n >\n <RadixTabs.List\n ref={ref}\n className=\"flex gap-8 border-b border-stroke mb-8\"\n >\n {items.map((item) => (\n <RadixTabs.Trigger\n key={item.value}\n value={item.value}\n className=\"group pb-4 relative flex-1\"\n >\n <Text\n variant={[\"sm:body-lg-semibold\", \"body-default-semibold\"]}\n color=\"text-secondary\"\n className=\"group-data-[state=active]:text-text-primary transition-colors sm:text-inherit\"\n >\n {item.label}\n </Text>\n <div className=\"absolute bottom-0 left-0 right-0 h-1 bg-primary-100 scale-x-0 group-data-[state=active]:scale-x-100 transition-transform\" />\n </RadixTabs.Trigger>\n ))}\n </RadixTabs.List>\n\n {items.map((item) => (\n <RadixTabs.Content key={item.value} value={item.value}>\n {item.content}\n </RadixTabs.Content>\n ))}\n </RadixTabs.Root>\n );\n }\n);\n\nTabs.displayName = \"Tabs\";\n"]}
|
package/dist/components/Tabs.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import n from'react';import*as o from'@radix-ui/react-tabs';var
|
|
1
|
+
import n from'react';import*as o from'@radix-ui/react-tabs';var u={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},c=e=>{let[t,r]=e.split("-");return t==="heading"?u[r]||"p":t==="label"?"label":"p"},h={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},H=e=>e?(Array.isArray(e)?e:[e]).map(r=>{if(r.includes(":")){let[s,l]=r.split(":");return `${s}:text-${l}`}return `text-${r}`}).join(" "):"text-body-default",T=n.forwardRef(({variant:e="body-default",color:t="text-primary",as:r,className:s,children:l,weight:a,...p},y)=>{let m=H(e),d=t&&t==="inherit"?"inherit":t?`text-${t}`:"",g=n.useMemo(()=>{let b=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return c(b)},[e]);return n.createElement(r||g,{ref:y,className:`font-sans antialiased ${m} ${d} ${a?`!${h[a]}`:""} ${s??""}`,...p},l)});T.displayName="Text";var L=n.forwardRef(({items:e,defaultValue:t,className:r="",onChange:s},l)=>n.createElement(o.Root,{defaultValue:t||e[0]?.value,onValueChange:s,className:r},n.createElement(o.List,{ref:l,className:"flex gap-8 border-b border-stroke mb-8"},e.map(a=>n.createElement(o.Trigger,{key:a.value,value:a.value,className:"group pb-4 relative flex-1"},n.createElement(T,{variant:["sm:body-lg-semibold","body-default-semibold"],color:"text-secondary",className:"group-data-[state=active]:text-text-primary transition-colors sm:text-inherit"},a.label),n.createElement("div",{className:"absolute bottom-0 left-0 right-0 h-1 bg-primary-100 scale-x-0 group-data-[state=active]:scale-x-100 transition-transform"})))),e.map(a=>n.createElement(o.Content,{key:a.value,value:a.value},a.content))));L.displayName="Tabs";if (exports.default) module.exports = exports.default;export{L as Tabs};//# sourceMappingURL=Tabs.js.map
|
|
2
2
|
//# sourceMappingURL=Tabs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Text.tsx","../../src/components/Tabs.tsx"],"names":["HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","size","fontWeight","processVariants","variants","breakpoint","typographyClass","Text","React","color","as","className","children","weight","props","ref","typographyClasses","colorClasses","suggestedElement","baseVariant","Tabs","items","defaultValue","onChange","item"],"mappings":"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","file":"Tabs.js","sourcesContent":["import React from \"react\";\nimport {\n Colors,\n TextColorVariant,\n PrimaryShades,\n SecondaryShades,\n TertiaryShades,\n Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n ? TextColorVariant\n : T extends \"primary\"\n ? keyof PrimaryShades\n : T extends \"secondary\"\n ? keyof SecondaryShades\n : T extends \"tertiary\"\n ? keyof TertiaryShades\n : never;\n\ntype ColorKey = {\n [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: ColorKey | \"inherit\";\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return Array.isArray(variants) ? `lg:text-${variant}` : `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"text-primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import React from \"react\";\nimport * as RadixTabs from \"@radix-ui/react-tabs\";\nimport { Text } from \"./Text\";\n\nexport type TabItem = {\n value: string;\n label: string;\n content: React.ReactNode;\n};\n\nexport type TabsProps = {\n items: TabItem[];\n defaultValue?: string;\n className?: string;\n onChange?: (value: string) => void;\n};\n\nexport const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(\n ({ items, defaultValue, className = \"\", onChange }, ref) => {\n return (\n <RadixTabs.Root\n defaultValue={defaultValue || items[0]?.value}\n onValueChange={onChange}\n className={className}\n >\n <RadixTabs.List\n ref={ref}\n className=\"flex gap-8 border-b border-stroke mb-8\"\n >\n {items.map((item) => (\n <RadixTabs.Trigger\n key={item.value}\n value={item.value}\n className=\"group pb-4 relative flex-1\"\n >\n <Text\n variant=\"body-lg-semibold\"\n color=\"text-secondary\"\n className=\"group-data-[state=active]:text-text-primary transition-colors\"\n >\n {item.label}\n </Text>\n <div className=\"absolute bottom-0 left-0 right-0 h-1 bg-primary-100 scale-x-0 group-data-[state=active]:scale-x-100 transition-transform\" />\n </RadixTabs.Trigger>\n ))}\n </RadixTabs.List>\n\n {items.map((item) => (\n <RadixTabs.Content key={item.value} value={item.value}>\n {item.content}\n </RadixTabs.Content>\n ))}\n </RadixTabs.Root>\n );\n }\n);\n\nTabs.displayName = \"Tabs\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/Text.tsx","../../src/components/Tabs.tsx"],"names":["HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","size","fontWeight","processVariants","variants","breakpoint","typographyClass","Text","React","color","as","className","children","weight","props","ref","typographyClasses","colorClasses","suggestedElement","baseVariant","Tabs","items","defaultValue","onChange","item"],"mappings":"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","file":"Tabs.js","sourcesContent":["import React from \"react\";\nimport {\n Colors,\n TextColorVariant,\n PrimaryShades,\n SecondaryShades,\n TertiaryShades,\n Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n ? TextColorVariant\n : T extends \"primary\"\n ? keyof PrimaryShades\n : T extends \"secondary\"\n ? keyof SecondaryShades\n : T extends \"tertiary\"\n ? keyof TertiaryShades\n : never;\n\ntype ColorKey = {\n [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: ColorKey | \"inherit\";\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"text-primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import React from \"react\";\nimport * as RadixTabs from \"@radix-ui/react-tabs\";\nimport { Text } from \"./Text\";\n\nexport type TabItem = {\n value: string;\n label: string;\n content: React.ReactNode;\n};\n\nexport type TabsProps = {\n items: TabItem[];\n defaultValue?: string;\n className?: string;\n onChange?: (value: string) => void;\n};\n\nexport const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(\n ({ items, defaultValue, className = \"\", onChange }, ref) => {\n return (\n <RadixTabs.Root\n defaultValue={defaultValue || items[0]?.value}\n onValueChange={onChange}\n className={className}\n >\n <RadixTabs.List\n ref={ref}\n className=\"flex gap-8 border-b border-stroke mb-8\"\n >\n {items.map((item) => (\n <RadixTabs.Trigger\n key={item.value}\n value={item.value}\n className=\"group pb-4 relative flex-1\"\n >\n <Text\n variant={[\"sm:body-lg-semibold\", \"body-default-semibold\"]}\n color=\"text-secondary\"\n className=\"group-data-[state=active]:text-text-primary transition-colors sm:text-inherit\"\n >\n {item.label}\n </Text>\n <div className=\"absolute bottom-0 left-0 right-0 h-1 bg-primary-100 scale-x-0 group-data-[state=active]:scale-x-100 transition-transform\" />\n </RadixTabs.Trigger>\n ))}\n </RadixTabs.List>\n\n {items.map((item) => (\n <RadixTabs.Content key={item.value} value={item.value}>\n {item.content}\n </RadixTabs.Content>\n ))}\n </RadixTabs.Root>\n );\n }\n);\n\nTabs.displayName = \"Tabs\";\n"]}
|
package/dist/components/Tag.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var
|
|
1
|
+
'use strict';var s=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var s__default=/*#__PURE__*/_interopDefault(s);var b={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},H=e=>{let[t,r]=e.split("-");return t==="heading"?b[r]||"p":t==="label"?"label":"p"},f={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},M=e=>e?(Array.isArray(e)?e:[e]).map(r=>{if(r.includes(":")){let[o,a]=r.split(":");return `${o}:text-${a}`}return `text-${r}`}).join(" "):"text-body-default",n=s__default.default.forwardRef(({variant:e="body-default",color:t="text-primary",as:r,className:o,children:a,weight:i,...m},c)=>{let g=M(e),h=t&&t==="inherit"?"inherit":t?`text-${t}`:"",u=s__default.default.useMemo(()=>{let d=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return H(d)},[e]);return s__default.default.createElement(r||u,{ref:c,className:`font-sans antialiased ${g} ${h} ${i?`!${f[i]}`:""} ${o??""}`,...m},a)});n.displayName="Text";var p="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var l=({children:e,type:t="button",className:r,disabled:o,...a})=>s__default.default.createElement("button",{type:t,disabled:o,className:`appearance-none hover:opacity-80 transition-all active:scale-95 ${p} ${r} ${o?"opacity-50 cursor-not-allowed":""}`,...a},e);function y(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var q=({children:e,color:t="primary",className:r,...o})=>s__default.default.createElement(l,{className:y("hover:bg-primary-100 rounded bg-secondary-400 px-2 py-1 sm:px-3 sm:py-1.5 h-min hover:text-white",t==="primary"?"text-primary-100":"text-primary",r),...o},typeof e=="string"?s__default.default.createElement(n,{color:"inherit",variant:["md:body-default-medium","body-xxs-medium"],className:"truncate"},e):e);if (exports.default) module.exports = exports.default;exports.Tag=q;//# sourceMappingURL=Tag.cjs.map
|
|
2
2
|
//# sourceMappingURL=Tag.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Text.tsx","../../src/components/Tag.tsx"],"names":["HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","size","fontWeight","processVariants","variants","breakpoint","typographyClass","Text","React","color","as","className","children","weight","props","ref","typographyClasses","colorClasses","suggestedElement","baseVariant","Tag","padded"],"mappings":"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","file":"Tag.cjs","sourcesContent":["import React from \"react\";\nimport {\n Colors,\n TextColorVariant,\n PrimaryShades,\n SecondaryShades,\n TertiaryShades,\n Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n ? TextColorVariant\n : T extends \"primary\"\n ? keyof PrimaryShades\n : T extends \"secondary\"\n ? keyof SecondaryShades\n : T extends \"tertiary\"\n ? keyof TertiaryShades\n : never;\n\ntype ColorKey = {\n [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: ColorKey | \"inherit\";\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return Array.isArray(variants) ? `lg:text-${variant}` : `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"text-primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import React, { HTMLAttributes } from \"react\";\nimport { Text } from \"./Text\";\n\nexport type TagProps = {\n children: React.ReactNode;\n padded?: boolean;\n color?: \"primary\" | \"text\";\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const Tag = ({\n children,\n padded,\n color = \"primary\",\n ...props\n}: TagProps) => (\n <div\n className={`rounded bg-secondary-400 ${padded ? \"px-3\" : \"px-2\"} py-1.5 h-min`}\n {...props}\n >\n {typeof children === \"string\" ? (\n <Text\n color={color === \"primary\" ? \"primary-100\" : \"text-primary\"}\n variant={[\"body-default-medium\", \"md:body-xs-medium\"]}\n className=\"truncate\"\n >\n {children}\n </Text>\n ) : (\n children\n )}\n </div>\n);\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/Text.tsx","../../src/components/Pressable.tsx","../../src/utils/tailwind.ts","../../src/utils/index.ts","../../src/components/Tag.tsx"],"names":["HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","size","fontWeight","processVariants","variants","breakpoint","typographyClass","Text","React","color","as","className","children","weight","props","ref","typographyClasses","colorClasses","suggestedElement","baseVariant","focusRingStyles","Pressable","type","disabled","cn","inputs","twMerge","clsx","Tag","pressableProps"],"mappings":"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","file":"Tag.cjs","sourcesContent":["import React from \"react\";\nimport {\n Colors,\n TextColorVariant,\n PrimaryShades,\n SecondaryShades,\n TertiaryShades,\n Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n ? TextColorVariant\n : T extends \"primary\"\n ? keyof PrimaryShades\n : T extends \"secondary\"\n ? keyof SecondaryShades\n : T extends \"tertiary\"\n ? keyof TertiaryShades\n : never;\n\ntype ColorKey = {\n [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: ColorKey | \"inherit\";\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"text-primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import React, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable: React.FC<PressableProps> = ({\n children,\n type = \"button\",\n className,\n disabled,\n ...props\n}) => (\n <button\n // eslint-disable-next-line react/butt on-has-type\n type={type}\n disabled={disabled}\n className={`appearance-none hover:opacity-80 transition-all active:scale-95 ${focusRingStyles} ${className} ${disabled ? \"opacity-50 cursor-not-allowed\" : \"\"}`}\n {...props}\n >\n {children}\n </button>\n);\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { HTMLAttributes } from \"react\";\nimport { Text } from \"./Text\";\nimport { Pressable, PressableProps } from \"./Pressable\";\nimport { cn } from \"../utils\";\n\nexport type TagProps = {\n children: React.ReactNode;\n padded?: boolean;\n color?: \"primary\" | \"text\";\n} & HTMLAttributes<HTMLDivElement> &\n PressableProps;\n\nexport const Tag = ({\n children,\n color = \"primary\",\n className,\n ...pressableProps\n}: TagProps) => (\n <Pressable\n className={cn(\n \"hover:bg-primary-100 rounded bg-secondary-400 px-2 py-1 sm:px-3 sm:py-1.5 h-min hover:text-white\",\n color === \"primary\" ? \"text-primary-100\" : \"text-primary\",\n className\n )}\n {...pressableProps}\n >\n {typeof children === \"string\" ? (\n <Text\n color=\"inherit\"\n variant={[\"md:body-default-medium\", \"body-xxs-medium\"]}\n className=\"truncate\"\n >\n {children}\n </Text>\n ) : (\n children\n )}\n </Pressable>\n);\n"]}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import React__default, { HTMLAttributes } from 'react';
|
|
2
|
+
import { PressableProps } from './Pressable.cjs';
|
|
2
3
|
|
|
3
4
|
type TagProps = {
|
|
4
5
|
children: React__default.ReactNode;
|
|
5
6
|
padded?: boolean;
|
|
6
7
|
color?: "primary" | "text";
|
|
7
|
-
} & HTMLAttributes<HTMLDivElement
|
|
8
|
-
declare const Tag: ({ children,
|
|
8
|
+
} & HTMLAttributes<HTMLDivElement> & PressableProps;
|
|
9
|
+
declare const Tag: ({ children, color, className, ...pressableProps }: TagProps) => React__default.JSX.Element;
|
|
9
10
|
|
|
10
11
|
export { Tag, type TagProps };
|