@deckai/deck-ui 0.0.7 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/AboutCard.cjs +14 -0
- package/dist/components/AboutCard.cjs.map +1 -0
- package/dist/components/AboutCard.d.cts +12 -0
- package/dist/components/AboutCard.d.ts +12 -0
- package/dist/components/AboutCard.js +14 -0
- package/dist/components/AboutCard.js.map +1 -0
- package/dist/components/Avatar.cjs +2 -0
- package/dist/components/Avatar.cjs.map +1 -0
- package/dist/components/Avatar.d.cts +10 -0
- package/dist/components/Avatar.d.ts +10 -0
- package/dist/components/Avatar.js +2 -0
- package/dist/components/Avatar.js.map +1 -0
- package/dist/components/Badge.cjs +2 -0
- package/dist/components/Badge.cjs.map +1 -0
- package/dist/components/Badge.d.cts +13 -0
- package/dist/components/Badge.d.ts +13 -0
- package/dist/components/Badge.js +2 -0
- package/dist/components/Badge.js.map +1 -0
- package/dist/components/Breadcrumbs.cjs +2 -0
- package/dist/components/Breadcrumbs.cjs.map +1 -0
- package/dist/components/Breadcrumbs.d.cts +15 -0
- package/dist/components/Breadcrumbs.d.ts +15 -0
- package/dist/components/Breadcrumbs.js +2 -0
- package/dist/components/Breadcrumbs.js.map +1 -0
- package/dist/components/Button.cjs +14 -0
- package/dist/components/Button.cjs.map +1 -0
- package/dist/components/Button.d.cts +28 -0
- package/dist/components/Button.d.ts +28 -0
- package/dist/components/Button.js +14 -0
- package/dist/components/Button.js.map +1 -0
- package/dist/components/Combobox.cjs +2 -0
- package/dist/components/Combobox.cjs.map +1 -0
- package/dist/components/Combobox.d.cts +14 -0
- package/dist/components/Combobox.d.ts +14 -0
- package/dist/components/Combobox.js +2 -0
- package/dist/components/Combobox.js.map +1 -0
- package/dist/components/ContactItem.cjs +2 -0
- package/dist/components/ContactItem.cjs.map +1 -0
- package/dist/components/ContactItem.d.cts +11 -0
- package/dist/components/ContactItem.d.ts +11 -0
- package/dist/components/ContactItem.js +2 -0
- package/dist/components/ContactItem.js.map +1 -0
- package/dist/components/Icon.cjs +2 -0
- package/dist/components/Icon.cjs.map +1 -0
- package/dist/components/Icon.d.cts +18 -0
- package/dist/components/Icon.d.ts +18 -0
- package/dist/components/Icon.js +2 -0
- package/dist/components/Icon.js.map +1 -0
- package/dist/components/Input.cjs +2 -0
- package/dist/components/Input.cjs.map +1 -0
- package/dist/components/Input.d.cts +14 -0
- package/dist/components/Input.d.ts +14 -0
- package/dist/components/Input.js +2 -0
- package/dist/components/Input.js.map +1 -0
- package/dist/components/Link.cjs +2 -0
- package/dist/components/Link.cjs.map +1 -0
- package/dist/components/Link.d.cts +13 -0
- package/dist/components/Link.d.ts +13 -0
- package/dist/components/Link.js +2 -0
- package/dist/components/Link.js.map +1 -0
- package/dist/components/Logo.cjs +3 -0
- package/dist/components/Logo.cjs.map +1 -0
- package/dist/components/Logo.d.cts +11 -0
- package/dist/components/Logo.d.ts +11 -0
- package/dist/components/Logo.js +3 -0
- package/dist/components/Logo.js.map +1 -0
- package/dist/components/Navbar.cjs +3 -0
- package/dist/components/Navbar.cjs.map +1 -0
- package/dist/components/Navbar.d.cts +19 -0
- package/dist/components/Navbar.d.ts +19 -0
- package/dist/components/Navbar.js +3 -0
- package/dist/components/Navbar.js.map +1 -0
- package/dist/components/NavbarItem.cjs +2 -0
- package/dist/components/NavbarItem.cjs.map +1 -0
- package/dist/components/NavbarItem.d.cts +13 -0
- package/dist/components/NavbarItem.d.ts +13 -0
- package/dist/components/NavbarItem.js +2 -0
- package/dist/components/NavbarItem.js.map +1 -0
- package/dist/components/Option.cjs +2 -0
- package/dist/components/Option.cjs.map +1 -0
- package/dist/components/Option.d.cts +11 -0
- package/dist/components/Option.d.ts +11 -0
- package/dist/components/Option.js +2 -0
- package/dist/components/Option.js.map +1 -0
- package/dist/components/Pressable.cjs +2 -0
- package/dist/components/Pressable.cjs.map +1 -0
- package/dist/components/Pressable.d.cts +6 -0
- package/dist/components/Pressable.d.ts +6 -0
- package/dist/components/Pressable.js +2 -0
- package/dist/components/Pressable.js.map +1 -0
- package/dist/components/ProfileCard.cjs +14 -0
- package/dist/components/ProfileCard.cjs.map +1 -0
- package/dist/components/ProfileCard.d.cts +15 -0
- package/dist/components/ProfileCard.d.ts +15 -0
- package/dist/components/ProfileCard.js +14 -0
- package/dist/components/ProfileCard.js.map +1 -0
- package/dist/components/SocialCard.cjs +2 -0
- package/dist/components/SocialCard.cjs.map +1 -0
- package/dist/components/SocialCard.d.cts +12 -0
- package/dist/components/SocialCard.d.ts +12 -0
- package/dist/components/SocialCard.js +2 -0
- package/dist/components/SocialCard.js.map +1 -0
- package/dist/components/Switch.cjs +2 -0
- package/dist/components/Switch.cjs.map +1 -0
- package/dist/components/Switch.d.cts +13 -0
- package/dist/components/Switch.d.ts +13 -0
- package/dist/components/Switch.js +2 -0
- package/dist/components/Switch.js.map +1 -0
- package/dist/components/Tabs.cjs +2 -0
- package/dist/components/Tabs.cjs.map +1 -0
- package/dist/components/Tabs.d.cts +16 -0
- package/dist/components/Tabs.d.ts +16 -0
- package/dist/components/Tabs.js +2 -0
- package/dist/components/Tabs.js.map +1 -0
- package/dist/components/Tag.cjs +2 -0
- package/dist/components/Tag.cjs.map +1 -0
- package/dist/components/Tag.d.cts +10 -0
- package/dist/components/Tag.d.ts +10 -0
- package/dist/components/Tag.js +2 -0
- package/dist/components/Tag.js.map +1 -0
- package/dist/components/Text.cjs +2 -0
- package/dist/components/Text.cjs.map +1 -0
- package/dist/components/Text.d.cts +46 -0
- package/dist/components/Text.d.ts +46 -0
- package/dist/components/Text.js +2 -0
- package/dist/components/Text.js.map +1 -0
- package/dist/components/Tooltip.cjs +2 -0
- package/dist/components/Tooltip.cjs.map +1 -0
- package/dist/components/Tooltip.d.cts +13 -0
- package/dist/components/Tooltip.d.ts +13 -0
- package/dist/components/Tooltip.js +2 -0
- package/dist/components/Tooltip.js.map +1 -0
- package/dist/components/WorkCard.cjs +2 -0
- package/dist/components/WorkCard.cjs.map +1 -0
- package/dist/components/WorkCard.d.cts +13 -0
- package/dist/components/WorkCard.d.ts +13 -0
- package/dist/components/WorkCard.js +2 -0
- package/dist/components/WorkCard.js.map +1 -0
- package/dist/index.cjs +5 -1005
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +29 -288
- package/dist/index.d.ts +29 -288
- package/dist/index.js +5 -954
- package/dist/index.js.map +1 -1
- package/dist/styles/fonts.css +1 -29
- package/dist/styles/fonts.css.map +1 -1
- package/dist/styles/styles.css +1 -1
- package/dist/styles/styles.css.map +1 -1
- package/dist/tailwind-DJFscIlV.d.cts +35 -0
- package/dist/tailwind-DJFscIlV.d.ts +35 -0
- package/package.json +10 -3
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
'use strict';var s=require('react'),icons=require('@deckai/icons'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var s__namespace=/*#__PURE__*/_interopNamespace(s);var E={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},C=e=>{let[r,t]=e.split("-");return r==="heading"?E[t]||"p":r==="label"?"label":"p"},$={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},R=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[o,n]=t.split(":");return `${o}:text-${n}`}return Array.isArray(e)?`lg:text-${t}`:`text-${t}`}).join(" "):"text-body-default",p=s__namespace.default.forwardRef(({variant:e="body-default",color:r="text-primary",as:t,className:o,children:n,weight:a,...i},l)=>{let c=R(e),u=r&&r==="inherit"?"inherit":r?`text-${r}`:"",M=s__namespace.default.useMemo(()=>{let L=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return C(L)},[e]);return s__namespace.default.createElement(t||M,{ref:l,className:`font-sans antialiased ${c} ${u} ${a?`!${$[a]}`:""} ${o??""}`,...i},n)});p.displayName="Text";var b="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var A={black:"bg-text-primary text-white",accent:"bg-primary-100 text-white",secondary:"bg-secondary-100 text-secondary"},k={black:"border border-text-primary text-text-primary",accent:"border border-primary-100 text-primary-100",secondary:"border border-text-secondary text-secondary"},T=s__namespace.forwardRef(({className:e,variant:r="filled",color:t="black",isLoading:o=!1,children:n,disabled:a,...i},l)=>s__namespace.createElement("button",{ref:l,className:`
|
|
2
|
+
px-7
|
|
3
|
+
py-2
|
|
4
|
+
inline-flex items-center justify-center
|
|
5
|
+
rounded-lg
|
|
6
|
+
transition-colors duration-200
|
|
7
|
+
${b}
|
|
8
|
+
disabled:opacity-50 disabled:pointer-events-none
|
|
9
|
+
hover:opacity-80 active:scale-95
|
|
10
|
+
truncate
|
|
11
|
+
${r==="filled"?A[t]:k[t]}
|
|
12
|
+
${e}
|
|
13
|
+
`,disabled:a||o,type:"button",...i},typeof n=="string"?s__namespace.createElement(p,{variant:"body-default-bold",color:"inherit"},n):n));T.displayName="Button";function h(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var x={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB"},N={sm:"@media (min-width: 640px)",md:"@media (min-width: 768px)",lg:"@media (min-width: 1024px)",xl:"@media (min-width: 1280px)","2xl":"@media (min-width: 1536px)"},I=e=>{if(!e)return {width:"24px",height:"24px"};let r=Array.isArray(e)?e:[e],t=typeof r[0]=="number"?r[0]:24,o={width:`${t}px`,height:`${t}px`},n=r.filter(a=>typeof a=="string"&&a.includes(":")).reduce((a,i)=>{let[l,c]=i.split(":");return a[N[l]]={width:`${c}px`,height:`${c}px`},a},{});return Object.keys(n).length>0&&(o["@media"]=n),o},d=s__namespace.default.forwardRef(({name:e,size:r=24,color:t="primary",title:o,className:n,style:a={},...i},l)=>{let c=icons.IconMap[e],u=I(r);return s__namespace.default.createElement("div",{className:h("flex justify-center items-center",n),style:{...u,"--icon-stroke":x[t],...a}},s__namespace.default.createElement(c,{ref:l,"aria-hidden":!o,"aria-label":o,stroke:e.includes("filled")?void 0:x[t],...i}))});d.displayName="Icon";var H=({iconName:e,children:r,href:t,...o})=>s__namespace.default.createElement("div",{className:"row gap-2 flex items-center"},s__namespace.default.createElement("div",{className:"bg-secondary-400 rounded-full p-2.5"},s__namespace.default.createElement(d,{name:e,color:"primaryBlue",size:18})),s__namespace.default.createElement(p,{className:"hover:underline",as:"a",href:t,...o,variant:["body-lg","md:body-default-medium"]},r));var le=({interests:e,contactItems:r,description:t,...o})=>s__namespace.default.createElement("div",{className:"border border-secondary rounded-2xl p-10 relative flex",...o},s__namespace.default.createElement(T,{variant:"outlined",className:"absolute top-10 right-10 !px-2 py-2"},s__namespace.default.createElement(d,{color:"primary",name:"edit-2"})),s__namespace.default.createElement("div",{className:"flex basis-1/2 flex-col gap-2 pr-10"},s__namespace.default.createElement(p,{variant:"body-default"},t)),s__namespace.default.createElement("span",{className:"absolute bg-secondary-50 w-[1px] inset-x-1/2 inset-y-10"}),s__namespace.default.createElement("div",{className:"flex flex-col pt-8 gap-4 pl-10"},r.map(n=>s__namespace.default.createElement(H,{key:n.title,...n}))));if (exports.default) module.exports = exports.default;exports.AboutCard=le;//# sourceMappingURL=AboutCard.cjs.map
|
|
14
|
+
//# sourceMappingURL=AboutCard.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Text.tsx","../../src/utils/tailwind.ts","../../src/components/Button.tsx","../../src/components/Icon.tsx","../../src/utils/index.ts","../../src/components/ContactItem.tsx","../../src/components/AboutCard.tsx"],"names":["HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","size","fontWeight","processVariants","variants","breakpoint","typographyClass","Text","React","color","as","className","children","weight","props","ref","typographyClasses","colorClasses","suggestedElement","baseVariant","focusRingStyles","filled","outlined","Button","m","isLoading","disabled","cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","baseSize","style","mediaQueries","acc","value","Icon","name","title","IconComponent","IconMap","sizeStyles","ContactItem","iconName","href","linkProps","AboutCard","interests","contactItems","description","contactProps"],"mappings":"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","file":"AboutCard.cjs","sourcesContent":["import React from \"react\";\nimport {\n Colors,\n TextColorVariant,\n PrimaryShades,\n SecondaryShades,\n TertiaryShades,\n Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n ? TextColorVariant\n : T extends \"primary\"\n ? keyof PrimaryShades\n : T extends \"secondary\"\n ? keyof SecondaryShades\n : T extends \"tertiary\"\n ? keyof TertiaryShades\n : never;\n\ntype ColorKey = {\n [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: ColorKey | \"inherit\";\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return Array.isArray(variants) ? `lg:text-${variant}` : `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"text-primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import * as React from \"react\";\nimport { Text } from \"./Text\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type ButtonProps = {\n /** @default filled */\n variant?: \"filled\" | \"outlined\";\n /** @default primary */\n color?: \"black\" | \"accent\" | \"secondary\";\n isLoading?: boolean;\n children: React.ReactNode;\n className?: string;\n disabled?: boolean;\n start?: React.ReactNode;\n end?: React.ReactNode;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nconst filled = {\n black: \"bg-text-primary text-white\",\n // fade it slightly\n accent: \"bg-primary-100 text-white\",\n secondary: \"bg-secondary-100 text-secondary\"\n};\n\nconst outlined = {\n black: \"border border-text-primary text-text-primary\",\n accent: \"border border-primary-100 text-primary-100\",\n secondary: \"border border-text-secondary text-secondary\"\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant = \"filled\",\n color = \"black\",\n isLoading = false,\n children,\n disabled,\n ...props\n },\n ref\n ) => (\n <button\n ref={ref}\n className={`\n px-7\n py-2\n inline-flex items-center justify-center\n rounded-lg \n transition-colors duration-200\n ${focusRingStyles}\n disabled:opacity-50 disabled:pointer-events-none\n hover:opacity-80 active:scale-95 \n truncate\n ${variant === \"filled\" ? filled[color] : outlined[color]}\n ${className}\n `}\n disabled={disabled || isLoading}\n type=\"button\"\n {...props}\n >\n {typeof children === \"string\" ? (\n <Text variant=\"body-default-bold\" color=\"inherit\">\n {children}\n </Text>\n ) : (\n children\n )}\n </button>\n )\n);\n\nButton.displayName = \"Button\";\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: number | `${Breakpoint}:${number}`;\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\"\n};\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"@media (min-width: 640px)\",\n md: \"@media (min-width: 768px)\",\n lg: \"@media (min-width: 1024px)\",\n xl: \"@media (min-width: 1280px)\",\n \"2xl\": \"@media (min-width: 1536px)\"\n};\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n const baseSize = typeof sizeArray[0] === \"number\" ? sizeArray[0] : 24;\n\n const style: React.CSSProperties = {\n width: `${baseSize}px`,\n height: `${baseSize}px`\n };\n\n // Add media queries for responsive sizes\n const mediaQueries = sizeArray\n .filter(\n (size): size is `${Breakpoint}:${number}` =>\n typeof size === \"string\" && size.includes(\":\")\n )\n .reduce(\n (acc, size) => {\n const [breakpoint, value] = size.split(\":\") as [Breakpoint, string];\n acc[BREAKPOINT_MAP[breakpoint]] = {\n width: `${value}px`,\n height: `${value}px`\n };\n return acc;\n },\n {} as Record<string, React.CSSProperties>\n );\n\n if (Object.keys(mediaQueries).length > 0) {\n (style as any)[\"@media\"] = mediaQueries;\n }\n\n return style;\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const sizeStyles = processSizes(size);\n\n return (\n <div\n className={cn(\"flex justify-center items-center\", className)}\n style={{\n ...sizeStyles,\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import { IconName } from \"@deckai/icons/src/types/icon-names\";\nimport React, { HTMLAttributes } from \"react\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\n\nexport type ContactItemProps = {\n iconName: IconName;\n children: React.ReactNode;\n href: string;\n} & Omit<HTMLAttributes<HTMLAnchorElement>, \"color\">;\n\nexport const ContactItem = ({\n iconName,\n children,\n href,\n ...linkProps\n}: ContactItemProps) => (\n <div className=\"row gap-2 flex items-center\">\n <div className=\"bg-secondary-400 rounded-full p-2.5\">\n <Icon name={iconName} color=\"primaryBlue\" size={18} />\n </div>\n <Text\n className=\"hover:underline\"\n as=\"a\"\n href={href}\n {...linkProps}\n variant={[\"body-lg\", \"md:body-default-medium\"]}\n >\n {children}\n </Text>\n </div>\n);\n","import React from \"react\";\nimport { Button } from \"./Button\";\nimport { Icon } from \"./Icon\";\nimport { Tag } from \"./Tag\";\nimport { Text } from \"./Text\";\nimport { ContactItem, ContactItemProps } from \"./ContactItem\";\n\nexport type AboutCardProps = {\n interests: string[];\n contactItems: ContactItemProps[];\n description: string;\n};\n\nexport const AboutCard = ({\n interests,\n contactItems,\n description,\n ...props\n}: AboutCardProps) => (\n <div\n className=\"border border-secondary rounded-2xl p-10 relative flex\"\n {...props}\n >\n <Button variant=\"outlined\" className=\"absolute top-10 right-10 !px-2 py-2\">\n <Icon color=\"primary\" name=\"edit-2\" />\n </Button>\n <div className=\"flex basis-1/2 flex-col gap-2 pr-10\">\n <Text variant=\"body-default\">{description}</Text>\n </div>\n {/* vertical divider */}\n <span className=\"absolute bg-secondary-50 w-[1px] inset-x-1/2 inset-y-10\" />\n <div className=\"flex flex-col pt-8 gap-4 pl-10\">\n {contactItems.map((contactProps) => (\n <ContactItem key={contactProps.title} {...contactProps} />\n ))}\n </div>\n </div>\n);\n"]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import { ContactItemProps } from './ContactItem.cjs';
|
|
3
|
+
import '@deckai/icons/src/types/icon-names';
|
|
4
|
+
|
|
5
|
+
type AboutCardProps = {
|
|
6
|
+
interests: string[];
|
|
7
|
+
contactItems: ContactItemProps[];
|
|
8
|
+
description: string;
|
|
9
|
+
};
|
|
10
|
+
declare const AboutCard: ({ interests, contactItems, description, ...props }: AboutCardProps) => React__default.JSX.Element;
|
|
11
|
+
|
|
12
|
+
export { AboutCard, type AboutCardProps };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import { ContactItemProps } from './ContactItem.js';
|
|
3
|
+
import '@deckai/icons/src/types/icon-names';
|
|
4
|
+
|
|
5
|
+
type AboutCardProps = {
|
|
6
|
+
interests: string[];
|
|
7
|
+
contactItems: ContactItemProps[];
|
|
8
|
+
description: string;
|
|
9
|
+
};
|
|
10
|
+
declare const AboutCard: ({ interests, contactItems, description, ...props }: AboutCardProps) => React__default.JSX.Element;
|
|
11
|
+
|
|
12
|
+
export { AboutCard, type AboutCardProps };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import*as s from'react';import s__default from'react';import {IconMap}from'@deckai/icons';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';var E={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},C=e=>{let[r,t]=e.split("-");return r==="heading"?E[t]||"p":r==="label"?"label":"p"},$={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},R=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[o,n]=t.split(":");return `${o}:text-${n}`}return Array.isArray(e)?`lg:text-${t}`:`text-${t}`}).join(" "):"text-body-default",p=s__default.forwardRef(({variant:e="body-default",color:r="text-primary",as:t,className:o,children:n,weight:a,...i},l)=>{let c=R(e),u=r&&r==="inherit"?"inherit":r?`text-${r}`:"",M=s__default.useMemo(()=>{let L=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return C(L)},[e]);return s__default.createElement(t||M,{ref:l,className:`font-sans antialiased ${c} ${u} ${a?`!${$[a]}`:""} ${o??""}`,...i},n)});p.displayName="Text";var b="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var A={black:"bg-text-primary text-white",accent:"bg-primary-100 text-white",secondary:"bg-secondary-100 text-secondary"},k={black:"border border-text-primary text-text-primary",accent:"border border-primary-100 text-primary-100",secondary:"border border-text-secondary text-secondary"},T=s.forwardRef(({className:e,variant:r="filled",color:t="black",isLoading:o=!1,children:n,disabled:a,...i},l)=>s.createElement("button",{ref:l,className:`
|
|
2
|
+
px-7
|
|
3
|
+
py-2
|
|
4
|
+
inline-flex items-center justify-center
|
|
5
|
+
rounded-lg
|
|
6
|
+
transition-colors duration-200
|
|
7
|
+
${b}
|
|
8
|
+
disabled:opacity-50 disabled:pointer-events-none
|
|
9
|
+
hover:opacity-80 active:scale-95
|
|
10
|
+
truncate
|
|
11
|
+
${r==="filled"?A[t]:k[t]}
|
|
12
|
+
${e}
|
|
13
|
+
`,disabled:a||o,type:"button",...i},typeof n=="string"?s.createElement(p,{variant:"body-default-bold",color:"inherit"},n):n));T.displayName="Button";function h(...e){return twMerge(clsx(e))}var x={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB"},N={sm:"@media (min-width: 640px)",md:"@media (min-width: 768px)",lg:"@media (min-width: 1024px)",xl:"@media (min-width: 1280px)","2xl":"@media (min-width: 1536px)"},I=e=>{if(!e)return {width:"24px",height:"24px"};let r=Array.isArray(e)?e:[e],t=typeof r[0]=="number"?r[0]:24,o={width:`${t}px`,height:`${t}px`},n=r.filter(a=>typeof a=="string"&&a.includes(":")).reduce((a,i)=>{let[l,c]=i.split(":");return a[N[l]]={width:`${c}px`,height:`${c}px`},a},{});return Object.keys(n).length>0&&(o["@media"]=n),o},d=s__default.forwardRef(({name:e,size:r=24,color:t="primary",title:o,className:n,style:a={},...i},l)=>{let c=IconMap[e],u=I(r);return s__default.createElement("div",{className:h("flex justify-center items-center",n),style:{...u,"--icon-stroke":x[t],...a}},s__default.createElement(c,{ref:l,"aria-hidden":!o,"aria-label":o,stroke:e.includes("filled")?void 0:x[t],...i}))});d.displayName="Icon";var H=({iconName:e,children:r,href:t,...o})=>s__default.createElement("div",{className:"row gap-2 flex items-center"},s__default.createElement("div",{className:"bg-secondary-400 rounded-full p-2.5"},s__default.createElement(d,{name:e,color:"primaryBlue",size:18})),s__default.createElement(p,{className:"hover:underline",as:"a",href:t,...o,variant:["body-lg","md:body-default-medium"]},r));var le=({interests:e,contactItems:r,description:t,...o})=>s__default.createElement("div",{className:"border border-secondary rounded-2xl p-10 relative flex",...o},s__default.createElement(T,{variant:"outlined",className:"absolute top-10 right-10 !px-2 py-2"},s__default.createElement(d,{color:"primary",name:"edit-2"})),s__default.createElement("div",{className:"flex basis-1/2 flex-col gap-2 pr-10"},s__default.createElement(p,{variant:"body-default"},t)),s__default.createElement("span",{className:"absolute bg-secondary-50 w-[1px] inset-x-1/2 inset-y-10"}),s__default.createElement("div",{className:"flex flex-col pt-8 gap-4 pl-10"},r.map(n=>s__default.createElement(H,{key:n.title,...n}))));if (exports.default) module.exports = exports.default;export{le as AboutCard};//# sourceMappingURL=AboutCard.js.map
|
|
14
|
+
//# sourceMappingURL=AboutCard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Text.tsx","../../src/utils/tailwind.ts","../../src/components/Button.tsx","../../src/components/Icon.tsx","../../src/utils/index.ts","../../src/components/ContactItem.tsx","../../src/components/AboutCard.tsx"],"names":["HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","size","fontWeight","processVariants","variants","breakpoint","typographyClass","Text","React","color","as","className","children","weight","props","ref","typographyClasses","colorClasses","suggestedElement","baseVariant","focusRingStyles","filled","outlined","Button","m","isLoading","disabled","cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","baseSize","style","mediaQueries","acc","value","Icon","name","title","IconComponent","IconMap","sizeStyles","ContactItem","iconName","href","linkProps","AboutCard","interests","contactItems","description","contactProps"],"mappings":"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","file":"AboutCard.js","sourcesContent":["import React from \"react\";\nimport {\n Colors,\n TextColorVariant,\n PrimaryShades,\n SecondaryShades,\n TertiaryShades,\n Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n ? TextColorVariant\n : T extends \"primary\"\n ? keyof PrimaryShades\n : T extends \"secondary\"\n ? keyof SecondaryShades\n : T extends \"tertiary\"\n ? keyof TertiaryShades\n : never;\n\ntype ColorKey = {\n [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: ColorKey | \"inherit\";\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return Array.isArray(variants) ? `lg:text-${variant}` : `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"text-primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import * as React from \"react\";\nimport { Text } from \"./Text\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type ButtonProps = {\n /** @default filled */\n variant?: \"filled\" | \"outlined\";\n /** @default primary */\n color?: \"black\" | \"accent\" | \"secondary\";\n isLoading?: boolean;\n children: React.ReactNode;\n className?: string;\n disabled?: boolean;\n start?: React.ReactNode;\n end?: React.ReactNode;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nconst filled = {\n black: \"bg-text-primary text-white\",\n // fade it slightly\n accent: \"bg-primary-100 text-white\",\n secondary: \"bg-secondary-100 text-secondary\"\n};\n\nconst outlined = {\n black: \"border border-text-primary text-text-primary\",\n accent: \"border border-primary-100 text-primary-100\",\n secondary: \"border border-text-secondary text-secondary\"\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant = \"filled\",\n color = \"black\",\n isLoading = false,\n children,\n disabled,\n ...props\n },\n ref\n ) => (\n <button\n ref={ref}\n className={`\n px-7\n py-2\n inline-flex items-center justify-center\n rounded-lg \n transition-colors duration-200\n ${focusRingStyles}\n disabled:opacity-50 disabled:pointer-events-none\n hover:opacity-80 active:scale-95 \n truncate\n ${variant === \"filled\" ? filled[color] : outlined[color]}\n ${className}\n `}\n disabled={disabled || isLoading}\n type=\"button\"\n {...props}\n >\n {typeof children === \"string\" ? (\n <Text variant=\"body-default-bold\" color=\"inherit\">\n {children}\n </Text>\n ) : (\n children\n )}\n </button>\n )\n);\n\nButton.displayName = \"Button\";\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: number | `${Breakpoint}:${number}`;\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\"\n};\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"@media (min-width: 640px)\",\n md: \"@media (min-width: 768px)\",\n lg: \"@media (min-width: 1024px)\",\n xl: \"@media (min-width: 1280px)\",\n \"2xl\": \"@media (min-width: 1536px)\"\n};\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n const baseSize = typeof sizeArray[0] === \"number\" ? sizeArray[0] : 24;\n\n const style: React.CSSProperties = {\n width: `${baseSize}px`,\n height: `${baseSize}px`\n };\n\n // Add media queries for responsive sizes\n const mediaQueries = sizeArray\n .filter(\n (size): size is `${Breakpoint}:${number}` =>\n typeof size === \"string\" && size.includes(\":\")\n )\n .reduce(\n (acc, size) => {\n const [breakpoint, value] = size.split(\":\") as [Breakpoint, string];\n acc[BREAKPOINT_MAP[breakpoint]] = {\n width: `${value}px`,\n height: `${value}px`\n };\n return acc;\n },\n {} as Record<string, React.CSSProperties>\n );\n\n if (Object.keys(mediaQueries).length > 0) {\n (style as any)[\"@media\"] = mediaQueries;\n }\n\n return style;\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const sizeStyles = processSizes(size);\n\n return (\n <div\n className={cn(\"flex justify-center items-center\", className)}\n style={{\n ...sizeStyles,\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import { IconName } from \"@deckai/icons/src/types/icon-names\";\nimport React, { HTMLAttributes } from \"react\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\n\nexport type ContactItemProps = {\n iconName: IconName;\n children: React.ReactNode;\n href: string;\n} & Omit<HTMLAttributes<HTMLAnchorElement>, \"color\">;\n\nexport const ContactItem = ({\n iconName,\n children,\n href,\n ...linkProps\n}: ContactItemProps) => (\n <div className=\"row gap-2 flex items-center\">\n <div className=\"bg-secondary-400 rounded-full p-2.5\">\n <Icon name={iconName} color=\"primaryBlue\" size={18} />\n </div>\n <Text\n className=\"hover:underline\"\n as=\"a\"\n href={href}\n {...linkProps}\n variant={[\"body-lg\", \"md:body-default-medium\"]}\n >\n {children}\n </Text>\n </div>\n);\n","import React from \"react\";\nimport { Button } from \"./Button\";\nimport { Icon } from \"./Icon\";\nimport { Tag } from \"./Tag\";\nimport { Text } from \"./Text\";\nimport { ContactItem, ContactItemProps } from \"./ContactItem\";\n\nexport type AboutCardProps = {\n interests: string[];\n contactItems: ContactItemProps[];\n description: string;\n};\n\nexport const AboutCard = ({\n interests,\n contactItems,\n description,\n ...props\n}: AboutCardProps) => (\n <div\n className=\"border border-secondary rounded-2xl p-10 relative flex\"\n {...props}\n >\n <Button variant=\"outlined\" className=\"absolute top-10 right-10 !px-2 py-2\">\n <Icon color=\"primary\" name=\"edit-2\" />\n </Button>\n <div className=\"flex basis-1/2 flex-col gap-2 pr-10\">\n <Text variant=\"body-default\">{description}</Text>\n </div>\n {/* vertical divider */}\n <span className=\"absolute bg-secondary-50 w-[1px] inset-x-1/2 inset-y-10\" />\n <div className=\"flex flex-col pt-8 gap-4 pl-10\">\n {contactItems.map((contactProps) => (\n <ContactItem key={contactProps.title} {...contactProps} />\n ))}\n </div>\n </div>\n);\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';var c=require('react');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var c__default=/*#__PURE__*/_interopDefault(c);var a="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var i=({children:s,type:t="button",className:e,...o})=>c__default.default.createElement("button",{type:t,className:`appearance-none hover:opacity-80 transition-all active:scale-95 ${a} ${e}`,...o},s);var y=({src:s,size:t=48,onClick:e,...o})=>{let r=typeof t=="number"?`${t}px`:t,n=c__default.default.createElement("img",{src:s,alt:"avatar",className:"rounded-full",style:{width:r,height:r},...o});return e?c__default.default.createElement(i,{onClick:e},n):n};if (exports.default) module.exports = exports.default;exports.Avatar=y;//# sourceMappingURL=Avatar.cjs.map
|
|
2
|
+
//# sourceMappingURL=Avatar.cjs.map
|
|
@@ -0,0 +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","Avatar","src","size","onClick","sizeStyle","content"],"mappings":"oJAmEO,IAAMA,EACX,qGC/DK,CAAA,IAAMC,EAAsC,CAAC,CAClD,SAAAC,CACA,CAAA,IAAA,CAAAC,EAAO,QACP,CAAA,SAAA,CAAAC,EACA,GAAGC,CACL,IACEC,kBAAA,CAAA,aAAA,CAAC,UAEC,IAAMH,CAAAA,CAAAA,CACN,UAAW,CAAmEH,gEAAAA,EAAAA,CAAe,IAAII,CAAS,CAAA,CAAA,CACzG,GAAGC,CAEHH,CAAAA,CAAAA,CACH,ECVWK,IAAAA,CAAAA,CAAS,CAAC,CAAE,GAAA,CAAAC,EAAK,IAAAC,CAAAA,CAAAA,CAAO,GAAI,OAAAC,CAAAA,CAAAA,CAAS,GAAGL,CAAM,CAAA,GAAmB,CAE5E,IAAMM,CAAAA,CAAY,OAAOF,CAAS,EAAA,QAAA,CAAW,GAAGA,CAAI,CAAA,EAAA,CAAA,CAAOA,EACrDG,CACJN,CAAAA,kBAAAA,CAAA,cAAC,KACC,CAAA,CAAA,GAAA,CAAKE,EACL,GAAI,CAAA,QAAA,CACJ,UAAU,cACV,CAAA,KAAA,CAAO,CACL,KAAOG,CAAAA,CAAAA,CACP,OAAQA,CACV,CAAA,CACC,GAAGN,CACN,CAAA,CAAA,CAEF,OAAOK,CAAUJ,CAAAA,kBAAAA,CAAA,cAACL,CAAA,CAAA,CAAU,QAASS,CAAUE,CAAAA,CAAAA,CAAQ,EAAeA,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 ...props\n}) => (\n <button\n // eslint-disable-next-line react/butt on-has-type\n type={type}\n className={`appearance-none hover:opacity-80 transition-all active:scale-95 ${focusRingStyles} ${className}`}\n {...props}\n >\n {children}\n </button>\n);\n","import React from \"react\";\nimport { Pressable } from \"./Pressable\";\n\nexport type AvatarProps = {\n src: string;\n size?: number | string;\n} & Pick<React.ComponentProps<typeof Pressable>, \"onClick\">;\n\nexport const Avatar = ({ src, size = 48, onClick, ...props }: AvatarProps) => {\n // Convert size to a string with 'px' if it's a number\n const sizeStyle = typeof size === \"number\" ? `${size}px` : size;\n const content = (\n <img\n src={src}\n alt=\"avatar\"\n className=\"rounded-full\"\n style={{\n width: sizeStyle,\n height: sizeStyle\n }}\n {...props}\n />\n );\n return onClick ? <Pressable onClick={onClick}>{content}</Pressable> : content;\n};\n"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import { Pressable } from './Pressable.cjs';
|
|
3
|
+
|
|
4
|
+
type AvatarProps = {
|
|
5
|
+
src: string;
|
|
6
|
+
size?: number | string;
|
|
7
|
+
} & Pick<React__default.ComponentProps<typeof Pressable>, "onClick">;
|
|
8
|
+
declare const Avatar: ({ src, size, onClick, ...props }: AvatarProps) => React__default.JSX.Element;
|
|
9
|
+
|
|
10
|
+
export { Avatar, type AvatarProps };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import { Pressable } from './Pressable.js';
|
|
3
|
+
|
|
4
|
+
type AvatarProps = {
|
|
5
|
+
src: string;
|
|
6
|
+
size?: number | string;
|
|
7
|
+
} & Pick<React__default.ComponentProps<typeof Pressable>, "onClick">;
|
|
8
|
+
declare const Avatar: ({ src, size, onClick, ...props }: AvatarProps) => React__default.JSX.Element;
|
|
9
|
+
|
|
10
|
+
export { Avatar, type AvatarProps };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import c from'react';var a="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var i=({children:s,type:t="button",className:e,...o})=>c.createElement("button",{type:t,className:`appearance-none hover:opacity-80 transition-all active:scale-95 ${a} ${e}`,...o},s);var y=({src:s,size:t=48,onClick:e,...o})=>{let r=typeof t=="number"?`${t}px`:t,n=c.createElement("img",{src:s,alt:"avatar",className:"rounded-full",style:{width:r,height:r},...o});return e?c.createElement(i,{onClick:e},n):n};if (exports.default) module.exports = exports.default;export{y as Avatar};//# sourceMappingURL=Avatar.js.map
|
|
2
|
+
//# sourceMappingURL=Avatar.js.map
|
|
@@ -0,0 +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","Avatar","src","size","onClick","sizeStyle","content"],"mappings":"qBAmEO,IAAMA,EACX,qGC/DK,CAAA,IAAMC,EAAsC,CAAC,CAClD,SAAAC,CACA,CAAA,IAAA,CAAAC,EAAO,QACP,CAAA,SAAA,CAAAC,EACA,GAAGC,CACL,IACEC,CAAA,CAAA,aAAA,CAAC,UAEC,IAAMH,CAAAA,CAAAA,CACN,UAAW,CAAmEH,gEAAAA,EAAAA,CAAe,IAAII,CAAS,CAAA,CAAA,CACzG,GAAGC,CAEHH,CAAAA,CAAAA,CACH,ECVWK,IAAAA,CAAAA,CAAS,CAAC,CAAE,GAAA,CAAAC,EAAK,IAAAC,CAAAA,CAAAA,CAAO,GAAI,OAAAC,CAAAA,CAAAA,CAAS,GAAGL,CAAM,CAAA,GAAmB,CAE5E,IAAMM,CAAAA,CAAY,OAAOF,CAAS,EAAA,QAAA,CAAW,GAAGA,CAAI,CAAA,EAAA,CAAA,CAAOA,EACrDG,CACJN,CAAAA,CAAAA,CAAA,cAAC,KACC,CAAA,CAAA,GAAA,CAAKE,EACL,GAAI,CAAA,QAAA,CACJ,UAAU,cACV,CAAA,KAAA,CAAO,CACL,KAAOG,CAAAA,CAAAA,CACP,OAAQA,CACV,CAAA,CACC,GAAGN,CACN,CAAA,CAAA,CAEF,OAAOK,CAAUJ,CAAAA,CAAAA,CAAA,cAACL,CAAA,CAAA,CAAU,QAASS,CAAUE,CAAAA,CAAAA,CAAQ,EAAeA,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 ...props\n}) => (\n <button\n // eslint-disable-next-line react/butt on-has-type\n type={type}\n className={`appearance-none hover:opacity-80 transition-all active:scale-95 ${focusRingStyles} ${className}`}\n {...props}\n >\n {children}\n </button>\n);\n","import React from \"react\";\nimport { Pressable } from \"./Pressable\";\n\nexport type AvatarProps = {\n src: string;\n size?: number | string;\n} & Pick<React.ComponentProps<typeof Pressable>, \"onClick\">;\n\nexport const Avatar = ({ src, size = 48, onClick, ...props }: AvatarProps) => {\n // Convert size to a string with 'px' if it's a number\n const sizeStyle = typeof size === \"number\" ? `${size}px` : size;\n const content = (\n <img\n src={src}\n alt=\"avatar\"\n className=\"rounded-full\"\n style={{\n width: sizeStyle,\n height: sizeStyle\n }}\n {...props}\n />\n );\n return onClick ? <Pressable onClick={onClick}>{content}</Pressable> : content;\n};\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';var p=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 p__namespace=/*#__PURE__*/_interopNamespace(p);function m(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var h={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB"},L={sm:"@media (min-width: 640px)",md:"@media (min-width: 768px)",lg:"@media (min-width: 1024px)",xl:"@media (min-width: 1280px)","2xl":"@media (min-width: 1536px)"},b=e=>{if(!e)return {width:"24px",height:"24px"};let r=Array.isArray(e)?e:[e],t=typeof r[0]=="number"?r[0]:24,o={width:`${t}px`,height:`${t}px`},a=r.filter(n=>typeof n=="string"&&n.includes(":")).reduce((n,i)=>{let[l,s]=i.split(":");return n[L[l]]={width:`${s}px`,height:`${s}px`},n},{});return Object.keys(a).length>0&&(o["@media"]=a),o},T=p__namespace.default.forwardRef(({name:e,size:r=24,color:t="primary",title:o,className:a,style:n={},...i},l)=>{let s=icons.IconMap[e],y=b(r);return p__namespace.default.createElement("div",{className:m("flex justify-center items-center",a),style:{...y,"--icon-stroke":h[t],...n}},p__namespace.default.createElement(s,{ref:l,"aria-hidden":!o,"aria-label":o,stroke:e.includes("filled")?void 0:h[t],...i}))});T.displayName="Icon";var E={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},R=e=>{let[r,t]=e.split("-");return r==="heading"?E[t]||"p":r==="label"?"label":"p"},C={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},A=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[o,a]=t.split(":");return `${o}:text-${a}`}return Array.isArray(e)?`lg:text-${t}`:`text-${t}`}).join(" "):"text-body-default",g=p__namespace.default.forwardRef(({variant:e="body-default",color:r="text-primary",as:t,className:o,children:a,weight:n,...i},l)=>{let s=A(e),y=r&&r==="inherit"?"inherit":r?`text-${r}`:"",u=p__namespace.default.useMemo(()=>{let H=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return R(H)},[e]);return p__namespace.default.createElement(t||u,{ref:l,className:`font-sans antialiased ${s} ${y} ${n?`!${C[n]}`:""} ${o??""}`,...i},a)});g.displayName="Text";var S=p__namespace.forwardRef(({className:e,variant:r="pink",iconName:t,children:o,...a},n)=>p__namespace.createElement("span",{ref:n,className:m("inline-flex items-center gap-2","rounded-lg px-2 py-1","text-sm font-medium",{pink:"bg-tertiary-5",orange:"bg-tertiary-15",green:"bg-tertiary-25"}[r],e),...a},t&&p__namespace.createElement(T,{size:16,name:t}),p__namespace.createElement(g,{variant:"body-xxs-medium"},o)));S.displayName="Badge";if (exports.default) module.exports = exports.default;exports.Badge=S;//# sourceMappingURL=Badge.cjs.map
|
|
2
|
+
//# sourceMappingURL=Badge.cjs.map
|
|
@@ -0,0 +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"]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { IconName } from '@deckai/icons';
|
|
3
|
+
|
|
4
|
+
type BadgeProps = {
|
|
5
|
+
variant?: "pink" | "orange" | "green";
|
|
6
|
+
iconName?: IconName;
|
|
7
|
+
} & React.HTMLAttributes<HTMLSpanElement>;
|
|
8
|
+
declare const Badge: React.ForwardRefExoticComponent<{
|
|
9
|
+
variant?: "pink" | "orange" | "green";
|
|
10
|
+
iconName?: IconName;
|
|
11
|
+
} & React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
|
|
12
|
+
|
|
13
|
+
export { Badge, type BadgeProps };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { IconName } from '@deckai/icons';
|
|
3
|
+
|
|
4
|
+
type BadgeProps = {
|
|
5
|
+
variant?: "pink" | "orange" | "green";
|
|
6
|
+
iconName?: IconName;
|
|
7
|
+
} & React.HTMLAttributes<HTMLSpanElement>;
|
|
8
|
+
declare const Badge: React.ForwardRefExoticComponent<{
|
|
9
|
+
variant?: "pink" | "orange" | "green";
|
|
10
|
+
iconName?: IconName;
|
|
11
|
+
} & React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
|
|
12
|
+
|
|
13
|
+
export { Badge, type BadgeProps };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import*as p from'react';import p__default from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {IconMap}from'@deckai/icons';function m(...e){return twMerge(clsx(e))}var h={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB"},L={sm:"@media (min-width: 640px)",md:"@media (min-width: 768px)",lg:"@media (min-width: 1024px)",xl:"@media (min-width: 1280px)","2xl":"@media (min-width: 1536px)"},b=e=>{if(!e)return {width:"24px",height:"24px"};let r=Array.isArray(e)?e:[e],t=typeof r[0]=="number"?r[0]:24,o={width:`${t}px`,height:`${t}px`},a=r.filter(n=>typeof n=="string"&&n.includes(":")).reduce((n,i)=>{let[l,s]=i.split(":");return n[L[l]]={width:`${s}px`,height:`${s}px`},n},{});return Object.keys(a).length>0&&(o["@media"]=a),o},T=p__default.forwardRef(({name:e,size:r=24,color:t="primary",title:o,className:a,style:n={},...i},l)=>{let s=IconMap[e],y=b(r);return p__default.createElement("div",{className:m("flex justify-center items-center",a),style:{...y,"--icon-stroke":h[t],...n}},p__default.createElement(s,{ref:l,"aria-hidden":!o,"aria-label":o,stroke:e.includes("filled")?void 0:h[t],...i}))});T.displayName="Icon";var E={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},R=e=>{let[r,t]=e.split("-");return r==="heading"?E[t]||"p":r==="label"?"label":"p"},C={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},A=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[o,a]=t.split(":");return `${o}:text-${a}`}return Array.isArray(e)?`lg:text-${t}`:`text-${t}`}).join(" "):"text-body-default",g=p__default.forwardRef(({variant:e="body-default",color:r="text-primary",as:t,className:o,children:a,weight:n,...i},l)=>{let s=A(e),y=r&&r==="inherit"?"inherit":r?`text-${r}`:"",u=p__default.useMemo(()=>{let H=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return R(H)},[e]);return p__default.createElement(t||u,{ref:l,className:`font-sans antialiased ${s} ${y} ${n?`!${C[n]}`:""} ${o??""}`,...i},a)});g.displayName="Text";var S=p.forwardRef(({className:e,variant:r="pink",iconName:t,children:o,...a},n)=>p.createElement("span",{ref:n,className:m("inline-flex items-center gap-2","rounded-lg px-2 py-1","text-sm font-medium",{pink:"bg-tertiary-5",orange:"bg-tertiary-15",green:"bg-tertiary-25"}[r],e),...a},t&&p.createElement(T,{size:16,name:t}),p.createElement(g,{variant:"body-xxs-medium"},o)));S.displayName="Badge";if (exports.default) module.exports = exports.default;export{S as Badge};//# sourceMappingURL=Badge.js.map
|
|
2
|
+
//# sourceMappingURL=Badge.js.map
|
|
@@ -0,0 +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"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';var l=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),icons=require('@deckai/icons');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var l__default=/*#__PURE__*/_interopDefault(l);function m(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var h={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB"},E={sm:"@media (min-width: 640px)",md:"@media (min-width: 768px)",lg:"@media (min-width: 1024px)",xl:"@media (min-width: 1280px)","2xl":"@media (min-width: 1536px)"},C=e=>{if(!e)return {width:"24px",height:"24px"};let r=Array.isArray(e)?e:[e],t=typeof r[0]=="number"?r[0]:24,n={width:`${t}px`,height:`${t}px`},a=r.filter(o=>typeof o=="string"&&o.includes(":")).reduce((o,s)=>{let[p,i]=s.split(":");return o[E[p]]={width:`${i}px`,height:`${i}px`},o},{});return Object.keys(a).length>0&&(n["@media"]=a),n},T=l__default.default.forwardRef(({name:e,size:r=24,color:t="primary",title:n,className:a,style:o={},...s},p)=>{let i=icons.IconMap[e],y=C(r);return l__default.default.createElement("div",{className:m("flex justify-center items-center",a),style:{...y,"--icon-stroke":h[t],...o}},l__default.default.createElement(i,{ref:p,"aria-hidden":!n,"aria-label":n,stroke:e.includes("filled")?void 0:h[t],...s}))});T.displayName="Icon";var A={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},R=e=>{let[r,t]=e.split("-");return r==="heading"?A[t]||"p":r==="label"?"label":"p"},k={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,a]=t.split(":");return `${n}:text-${a}`}return Array.isArray(e)?`lg:text-${t}`:`text-${t}`}).join(" "):"text-body-default",c=l__default.default.forwardRef(({variant:e="body-default",color:r="text-primary",as:t,className:n,children:a,weight:o,...s},p)=>{let i=S(e),y=r&&r==="inherit"?"inherit":r?`text-${r}`:"",b=l__default.default.useMemo(()=>{let x=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return R(x)},[e]);return l__default.default.createElement(t||b,{ref:p,className:`font-sans antialiased ${i} ${y} ${o?`!${k[o]}`:""} ${n??""}`,...s},a)});c.displayName="Text";var f=({children:e,color:r="text-primary",variant:t="body-default-semibold",href:n,className:a,...o})=>l__default.default.createElement(c,{variant:t,color:r},l__default.default.createElement("a",{href:n,className:m("hover:text-text-primary","transition-colors duration-200","outline-none focus-visible:underline",a),...o},e));var P=()=>l__default.default.createElement(c,{variant:"body-lg",color:"text-primary"},"/"),$=l__default.default.forwardRef(({items:e,className:r,SeparatorComponent:t=P,onHomeClick:n},a)=>{let o=()=>typeof t=="function"?l__default.default.createElement(t,null):l__default.default.cloneElement(t);return l__default.default.createElement("nav",{ref:a,"aria-label":"Breadcrumb",className:m("relative",r)},l__default.default.createElement("ol",{className:"flex flex-wrap items-center gap-2"},l__default.default.createElement(T,{onClick:n,name:"home",size:20,color:"secondary",className:"pb-0.5"}),o(),e.map((s,p)=>{let i=p===e.length-1;return i||!s.href?l__default.default.createElement(c,{variant:i?"body-default-semibold":"body-default",color:i?"text-primary":"text-secondary","aria-current":i?"page":void 0,key:s.label},s.label):l__default.default.createElement(l__default.default.Fragment,null,l__default.default.createElement(f,{href:s.href,key:s.label},s.label),o())})))});$.displayName="Breadcrumbs";if (exports.default) module.exports = exports.default;exports.Breadcrumbs=$;//# sourceMappingURL=Breadcrumbs.cjs.map
|
|
2
|
+
//# sourceMappingURL=Breadcrumbs.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../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","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 React from \"react\";\nimport { Text, TextProps } from \"./Text\";\nimport { cn } from \"../utils\";\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:text-text-primary\",\n \"transition-colors duration-200\",\n \"outline-none focus-visible:underline\",\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"]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
|
|
3
|
+
type BreadcrumbItem = {
|
|
4
|
+
label: string;
|
|
5
|
+
href?: string;
|
|
6
|
+
};
|
|
7
|
+
type BreadcrumbsProps = {
|
|
8
|
+
items: BreadcrumbItem[];
|
|
9
|
+
className?: string;
|
|
10
|
+
SeparatorComponent?: React__default.ReactElement;
|
|
11
|
+
onHomeClick: () => void;
|
|
12
|
+
};
|
|
13
|
+
declare const Breadcrumbs: React__default.ForwardRefExoticComponent<BreadcrumbsProps & React__default.RefAttributes<HTMLElement>>;
|
|
14
|
+
|
|
15
|
+
export { Breadcrumbs, type BreadcrumbsProps };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
|
|
3
|
+
type BreadcrumbItem = {
|
|
4
|
+
label: string;
|
|
5
|
+
href?: string;
|
|
6
|
+
};
|
|
7
|
+
type BreadcrumbsProps = {
|
|
8
|
+
items: BreadcrumbItem[];
|
|
9
|
+
className?: string;
|
|
10
|
+
SeparatorComponent?: React__default.ReactElement;
|
|
11
|
+
onHomeClick: () => void;
|
|
12
|
+
};
|
|
13
|
+
declare const Breadcrumbs: React__default.ForwardRefExoticComponent<BreadcrumbsProps & React__default.RefAttributes<HTMLElement>>;
|
|
14
|
+
|
|
15
|
+
export { Breadcrumbs, type BreadcrumbsProps };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import l from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {IconMap}from'@deckai/icons';function m(...e){return twMerge(clsx(e))}var h={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB"},E={sm:"@media (min-width: 640px)",md:"@media (min-width: 768px)",lg:"@media (min-width: 1024px)",xl:"@media (min-width: 1280px)","2xl":"@media (min-width: 1536px)"},C=e=>{if(!e)return {width:"24px",height:"24px"};let r=Array.isArray(e)?e:[e],t=typeof r[0]=="number"?r[0]:24,n={width:`${t}px`,height:`${t}px`},a=r.filter(o=>typeof o=="string"&&o.includes(":")).reduce((o,s)=>{let[p,i]=s.split(":");return o[E[p]]={width:`${i}px`,height:`${i}px`},o},{});return Object.keys(a).length>0&&(n["@media"]=a),n},T=l.forwardRef(({name:e,size:r=24,color:t="primary",title:n,className:a,style:o={},...s},p)=>{let i=IconMap[e],y=C(r);return l.createElement("div",{className:m("flex justify-center items-center",a),style:{...y,"--icon-stroke":h[t],...o}},l.createElement(i,{ref:p,"aria-hidden":!n,"aria-label":n,stroke:e.includes("filled")?void 0:h[t],...s}))});T.displayName="Icon";var A={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},R=e=>{let[r,t]=e.split("-");return r==="heading"?A[t]||"p":r==="label"?"label":"p"},k={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,a]=t.split(":");return `${n}:text-${a}`}return Array.isArray(e)?`lg:text-${t}`:`text-${t}`}).join(" "):"text-body-default",c=l.forwardRef(({variant:e="body-default",color:r="text-primary",as:t,className:n,children:a,weight:o,...s},p)=>{let i=S(e),y=r&&r==="inherit"?"inherit":r?`text-${r}`:"",b=l.useMemo(()=>{let x=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return R(x)},[e]);return l.createElement(t||b,{ref:p,className:`font-sans antialiased ${i} ${y} ${o?`!${k[o]}`:""} ${n??""}`,...s},a)});c.displayName="Text";var f=({children:e,color:r="text-primary",variant:t="body-default-semibold",href:n,className:a,...o})=>l.createElement(c,{variant:t,color:r},l.createElement("a",{href:n,className:m("hover:text-text-primary","transition-colors duration-200","outline-none focus-visible:underline",a),...o},e));var P=()=>l.createElement(c,{variant:"body-lg",color:"text-primary"},"/"),$=l.forwardRef(({items:e,className:r,SeparatorComponent:t=P,onHomeClick:n},a)=>{let o=()=>typeof t=="function"?l.createElement(t,null):l.cloneElement(t);return l.createElement("nav",{ref:a,"aria-label":"Breadcrumb",className:m("relative",r)},l.createElement("ol",{className:"flex flex-wrap items-center gap-2"},l.createElement(T,{onClick:n,name:"home",size:20,color:"secondary",className:"pb-0.5"}),o(),e.map((s,p)=>{let i=p===e.length-1;return i||!s.href?l.createElement(c,{variant:i?"body-default-semibold":"body-default",color:i?"text-primary":"text-secondary","aria-current":i?"page":void 0,key:s.label},s.label):l.createElement(l.Fragment,null,l.createElement(f,{href:s.href,key:s.label},s.label),o())})))});$.displayName="Breadcrumbs";if (exports.default) module.exports = exports.default;export{$ as Breadcrumbs};//# sourceMappingURL=Breadcrumbs.js.map
|
|
2
|
+
//# sourceMappingURL=Breadcrumbs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../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","Link","href","DefaultSeparator","Breadcrumbs","items","SeparatorComponent","onHomeClick","renderSeparator","item","index","isLastItem"],"mappings":"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","file":"Breadcrumbs.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 React from \"react\";\nimport { Text, TextProps } from \"./Text\";\nimport { cn } from \"../utils\";\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:text-text-primary\",\n \"transition-colors duration-200\",\n \"outline-none focus-visible:underline\",\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"]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
'use strict';var p=require('react');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 p__namespace=/*#__PURE__*/_interopNamespace(p);var h={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},b=e=>{let[r,t]=e.split("-");return r==="heading"?h[t]||"p":r==="label"?"label":"p"},u={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},f=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[a,o]=t.split(":");return `${a}:text-${o}`}return Array.isArray(e)?`lg:text-${t}`:`text-${t}`}).join(" "):"text-body-default",y=p__namespace.default.forwardRef(({variant:e="body-default",color:r="text-primary",as:t,className:a,children:o,weight:s,...i},l)=>{let T=f(e),d=r&&r==="inherit"?"inherit":r?`text-${r}`:"",g=p__namespace.default.useMemo(()=>{let m=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return b(m)},[e]);return p__namespace.default.createElement(t||g,{ref:l,className:`font-sans antialiased ${T} ${d} ${s?`!${u[s]}`:""} ${a??""}`,...i},o)});y.displayName="Text";var c="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var H={black:"bg-text-primary text-white",accent:"bg-primary-100 text-white",secondary:"bg-secondary-100 text-secondary"},M={black:"border border-text-primary text-text-primary",accent:"border border-primary-100 text-primary-100",secondary:"border border-text-secondary text-secondary"},L=p__namespace.forwardRef(({className:e,variant:r="filled",color:t="black",isLoading:a=!1,children:o,disabled:s,...i},l)=>p__namespace.createElement("button",{ref:l,className:`
|
|
2
|
+
px-7
|
|
3
|
+
py-2
|
|
4
|
+
inline-flex items-center justify-center
|
|
5
|
+
rounded-lg
|
|
6
|
+
transition-colors duration-200
|
|
7
|
+
${c}
|
|
8
|
+
disabled:opacity-50 disabled:pointer-events-none
|
|
9
|
+
hover:opacity-80 active:scale-95
|
|
10
|
+
truncate
|
|
11
|
+
${r==="filled"?H[t]:M[t]}
|
|
12
|
+
${e}
|
|
13
|
+
`,disabled:s||a,type:"button",...i},typeof o=="string"?p__namespace.createElement(y,{variant:"body-default-bold",color:"inherit"},o):o));L.displayName="Button";if (exports.default) module.exports = exports.default;exports.Button=L;//# sourceMappingURL=Button.cjs.map
|
|
14
|
+
//# sourceMappingURL=Button.cjs.map
|