@deckai/deck-ui 0.0.10 → 0.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +127 -1
- package/dist/components/AboutCard.cjs +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 +3 -1
- package/dist/components/Avatar.d.ts +3 -1
- package/dist/components/Avatar.js +1 -1
- package/dist/components/Avatar.js.map +1 -1
- package/dist/components/Badge.cjs +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.d.cts +7 -1
- package/dist/components/Combobox.d.ts +7 -1
- package/dist/components/Combobox.js +1 -1
- package/dist/components/Combobox.js.map +1 -1
- package/dist/components/ContactItem.cjs +1 -1
- package/dist/components/ContactItem.cjs.map +1 -1
- package/dist/components/ContactItem.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 +6 -2
- package/dist/components/Input.d.ts +6 -2
- package/dist/components/Input.js +1 -1
- package/dist/components/Input.js.map +1 -1
- package/dist/components/Link.cjs +1 -1
- package/dist/components/Link.cjs.map +1 -1
- package/dist/components/Link.d.cts +1 -1
- package/dist/components/Link.d.ts +1 -1
- package/dist/components/Link.js +1 -1
- package/dist/components/Link.js.map +1 -1
- package/dist/components/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/MultiSelectCombobox.cjs +2 -0
- package/dist/components/MultiSelectCombobox.cjs.map +1 -0
- package/dist/components/MultiSelectCombobox.d.cts +21 -0
- package/dist/components/MultiSelectCombobox.d.ts +21 -0
- package/dist/components/MultiSelectCombobox.js +2 -0
- package/dist/components/MultiSelectCombobox.js.map +1 -0
- package/dist/components/Navbar.cjs +2 -2
- package/dist/components/Navbar.cjs.map +1 -1
- package/dist/components/Navbar.d.cts +1 -1
- package/dist/components/Navbar.d.ts +1 -1
- package/dist/components/Navbar.js +2 -2
- package/dist/components/Navbar.js.map +1 -1
- package/dist/components/NavbarItem.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/Sidebar.cjs +2 -0
- package/dist/components/Sidebar.cjs.map +1 -0
- package/dist/components/Sidebar.d.cts +37 -0
- package/dist/components/Sidebar.d.ts +37 -0
- package/dist/components/Sidebar.js +2 -0
- package/dist/components/Sidebar.js.map +1 -0
- package/dist/components/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 +4 -2
- package/dist/components/Tag.d.ts +4 -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/TextArea.cjs +2 -0
- package/dist/components/TextArea.cjs.map +1 -0
- package/dist/components/TextArea.d.cts +19 -0
- package/dist/components/TextArea.d.ts +19 -0
- package/dist/components/TextArea.js +2 -0
- package/dist/components/TextArea.js.map +1 -0
- package/dist/components/WorkCard.cjs +1 -1
- package/dist/components/WorkCard.cjs.map +1 -1
- package/dist/components/WorkCard.js +1 -1
- package/dist/components/WorkCard.js.map +1 -1
- package/dist/index.cjs +51 -7
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +99 -23
- package/dist/index.d.ts +99 -23
- 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-CIZ10fKA.d.cts} +4 -3
- package/dist/{tailwind-DJFscIlV.d.ts → tailwind-CIZ10fKA.d.ts} +4 -3
- package/package.json +4 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/components/Avatar.tsx"],"names":["focusRingStyles","Pressable","children","type","className","props","React","
|
|
1
|
+
{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/components/Avatar.tsx"],"names":["focusRingStyles","Pressable","children","type","className","disabled","props","React","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Avatar","src","onClick","sizeStyles","content"],"mappings":"oJAmEO,IAAMA,CAAAA,CACX,qGC/DK,CAAA,IAAMC,CAAsC,CAAA,CAAC,CAClD,QAAAC,CAAAA,CAAAA,CACA,IAAAC,CAAAA,CAAAA,CAAO,QACP,CAAA,SAAA,CAAAC,EACA,QAAAC,CAAAA,CAAAA,CACA,GAAGC,CACL,CACEC,GAAAA,kBAAAA,CAAA,cAAC,QAEC,CAAA,CAAA,IAAA,CAAMJ,CACN,CAAA,QAAA,CAAUE,CACV,CAAA,SAAA,CAAW,mEAAmEL,CAAe,CAAA,CAAA,EAAII,CAAS,CAAA,CAAA,EAAIC,CAAW,CAAA,+BAAA,CAAkC,EAAE,CAC5J,CAAA,CAAA,GAAGC,CAEHJ,CAAAA,CAAAA,CACH,CCdF,CAAA,IAAMM,EAA6C,CACjD,EAAA,CAAI,OACJ,CAAA,EAAA,CAAI,OACJ,CAAA,EAAA,CAAI,SACJ,EAAI,CAAA,QAAA,CACJ,MAAO,QACT,CAAA,CAOMC,EACJC,CACwB,EAAA,CACxB,GAAI,CAACA,CAAO,CAAA,OAAO,CAAE,KAAO,CAAA,MAAA,CAAQ,MAAQ,CAAA,MAAO,CAEnD,CAAA,IAAMC,EAAY,KAAM,CAAA,OAAA,CAAQD,CAAK,CAAA,CAAIA,CAAQ,CAAA,CAACA,CAAK,CACjDE,CAAAA,CAAAA,CAAuC,EAAC,CAC1CC,CAGJ,CAAA,OAAAF,EAAU,OAASG,CAAAA,CAAAA,EAAS,CAC1B,GAAI,OAAOA,CAAAA,EAAS,SAClBD,CAAW,CAAA,CAAA,EAAGC,CAAI,CAAA,EAAA,CAAA,CAAA,KACb,CACL,GAAM,CAACC,CAAYC,CAAAA,CAAQ,CAAIF,CAAAA,CAAAA,CAAK,KAAM,CAAA,GAAG,EACvCG,CAAQ,CAAA,QAAA,CAASD,EAAU,EAAE,CAAA,CACnCJ,EAAa,CAAqBJ,kBAAAA,EAAAA,CAAAA,CAAeO,CAAU,CAAC,CAAG,CAAA,CAAA,CAAA,CAC7D,GAAGE,CAAK,CAAA,EAAA,EACZ,CACF,CAAC,CAGM,CAAA,CACL,MAAOJ,CAAY,EAAA,MAAA,CACnB,MAAQA,CAAAA,CAAAA,EAAY,MACpB,CAAA,GAAG,OAAO,OAAQD,CAAAA,CAAY,CAAE,CAAA,MAAA,CAC9B,CAACM,CAAAA,CAAK,CAACC,CAAOL,CAAAA,CAAI,CAAO,IAAA,CACvB,GAAGI,CAAAA,CACH,CAACC,CAAK,EAAG,CACP,KAAA,CAAOL,CACP,CAAA,MAAA,CAAQA,CACV,CACF,CAAA,CAAA,CACA,EACF,CACF,CACF,EAEaM,CAAS,CAAA,CAAC,CAAE,GAAA,CAAAC,CAAK,CAAA,IAAA,CAAAP,EAAO,EAAI,CAAA,OAAA,CAAAQ,CAAS,CAAA,GAAGhB,CAAM,CAAA,GAAmB,CAC5E,IAAMiB,CAAAA,CAAad,CAAaK,CAAAA,CAAI,CAE9BU,CAAAA,CAAAA,CAAUH,EACdd,kBAAA,CAAA,aAAA,CAAC,KACC,CAAA,CAAA,GAAA,CAAKc,CACL,CAAA,GAAA,CAAI,SACJ,SAAU,CAAA,cAAA,CACV,KAAOE,CAAAA,CAAAA,CACN,GAAGjB,CAAAA,CACN,EAEAC,kBAAA,CAAA,aAAA,CAAC,KAAI,CAAA,CAAA,KAAA,CAAOgB,CAAY,CAAA,SAAA,CAAU,2BAA2B,CAG/D,CAAA,OAAOD,CAAUf,CAAAA,kBAAAA,CAAA,aAACN,CAAAA,CAAAA,CAAA,CAAU,OAASqB,CAAAA,CAAAA,CAAAA,CAAUE,CAAQ,CAAA,CAAeA,CACxE","file":"Avatar.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 from \"react\";\nimport { Pressable } from \"./Pressable\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n \"2xl\": \"1536px\"\n};\n\nexport type AvatarProps = {\n src?: string;\n size?: ResponsiveSize | ResponsiveSize[];\n} & Pick<React.ComponentProps<typeof Pressable>, \"onClick\">;\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"48px\", height: \"48px\" };\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 (minWidth: ${BREAKPOINT_MAP[breakpoint]})`] =\n `${value}px`;\n }\n });\n\n // Create the style object with the correct structure\n return {\n width: baseSize || \"48px\",\n height: baseSize || \"48px\",\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 Avatar = ({ src, size = 48, onClick, ...props }: AvatarProps) => {\n const sizeStyles = processSizes(size);\n\n const content = src ? (\n <img\n src={src}\n alt=\"avatar\"\n className=\"rounded-full\"\n style={sizeStyles}\n {...props}\n />\n ) : (\n <div style={sizeStyles} className=\"rounded-full bg-gray-200\" />\n );\n\n return onClick ? <Pressable onClick={onClick}>{content}</Pressable> : content;\n};\n"]}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
2
|
import { Pressable } from './Pressable.cjs';
|
|
3
3
|
|
|
4
|
+
type Breakpoint = "sm" | "md" | "lg" | "xl" | "2xl";
|
|
5
|
+
type ResponsiveSize = number | `${Breakpoint}:${number}`;
|
|
4
6
|
type AvatarProps = {
|
|
5
7
|
src?: string;
|
|
6
|
-
size?:
|
|
8
|
+
size?: ResponsiveSize | ResponsiveSize[];
|
|
7
9
|
} & Pick<React__default.ComponentProps<typeof Pressable>, "onClick">;
|
|
8
10
|
declare const Avatar: ({ src, size, onClick, ...props }: AvatarProps) => React__default.JSX.Element;
|
|
9
11
|
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
2
|
import { Pressable } from './Pressable.js';
|
|
3
3
|
|
|
4
|
+
type Breakpoint = "sm" | "md" | "lg" | "xl" | "2xl";
|
|
5
|
+
type ResponsiveSize = number | `${Breakpoint}:${number}`;
|
|
4
6
|
type AvatarProps = {
|
|
5
7
|
src?: string;
|
|
6
|
-
size?:
|
|
8
|
+
size?: ResponsiveSize | ResponsiveSize[];
|
|
7
9
|
} & Pick<React__default.ComponentProps<typeof Pressable>, "onClick">;
|
|
8
10
|
declare const Avatar: ({ src, size, onClick, ...props }: AvatarProps) => React__default.JSX.Element;
|
|
9
11
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import a from'react';var p="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var c=({children:t,type:n="button",className:r,disabled:s,...e})=>a.createElement("button",{type:n,disabled:s,className:`appearance-none hover:opacity-80 transition-all active:scale-95 ${p} ${r} ${s?"opacity-50 cursor-not-allowed":""}`,...e},t);var f={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},b=t=>{if(!t)return {width:"48px",height:"48px"};let n=Array.isArray(t)?t:[t],r={},s;return n.forEach(e=>{if(typeof e=="number")s=`${e}px`;else {let[o,i]=e.split(":"),l=parseInt(i,10);r[`@media (minWidth: ${f[o]})`]=`${l}px`;}}),{width:s||"48px",height:s||"48px",...Object.entries(r).reduce((e,[o,i])=>({...e,[o]:{width:i,height:i}}),{})}},v=({src:t,size:n=48,onClick:r,...s})=>{let e=b(n),o=t?a.createElement("img",{src:t,alt:"avatar",className:"rounded-full",style:e,...s}):a.createElement("div",{style:e,className:"rounded-full bg-gray-200"});return r?a.createElement(c,{onClick:r},o):o};if (exports.default) module.exports = exports.default;export{v as Avatar};//# sourceMappingURL=Avatar.js.map
|
|
2
2
|
//# sourceMappingURL=Avatar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/components/Avatar.tsx"],"names":["focusRingStyles","Pressable","children","type","className","props","React","
|
|
1
|
+
{"version":3,"sources":["../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/components/Avatar.tsx"],"names":["focusRingStyles","Pressable","children","type","className","disabled","props","React","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Avatar","src","onClick","sizeStyles","content"],"mappings":"qBAmEO,IAAMA,CAAAA,CACX,qGC/DK,CAAA,IAAMC,CAAsC,CAAA,CAAC,CAClD,QAAAC,CAAAA,CAAAA,CACA,IAAAC,CAAAA,CAAAA,CAAO,QACP,CAAA,SAAA,CAAAC,EACA,QAAAC,CAAAA,CAAAA,CACA,GAAGC,CACL,CACEC,GAAAA,CAAAA,CAAA,cAAC,QAEC,CAAA,CAAA,IAAA,CAAMJ,CACN,CAAA,QAAA,CAAUE,CACV,CAAA,SAAA,CAAW,mEAAmEL,CAAe,CAAA,CAAA,EAAII,CAAS,CAAA,CAAA,EAAIC,CAAW,CAAA,+BAAA,CAAkC,EAAE,CAC5J,CAAA,CAAA,GAAGC,CAEHJ,CAAAA,CAAAA,CACH,CCdF,CAAA,IAAMM,EAA6C,CACjD,EAAA,CAAI,OACJ,CAAA,EAAA,CAAI,OACJ,CAAA,EAAA,CAAI,SACJ,EAAI,CAAA,QAAA,CACJ,MAAO,QACT,CAAA,CAOMC,EACJC,CACwB,EAAA,CACxB,GAAI,CAACA,CAAO,CAAA,OAAO,CAAE,KAAO,CAAA,MAAA,CAAQ,MAAQ,CAAA,MAAO,CAEnD,CAAA,IAAMC,EAAY,KAAM,CAAA,OAAA,CAAQD,CAAK,CAAA,CAAIA,CAAQ,CAAA,CAACA,CAAK,CACjDE,CAAAA,CAAAA,CAAuC,EAAC,CAC1CC,CAGJ,CAAA,OAAAF,EAAU,OAASG,CAAAA,CAAAA,EAAS,CAC1B,GAAI,OAAOA,CAAAA,EAAS,SAClBD,CAAW,CAAA,CAAA,EAAGC,CAAI,CAAA,EAAA,CAAA,CAAA,KACb,CACL,GAAM,CAACC,CAAYC,CAAAA,CAAQ,CAAIF,CAAAA,CAAAA,CAAK,KAAM,CAAA,GAAG,EACvCG,CAAQ,CAAA,QAAA,CAASD,EAAU,EAAE,CAAA,CACnCJ,EAAa,CAAqBJ,kBAAAA,EAAAA,CAAAA,CAAeO,CAAU,CAAC,CAAG,CAAA,CAAA,CAAA,CAC7D,GAAGE,CAAK,CAAA,EAAA,EACZ,CACF,CAAC,CAGM,CAAA,CACL,MAAOJ,CAAY,EAAA,MAAA,CACnB,MAAQA,CAAAA,CAAAA,EAAY,MACpB,CAAA,GAAG,OAAO,OAAQD,CAAAA,CAAY,CAAE,CAAA,MAAA,CAC9B,CAACM,CAAAA,CAAK,CAACC,CAAOL,CAAAA,CAAI,CAAO,IAAA,CACvB,GAAGI,CAAAA,CACH,CAACC,CAAK,EAAG,CACP,KAAA,CAAOL,CACP,CAAA,MAAA,CAAQA,CACV,CACF,CAAA,CAAA,CACA,EACF,CACF,CACF,EAEaM,CAAS,CAAA,CAAC,CAAE,GAAA,CAAAC,CAAK,CAAA,IAAA,CAAAP,EAAO,EAAI,CAAA,OAAA,CAAAQ,CAAS,CAAA,GAAGhB,CAAM,CAAA,GAAmB,CAC5E,IAAMiB,CAAAA,CAAad,CAAaK,CAAAA,CAAI,CAE9BU,CAAAA,CAAAA,CAAUH,EACdd,CAAA,CAAA,aAAA,CAAC,KACC,CAAA,CAAA,GAAA,CAAKc,CACL,CAAA,GAAA,CAAI,SACJ,SAAU,CAAA,cAAA,CACV,KAAOE,CAAAA,CAAAA,CACN,GAAGjB,CAAAA,CACN,EAEAC,CAAA,CAAA,aAAA,CAAC,KAAI,CAAA,CAAA,KAAA,CAAOgB,CAAY,CAAA,SAAA,CAAU,2BAA2B,CAG/D,CAAA,OAAOD,CAAUf,CAAAA,CAAAA,CAAA,aAACN,CAAAA,CAAAA,CAAA,CAAU,OAASqB,CAAAA,CAAAA,CAAAA,CAAUE,CAAQ,CAAA,CAAeA,CACxE","file":"Avatar.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 from \"react\";\nimport { Pressable } from \"./Pressable\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n \"2xl\": \"1536px\"\n};\n\nexport type AvatarProps = {\n src?: string;\n size?: ResponsiveSize | ResponsiveSize[];\n} & Pick<React.ComponentProps<typeof Pressable>, \"onClick\">;\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"48px\", height: \"48px\" };\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 (minWidth: ${BREAKPOINT_MAP[breakpoint]})`] =\n `${value}px`;\n }\n });\n\n // Create the style object with the correct structure\n return {\n width: baseSize || \"48px\",\n height: baseSize || \"48px\",\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 Avatar = ({ src, size = 48, onClick, ...props }: AvatarProps) => {\n const sizeStyles = processSizes(size);\n\n const content = src ? (\n <img\n src={src}\n alt=\"avatar\"\n className=\"rounded-full\"\n style={sizeStyles}\n {...props}\n />\n ) : (\n <div style={sizeStyles} className=\"rounded-full bg-gray-200\" />\n );\n\n return onClick ? <Pressable onClick={onClick}>{content}</Pressable> : content;\n};\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var
|
|
1
|
+
'use strict';var i=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),icons=require('@deckai/icons');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var i__namespace=/*#__PURE__*/_interopNamespace(i);function l(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var h={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB"},b={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},E=e=>{if(!e)return {width:"24px",height:"24px"};let r=Array.isArray(e)?e:[e],t={},n;return r.forEach(o=>{if(typeof o=="number")n=`${o}px`;else {let[a,s]=o.split(":"),p=parseInt(s,10);t[`@media (min-width: ${b[a]})`]=`${p}px`;}}),{width:n||"24px",height:n||"24px",...Object.entries(t).reduce((o,[a,s])=>({...o,[a]:{width:s,height:s}}),{})}},T=i__namespace.default.forwardRef(({name:e,size:r=24,color:t="primary",title:n,className:o,style:a={},...s},p)=>{let m=icons.IconMap[e],y=E(r);return i__namespace.default.createElement("div",{className:l("flex justify-center items-center",o),style:{...y,"--icon-stroke":h[t],...a}},i__namespace.default.createElement(m,{ref:p,"aria-hidden":!n,"aria-label":n,stroke:e.includes("filled")?void 0:h[t],...s}))});T.displayName="Icon";var R={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},C=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"},S=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[n,o]=t.split(":");return `${n}:text-${o}`}return `text-${t}`}).join(" "):"text-body-default",g=i__namespace.default.forwardRef(({variant:e="body-default",color:r="text-primary",as:t,className:n,children:o,weight:a,...s},p)=>{let m=S(e),y=r&&r==="inherit"?"inherit":r?`text-${r}`:"",f=i__namespace.default.useMemo(()=>{let H=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return C(H)},[e]);return i__namespace.default.createElement(t||f,{ref:p,className:`font-sans antialiased ${m} ${y} ${a?`!${A[a]}`:""} ${n??""}`,...s},o)});g.displayName="Text";var u={pink:"bg-tertiary-5",orange:"bg-tertiary-15",green:"bg-tertiary-25",purple:"bg-secondary-300"},k=e=>{let r=Object.keys(u),t=e.split("").reduce((a,s)=>s.charCodeAt(0)+((a<<5)-a),0),n=Math.abs(t)%r.length,o=r[n];return console.log({input:e,hash:t,variantKeys:r,index:n,selectedVariant:o}),o},V=i__namespace.forwardRef(({className:e,variant:r,iconName:t,children:n,...o},a)=>{let s=r||(typeof n=="string"?k(n):"pink");return i__namespace.createElement("span",{ref:a,className:l("inline-flex items-center gap-2","rounded-lg px-2 py-1","text-sm font-medium",u[s],e),...o},t&&i__namespace.createElement(T,{size:16,name:t}),i__namespace.createElement(g,{variant:"body-xxs-medium"},n))});V.displayName="Badge";if (exports.default) module.exports = exports.default;exports.Badge=V;//# sourceMappingURL=Badge.cjs.map
|
|
2
2
|
//# sourceMappingURL=Badge.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../src/components/Badge.tsx"],"names":["cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","baseSize","style","mediaQueries","size","acc","breakpoint","value","Icon","React","name","color","title","className","props","ref","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","children","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","Badge","p","iconName"],"mappings":"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","file":"Badge.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\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 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 * as React from \"react\";\nimport { IconName } from \"@deckai/icons\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\n\nexport type BadgeProps = {\n variant?: \"pink\" | \"orange\" | \"green\";\n iconName?: IconName;\n} & React.HTMLAttributes<HTMLSpanElement>;\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n ({ className, variant = \"pink\", iconName, children, ...props }, ref) => {\n const variants = {\n pink: \"bg-tertiary-5\",\n orange: \"bg-tertiary-15\",\n green: \"bg-tertiary-25\"\n };\n\n return (\n <span\n ref={ref}\n className={cn(\n \"inline-flex items-center gap-2\",\n \"rounded-lg px-2 py-1\",\n \"text-sm font-medium\",\n variants[variant],\n className\n )}\n {...props}\n >\n {iconName && <Icon size={16} name={iconName} />}\n <Text variant=\"body-xxs-medium\">{children}</Text>\n </span>\n );\n }\n);\n\nBadge.displayName = \"Badge\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../src/components/Badge.tsx"],"names":["cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","children","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","stringToVariant","str","variantKeys","hash","char","index","selectedVariant","Badge","i","iconName","finalVariant"],"mappings":"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","file":"Badge.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: ResponsiveSize | ResponsiveSize[];\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\"\n};\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n \"2xl\": \"1536px\"\n};\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n const mediaQueries: Record<string, string> = {};\n let baseSize: string | undefined;\n\n // Process each size\n sizeArray.forEach((size) => {\n if (typeof size === \"number\") {\n baseSize = `${size}px`;\n } else {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n mediaQueries[`@media (min-width: ${BREAKPOINT_MAP[breakpoint]})`] =\n `${value}px`;\n }\n });\n\n // Create the style object with the correct structure\n return {\n width: baseSize || \"24px\",\n height: baseSize || \"24px\",\n ...Object.entries(mediaQueries).reduce(\n (acc, [query, size]) => ({\n ...acc,\n [query]: {\n width: size,\n height: size\n }\n }),\n {}\n )\n };\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const sizeStyles = processSizes(size);\n\n return (\n <div\n className={cn(\"flex justify-center items-center\", className)}\n style={{\n ...sizeStyles,\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import React from \"react\";\nimport {\n Colors,\n TextColorVariant,\n PrimaryShades,\n SecondaryShades,\n TertiaryShades,\n Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n ? TextColorVariant\n : T extends \"primary\"\n ? keyof PrimaryShades\n : T extends \"secondary\"\n ? keyof SecondaryShades\n : T extends \"tertiary\"\n ? keyof TertiaryShades\n : never;\n\ntype ColorKey = {\n [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: ColorKey | \"inherit\";\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"text-primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import * as React from \"react\";\nimport { IconName } from \"@deckai/icons\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\n\nexport type BadgeProps = {\n variant?: \"pink\" | \"orange\" | \"green\" | \"purple\";\n iconName?: IconName;\n} & React.HTMLAttributes<HTMLSpanElement>;\n\nconst variants = {\n pink: \"bg-tertiary-5\",\n orange: \"bg-tertiary-15\",\n green: \"bg-tertiary-25\",\n purple: \"bg-secondary-300\"\n};\n\nconst stringToVariant = (str: string): keyof typeof variants => {\n const variantKeys = Object.keys(variants) as Array<keyof typeof variants>;\n // Let's log some values to understand what's happening\n const hash = str\n .split(\"\")\n .reduce((acc, char) => char.charCodeAt(0) + ((acc << 5) - acc), 0);\n\n const index = Math.abs(hash) % variantKeys.length;\n const selectedVariant = variantKeys[index];\n\n console.log({\n input: str,\n hash,\n variantKeys,\n index,\n selectedVariant\n });\n\n return selectedVariant;\n};\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n ({ className, variant, iconName, children, ...props }, ref) => {\n const finalVariant =\n variant ||\n (typeof children === \"string\" ? stringToVariant(children) : \"pink\");\n return (\n <span\n ref={ref}\n className={cn(\n \"inline-flex items-center gap-2\",\n \"rounded-lg px-2 py-1\",\n \"text-sm font-medium\",\n variants[finalVariant],\n className\n )}\n {...props}\n >\n {iconName && <Icon size={16} name={iconName} />}\n <Text variant=\"body-xxs-medium\">{children}</Text>\n </span>\n );\n }\n);\n\nBadge.displayName = \"Badge\";\n"]}
|
|
@@ -2,11 +2,11 @@ import * as React from 'react';
|
|
|
2
2
|
import { IconName } from '@deckai/icons';
|
|
3
3
|
|
|
4
4
|
type BadgeProps = {
|
|
5
|
-
variant?: "pink" | "orange" | "green";
|
|
5
|
+
variant?: "pink" | "orange" | "green" | "purple";
|
|
6
6
|
iconName?: IconName;
|
|
7
7
|
} & React.HTMLAttributes<HTMLSpanElement>;
|
|
8
8
|
declare const Badge: React.ForwardRefExoticComponent<{
|
|
9
|
-
variant?: "pink" | "orange" | "green";
|
|
9
|
+
variant?: "pink" | "orange" | "green" | "purple";
|
|
10
10
|
iconName?: IconName;
|
|
11
11
|
} & React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
|
|
12
12
|
|
|
@@ -2,11 +2,11 @@ import * as React from 'react';
|
|
|
2
2
|
import { IconName } from '@deckai/icons';
|
|
3
3
|
|
|
4
4
|
type BadgeProps = {
|
|
5
|
-
variant?: "pink" | "orange" | "green";
|
|
5
|
+
variant?: "pink" | "orange" | "green" | "purple";
|
|
6
6
|
iconName?: IconName;
|
|
7
7
|
} & React.HTMLAttributes<HTMLSpanElement>;
|
|
8
8
|
declare const Badge: React.ForwardRefExoticComponent<{
|
|
9
|
-
variant?: "pink" | "orange" | "green";
|
|
9
|
+
variant?: "pink" | "orange" | "green" | "purple";
|
|
10
10
|
iconName?: IconName;
|
|
11
11
|
} & React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
|
|
12
12
|
|
package/dist/components/Badge.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as i from'react';import i__default from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {IconMap}from'@deckai/icons';function l(...e){return twMerge(clsx(e))}var h={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB"},b={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},E=e=>{if(!e)return {width:"24px",height:"24px"};let r=Array.isArray(e)?e:[e],t={},n;return r.forEach(o=>{if(typeof o=="number")n=`${o}px`;else {let[a,s]=o.split(":"),p=parseInt(s,10);t[`@media (min-width: ${b[a]})`]=`${p}px`;}}),{width:n||"24px",height:n||"24px",...Object.entries(t).reduce((o,[a,s])=>({...o,[a]:{width:s,height:s}}),{})}},T=i__default.forwardRef(({name:e,size:r=24,color:t="primary",title:n,className:o,style:a={},...s},p)=>{let m=IconMap[e],y=E(r);return i__default.createElement("div",{className:l("flex justify-center items-center",o),style:{...y,"--icon-stroke":h[t],...a}},i__default.createElement(m,{ref:p,"aria-hidden":!n,"aria-label":n,stroke:e.includes("filled")?void 0:h[t],...s}))});T.displayName="Icon";var R={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},C=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"},S=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[n,o]=t.split(":");return `${n}:text-${o}`}return `text-${t}`}).join(" "):"text-body-default",g=i__default.forwardRef(({variant:e="body-default",color:r="text-primary",as:t,className:n,children:o,weight:a,...s},p)=>{let m=S(e),y=r&&r==="inherit"?"inherit":r?`text-${r}`:"",f=i__default.useMemo(()=>{let H=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return C(H)},[e]);return i__default.createElement(t||f,{ref:p,className:`font-sans antialiased ${m} ${y} ${a?`!${A[a]}`:""} ${n??""}`,...s},o)});g.displayName="Text";var u={pink:"bg-tertiary-5",orange:"bg-tertiary-15",green:"bg-tertiary-25",purple:"bg-secondary-300"},k=e=>{let r=Object.keys(u),t=e.split("").reduce((a,s)=>s.charCodeAt(0)+((a<<5)-a),0),n=Math.abs(t)%r.length,o=r[n];return console.log({input:e,hash:t,variantKeys:r,index:n,selectedVariant:o}),o},V=i.forwardRef(({className:e,variant:r,iconName:t,children:n,...o},a)=>{let s=r||(typeof n=="string"?k(n):"pink");return i.createElement("span",{ref:a,className:l("inline-flex items-center gap-2","rounded-lg px-2 py-1","text-sm font-medium",u[s],e),...o},t&&i.createElement(T,{size:16,name:t}),i.createElement(g,{variant:"body-xxs-medium"},n))});V.displayName="Badge";if (exports.default) module.exports = exports.default;export{V as Badge};//# sourceMappingURL=Badge.js.map
|
|
2
2
|
//# sourceMappingURL=Badge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../src/components/Badge.tsx"],"names":["cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","baseSize","style","mediaQueries","size","acc","breakpoint","value","Icon","React","name","color","title","className","props","ref","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","children","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","Badge","iconName"],"mappings":"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","file":"Badge.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\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 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 * as React from \"react\";\nimport { IconName } from \"@deckai/icons\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\n\nexport type BadgeProps = {\n variant?: \"pink\" | \"orange\" | \"green\";\n iconName?: IconName;\n} & React.HTMLAttributes<HTMLSpanElement>;\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n ({ className, variant = \"pink\", iconName, children, ...props }, ref) => {\n const variants = {\n pink: \"bg-tertiary-5\",\n orange: \"bg-tertiary-15\",\n green: \"bg-tertiary-25\"\n };\n\n return (\n <span\n ref={ref}\n className={cn(\n \"inline-flex items-center gap-2\",\n \"rounded-lg px-2 py-1\",\n \"text-sm font-medium\",\n variants[variant],\n className\n )}\n {...props}\n >\n {iconName && <Icon size={16} name={iconName} />}\n <Text variant=\"body-xxs-medium\">{children}</Text>\n </span>\n );\n }\n);\n\nBadge.displayName = \"Badge\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../src/components/Badge.tsx"],"names":["cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","children","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","stringToVariant","str","variantKeys","hash","char","index","selectedVariant","Badge","iconName","finalVariant"],"mappings":"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","file":"Badge.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: ResponsiveSize | ResponsiveSize[];\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\"\n};\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n \"2xl\": \"1536px\"\n};\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n const mediaQueries: Record<string, string> = {};\n let baseSize: string | undefined;\n\n // Process each size\n sizeArray.forEach((size) => {\n if (typeof size === \"number\") {\n baseSize = `${size}px`;\n } else {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n mediaQueries[`@media (min-width: ${BREAKPOINT_MAP[breakpoint]})`] =\n `${value}px`;\n }\n });\n\n // Create the style object with the correct structure\n return {\n width: baseSize || \"24px\",\n height: baseSize || \"24px\",\n ...Object.entries(mediaQueries).reduce(\n (acc, [query, size]) => ({\n ...acc,\n [query]: {\n width: size,\n height: size\n }\n }),\n {}\n )\n };\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const sizeStyles = processSizes(size);\n\n return (\n <div\n className={cn(\"flex justify-center items-center\", className)}\n style={{\n ...sizeStyles,\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import React from \"react\";\nimport {\n Colors,\n TextColorVariant,\n PrimaryShades,\n SecondaryShades,\n TertiaryShades,\n Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n ? TextColorVariant\n : T extends \"primary\"\n ? keyof PrimaryShades\n : T extends \"secondary\"\n ? keyof SecondaryShades\n : T extends \"tertiary\"\n ? keyof TertiaryShades\n : never;\n\ntype ColorKey = {\n [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: ColorKey | \"inherit\";\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"text-primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import * as React from \"react\";\nimport { IconName } from \"@deckai/icons\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\n\nexport type BadgeProps = {\n variant?: \"pink\" | \"orange\" | \"green\" | \"purple\";\n iconName?: IconName;\n} & React.HTMLAttributes<HTMLSpanElement>;\n\nconst variants = {\n pink: \"bg-tertiary-5\",\n orange: \"bg-tertiary-15\",\n green: \"bg-tertiary-25\",\n purple: \"bg-secondary-300\"\n};\n\nconst stringToVariant = (str: string): keyof typeof variants => {\n const variantKeys = Object.keys(variants) as Array<keyof typeof variants>;\n // Let's log some values to understand what's happening\n const hash = str\n .split(\"\")\n .reduce((acc, char) => char.charCodeAt(0) + ((acc << 5) - acc), 0);\n\n const index = Math.abs(hash) % variantKeys.length;\n const selectedVariant = variantKeys[index];\n\n console.log({\n input: str,\n hash,\n variantKeys,\n index,\n selectedVariant\n });\n\n return selectedVariant;\n};\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n ({ className, variant, iconName, children, ...props }, ref) => {\n const finalVariant =\n variant ||\n (typeof children === \"string\" ? stringToVariant(children) : \"pink\");\n return (\n <span\n ref={ref}\n className={cn(\n \"inline-flex items-center gap-2\",\n \"rounded-lg px-2 py-1\",\n \"text-sm font-medium\",\n variants[finalVariant],\n className\n )}\n {...props}\n >\n {iconName && <Icon size={16} name={iconName} />}\n <Text variant=\"body-xxs-medium\">{children}</Text>\n </span>\n );\n }\n);\n\nBadge.displayName = \"Badge\";\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var
|
|
1
|
+
'use strict';var i=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),icons=require('@deckai/icons');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var i__default=/*#__PURE__*/_interopDefault(i);function c(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var f={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB"},C={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},R=e=>{if(!e)return {width:"24px",height:"24px"};let r=Array.isArray(e)?e:[e],t={},s;return r.forEach(o=>{if(typeof o=="number")s=`${o}px`;else {let[a,n]=o.split(":"),p=parseInt(n,10);t[`@media (min-width: ${C[a]})`]=`${p}px`;}}),{width:s||"24px",height:s||"24px",...Object.entries(t).reduce((o,[a,n])=>({...o,[a]:{width:n,height:n}}),{})}},T=i__default.default.forwardRef(({name:e,size:r=24,color:t="primary",title:s,className:o,style:a={},...n},p)=>{let l=icons.IconMap[e],y=R(r);return i__default.default.createElement("div",{className:c("flex justify-center items-center",o),style:{...y,"--icon-stroke":f[t],...a}},i__default.default.createElement(l,{ref:p,"aria-hidden":!s,"aria-label":s,stroke:e.includes("filled")?void 0:f[t],...n}))});T.displayName="Icon";var $={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},k=e=>{let[r,t]=e.split("-");return r==="heading"?$[t]||"p":r==="label"?"label":"p"},A={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},S=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[s,o]=t.split(":");return `${s}:text-${o}`}return `text-${t}`}).join(" "):"text-body-default",m=i__default.default.forwardRef(({variant:e="body-default",color:r="text-primary",as:t,className:s,children:o,weight:a,...n},p)=>{let l=S(e),y=r&&r==="inherit"?"inherit":r?`text-${r}`:"",x=i__default.default.useMemo(()=>{let H=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return k(H)},[e]);return i__default.default.createElement(t||x,{ref:p,className:`font-sans antialiased ${l} ${y} ${a?`!${A[a]}`:""} ${s??""}`,...n},o)});m.displayName="Text";var h="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var b=({children:e,color:r="text-primary",variant:t="body-default-semibold",href:s,className:o,...a})=>i__default.default.createElement(m,{variant:t,color:r},i__default.default.createElement("a",{href:s,className:c("hover:opacity-80 transition-all active:scale-95 hover:underline",h,o),...a},e));var v=()=>i__default.default.createElement(m,{variant:["sm:body-lg","body-xs"],color:"text-primary"},"/"),P=i__default.default.forwardRef(({items:e,className:r,SeparatorComponent:t=v,onHomeClick:s},o)=>{let a=()=>typeof t=="function"?i__default.default.createElement(t,null):i__default.default.cloneElement(t);return i__default.default.createElement("nav",{ref:o,"aria-label":"Breadcrumb",className:c("sm:relative sticky top-0 sm:border-none border-secondary-50 border-b-[1px] pb-2",r)},i__default.default.createElement("ol",{className:"flex flex-wrap items-center gap-2"},i__default.default.createElement(T,{onClick:s,name:"home",size:["sm:20",16],color:"secondary",className:"pb-0.5"}),a(),e.map((n,p)=>{let l=p===e.length-1;return l||!n.href?i__default.default.createElement(m,{variant:l?["body-xs-medium","md:body-default-semibold"]:["body-xs","md:body-default"],color:l?"text-primary":"text-secondary","aria-current":l?"page":void 0,key:n.label},n.label):i__default.default.createElement(i__default.default.Fragment,null,i__default.default.createElement(b,{href:n.href,key:n.label},n.label),a())})))});P.displayName="Breadcrumbs";if (exports.default) module.exports = exports.default;exports.Breadcrumbs=P;//# sourceMappingURL=Breadcrumbs.cjs.map
|
|
2
2
|
//# sourceMappingURL=Breadcrumbs.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../src/utils/tailwind.ts","../../src/components/Link.tsx","../../src/components/Breadcrumbs.tsx"],"names":["cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","baseSize","style","mediaQueries","size","acc","breakpoint","value","Icon","React","name","color","title","className","props","ref","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","children","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","focusRingStyles","Link","href","DefaultSeparator","Breadcrumbs","items","SeparatorComponent","onHomeClick","renderSeparator","item","index","isLastItem"],"mappings":"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","file":"Breadcrumbs.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\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 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 { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React from \"react\";\nimport { Text, TextProps } from \"./Text\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type LinkProps = {\n href: string;\n children: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n} & Pick<TextProps, \"variant\" | \"color\"> &\n React.AnchorHTMLAttributes<HTMLAnchorElement>;\n\nexport const Link = ({\n children,\n color = \"text-primary\",\n variant = \"body-default-semibold\",\n href,\n className,\n ...props\n}: LinkProps) => (\n <Text variant={variant} color={color}>\n <a\n href={href}\n className={cn(\n \"hover:opacity-80 transition-all active:scale-95\",\n focusRingStyles,\n className\n )}\n {...props}\n >\n {children}\n </a>\n </Text>\n);\n","import React from \"react\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\nimport { Link } from \"./Link\";\n\ntype BreadcrumbItem = {\n label: string;\n href?: string;\n};\n\nexport type BreadcrumbsProps = {\n items: BreadcrumbItem[];\n className?: string;\n SeparatorComponent?: React.ReactElement;\n onHomeClick: () => void;\n};\n\nconst DefaultSeparator = () => (\n <Text variant=\"body-lg\" color=\"text-primary\">\n /\n </Text>\n);\n\nexport const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(\n (\n { items, className, SeparatorComponent = DefaultSeparator, onHomeClick },\n ref\n ) => {\n const renderSeparator = () =>\n typeof SeparatorComponent === \"function\" ? (\n <SeparatorComponent />\n ) : (\n React.cloneElement(SeparatorComponent)\n );\n\n return (\n <nav\n ref={ref}\n aria-label=\"Breadcrumb\"\n className={cn(\"relative\", className)}\n >\n <ol className=\"flex flex-wrap items-center gap-2\">\n <Icon\n onClick={onHomeClick}\n name=\"home\"\n size={20}\n color=\"secondary\"\n className=\"pb-0.5\"\n />\n {renderSeparator()}\n {items.map((item, index) => {\n const isLastItem = index === items.length - 1;\n\n return isLastItem || !item.href ? (\n <Text\n variant={isLastItem ? \"body-default-semibold\" : \"body-default\"}\n color={isLastItem ? \"text-primary\" : \"text-secondary\"}\n aria-current={isLastItem ? \"page\" : undefined}\n key={item.label}\n >\n {item.label}\n </Text>\n ) : (\n <>\n <Link href={item.href} key={item.label}>\n {item.label}\n </Link>\n {renderSeparator()}\n </>\n );\n })}\n </ol>\n </nav>\n );\n }\n);\n\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../src/components/Link.tsx","../../src/utils/tailwind.ts","../../src/components/Breadcrumbs.tsx"],"names":["cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","children","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","focusRingStyles","Link","href","DefaultSeparator","Breadcrumbs","items","SeparatorComponent","onHomeClick","renderSeparator","item","index","isLastItem"],"mappings":"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","file":"Breadcrumbs.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: ResponsiveSize | ResponsiveSize[];\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\"\n};\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n \"2xl\": \"1536px\"\n};\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n const mediaQueries: Record<string, string> = {};\n let baseSize: string | undefined;\n\n // Process each size\n sizeArray.forEach((size) => {\n if (typeof size === \"number\") {\n baseSize = `${size}px`;\n } else {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n mediaQueries[`@media (min-width: ${BREAKPOINT_MAP[breakpoint]})`] =\n `${value}px`;\n }\n });\n\n // Create the style object with the correct structure\n return {\n width: baseSize || \"24px\",\n height: baseSize || \"24px\",\n ...Object.entries(mediaQueries).reduce(\n (acc, [query, size]) => ({\n ...acc,\n [query]: {\n width: size,\n height: size\n }\n }),\n {}\n )\n };\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const sizeStyles = processSizes(size);\n\n return (\n <div\n className={cn(\"flex justify-center items-center\", className)}\n style={{\n ...sizeStyles,\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import React from \"react\";\nimport {\n Colors,\n TextColorVariant,\n PrimaryShades,\n SecondaryShades,\n TertiaryShades,\n Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n ? TextColorVariant\n : T extends \"primary\"\n ? keyof PrimaryShades\n : T extends \"secondary\"\n ? keyof SecondaryShades\n : T extends \"tertiary\"\n ? keyof TertiaryShades\n : never;\n\ntype ColorKey = {\n [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: ColorKey | \"inherit\";\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"text-primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import React from \"react\";\nimport { Text, TextProps } from \"./Text\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type LinkProps = {\n href: string;\n children: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n} & Pick<TextProps, \"variant\" | \"color\"> &\n React.AnchorHTMLAttributes<HTMLAnchorElement>;\n\nexport const Link = ({\n children,\n color = \"text-primary\",\n variant = \"body-default-semibold\",\n href,\n className,\n ...props\n}: LinkProps) => (\n <Text variant={variant} color={color}>\n <a\n href={href}\n className={cn(\n \"hover:opacity-80 transition-all active:scale-95 hover:underline\",\n focusRingStyles,\n className\n )}\n {...props}\n >\n {children}\n </a>\n </Text>\n);\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React from \"react\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\nimport { Link } from \"./Link\";\n\ntype BreadcrumbItem = {\n label: string;\n href?: string;\n};\n\nexport type BreadcrumbsProps = {\n items: BreadcrumbItem[];\n className?: string;\n SeparatorComponent?: React.ReactElement;\n onHomeClick: () => void;\n};\n\nconst DefaultSeparator = () => (\n <Text variant={[\"sm:body-lg\", \"body-xs\"]} color=\"text-primary\">\n /\n </Text>\n);\n\nexport const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(\n (\n { items, className, SeparatorComponent = DefaultSeparator, onHomeClick },\n ref\n ) => {\n const renderSeparator = () =>\n typeof SeparatorComponent === \"function\" ? (\n <SeparatorComponent />\n ) : (\n React.cloneElement(SeparatorComponent)\n );\n\n return (\n <nav\n ref={ref}\n aria-label=\"Breadcrumb\"\n className={cn(\n \"sm:relative sticky top-0 sm:border-none border-secondary-50 border-b-[1px] pb-2\",\n className\n )}\n >\n <ol className=\"flex flex-wrap items-center gap-2\">\n <Icon\n onClick={onHomeClick}\n name=\"home\"\n size={[\"sm:20\", 16]}\n color=\"secondary\"\n className=\"pb-0.5\"\n />\n {renderSeparator()}\n {items.map((item, index) => {\n const isLastItem = index === items.length - 1;\n\n return isLastItem || !item.href ? (\n <Text\n variant={\n isLastItem\n ? [\"body-xs-medium\", \"md:body-default-semibold\"]\n : [\"body-xs\", \"md:body-default\"]\n }\n color={isLastItem ? \"text-primary\" : \"text-secondary\"}\n aria-current={isLastItem ? \"page\" : undefined}\n key={item.label}\n >\n {item.label}\n </Text>\n ) : (\n <>\n <Link href={item.href} key={item.label}>\n {item.label}\n </Link>\n {renderSeparator()}\n </>\n );\n })}\n </ol>\n </nav>\n );\n }\n);\n\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import i from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {IconMap}from'@deckai/icons';function c(...e){return twMerge(clsx(e))}var f={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB"},C={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},R=e=>{if(!e)return {width:"24px",height:"24px"};let r=Array.isArray(e)?e:[e],t={},s;return r.forEach(o=>{if(typeof o=="number")s=`${o}px`;else {let[a,n]=o.split(":"),p=parseInt(n,10);t[`@media (min-width: ${C[a]})`]=`${p}px`;}}),{width:s||"24px",height:s||"24px",...Object.entries(t).reduce((o,[a,n])=>({...o,[a]:{width:n,height:n}}),{})}},T=i.forwardRef(({name:e,size:r=24,color:t="primary",title:s,className:o,style:a={},...n},p)=>{let l=IconMap[e],y=R(r);return i.createElement("div",{className:c("flex justify-center items-center",o),style:{...y,"--icon-stroke":f[t],...a}},i.createElement(l,{ref:p,"aria-hidden":!s,"aria-label":s,stroke:e.includes("filled")?void 0:f[t],...n}))});T.displayName="Icon";var $={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},k=e=>{let[r,t]=e.split("-");return r==="heading"?$[t]||"p":r==="label"?"label":"p"},A={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},S=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[s,o]=t.split(":");return `${s}:text-${o}`}return `text-${t}`}).join(" "):"text-body-default",m=i.forwardRef(({variant:e="body-default",color:r="text-primary",as:t,className:s,children:o,weight:a,...n},p)=>{let l=S(e),y=r&&r==="inherit"?"inherit":r?`text-${r}`:"",x=i.useMemo(()=>{let H=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return k(H)},[e]);return i.createElement(t||x,{ref:p,className:`font-sans antialiased ${l} ${y} ${a?`!${A[a]}`:""} ${s??""}`,...n},o)});m.displayName="Text";var h="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var b=({children:e,color:r="text-primary",variant:t="body-default-semibold",href:s,className:o,...a})=>i.createElement(m,{variant:t,color:r},i.createElement("a",{href:s,className:c("hover:opacity-80 transition-all active:scale-95 hover:underline",h,o),...a},e));var v=()=>i.createElement(m,{variant:["sm:body-lg","body-xs"],color:"text-primary"},"/"),P=i.forwardRef(({items:e,className:r,SeparatorComponent:t=v,onHomeClick:s},o)=>{let a=()=>typeof t=="function"?i.createElement(t,null):i.cloneElement(t);return i.createElement("nav",{ref:o,"aria-label":"Breadcrumb",className:c("sm:relative sticky top-0 sm:border-none border-secondary-50 border-b-[1px] pb-2",r)},i.createElement("ol",{className:"flex flex-wrap items-center gap-2"},i.createElement(T,{onClick:s,name:"home",size:["sm:20",16],color:"secondary",className:"pb-0.5"}),a(),e.map((n,p)=>{let l=p===e.length-1;return l||!n.href?i.createElement(m,{variant:l?["body-xs-medium","md:body-default-semibold"]:["body-xs","md:body-default"],color:l?"text-primary":"text-secondary","aria-current":l?"page":void 0,key:n.label},n.label):i.createElement(i.Fragment,null,i.createElement(b,{href:n.href,key:n.label},n.label),a())})))});P.displayName="Breadcrumbs";if (exports.default) module.exports = exports.default;export{P as Breadcrumbs};//# sourceMappingURL=Breadcrumbs.js.map
|
|
2
2
|
//# sourceMappingURL=Breadcrumbs.js.map
|