@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
package/dist/components/Link.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import a from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';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.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.useMemo(()=>{let u=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return f(u)},[e]);return a.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 twMerge(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.createElement(i,{variant:t,color:r},a.createElement("a",{href:n,className:p("hover:opacity-80 transition-all ease-in-out active:scale-95 hover:underline",l,o),...s},e));export{j as Link};//# sourceMappingURL=Link.js.map
|
|
8
8
|
//# sourceMappingURL=Link.js.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":"kFAuEA,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,CAAAA,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,CAAM,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,EAAA,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,OAAAA,CAAQC,KAAKF,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,CAAA,CAAA,aAAA,CAACD,EAAA,CAAK,OAAA,CAASR,CAAS,CAAA,KAAA,CAAOU,CAC7BD,CAAAA,CAAAA,CAAAA,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.js","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.js","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"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';var r=require('@radix-ui/react-dialog'),i=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),icons=require('@deckai/icons');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var r__namespace=/*#__PURE__*/_interopNamespace(r);var i__default=/*#__PURE__*/_interopDefault(i);function a(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var y=(e,{isActive:p=true,preventScroll:o=false}={})=>{let s=i.useCallback(t=>{let n=e[t.key];n&&n(t);},[e]);i.useEffect(()=>(p&&(document.addEventListener("keydown",s),o&&(document.body.style.overflow="hidden")),()=>{document.removeEventListener("keydown",s),o&&(document.body.style.overflow="unset");}),[p,s,o]);};var w={12:"h-[12px] w-[12px]",16:"h-[16px] w-[16px]",18:"h-[18px] w-[18px]",20:"h-[20px] w-[20px]",24:"h-[24px] w-[24px]",32:"h-[32px] w-[32px]",36:"h-[36px] w-[36px]",40:"h-[40px] w-[40px]",42:"h-[42px] w-[42px]",48:"h-[48px] w-[48px]",64:"h-[64px] w-[64px]",72:"h-[72px] w-[72px]"},v={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]"}},m=e=>String(e),b=(e,p=24)=>{let o=[],s={};if(e===undefined){let t=m(p);t?o.push(w[t]):(s.height=`${p}px`,s.width=`${p}px`);}if(typeof e=="number"){let t=m(e);t?o.push(w[t]):(s.height=`${e}px`,s.width=`${e}px`);}if(Array.isArray(e)){let t=m(p),n=[t&&w[t]||`h-[${p}px] w-[${p}px]`];e.forEach(x=>{if(typeof x=="string"){let[l,c]=x.split(":"),d=parseInt(c,10),h=m(d);o.push(h&&v[l]?.[h]||`${l}:h-[${d}px] ${l}:w-[${d}px]`);}}),o.push(...n);}if(typeof e=="string"){let[t,n]=e.split(":"),x=parseInt(n,10),l=m(x);o.push(l&&v[t]?.[l]||`${t}:h-[${x}px] ${t}:w-[${x}px]`);}return {responsiveSizeClasses:o.join(" "),responsiveSizeStyles:s}};var $={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB",disabled:"#888888",danger:"#FF0000"},g=i__default.default.forwardRef(({name:e,size:p=24,color:o="primary",title:s,className:t,style:n={},...x},l)=>{let c=icons.IconMap[e],{responsiveSizeClasses:d,responsiveSizeStyles:h}=b(p,24);return i__default.default.createElement("div",{className:a("flex justify-center items-center",d,t),style:{"--icon-stroke":$[o],...h,...n}},i__default.default.createElement(c,{ref:l,"aria-hidden":!s,"aria-label":s,stroke:e.includes("filled")?undefined:$[o],...x}))});g.displayName="Icon";var S="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100";var u=i__default.default.forwardRef(({children:e,type:p="button",className:o,disabled:s,...t},n)=>i__default.default.createElement("button",{ref:n,type:p,disabled:s,className:a("appearance-none hover:opacity-80 transition-all active:scale-95",S,s&&"opacity-50 cursor-not-allowed",o),...t},e));u.displayName="Pressable";var K=({children:e,open:p,onClose:o,className:s,showCloseButton:t=true})=>(y({Escape:o},{isActive:p,preventScroll:true}),i__default.default.createElement(r__namespace.Root,{open:p,onOpenChange:o},i__default.default.createElement(r__namespace.Portal,null,i__default.default.createElement(r__namespace.Overlay,{className:a("fixed inset-0 z-50 bg-sidebarOverlay backdrop-blur-[2px]","data-[state=open]:animate-overlay-show","data-[state=closed]:animate-overlay-hide")}),i__default.default.createElement(r__namespace.Content,{className:a("fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2","w-[90vw] max-w-[90vw] max-h-[90vh]","rounded-xl overflow-hidden","data-[state=open]:animate-in data-[state=closed]:animate-out","data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0","data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95","data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2","data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]",s)},e,t&&i__default.default.createElement(r__namespace.Close,{asChild:true},i__default.default.createElement(u,{className:"inline-flex items-center justify-center text-secondary absolute top-4 right-4","aria-label":"Close"},i__default.default.createElement(g,{name:"close",size:12})))))));K.displayName="Modal";exports.Modal=K;//# sourceMappingURL=Modal.cjs.map
|
|
2
|
+
//# sourceMappingURL=Modal.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/usePortalKeyboardEvent.ts","../../src/utils/responsive.ts","../../src/components/Icon.tsx","../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/components/Modal.tsx"],"names":["cn","inputs","twMerge","clsx","usePortalKeyboardEvent","eventMap","isActive","preventScroll","handleKeyDown","useCallback","event","handler","useEffect","BASE_SIZES","RESPONSIVE_SIZES","getSizeKey","size","getResponsiveSize","baseSize","classes","styles","key","baseKey","responsiveClasses","s","breakpoint","valueStr","value","valueKey","COLOR_MAP","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","responsiveSizeClasses","responsiveSizeStyles","focusRingStyles","Pressable","children","type","disabled","Modal","open","onClose","showCloseButton","r"],"mappings":"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","file":"Modal.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import { useCallback, useEffect } from \"react\";\n\ntype KeyboardEventHandler = (event: KeyboardEvent) => void;\n\ntype KeyboardEventOptions = {\n /**\n * Whether the event should be active\n */\n isActive?: boolean;\n /**\n * Whether to prevent body scroll when active\n * @default false\n */\n preventScroll?: boolean;\n};\n\n/**\n * Hook for handling keyboard events within portals\n * @param eventMap - Map of keyboard events to their handlers\n * @param options - Options for the keyboard events\n * @example\n * ```tsx\n * const handleKeyboardEvents = usePortalKeyboardEvent({\n * Escape: onClose,\n * Enter: onConfirm,\n * }, { isActive: isOpen });\n * ```\n */\nexport const usePortalKeyboardEvent = (\n eventMap: Record<string, KeyboardEventHandler>,\n { isActive = true, preventScroll = false }: KeyboardEventOptions = {}\n) => {\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n const handler = eventMap[event.key];\n if (handler) {\n handler(event);\n }\n },\n [eventMap]\n );\n\n useEffect(() => {\n if (isActive) {\n document.addEventListener(\"keydown\", handleKeyDown);\n if (preventScroll) {\n document.body.style.overflow = \"hidden\";\n }\n }\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n if (preventScroll) {\n document.body.style.overflow = \"unset\";\n }\n };\n }, [isActive, handleKeyDown, preventScroll]);\n};\n","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 { 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, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable = React.forwardRef<HTMLButtonElement, PressableProps>(\n ({ children, type = \"button\", className, disabled, ...props }, ref) => (\n <button\n ref={ref}\n type={type}\n disabled={disabled}\n className={cn(\n \"appearance-none hover:opacity-80 transition-all active:scale-95\",\n focusRingStyles,\n disabled && \"opacity-50 cursor-not-allowed\",\n className\n )}\n {...props}\n >\n {children}\n </button>\n )\n);\n\nPressable.displayName = \"Pressable\";\n","import * as Dialog from \"@radix-ui/react-dialog\";\nimport React, { type ReactNode } from \"react\";\nimport { cn } from \"../utils\";\nimport { usePortalKeyboardEvent } from \"../utils/usePortalKeyboardEvent\";\nimport { Icon } from \"./Icon\";\nimport { Pressable } from \"./Pressable\";\n\nexport type ModalProps = {\n /**\n * The content to be rendered inside the modal\n */\n children: ReactNode;\n /**\n * Whether the modal is open\n */\n open: boolean;\n /**\n * Callback fired when the modal is closed\n */\n onClose: () => void;\n /**\n * Additional class names to be applied to the modal\n */\n className?: string;\n /**\n * Whether to show the close button\n * @default true\n */\n showCloseButton?: boolean;\n};\n\nexport const Modal = ({\n children,\n open,\n onClose,\n className,\n showCloseButton = true\n}: ModalProps) => {\n usePortalKeyboardEvent(\n { Escape: onClose },\n { isActive: open, preventScroll: true }\n );\n\n return (\n <Dialog.Root open={open} onOpenChange={onClose}>\n <Dialog.Portal>\n <Dialog.Overlay\n className={cn(\n \"fixed inset-0 z-50 bg-sidebarOverlay backdrop-blur-[2px]\",\n \"data-[state=open]:animate-overlay-show\",\n \"data-[state=closed]:animate-overlay-hide\"\n )}\n />\n <Dialog.Content\n className={cn(\n \"fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2\",\n \"w-[90vw] max-w-[90vw] max-h-[90vh]\",\n \"rounded-xl overflow-hidden\",\n \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n \"data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2\",\n \"data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]\",\n className\n )}\n >\n {children}\n {showCloseButton && (\n <Dialog.Close asChild>\n <Pressable\n className=\"inline-flex items-center justify-center text-secondary absolute top-4 right-4\"\n aria-label=\"Close\"\n >\n <Icon name=\"close\" size={12} />\n </Pressable>\n </Dialog.Close>\n )}\n </Dialog.Content>\n </Dialog.Portal>\n </Dialog.Root>\n );\n};\n\nModal.displayName = \"Modal\";\n"]}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React__default, { ReactNode } from 'react';
|
|
2
|
+
|
|
3
|
+
type ModalProps = {
|
|
4
|
+
/**
|
|
5
|
+
* The content to be rendered inside the modal
|
|
6
|
+
*/
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Whether the modal is open
|
|
10
|
+
*/
|
|
11
|
+
open: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Callback fired when the modal is closed
|
|
14
|
+
*/
|
|
15
|
+
onClose: () => void;
|
|
16
|
+
/**
|
|
17
|
+
* Additional class names to be applied to the modal
|
|
18
|
+
*/
|
|
19
|
+
className?: string;
|
|
20
|
+
/**
|
|
21
|
+
* Whether to show the close button
|
|
22
|
+
* @default true
|
|
23
|
+
*/
|
|
24
|
+
showCloseButton?: boolean;
|
|
25
|
+
};
|
|
26
|
+
declare const Modal: {
|
|
27
|
+
({ children, open, onClose, className, showCloseButton }: ModalProps): React__default.JSX.Element;
|
|
28
|
+
displayName: string;
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
export { Modal, type ModalProps };
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React__default, { ReactNode } from 'react';
|
|
2
|
+
|
|
3
|
+
type ModalProps = {
|
|
4
|
+
/**
|
|
5
|
+
* The content to be rendered inside the modal
|
|
6
|
+
*/
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Whether the modal is open
|
|
10
|
+
*/
|
|
11
|
+
open: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Callback fired when the modal is closed
|
|
14
|
+
*/
|
|
15
|
+
onClose: () => void;
|
|
16
|
+
/**
|
|
17
|
+
* Additional class names to be applied to the modal
|
|
18
|
+
*/
|
|
19
|
+
className?: string;
|
|
20
|
+
/**
|
|
21
|
+
* Whether to show the close button
|
|
22
|
+
* @default true
|
|
23
|
+
*/
|
|
24
|
+
showCloseButton?: boolean;
|
|
25
|
+
};
|
|
26
|
+
declare const Modal: {
|
|
27
|
+
({ children, open, onClose, className, showCloseButton }: ModalProps): React__default.JSX.Element;
|
|
28
|
+
displayName: string;
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
export { Modal, type ModalProps };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import*as r from'@radix-ui/react-dialog';import i,{useCallback,useEffect}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {IconMap}from'@deckai/icons';function a(...e){return twMerge(clsx(e))}var y=(e,{isActive:p=true,preventScroll:o=false}={})=>{let s=useCallback(t=>{let n=e[t.key];n&&n(t);},[e]);useEffect(()=>(p&&(document.addEventListener("keydown",s),o&&(document.body.style.overflow="hidden")),()=>{document.removeEventListener("keydown",s),o&&(document.body.style.overflow="unset");}),[p,s,o]);};var w={12:"h-[12px] w-[12px]",16:"h-[16px] w-[16px]",18:"h-[18px] w-[18px]",20:"h-[20px] w-[20px]",24:"h-[24px] w-[24px]",32:"h-[32px] w-[32px]",36:"h-[36px] w-[36px]",40:"h-[40px] w-[40px]",42:"h-[42px] w-[42px]",48:"h-[48px] w-[48px]",64:"h-[64px] w-[64px]",72:"h-[72px] w-[72px]"},v={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]"}},m=e=>String(e),b=(e,p=24)=>{let o=[],s={};if(e===undefined){let t=m(p);t?o.push(w[t]):(s.height=`${p}px`,s.width=`${p}px`);}if(typeof e=="number"){let t=m(e);t?o.push(w[t]):(s.height=`${e}px`,s.width=`${e}px`);}if(Array.isArray(e)){let t=m(p),n=[t&&w[t]||`h-[${p}px] w-[${p}px]`];e.forEach(x=>{if(typeof x=="string"){let[l,c]=x.split(":"),d=parseInt(c,10),h=m(d);o.push(h&&v[l]?.[h]||`${l}:h-[${d}px] ${l}:w-[${d}px]`);}}),o.push(...n);}if(typeof e=="string"){let[t,n]=e.split(":"),x=parseInt(n,10),l=m(x);o.push(l&&v[t]?.[l]||`${t}:h-[${x}px] ${t}:w-[${x}px]`);}return {responsiveSizeClasses:o.join(" "),responsiveSizeStyles:s}};var $={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB",disabled:"#888888",danger:"#FF0000"},g=i.forwardRef(({name:e,size:p=24,color:o="primary",title:s,className:t,style:n={},...x},l)=>{let c=IconMap[e],{responsiveSizeClasses:d,responsiveSizeStyles:h}=b(p,24);return i.createElement("div",{className:a("flex justify-center items-center",d,t),style:{"--icon-stroke":$[o],...h,...n}},i.createElement(c,{ref:l,"aria-hidden":!s,"aria-label":s,stroke:e.includes("filled")?undefined:$[o],...x}))});g.displayName="Icon";var S="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100";var u=i.forwardRef(({children:e,type:p="button",className:o,disabled:s,...t},n)=>i.createElement("button",{ref:n,type:p,disabled:s,className:a("appearance-none hover:opacity-80 transition-all active:scale-95",S,s&&"opacity-50 cursor-not-allowed",o),...t},e));u.displayName="Pressable";var K=({children:e,open:p,onClose:o,className:s,showCloseButton:t=true})=>(y({Escape:o},{isActive:p,preventScroll:true}),i.createElement(r.Root,{open:p,onOpenChange:o},i.createElement(r.Portal,null,i.createElement(r.Overlay,{className:a("fixed inset-0 z-50 bg-sidebarOverlay backdrop-blur-[2px]","data-[state=open]:animate-overlay-show","data-[state=closed]:animate-overlay-hide")}),i.createElement(r.Content,{className:a("fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2","w-[90vw] max-w-[90vw] max-h-[90vh]","rounded-xl overflow-hidden","data-[state=open]:animate-in data-[state=closed]:animate-out","data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0","data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95","data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2","data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]",s)},e,t&&i.createElement(r.Close,{asChild:true},i.createElement(u,{className:"inline-flex items-center justify-center text-secondary absolute top-4 right-4","aria-label":"Close"},i.createElement(g,{name:"close",size:12})))))));K.displayName="Modal";export{K as Modal};//# sourceMappingURL=Modal.js.map
|
|
2
|
+
//# sourceMappingURL=Modal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/usePortalKeyboardEvent.ts","../../src/utils/responsive.ts","../../src/components/Icon.tsx","../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/components/Modal.tsx"],"names":["cn","inputs","twMerge","clsx","usePortalKeyboardEvent","eventMap","isActive","preventScroll","handleKeyDown","useCallback","event","handler","useEffect","BASE_SIZES","RESPONSIVE_SIZES","getSizeKey","size","getResponsiveSize","baseSize","classes","styles","key","baseKey","responsiveClasses","s","breakpoint","valueStr","value","valueKey","COLOR_MAP","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","responsiveSizeClasses","responsiveSizeStyles","focusRingStyles","Pressable","children","type","disabled","Modal","open","onClose","showCloseButton"],"mappings":"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","file":"Modal.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import { useCallback, useEffect } from \"react\";\n\ntype KeyboardEventHandler = (event: KeyboardEvent) => void;\n\ntype KeyboardEventOptions = {\n /**\n * Whether the event should be active\n */\n isActive?: boolean;\n /**\n * Whether to prevent body scroll when active\n * @default false\n */\n preventScroll?: boolean;\n};\n\n/**\n * Hook for handling keyboard events within portals\n * @param eventMap - Map of keyboard events to their handlers\n * @param options - Options for the keyboard events\n * @example\n * ```tsx\n * const handleKeyboardEvents = usePortalKeyboardEvent({\n * Escape: onClose,\n * Enter: onConfirm,\n * }, { isActive: isOpen });\n * ```\n */\nexport const usePortalKeyboardEvent = (\n eventMap: Record<string, KeyboardEventHandler>,\n { isActive = true, preventScroll = false }: KeyboardEventOptions = {}\n) => {\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n const handler = eventMap[event.key];\n if (handler) {\n handler(event);\n }\n },\n [eventMap]\n );\n\n useEffect(() => {\n if (isActive) {\n document.addEventListener(\"keydown\", handleKeyDown);\n if (preventScroll) {\n document.body.style.overflow = \"hidden\";\n }\n }\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n if (preventScroll) {\n document.body.style.overflow = \"unset\";\n }\n };\n }, [isActive, handleKeyDown, preventScroll]);\n};\n","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 { 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, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable = React.forwardRef<HTMLButtonElement, PressableProps>(\n ({ children, type = \"button\", className, disabled, ...props }, ref) => (\n <button\n ref={ref}\n type={type}\n disabled={disabled}\n className={cn(\n \"appearance-none hover:opacity-80 transition-all active:scale-95\",\n focusRingStyles,\n disabled && \"opacity-50 cursor-not-allowed\",\n className\n )}\n {...props}\n >\n {children}\n </button>\n )\n);\n\nPressable.displayName = \"Pressable\";\n","import * as Dialog from \"@radix-ui/react-dialog\";\nimport React, { type ReactNode } from \"react\";\nimport { cn } from \"../utils\";\nimport { usePortalKeyboardEvent } from \"../utils/usePortalKeyboardEvent\";\nimport { Icon } from \"./Icon\";\nimport { Pressable } from \"./Pressable\";\n\nexport type ModalProps = {\n /**\n * The content to be rendered inside the modal\n */\n children: ReactNode;\n /**\n * Whether the modal is open\n */\n open: boolean;\n /**\n * Callback fired when the modal is closed\n */\n onClose: () => void;\n /**\n * Additional class names to be applied to the modal\n */\n className?: string;\n /**\n * Whether to show the close button\n * @default true\n */\n showCloseButton?: boolean;\n};\n\nexport const Modal = ({\n children,\n open,\n onClose,\n className,\n showCloseButton = true\n}: ModalProps) => {\n usePortalKeyboardEvent(\n { Escape: onClose },\n { isActive: open, preventScroll: true }\n );\n\n return (\n <Dialog.Root open={open} onOpenChange={onClose}>\n <Dialog.Portal>\n <Dialog.Overlay\n className={cn(\n \"fixed inset-0 z-50 bg-sidebarOverlay backdrop-blur-[2px]\",\n \"data-[state=open]:animate-overlay-show\",\n \"data-[state=closed]:animate-overlay-hide\"\n )}\n />\n <Dialog.Content\n className={cn(\n \"fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2\",\n \"w-[90vw] max-w-[90vw] max-h-[90vh]\",\n \"rounded-xl overflow-hidden\",\n \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n \"data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2\",\n \"data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]\",\n className\n )}\n >\n {children}\n {showCloseButton && (\n <Dialog.Close asChild>\n <Pressable\n className=\"inline-flex items-center justify-center text-secondary absolute top-4 right-4\"\n aria-label=\"Close\"\n >\n <Icon name=\"close\" size={12} />\n </Pressable>\n </Dialog.Close>\n )}\n </Dialog.Content>\n </Dialog.Portal>\n </Dialog.Root>\n );\n};\n\nModal.displayName = \"Modal\";\n"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
'use strict';var
|
|
1
|
+
'use strict';var u=require('react'),O=require('@radix-ui/react-popover'),V=require('@radix-ui/react-collapsible'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),icons=require('@deckai/icons'),P=require('@radix-ui/react-tooltip');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var u__namespace=/*#__PURE__*/_interopNamespace(u);var O__namespace=/*#__PURE__*/_interopNamespace(O);var V__namespace=/*#__PURE__*/_interopNamespace(V);var P__namespace=/*#__PURE__*/_interopNamespace(P);function g(...t){return tailwindMerge.twMerge(clsx.clsx(t))}var xe="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100";var ue="ring-2 ring-primary-100";var ne={12:"h-[12px] w-[12px]",16:"h-[16px] w-[16px]",18:"h-[18px] w-[18px]",20:"h-[20px] w-[20px]",24:"h-[24px] w-[24px]",32:"h-[32px] w-[32px]",36:"h-[36px] w-[36px]",40:"h-[40px] w-[40px]",42:"h-[42px] w-[42px]",48:"h-[48px] w-[48px]",64:"h-[64px] w-[64px]",72:"h-[72px] w-[72px]"},fe={sm:{12:"sm:h-[12px] sm:w-[12px]",16:"sm:h-[16px] sm:w-[16px]",18:"sm:h-[18px] sm:w-[18px]",20:"sm:h-[20px] sm:w-[20px]",24:"sm:h-[24px] sm:w-[24px]",32:"sm:h-[32px] sm:w-[32px]",36:"sm:h-[36px] sm:w-[36px]",40:"sm:h-[40px] sm:w-[40px]",42:"sm:h-[42px] sm:w-[42px]",48:"sm:h-[48px] sm:w-[48px]",64:"sm:h-[64px] sm:w-[64px]",72:"sm:h-[72px] sm:w-[72px]"},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]"}},W=t=>String(t),ge=(t,o=24)=>{let r=[],a={};if(t===undefined){let s=W(o);s?r.push(ne[s]):(a.height=`${o}px`,a.width=`${o}px`);}if(typeof t=="number"){let s=W(t);s?r.push(ne[s]):(a.height=`${t}px`,a.width=`${t}px`);}if(Array.isArray(t)){let s=W(o),p=[s&&ne[s]||`h-[${o}px] w-[${o}px]`];t.forEach(c=>{if(typeof c=="string"){let[i,f]=c.split(":"),d=parseInt(f,10),v=W(d);r.push(v&&fe[i]?.[v]||`${i}:h-[${d}px] ${i}:w-[${d}px]`);}}),r.push(...p);}if(typeof t=="string"){let[s,p]=t.split(":"),c=parseInt(p,10),i=W(c);r.push(i&&fe[s]?.[i]||`${s}:h-[${c}px] ${s}:w-[${c}px]`);}return {responsiveSizeClasses:r.join(" "),responsiveSizeStyles:a}};var he={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB",disabled:"#888888",danger:"#FF0000"},I=u__namespace.default.forwardRef(({name:t,size:o=24,color:r="primary",title:a,className:s,style:p={},...c},i)=>{let f=icons.IconMap[t],{responsiveSizeClasses:d,responsiveSizeStyles:v}=ge(o,24);return u__namespace.default.createElement("div",{className:g("flex justify-center items-center",d,s),style:{"--icon-stroke":he[r],...v,...p}},u__namespace.default.createElement(f,{ref:i,"aria-hidden":!a,"aria-label":a,stroke:t.includes("filled")?undefined:he[r],...c}))});I.displayName="Icon";var Ie={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},Re=t=>{let[o,r]=t.split("-");return o==="heading"?Ie[r]||"p":o==="label"?"label":"p"},Ae={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},Oe=t=>t?(Array.isArray(t)?t:[t]).map(r=>{if(r.includes(":")){let[a,s]=r.split(":");return `${a}:text-${s}`}return `text-${r}`}).join(" "):"text-body-default",h=u__namespace.default.forwardRef(({variant:t="body-default",color:o="primary",as:r,className:a,children:s,weight:p,...c},i)=>{let f=Oe(t),d=o==="inherit"?"text-inherit":`text-${o}`,v=u__namespace.default.useMemo(()=>{let b=typeof t=="string"?t.split(":").pop():Array.isArray(t)?t[0].split(":").pop():"body-default";return Re(b)},[t]);return u__namespace.default.createElement(r||v,{ref:i,className:`
|
|
2
2
|
font-sans antialiased
|
|
3
|
-
${
|
|
4
|
-
${
|
|
5
|
-
${
|
|
3
|
+
${f}
|
|
4
|
+
${d}
|
|
5
|
+
${p&&`!${Ae[p]}`}
|
|
6
6
|
${a}
|
|
7
|
-
`,...g},l)});y.displayName="Text";var ie=d__namespace.forwardRef(({className:t,end:o,iconName:n,color:a,size:l,title:u,label:g,labelClassName:i,id:x,children:m,forceShowFocusRing:w,error:T,errorMessage:f,helperText:C,showCharacterCount:N,maxLength:A,value:L,defaultValue:s,onChange:E,...v},S)=>{let[j,F]=d__namespace.useState(L?.toString()||s?.toString()||"");d__namespace.useEffect(()=>{L!==void 0&&F(L.toString());},[L]);let p=d__namespace.useCallback(z=>{let V=z.target.value;F(V),E?.(z);},[E]),M=j.length,Q=N||!!A;return d__namespace.createElement("div",{className:"gap-1 flex flex-col"},g&&d__namespace.createElement(y,{variant:"label-default",htmlFor:x,as:"label",color:T?"danger":"primary",className:b(i)},g),d__namespace.createElement("div",{className:b("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",{"border-secondary-50":!T&&!w,"border-tertiary-10":T,[se]:w})},d__namespace.createElement("div",{className:"flex relative"},d__namespace.createElement("input",{ref:S,id:x,className:b("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",o&&"pr-10",t),value:j,maxLength:A,onChange:p,"aria-invalid":T,...v}),(o||n)&&d__namespace.createElement("div",{className:"absolute inset-y-0 right-0 flex items-center"},n?d__namespace.createElement(D,{name:n,color:T?"danger":"secondary",size:l,title:u}):o)),m),d__namespace.createElement("div",{className:"flex justify-between gap-2"},T&&f||C?d__namespace.createElement(y,{variant:"body-xxs",color:T?"danger":"secondary",className:"mt-1"},T?f:C):null,Q&&d__namespace.createElement(y,{variant:"body-xxs",color:T?"danger":"secondary",className:"text-right mt-1"},d__namespace.createElement(y,{variant:"body-xxs",as:"span",color:"primary-100",className:"font-bold"},M),A&&`/${A}`," characters")))});var Ne=({text:t,highlight:o})=>{if(!o)return d__namespace.default.createElement(d__namespace.default.Fragment,null,t);let n=t.split(new RegExp(`(${o})`,"i"));return d__namespace.default.createElement(d__namespace.default.Fragment,null,n.map((a,l)=>a.toLowerCase()===o.toLowerCase()?d__namespace.default.createElement("span",{key:l,className:"font-bold"},a):a))},pe=d__namespace.default.forwardRef(({value:t,label:o,onChange:n,onKeyDown:a,onMouseEnter:l,onMouseLeave:u,selected:g,color:i,disabled:x,className:m,id:w,role:T,"aria-selected":f,searchValue:C=""},N)=>d__namespace.default.createElement("button",{ref:N,type:"button",id:w,role:T,"aria-selected":f,disabled:x,className:b("relative w-full text-left px-2 py-1.5 text-sm rounded outline-none","cursor-pointer hover:bg-gray-100","disabled:opacity-50 disabled:cursor-not-allowed",g&&"bg-gray-100","flex items-center gap-2",m),onClick:()=>{n?.(t);},onKeyDown:a,onMouseEnter:l,onMouseLeave:u},d__namespace.default.createElement(y,{variant:"body-default-medium",color:i==="danger"?"danger":"inherit"},typeof o=="string"?d__namespace.default.createElement(Ne,{text:o,highlight:C}):o)));var X=d__namespace.default.forwardRef(({children:t,type:o="button",className:n,disabled:a,...l},u)=>d__namespace.default.createElement("button",{ref:u,type:o,disabled:a,className:b("appearance-none hover:opacity-80 transition-all active:scale-95",ae,a&&"opacity-50 cursor-not-allowed",n),...l},t));X.displayName="Pressable";var ue=({children:t,color:o="primary",className:n,onClose:a,...l})=>{let[u,g]=d.useState(!1),i=d.useCallback(()=>{g(!0);},[]),x=d.useCallback(()=>{g(!1);},[]),m=d__namespace.default.createElement("div",{className:b("flex gap-2",a?"justify-between items-center":"items-center justify-center","hover:bg-primary-100 rounded bg-secondary-400 px-2 py-1 sm:px-3 sm:py-1.5 h-min hover:text-white",o==="primary"?"text-primary-100":"text-primary",n),onMouseEnter:i,onMouseLeave:x},typeof t=="string"?d__namespace.default.createElement(y,{color:"inherit",variant:["md:body-default-medium","body-xxs-medium"],className:"truncate pt-0.5"},t):t,a&&d__namespace.default.createElement(X,{...l,onClick:a,className:"flex items-center justify-center"},d__namespace.default.createElement(D,{name:"close",size:10,color:u?"white":"primaryBlue"})));return a?m:d__namespace.default.createElement(X,{...l},m)};var oe=d.forwardRef(({value:t,suggestion:o,placeholder:n,onChange:a,onKeyDown:l,label:u,labelClassName:g,id:i,disabled:x,end:m,className:w,forceShowFocusRing:T,error:f,errorMessage:C,helperText:N,"aria-controls":A,"aria-activedescendant":L,"aria-autocomplete":s},E)=>d__namespace.default.createElement("div",{className:"gap-1 flex flex-col"},u&&d__namespace.default.createElement(y,{variant:"label-default",htmlFor:i,as:"label",color:f?"danger":"primary",className:b(g)},u),d__namespace.default.createElement("div",{className:b("relative flex flex-col gap-2 w-full rounded-lg border bg-background-0 px-3 md:py-3 py-2 text-secondary ring-offset-background disabled:opacity-50",{"border-secondary-50":!f,"border-tertiary-10":f,"ring-2 ring-offset-2":T,"focus-within:ring-2 focus-within:ring-offset-2":!T},w)},d__namespace.default.createElement("div",{className:"flex relative"},d__namespace.default.createElement("div",{className:"relative w-full"},d__namespace.default.createElement("input",{ref:E,id:i,value:t,onChange:v=>a(v.target.value),onKeyDown:l,disabled:x,placeholder:n,className:b("font-sans text-sm flex w-full file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-secondary text-primary disabled:cursor-not-allowed focus:outline-none bg-transparent",m&&"pr-10"),"aria-invalid":f,"aria-controls":A,"aria-activedescendant":L,"aria-autocomplete":s}),o&&d__namespace.default.createElement("div",{className:"absolute inset-0 text-secondary opacity-40 pointer-events-none text-sm"},t,o.slice(t.length))),m&&d__namespace.default.createElement("div",{className:"absolute inset-y-0 right-0 flex items-center"},m))),f&&C||N?d__namespace.default.createElement(y,{variant:"body-xxs",color:f?"danger":"secondary",className:"mt-1"},f?C:N):null));oe.displayName="AutocompleteInput";var Pt=({options:t,selectedValues:o,onSelectionChange:n,placeholder:a="Select items...",className:l,label:u,labelClassName:g,id:i,maxSelections:x,disabled:m,noOptionsMessage:w,loading:T,error:f,errorMessage:C,helperText:N,container:A,autocomplete:L=!1})=>{let[s,E]=d.useState(!1),[v,S]=d.useState(""),[j,F]=d.useState({}),[p,M]=d.useState(-1),[Q,z]=d.useState(-1),V=d.useRef(null),K=d.useRef(null),B=d.useMemo(()=>t.length>0&&"options"in t[0],[t]),U=d.useMemo(()=>t.length?B?t.reduce((e,r)=>[...e,...r.options],[]):t:[],[B,t]),re=d.useMemo(()=>U.filter(e=>o.includes(e.value)),[U,o]),O=d.useMemo(()=>x!==void 0&&o.length>=x,[x,o]),c=d.useMemo(()=>U.filter(e=>o.includes(e.value)||O?!1:v&&typeof e.label=="string"?e.label.toLowerCase().includes(v.toLowerCase()):!0),[U,v,o,O]),fe=d.useMemo(()=>B?t.map(e=>({...e,options:e.options.filter(r=>o.includes(r.value)||O?!1:v&&typeof r.label=="string"?r.label.toLowerCase().includes(v.toLowerCase()):!0)})).filter(e=>e.options.length>0):c.length>0?[{label:"",options:c}]:[],[B,t,v,o,c,O]),P=d.useCallback(e=>{o.includes(e)?n(o.filter(H=>H!==e)):O||n([...o,e]),K.current&&K.current.focus({preventScroll:!0});},[o,n,O]),ge=d.useCallback(e=>{F(r=>({...r,[e]:!r[e]}));},[]),Z=d.useMemo(()=>!L||!v||!s?"":c.find(r=>typeof r.label=="string"&&r.label.toLowerCase().startsWith(v.toLowerCase())&&r.label.toLowerCase()!==v.toLowerCase()&&!o.includes(r.value))?.label?.toString()||"",[L,v,c,s,o]),ne=d.useCallback(e=>{switch(e.key){case"ArrowDown":e.preventDefault(),e.altKey?E(!0):s?M(r=>r<c.length-1?r+1:0):(E(!0),M(0));break;case"ArrowUp":e.preventDefault(),e.altKey?E(!1):s?M(r=>r>0?r-1:c.length-1):(E(!0),M(c.length-1));break;case"PageUp":e.preventDefault(),s&&M(r=>Math.max(0,r-10));break;case"PageDown":e.preventDefault(),s&&M(r=>Math.min(c.length-1,r+10));break;case"Home":e.preventDefault(),s&&M(0);break;case"End":e.preventDefault(),s&&M(c.length-1);break;case"Enter":if(e.preventDefault(),p>=0&&c[p])P(c[p].value);else if(L&&Z){let r=c.find(H=>typeof H.label=="string"&&H.label.toLowerCase().startsWith(v.toLowerCase())&&!o.includes(H.value));r&&P(r.value);}break;case"Tab":s?p>=0&&c[p]&&(e.preventDefault(),P(c[p].value)):(e.preventDefault(),E(!0),M(0));break;case"Escape":e.preventDefault(),E(!1),S("");break}},[s,p,c,P,L,Z,v,o]),be=d.useCallback(e=>{switch(e.key){case"ArrowDown":e.preventDefault(),M(r=>r<c.length-1?r+1:0);break;case"ArrowUp":e.preventDefault(),M(r=>r>0?r-1:c.length-1);break;case"Enter":case"Space":e.preventDefault(),p>=0&&c[p]&&P(c[p].value);break;case"Escape":e.preventDefault(),E(!1),K.current?.focus();break;case"Tab":e.preventDefault(),p>=0&&c[p]&&P(c[p].value);break}},[p,c,P]);return d.useEffect(()=>{if(s){let e=K.current;if(e){e.focus({preventScroll:!0});let r=e.value.length;e.setSelectionRange(r,r);}}},[s]),d.useEffect(()=>{s||M(-1);},[s]),d.useEffect(()=>{if(s&&p>=0&&V.current){let e=V.current.querySelector(`[id="${i}-option-${p}"]`);e&&e.scrollIntoView({block:"nearest",behavior:"smooth"});}},[p,s,i]),d.useEffect(()=>{s&&p===-1&&M(0);},[s,p]),d.useEffect(()=>{if(B){let e=t.reduce((r,H)=>({...r,[H.label]:!0}),{});F(e);}},[B,t]),d__namespace.default.createElement("div",{className:b("flex flex-col gap-2",l)},u&&d__namespace.default.createElement(y,{variant:"label-default",htmlFor:i,as:"label",color:f?"danger":"primary",className:b(g)},u),d__namespace.default.createElement(I__namespace.Root,{open:s&&!m,onOpenChange:e=>{m||(E(e),e||(S(""),M(-1)));}},d__namespace.default.createElement("div",{className:"relative w-full font-sans text-secondary"},d__namespace.default.createElement(I__namespace.Trigger,{asChild:!0},d__namespace.default.createElement("button",{type:"button",className:"w-full text-left",disabled:m},L?d__namespace.default.createElement(oe,{ref:K,id:i,placeholder:a,value:v,suggestion:Z,onChange:e=>{S(e),s||E(!0);},onKeyDown:ne,className:"flex-1",forceShowFocusRing:s,disabled:m,error:f,"aria-expanded":s,"aria-haspopup":"listbox","aria-controls":`${i}-listbox`,"aria-activedescendant":p>=0?`${i}-option-${p}`:void 0}):d__namespace.default.createElement(ie,{ref:K,id:i,placeholder:a,value:v,onChange:e=>{S(e.target.value),s||E(!0);},onKeyDown:ne,className:"flex-1",forceShowFocusRing:s,error:f,"aria-expanded":s,"aria-haspopup":"listbox","aria-controls":`${i}-listbox`,"aria-activedescendant":p>=0?`${i}-option-${p}`:void 0,disabled:m||!!x&&o.length>=x}))),d__namespace.default.createElement(I__namespace.Portal,{container:A},d__namespace.default.createElement(I__namespace.Content,{className:"w-[--radix-popover-trigger-width] p-1 bg-white rounded-md shadow-lg border z-[9999] data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out overflow-y-scroll outline-none",side:"bottom",align:"start",sideOffset:8,onOpenAutoFocus:e=>e.preventDefault(),onCloseAutoFocus:e=>e.preventDefault(),onFocusOutside:e=>e.preventDefault(),onInteractOutside:e=>{e.preventDefault(),E(!1),S(""),M(-1);}},d__namespace.default.createElement("div",{ref:V,className:"max-h-60 !overflow-y-scroll flex flex-col items-start outline-none",role:"listbox",id:`${i}-listbox`,"aria-label":u,"aria-multiselectable":"true","aria-busy":T},T?d__namespace.default.createElement(y,{variant:"label-default",className:"text-secondary p-2"},"Loading..."):c.length>0?fe.map((e,r)=>d__namespace.default.createElement(G__namespace.Root,{key:e.label||r,className:"w-full",open:j[e.label]??!0,onOpenChange:()=>e.label&&ge(e.label)},e.label&&d__namespace.default.createElement(G__namespace.Trigger,{asChild:!0},d__namespace.default.createElement("div",{className:"w-full flex items-center justify-between px-2 py-1.5 hover:bg-gray-50",tabIndex:-1},d__namespace.default.createElement(y,{variant:"body-default-bold",color:"secondary"},e.label),d__namespace.default.createElement(D,{name:"arrow-down",className:b("transition-transform",j[e.label]&&"rotate-180"),size:16}))),d__namespace.default.createElement(G__namespace.Content,{className:"data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up"},e.options.map((H,ye)=>{let J=c.findIndex(he=>he.value===H.value);return d__namespace.default.createElement(pe,{key:`${r}-${ye}`,label:H.label,value:H.value,onChange:P,onKeyDown:be,className:"pl-4",selected:Q===J||Q===-1&&p===J,id:`${i}-option-${J}`,role:"option","aria-selected":o.includes(H.value),searchValue:v,onMouseEnter:()=>z(J),onMouseLeave:()=>z(-1)})})))):d__namespace.default.createElement(y,{variant:"label-default",className:"text-secondary p-2"},w||"No results found")))))),re.length>0&&d__namespace.default.createElement("div",{className:"flex flex-col gap-2"},d__namespace.default.createElement("div",{className:"flex flex-wrap gap-2"},re.map(e=>d__namespace.default.createElement(ue,{key:e.value,onClose:()=>P(e.value),disabled:m},e.label))),O&&d__namespace.default.createElement(y,{variant:"body-xxs",color:"secondary"},"Maximum of ",x," items selected")),f&&C||N?d__namespace.default.createElement(y,{variant:"body-xxs",color:f?"danger":"secondary",className:"mt-1"},f?C:N):null)};exports.MultiSelectCombobox=Pt;//# sourceMappingURL=MultiSelectCombobox.cjs.map
|
|
7
|
+
`,...c},s)});h.displayName="Text";var ee=u__namespace.forwardRef(({className:t,end:o,iconName:r,color:a,size:s,title:p,label:c,labelClassName:i,id:f,children:d,forceShowFocusRing:v,error:w,errorMessage:b,helperText:S,showCharacterCount:H,maxLength:N,value:L,defaultValue:l,onChange:M,disabled:T,...D},Q)=>{let[F,m]=u__namespace.useState(L?.toString()||l?.toString()||"");u__namespace.useEffect(()=>{L!==undefined&&m(L.toString());},[L]);let E=u__namespace.useCallback(G=>{let A=G.target.value;m(A),M?.(G);},[M]),Z=F.length,J=H||!!N;return u__namespace.createElement("div",{className:"gap-1 flex flex-col"},c&&u__namespace.createElement(h,{variant:"label-default",htmlFor:f,as:"label",color:w?"danger":"primary",className:g(i)},c),u__namespace.createElement("div",{className:g("relative flex flex-col gap-2 w-full rounded-lg border bg-background-0 px-3 md:py-3 py-2 text-secondary transition-colors duration-150",!w&&!v&&"border-secondary-50",w&&"border-tertiary-10",T&&"cursor-not-allowed opacity-50","focus-within:ring-2 focus-within:ring-primary-100",v&&ue)},u__namespace.createElement("div",{className:"flex relative"},u__namespace.createElement("input",{ref:Q,id:f,className:g("font-sans text-sm flex w-full file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-secondary text-primary disabled:cursor-not-allowed focus:outline-none rounded-lg",o&&"pr-10",t),value:F,maxLength:N,onChange:E,"aria-invalid":w,disabled:T,...D}),(o||r)&&u__namespace.createElement("div",{className:"absolute inset-y-0 right-0 flex items-center"},r?u__namespace.createElement(I,{name:r,color:w?"danger":"secondary",size:s,title:p}):o)),d),u__namespace.createElement("div",{className:"flex justify-between gap-2"},w&&b||S?u__namespace.createElement(h,{variant:"body-xxs",color:w?"danger":"secondary",className:"mt-1"},w?b:S):null,J&&u__namespace.createElement(h,{variant:"body-xxs",color:w?"danger":"secondary",className:"text-right mt-1"},u__namespace.createElement(h,{variant:"body-xxs",as:"span",color:"primary-100",className:"font-bold"},Z),N&&`/${N}`," characters")))});var ye={pink:"bg-tertiary-5",orange:"bg-tertiary-15",green:"bg-tertiary-25",purple:"bg-secondary-300"},De=t=>{let o=Object.keys(ye),r=t.split("").reduce((p,c)=>c.charCodeAt(0)+((p<<5)-p),0),a=Math.abs(r)%o.length;return o[a]},ie=u__namespace.forwardRef(({className:t,variant:o,iconName:r,children:a,...s},p)=>{let c=o||(typeof a=="string"?De(a):"pink");return u__namespace.createElement("span",{ref:p,className:g("inline-flex items-center gap-2","rounded px-2 py-1.5","text-sm font-medium",ye[c],t),...s},r&&u__namespace.createElement(I,{size:16,name:r}),u__namespace.createElement(h,{variant:"body-xxs-semibold",className:"mt-0.5"},a))});ie.displayName="Badge";var be=({content:t,children:o,side:r="bottom",align:a="center",className:s,delayDuration:p=200,defaultOpen:c,open:i,onOpenChange:f,longPressDuration:d=500})=>{let[v,w]=u.useState(c||false),b=null,S=i??v,H=u.useCallback(l=>{i||w(l),f?.(l);},[i,f]),N=u.useCallback(()=>{b=setTimeout(()=>{H(true);},d);},[H,d]),L=u.useCallback(()=>{b&&(clearTimeout(b),b=null),setTimeout(()=>H(false),1500);},[b,H]);return u__namespace.createElement(P__namespace.Provider,{delayDuration:p},u__namespace.createElement(P__namespace.Root,{open:S,onOpenChange:H},u__namespace.createElement(P__namespace.Trigger,{asChild:true},u__namespace.createElement("span",{tabIndex:0,onTouchStart:N,onTouchEnd:L,onTouchCancel:L},o)),u__namespace.createElement(P__namespace.Portal,null,u__namespace.createElement(P__namespace.Content,{side:r,align:a,sideOffset:4,className:g("z-50 overflow-hidden rounded-lg","bg-black px-3 py-1.5","text-xs text-white","animate-in fade-in-0 zoom-in-95","data-[state=closed]:animate-out data-[state=closed]:fade-out-0","data-[side=bottom]:slide-in-from-top-2","data-[side=top]:slide-in-from-bottom-2","select-none","max-w-60","touch-none",s)},typeof t=="string"?u__namespace.createElement(h,{variant:"body-default-medium",color:"white"},t):t,u__namespace.createElement(P__namespace.Arrow,{className:"fill-text-primary",width:10,height:5})))))};var Be=({text:t,highlight:o})=>{if(!o)return u__namespace.default.createElement(u__namespace.default.Fragment,null,t);let r=t.split(new RegExp(`(${o})`,"i"));return u__namespace.default.createElement(u__namespace.default.Fragment,null,r.map((a,s)=>a.toLowerCase()===o.toLowerCase()?u__namespace.default.createElement("span",{key:s,className:"font-bold"},a):a))},Te=u__namespace.default.forwardRef(({value:t,label:o,onChange:r,onKeyDown:a,onMouseEnter:s,onMouseLeave:p,selected:c,color:i,disabled:f,className:d,id:v,role:w,"aria-selected":b,searchValue:S="",tooltip:H,onClick:N,badge:L},l)=>{let M=u__namespace.default.createElement("button",{ref:l,type:"button",id:v,role:w,"aria-selected":b,disabled:f,className:g("relative w-full text-left px-2 py-1.5 text-sm rounded outline-none","cursor-pointer hover:bg-gray-100","disabled:opacity-50 disabled:cursor-not-allowed",c&&"bg-gray-100","flex items-center gap-2",d),onClick:()=>{r?.(t),N?.();},onKeyDown:a,onMouseEnter:s,onMouseLeave:p},u__namespace.default.createElement(h,{variant:"body-default-medium",color:i==="danger"?"danger":"inherit"},typeof o=="string"?u__namespace.default.createElement(Be,{text:o,highlight:S}):o),L&&u__namespace.default.createElement(ie,null,L));return H?u__namespace.default.createElement(be,{content:H},M):M});var te=u__namespace.default.forwardRef(({children:t,type:o="button",className:r,disabled:a,...s},p)=>u__namespace.default.createElement("button",{ref:p,type:o,disabled:a,className:g("appearance-none hover:opacity-80 transition-all active:scale-95",xe,a&&"opacity-50 cursor-not-allowed",r),...s},t));te.displayName="Pressable";var Me=({children:t,color:o="primary",className:r,onClose:a,...s})=>{let[p,c]=u.useState(false),i=u.useCallback(()=>{c(true);},[]),f=u.useCallback(()=>{c(false);},[]),d=u__namespace.default.createElement("div",{className:g("flex gap-2",a?"justify-between items-center":"items-center justify-center","hover:bg-primary-100 rounded bg-secondary-400 px-2 py-1 sm:px-3 sm:py-1.5 h-min hover:text-white",o==="primary"?"text-primary-100":"text-primary",r),onMouseEnter:i,onMouseLeave:f},typeof t=="string"?u__namespace.default.createElement(h,{color:"inherit",variant:["md:body-default-medium","body-xxs-medium"],className:"truncate pt-0.5"},t):t,a&&u__namespace.default.createElement(te,{...s,onClick:a,className:"flex items-center justify-center"},u__namespace.default.createElement(I,{name:"close",size:10,color:p?"white":"primaryBlue"})));return a?d:u__namespace.default.createElement(te,{...s},d)};var ce=u.forwardRef(({value:t,suggestion:o,onChange:r,onKeyDown:a,className:s,"aria-controls":p,"aria-activedescendant":c,"aria-autocomplete":i,...f},d)=>u__namespace.default.createElement("div",{className:"relative w-full"},u__namespace.default.createElement(ee,{ref:d,value:t,onChange:v=>r(v.target.value),onKeyDown:a,className:g("bg-transparent",s),"aria-controls":p,"aria-activedescendant":c,"aria-autocomplete":i,...f}),o&&u__namespace.default.createElement("div",{className:"absolute inset-0 top-6 flex items-center px-3 md:py-3 py-2 text-secondary opacity-40 pointer-events-none text-sm"},t,o.slice(t.length))));ce.displayName="AutocompleteInput";var Yt=({options:t,selectedValues:o,onSelectionChange:r,placeholder:a="Select items...",className:s,label:p,labelClassName:c,id:i,maxSelections:f,disabled:d,noOptionsMessage:v,loading:w,error:b,errorMessage:S,helperText:H,container:N,autocomplete:L=false})=>{let[l,M]=u.useState(false),[T,D]=u.useState(""),[Q,F]=u.useState({}),[m,E]=u.useState(-1),[Z,J]=u.useState(-1),G=u.useRef(null),A=u.useRef(null),j=u.useMemo(()=>t.length>0&&"options"in t[0],[t]),X=u.useMemo(()=>t.length?j?t.reduce((e,n)=>[...e,...n.options],[]):t:[],[j,t]),me=u.useMemo(()=>X.filter(e=>o.includes(e.value)),[X,o]),K=u.useMemo(()=>f!==undefined&&o.length>=f,[f,o]),x=u.useMemo(()=>X.filter(e=>o.includes(e.value)||K?false:T&&typeof e.label=="string"?e.label.toLowerCase().includes(T.toLowerCase()):true),[X,T,o,K]),Le=u.useMemo(()=>j?t.map(e=>({...e,options:e.options.filter(n=>o.includes(n.value)||K?false:T&&typeof n.label=="string"?n.label.toLowerCase().includes(T.toLowerCase()):true)})).filter(e=>e.options.length>0):x.length>0?[{label:"",options:x}]:[],[j,t,T,o,x,K]),k=u.useCallback(e=>{o.includes(e)?r(o.filter(C=>C!==e)):K||r([...o,e]),A.current&&A.current.focus({preventScroll:true});},[o,r,K]),He=u.useCallback(e=>{F(n=>({...n,[e]:!n[e]}));},[]),re=u.useMemo(()=>!L||!T||!l?"":x.find(n=>typeof n.label=="string"&&n.label.toLowerCase().startsWith(T.toLowerCase())&&n.label.toLowerCase()!==T.toLowerCase()&&!o.includes(n.value))?.label?.toString()||"",[L,T,x,l,o]),de=u.useCallback(e=>{switch(e.key){case "ArrowDown":e.preventDefault(),e.altKey?M(true):l?E(n=>n<x.length-1?n+1:0):(M(true),E(0));break;case "ArrowUp":e.preventDefault(),e.altKey?M(false):l?E(n=>n>0?n-1:x.length-1):(M(true),E(x.length-1));break;case "PageUp":e.preventDefault(),l&&E(n=>Math.max(0,n-10));break;case "PageDown":e.preventDefault(),l&&E(n=>Math.min(x.length-1,n+10));break;case "Home":e.preventDefault(),l&&E(0);break;case "End":e.preventDefault(),l&&E(x.length-1);break;case "Enter":if(e.preventDefault(),m>=0&&x[m])k(x[m].value);else if(L&&re){let n=x.find(C=>typeof C.label=="string"&&C.label.toLowerCase().startsWith(T.toLowerCase())&&!o.includes(C.value));n&&k(n.value);}break;case "Tab":l?m>=0&&x[m]&&(e.preventDefault(),k(x[m].value)):(e.preventDefault(),M(true),E(0));break;case "Escape":e.preventDefault(),M(false),D("");break}},[l,m,x,k,L,re,T,o]),Ce=u.useCallback(e=>{switch(e.key){case "ArrowDown":e.preventDefault(),E(n=>n<x.length-1?n+1:0);break;case "ArrowUp":e.preventDefault(),E(n=>n>0?n-1:x.length-1);break;case "Enter":case "Space":e.preventDefault(),m>=0&&x[m]&&k(x[m].value);break;case "Escape":e.preventDefault(),M(false),A.current?.focus();break;case "Tab":e.preventDefault(),m>=0&&x[m]&&k(x[m].value);break}},[m,x,k]);return u.useEffect(()=>{if(l){let e=A.current;if(e){e.focus({preventScroll:true});let n=e.value.length;e.setSelectionRange(n,n);}}},[l]),u.useEffect(()=>{l||E(-1);},[l]),u.useEffect(()=>{if(l&&m>=0&&G.current){let e=G.current.querySelector(`[id="${i}-option-${m}"]`);e&&e.scrollIntoView({block:"nearest",behavior:"smooth"});}},[m,l,i]),u.useEffect(()=>{l&&m===-1&&E(0);},[l,m]),u.useEffect(()=>{if(j){let e=t.reduce((n,C)=>({...n,[C.label]:true}),{});F(e);}},[j,t]),u__namespace.default.createElement("div",{className:g("flex flex-col gap-2",s)},p&&u__namespace.default.createElement(h,{variant:"label-default",htmlFor:i,as:"label",color:b?"danger":"primary",className:g(c)},p),u__namespace.default.createElement(O__namespace.Root,{open:l&&!d,onOpenChange:e=>{d||(M(e),e||(D(""),E(-1)));}},u__namespace.default.createElement("div",{className:"relative w-full font-sans text-secondary"},u__namespace.default.createElement(O__namespace.Trigger,{asChild:true},u__namespace.default.createElement("button",{type:"button",className:"w-full text-left",disabled:d},L?u__namespace.default.createElement(ce,{ref:A,id:i,placeholder:a,value:T,suggestion:re,onChange:e=>{D(e),l||M(true);},onKeyDown:de,className:"flex-1",forceShowFocusRing:l,disabled:d,error:b,"aria-expanded":l,"aria-haspopup":"listbox","aria-controls":`${i}-listbox`,"aria-activedescendant":m>=0?`${i}-option-${m}`:undefined}):u__namespace.default.createElement(ee,{ref:A,id:i,placeholder:a,value:T,onChange:e=>{D(e.target.value),l||M(true);},onKeyDown:de,className:"flex-1",forceShowFocusRing:l,error:b,"aria-expanded":l,"aria-haspopup":"listbox","aria-controls":`${i}-listbox`,"aria-activedescendant":m>=0?`${i}-option-${m}`:undefined,disabled:d||!!f&&o.length>=f}))),u__namespace.default.createElement(O__namespace.Portal,{container:N},u__namespace.default.createElement(O__namespace.Content,{className:"w-[--radix-popover-trigger-width] p-1 bg-white rounded-md shadow-lg border z-[9999] data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out overflow-y-scroll outline-none",side:"bottom",align:"start",sideOffset:4,onOpenAutoFocus:e=>e.preventDefault(),onCloseAutoFocus:e=>e.preventDefault(),onFocusOutside:e=>e.preventDefault(),onInteractOutside:e=>{e.preventDefault(),M(false),D(""),E(-1);}},u__namespace.default.createElement("div",{ref:G,className:"max-h-60 !overflow-y-scroll flex flex-col items-start outline-none",role:"listbox",id:`${i}-listbox`,"aria-label":p,"aria-multiselectable":"true","aria-busy":w},w?u__namespace.default.createElement(h,{variant:"label-default",className:"text-secondary p-2"},"Loading..."):x.length>0?Le.map((e,n)=>u__namespace.default.createElement(V__namespace.Root,{key:e.label||n,className:"w-full",open:Q[e.label]??true,onOpenChange:()=>e.label&&He(e.label)},e.label&&u__namespace.default.createElement(V__namespace.Trigger,{asChild:true},u__namespace.default.createElement("div",{className:"w-full flex items-center justify-between px-2 py-1.5 hover:bg-gray-50",tabIndex:-1},u__namespace.default.createElement(h,{variant:"body-default-bold",color:"secondary"},e.label),u__namespace.default.createElement(I,{name:"arrow-down",className:g("transition-transform",Q[e.label]&&"rotate-180"),size:16}))),u__namespace.default.createElement(V__namespace.Content,{className:"data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up"},e.options.map((C,Pe)=>{let Y=x.findIndex($e=>$e.value===C.value);return u__namespace.default.createElement(Te,{key:`${n}-${Pe}`,label:C.label,value:C.value,onChange:k,onKeyDown:Ce,className:"pl-4",selected:Z===Y||Z===-1&&m===Y,id:`${i}-option-${Y}`,role:"option","aria-selected":o.includes(C.value),searchValue:T,onMouseEnter:()=>J(Y),onMouseLeave:()=>J(-1)})})))):u__namespace.default.createElement(h,{variant:"label-default",className:"text-secondary p-2"},v||"No results found")))))),me.length>0&&u__namespace.default.createElement("div",{className:"flex flex-col gap-2"},u__namespace.default.createElement("div",{className:"flex flex-wrap gap-2"},me.map(e=>u__namespace.default.createElement(Me,{key:e.value,onClose:()=>k(e.value),disabled:d},e.label))),K&&u__namespace.default.createElement(h,{variant:"body-xxs",color:"secondary"},"Maximum of ",f," items selected")),b&&S||H?u__namespace.default.createElement(h,{variant:"body-xxs",color:b?"danger":"secondary",className:"mt-1"},b?S:H):null)};exports.MultiSelectCombobox=Yt;//# sourceMappingURL=MultiSelectCombobox.cjs.map
|
|
8
8
|
//# sourceMappingURL=MultiSelectCombobox.cjs.map
|