@deckai/deck-ui 0.0.18 → 0.0.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/AboutCard.cjs +5 -5
- package/dist/components/AboutCard.cjs.map +1 -1
- package/dist/components/AboutCard.js +5 -5
- package/dist/components/AboutCard.js.map +1 -1
- package/dist/components/Accordion.cjs +6 -6
- package/dist/components/Accordion.cjs.map +1 -1
- package/dist/components/Accordion.js +6 -6
- package/dist/components/Accordion.js.map +1 -1
- package/dist/components/AddWorkCard.cjs +6 -6
- package/dist/components/AddWorkCard.cjs.map +1 -1
- package/dist/components/AddWorkCard.d.cts +2 -2
- package/dist/components/AddWorkCard.d.ts +2 -2
- package/dist/components/AddWorkCard.js +6 -6
- package/dist/components/AddWorkCard.js.map +1 -1
- package/dist/components/AutocompleteInput.cjs +5 -5
- package/dist/components/AutocompleteInput.cjs.map +1 -1
- package/dist/components/AutocompleteInput.d.cts +15 -16
- package/dist/components/AutocompleteInput.d.ts +15 -16
- package/dist/components/AutocompleteInput.js +5 -5
- package/dist/components/AutocompleteInput.js.map +1 -1
- package/dist/components/Avatar.cjs +1 -1
- package/dist/components/Avatar.cjs.map +1 -1
- package/dist/components/Avatar.d.cts +1 -2
- package/dist/components/Avatar.d.ts +1 -2
- package/dist/components/Avatar.js +1 -1
- package/dist/components/Avatar.js.map +1 -1
- package/dist/components/Badge.cjs +5 -5
- package/dist/components/Badge.cjs.map +1 -1
- package/dist/components/Badge.d.cts +1 -1
- package/dist/components/Badge.d.ts +1 -1
- package/dist/components/Badge.js +5 -5
- package/dist/components/Badge.js.map +1 -1
- package/dist/components/Breadcrumbs.cjs +6 -6
- package/dist/components/Breadcrumbs.cjs.map +1 -1
- package/dist/components/Breadcrumbs.js +6 -6
- package/dist/components/Breadcrumbs.js.map +1 -1
- package/dist/components/Button.cjs +6 -6
- package/dist/components/Button.cjs.map +1 -1
- package/dist/components/Button.js +6 -6
- package/dist/components/Button.js.map +1 -1
- package/dist/components/Carousel.cjs +1 -1
- package/dist/components/Carousel.cjs.map +1 -1
- package/dist/components/Carousel.js +1 -1
- package/dist/components/Carousel.js.map +1 -1
- package/dist/components/Collapsible.cjs +7 -7
- package/dist/components/Collapsible.cjs.map +1 -1
- package/dist/components/Collapsible.js +7 -7
- package/dist/components/Collapsible.js.map +1 -1
- package/dist/components/Combobox.cjs +5 -5
- package/dist/components/Combobox.cjs.map +1 -1
- package/dist/components/Combobox.js +5 -5
- package/dist/components/Combobox.js.map +1 -1
- package/dist/components/ContactItem.cjs +6 -6
- package/dist/components/ContactItem.cjs.map +1 -1
- package/dist/components/ContactItem.js +6 -6
- package/dist/components/ContactItem.js.map +1 -1
- package/dist/components/Dropdown.cjs +5 -5
- package/dist/components/Dropdown.cjs.map +1 -1
- package/dist/components/Dropdown.js +5 -5
- package/dist/components/Dropdown.js.map +1 -1
- package/dist/components/EditButton.cjs +7 -7
- package/dist/components/EditButton.cjs.map +1 -1
- package/dist/components/EditButton.js +7 -7
- package/dist/components/EditButton.js.map +1 -1
- package/dist/components/Icon.cjs +1 -1
- package/dist/components/Icon.cjs.map +1 -1
- package/dist/components/Icon.d.cts +2 -3
- package/dist/components/Icon.d.ts +2 -3
- package/dist/components/Icon.js +1 -1
- package/dist/components/Icon.js.map +1 -1
- package/dist/components/IconRenderer.cjs +1 -1
- package/dist/components/IconRenderer.cjs.map +1 -1
- package/dist/components/IconRenderer.d.cts +2 -1
- package/dist/components/IconRenderer.d.ts +2 -1
- package/dist/components/IconRenderer.js +1 -1
- package/dist/components/IconRenderer.js.map +1 -1
- package/dist/components/Input.cjs +6 -6
- package/dist/components/Input.cjs.map +1 -1
- package/dist/components/Input.d.cts +1 -0
- package/dist/components/Input.d.ts +1 -0
- package/dist/components/Input.js +6 -6
- package/dist/components/Input.js.map +1 -1
- package/dist/components/Link.cjs +4 -4
- package/dist/components/Link.cjs.map +1 -1
- package/dist/components/Link.d.cts +1 -0
- package/dist/components/Link.d.ts +1 -0
- package/dist/components/Link.js +4 -4
- package/dist/components/Link.js.map +1 -1
- package/dist/components/Modal.cjs +2 -0
- package/dist/components/Modal.cjs.map +1 -0
- package/dist/components/Modal.d.cts +31 -0
- package/dist/components/Modal.d.ts +31 -0
- package/dist/components/Modal.js +2 -0
- package/dist/components/Modal.js.map +1 -0
- package/dist/components/MultiSelectCombobox.cjs +5 -5
- package/dist/components/MultiSelectCombobox.cjs.map +1 -1
- package/dist/components/MultiSelectCombobox.js +5 -5
- package/dist/components/MultiSelectCombobox.js.map +1 -1
- package/dist/components/Navbar.cjs +6 -6
- package/dist/components/Navbar.cjs.map +1 -1
- package/dist/components/Navbar.d.cts +2 -1
- package/dist/components/Navbar.d.ts +2 -1
- package/dist/components/Navbar.js +6 -6
- package/dist/components/Navbar.js.map +1 -1
- package/dist/components/NavbarItem.cjs +7 -1
- package/dist/components/NavbarItem.cjs.map +1 -1
- package/dist/components/NavbarItem.d.cts +6 -2
- package/dist/components/NavbarItem.d.ts +6 -2
- package/dist/components/NavbarItem.js +7 -1
- package/dist/components/NavbarItem.js.map +1 -1
- package/dist/components/Option.cjs +6 -6
- package/dist/components/Option.cjs.map +1 -1
- package/dist/components/Option.d.cts +4 -0
- package/dist/components/Option.d.ts +4 -0
- package/dist/components/Option.js +6 -6
- package/dist/components/Option.js.map +1 -1
- package/dist/components/Pressable.cjs +1 -1
- package/dist/components/Pressable.cjs.map +1 -1
- package/dist/components/Pressable.js +1 -1
- package/dist/components/Pressable.js.map +1 -1
- package/dist/components/ProfileCard.cjs +6 -6
- package/dist/components/ProfileCard.cjs.map +1 -1
- package/dist/components/ProfileCard.js +6 -6
- package/dist/components/ProfileCard.js.map +1 -1
- package/dist/components/ProgressBar.cjs +1 -1
- package/dist/components/ProgressBar.cjs.map +1 -1
- package/dist/components/ProgressBar.js +1 -1
- package/dist/components/ProgressBar.js.map +1 -1
- package/dist/components/RadioGroup.cjs +5 -5
- package/dist/components/RadioGroup.cjs.map +1 -1
- package/dist/components/RadioGroup.js +5 -5
- package/dist/components/RadioGroup.js.map +1 -1
- package/dist/components/SegmentedTabs.cjs +5 -5
- package/dist/components/SegmentedTabs.cjs.map +1 -1
- package/dist/components/SegmentedTabs.js +5 -5
- package/dist/components/SegmentedTabs.js.map +1 -1
- package/dist/components/Sidebar.cjs +1 -1
- package/dist/components/Sidebar.cjs.map +1 -1
- package/dist/components/Sidebar.js +1 -1
- package/dist/components/Sidebar.js.map +1 -1
- package/dist/components/SlideButton.cjs +1 -1
- package/dist/components/SlideButton.cjs.map +1 -1
- package/dist/components/SlideButton.js +1 -1
- package/dist/components/SlideButton.js.map +1 -1
- package/dist/components/Slider.cjs +2 -0
- package/dist/components/Slider.cjs.map +1 -0
- package/dist/components/Slider.d.cts +7 -0
- package/dist/components/Slider.d.ts +7 -0
- package/dist/components/Slider.js +2 -0
- package/dist/components/Slider.js.map +1 -0
- package/dist/components/SocialCard.cjs +5 -5
- package/dist/components/SocialCard.cjs.map +1 -1
- package/dist/components/SocialCard.d.cts +2 -2
- package/dist/components/SocialCard.d.ts +2 -2
- package/dist/components/SocialCard.js +5 -5
- package/dist/components/SocialCard.js.map +1 -1
- package/dist/components/Spinner.cjs +1 -1
- package/dist/components/Spinner.cjs.map +1 -1
- package/dist/components/Spinner.js +1 -1
- package/dist/components/Spinner.js.map +1 -1
- package/dist/components/Switch.cjs +1 -1
- package/dist/components/Switch.cjs.map +1 -1
- package/dist/components/Switch.d.cts +1 -1
- package/dist/components/Switch.d.ts +1 -1
- package/dist/components/Switch.js +1 -1
- package/dist/components/Switch.js.map +1 -1
- package/dist/components/Tabs.cjs +3 -3
- package/dist/components/Tabs.cjs.map +1 -1
- package/dist/components/Tabs.js +3 -3
- package/dist/components/Tabs.js.map +1 -1
- package/dist/components/Tag.cjs +6 -6
- package/dist/components/Tag.cjs.map +1 -1
- package/dist/components/Tag.js +6 -6
- package/dist/components/Tag.js.map +1 -1
- package/dist/components/Text.cjs +2 -2
- package/dist/components/Text.cjs.map +1 -1
- package/dist/components/Text.d.cts +1 -1
- package/dist/components/Text.d.ts +1 -1
- package/dist/components/Text.js +2 -2
- package/dist/components/Text.js.map +1 -1
- package/dist/components/TextArea.cjs +4 -4
- package/dist/components/TextArea.cjs.map +1 -1
- package/dist/components/TextArea.js +4 -4
- package/dist/components/TextArea.js.map +1 -1
- package/dist/components/Toast.cjs +6 -6
- package/dist/components/Toast.cjs.map +1 -1
- package/dist/components/Toast.js +6 -6
- package/dist/components/Toast.js.map +1 -1
- package/dist/components/Tooltip.cjs +7 -1
- package/dist/components/Tooltip.cjs.map +1 -1
- package/dist/components/Tooltip.js +7 -1
- package/dist/components/Tooltip.js.map +1 -1
- package/dist/components/VideoPlayer.cjs +8 -0
- package/dist/components/VideoPlayer.cjs.map +1 -0
- package/dist/components/VideoPlayer.d.cts +36 -0
- package/dist/components/VideoPlayer.d.ts +36 -0
- package/dist/components/VideoPlayer.js +8 -0
- package/dist/components/VideoPlayer.js.map +1 -0
- package/dist/components/WorkCard.cjs +6 -6
- package/dist/components/WorkCard.cjs.map +1 -1
- package/dist/components/WorkCard.d.cts +2 -1
- package/dist/components/WorkCard.d.ts +2 -1
- package/dist/components/WorkCard.js +6 -6
- package/dist/components/WorkCard.js.map +1 -1
- package/dist/index.cjs +7 -7
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +14 -0
- package/dist/index.d.ts +14 -0
- package/dist/index.js +7 -7
- package/dist/index.js.map +1 -1
- package/dist/responsive-CjR1yA5N.d.cts +4 -0
- package/dist/responsive-CjR1yA5N.d.ts +4 -0
- package/dist/styles/styles.css +2 -2
- package/package.json +2 -1
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
|
+
import { R as ResponsiveSize } from '../responsive-CjR1yA5N.js';
|
|
2
3
|
|
|
3
4
|
type IconRendererProps = {
|
|
4
5
|
icon: string;
|
|
5
|
-
size?:
|
|
6
|
+
size?: ResponsiveSize | ResponsiveSize[];
|
|
6
7
|
className?: string;
|
|
7
8
|
};
|
|
8
9
|
declare const IconRenderer: {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import g from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';function w(...x){return twMerge(clsx(x))}var m={12:"h-[12px] w-[12px]",16:"h-[16px] w-[16px]",18:"h-[18px] w-[18px]",20:"h-[20px] w-[20px]",24:"h-[24px] w-[24px]",32:"h-[32px] w-[32px]",36:"h-[36px] w-[36px]",40:"h-[40px] w-[40px]",42:"h-[42px] w-[42px]",48:"h-[48px] w-[48px]",64:"h-[64px] w-[64px]",72:"h-[72px] w-[72px]"},c={sm:{12:"sm:h-[12px] sm:w-[12px]",16:"sm:h-[16px] sm:w-[16px]",18:"sm:h-[18px] sm:w-[18px]",20:"sm:h-[20px] sm:w-[20px]",24:"sm:h-[24px] sm:w-[24px]",32:"sm:h-[32px] sm:w-[32px]",36:"sm:h-[36px] sm:w-[36px]",40:"sm:h-[40px] sm:w-[40px]",42:"sm:h-[42px] sm:w-[42px]",48:"sm:h-[48px] sm:w-[48px]",64:"sm:h-[64px] sm:w-[64px]",72:"sm:h-[72px] sm:w-[72px]"},md:{12:"md:h-[12px] md:w-[12px]",16:"md:h-[16px] md:w-[16px]",18:"md:h-[18px] md:w-[18px]",20:"md:h-[20px] md:w-[20px]",24:"md:h-[24px] md:w-[24px]",32:"md:h-[32px] md:w-[32px]",36:"md:h-[36px] md:w-[36px]",40:"md:h-[40px] md:w-[40px]",42:"md:h-[42px] md:w-[42px]",48:"md:h-[48px] md:w-[48px]",64:"md:h-[64px] md:w-[64px]",72:"md:h-[72px] md:w-[72px]"},lg:{12:"lg:h-[12px] lg:w-[12px]",16:"lg:h-[16px] lg:w-[16px]",18:"lg:h-[18px] lg:w-[18px]",20:"lg:h-[20px] lg:w-[20px]",24:"lg:h-[24px] lg:w-[24px]",32:"lg:h-[32px] lg:w-[32px]",36:"lg:h-[36px] lg:w-[36px]",40:"lg:h-[40px] lg:w-[40px]",42:"lg:h-[42px] lg:w-[42px]",48:"lg:h-[48px] lg:w-[48px]",64:"lg:h-[64px] lg:w-[64px]",72:"lg:h-[72px] lg:w-[72px]"},xl:{12:"xl:h-[12px] xl:w-[12px]",16:"xl:h-[16px] xl:w-[16px]",18:"xl:h-[18px] xl:w-[18px]",20:"xl:h-[20px] xl:w-[20px]",24:"xl:h-[24px] xl:w-[24px]",32:"xl:h-[32px] xl:w-[32px]",36:"xl:h-[36px] xl:w-[36px]",40:"xl:h-[40px] xl:w-[40px]",42:"xl:h-[42px] xl:w-[42px]",48:"xl:h-[48px] xl:w-[48px]",64:"xl:h-[64px] xl:w-[64px]",72:"xl:h-[72px] xl:w-[72px]"},"2xl":{12:"2xl:h-[12px] 2xl:w-[12px]",16:"2xl:h-[16px] 2xl:w-[16px]",18:"2xl:h-[18px] 2xl:w-[18px]",20:"2xl:h-[20px] 2xl:w-[20px]",24:"2xl:h-[24px] 2xl:w-[24px]",32:"2xl:h-[32px] 2xl:w-[32px]",36:"2xl:h-[36px] 2xl:w-[36px]",40:"2xl:h-[40px] 2xl:w-[40px]",42:"2xl:h-[42px] 2xl:w-[42px]",48:"2xl:h-[48px] 2xl:w-[48px]",64:"2xl:h-[64px] 2xl:w-[64px]",72:"2xl:h-[72px] 2xl:w-[72px]"}},i=x=>String(x),a=(x,t=24)=>{let e=[],l={};if(x===undefined){let p=i(t);p?e.push(m[p]):(l.height=`${t}px`,l.width=`${t}px`);}if(typeof x=="number"){let p=i(x);p?e.push(m[p]):(l.height=`${x}px`,l.width=`${x}px`);}if(Array.isArray(x)){let p=i(t),r=[p&&m[p]||`h-[${t}px] w-[${t}px]`];x.forEach(s=>{if(typeof s=="string"){let[n,o]=s.split(":"),h=parseInt(o,10),d=i(h);e.push(d&&c[n]?.[d]||`${n}:h-[${h}px] ${n}:w-[${h}px]`);}}),e.push(...r);}if(typeof x=="string"){let[p,r]=x.split(":"),s=parseInt(r,10),n=i(s);e.push(n&&c[p]?.[n]||`${p}:h-[${s}px] ${p}:w-[${s}px]`);}return {responsiveSizeClasses:e.join(" "),responsiveSizeStyles:l}};var u=({icon:x,size:t=40,className:e})=>{let l=x.match(/<svg[^>]*>([\s\S]*?)<\/svg>/),{responsiveSizeClasses:p,responsiveSizeStyles:r}=a(t,40);if(!l)return g.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",...r},className:w(p,e)});let s=x.match(/<svg([^>]*)>/),o=(s?s[1]:"").match(/viewBox=["']([^"']*)["']/),h=o?o[1]:"0 0 40 40";return g.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",...r},className:w(p,e)},g.createElement("svg",{width:"100%",height:"100%",viewBox:h,preserveAspectRatio:"xMidYMid meet",dangerouslySetInnerHTML:{__html:l[1]}}))};u.displayName="IconRenderer";export{u as IconRenderer};//# sourceMappingURL=IconRenderer.js.map
|
|
2
2
|
//# sourceMappingURL=IconRenderer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/IconRenderer.tsx"],"names":["IconRenderer","icon","size","className","svgMatch","React","attributesMatch","viewBoxMatch","viewBox"],"mappings":"qBAQaA,IAAAA,CAAAA,CAAe,CAAC,CAC3B,IAAA,CAAAC,CACA,CAAA,IAAA,CAAAC,CAAO,CAAA,EAAA,CACP,UAAAC,CACF,CAAA,GAAyB,CAEvB,IAAMC,CAAWH,CAAAA,CAAAA,CAAK,MAAM,6BAA6B,CAAA,CAEzD,GAAI,CAACG,CACH,CAAA,OACEC,EAAA,aAAC,CAAA,KAAA,CAAA,CACC,KAAO,CAAA,CACL,KAAOH,CAAAA,CAAAA,CACP,OAAQA,CACR,CAAA,OAAA,CAAS,MACT,CAAA,UAAA,CAAY,QACZ,CAAA,cAAA,CAAgB,QAClB,CACA,CAAA,SAAA,CAAWC,CACb,CAAA,CAAA,CAKJ,IAAMG,CAAAA,CAAkBL,EAAK,KAAM,CAAA,cAAc,CAI3CM,CAAAA,CAAAA,CAAAA,CAHmBD,CAAkBA,CAAAA,CAAAA,CAAgB,CAAC,CAAI,CAAA,EAAA,EAG1B,MAAM,0BAA0B,CAAA,CAChEE,EAAUD,CAAeA,CAAAA,CAAAA,CAAa,CAAC,CAAA,CAAI,WAEjD,CAAA,OACEF,EAAA,aAAC,CAAA,KAAA,CAAA,CACC,KAAO,CAAA,CACL,KAAOH,CAAAA,CAAAA,CACP,OAAQA,CACR,CAAA,OAAA,CAAS,MACT,CAAA,UAAA,CAAY,QACZ,CAAA,cAAA,CAAgB,QAClB,CACA,CAAA,SAAA,CAAWC,CAEXE,CAAAA,CAAAA,CAAAA,CAAA,aAAC,CAAA,KAAA,CAAA,CACC,MAAM,MACN,CAAA,MAAA,CAAO,MACP,CAAA,OAAA,CAASG,CACT,CAAA,mBAAA,CAAoB,gBACpB,uBAAyB,CAAA,CAAE,MAAQJ,CAAAA,CAAAA,CAAS,CAAC,CAAE,EACjD,CACF,CAEJ,EAEAJ,CAAAA,CAAa,WAAc,CAAA,cAAA","file":"IconRenderer.js","sourcesContent":["import React from \"react\";\n\nexport type IconRendererProps = {\n icon: string;\n size?: number;\n className?: string;\n};\n\nexport const IconRenderer = ({\n icon,\n size = 40,\n className\n}: IconRendererProps) => {\n // Extract SVG content from the string (everything between <svg> and </svg>)\n const svgMatch = icon.match(/<svg[^>]*>([\\s\\S]*?)<\\/svg>/);\n\n if (!svgMatch) {\n return (\n <div\n style={{\n width: size,\n height: size,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\"\n }}\n className={className}\n />\n );\n }\n\n // Extract attributes from the SVG tag\n const attributesMatch = icon.match(/<svg([^>]*)>/);\n const attributesString = attributesMatch ? attributesMatch[1] : \"\";\n\n // Parse viewBox\n const viewBoxMatch = attributesString.match(/viewBox=[\"']([^\"']*)[\"']/);\n const viewBox = viewBoxMatch ? viewBoxMatch[1] : \"0 0 40 40\";\n\n return (\n <div\n style={{\n width: size,\n height: size,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\"\n }}\n className={className}\n >\n <svg\n width=\"100%\"\n height=\"100%\"\n viewBox={viewBox}\n preserveAspectRatio=\"xMidYMid meet\"\n dangerouslySetInnerHTML={{ __html: svgMatch[1] }}\n />\n </div>\n );\n};\n\nIconRenderer.displayName = \"IconRenderer\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/responsive.ts","../../src/components/IconRenderer.tsx"],"names":["cn","inputs","twMerge","clsx","BASE_SIZES","RESPONSIVE_SIZES","getSizeKey","size","getResponsiveSize","baseSize","classes","styles","key","baseKey","responsiveClasses","breakpoint","valueStr","value","valueKey","IconRenderer","icon","className","svgMatch","responsiveSizeClasses","responsiveSizeStyles","React","attributesMatch","viewBoxMatch","viewBox"],"mappings":"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","file":"IconRenderer.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","export type Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\nexport type ResponsiveSize = number | `${Breakpoint}:${number}`;\n\ntype SizeKey =\n | \"12\"\n | \"16\"\n | \"18\"\n | \"20\"\n | \"24\"\n | \"32\"\n | \"36\"\n | \"40\"\n | \"42\"\n | \"48\"\n | \"64\"\n | \"72\";\n\n// These constants help Tailwind identify the classes during compilation\nconst BASE_SIZES: Record<SizeKey, string> = {\n \"12\": \"h-[12px] w-[12px]\",\n \"16\": \"h-[16px] w-[16px]\",\n \"18\": \"h-[18px] w-[18px]\",\n \"20\": \"h-[20px] w-[20px]\",\n \"24\": \"h-[24px] w-[24px]\",\n \"32\": \"h-[32px] w-[32px]\",\n \"36\": \"h-[36px] w-[36px]\",\n \"40\": \"h-[40px] w-[40px]\",\n \"42\": \"h-[42px] w-[42px]\",\n \"48\": \"h-[48px] w-[48px]\",\n \"64\": \"h-[64px] w-[64px]\",\n \"72\": \"h-[72px] w-[72px]\"\n};\n\nconst RESPONSIVE_SIZES: Record<Breakpoint, Record<SizeKey, string>> = {\n sm: {\n \"12\": \"sm:h-[12px] sm:w-[12px]\",\n \"16\": \"sm:h-[16px] sm:w-[16px]\",\n \"18\": \"sm:h-[18px] sm:w-[18px]\",\n \"20\": \"sm:h-[20px] sm:w-[20px]\",\n \"24\": \"sm:h-[24px] sm:w-[24px]\",\n \"32\": \"sm:h-[32px] sm:w-[32px]\",\n \"36\": \"sm:h-[36px] sm:w-[36px]\",\n \"40\": \"sm:h-[40px] sm:w-[40px]\",\n \"42\": \"sm:h-[42px] sm:w-[42px]\",\n \"48\": \"sm:h-[48px] sm:w-[48px]\",\n \"64\": \"sm:h-[64px] sm:w-[64px]\",\n \"72\": \"sm:h-[72px] sm:w-[72px]\"\n },\n md: {\n \"12\": \"md:h-[12px] md:w-[12px]\",\n \"16\": \"md:h-[16px] md:w-[16px]\",\n \"18\": \"md:h-[18px] md:w-[18px]\",\n \"20\": \"md:h-[20px] md:w-[20px]\",\n \"24\": \"md:h-[24px] md:w-[24px]\",\n \"32\": \"md:h-[32px] md:w-[32px]\",\n \"36\": \"md:h-[36px] md:w-[36px]\",\n \"40\": \"md:h-[40px] md:w-[40px]\",\n \"42\": \"md:h-[42px] md:w-[42px]\",\n \"48\": \"md:h-[48px] md:w-[48px]\",\n \"64\": \"md:h-[64px] md:w-[64px]\",\n \"72\": \"md:h-[72px] md:w-[72px]\"\n },\n lg: {\n \"12\": \"lg:h-[12px] lg:w-[12px]\",\n \"16\": \"lg:h-[16px] lg:w-[16px]\",\n \"18\": \"lg:h-[18px] lg:w-[18px]\",\n \"20\": \"lg:h-[20px] lg:w-[20px]\",\n \"24\": \"lg:h-[24px] lg:w-[24px]\",\n \"32\": \"lg:h-[32px] lg:w-[32px]\",\n \"36\": \"lg:h-[36px] lg:w-[36px]\",\n \"40\": \"lg:h-[40px] lg:w-[40px]\",\n \"42\": \"lg:h-[42px] lg:w-[42px]\",\n \"48\": \"lg:h-[48px] lg:w-[48px]\",\n \"64\": \"lg:h-[64px] lg:w-[64px]\",\n \"72\": \"lg:h-[72px] lg:w-[72px]\"\n },\n xl: {\n \"12\": \"xl:h-[12px] xl:w-[12px]\",\n \"16\": \"xl:h-[16px] xl:w-[16px]\",\n \"18\": \"xl:h-[18px] xl:w-[18px]\",\n \"20\": \"xl:h-[20px] xl:w-[20px]\",\n \"24\": \"xl:h-[24px] xl:w-[24px]\",\n \"32\": \"xl:h-[32px] xl:w-[32px]\",\n \"36\": \"xl:h-[36px] xl:w-[36px]\",\n \"40\": \"xl:h-[40px] xl:w-[40px]\",\n \"42\": \"xl:h-[42px] xl:w-[42px]\",\n \"48\": \"xl:h-[48px] xl:w-[48px]\",\n \"64\": \"xl:h-[64px] xl:w-[64px]\",\n \"72\": \"xl:h-[72px] xl:w-[72px]\"\n },\n \"2xl\": {\n \"12\": \"2xl:h-[12px] 2xl:w-[12px]\",\n \"16\": \"2xl:h-[16px] 2xl:w-[16px]\",\n \"18\": \"2xl:h-[18px] 2xl:w-[18px]\",\n \"20\": \"2xl:h-[20px] 2xl:w-[20px]\",\n \"24\": \"2xl:h-[24px] 2xl:w-[24px]\",\n \"32\": \"2xl:h-[32px] 2xl:w-[32px]\",\n \"36\": \"2xl:h-[36px] 2xl:w-[36px]\",\n \"40\": \"2xl:h-[40px] 2xl:w-[40px]\",\n \"42\": \"2xl:h-[42px] 2xl:w-[42px]\",\n \"48\": \"2xl:h-[48px] 2xl:w-[48px]\",\n \"64\": \"2xl:h-[64px] 2xl:w-[64px]\",\n \"72\": \"2xl:h-[72px] 2xl:w-[72px]\"\n }\n};\n\nconst getSizeKey = (size: number): SizeKey | undefined => {\n return String(size) as SizeKey;\n};\n\nexport const getResponsiveSize = (\n size: ResponsiveSize | ResponsiveSize[] | undefined,\n baseSize: number = 24\n): {\n responsiveSizeClasses: string;\n responsiveSizeStyles: Record<string, string>;\n} => {\n const classes: string[] = [];\n const styles: Record<string, string> = {};\n\n // If no size provided, use baseSize\n if (size === undefined) {\n const key = getSizeKey(baseSize);\n if (key) {\n classes.push(BASE_SIZES[key]);\n } else {\n styles.height = `${baseSize}px`;\n styles.width = `${baseSize}px`;\n }\n }\n\n // If size is a number, use that directly\n if (typeof size === \"number\") {\n const key = getSizeKey(size);\n if (key) {\n classes.push(BASE_SIZES[key]);\n } else {\n styles.height = `${size}px`;\n styles.width = `${size}px`;\n }\n }\n\n // If array of responsive sizes, generate responsive classes\n if (Array.isArray(size)) {\n const baseKey = getSizeKey(baseSize);\n const responsiveClasses = [\n (baseKey && BASE_SIZES[baseKey]) || `h-[${baseSize}px] w-[${baseSize}px]`\n ];\n\n size.forEach((s) => {\n if (typeof s === \"string\") {\n const [breakpoint, valueStr] = s.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n const key = getSizeKey(value);\n classes.push(\n (key && RESPONSIVE_SIZES[breakpoint]?.[key]) ||\n `${breakpoint}:h-[${value}px] ${breakpoint}:w-[${value}px]`\n );\n }\n });\n\n classes.push(...responsiveClasses);\n }\n\n if (typeof size === \"string\") {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n const valueKey = getSizeKey(value);\n classes.push(\n (valueKey && RESPONSIVE_SIZES[breakpoint]?.[valueKey]) ||\n `${breakpoint}:h-[${value}px] ${breakpoint}:w-[${value}px]`\n );\n }\n\n return {\n responsiveSizeClasses: classes.join(\" \"),\n responsiveSizeStyles: styles\n };\n};\n","import React from \"react\";\nimport { cn } from \"../utils\";\nimport { getResponsiveSize, ResponsiveSize } from \"../utils/responsive\";\n\nexport type IconRendererProps = {\n icon: string;\n size?: ResponsiveSize | ResponsiveSize[];\n className?: string;\n};\n\nexport const IconRenderer = ({\n icon,\n size = 40,\n className\n}: IconRendererProps) => {\n // Extract SVG content from the string (everything between <svg> and </svg>)\n const svgMatch = icon.match(/<svg[^>]*>([\\s\\S]*?)<\\/svg>/);\n const { responsiveSizeClasses, responsiveSizeStyles } = getResponsiveSize(\n size,\n 40\n );\n\n if (!svgMatch) {\n return (\n <div\n style={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n ...responsiveSizeStyles\n }}\n className={cn(responsiveSizeClasses, className)}\n />\n );\n }\n\n // Extract attributes from the SVG tag\n const attributesMatch = icon.match(/<svg([^>]*)>/);\n const attributesString = attributesMatch ? attributesMatch[1] : \"\";\n\n // Parse viewBox\n const viewBoxMatch = attributesString.match(/viewBox=[\"']([^\"']*)[\"']/);\n const viewBox = viewBoxMatch ? viewBoxMatch[1] : \"0 0 40 40\";\n\n return (\n <div\n style={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n ...responsiveSizeStyles\n }}\n className={cn(responsiveSizeClasses, className)}\n >\n <svg\n width=\"100%\"\n height=\"100%\"\n viewBox={viewBox}\n preserveAspectRatio=\"xMidYMid meet\"\n dangerouslySetInnerHTML={{ __html: svgMatch[1] }}\n />\n </div>\n );\n};\n\nIconRenderer.displayName = \"IconRenderer\";\n"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
'use strict';var
|
|
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 h(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var v="ring-2 ring-primary-100";var T={12:"h-[12px] w-[12px]",16:"h-[16px] w-[16px]",18:"h-[18px] w-[18px]",20:"h-[20px] w-[20px]",24:"h-[24px] w-[24px]",32:"h-[32px] w-[32px]",36:"h-[36px] w-[36px]",40:"h-[40px] w-[40px]",42:"h-[42px] w-[42px]",48:"h-[48px] w-[48px]",64:"h-[64px] w-[64px]",72:"h-[72px] w-[72px]"},C={sm:{12:"sm:h-[12px] sm:w-[12px]",16:"sm:h-[16px] sm:w-[16px]",18:"sm:h-[18px] sm:w-[18px]",20:"sm:h-[20px] sm:w-[20px]",24:"sm:h-[24px] sm:w-[24px]",32:"sm:h-[32px] sm:w-[32px]",36:"sm:h-[36px] sm:w-[36px]",40:"sm:h-[40px] sm:w-[40px]",42:"sm:h-[42px] sm:w-[42px]",48:"sm:h-[48px] sm:w-[48px]",64:"sm:h-[64px] sm:w-[64px]",72:"sm:h-[72px] sm:w-[72px]"},md:{12:"md:h-[12px] md:w-[12px]",16:"md:h-[16px] md:w-[16px]",18:"md:h-[18px] md:w-[18px]",20:"md:h-[20px] md:w-[20px]",24:"md:h-[24px] md:w-[24px]",32:"md:h-[32px] md:w-[32px]",36:"md:h-[36px] md:w-[36px]",40:"md:h-[40px] md:w-[40px]",42:"md:h-[42px] md:w-[42px]",48:"md:h-[48px] md:w-[48px]",64:"md:h-[64px] md:w-[64px]",72:"md:h-[72px] md:w-[72px]"},lg:{12:"lg:h-[12px] lg:w-[12px]",16:"lg:h-[16px] lg:w-[16px]",18:"lg:h-[18px] lg:w-[18px]",20:"lg:h-[20px] lg:w-[20px]",24:"lg:h-[24px] lg:w-[24px]",32:"lg:h-[32px] lg:w-[32px]",36:"lg:h-[36px] lg:w-[36px]",40:"lg:h-[40px] lg:w-[40px]",42:"lg:h-[42px] lg:w-[42px]",48:"lg:h-[48px] lg:w-[48px]",64:"lg:h-[64px] lg:w-[64px]",72:"lg:h-[72px] lg:w-[72px]"},xl:{12:"xl:h-[12px] xl:w-[12px]",16:"xl:h-[16px] xl:w-[16px]",18:"xl:h-[18px] xl:w-[18px]",20:"xl:h-[20px] xl:w-[20px]",24:"xl:h-[24px] xl:w-[24px]",32:"xl:h-[32px] xl:w-[32px]",36:"xl:h-[36px] xl:w-[36px]",40:"xl:h-[40px] xl:w-[40px]",42:"xl:h-[42px] xl:w-[42px]",48:"xl:h-[48px] xl:w-[48px]",64:"xl:h-[64px] xl:w-[64px]",72:"xl:h-[72px] xl:w-[72px]"},"2xl":{12:"2xl:h-[12px] 2xl:w-[12px]",16:"2xl:h-[16px] 2xl:w-[16px]",18:"2xl:h-[18px] 2xl:w-[18px]",20:"2xl:h-[20px] 2xl:w-[20px]",24:"2xl:h-[24px] 2xl:w-[24px]",32:"2xl:h-[32px] 2xl:w-[32px]",36:"2xl:h-[36px] 2xl:w-[36px]",40:"2xl:h-[40px] 2xl:w-[40px]",42:"2xl:h-[42px] 2xl:w-[42px]",48:"2xl:h-[48px] 2xl:w-[48px]",64:"2xl:h-[64px] 2xl:w-[64px]",72:"2xl:h-[72px] 2xl:w-[72px]"}},g=e=>String(e),A=(e,n=24)=>{let t=[],r={};if(e===undefined){let s=g(n);s?t.push(T[s]):(r.height=`${n}px`,r.width=`${n}px`);}if(typeof e=="number"){let s=g(e);s?t.push(T[s]):(r.height=`${e}px`,r.width=`${e}px`);}if(Array.isArray(e)){let s=g(n),a=[s&&T[s]||`h-[${n}px] w-[${n}px]`];e.forEach(o=>{if(typeof o=="string"){let[l,m]=o.split(":"),x=parseInt(m,10),c=g(x);t.push(c&&C[l]?.[c]||`${l}:h-[${x}px] ${l}:w-[${x}px]`);}}),t.push(...a);}if(typeof e=="string"){let[s,a]=e.split(":"),o=parseInt(a,10),l=g(o);t.push(l&&C[s]?.[l]||`${s}:h-[${o}px] ${s}:w-[${o}px]`);}return {responsiveSizeClasses:t.join(" "),responsiveSizeStyles:r}};var k={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB",disabled:"#888888",danger:"#FF0000"},b=p__namespace.default.forwardRef(({name:e,size:n=24,color:t="primary",title:r,className:s,style:a={},...o},l)=>{let m=icons.IconMap[e],{responsiveSizeClasses:x,responsiveSizeStyles:c}=A(n,24);return p__namespace.default.createElement("div",{className:h("flex justify-center items-center",x,s),style:{"--icon-stroke":k[t],...c,...a}},p__namespace.default.createElement(m,{ref:l,"aria-hidden":!r,"aria-label":r,stroke:e.includes("filled")?undefined:k[t],...o}))});b.displayName="Icon";var W={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},_=e=>{let[n,t]=e.split("-");return n==="heading"?W[t]||"p":n==="label"?"label":"p"},q={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},Q=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[r,s]=t.split(":");return `${r}:text-${s}`}return `text-${t}`}).join(" "):"text-body-default",d=p__namespace.default.forwardRef(({variant:e="body-default",color:n="primary",as:t,className:r,children:s,weight:a,...o},l)=>{let m=Q(e),x=n==="inherit"?"text-inherit":`text-${n}`,c=p__namespace.default.useMemo(()=>{let y=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return _(y)},[e]);return p__namespace.default.createElement(t||c,{ref:l,className:`
|
|
2
2
|
font-sans antialiased
|
|
3
|
-
${
|
|
4
|
-
${
|
|
5
|
-
${
|
|
6
|
-
${
|
|
7
|
-
`,...
|
|
3
|
+
${m}
|
|
4
|
+
${x}
|
|
5
|
+
${a&&`!${q[a]}`}
|
|
6
|
+
${r}
|
|
7
|
+
`,...o},s)});d.displayName="Text";var ge=p__namespace.forwardRef(({className:e,end:n,iconName:t,color:r,size:s,title:a,label:o,labelClassName:l,id:m,children:x,forceShowFocusRing:c,error:i,errorMessage:y,helperText:H,showCharacterCount:I,maxLength:u,value:f,defaultValue:N,onChange:M,disabled:R,...V},P)=>{let[L,$]=p__namespace.useState(f?.toString()||N?.toString()||"");p__namespace.useEffect(()=>{f!==undefined&&$(f.toString());},[f]);let K=p__namespace.useCallback(S=>{let O=S.target.value;$(O),M?.(S);},[M]),B=L.length,j=I||!!u;return p__namespace.createElement("div",{className:"gap-1 flex flex-col"},o&&p__namespace.createElement(d,{variant:"label-default",htmlFor:m,as:"label",color:i?"danger":"primary",className:h(l)},o),p__namespace.createElement("div",{className:h("relative flex flex-col gap-2 w-full rounded-lg border bg-background-0 px-3 md:py-3 py-2 text-secondary transition-colors duration-150",!i&&!c&&"border-secondary-50",i&&"border-tertiary-10",R&&"cursor-not-allowed opacity-50","focus-within:ring-2 focus-within:ring-primary-100",c&&v)},p__namespace.createElement("div",{className:"flex relative"},p__namespace.createElement("input",{ref:P,id:m,className:h("font-sans text-sm flex w-full file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-secondary text-primary disabled:cursor-not-allowed focus:outline-none rounded-lg",n&&"pr-10",e),value:L,maxLength:u,onChange:K,"aria-invalid":i,disabled:R,...V}),(n||t)&&p__namespace.createElement("div",{className:"absolute inset-y-0 right-0 flex items-center"},t?p__namespace.createElement(b,{name:t,color:i?"danger":"secondary",size:s,title:a}):n)),x),p__namespace.createElement("div",{className:"flex justify-between gap-2"},i&&y||H?p__namespace.createElement(d,{variant:"body-xxs",color:i?"danger":"secondary",className:"mt-1"},i?y:H):null,j&&p__namespace.createElement(d,{variant:"body-xxs",color:i?"danger":"secondary",className:"text-right mt-1"},p__namespace.createElement(d,{variant:"body-xxs",as:"span",color:"primary-100",className:"font-bold"},B),u&&`/${u}`," characters")))});exports.Input=ge;//# sourceMappingURL=Input.cjs.map
|
|
8
8
|
//# sourceMappingURL=Input.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/tailwind.ts","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../src/components/Input.tsx"],"names":["cn","inputs","twMerge","clsx","focusRingStylesCoerced","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","children","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","Input","t","end","iconName","label","labelClassName","id","forceShowFocusRing","error","errorMessage","helperText","showCharacterCount","maxLength","defaultValue","onChange","currentValue","setCurrentValue","handleChange","e","newValue","characterCount","showCount"],"mappings":"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","file":"Input.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 { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:border-2 focus-visible:border-primary-100\";\n\nexport const focusRingStylesCoerced = \"border-2 border-primary-100\";\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: ResponsiveSize | ResponsiveSize[];\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\",\n disabled: \"#888888\",\n danger: \"#FF0000\"\n};\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n \"2xl\": \"1536px\"\n};\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n const mediaQueries: Record<string, string> = {};\n let baseSize: string | undefined;\n\n // Process each size\n sizeArray.forEach((size) => {\n if (typeof size === \"number\") {\n baseSize = `${size}px`;\n } else {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n mediaQueries[`@media (min-width: ${BREAKPOINT_MAP[breakpoint]})`] =\n `${value}px`;\n }\n });\n\n // Create the style object with the correct structure\n return {\n width: baseSize || \"24px\",\n height: baseSize || \"24px\",\n ...Object.entries(mediaQueries).reduce(\n (acc, [query, size]) => ({\n ...acc,\n [query]: {\n width: size,\n height: size\n }\n }),\n {}\n )\n };\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const sizeStyles = processSizes(size);\n\n return (\n <div\n className={cn(\"flex justify-center items-center\", className)}\n style={{\n ...sizeStyles,\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import React from \"react\";\nimport { Typography } from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n | \"primary\"\n | \"secondary\"\n | \"white\"\n | \"primary-blue\"\n | \"disabled\"\n | \"danger\"\n | \"inherit\"\n | \"primary-100\";\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: TextColor;\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses = color === \"inherit\" ? \"text-inherit\" : `text-${color}`;\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`\n font-sans antialiased\n ${typographyClasses}\n ${colorClasses}\n ${weight && `!${fontWeight[weight]}`}\n ${className}\n `}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import * as React from \"react\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles, focusRingStylesCoerced } from \"../utils/tailwind\";\nimport { IconName } from \"@deckai/icons\";\nimport { Icon, IconProps } from \"./Icon\";\nimport { Text } from \"./Text\";\n\nexport type InputProps = {\n className?: string;\n end?: React.ReactNode;\n /** renders an icon in the end slot */\n iconName?: IconName;\n /** Label text for the input */\n label?: string;\n /** Additional classes for the label */\n labelClassName?: string;\n /** Forces the focus ring to show regardless of focus state */\n forceShowFocusRing?: boolean;\n /** Error state for the input */\n error?: boolean;\n /** Error message to display below the input */\n errorMessage?: string;\n /** Helper text displayed below the input */\n helperText?: string;\n /** Character count display */\n showCharacterCount?: boolean;\n /** Maximum number of characters */\n maxLength?: number;\n} & React.InputHTMLAttributes<HTMLInputElement> &\n Pick<IconProps, \"color\" | \"size\" | \"title\">;\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className,\n end,\n iconName,\n color,\n size,\n title,\n label,\n labelClassName,\n id,\n children,\n forceShowFocusRing,\n error,\n errorMessage,\n helperText,\n showCharacterCount,\n maxLength,\n value,\n defaultValue,\n onChange,\n ...props\n },\n ref\n ) => {\n const [currentValue, setCurrentValue] = React.useState(\n value?.toString() || defaultValue?.toString() || \"\"\n );\n\n // Update internal value when prop changes\n React.useEffect(() => {\n if (value !== undefined) {\n setCurrentValue(value.toString());\n }\n }, [value]);\n\n const handleChange = React.useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n setCurrentValue(newValue);\n onChange?.(e);\n },\n [onChange]\n );\n\n const characterCount = currentValue.length;\n const showCount = showCharacterCount || !!maxLength;\n\n return (\n <div className=\"gap-1 flex flex-col\">\n {label && (\n <Text\n variant=\"label-default\"\n htmlFor={id}\n as=\"label\"\n color={error ? \"danger\" : \"primary\"}\n className={cn(labelClassName)}\n >\n {label}\n </Text>\n )}\n <div\n className={cn(\n \"relative flex flex-col gap-2 w-full rounded-lg border bg-background-0 px-3 md:py-3 py-2 text-secondary transition-colors duration-150\",\n {\n \"border-secondary-50\": !error && !forceShowFocusRing,\n \"border-tertiary-10\": error,\n [focusRingStylesCoerced]: forceShowFocusRing\n }\n )}\n >\n <div className=\"flex relative\">\n <input\n ref={ref}\n id={id}\n className={cn(\n \"font-sans text-sm flex w-full file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-secondary text-primary disabled:cursor-not-allowed focus:outline-none rounded-lg\",\n end && \"pr-10\",\n className\n )}\n value={currentValue}\n maxLength={maxLength}\n onChange={handleChange}\n aria-invalid={error}\n {...props}\n />\n {(end || iconName) && (\n <div className=\"absolute inset-y-0 right-0 flex items-center\">\n {iconName ? (\n <Icon\n name={iconName}\n color={error ? \"danger\" : \"secondary\"}\n size={size}\n title={title}\n />\n ) : (\n end\n )}\n </div>\n )}\n </div>\n {children}\n </div>\n <div className=\"flex justify-between gap-2\">\n {(error && errorMessage) || helperText ? (\n <Text\n variant=\"body-xxs\"\n color={error ? \"danger\" : \"secondary\"}\n className=\"mt-1\"\n >\n {error ? errorMessage : helperText}\n </Text>\n ) : null}\n {showCount && (\n <Text\n variant=\"body-xxs\"\n color={error ? \"danger\" : \"secondary\"}\n className=\"text-right mt-1\"\n >\n <Text\n variant=\"body-xxs\"\n as=\"span\"\n color=\"primary-100\"\n className=\"font-bold\"\n >\n {characterCount}\n </Text>\n {maxLength && `/${maxLength}`} characters\n </Text>\n )}\n </div>\n </div>\n );\n }\n);\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/tailwind.ts","../../src/utils/responsive.ts","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../src/components/Input.tsx"],"names":["cn","inputs","twMerge","clsx","focusRingStylesCoerced","BASE_SIZES","RESPONSIVE_SIZES","getSizeKey","size","getResponsiveSize","baseSize","classes","styles","key","baseKey","responsiveClasses","s","breakpoint","valueStr","value","valueKey","COLOR_MAP","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","responsiveSizeClasses","responsiveSizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","children","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","Input","p","end","iconName","label","labelClassName","id","forceShowFocusRing","error","errorMessage","helperText","showCharacterCount","maxLength","defaultValue","onChange","disabled","currentValue","setCurrentValue","handleChange","e","newValue","characterCount","showCount"],"mappings":"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","file":"Input.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 { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const sizes = [\"24\", \"42\", \"48\", \"64\", \"72\"]; // Add all the sizes you need\n\n const safelist: (string | { pattern: RegExp; variants: string[] })[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n // Generate size classes with responsive variants\n const sizeClasses = sizes.flatMap((size) => [\n `h-[${size}px]`,\n `w-[${size}px]`,\n ...breakpoints.flatMap((bp) => [\n `${bp}:h-[${size}px]`,\n `${bp}:w-[${size}px]`\n ])\n ]);\n\n return [...typographyClasses, ...responsiveTypographyClasses, ...sizeClasses];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100\";\nexport const focusRingWithinStyles =\n \"focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-100\";\nexport const focusRingStylesCoerced = \"ring-2 ring-primary-100\";\n","export type Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\nexport type ResponsiveSize = number | `${Breakpoint}:${number}`;\n\ntype SizeKey =\n | \"12\"\n | \"16\"\n | \"18\"\n | \"20\"\n | \"24\"\n | \"32\"\n | \"36\"\n | \"40\"\n | \"42\"\n | \"48\"\n | \"64\"\n | \"72\";\n\n// These constants help Tailwind identify the classes during compilation\nconst BASE_SIZES: Record<SizeKey, string> = {\n \"12\": \"h-[12px] w-[12px]\",\n \"16\": \"h-[16px] w-[16px]\",\n \"18\": \"h-[18px] w-[18px]\",\n \"20\": \"h-[20px] w-[20px]\",\n \"24\": \"h-[24px] w-[24px]\",\n \"32\": \"h-[32px] w-[32px]\",\n \"36\": \"h-[36px] w-[36px]\",\n \"40\": \"h-[40px] w-[40px]\",\n \"42\": \"h-[42px] w-[42px]\",\n \"48\": \"h-[48px] w-[48px]\",\n \"64\": \"h-[64px] w-[64px]\",\n \"72\": \"h-[72px] w-[72px]\"\n};\n\nconst RESPONSIVE_SIZES: Record<Breakpoint, Record<SizeKey, string>> = {\n sm: {\n \"12\": \"sm:h-[12px] sm:w-[12px]\",\n \"16\": \"sm:h-[16px] sm:w-[16px]\",\n \"18\": \"sm:h-[18px] sm:w-[18px]\",\n \"20\": \"sm:h-[20px] sm:w-[20px]\",\n \"24\": \"sm:h-[24px] sm:w-[24px]\",\n \"32\": \"sm:h-[32px] sm:w-[32px]\",\n \"36\": \"sm:h-[36px] sm:w-[36px]\",\n \"40\": \"sm:h-[40px] sm:w-[40px]\",\n \"42\": \"sm:h-[42px] sm:w-[42px]\",\n \"48\": \"sm:h-[48px] sm:w-[48px]\",\n \"64\": \"sm:h-[64px] sm:w-[64px]\",\n \"72\": \"sm:h-[72px] sm:w-[72px]\"\n },\n md: {\n \"12\": \"md:h-[12px] md:w-[12px]\",\n \"16\": \"md:h-[16px] md:w-[16px]\",\n \"18\": \"md:h-[18px] md:w-[18px]\",\n \"20\": \"md:h-[20px] md:w-[20px]\",\n \"24\": \"md:h-[24px] md:w-[24px]\",\n \"32\": \"md:h-[32px] md:w-[32px]\",\n \"36\": \"md:h-[36px] md:w-[36px]\",\n \"40\": \"md:h-[40px] md:w-[40px]\",\n \"42\": \"md:h-[42px] md:w-[42px]\",\n \"48\": \"md:h-[48px] md:w-[48px]\",\n \"64\": \"md:h-[64px] md:w-[64px]\",\n \"72\": \"md:h-[72px] md:w-[72px]\"\n },\n lg: {\n \"12\": \"lg:h-[12px] lg:w-[12px]\",\n \"16\": \"lg:h-[16px] lg:w-[16px]\",\n \"18\": \"lg:h-[18px] lg:w-[18px]\",\n \"20\": \"lg:h-[20px] lg:w-[20px]\",\n \"24\": \"lg:h-[24px] lg:w-[24px]\",\n \"32\": \"lg:h-[32px] lg:w-[32px]\",\n \"36\": \"lg:h-[36px] lg:w-[36px]\",\n \"40\": \"lg:h-[40px] lg:w-[40px]\",\n \"42\": \"lg:h-[42px] lg:w-[42px]\",\n \"48\": \"lg:h-[48px] lg:w-[48px]\",\n \"64\": \"lg:h-[64px] lg:w-[64px]\",\n \"72\": \"lg:h-[72px] lg:w-[72px]\"\n },\n xl: {\n \"12\": \"xl:h-[12px] xl:w-[12px]\",\n \"16\": \"xl:h-[16px] xl:w-[16px]\",\n \"18\": \"xl:h-[18px] xl:w-[18px]\",\n \"20\": \"xl:h-[20px] xl:w-[20px]\",\n \"24\": \"xl:h-[24px] xl:w-[24px]\",\n \"32\": \"xl:h-[32px] xl:w-[32px]\",\n \"36\": \"xl:h-[36px] xl:w-[36px]\",\n \"40\": \"xl:h-[40px] xl:w-[40px]\",\n \"42\": \"xl:h-[42px] xl:w-[42px]\",\n \"48\": \"xl:h-[48px] xl:w-[48px]\",\n \"64\": \"xl:h-[64px] xl:w-[64px]\",\n \"72\": \"xl:h-[72px] xl:w-[72px]\"\n },\n \"2xl\": {\n \"12\": \"2xl:h-[12px] 2xl:w-[12px]\",\n \"16\": \"2xl:h-[16px] 2xl:w-[16px]\",\n \"18\": \"2xl:h-[18px] 2xl:w-[18px]\",\n \"20\": \"2xl:h-[20px] 2xl:w-[20px]\",\n \"24\": \"2xl:h-[24px] 2xl:w-[24px]\",\n \"32\": \"2xl:h-[32px] 2xl:w-[32px]\",\n \"36\": \"2xl:h-[36px] 2xl:w-[36px]\",\n \"40\": \"2xl:h-[40px] 2xl:w-[40px]\",\n \"42\": \"2xl:h-[42px] 2xl:w-[42px]\",\n \"48\": \"2xl:h-[48px] 2xl:w-[48px]\",\n \"64\": \"2xl:h-[64px] 2xl:w-[64px]\",\n \"72\": \"2xl:h-[72px] 2xl:w-[72px]\"\n }\n};\n\nconst getSizeKey = (size: number): SizeKey | undefined => {\n return String(size) as SizeKey;\n};\n\nexport const getResponsiveSize = (\n size: ResponsiveSize | ResponsiveSize[] | undefined,\n baseSize: number = 24\n): {\n responsiveSizeClasses: string;\n responsiveSizeStyles: Record<string, string>;\n} => {\n const classes: string[] = [];\n const styles: Record<string, string> = {};\n\n // If no size provided, use baseSize\n if (size === undefined) {\n const key = getSizeKey(baseSize);\n if (key) {\n classes.push(BASE_SIZES[key]);\n } else {\n styles.height = `${baseSize}px`;\n styles.width = `${baseSize}px`;\n }\n }\n\n // If size is a number, use that directly\n if (typeof size === \"number\") {\n const key = getSizeKey(size);\n if (key) {\n classes.push(BASE_SIZES[key]);\n } else {\n styles.height = `${size}px`;\n styles.width = `${size}px`;\n }\n }\n\n // If array of responsive sizes, generate responsive classes\n if (Array.isArray(size)) {\n const baseKey = getSizeKey(baseSize);\n const responsiveClasses = [\n (baseKey && BASE_SIZES[baseKey]) || `h-[${baseSize}px] w-[${baseSize}px]`\n ];\n\n size.forEach((s) => {\n if (typeof s === \"string\") {\n const [breakpoint, valueStr] = s.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n const key = getSizeKey(value);\n classes.push(\n (key && RESPONSIVE_SIZES[breakpoint]?.[key]) ||\n `${breakpoint}:h-[${value}px] ${breakpoint}:w-[${value}px]`\n );\n }\n });\n\n classes.push(...responsiveClasses);\n }\n\n if (typeof size === \"string\") {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n const valueKey = getSizeKey(value);\n classes.push(\n (valueKey && RESPONSIVE_SIZES[breakpoint]?.[valueKey]) ||\n `${breakpoint}:h-[${value}px] ${breakpoint}:w-[${value}px]`\n );\n }\n\n return {\n responsiveSizeClasses: classes.join(\" \"),\n responsiveSizeStyles: styles\n };\n};\n","import { IconMap, IconName } from \"@deckai/icons\";\nimport React, { SVGProps } from \"react\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\nimport { ResponsiveSize, getResponsiveSize } from \"../utils/responsive\";\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: ResponsiveSize | ResponsiveSize[];\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\",\n disabled: \"#888888\",\n danger: \"#FF0000\"\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const { responsiveSizeClasses, responsiveSizeStyles } = getResponsiveSize(\n size,\n 24\n );\n\n return (\n <div\n className={cn(\n \"flex justify-center items-center\",\n responsiveSizeClasses,\n className\n )}\n style={{\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...responsiveSizeStyles,\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import React from \"react\";\nimport { Typography } from \"../types/tailwind\";\nimport { Breakpoint } from \"../utils/responsive\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n | \"primary\"\n | \"secondary\"\n | \"white\"\n | \"primary-blue\"\n | \"disabled\"\n | \"danger\"\n | \"inherit\"\n | \"primary-100\";\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: TextColor;\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses = color === \"inherit\" ? \"text-inherit\" : `text-${color}`;\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`\n font-sans antialiased\n ${typographyClasses}\n ${colorClasses}\n ${weight && `!${fontWeight[weight]}`}\n ${className}\n `}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import * as React from \"react\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles, focusRingStylesCoerced } from \"../utils/tailwind\";\nimport { IconName } from \"@deckai/icons\";\nimport { Icon, IconProps } from \"./Icon\";\nimport { Text } from \"./Text\";\n\nexport type InputProps = {\n className?: string;\n end?: React.ReactNode;\n /** renders an icon in the end slot */\n iconName?: IconName;\n /** Label text for the input */\n label?: string;\n /** Additional classes for the label */\n labelClassName?: string;\n /** Forces the focus ring to show regardless of focus state */\n forceShowFocusRing?: boolean;\n /** Error state for the input */\n error?: boolean;\n /** Error message to display below the input */\n errorMessage?: string;\n /** Helper text displayed below the input */\n helperText?: string;\n /** Character count display */\n showCharacterCount?: boolean;\n /** Maximum number of characters */\n maxLength?: number;\n} & React.InputHTMLAttributes<HTMLInputElement> &\n Pick<IconProps, \"color\" | \"size\" | \"title\">;\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className,\n end,\n iconName,\n color,\n size,\n title,\n label,\n labelClassName,\n id,\n children,\n forceShowFocusRing,\n error,\n errorMessage,\n helperText,\n showCharacterCount,\n maxLength,\n value,\n defaultValue,\n onChange,\n disabled,\n ...props\n },\n ref\n ) => {\n const [currentValue, setCurrentValue] = React.useState(\n value?.toString() || defaultValue?.toString() || \"\"\n );\n\n // Update internal value when prop changes\n React.useEffect(() => {\n if (value !== undefined) {\n setCurrentValue(value.toString());\n }\n }, [value]);\n\n const handleChange = React.useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n setCurrentValue(newValue);\n onChange?.(e);\n },\n [onChange]\n );\n\n const characterCount = currentValue.length;\n const showCount = showCharacterCount || !!maxLength;\n\n return (\n <div className=\"gap-1 flex flex-col\">\n {label && (\n <Text\n variant=\"label-default\"\n htmlFor={id}\n as=\"label\"\n color={error ? \"danger\" : \"primary\"}\n className={cn(labelClassName)}\n >\n {label}\n </Text>\n )}\n <div\n className={cn(\n \"relative flex flex-col gap-2 w-full rounded-lg border bg-background-0 px-3 md:py-3 py-2 text-secondary transition-colors duration-150\",\n !error && !forceShowFocusRing && \"border-secondary-50\",\n error && \"border-tertiary-10\",\n disabled && \"cursor-not-allowed opacity-50\",\n \"focus-within:ring-2 focus-within:ring-primary-100\",\n forceShowFocusRing && focusRingStylesCoerced\n )}\n >\n <div className=\"flex relative\">\n <input\n ref={ref}\n id={id}\n className={cn(\n \"font-sans text-sm flex w-full file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-secondary text-primary disabled:cursor-not-allowed focus:outline-none rounded-lg\",\n end && \"pr-10\",\n className\n )}\n value={currentValue}\n maxLength={maxLength}\n onChange={handleChange}\n aria-invalid={error}\n disabled={disabled}\n {...props}\n />\n {(end || iconName) && (\n <div className=\"absolute inset-y-0 right-0 flex items-center\">\n {iconName ? (\n <Icon\n name={iconName}\n color={error ? \"danger\" : \"secondary\"}\n size={size}\n title={title}\n />\n ) : (\n end\n )}\n </div>\n )}\n </div>\n {children}\n </div>\n <div className=\"flex justify-between gap-2\">\n {(error && errorMessage) || helperText ? (\n <Text\n variant=\"body-xxs\"\n color={error ? \"danger\" : \"secondary\"}\n className=\"mt-1\"\n >\n {error ? errorMessage : helperText}\n </Text>\n ) : null}\n {showCount && (\n <Text\n variant=\"body-xxs\"\n color={error ? \"danger\" : \"secondary\"}\n className=\"text-right mt-1\"\n >\n <Text\n variant=\"body-xxs\"\n as=\"span\"\n color=\"primary-100\"\n className=\"font-bold\"\n >\n {characterCount}\n </Text>\n {maxLength && `/${maxLength}`} characters\n </Text>\n )}\n </div>\n </div>\n );\n }\n);\n"]}
|
package/dist/components/Input.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import*as
|
|
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 h(...e){return twMerge(clsx(e))}var v="ring-2 ring-primary-100";var T={12:"h-[12px] w-[12px]",16:"h-[16px] w-[16px]",18:"h-[18px] w-[18px]",20:"h-[20px] w-[20px]",24:"h-[24px] w-[24px]",32:"h-[32px] w-[32px]",36:"h-[36px] w-[36px]",40:"h-[40px] w-[40px]",42:"h-[42px] w-[42px]",48:"h-[48px] w-[48px]",64:"h-[64px] w-[64px]",72:"h-[72px] w-[72px]"},C={sm:{12:"sm:h-[12px] sm:w-[12px]",16:"sm:h-[16px] sm:w-[16px]",18:"sm:h-[18px] sm:w-[18px]",20:"sm:h-[20px] sm:w-[20px]",24:"sm:h-[24px] sm:w-[24px]",32:"sm:h-[32px] sm:w-[32px]",36:"sm:h-[36px] sm:w-[36px]",40:"sm:h-[40px] sm:w-[40px]",42:"sm:h-[42px] sm:w-[42px]",48:"sm:h-[48px] sm:w-[48px]",64:"sm:h-[64px] sm:w-[64px]",72:"sm:h-[72px] sm:w-[72px]"},md:{12:"md:h-[12px] md:w-[12px]",16:"md:h-[16px] md:w-[16px]",18:"md:h-[18px] md:w-[18px]",20:"md:h-[20px] md:w-[20px]",24:"md:h-[24px] md:w-[24px]",32:"md:h-[32px] md:w-[32px]",36:"md:h-[36px] md:w-[36px]",40:"md:h-[40px] md:w-[40px]",42:"md:h-[42px] md:w-[42px]",48:"md:h-[48px] md:w-[48px]",64:"md:h-[64px] md:w-[64px]",72:"md:h-[72px] md:w-[72px]"},lg:{12:"lg:h-[12px] lg:w-[12px]",16:"lg:h-[16px] lg:w-[16px]",18:"lg:h-[18px] lg:w-[18px]",20:"lg:h-[20px] lg:w-[20px]",24:"lg:h-[24px] lg:w-[24px]",32:"lg:h-[32px] lg:w-[32px]",36:"lg:h-[36px] lg:w-[36px]",40:"lg:h-[40px] lg:w-[40px]",42:"lg:h-[42px] lg:w-[42px]",48:"lg:h-[48px] lg:w-[48px]",64:"lg:h-[64px] lg:w-[64px]",72:"lg:h-[72px] lg:w-[72px]"},xl:{12:"xl:h-[12px] xl:w-[12px]",16:"xl:h-[16px] xl:w-[16px]",18:"xl:h-[18px] xl:w-[18px]",20:"xl:h-[20px] xl:w-[20px]",24:"xl:h-[24px] xl:w-[24px]",32:"xl:h-[32px] xl:w-[32px]",36:"xl:h-[36px] xl:w-[36px]",40:"xl:h-[40px] xl:w-[40px]",42:"xl:h-[42px] xl:w-[42px]",48:"xl:h-[48px] xl:w-[48px]",64:"xl:h-[64px] xl:w-[64px]",72:"xl:h-[72px] xl:w-[72px]"},"2xl":{12:"2xl:h-[12px] 2xl:w-[12px]",16:"2xl:h-[16px] 2xl:w-[16px]",18:"2xl:h-[18px] 2xl:w-[18px]",20:"2xl:h-[20px] 2xl:w-[20px]",24:"2xl:h-[24px] 2xl:w-[24px]",32:"2xl:h-[32px] 2xl:w-[32px]",36:"2xl:h-[36px] 2xl:w-[36px]",40:"2xl:h-[40px] 2xl:w-[40px]",42:"2xl:h-[42px] 2xl:w-[42px]",48:"2xl:h-[48px] 2xl:w-[48px]",64:"2xl:h-[64px] 2xl:w-[64px]",72:"2xl:h-[72px] 2xl:w-[72px]"}},g=e=>String(e),A=(e,n=24)=>{let t=[],r={};if(e===undefined){let s=g(n);s?t.push(T[s]):(r.height=`${n}px`,r.width=`${n}px`);}if(typeof e=="number"){let s=g(e);s?t.push(T[s]):(r.height=`${e}px`,r.width=`${e}px`);}if(Array.isArray(e)){let s=g(n),a=[s&&T[s]||`h-[${n}px] w-[${n}px]`];e.forEach(o=>{if(typeof o=="string"){let[l,m]=o.split(":"),x=parseInt(m,10),c=g(x);t.push(c&&C[l]?.[c]||`${l}:h-[${x}px] ${l}:w-[${x}px]`);}}),t.push(...a);}if(typeof e=="string"){let[s,a]=e.split(":"),o=parseInt(a,10),l=g(o);t.push(l&&C[s]?.[l]||`${s}:h-[${o}px] ${s}:w-[${o}px]`);}return {responsiveSizeClasses:t.join(" "),responsiveSizeStyles:r}};var k={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB",disabled:"#888888",danger:"#FF0000"},b=p__default.forwardRef(({name:e,size:n=24,color:t="primary",title:r,className:s,style:a={},...o},l)=>{let m=IconMap[e],{responsiveSizeClasses:x,responsiveSizeStyles:c}=A(n,24);return p__default.createElement("div",{className:h("flex justify-center items-center",x,s),style:{"--icon-stroke":k[t],...c,...a}},p__default.createElement(m,{ref:l,"aria-hidden":!r,"aria-label":r,stroke:e.includes("filled")?undefined:k[t],...o}))});b.displayName="Icon";var W={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},_=e=>{let[n,t]=e.split("-");return n==="heading"?W[t]||"p":n==="label"?"label":"p"},q={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},Q=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[r,s]=t.split(":");return `${r}:text-${s}`}return `text-${t}`}).join(" "):"text-body-default",d=p__default.forwardRef(({variant:e="body-default",color:n="primary",as:t,className:r,children:s,weight:a,...o},l)=>{let m=Q(e),x=n==="inherit"?"text-inherit":`text-${n}`,c=p__default.useMemo(()=>{let y=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return _(y)},[e]);return p__default.createElement(t||c,{ref:l,className:`
|
|
2
2
|
font-sans antialiased
|
|
3
|
-
${
|
|
4
|
-
${
|
|
5
|
-
${
|
|
6
|
-
${
|
|
7
|
-
`,...
|
|
3
|
+
${m}
|
|
4
|
+
${x}
|
|
5
|
+
${a&&`!${q[a]}`}
|
|
6
|
+
${r}
|
|
7
|
+
`,...o},s)});d.displayName="Text";var ge=p.forwardRef(({className:e,end:n,iconName:t,color:r,size:s,title:a,label:o,labelClassName:l,id:m,children:x,forceShowFocusRing:c,error:i,errorMessage:y,helperText:H,showCharacterCount:I,maxLength:u,value:f,defaultValue:N,onChange:M,disabled:R,...V},P)=>{let[L,$]=p.useState(f?.toString()||N?.toString()||"");p.useEffect(()=>{f!==undefined&&$(f.toString());},[f]);let K=p.useCallback(S=>{let O=S.target.value;$(O),M?.(S);},[M]),B=L.length,j=I||!!u;return p.createElement("div",{className:"gap-1 flex flex-col"},o&&p.createElement(d,{variant:"label-default",htmlFor:m,as:"label",color:i?"danger":"primary",className:h(l)},o),p.createElement("div",{className:h("relative flex flex-col gap-2 w-full rounded-lg border bg-background-0 px-3 md:py-3 py-2 text-secondary transition-colors duration-150",!i&&!c&&"border-secondary-50",i&&"border-tertiary-10",R&&"cursor-not-allowed opacity-50","focus-within:ring-2 focus-within:ring-primary-100",c&&v)},p.createElement("div",{className:"flex relative"},p.createElement("input",{ref:P,id:m,className:h("font-sans text-sm flex w-full file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-secondary text-primary disabled:cursor-not-allowed focus:outline-none rounded-lg",n&&"pr-10",e),value:L,maxLength:u,onChange:K,"aria-invalid":i,disabled:R,...V}),(n||t)&&p.createElement("div",{className:"absolute inset-y-0 right-0 flex items-center"},t?p.createElement(b,{name:t,color:i?"danger":"secondary",size:s,title:a}):n)),x),p.createElement("div",{className:"flex justify-between gap-2"},i&&y||H?p.createElement(d,{variant:"body-xxs",color:i?"danger":"secondary",className:"mt-1"},i?y:H):null,j&&p.createElement(d,{variant:"body-xxs",color:i?"danger":"secondary",className:"text-right mt-1"},p.createElement(d,{variant:"body-xxs",as:"span",color:"primary-100",className:"font-bold"},B),u&&`/${u}`," characters")))});export{ge as Input};//# sourceMappingURL=Input.js.map
|
|
8
8
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/tailwind.ts","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../src/components/Input.tsx"],"names":["cn","inputs","twMerge","clsx","focusRingStylesCoerced","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","children","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","Input","end","iconName","label","labelClassName","id","forceShowFocusRing","error","errorMessage","helperText","showCharacterCount","maxLength","defaultValue","onChange","currentValue","setCurrentValue","handleChange","e","newValue","characterCount","showCount"],"mappings":"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","file":"Input.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 { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:border-2 focus-visible:border-primary-100\";\n\nexport const focusRingStylesCoerced = \"border-2 border-primary-100\";\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: ResponsiveSize | ResponsiveSize[];\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\",\n disabled: \"#888888\",\n danger: \"#FF0000\"\n};\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n \"2xl\": \"1536px\"\n};\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n const mediaQueries: Record<string, string> = {};\n let baseSize: string | undefined;\n\n // Process each size\n sizeArray.forEach((size) => {\n if (typeof size === \"number\") {\n baseSize = `${size}px`;\n } else {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n mediaQueries[`@media (min-width: ${BREAKPOINT_MAP[breakpoint]})`] =\n `${value}px`;\n }\n });\n\n // Create the style object with the correct structure\n return {\n width: baseSize || \"24px\",\n height: baseSize || \"24px\",\n ...Object.entries(mediaQueries).reduce(\n (acc, [query, size]) => ({\n ...acc,\n [query]: {\n width: size,\n height: size\n }\n }),\n {}\n )\n };\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const sizeStyles = processSizes(size);\n\n return (\n <div\n className={cn(\"flex justify-center items-center\", className)}\n style={{\n ...sizeStyles,\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import React from \"react\";\nimport { Typography } from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n | \"primary\"\n | \"secondary\"\n | \"white\"\n | \"primary-blue\"\n | \"disabled\"\n | \"danger\"\n | \"inherit\"\n | \"primary-100\";\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: TextColor;\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses = color === \"inherit\" ? \"text-inherit\" : `text-${color}`;\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`\n font-sans antialiased\n ${typographyClasses}\n ${colorClasses}\n ${weight && `!${fontWeight[weight]}`}\n ${className}\n `}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import * as React from \"react\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles, focusRingStylesCoerced } from \"../utils/tailwind\";\nimport { IconName } from \"@deckai/icons\";\nimport { Icon, IconProps } from \"./Icon\";\nimport { Text } from \"./Text\";\n\nexport type InputProps = {\n className?: string;\n end?: React.ReactNode;\n /** renders an icon in the end slot */\n iconName?: IconName;\n /** Label text for the input */\n label?: string;\n /** Additional classes for the label */\n labelClassName?: string;\n /** Forces the focus ring to show regardless of focus state */\n forceShowFocusRing?: boolean;\n /** Error state for the input */\n error?: boolean;\n /** Error message to display below the input */\n errorMessage?: string;\n /** Helper text displayed below the input */\n helperText?: string;\n /** Character count display */\n showCharacterCount?: boolean;\n /** Maximum number of characters */\n maxLength?: number;\n} & React.InputHTMLAttributes<HTMLInputElement> &\n Pick<IconProps, \"color\" | \"size\" | \"title\">;\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className,\n end,\n iconName,\n color,\n size,\n title,\n label,\n labelClassName,\n id,\n children,\n forceShowFocusRing,\n error,\n errorMessage,\n helperText,\n showCharacterCount,\n maxLength,\n value,\n defaultValue,\n onChange,\n ...props\n },\n ref\n ) => {\n const [currentValue, setCurrentValue] = React.useState(\n value?.toString() || defaultValue?.toString() || \"\"\n );\n\n // Update internal value when prop changes\n React.useEffect(() => {\n if (value !== undefined) {\n setCurrentValue(value.toString());\n }\n }, [value]);\n\n const handleChange = React.useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n setCurrentValue(newValue);\n onChange?.(e);\n },\n [onChange]\n );\n\n const characterCount = currentValue.length;\n const showCount = showCharacterCount || !!maxLength;\n\n return (\n <div className=\"gap-1 flex flex-col\">\n {label && (\n <Text\n variant=\"label-default\"\n htmlFor={id}\n as=\"label\"\n color={error ? \"danger\" : \"primary\"}\n className={cn(labelClassName)}\n >\n {label}\n </Text>\n )}\n <div\n className={cn(\n \"relative flex flex-col gap-2 w-full rounded-lg border bg-background-0 px-3 md:py-3 py-2 text-secondary transition-colors duration-150\",\n {\n \"border-secondary-50\": !error && !forceShowFocusRing,\n \"border-tertiary-10\": error,\n [focusRingStylesCoerced]: forceShowFocusRing\n }\n )}\n >\n <div className=\"flex relative\">\n <input\n ref={ref}\n id={id}\n className={cn(\n \"font-sans text-sm flex w-full file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-secondary text-primary disabled:cursor-not-allowed focus:outline-none rounded-lg\",\n end && \"pr-10\",\n className\n )}\n value={currentValue}\n maxLength={maxLength}\n onChange={handleChange}\n aria-invalid={error}\n {...props}\n />\n {(end || iconName) && (\n <div className=\"absolute inset-y-0 right-0 flex items-center\">\n {iconName ? (\n <Icon\n name={iconName}\n color={error ? \"danger\" : \"secondary\"}\n size={size}\n title={title}\n />\n ) : (\n end\n )}\n </div>\n )}\n </div>\n {children}\n </div>\n <div className=\"flex justify-between gap-2\">\n {(error && errorMessage) || helperText ? (\n <Text\n variant=\"body-xxs\"\n color={error ? \"danger\" : \"secondary\"}\n className=\"mt-1\"\n >\n {error ? errorMessage : helperText}\n </Text>\n ) : null}\n {showCount && (\n <Text\n variant=\"body-xxs\"\n color={error ? \"danger\" : \"secondary\"}\n className=\"text-right mt-1\"\n >\n <Text\n variant=\"body-xxs\"\n as=\"span\"\n color=\"primary-100\"\n className=\"font-bold\"\n >\n {characterCount}\n </Text>\n {maxLength && `/${maxLength}`} characters\n </Text>\n )}\n </div>\n </div>\n );\n }\n);\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/tailwind.ts","../../src/utils/responsive.ts","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../src/components/Input.tsx"],"names":["cn","inputs","twMerge","clsx","focusRingStylesCoerced","BASE_SIZES","RESPONSIVE_SIZES","getSizeKey","size","getResponsiveSize","baseSize","classes","styles","key","baseKey","responsiveClasses","s","breakpoint","valueStr","value","valueKey","COLOR_MAP","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","responsiveSizeClasses","responsiveSizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","children","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","Input","end","iconName","label","labelClassName","id","forceShowFocusRing","error","errorMessage","helperText","showCharacterCount","maxLength","defaultValue","onChange","disabled","currentValue","setCurrentValue","handleChange","e","newValue","characterCount","showCount"],"mappings":"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","file":"Input.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 { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const sizes = [\"24\", \"42\", \"48\", \"64\", \"72\"]; // Add all the sizes you need\n\n const safelist: (string | { pattern: RegExp; variants: string[] })[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n // Generate size classes with responsive variants\n const sizeClasses = sizes.flatMap((size) => [\n `h-[${size}px]`,\n `w-[${size}px]`,\n ...breakpoints.flatMap((bp) => [\n `${bp}:h-[${size}px]`,\n `${bp}:w-[${size}px]`\n ])\n ]);\n\n return [...typographyClasses, ...responsiveTypographyClasses, ...sizeClasses];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100\";\nexport const focusRingWithinStyles =\n \"focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-100\";\nexport const focusRingStylesCoerced = \"ring-2 ring-primary-100\";\n","export type Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\nexport type ResponsiveSize = number | `${Breakpoint}:${number}`;\n\ntype SizeKey =\n | \"12\"\n | \"16\"\n | \"18\"\n | \"20\"\n | \"24\"\n | \"32\"\n | \"36\"\n | \"40\"\n | \"42\"\n | \"48\"\n | \"64\"\n | \"72\";\n\n// These constants help Tailwind identify the classes during compilation\nconst BASE_SIZES: Record<SizeKey, string> = {\n \"12\": \"h-[12px] w-[12px]\",\n \"16\": \"h-[16px] w-[16px]\",\n \"18\": \"h-[18px] w-[18px]\",\n \"20\": \"h-[20px] w-[20px]\",\n \"24\": \"h-[24px] w-[24px]\",\n \"32\": \"h-[32px] w-[32px]\",\n \"36\": \"h-[36px] w-[36px]\",\n \"40\": \"h-[40px] w-[40px]\",\n \"42\": \"h-[42px] w-[42px]\",\n \"48\": \"h-[48px] w-[48px]\",\n \"64\": \"h-[64px] w-[64px]\",\n \"72\": \"h-[72px] w-[72px]\"\n};\n\nconst RESPONSIVE_SIZES: Record<Breakpoint, Record<SizeKey, string>> = {\n sm: {\n \"12\": \"sm:h-[12px] sm:w-[12px]\",\n \"16\": \"sm:h-[16px] sm:w-[16px]\",\n \"18\": \"sm:h-[18px] sm:w-[18px]\",\n \"20\": \"sm:h-[20px] sm:w-[20px]\",\n \"24\": \"sm:h-[24px] sm:w-[24px]\",\n \"32\": \"sm:h-[32px] sm:w-[32px]\",\n \"36\": \"sm:h-[36px] sm:w-[36px]\",\n \"40\": \"sm:h-[40px] sm:w-[40px]\",\n \"42\": \"sm:h-[42px] sm:w-[42px]\",\n \"48\": \"sm:h-[48px] sm:w-[48px]\",\n \"64\": \"sm:h-[64px] sm:w-[64px]\",\n \"72\": \"sm:h-[72px] sm:w-[72px]\"\n },\n md: {\n \"12\": \"md:h-[12px] md:w-[12px]\",\n \"16\": \"md:h-[16px] md:w-[16px]\",\n \"18\": \"md:h-[18px] md:w-[18px]\",\n \"20\": \"md:h-[20px] md:w-[20px]\",\n \"24\": \"md:h-[24px] md:w-[24px]\",\n \"32\": \"md:h-[32px] md:w-[32px]\",\n \"36\": \"md:h-[36px] md:w-[36px]\",\n \"40\": \"md:h-[40px] md:w-[40px]\",\n \"42\": \"md:h-[42px] md:w-[42px]\",\n \"48\": \"md:h-[48px] md:w-[48px]\",\n \"64\": \"md:h-[64px] md:w-[64px]\",\n \"72\": \"md:h-[72px] md:w-[72px]\"\n },\n lg: {\n \"12\": \"lg:h-[12px] lg:w-[12px]\",\n \"16\": \"lg:h-[16px] lg:w-[16px]\",\n \"18\": \"lg:h-[18px] lg:w-[18px]\",\n \"20\": \"lg:h-[20px] lg:w-[20px]\",\n \"24\": \"lg:h-[24px] lg:w-[24px]\",\n \"32\": \"lg:h-[32px] lg:w-[32px]\",\n \"36\": \"lg:h-[36px] lg:w-[36px]\",\n \"40\": \"lg:h-[40px] lg:w-[40px]\",\n \"42\": \"lg:h-[42px] lg:w-[42px]\",\n \"48\": \"lg:h-[48px] lg:w-[48px]\",\n \"64\": \"lg:h-[64px] lg:w-[64px]\",\n \"72\": \"lg:h-[72px] lg:w-[72px]\"\n },\n xl: {\n \"12\": \"xl:h-[12px] xl:w-[12px]\",\n \"16\": \"xl:h-[16px] xl:w-[16px]\",\n \"18\": \"xl:h-[18px] xl:w-[18px]\",\n \"20\": \"xl:h-[20px] xl:w-[20px]\",\n \"24\": \"xl:h-[24px] xl:w-[24px]\",\n \"32\": \"xl:h-[32px] xl:w-[32px]\",\n \"36\": \"xl:h-[36px] xl:w-[36px]\",\n \"40\": \"xl:h-[40px] xl:w-[40px]\",\n \"42\": \"xl:h-[42px] xl:w-[42px]\",\n \"48\": \"xl:h-[48px] xl:w-[48px]\",\n \"64\": \"xl:h-[64px] xl:w-[64px]\",\n \"72\": \"xl:h-[72px] xl:w-[72px]\"\n },\n \"2xl\": {\n \"12\": \"2xl:h-[12px] 2xl:w-[12px]\",\n \"16\": \"2xl:h-[16px] 2xl:w-[16px]\",\n \"18\": \"2xl:h-[18px] 2xl:w-[18px]\",\n \"20\": \"2xl:h-[20px] 2xl:w-[20px]\",\n \"24\": \"2xl:h-[24px] 2xl:w-[24px]\",\n \"32\": \"2xl:h-[32px] 2xl:w-[32px]\",\n \"36\": \"2xl:h-[36px] 2xl:w-[36px]\",\n \"40\": \"2xl:h-[40px] 2xl:w-[40px]\",\n \"42\": \"2xl:h-[42px] 2xl:w-[42px]\",\n \"48\": \"2xl:h-[48px] 2xl:w-[48px]\",\n \"64\": \"2xl:h-[64px] 2xl:w-[64px]\",\n \"72\": \"2xl:h-[72px] 2xl:w-[72px]\"\n }\n};\n\nconst getSizeKey = (size: number): SizeKey | undefined => {\n return String(size) as SizeKey;\n};\n\nexport const getResponsiveSize = (\n size: ResponsiveSize | ResponsiveSize[] | undefined,\n baseSize: number = 24\n): {\n responsiveSizeClasses: string;\n responsiveSizeStyles: Record<string, string>;\n} => {\n const classes: string[] = [];\n const styles: Record<string, string> = {};\n\n // If no size provided, use baseSize\n if (size === undefined) {\n const key = getSizeKey(baseSize);\n if (key) {\n classes.push(BASE_SIZES[key]);\n } else {\n styles.height = `${baseSize}px`;\n styles.width = `${baseSize}px`;\n }\n }\n\n // If size is a number, use that directly\n if (typeof size === \"number\") {\n const key = getSizeKey(size);\n if (key) {\n classes.push(BASE_SIZES[key]);\n } else {\n styles.height = `${size}px`;\n styles.width = `${size}px`;\n }\n }\n\n // If array of responsive sizes, generate responsive classes\n if (Array.isArray(size)) {\n const baseKey = getSizeKey(baseSize);\n const responsiveClasses = [\n (baseKey && BASE_SIZES[baseKey]) || `h-[${baseSize}px] w-[${baseSize}px]`\n ];\n\n size.forEach((s) => {\n if (typeof s === \"string\") {\n const [breakpoint, valueStr] = s.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n const key = getSizeKey(value);\n classes.push(\n (key && RESPONSIVE_SIZES[breakpoint]?.[key]) ||\n `${breakpoint}:h-[${value}px] ${breakpoint}:w-[${value}px]`\n );\n }\n });\n\n classes.push(...responsiveClasses);\n }\n\n if (typeof size === \"string\") {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n const valueKey = getSizeKey(value);\n classes.push(\n (valueKey && RESPONSIVE_SIZES[breakpoint]?.[valueKey]) ||\n `${breakpoint}:h-[${value}px] ${breakpoint}:w-[${value}px]`\n );\n }\n\n return {\n responsiveSizeClasses: classes.join(\" \"),\n responsiveSizeStyles: styles\n };\n};\n","import { IconMap, IconName } from \"@deckai/icons\";\nimport React, { SVGProps } from \"react\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\nimport { ResponsiveSize, getResponsiveSize } from \"../utils/responsive\";\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: ResponsiveSize | ResponsiveSize[];\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\",\n disabled: \"#888888\",\n danger: \"#FF0000\"\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const { responsiveSizeClasses, responsiveSizeStyles } = getResponsiveSize(\n size,\n 24\n );\n\n return (\n <div\n className={cn(\n \"flex justify-center items-center\",\n responsiveSizeClasses,\n className\n )}\n style={{\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...responsiveSizeStyles,\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import React from \"react\";\nimport { Typography } from \"../types/tailwind\";\nimport { Breakpoint } from \"../utils/responsive\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n | \"primary\"\n | \"secondary\"\n | \"white\"\n | \"primary-blue\"\n | \"disabled\"\n | \"danger\"\n | \"inherit\"\n | \"primary-100\";\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: TextColor;\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses = color === \"inherit\" ? \"text-inherit\" : `text-${color}`;\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`\n font-sans antialiased\n ${typographyClasses}\n ${colorClasses}\n ${weight && `!${fontWeight[weight]}`}\n ${className}\n `}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import * as React from \"react\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles, focusRingStylesCoerced } from \"../utils/tailwind\";\nimport { IconName } from \"@deckai/icons\";\nimport { Icon, IconProps } from \"./Icon\";\nimport { Text } from \"./Text\";\n\nexport type InputProps = {\n className?: string;\n end?: React.ReactNode;\n /** renders an icon in the end slot */\n iconName?: IconName;\n /** Label text for the input */\n label?: string;\n /** Additional classes for the label */\n labelClassName?: string;\n /** Forces the focus ring to show regardless of focus state */\n forceShowFocusRing?: boolean;\n /** Error state for the input */\n error?: boolean;\n /** Error message to display below the input */\n errorMessage?: string;\n /** Helper text displayed below the input */\n helperText?: string;\n /** Character count display */\n showCharacterCount?: boolean;\n /** Maximum number of characters */\n maxLength?: number;\n} & React.InputHTMLAttributes<HTMLInputElement> &\n Pick<IconProps, \"color\" | \"size\" | \"title\">;\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className,\n end,\n iconName,\n color,\n size,\n title,\n label,\n labelClassName,\n id,\n children,\n forceShowFocusRing,\n error,\n errorMessage,\n helperText,\n showCharacterCount,\n maxLength,\n value,\n defaultValue,\n onChange,\n disabled,\n ...props\n },\n ref\n ) => {\n const [currentValue, setCurrentValue] = React.useState(\n value?.toString() || defaultValue?.toString() || \"\"\n );\n\n // Update internal value when prop changes\n React.useEffect(() => {\n if (value !== undefined) {\n setCurrentValue(value.toString());\n }\n }, [value]);\n\n const handleChange = React.useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n setCurrentValue(newValue);\n onChange?.(e);\n },\n [onChange]\n );\n\n const characterCount = currentValue.length;\n const showCount = showCharacterCount || !!maxLength;\n\n return (\n <div className=\"gap-1 flex flex-col\">\n {label && (\n <Text\n variant=\"label-default\"\n htmlFor={id}\n as=\"label\"\n color={error ? \"danger\" : \"primary\"}\n className={cn(labelClassName)}\n >\n {label}\n </Text>\n )}\n <div\n className={cn(\n \"relative flex flex-col gap-2 w-full rounded-lg border bg-background-0 px-3 md:py-3 py-2 text-secondary transition-colors duration-150\",\n !error && !forceShowFocusRing && \"border-secondary-50\",\n error && \"border-tertiary-10\",\n disabled && \"cursor-not-allowed opacity-50\",\n \"focus-within:ring-2 focus-within:ring-primary-100\",\n forceShowFocusRing && focusRingStylesCoerced\n )}\n >\n <div className=\"flex relative\">\n <input\n ref={ref}\n id={id}\n className={cn(\n \"font-sans text-sm flex w-full file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-secondary text-primary disabled:cursor-not-allowed focus:outline-none rounded-lg\",\n end && \"pr-10\",\n className\n )}\n value={currentValue}\n maxLength={maxLength}\n onChange={handleChange}\n aria-invalid={error}\n disabled={disabled}\n {...props}\n />\n {(end || iconName) && (\n <div className=\"absolute inset-y-0 right-0 flex items-center\">\n {iconName ? (\n <Icon\n name={iconName}\n color={error ? \"danger\" : \"secondary\"}\n size={size}\n title={title}\n />\n ) : (\n end\n )}\n </div>\n )}\n </div>\n {children}\n </div>\n <div className=\"flex justify-between gap-2\">\n {(error && errorMessage) || helperText ? (\n <Text\n variant=\"body-xxs\"\n color={error ? \"danger\" : \"secondary\"}\n className=\"mt-1\"\n >\n {error ? errorMessage : helperText}\n </Text>\n ) : null}\n {showCount && (\n <Text\n variant=\"body-xxs\"\n color={error ? \"danger\" : \"secondary\"}\n className=\"text-right mt-1\"\n >\n <Text\n variant=\"body-xxs\"\n as=\"span\"\n color=\"primary-100\"\n className=\"font-bold\"\n >\n {characterCount}\n </Text>\n {maxLength && `/${maxLength}`} characters\n </Text>\n )}\n </div>\n </div>\n );\n }\n);\n"]}
|
package/dist/components/Link.cjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
'use strict';var
|
|
1
|
+
'use strict';var a=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var a__default=/*#__PURE__*/_interopDefault(a);var H={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},f=e=>{let[r,t]=e.split("-");return r==="heading"?H[t]||"p":r==="label"?"label":"p"},M={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},d=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[n,o]=t.split(":");return `${n}:text-${o}`}return `text-${t}`}).join(" "):"text-body-default",i=a__default.default.forwardRef(({variant:e="body-default",color:r="primary",as:t,className:n,children:o,weight:s,...T},m)=>{let y=d(e),h=r==="inherit"?"text-inherit":`text-${r}`,g=a__default.default.useMemo(()=>{let u=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return f(u)},[e]);return a__default.default.createElement(t||g,{ref:m,className:`
|
|
2
2
|
font-sans antialiased
|
|
3
3
|
${y}
|
|
4
4
|
${h}
|
|
5
|
-
${
|
|
6
|
-
${
|
|
7
|
-
`,...T},
|
|
5
|
+
${s&&`!${M[s]}`}
|
|
6
|
+
${n}
|
|
7
|
+
`,...T},o)});i.displayName="Text";function p(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var l="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100";var j=({children:e,color:r="inherit",variant:t="body-default-semibold",href:n,className:o,...s})=>a__default.default.createElement(i,{variant:t,color:r},a__default.default.createElement("a",{href:n,className:p("hover:opacity-80 transition-all ease-in-out active:scale-95 hover:underline",l,o),...s},e));exports.Link=j;//# sourceMappingURL=Link.cjs.map
|
|
8
8
|
//# sourceMappingURL=Link.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Text.tsx","../../src/utils/index.ts","../../src/utils/tailwind.ts","../../src/components/Link.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","cn","inputs","twMerge","clsx","focusRingStyles","Link","href"],"mappings":"iNAuEA,IAAMA,EAAmD,CACvD,EAAA,CAAI,KACJ,EAAI,CAAA,IAAA,CACJ,GAAI,IACJ,CAAA,EAAA,CAAI,KACJ,EAAI,CAAA,IACN,EAEMC,CAAyBC,CAAAA,CAAAA,EAAwC,CACrE,GAAM,CAACC,CAAUC,CAAAA,CAAI,EAAIF,CAAQ,CAAA,KAAA,CAAM,GAAG,CAE1C,CAAA,OAAIC,IAAa,SACRH,CAAAA,CAAAA,CAAoBI,CAAI,CAAK,EAAA,GAAA,CAGlCD,IAAa,OACR,CAAA,OAAA,CAGF,GACT,CAIME,CAAAA,CAAAA,CAAqC,CACzC,KAAA,CAAO,aACP,OAAS,CAAA,cAAA,CACT,SAAU,eACV,CAAA,IAAA,CAAM,WACR,CA0BMC,CAAAA,CAAAA,CACJC,GAEKA,CAEgB,CAAA,CAAA,KAAA,CAAM,QAAQA,CAAQ,CAAA,CAAIA,EAAW,CAACA,CAAQ,GAGhE,GAAKL,CAAAA,CAAAA,EAAY,CAChB,GAAIA,CAAAA,CAAQ,SAAS,GAAG,CAAA,CAAG,CACzB,GAAM,CAACM,EAAYC,CAAe,CAAA,CAAIP,EAAQ,KAAM,CAAA,GAAG,EACvD,OAAO,CAAA,EAAGM,CAAU,CAASC,MAAAA,EAAAA,CAAe,EAC9C,CACA,OAAO,CAAQP,KAAAA,EAAAA,CAAO,EACxB,CAAC,CAAA,CACA,KAAK,GAAG,CAAA,CAZW,oBAeXQ,CAAOC,CAAAA,kBAAAA,CAAM,WACxB,CACE,CACE,QAAAT,CAAU,CAAA,cAAA,CACV,MAAAU,CAAQ,CAAA,SAAA,CACR,GAAAC,CACA,CAAA,SAAA,CAAAC,CACA,CAAA,QAAA,CAAAC,EACA,MAAAC,CAAAA,CAAAA,CACA,GAAGC,CACL,CAAA,CACAC,IACG,CAEH,IAAMC,EAAoBb,CAAgBJ,CAAAA,CAAO,EAG3CkB,CAAeR,CAAAA,CAAAA,GAAU,UAAY,cAAiB,CAAA,CAAA,KAAA,EAAQA,CAAK,CAEnES,CAAAA,CAAAA,CAAAA,CAAmBV,kBAAM,CAAA,OAAA,CAAQ,IAAM,CAC3C,IAAMW,EACJ,OAAOpB,CAAAA,EAAY,SACfA,CAAQ,CAAA,KAAA,CAAM,GAAG,CAAE,CAAA,GAAA,GACnB,KAAM,CAAA,OAAA,CAAQA,CAAO,CACnBA,CAAAA,CAAAA,CAAQ,CAAC,CAAE,CAAA,KAAA,CAAM,GAAG,CAAE,CAAA,GAAA,GACtB,cACR,CAAA,OAAOD,EAAsBqB,CAA4B,CAC3D,EAAG,CAACpB,CAAO,CAAC,CAIZ,CAAA,OAEES,mBAAA,aAJiBE,CAAAA,CAAAA,EAAMQ,EAItB,CACC,GAAA,CAAKH,EACL,SAAW,CAAA;AAAA;AAAA,UAAA,EAEPC,CAAiB;AAAA,UAAA,EACjBC,CAAY;AAAA,UAAA,EACZJ,CAAU,EAAA,CAAA,CAAA,EAAIX,CAAWW,CAAAA,CAAM,CAAC,CAAE,CAAA;AAAA,UAAA,EAClCF,CAAS;AAAA,QAAA,CAAA,CAEZ,GAAGG,CAAAA,CAAAA,CAEHF,CACH,CAEJ,CACF,CAEAL,CAAAA,CAAAA,CAAK,WAAc,CAAA,MAAA,CC/LZ,SAASa,CAAAA,CAAAA,GAAMC,CAAsB,CAAA,CAC1C,OAAOC,qBAAAA,CAAQC,UAAKF,CAAM,CAAC,CAC7B,CC8DO,IAAMG,CACX,CAAA,oFAAA,CCvDWC,IAAAA,CAAAA,CAAO,CAAC,CACnB,QAAA,CAAAb,CACA,CAAA,KAAA,CAAAH,CAAQ,CAAA,SAAA,CACR,OAAAV,CAAAA,CAAAA,CAAU,wBACV,IAAA2B,CAAAA,CAAAA,CACA,SAAAf,CAAAA,CAAAA,CACA,GAAGG,CACL,CAAA,GACEN,kBAAA,CAAA,aAAA,CAACD,EAAA,CAAK,OAAA,CAASR,CAAS,CAAA,KAAA,CAAOU,CAC7BD,CAAAA,CAAAA,kBAAAA,CAAA,aAAC,CAAA,GAAA,CAAA,CACC,KAAMkB,CACN,CAAA,SAAA,CAAWN,CACT,CAAA,6EAAA,CACAI,EACAb,CACF,CAAA,CACC,GAAGG,CAAAA,CAAAA,CAEHF,CACH,CACF","file":"Link.cjs","sourcesContent":["import React from \"react\";\nimport { Typography } from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n | \"primary\"\n | \"secondary\"\n | \"white\"\n | \"primary-blue\"\n | \"disabled\"\n | \"danger\"\n | \"inherit\"\n | \"primary-100\";\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: TextColor;\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses = color === \"inherit\" ? \"text-inherit\" : `text-${color}`;\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`\n font-sans antialiased\n ${typographyClasses}\n ${colorClasses}\n ${weight && `!${fontWeight[weight]}`}\n ${className}\n `}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import { 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 { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:border-2 focus-visible:border-primary-100\";\n\nexport const focusRingStylesCoerced = \"border-2 border-primary-100\";\n","import React from \"react\";\nimport { Text, TextProps } from \"./Text\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type LinkProps = {\n href: string;\n children: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n} & Pick<TextProps, \"variant\" | \"color\"> &\n React.AnchorHTMLAttributes<HTMLAnchorElement>;\n\nexport const Link = ({\n children,\n color = \"inherit\",\n variant = \"body-default-semibold\",\n href,\n className,\n ...props\n}: LinkProps) => (\n <Text variant={variant} color={color}>\n <a\n href={href}\n className={cn(\n \"hover:opacity-80 transition-all ease-in-out active:scale-95 hover:underline\",\n focusRingStyles,\n className\n )}\n {...props}\n >\n {children}\n </a>\n </Text>\n);\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/Text.tsx","../../src/utils/index.ts","../../src/utils/tailwind.ts","../../src/components/Link.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","cn","inputs","twMerge","clsx","focusRingStyles","Link","href"],"mappings":"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","file":"Link.cjs","sourcesContent":["import React from \"react\";\nimport { Typography } from \"../types/tailwind\";\nimport { Breakpoint } from \"../utils/responsive\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n | \"primary\"\n | \"secondary\"\n | \"white\"\n | \"primary-blue\"\n | \"disabled\"\n | \"danger\"\n | \"inherit\"\n | \"primary-100\";\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: TextColor;\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses = color === \"inherit\" ? \"text-inherit\" : `text-${color}`;\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`\n font-sans antialiased\n ${typographyClasses}\n ${colorClasses}\n ${weight && `!${fontWeight[weight]}`}\n ${className}\n `}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import { 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 { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const sizes = [\"24\", \"42\", \"48\", \"64\", \"72\"]; // Add all the sizes you need\n\n const safelist: (string | { pattern: RegExp; variants: string[] })[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n // Generate size classes with responsive variants\n const sizeClasses = sizes.flatMap((size) => [\n `h-[${size}px]`,\n `w-[${size}px]`,\n ...breakpoints.flatMap((bp) => [\n `${bp}:h-[${size}px]`,\n `${bp}:w-[${size}px]`\n ])\n ]);\n\n return [...typographyClasses, ...responsiveTypographyClasses, ...sizeClasses];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100\";\nexport const focusRingWithinStyles =\n \"focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-100\";\nexport const focusRingStylesCoerced = \"ring-2 ring-primary-100\";\n","import React from \"react\";\nimport { Text, TextProps } from \"./Text\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type LinkProps = {\n href: string;\n children: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n} & Pick<TextProps, \"variant\" | \"color\"> &\n React.AnchorHTMLAttributes<HTMLAnchorElement>;\n\nexport const Link = ({\n children,\n color = \"inherit\",\n variant = \"body-default-semibold\",\n href,\n className,\n ...props\n}: LinkProps) => (\n <Text variant={variant} color={color}>\n <a\n href={href}\n className={cn(\n \"hover:opacity-80 transition-all ease-in-out active:scale-95 hover:underline\",\n focusRingStyles,\n className\n )}\n {...props}\n >\n {children}\n </a>\n </Text>\n);\n"]}
|