@deckai/deck-ui 0.0.13 → 0.0.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -2
- package/dist/components/AboutCard.cjs +1 -9
- package/dist/components/AboutCard.cjs.map +1 -1
- package/dist/components/AboutCard.js +1 -9
- package/dist/components/AboutCard.js.map +1 -1
- package/dist/components/Accordion.cjs +2 -0
- package/dist/components/Accordion.cjs.map +1 -0
- package/dist/components/Accordion.js +2 -0
- package/dist/components/Accordion.js.map +1 -0
- package/dist/components/AddWorkCard.cjs +117 -0
- package/dist/components/AddWorkCard.cjs.map +1 -0
- package/dist/components/AddWorkCard.js +117 -0
- package/dist/components/AddWorkCard.js.map +1 -0
- package/dist/components/Avatar.cjs +1 -1
- package/dist/components/Avatar.cjs.map +1 -1
- package/dist/components/Avatar.js +1 -1
- package/dist/components/Avatar.js.map +1 -1
- package/dist/components/Badge.cjs +1 -1
- package/dist/components/Badge.cjs.map +1 -1
- package/dist/components/Badge.js +1 -1
- package/dist/components/Badge.js.map +1 -1
- package/dist/components/Breadcrumbs.cjs +1 -1
- package/dist/components/Breadcrumbs.cjs.map +1 -1
- package/dist/components/Breadcrumbs.js +1 -1
- package/dist/components/Breadcrumbs.js.map +1 -1
- package/dist/components/Button.cjs +2 -2
- package/dist/components/Button.cjs.map +1 -1
- package/dist/components/Button.js +2 -2
- package/dist/components/Button.js.map +1 -1
- package/dist/components/Carousel.cjs +2 -0
- package/dist/components/Carousel.cjs.map +1 -0
- package/dist/components/Carousel.js +2 -0
- package/dist/components/Carousel.js.map +1 -0
- package/dist/components/Collapsible.cjs +1 -1
- package/dist/components/Collapsible.cjs.map +1 -1
- package/dist/components/Collapsible.js +1 -1
- package/dist/components/Collapsible.js.map +1 -1
- package/dist/components/Combobox.cjs +1 -1
- package/dist/components/Combobox.cjs.map +1 -1
- package/dist/components/Combobox.js +1 -1
- package/dist/components/Combobox.js.map +1 -1
- package/dist/components/ContactItem.cjs +1 -1
- package/dist/components/ContactItem.cjs.map +1 -1
- package/dist/components/ContactItem.js +1 -1
- package/dist/components/ContactItem.js.map +1 -1
- package/dist/components/Dropdown.cjs +2 -0
- package/dist/components/Dropdown.cjs.map +1 -0
- package/dist/components/Dropdown.js +2 -0
- package/dist/components/Dropdown.js.map +1 -0
- package/dist/components/EditButton.cjs +2 -2
- package/dist/components/EditButton.cjs.map +1 -1
- package/dist/components/EditButton.js +2 -2
- 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.js +1 -1
- package/dist/components/Icon.js.map +1 -1
- package/dist/components/Input.cjs +1 -1
- package/dist/components/Input.cjs.map +1 -1
- package/dist/components/Input.js +1 -1
- package/dist/components/Input.js.map +1 -1
- package/dist/components/Link.cjs +1 -1
- package/dist/components/Link.cjs.map +1 -1
- package/dist/components/Link.js +1 -1
- package/dist/components/Link.js.map +1 -1
- package/dist/components/MultiSelectCombobox.cjs +1 -1
- package/dist/components/MultiSelectCombobox.cjs.map +1 -1
- package/dist/components/MultiSelectCombobox.js +1 -1
- package/dist/components/MultiSelectCombobox.js.map +1 -1
- package/dist/components/Navbar.cjs +2 -2
- package/dist/components/Navbar.cjs.map +1 -1
- package/dist/components/Navbar.js +2 -2
- package/dist/components/Navbar.js.map +1 -1
- package/dist/components/NavbarItem.cjs +1 -1
- package/dist/components/NavbarItem.cjs.map +1 -1
- package/dist/components/NavbarItem.js +1 -1
- package/dist/components/NavbarItem.js.map +1 -1
- package/dist/components/Option.cjs +1 -1
- package/dist/components/Option.cjs.map +1 -1
- package/dist/components/Option.js +1 -1
- 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 +1 -9
- package/dist/components/ProfileCard.cjs.map +1 -1
- package/dist/components/ProfileCard.js +1 -9
- package/dist/components/ProfileCard.js.map +1 -1
- package/dist/components/ProgressBar.cjs +2 -0
- package/dist/components/ProgressBar.cjs.map +1 -0
- package/dist/components/ProgressBar.js +2 -0
- package/dist/components/ProgressBar.js.map +1 -0
- package/dist/components/SegmentedTabs.cjs +10 -0
- package/dist/components/SegmentedTabs.cjs.map +1 -0
- package/dist/components/SegmentedTabs.js +10 -0
- package/dist/components/SegmentedTabs.js.map +1 -0
- 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/SocialCard.cjs +1 -1
- package/dist/components/SocialCard.cjs.map +1 -1
- package/dist/components/SocialCard.js +1 -1
- package/dist/components/SocialCard.js.map +1 -1
- package/dist/components/Spinner.cjs +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.js +1 -1
- package/dist/components/Switch.js.map +1 -1
- package/dist/components/Tabs.cjs +9 -1
- package/dist/components/Tabs.cjs.map +1 -1
- package/dist/components/Tabs.js +9 -1
- package/dist/components/Tabs.js.map +1 -1
- package/dist/components/Tag.cjs +1 -1
- package/dist/components/Tag.cjs.map +1 -1
- package/dist/components/Tag.js +1 -1
- package/dist/components/Tag.js.map +1 -1
- package/dist/components/Text.cjs +1 -1
- package/dist/components/Text.cjs.map +1 -1
- package/dist/components/Text.js +1 -1
- package/dist/components/Text.js.map +1 -1
- package/dist/components/TextArea.cjs +1 -1
- package/dist/components/TextArea.cjs.map +1 -1
- package/dist/components/TextArea.js +1 -1
- package/dist/components/TextArea.js.map +1 -1
- package/dist/components/Toast.cjs +10 -0
- package/dist/components/Toast.cjs.map +1 -0
- package/dist/components/Toast.js +10 -0
- package/dist/components/Toast.js.map +1 -0
- package/dist/components/ToastProvider.cjs +2 -0
- package/dist/components/ToastProvider.cjs.map +1 -0
- package/dist/components/ToastProvider.js +2 -0
- package/dist/components/ToastProvider.js.map +1 -0
- package/dist/components/Tooltip.cjs +1 -1
- package/dist/components/Tooltip.cjs.map +1 -1
- package/dist/components/Tooltip.js +1 -1
- package/dist/components/Tooltip.js.map +1 -1
- package/dist/components/WorkCard.cjs +1 -1
- package/dist/components/WorkCard.cjs.map +1 -1
- package/dist/components/WorkCard.js +1 -1
- package/dist/components/WorkCard.js.map +1 -1
- package/dist/index.cjs +111 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +111 -3
- package/dist/index.js.map +1 -1
- package/dist/styles/styles.css +1 -1
- package/package.json +7 -2
- package/dist/components/AboutCard.d.cts +0 -13
- package/dist/components/AboutCard.d.ts +0 -13
- package/dist/components/Avatar.d.cts +0 -12
- package/dist/components/Avatar.d.ts +0 -12
- package/dist/components/Badge.d.cts +0 -13
- package/dist/components/Badge.d.ts +0 -13
- package/dist/components/Breadcrumbs.d.cts +0 -15
- package/dist/components/Breadcrumbs.d.ts +0 -15
- package/dist/components/Button.d.cts +0 -38
- package/dist/components/Button.d.ts +0 -38
- package/dist/components/Collapsible.d.cts +0 -12
- package/dist/components/Collapsible.d.ts +0 -12
- package/dist/components/Combobox.d.cts +0 -20
- package/dist/components/Combobox.d.ts +0 -20
- package/dist/components/ContactItem.d.cts +0 -10
- package/dist/components/ContactItem.d.ts +0 -10
- package/dist/components/EditButton.d.cts +0 -12
- package/dist/components/EditButton.d.ts +0 -12
- package/dist/components/Icon.d.cts +0 -19
- package/dist/components/Icon.d.ts +0 -19
- package/dist/components/IconRenderer.d.cts +0 -13
- package/dist/components/IconRenderer.d.ts +0 -13
- package/dist/components/Illustration.d.cts +0 -10
- package/dist/components/Illustration.d.ts +0 -10
- package/dist/components/Input.d.cts +0 -18
- package/dist/components/Input.d.ts +0 -18
- package/dist/components/Link.d.cts +0 -13
- package/dist/components/Link.d.ts +0 -13
- package/dist/components/Logo.d.cts +0 -8
- package/dist/components/Logo.d.ts +0 -8
- package/dist/components/MultiSelectCombobox.d.cts +0 -21
- package/dist/components/MultiSelectCombobox.d.ts +0 -21
- package/dist/components/Navbar.d.cts +0 -19
- package/dist/components/Navbar.d.ts +0 -19
- package/dist/components/NavbarItem.d.cts +0 -13
- package/dist/components/NavbarItem.d.ts +0 -13
- package/dist/components/Option.d.cts +0 -11
- package/dist/components/Option.d.ts +0 -11
- package/dist/components/Pressable.d.cts +0 -6
- package/dist/components/Pressable.d.ts +0 -6
- package/dist/components/ProfileCard.d.cts +0 -17
- package/dist/components/ProfileCard.d.ts +0 -17
- package/dist/components/Sidebar.d.cts +0 -37
- package/dist/components/Sidebar.d.ts +0 -37
- package/dist/components/SocialCard.d.cts +0 -12
- package/dist/components/SocialCard.d.ts +0 -12
- package/dist/components/Spinner.d.cts +0 -19
- package/dist/components/Spinner.d.ts +0 -19
- package/dist/components/Switch.d.cts +0 -13
- package/dist/components/Switch.d.ts +0 -13
- package/dist/components/Tabs.d.cts +0 -16
- package/dist/components/Tabs.d.ts +0 -16
- package/dist/components/Tag.d.cts +0 -12
- package/dist/components/Tag.d.ts +0 -12
- package/dist/components/Text.d.cts +0 -46
- package/dist/components/Text.d.ts +0 -46
- package/dist/components/TextArea.d.cts +0 -19
- package/dist/components/TextArea.d.ts +0 -19
- package/dist/components/Tooltip.d.cts +0 -13
- package/dist/components/Tooltip.d.ts +0 -13
- package/dist/components/WorkCard.d.cts +0 -13
- package/dist/components/WorkCard.d.ts +0 -13
- package/dist/index.d.cts +0 -153
- package/dist/index.d.ts +0 -153
- package/dist/styles/fonts.d.cts +0 -2
- package/dist/styles/fonts.d.ts +0 -2
- package/dist/styles/styles.d.cts +0 -2
- package/dist/styles/styles.d.ts +0 -2
- package/dist/tailwind-CIZ10fKA.d.cts +0 -36
- package/dist/tailwind-CIZ10fKA.d.ts +0 -36
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Text.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"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../src/components/Text.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"],"mappings":"oJAsEMA,IAAAA,CAAAA,CAAmD,CACvD,EAAI,CAAA,IAAA,CACJ,GAAI,IACJ,CAAA,EAAA,CAAI,KACJ,EAAI,CAAA,IAAA,CACJ,GAAI,IACN,CAAA,CAEMC,EAAyBC,CAAwC,EAAA,CACrE,GAAM,CAACC,CAAUC,CAAAA,CAAI,EAAIF,CAAQ,CAAA,KAAA,CAAM,GAAG,CAE1C,CAAA,OAAIC,IAAa,SACRH,CAAAA,CAAAA,CAAoBI,CAAI,CAAA,EAAK,GAGlCD,CAAAA,CAAAA,GAAa,QACR,OAGF,CAAA,GACT,EAIME,CAAqC,CAAA,CACzC,MAAO,YACP,CAAA,OAAA,CAAS,cACT,CAAA,QAAA,CAAU,eACV,CAAA,IAAA,CAAM,WACR,CA0BMC,CAAAA,CAAAA,CACJC,GAEKA,CAEgB,CAAA,CAAA,KAAA,CAAM,QAAQA,CAAQ,CAAA,CAAIA,CAAW,CAAA,CAACA,CAAQ,CAAA,EAGhE,IAAKL,CAAY,EAAA,CAChB,GAAIA,CAAQ,CAAA,QAAA,CAAS,GAAG,CAAG,CAAA,CACzB,GAAM,CAACM,CAAYC,CAAAA,CAAe,EAAIP,CAAQ,CAAA,KAAA,CAAM,GAAG,CACvD,CAAA,OAAO,GAAGM,CAAU,CAAA,MAAA,EAASC,CAAe,CAAA,CAC9C,CACA,OAAO,QAAQP,CAAO,CAAA,CACxB,CAAC,CACA,CAAA,IAAA,CAAK,GAAG,CAZW,CAAA,mBAAA,CAeXQ,CAAOC,CAAAA,kBAAAA,CAAM,UACxB,CAAA,CACE,CACE,OAAAT,CAAAA,CAAAA,CAAU,eACV,KAAAU,CAAAA,CAAAA,CAAQ,UACR,EAAAC,CAAAA,CAAAA,CACA,SAAAC,CAAAA,CAAAA,CACA,QAAAC,CAAAA,CAAAA,CACA,OAAAC,CACA,CAAA,GAAGC,CACL,CACAC,CAAAA,CAAAA,GACG,CAEH,IAAMC,CAAAA,CAAoBb,CAAgBJ,CAAAA,CAAO,CAG3CkB,CAAAA,CAAAA,CACJR,IAAU,SAAY,CAAA,cAAA,CAAiB,aAAaA,CAAK,CAAA,CAAA,CAErDS,EAAmBV,kBAAM,CAAA,OAAA,CAAQ,IAAM,CAC3C,IAAMW,CAAAA,CACJ,OAAOpB,CAAY,EAAA,QAAA,CACfA,EAAQ,KAAM,CAAA,GAAG,EAAE,GAAI,EAAA,CACvB,KAAM,CAAA,OAAA,CAAQA,CAAO,CAAA,CACnBA,EAAQ,CAAC,CAAA,CAAE,MAAM,GAAG,CAAA,CAAE,KACtB,CAAA,cAAA,CACR,OAAOD,CAAAA,CAAsBqB,CAA4B,CAC3D,EAAG,CAACpB,CAAO,CAAC,CAIZ,CAAA,OAEES,mBAAA,aAJiBE,CAAAA,CAAAA,EAAMQ,CAItB,CAAA,CACC,GAAKH,CAAAA,CAAAA,CACL,UAAW,CAAyBC,sBAAAA,EAAAA,CAAiB,IAAIC,CAAY,CAAA,CAAA,EACnEJ,EAAS,CAAIX,CAAAA,EAAAA,CAAAA,CAAWW,CAAM,CAAC,CAAK,CAAA,CAAA,EACtC,IAAIF,CAAa,EAAA,EAAE,GAClB,GAAGG,CAAAA,CAAAA,CAEHF,CACH,CAEJ,CACF,EAEAL,CAAAA,CAAK,WAAc,CAAA,MAAA","file":"Text.cjs","sourcesContent":["import React from \"react\";\nimport { Typography } from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n | \"primary\"\n | \"secondary\"\n | \"white\"\n | \"primary-blue\"\n | \"disabled\"\n | \"danger\"\n | \"inherit\";\n\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 =\n color === \"inherit\" ? \"text-inherit\" : `text-text-${color}`;\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n"]}
|
package/dist/components/Text.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o from'react';var
|
|
1
|
+
import o from'react';var H={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},g=e=>{let[n,t]=e.split("-");return n==="heading"?H[t]||"p":n==="label"?"label":"p"},h={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},M=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[r,a]=t.split(":");return `${r}:text-${a}`}return `text-${t}`}).join(" "):"text-body-default",L=o.forwardRef(({variant:e="body-default",color:n="primary",as:t,className:r,children:a,weight:l,...s},p)=>{let T=M(e),i=n==="inherit"?"text-inherit":`text-text-${n}`,m=o.useMemo(()=>{let y=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return g(y)},[e]);return o.createElement(t||m,{ref:p,className:`font-sans antialiased ${T} ${i} ${l?`!${h[l]}`:""} ${r??""}`,...s},a)});L.displayName="Text";if (exports.default) module.exports = exports.default;export{L as Text};//# sourceMappingURL=Text.js.map
|
|
2
2
|
//# sourceMappingURL=Text.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Text.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"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../src/components/Text.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"],"mappings":"qBAsEMA,IAAAA,CAAAA,CAAmD,CACvD,EAAI,CAAA,IAAA,CACJ,GAAI,IACJ,CAAA,EAAA,CAAI,KACJ,EAAI,CAAA,IAAA,CACJ,GAAI,IACN,CAAA,CAEMC,EAAyBC,CAAwC,EAAA,CACrE,GAAM,CAACC,CAAUC,CAAAA,CAAI,EAAIF,CAAQ,CAAA,KAAA,CAAM,GAAG,CAE1C,CAAA,OAAIC,IAAa,SACRH,CAAAA,CAAAA,CAAoBI,CAAI,CAAA,EAAK,GAGlCD,CAAAA,CAAAA,GAAa,QACR,OAGF,CAAA,GACT,EAIME,CAAqC,CAAA,CACzC,MAAO,YACP,CAAA,OAAA,CAAS,cACT,CAAA,QAAA,CAAU,eACV,CAAA,IAAA,CAAM,WACR,CA0BMC,CAAAA,CAAAA,CACJC,GAEKA,CAEgB,CAAA,CAAA,KAAA,CAAM,QAAQA,CAAQ,CAAA,CAAIA,CAAW,CAAA,CAACA,CAAQ,CAAA,EAGhE,IAAKL,CAAY,EAAA,CAChB,GAAIA,CAAQ,CAAA,QAAA,CAAS,GAAG,CAAG,CAAA,CACzB,GAAM,CAACM,CAAYC,CAAAA,CAAe,EAAIP,CAAQ,CAAA,KAAA,CAAM,GAAG,CACvD,CAAA,OAAO,GAAGM,CAAU,CAAA,MAAA,EAASC,CAAe,CAAA,CAC9C,CACA,OAAO,QAAQP,CAAO,CAAA,CACxB,CAAC,CACA,CAAA,IAAA,CAAK,GAAG,CAZW,CAAA,mBAAA,CAeXQ,CAAOC,CAAAA,CAAAA,CAAM,UACxB,CAAA,CACE,CACE,OAAAT,CAAAA,CAAAA,CAAU,eACV,KAAAU,CAAAA,CAAAA,CAAQ,UACR,EAAAC,CAAAA,CAAAA,CACA,SAAAC,CAAAA,CAAAA,CACA,QAAAC,CAAAA,CAAAA,CACA,OAAAC,CACA,CAAA,GAAGC,CACL,CACAC,CAAAA,CAAAA,GACG,CAEH,IAAMC,CAAAA,CAAoBb,CAAgBJ,CAAAA,CAAO,CAG3CkB,CAAAA,CAAAA,CACJR,IAAU,SAAY,CAAA,cAAA,CAAiB,aAAaA,CAAK,CAAA,CAAA,CAErDS,EAAmBV,CAAM,CAAA,OAAA,CAAQ,IAAM,CAC3C,IAAMW,CAAAA,CACJ,OAAOpB,CAAY,EAAA,QAAA,CACfA,EAAQ,KAAM,CAAA,GAAG,EAAE,GAAI,EAAA,CACvB,KAAM,CAAA,OAAA,CAAQA,CAAO,CAAA,CACnBA,EAAQ,CAAC,CAAA,CAAE,MAAM,GAAG,CAAA,CAAE,KACtB,CAAA,cAAA,CACR,OAAOD,CAAAA,CAAsBqB,CAA4B,CAC3D,EAAG,CAACpB,CAAO,CAAC,CAIZ,CAAA,OAEES,EAAA,aAJiBE,CAAAA,CAAAA,EAAMQ,CAItB,CAAA,CACC,GAAKH,CAAAA,CAAAA,CACL,UAAW,CAAyBC,sBAAAA,EAAAA,CAAiB,IAAIC,CAAY,CAAA,CAAA,EACnEJ,EAAS,CAAIX,CAAAA,EAAAA,CAAAA,CAAWW,CAAM,CAAC,CAAK,CAAA,CAAA,EACtC,IAAIF,CAAa,EAAA,EAAE,GAClB,GAAGG,CAAAA,CAAAA,CAEHF,CACH,CAEJ,CACF,EAEAL,CAAAA,CAAK,WAAc,CAAA,MAAA","file":"Text.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\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 =\n color === \"inherit\" ? \"text-inherit\" : `text-text-${color}`;\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var t=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var t__namespace=/*#__PURE__*/_interopNamespace(t);function
|
|
1
|
+
'use strict';var t=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var t__namespace=/*#__PURE__*/_interopNamespace(t);function y(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var b="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var L={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},$=e=>{let[r,a]=e.split("-");return r==="heading"?L[a]||"p":r==="label"?"label":"p"},R={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},A=e=>e?(Array.isArray(e)?e:[e]).map(a=>{if(a.includes(":")){let[o,s]=a.split(":");return `${o}:text-${s}`}return `text-${a}`}).join(" "):"text-body-default",l=t__namespace.default.forwardRef(({variant:e="body-default",color:r="primary",as:a,className:o,children:s,weight:n,...i},p)=>{let c=A(e),T=r==="inherit"?"text-inherit":`text-text-${r}`,g=t__namespace.default.useMemo(()=>{let m=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return $(m)},[e]);return t__namespace.default.createElement(a||g,{ref:p,className:`font-sans antialiased ${c} ${T} ${n?`!${R[n]}`:""} ${o??""}`,...i},s)});l.displayName="Text";var O=({className:e,label:r,labelClassName:a,helperText:o,showCharacterCount:s,maxLength:n,id:i,value:p="",defaultValue:c,...T})=>{let[g,u]=t__namespace.useState(p?.toString()||c?.toString()||""),m=d=>{let M=d.target.value;u(M),T.onChange?.(d);},H=g.length,f=s||!!n;return t__namespace.createElement(t__namespace.Fragment,null,r&&t__namespace.createElement(l,{variant:"label-default",htmlFor:i,as:"label",className:y(a)},r),t__namespace.createElement("div",{className:"relative"},t__namespace.createElement("textarea",{id:i,value:p,defaultValue:c,maxLength:n,onChange:m,className:y(`min-h-[80px] w-full resize-y rounded-lg border border-secondary-50 bg-background-0 px-3 py-2 font-sans text-text placeholder:text-secondary ${b} disabled:cursor-not-allowed disabled:opacity-50`,e),...T}),t__namespace.createElement("div",{className:"flex justify-between gap-2"},o&&t__namespace.createElement(l,{variant:"label-default",color:"danger"},o),f&&t__namespace.createElement(l,{variant:"label-default",color:"secondary",className:"text-right self-end"},H,n&&`/${n}`," characters"))))};if (exports.default) module.exports = exports.default;exports.TextArea=O;//# sourceMappingURL=TextArea.cjs.map
|
|
2
2
|
//# sourceMappingURL=TextArea.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/tailwind.ts","../../src/components/Text.tsx","../../src/components/TextArea.tsx"],"names":["cn","inputs","twMerge","clsx","focusRingStyles","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","TextArea","label","labelClassName","helperText","showCharacterCount","maxLength","id","value","defaultValue","textValue","setTextValue","t","handleChange","e","newValue","characterCount","showCount"],"mappings":"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","file":"TextArea.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React from \"react\";\nimport {\n Colors,\n TextColorVariant,\n PrimaryShades,\n SecondaryShades,\n TertiaryShades,\n Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n ? TextColorVariant\n : T extends \"primary\"\n ? keyof PrimaryShades\n : T extends \"secondary\"\n ? keyof SecondaryShades\n : T extends \"tertiary\"\n ? keyof TertiaryShades\n : never;\n\ntype ColorKey = {\n [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: ColorKey | \"inherit\";\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"text-primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import * as React from \"react\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { Text } from \"./Text\";\n\nexport type TextAreaProps = {\n /** Additional classes for the container */\n className?: string;\n /** Label text for the textarea */\n label?: string;\n /** Additional classes for the label */\n labelClassName?: string;\n /** Helper text displayed below the textarea */\n helperText?: string;\n /** Character count display */\n showCharacterCount?: boolean;\n /** Maximum number of characters */\n maxLength?: number;\n} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nexport const TextArea = ({\n className,\n label,\n labelClassName,\n helperText,\n showCharacterCount,\n maxLength,\n id,\n value = \"\",\n defaultValue,\n ...props\n}: TextAreaProps) => {\n const [textValue, setTextValue] = React.useState(\n value?.toString() || defaultValue?.toString() || \"\"\n );\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n const newValue = e.target.value;\n setTextValue(newValue);\n props.onChange?.(e);\n };\n\n const characterCount = textValue.length;\n const showCount = showCharacterCount || !!maxLength;\n\n return (\n <>\n {label && (\n <Text\n variant=\"label-default\"\n htmlFor={id}\n as=\"label\"\n className={cn(labelClassName)}\n >\n {label}\n </Text>\n )}\n <div className=\"relative\">\n <textarea\n id={id}\n value={value}\n defaultValue={defaultValue}\n maxLength={maxLength}\n onChange={handleChange}\n className={cn(\n `min-h-[80px] w-full resize-y rounded-lg border border-secondary-50 bg-background-0 px-3 py-2 font-sans text-text-primary placeholder:text-secondary ${focusRingStyles} disabled:cursor-not-allowed disabled:opacity-50`,\n className\n )}\n {...props}\n />\n <div className=\"flex justify-between gap-2\">\n {helperText && (\n <Text variant=\"label-default\" color=\"tertiary-10\">\n {helperText}\n </Text>\n )}\n {showCount && (\n <Text\n variant=\"label-default\"\n color=\"text-secondary\"\n className=\"text-right self-end\"\n >\n {characterCount}\n {maxLength && `/${maxLength}`} characters\n </Text>\n )}\n </div>\n </div>\n </>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/tailwind.ts","../../src/components/Text.tsx","../../src/components/TextArea.tsx"],"names":["cn","inputs","twMerge","clsx","focusRingStyles","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","TextArea","label","labelClassName","helperText","showCharacterCount","maxLength","id","value","defaultValue","textValue","setTextValue","t","handleChange","e","newValue","characterCount","showCount"],"mappings":"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","file":"TextArea.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React from \"react\";\nimport { 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\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 =\n color === \"inherit\" ? \"text-inherit\" : `text-text-${color}`;\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import * as React from \"react\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { Text } from \"./Text\";\n\nexport type TextAreaProps = {\n /** Additional classes for the container */\n className?: string;\n /** Label text for the textarea */\n label?: string;\n /** Additional classes for the label */\n labelClassName?: string;\n /** Helper text displayed below the textarea */\n helperText?: string;\n /** Character count display */\n showCharacterCount?: boolean;\n /** Maximum number of characters */\n maxLength?: number;\n} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nexport const TextArea = ({\n className,\n label,\n labelClassName,\n helperText,\n showCharacterCount,\n maxLength,\n id,\n value = \"\",\n defaultValue,\n ...props\n}: TextAreaProps) => {\n const [textValue, setTextValue] = React.useState(\n value?.toString() || defaultValue?.toString() || \"\"\n );\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n const newValue = e.target.value;\n setTextValue(newValue);\n props.onChange?.(e);\n };\n\n const characterCount = textValue.length;\n const showCount = showCharacterCount || !!maxLength;\n\n return (\n <>\n {label && (\n <Text\n variant=\"label-default\"\n htmlFor={id}\n as=\"label\"\n className={cn(labelClassName)}\n >\n {label}\n </Text>\n )}\n <div className=\"relative\">\n <textarea\n id={id}\n value={value}\n defaultValue={defaultValue}\n maxLength={maxLength}\n onChange={handleChange}\n className={cn(\n `min-h-[80px] w-full resize-y rounded-lg border border-secondary-50 bg-background-0 px-3 py-2 font-sans text-text placeholder:text-secondary ${focusRingStyles} disabled:cursor-not-allowed disabled:opacity-50`,\n className\n )}\n {...props}\n />\n <div className=\"flex justify-between gap-2\">\n {helperText && (\n <Text variant=\"label-default\" color=\"danger\">\n {helperText}\n </Text>\n )}\n {showCount && (\n <Text\n variant=\"label-default\"\n color=\"secondary\"\n className=\"text-right self-end\"\n >\n {characterCount}\n {maxLength && `/${maxLength}`} characters\n </Text>\n )}\n </div>\n </div>\n </>\n );\n};\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as t from'react';import t__default from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';function
|
|
1
|
+
import*as t from'react';import t__default from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';function y(...e){return twMerge(clsx(e))}var b="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var L={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},$=e=>{let[r,a]=e.split("-");return r==="heading"?L[a]||"p":r==="label"?"label":"p"},R={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},A=e=>e?(Array.isArray(e)?e:[e]).map(a=>{if(a.includes(":")){let[o,s]=a.split(":");return `${o}:text-${s}`}return `text-${a}`}).join(" "):"text-body-default",l=t__default.forwardRef(({variant:e="body-default",color:r="primary",as:a,className:o,children:s,weight:n,...i},p)=>{let c=A(e),T=r==="inherit"?"text-inherit":`text-text-${r}`,g=t__default.useMemo(()=>{let m=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return $(m)},[e]);return t__default.createElement(a||g,{ref:p,className:`font-sans antialiased ${c} ${T} ${n?`!${R[n]}`:""} ${o??""}`,...i},s)});l.displayName="Text";var O=({className:e,label:r,labelClassName:a,helperText:o,showCharacterCount:s,maxLength:n,id:i,value:p="",defaultValue:c,...T})=>{let[g,u]=t.useState(p?.toString()||c?.toString()||""),m=d=>{let M=d.target.value;u(M),T.onChange?.(d);},H=g.length,f=s||!!n;return t.createElement(t.Fragment,null,r&&t.createElement(l,{variant:"label-default",htmlFor:i,as:"label",className:y(a)},r),t.createElement("div",{className:"relative"},t.createElement("textarea",{id:i,value:p,defaultValue:c,maxLength:n,onChange:m,className:y(`min-h-[80px] w-full resize-y rounded-lg border border-secondary-50 bg-background-0 px-3 py-2 font-sans text-text placeholder:text-secondary ${b} disabled:cursor-not-allowed disabled:opacity-50`,e),...T}),t.createElement("div",{className:"flex justify-between gap-2"},o&&t.createElement(l,{variant:"label-default",color:"danger"},o),f&&t.createElement(l,{variant:"label-default",color:"secondary",className:"text-right self-end"},H,n&&`/${n}`," characters"))))};if (exports.default) module.exports = exports.default;export{O as TextArea};//# sourceMappingURL=TextArea.js.map
|
|
2
2
|
//# sourceMappingURL=TextArea.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/tailwind.ts","../../src/components/Text.tsx","../../src/components/TextArea.tsx"],"names":["cn","inputs","twMerge","clsx","focusRingStyles","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","TextArea","label","labelClassName","helperText","showCharacterCount","maxLength","id","value","defaultValue","textValue","setTextValue","handleChange","e","newValue","characterCount","showCount"],"mappings":"mHAGO,SAASA,CAAAA,CAAAA,GAAMC,EAAsB,CAC1C,OAAOC,QAAQC,IAAKF,CAAAA,CAAM,CAAC,CAC7B,CC8DO,IAAMG,CACX,CAAA,qGAAA,CCwBF,IAAMC,CAAmD,CAAA,CACvD,GAAI,IACJ,CAAA,EAAA,CAAI,KACJ,EAAI,CAAA,IAAA,CACJ,GAAI,IACJ,CAAA,EAAA,CAAI,IACN,CAEMC,CAAAA,CAAAA,CAAyBC,GAAwC,CACrE,GAAM,CAACC,CAAAA,CAAUC,CAAI,CAAIF,CAAAA,CAAAA,CAAQ,MAAM,GAAG,CAAA,CAE1C,OAAIC,CAAa,GAAA,SAAA,CACRH,EAAoBI,CAAI,CAAA,EAAK,IAGlCD,CAAa,GAAA,OAAA,CACR,QAGF,GACT,CAAA,CAIME,EAAqC,CACzC,KAAA,CAAO,aACP,OAAS,CAAA,cAAA,CACT,SAAU,eACV,CAAA,IAAA,CAAM,WACR,CAiBMC,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,QAAS,CAAA,GAAG,EAAG,CACzB,GAAM,CAACM,CAAYC,CAAAA,CAAe,EAAIP,CAAQ,CAAA,KAAA,CAAM,GAAG,CACvD,CAAA,OAAO,GAAGM,CAAU,CAAA,MAAA,EAASC,CAAe,CAC9C,CAAA,CACA,OAAO,CAAQP,KAAAA,EAAAA,CAAO,EACxB,CAAC,CAAA,CACA,KAAK,GAAG,CAAA,CAZW,oBAeXQ,CAAOC,CAAAA,UAAAA,CAAM,WACxB,CACE,CACE,QAAAT,CAAU,CAAA,cAAA,CACV,MAAAU,CAAQ,CAAA,cAAA,CACR,GAAAC,CACA,CAAA,SAAA,CAAAC,EACA,QAAAC,CAAAA,CAAAA,CACA,OAAAC,CACA,CAAA,GAAGC,CACL,CACAC,CAAAA,CAAAA,GACG,CAEH,IAAMC,CAAAA,CAAoBb,EAAgBJ,CAAO,CAAA,CAG3CkB,EACJR,CAASA,EAAAA,CAAAA,GAAU,UAAY,SAAYA,CAAAA,CAAAA,CAAQ,QAAQA,CAAK,CAAA,CAAA,CAAK,GAEjES,CAAmBV,CAAAA,UAAAA,CAAM,QAAQ,IAAM,CAC3C,IAAMW,CACJ,CAAA,OAAOpB,GAAY,QACfA,CAAAA,CAAAA,CAAQ,MAAM,GAAG,CAAA,CAAE,KACnB,CAAA,KAAA,CAAM,QAAQA,CAAO,CAAA,CACnBA,EAAQ,CAAC,CAAA,CAAE,MAAM,GAAG,CAAA,CAAE,GAAI,EAAA,CAC1B,eACR,OAAOD,CAAAA,CAAsBqB,CAA4B,CAC3D,CAAA,CAAG,CAACpB,CAAO,CAAC,EAIZ,OAEES,UAAAA,CAAA,cAJiBE,CAAMQ,EAAAA,CAAAA,CAItB,CACC,GAAKH,CAAAA,CAAAA,CACL,UAAW,CAAyBC,sBAAAA,EAAAA,CAAiB,IAAIC,CAAY,CAAA,CAAA,EACnEJ,EAAS,CAAIX,CAAAA,EAAAA,CAAAA,CAAWW,CAAM,CAAC,CAAA,CAAA,CAAK,EACtC,CAAIF,CAAAA,EAAAA,CAAAA,EAAa,EAAE,CAClB,CAAA,CAAA,GAAGG,GAEHF,CACH,CAEJ,CACF,CAEAL,CAAAA,CAAAA,CAAK,YAAc,MCvLZ,CAAA,IAAMa,EAAW,CAAC,CACvB,UAAAT,CACA,CAAA,KAAA,CAAAU,EACA,cAAAC,CAAAA,CAAAA,CACA,WAAAC,CACA,CAAA,kBAAA,CAAAC,EACA,SAAAC,CAAAA,CAAAA,CACA,GAAAC,CACA,CAAA,KAAA,CAAAC,EAAQ,EACR,CAAA,YAAA,CAAAC,EACA,GAAGd,CACL,IAAqB,CACnB,GAAM,CAACe,CAAWC,CAAAA,CAAY,EAAU,CACtCH,CAAAA,QAAAA,CAAAA,CAAAA,EAAO,UAAcC,EAAAA,CAAAA,EAAc,UAAc,EAAA,EACnD,EAEMG,CAAgBC,CAAAA,CAAAA,EAA8C,CAClE,IAAMC,CAAAA,CAAWD,EAAE,MAAO,CAAA,KAAA,CAC1BF,CAAaG,CAAAA,CAAQ,EACrBnB,CAAM,CAAA,QAAA,GAAWkB,CAAC,EACpB,CAAA,CAEME,EAAiBL,CAAU,CAAA,MAAA,CAC3BM,EAAYX,CAAsB,EAAA,CAAC,CAACC,CAE1C,CAAA,OACE,gCACGJ,CACC,EAAA,CAAA,CAAA,aAAA,CAACd,EAAA,CACC,OAAA,CAAQ,gBACR,OAASmB,CAAAA,CAAAA,CACT,GAAG,OACH,CAAA,SAAA,CAAWlC,EAAG8B,CAAc,CAAA,CAAA,CAE3BD,CACH,CAEF,CAAA,CAAA,CAAA,aAAA,CAAC,OAAI,SAAU,CAAA,UAAA,CAAA,CACb,gBAAC,UACC,CAAA,CAAA,EAAA,CAAIK,EACJ,KAAOC,CAAAA,CAAAA,CACP,aAAcC,CACd,CAAA,SAAA,CAAWH,EACX,QAAUM,CAAAA,CAAAA,CACV,UAAWvC,CACT,CAAA,CAAA,oJAAA,EAAuJI,CAAe,CACtKe,gDAAAA,CAAAA,CAAAA,CACF,EACC,GAAGG,CAAAA,CACN,EACA,CAAC,CAAA,aAAA,CAAA,KAAA,CAAA,CAAI,UAAU,4BACZS,CAAAA,CAAAA,CAAAA,EACC,gBAAChB,CAAA,CAAA,CAAK,QAAQ,eAAgB,CAAA,KAAA,CAAM,eACjCgB,CACH,CAAA,CAEDY,GACC,CAAC5B,CAAAA,aAAAA,CAAAA,CAAAA,CAAA,CACC,OAAQ,CAAA,eAAA,CACR,MAAM,gBACN,CAAA,SAAA,CAAU,uBAET2B,CACAT,CAAAA,CAAAA,EAAa,IAAIA,CAAS,CAAA,CAAA,CAAG,aAChC,CAEJ,CACF,CACF,CAEJ","file":"TextArea.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React from \"react\";\nimport {\n Colors,\n TextColorVariant,\n PrimaryShades,\n SecondaryShades,\n TertiaryShades,\n Typography\n} from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype ColorCategory = keyof Omit<Colors, \"stroke\" | \"background\">;\ntype ColorValue<T extends ColorCategory> = T extends \"text\"\n ? TextColorVariant\n : T extends \"primary\"\n ? keyof PrimaryShades\n : T extends \"secondary\"\n ? keyof SecondaryShades\n : T extends \"tertiary\"\n ? keyof TertiaryShades\n : never;\n\ntype ColorKey = {\n [T in ColorCategory]: `${T}-${ColorValue<T>}`;\n}[ColorCategory];\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\n// Add breakpoint types\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: ColorKey | \"inherit\";\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"text-primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles\n const colorClasses =\n color && color === \"inherit\" ? \"inherit\" : color ? `text-${color}` : \"\";\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import * as React from \"react\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { Text } from \"./Text\";\n\nexport type TextAreaProps = {\n /** Additional classes for the container */\n className?: string;\n /** Label text for the textarea */\n label?: string;\n /** Additional classes for the label */\n labelClassName?: string;\n /** Helper text displayed below the textarea */\n helperText?: string;\n /** Character count display */\n showCharacterCount?: boolean;\n /** Maximum number of characters */\n maxLength?: number;\n} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nexport const TextArea = ({\n className,\n label,\n labelClassName,\n helperText,\n showCharacterCount,\n maxLength,\n id,\n value = \"\",\n defaultValue,\n ...props\n}: TextAreaProps) => {\n const [textValue, setTextValue] = React.useState(\n value?.toString() || defaultValue?.toString() || \"\"\n );\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n const newValue = e.target.value;\n setTextValue(newValue);\n props.onChange?.(e);\n };\n\n const characterCount = textValue.length;\n const showCount = showCharacterCount || !!maxLength;\n\n return (\n <>\n {label && (\n <Text\n variant=\"label-default\"\n htmlFor={id}\n as=\"label\"\n className={cn(labelClassName)}\n >\n {label}\n </Text>\n )}\n <div className=\"relative\">\n <textarea\n id={id}\n value={value}\n defaultValue={defaultValue}\n maxLength={maxLength}\n onChange={handleChange}\n className={cn(\n `min-h-[80px] w-full resize-y rounded-lg border border-secondary-50 bg-background-0 px-3 py-2 font-sans text-text-primary placeholder:text-secondary ${focusRingStyles} disabled:cursor-not-allowed disabled:opacity-50`,\n className\n )}\n {...props}\n />\n <div className=\"flex justify-between gap-2\">\n {helperText && (\n <Text variant=\"label-default\" color=\"tertiary-10\">\n {helperText}\n </Text>\n )}\n {showCount && (\n <Text\n variant=\"label-default\"\n color=\"text-secondary\"\n className=\"text-right self-end\"\n >\n {characterCount}\n {maxLength && `/${maxLength}`} characters\n </Text>\n )}\n </div>\n </div>\n </>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/tailwind.ts","../../src/components/Text.tsx","../../src/components/TextArea.tsx"],"names":["cn","inputs","twMerge","clsx","focusRingStyles","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","TextArea","label","labelClassName","helperText","showCharacterCount","maxLength","id","value","defaultValue","textValue","setTextValue","handleChange","e","newValue","characterCount","showCount"],"mappings":"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","file":"TextArea.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import React from \"react\";\nimport { 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\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 =\n color === \"inherit\" ? \"text-inherit\" : `text-text-${color}`;\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import * as React from \"react\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { Text } from \"./Text\";\n\nexport type TextAreaProps = {\n /** Additional classes for the container */\n className?: string;\n /** Label text for the textarea */\n label?: string;\n /** Additional classes for the label */\n labelClassName?: string;\n /** Helper text displayed below the textarea */\n helperText?: string;\n /** Character count display */\n showCharacterCount?: boolean;\n /** Maximum number of characters */\n maxLength?: number;\n} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nexport const TextArea = ({\n className,\n label,\n labelClassName,\n helperText,\n showCharacterCount,\n maxLength,\n id,\n value = \"\",\n defaultValue,\n ...props\n}: TextAreaProps) => {\n const [textValue, setTextValue] = React.useState(\n value?.toString() || defaultValue?.toString() || \"\"\n );\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n const newValue = e.target.value;\n setTextValue(newValue);\n props.onChange?.(e);\n };\n\n const characterCount = textValue.length;\n const showCount = showCharacterCount || !!maxLength;\n\n return (\n <>\n {label && (\n <Text\n variant=\"label-default\"\n htmlFor={id}\n as=\"label\"\n className={cn(labelClassName)}\n >\n {label}\n </Text>\n )}\n <div className=\"relative\">\n <textarea\n id={id}\n value={value}\n defaultValue={defaultValue}\n maxLength={maxLength}\n onChange={handleChange}\n className={cn(\n `min-h-[80px] w-full resize-y rounded-lg border border-secondary-50 bg-background-0 px-3 py-2 font-sans text-text placeholder:text-secondary ${focusRingStyles} disabled:cursor-not-allowed disabled:opacity-50`,\n className\n )}\n {...props}\n />\n <div className=\"flex justify-between gap-2\">\n {helperText && (\n <Text variant=\"label-default\" color=\"danger\">\n {helperText}\n </Text>\n )}\n {showCount && (\n <Text\n variant=\"label-default\"\n color=\"secondary\"\n className=\"text-right self-end\"\n >\n {characterCount}\n {maxLength && `/${maxLength}`} characters\n </Text>\n )}\n </div>\n </div>\n </>\n );\n};\n"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
'use strict';var o=require('react'),l=require('@radix-ui/react-toast'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),icons=require('@deckai/icons');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var o__namespace=/*#__PURE__*/_interopNamespace(o);var l__namespace=/*#__PURE__*/_interopNamespace(l);function m(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var H={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB",disabled:"#888888"},C={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},$=e=>{if(!e)return {width:"24px",height:"24px"};let a=Array.isArray(e)?e:[e],t={},n;return a.forEach(r=>{if(typeof r=="number")n=`${r}px`;else {let[i,s]=r.split(":"),p=parseInt(s,10);t[`@media (min-width: ${C[i]})`]=`${p}px`;}}),{width:n||"24px",height:n||"24px",...Object.entries(t).reduce((r,[i,s])=>({...r,[i]:{width:s,height:s}}),{})}},T=o__namespace.default.forwardRef(({name:e,size:a=24,color:t="primary",title:n,className:r,style:i={},...s},p)=>{let g=icons.IconMap[e],c=$(a);return o__namespace.default.createElement("div",{className:m("flex justify-center items-center",r),style:{...c,"--icon-stroke":H[t],...i}},o__namespace.default.createElement(g,{ref:p,"aria-hidden":!n,"aria-label":n,stroke:e.includes("filled")?void 0:H[t],...s}))});T.displayName="Icon";var P={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},A=e=>{let[a,t]=e.split("-");return a==="heading"?P[t]||"p":a==="label"?"label":"p"},k={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},N=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[n,r]=t.split(":");return `${n}:text-${r}`}return `text-${t}`}).join(" "):"text-body-default",d=o__namespace.default.forwardRef(({variant:e="body-default",color:a="primary",as:t,className:n,children:r,weight:i,...s},p)=>{let g=N(e),c=a==="inherit"?"text-inherit":`text-text-${a}`,u=o__namespace.default.useMemo(()=>{let R=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return A(R)},[e]);return o__namespace.default.createElement(t||u,{ref:p,className:`font-sans antialiased ${g} ${c} ${i?`!${k[i]}`:""} ${n??""}`,...s},r)});d.displayName="Text";var M="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var w={black:"bg-text-text text-white",accent:"bg-primary-100 text-white",secondary:"bg-secondary-100 text-secondary"},S={black:"border border-text text-text",accent:"border border-primary-100 text-primary-100",secondary:"border border-text-secondary text-secondary"},b=o__namespace.forwardRef(({className:e,variant:a="filled",color:t="black",isLoading:n=!1,children:r,disabled:i,...s},p)=>o__namespace.createElement("button",{ref:p,className:m(`
|
|
2
|
+
sm:px-7 px-4
|
|
3
|
+
py-2
|
|
4
|
+
inline-flex items-center justify-center
|
|
5
|
+
rounded-lg
|
|
6
|
+
transition-colors duration-200
|
|
7
|
+
disabled:opacity-50 disabled:pointer-events-none
|
|
8
|
+
hover:opacity-80 active:scale-95
|
|
9
|
+
truncate`,M,a==="filled"?w[t]:S[t],e),disabled:i||n,type:"button",...s},typeof r=="string"?o__namespace.createElement(d,{variant:["sm:body-default-bold","body-xxs-semibold"],color:"inherit"},r):r));b.displayName="Button";var B={default:{icon:"information",className:"bg-gray-900 text-white"},success:{icon:"check",className:"bg-green-600 text-white"},error:{icon:"danger",className:"bg-tertiary-10 text-white"},warning:{icon:"warning-2",className:"bg-tertiary-20 text-white"}},V=o__namespace.forwardRef(({title:e,message:a,action:t,variant:n="default",duration:r=5e3,className:i,onOpenChange:s,...p},g)=>{let c=B[n],u=o__namespace.useCallback(x=>{s?.(x);},[s]);return o__namespace.createElement(l__namespace.Root,{ref:g,onOpenChange:u,duration:r,className:m("group pointer-events-auto relative flex w-full gap-4 rounded-lg p-4","shadow-lg","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]:slide-out-to-right-full data-[state=open]:slide-in-from-right-full",c.className,i),...p},o__namespace.createElement(T,{name:c.icon,className:"h-5 w-5 shrink-0",color:"white"}),o__namespace.createElement("div",{className:"flex-1 gap-2"},e&&o__namespace.createElement(l__namespace.Title,{asChild:!0},o__namespace.createElement(d,{variant:"body-default-bold",color:"inherit"},e)),o__namespace.createElement(l__namespace.Description,{asChild:!0},o__namespace.createElement(d,{variant:"body-xs-medium",color:"inherit"},a))),o__namespace.createElement("div",{className:"flex gap-2"},t&&o__namespace.createElement(l__namespace.Action,{asChild:!0,altText:t.label},o__namespace.createElement("div",null,o__namespace.createElement(b,{variant:"outlined",color:"black",className:"border-white text-white hover:bg-white/10 ml-auto",onClick:t.onClick},t.label))),o__namespace.createElement(l__namespace.Close,{className:"p-2 hover:bg-white/10","aria-label":"Close"},o__namespace.createElement(T,{name:"close",size:16,color:"white"}))))});V.displayName="Toast";if (exports.default) module.exports = exports.default;exports.Toast=V;//# sourceMappingURL=Toast.cjs.map
|
|
10
|
+
//# sourceMappingURL=Toast.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../src/components/Button.tsx","../../src/utils/tailwind.ts","../../src/components/Toast.tsx"],"names":["cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","children","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","focusRingStyles","filled","outlined","Button","y","isLoading","disabled","Toast","o","message","action","duration","onOpenChange","variantConfig","handleOpenChange","open","l"],"mappings":"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","file":"Toast.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: ResponsiveSize | ResponsiveSize[];\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\",\n disabled: \"#888888\"\n};\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n \"2xl\": \"1536px\"\n};\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n const mediaQueries: Record<string, string> = {};\n let baseSize: string | undefined;\n\n // Process each size\n sizeArray.forEach((size) => {\n if (typeof size === \"number\") {\n baseSize = `${size}px`;\n } else {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n mediaQueries[`@media (min-width: ${BREAKPOINT_MAP[breakpoint]})`] =\n `${value}px`;\n }\n });\n\n // Create the style object with the correct structure\n return {\n width: baseSize || \"24px\",\n height: baseSize || \"24px\",\n ...Object.entries(mediaQueries).reduce(\n (acc, [query, size]) => ({\n ...acc,\n [query]: {\n width: size,\n height: size\n }\n }),\n {}\n )\n };\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const sizeStyles = processSizes(size);\n\n return (\n <div\n className={cn(\"flex justify-center items-center\", className)}\n style={{\n ...sizeStyles,\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import React from \"react\";\nimport { Typography } from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n | \"primary\"\n | \"secondary\"\n | \"white\"\n | \"primary-blue\"\n | \"disabled\"\n | \"danger\"\n | \"inherit\";\n\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 =\n color === \"inherit\" ? \"text-inherit\" : `text-text-${color}`;\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import * as React from \"react\";\nimport { Text } from \"./Text\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type ButtonProps = {\n /** @default filled */\n variant?: \"filled\" | \"outlined\";\n /** @default primary */\n color?: \"black\" | \"accent\" | \"secondary\";\n isLoading?: boolean;\n children: React.ReactNode;\n className?: string;\n disabled?: boolean;\n start?: React.ReactNode;\n end?: React.ReactNode;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const filled = {\n black: \"bg-text-text text-white\",\n // fade it slightly\n accent: \"bg-primary-100 text-white\",\n secondary: \"bg-secondary-100 text-secondary\"\n};\n\nexport const outlined = {\n black: \"border border-text text-text\",\n accent: \"border border-primary-100 text-primary-100\",\n secondary: \"border border-text-secondary text-secondary\"\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant = \"filled\",\n color = \"black\",\n isLoading = false,\n children,\n disabled,\n ...props\n },\n ref\n ) => (\n <button\n ref={ref}\n className={cn(\n `\n sm:px-7 px-4\n py-2\n inline-flex items-center justify-center\n rounded-lg \n transition-colors duration-200\n disabled:opacity-50 disabled:pointer-events-none\n hover:opacity-80 active:scale-95 \n truncate`,\n focusRingStyles,\n variant === \"filled\" ? filled[color] : outlined[color],\n className\n )}\n disabled={disabled || isLoading}\n type=\"button\"\n {...props}\n >\n {typeof children === \"string\" ? (\n <Text\n variant={[\"sm:body-default-bold\", \"body-xxs-semibold\"]}\n color=\"inherit\"\n >\n {children}\n </Text>\n ) : (\n children\n )}\n </button>\n )\n);\n\nButton.displayName = \"Button\";\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import * as React from \"react\";\nimport * as ToastPrimitive from \"@radix-ui/react-toast\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\nimport { Button } from \"./Button\";\nimport { IconName } from \"@deckai/icons\";\n\nexport type ToastProps = ToastPrimitive.ToastProps & {\n /** Optional title for the toast */\n title?: string;\n /** Main message content */\n message: string;\n /** Optional action button configuration */\n action?: {\n label: string;\n onClick: () => void;\n };\n /** Optional variant to change the visual style */\n variant?: \"default\" | \"success\" | \"error\" | \"warning\";\n\n /** Optional className for custom styling */\n className?: string;\n};\n\nconst variants: Record<\n NonNullable<ToastProps[\"variant\"]>,\n {\n icon: IconName;\n className: string;\n }\n> = {\n default: {\n icon: \"information\",\n className: \"bg-gray-900 text-white\"\n },\n success: {\n icon: \"check\",\n className: \"bg-green-600 text-white\"\n },\n error: {\n icon: \"danger\",\n className: \"bg-tertiary-10 text-white\"\n },\n warning: {\n icon: \"warning-2\",\n className: \"bg-tertiary-20 text-white\"\n }\n} as const;\n\nexport const Toast = React.forwardRef<\n React.ElementRef<typeof ToastPrimitive.Root>,\n ToastProps\n>(\n (\n {\n title,\n message,\n action,\n variant = \"default\",\n duration = 5000,\n className,\n onOpenChange,\n ...props\n },\n ref\n ) => {\n const variantConfig = variants[variant];\n\n const handleOpenChange = React.useCallback(\n (open: boolean) => {\n onOpenChange?.(open);\n },\n [onOpenChange]\n );\n\n return (\n <ToastPrimitive.Root\n ref={ref}\n onOpenChange={handleOpenChange}\n duration={duration}\n className={cn(\n \"group pointer-events-auto relative flex w-full gap-4 rounded-lg p-4\",\n \"shadow-lg\",\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]:slide-out-to-right-full data-[state=open]:slide-in-from-right-full\",\n variantConfig.className,\n className\n )}\n {...props}\n >\n <Icon\n name={variantConfig.icon}\n className=\"h-5 w-5 shrink-0\"\n color=\"white\"\n />\n\n <div className=\"flex-1 gap-2\">\n {title && (\n <ToastPrimitive.Title asChild>\n <Text variant=\"body-default-bold\" color=\"inherit\">\n {title}\n </Text>\n </ToastPrimitive.Title>\n )}\n <ToastPrimitive.Description asChild>\n <Text variant=\"body-xs-medium\" color=\"inherit\">\n {message}\n </Text>\n </ToastPrimitive.Description>\n </div>\n\n <div className=\"flex gap-2\">\n {action && (\n <ToastPrimitive.Action asChild altText={action.label}>\n <div>\n <Button\n variant=\"outlined\"\n color=\"black\"\n className=\"border-white text-white hover:bg-white/10 ml-auto\"\n onClick={action.onClick}\n >\n {action.label}\n </Button>\n </div>\n </ToastPrimitive.Action>\n )}\n <ToastPrimitive.Close\n className=\"p-2 hover:bg-white/10\"\n aria-label=\"Close\"\n >\n <Icon name=\"close\" size={16} color=\"white\" />\n </ToastPrimitive.Close>\n </div>\n </ToastPrimitive.Root>\n );\n }\n);\n\nToast.displayName = \"Toast\";\n"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import*as o from'react';import o__default from'react';import*as l from'@radix-ui/react-toast';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {IconMap}from'@deckai/icons';function m(...e){return twMerge(clsx(e))}var H={primary:"#080808",secondary:"#666666",white:"#ffffff",primaryBlue:"#089CCB",disabled:"#888888"},C={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},$=e=>{if(!e)return {width:"24px",height:"24px"};let a=Array.isArray(e)?e:[e],t={},n;return a.forEach(r=>{if(typeof r=="number")n=`${r}px`;else {let[i,s]=r.split(":"),p=parseInt(s,10);t[`@media (min-width: ${C[i]})`]=`${p}px`;}}),{width:n||"24px",height:n||"24px",...Object.entries(t).reduce((r,[i,s])=>({...r,[i]:{width:s,height:s}}),{})}},T=o__default.forwardRef(({name:e,size:a=24,color:t="primary",title:n,className:r,style:i={},...s},p)=>{let g=IconMap[e],c=$(a);return o__default.createElement("div",{className:m("flex justify-center items-center",r),style:{...c,"--icon-stroke":H[t],...i}},o__default.createElement(g,{ref:p,"aria-hidden":!n,"aria-label":n,stroke:e.includes("filled")?void 0:H[t],...s}))});T.displayName="Icon";var P={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},A=e=>{let[a,t]=e.split("-");return a==="heading"?P[t]||"p":a==="label"?"label":"p"},k={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},N=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[n,r]=t.split(":");return `${n}:text-${r}`}return `text-${t}`}).join(" "):"text-body-default",d=o__default.forwardRef(({variant:e="body-default",color:a="primary",as:t,className:n,children:r,weight:i,...s},p)=>{let g=N(e),c=a==="inherit"?"text-inherit":`text-text-${a}`,u=o__default.useMemo(()=>{let R=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return A(R)},[e]);return o__default.createElement(t||u,{ref:p,className:`font-sans antialiased ${g} ${c} ${i?`!${k[i]}`:""} ${n??""}`,...s},r)});d.displayName="Text";var M="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";var w={black:"bg-text-text text-white",accent:"bg-primary-100 text-white",secondary:"bg-secondary-100 text-secondary"},S={black:"border border-text text-text",accent:"border border-primary-100 text-primary-100",secondary:"border border-text-secondary text-secondary"},b=o.forwardRef(({className:e,variant:a="filled",color:t="black",isLoading:n=!1,children:r,disabled:i,...s},p)=>o.createElement("button",{ref:p,className:m(`
|
|
2
|
+
sm:px-7 px-4
|
|
3
|
+
py-2
|
|
4
|
+
inline-flex items-center justify-center
|
|
5
|
+
rounded-lg
|
|
6
|
+
transition-colors duration-200
|
|
7
|
+
disabled:opacity-50 disabled:pointer-events-none
|
|
8
|
+
hover:opacity-80 active:scale-95
|
|
9
|
+
truncate`,M,a==="filled"?w[t]:S[t],e),disabled:i||n,type:"button",...s},typeof r=="string"?o.createElement(d,{variant:["sm:body-default-bold","body-xxs-semibold"],color:"inherit"},r):r));b.displayName="Button";var B={default:{icon:"information",className:"bg-gray-900 text-white"},success:{icon:"check",className:"bg-green-600 text-white"},error:{icon:"danger",className:"bg-tertiary-10 text-white"},warning:{icon:"warning-2",className:"bg-tertiary-20 text-white"}},V=o.forwardRef(({title:e,message:a,action:t,variant:n="default",duration:r=5e3,className:i,onOpenChange:s,...p},g)=>{let c=B[n],u=o.useCallback(x=>{s?.(x);},[s]);return o.createElement(l.Root,{ref:g,onOpenChange:u,duration:r,className:m("group pointer-events-auto relative flex w-full gap-4 rounded-lg p-4","shadow-lg","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]:slide-out-to-right-full data-[state=open]:slide-in-from-right-full",c.className,i),...p},o.createElement(T,{name:c.icon,className:"h-5 w-5 shrink-0",color:"white"}),o.createElement("div",{className:"flex-1 gap-2"},e&&o.createElement(l.Title,{asChild:!0},o.createElement(d,{variant:"body-default-bold",color:"inherit"},e)),o.createElement(l.Description,{asChild:!0},o.createElement(d,{variant:"body-xs-medium",color:"inherit"},a))),o.createElement("div",{className:"flex gap-2"},t&&o.createElement(l.Action,{asChild:!0,altText:t.label},o.createElement("div",null,o.createElement(b,{variant:"outlined",color:"black",className:"border-white text-white hover:bg-white/10 ml-auto",onClick:t.onClick},t.label))),o.createElement(l.Close,{className:"p-2 hover:bg-white/10","aria-label":"Close"},o.createElement(T,{name:"close",size:16,color:"white"}))))});V.displayName="Toast";if (exports.default) module.exports = exports.default;export{V as Toast};//# sourceMappingURL=Toast.js.map
|
|
10
|
+
//# sourceMappingURL=Toast.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Icon.tsx","../../src/components/Text.tsx","../../src/components/Button.tsx","../../src/utils/tailwind.ts","../../src/components/Toast.tsx"],"names":["cn","inputs","twMerge","clsx","COLOR_MAP","BREAKPOINT_MAP","processSizes","sizes","sizeArray","mediaQueries","baseSize","size","breakpoint","valueStr","value","acc","query","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","sizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","children","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","focusRingStyles","filled","outlined","Button","y","isLoading","disabled","Toast","message","action","duration","onOpenChange","variantConfig","handleOpenChange","open"],"mappings":"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","file":"Toast.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import React, { SVGProps } from \"react\";\nimport { IconName, IconMap } from \"@deckai/icons\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\ntype ResponsiveSize = number | `${Breakpoint}:${number}`;\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: ResponsiveSize | ResponsiveSize[];\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"#080808\",\n secondary: \"#666666\",\n white: \"#ffffff\",\n primaryBlue: \"#089CCB\",\n disabled: \"#888888\"\n};\n\nconst BREAKPOINT_MAP: Record<Breakpoint, string> = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n \"2xl\": \"1536px\"\n};\n\nconst processSizes = (\n sizes: ResponsiveSize | ResponsiveSize[] | undefined\n): React.CSSProperties => {\n if (!sizes) return { width: \"24px\", height: \"24px\" };\n\n const sizeArray = Array.isArray(sizes) ? sizes : [sizes];\n const mediaQueries: Record<string, string> = {};\n let baseSize: string | undefined;\n\n // Process each size\n sizeArray.forEach((size) => {\n if (typeof size === \"number\") {\n baseSize = `${size}px`;\n } else {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n mediaQueries[`@media (min-width: ${BREAKPOINT_MAP[breakpoint]})`] =\n `${value}px`;\n }\n });\n\n // Create the style object with the correct structure\n return {\n width: baseSize || \"24px\",\n height: baseSize || \"24px\",\n ...Object.entries(mediaQueries).reduce(\n (acc, [query, size]) => ({\n ...acc,\n [query]: {\n width: size,\n height: size\n }\n }),\n {}\n )\n };\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const sizeStyles = processSizes(size);\n\n return (\n <div\n className={cn(\"flex justify-center items-center\", className)}\n style={{\n ...sizeStyles,\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import React from \"react\";\nimport { Typography } from \"../types/tailwind\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n | \"primary\"\n | \"secondary\"\n | \"white\"\n | \"primary-blue\"\n | \"disabled\"\n | \"danger\"\n | \"inherit\";\n\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 =\n color === \"inherit\" ? \"text-inherit\" : `text-text-${color}`;\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`font-sans antialiased ${typographyClasses} ${colorClasses} ${\n weight ? `!${fontWeight[weight]}` : \"\"\n } ${className ?? \"\"}`}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import * as React from \"react\";\nimport { Text } from \"./Text\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type ButtonProps = {\n /** @default filled */\n variant?: \"filled\" | \"outlined\";\n /** @default primary */\n color?: \"black\" | \"accent\" | \"secondary\";\n isLoading?: boolean;\n children: React.ReactNode;\n className?: string;\n disabled?: boolean;\n start?: React.ReactNode;\n end?: React.ReactNode;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const filled = {\n black: \"bg-text-text text-white\",\n // fade it slightly\n accent: \"bg-primary-100 text-white\",\n secondary: \"bg-secondary-100 text-secondary\"\n};\n\nexport const outlined = {\n black: \"border border-text text-text\",\n accent: \"border border-primary-100 text-primary-100\",\n secondary: \"border border-text-secondary text-secondary\"\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant = \"filled\",\n color = \"black\",\n isLoading = false,\n children,\n disabled,\n ...props\n },\n ref\n ) => (\n <button\n ref={ref}\n className={cn(\n `\n sm:px-7 px-4\n py-2\n inline-flex items-center justify-center\n rounded-lg \n transition-colors duration-200\n disabled:opacity-50 disabled:pointer-events-none\n hover:opacity-80 active:scale-95 \n truncate`,\n focusRingStyles,\n variant === \"filled\" ? filled[color] : outlined[color],\n className\n )}\n disabled={disabled || isLoading}\n type=\"button\"\n {...props}\n >\n {typeof children === \"string\" ? (\n <Text\n variant={[\"sm:body-default-bold\", \"body-xxs-semibold\"]}\n color=\"inherit\"\n >\n {children}\n </Text>\n ) : (\n children\n )}\n </button>\n )\n);\n\nButton.displayName = \"Button\";\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n\n const safelist: string[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n return [\n ...typographyClasses,\n ...responsiveTypographyClasses\n // ... rest of your safelist\n ];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\";\n\nexport const focusRingStylesCoerced = \"ring-2 ring-ring ring-offset-2\";\n","import * as React from \"react\";\nimport * as ToastPrimitive from \"@radix-ui/react-toast\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\nimport { Text } from \"./Text\";\nimport { Button } from \"./Button\";\nimport { IconName } from \"@deckai/icons\";\n\nexport type ToastProps = ToastPrimitive.ToastProps & {\n /** Optional title for the toast */\n title?: string;\n /** Main message content */\n message: string;\n /** Optional action button configuration */\n action?: {\n label: string;\n onClick: () => void;\n };\n /** Optional variant to change the visual style */\n variant?: \"default\" | \"success\" | \"error\" | \"warning\";\n\n /** Optional className for custom styling */\n className?: string;\n};\n\nconst variants: Record<\n NonNullable<ToastProps[\"variant\"]>,\n {\n icon: IconName;\n className: string;\n }\n> = {\n default: {\n icon: \"information\",\n className: \"bg-gray-900 text-white\"\n },\n success: {\n icon: \"check\",\n className: \"bg-green-600 text-white\"\n },\n error: {\n icon: \"danger\",\n className: \"bg-tertiary-10 text-white\"\n },\n warning: {\n icon: \"warning-2\",\n className: \"bg-tertiary-20 text-white\"\n }\n} as const;\n\nexport const Toast = React.forwardRef<\n React.ElementRef<typeof ToastPrimitive.Root>,\n ToastProps\n>(\n (\n {\n title,\n message,\n action,\n variant = \"default\",\n duration = 5000,\n className,\n onOpenChange,\n ...props\n },\n ref\n ) => {\n const variantConfig = variants[variant];\n\n const handleOpenChange = React.useCallback(\n (open: boolean) => {\n onOpenChange?.(open);\n },\n [onOpenChange]\n );\n\n return (\n <ToastPrimitive.Root\n ref={ref}\n onOpenChange={handleOpenChange}\n duration={duration}\n className={cn(\n \"group pointer-events-auto relative flex w-full gap-4 rounded-lg p-4\",\n \"shadow-lg\",\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]:slide-out-to-right-full data-[state=open]:slide-in-from-right-full\",\n variantConfig.className,\n className\n )}\n {...props}\n >\n <Icon\n name={variantConfig.icon}\n className=\"h-5 w-5 shrink-0\"\n color=\"white\"\n />\n\n <div className=\"flex-1 gap-2\">\n {title && (\n <ToastPrimitive.Title asChild>\n <Text variant=\"body-default-bold\" color=\"inherit\">\n {title}\n </Text>\n </ToastPrimitive.Title>\n )}\n <ToastPrimitive.Description asChild>\n <Text variant=\"body-xs-medium\" color=\"inherit\">\n {message}\n </Text>\n </ToastPrimitive.Description>\n </div>\n\n <div className=\"flex gap-2\">\n {action && (\n <ToastPrimitive.Action asChild altText={action.label}>\n <div>\n <Button\n variant=\"outlined\"\n color=\"black\"\n className=\"border-white text-white hover:bg-white/10 ml-auto\"\n onClick={action.onClick}\n >\n {action.label}\n </Button>\n </div>\n </ToastPrimitive.Action>\n )}\n <ToastPrimitive.Close\n className=\"p-2 hover:bg-white/10\"\n aria-label=\"Close\"\n >\n <Icon name=\"close\" size={16} color=\"white\" />\n </ToastPrimitive.Close>\n </div>\n </ToastPrimitive.Root>\n );\n }\n);\n\nToast.displayName = \"Toast\";\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';var e=require('react'),r=require('@radix-ui/react-toast');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 e__namespace=/*#__PURE__*/_interopNamespace(e);var r__namespace=/*#__PURE__*/_interopNamespace(r);var t=({children:o})=>e__namespace.createElement(r__namespace.Provider,null,o,e__namespace.createElement(r__namespace.Viewport,{className:"fixed bottom-0 right-0 z-[100] m-6 flex max-h-screen w-full flex-col-reverse gap-2 sm:max-w-[420px]"}));if (exports.default) module.exports = exports.default;exports.ToastProvider=t;//# sourceMappingURL=ToastProvider.cjs.map
|
|
2
|
+
//# sourceMappingURL=ToastProvider.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/ToastProvider.tsx"],"names":["ToastProvider","children","e","r"],"mappings":"geAMaA,IAAAA,CAAAA,CAAgB,CAAC,CAAE,QAAA,CAAAC,CAAS,CACvC,GAAAC,YAAA,CAAA,aAAA,CAAgBC,sBAAf,IACEF,CAAAA,CAAAA,CACDC,2BAAgBC,YAAf,CAAA,QAAA,CAAA,CAAwB,SAAU,CAAA,qGAAA,CAAsG,CAC3I","file":"ToastProvider.cjs","sourcesContent":["import * as React from \"react\";\nimport * as ToastPrimitive from \"@radix-ui/react-toast\";\n\nexport type ToastProviderProps = { children: React.ReactNode };\n\n// Provider component that should wrap the application\nexport const ToastProvider = ({ children }: ToastProviderProps) => (\n <ToastPrimitive.Provider>\n {children}\n <ToastPrimitive.Viewport className=\"fixed bottom-0 right-0 z-[100] m-6 flex max-h-screen w-full flex-col-reverse gap-2 sm:max-w-[420px]\" />\n </ToastPrimitive.Provider>\n);\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import*as e from'react';import*as r from'@radix-ui/react-toast';var t=({children:o})=>e.createElement(r.Provider,null,o,e.createElement(r.Viewport,{className:"fixed bottom-0 right-0 z-[100] m-6 flex max-h-screen w-full flex-col-reverse gap-2 sm:max-w-[420px]"}));if (exports.default) module.exports = exports.default;export{t as ToastProvider};//# sourceMappingURL=ToastProvider.js.map
|
|
2
|
+
//# sourceMappingURL=ToastProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/ToastProvider.tsx"],"names":["ToastProvider","children"],"mappings":"gEAMaA,IAAAA,CAAAA,CAAgB,CAAC,CAAE,QAAA,CAAAC,CAAS,CACvC,GAAA,CAAA,CAAA,aAAA,CAAgB,WAAf,IACEA,CAAAA,CAAAA,CACD,gBAAgB,CAAf,CAAA,QAAA,CAAA,CAAwB,SAAU,CAAA,qGAAA,CAAsG,CAC3I","file":"ToastProvider.js","sourcesContent":["import * as React from \"react\";\nimport * as ToastPrimitive from \"@radix-ui/react-toast\";\n\nexport type ToastProviderProps = { children: React.ReactNode };\n\n// Provider component that should wrap the application\nexport const ToastProvider = ({ children }: ToastProviderProps) => (\n <ToastPrimitive.Provider>\n {children}\n <ToastPrimitive.Viewport className=\"fixed bottom-0 right-0 z-[100] m-6 flex max-h-screen w-full flex-col-reverse gap-2 sm:max-w-[420px]\" />\n </ToastPrimitive.Provider>\n);\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var
|
|
1
|
+
'use strict';var o=require('react'),t=require('@radix-ui/react-tooltip'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var o__namespace=/*#__PURE__*/_interopNamespace(o);var t__namespace=/*#__PURE__*/_interopNamespace(t);function i(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var u=({content:e,children:r,side:a="bottom",align:n="center",className:l,delayDuration:p=200,defaultOpen:m,open:s,onOpenChange:d})=>o__namespace.createElement(t__namespace.Provider,{delayDuration:p},o__namespace.createElement(t__namespace.Root,{defaultOpen:m,open:s,onOpenChange:d},o__namespace.createElement(t__namespace.Trigger,{asChild:!0},o__namespace.createElement("span",{tabIndex:0},r)),o__namespace.createElement(t__namespace.Portal,null,o__namespace.createElement(t__namespace.Content,{side:a,align:n,sideOffset:4,className:i("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",l)},e,o__namespace.createElement(t__namespace.Arrow,{className:"fill-text-primary",width:10,height:5})))));if (exports.default) module.exports = exports.default;exports.Tooltip=u;//# sourceMappingURL=Tooltip.cjs.map
|
|
2
2
|
//# sourceMappingURL=Tooltip.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Tooltip.tsx"],"names":["cn","inputs","twMerge","clsx","Tooltip","content","children","side","align","className","delayDuration","
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/components/Tooltip.tsx"],"names":["cn","inputs","twMerge","clsx","Tooltip","content","children","side","align","className","delayDuration","defaultOpen","open","onOpenChange","o","t"],"mappings":"+hBAGO,SAASA,CAAAA,CAAAA,GAAMC,CAAsB,CAAA,CAC1C,OAAOC,qBAAAA,CAAQC,SAAKF,CAAAA,CAAM,CAAC,CAC7B,CCWO,IAAMG,CAAU,CAAA,CAAC,CACtB,OAAAC,CAAAA,CAAAA,CACA,QAAAC,CAAAA,CAAAA,CACA,IAAAC,CAAAA,CAAAA,CAAO,QACP,CAAA,KAAA,CAAAC,CAAQ,CAAA,QAAA,CACR,SAAAC,CAAAA,CAAAA,CACA,aAAAC,CAAAA,CAAAA,CAAgB,IAChB,WAAAC,CAAAA,CAAAA,CACA,IAAAC,CAAAA,CAAAA,CACA,YAAAC,CAAAA,CACF,CACE,GAAAC,YAAA,CAAA,aAAA,CAAkBC,YAAjB,CAAA,QAAA,CAAA,CAA0B,aAAeL,CAAAA,CAAAA,CAAAA,CACxCI,YAAkB,CAAA,aAAA,CAAAC,YAAA,CAAA,IAAA,CAAjB,CACC,WAAaJ,CAAAA,CAAAA,CACb,IAAMC,CAAAA,CAAAA,CACN,YAAcC,CAAAA,CAAAA,CAAAA,CAEdC,2BAAkBC,YAAjB,CAAA,OAAA,CAAA,CAAyB,OAAO,CAAA,CAAA,CAAA,CAAA,CAE/BD,YAAC,CAAA,aAAA,CAAA,MAAA,CAAA,CAAK,SAAU,CAAIR,CAAAA,CAAAA,CAAS,CAC/B,CAAA,CACAQ,YAAkB,CAAA,aAAA,CAAAC,YAAA,CAAA,MAAA,CAAjB,IACC,CAAAD,YAAA,CAAA,aAAA,CAAkBC,YAAjB,CAAA,OAAA,CAAA,CACC,IAAMR,CAAAA,CAAAA,CACN,KAAOC,CAAAA,CAAAA,CACP,WAAY,CACZ,CAAA,SAAA,CAAWR,CACT,CAAA,iCAAA,CACA,sBACA,CAAA,oBAAA,CACA,iCACA,CAAA,gEAAA,CACA,wCACA,CAAA,wCAAA,CACA,aACA,CAAA,UAAA,CACAS,CACF,CAAA,CAAA,CAECJ,EACDS,YAAkB,CAAA,aAAA,CAAAC,YAAA,CAAA,KAAA,CAAjB,CACC,SAAA,CAAU,mBACV,CAAA,KAAA,CAAO,EACP,CAAA,MAAA,CAAQ,CACV,CAAA,CACF,CACF,CACF,CACF","file":"Tooltip.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 * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { cn } from \"../utils\";\n\nexport interface TooltipProps {\n content: React.ReactNode;\n children: React.ReactNode;\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n align?: \"start\" | \"center\" | \"end\";\n className?: string;\n delayDuration?: number;\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n}\n\nexport const Tooltip = ({\n content,\n children,\n side = \"bottom\",\n align = \"center\",\n className,\n delayDuration = 200,\n defaultOpen,\n open,\n onOpenChange\n}: TooltipProps) => (\n <TooltipPrimitive.Provider delayDuration={delayDuration}>\n <TooltipPrimitive.Root\n defaultOpen={defaultOpen}\n open={open}\n onOpenChange={onOpenChange}\n >\n <TooltipPrimitive.Trigger asChild>\n {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}\n <span tabIndex={0}>{children}</span>\n </TooltipPrimitive.Trigger>\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Content\n side={side}\n align={align}\n sideOffset={4}\n className={cn(\n \"z-50 overflow-hidden rounded-lg\",\n \"bg-black px-3 py-1.5\",\n \"text-xs text-white\",\n \"animate-in fade-in-0 zoom-in-95\",\n \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0\",\n \"data-[side=bottom]:slide-in-from-top-2\",\n \"data-[side=top]:slide-in-from-bottom-2\",\n \"select-none\",\n \"max-w-60\",\n className\n )}\n >\n {content}\n <TooltipPrimitive.Arrow\n className=\"fill-text-primary\"\n width={10}\n height={5}\n />\n </TooltipPrimitive.Content>\n </TooltipPrimitive.Portal>\n </TooltipPrimitive.Root>\n </TooltipPrimitive.Provider>\n);\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as o from'react';import*as t from'@radix-ui/react-tooltip';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';function i(...e){return twMerge(clsx(e))}var u=({content:e,children:r,side:a="bottom",align:n="center",className:l,delayDuration:p=200,defaultOpen:m,open:s,onOpenChange:d})=>o.createElement(t.Provider,{delayDuration:p},o.createElement(t.Root,{defaultOpen:m,open:s,onOpenChange:d},o.createElement(t.Trigger,{asChild:!0},o.createElement("span",{tabIndex:0},r)),o.createElement(t.Portal,null,o.createElement(t.Content,{side:a,align:n,sideOffset:4,className:i("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",l)},e,o.createElement(t.Arrow,{className:"fill-text-primary",width:10,height:5})))));if (exports.default) module.exports = exports.default;export{u as Tooltip};//# sourceMappingURL=Tooltip.js.map
|
|
2
2
|
//# sourceMappingURL=Tooltip.js.map
|