@deckai/deck-ui 0.0.22 → 0.0.23
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 +0 -1
- package/dist/components/AboutCard.cjs +3 -3
- package/dist/components/AboutCard.cjs.map +1 -1
- package/dist/components/AboutCard.d.cts +1 -1
- package/dist/components/AboutCard.d.ts +1 -1
- package/dist/components/AboutCard.js +3 -3
- package/dist/components/AboutCard.js.map +1 -1
- package/dist/components/Accordion.cjs +2 -2
- package/dist/components/Accordion.cjs.map +1 -1
- package/dist/components/Accordion.js +2 -2
- package/dist/components/Accordion.js.map +1 -1
- package/dist/components/AddWorkCard.cjs +4 -4
- package/dist/components/AddWorkCard.cjs.map +1 -1
- package/dist/components/AddWorkCard.d.cts +1 -1
- package/dist/components/AddWorkCard.d.ts +1 -1
- package/dist/components/AddWorkCard.js +4 -4
- package/dist/components/AddWorkCard.js.map +1 -1
- package/dist/components/AutocompleteInput.cjs +4 -4
- package/dist/components/AutocompleteInput.cjs.map +1 -1
- package/dist/components/AutocompleteInput.d.cts +6 -6
- package/dist/components/AutocompleteInput.d.ts +6 -6
- package/dist/components/AutocompleteInput.js +4 -4
- package/dist/components/AutocompleteInput.js.map +1 -1
- package/dist/components/Avatar.cjs +1 -1
- package/dist/components/Avatar.cjs.map +1 -1
- package/dist/components/Avatar.d.cts +2 -2
- package/dist/components/Avatar.d.ts +2 -2
- package/dist/components/Avatar.js +1 -1
- package/dist/components/Avatar.js.map +1 -1
- package/dist/components/Badge.cjs +4 -4
- package/dist/components/Badge.cjs.map +1 -1
- package/dist/components/Badge.d.cts +2 -2
- package/dist/components/Badge.d.ts +2 -2
- package/dist/components/Badge.js +4 -4
- package/dist/components/Badge.js.map +1 -1
- package/dist/components/Breadcrumbs.cjs +2 -2
- package/dist/components/Breadcrumbs.cjs.map +1 -1
- package/dist/components/Breadcrumbs.js +2 -2
- package/dist/components/Breadcrumbs.js.map +1 -1
- package/dist/components/Button.cjs +5 -5
- package/dist/components/Button.cjs.map +1 -1
- package/dist/components/Button.d.cts +5 -5
- package/dist/components/Button.d.ts +5 -5
- package/dist/components/Button.js +5 -5
- package/dist/components/Button.js.map +1 -1
- package/dist/components/Carousel.cjs +1 -1
- package/dist/components/Carousel.cjs.map +1 -1
- package/dist/components/Carousel.d.cts +1 -1
- package/dist/components/Carousel.d.ts +1 -1
- package/dist/components/Carousel.js +1 -1
- package/dist/components/Carousel.js.map +1 -1
- package/dist/components/Collapsible.cjs +2 -2
- package/dist/components/Collapsible.cjs.map +1 -1
- package/dist/components/Collapsible.d.cts +4 -4
- package/dist/components/Collapsible.d.ts +4 -4
- package/dist/components/Collapsible.js +2 -2
- package/dist/components/Collapsible.js.map +1 -1
- package/dist/components/Combobox.cjs +4 -4
- package/dist/components/Combobox.cjs.map +1 -1
- package/dist/components/Combobox.d.cts +5 -2
- package/dist/components/Combobox.d.ts +5 -2
- package/dist/components/Combobox.js +4 -4
- package/dist/components/Combobox.js.map +1 -1
- package/dist/components/ContactItem.cjs +3 -3
- package/dist/components/ContactItem.cjs.map +1 -1
- package/dist/components/ContactItem.d.cts +1 -1
- package/dist/components/ContactItem.d.ts +1 -1
- package/dist/components/ContactItem.js +3 -3
- package/dist/components/ContactItem.js.map +1 -1
- package/dist/components/Dropdown.cjs +3 -3
- package/dist/components/Dropdown.cjs.map +1 -1
- package/dist/components/Dropdown.js +3 -3
- package/dist/components/Dropdown.js.map +1 -1
- package/dist/components/EditButton.cjs +5 -5
- package/dist/components/EditButton.cjs.map +1 -1
- package/dist/components/EditButton.d.cts +4 -4
- package/dist/components/EditButton.d.ts +4 -4
- package/dist/components/EditButton.js +5 -5
- package/dist/components/EditButton.js.map +1 -1
- package/dist/components/Fallback.cjs +1 -1
- package/dist/components/Fallback.cjs.map +1 -1
- package/dist/components/Fallback.js +1 -1
- package/dist/components/Fallback.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/IconRenderer.cjs +1 -1
- package/dist/components/IconRenderer.cjs.map +1 -1
- package/dist/components/IconRenderer.d.cts +4 -4
- package/dist/components/IconRenderer.d.ts +4 -4
- package/dist/components/IconRenderer.js +1 -1
- package/dist/components/IconRenderer.js.map +1 -1
- package/dist/components/Input.cjs +3 -3
- package/dist/components/Input.cjs.map +1 -1
- package/dist/components/Input.d.cts +11 -11
- package/dist/components/Input.d.ts +11 -11
- package/dist/components/Input.js +3 -3
- package/dist/components/Input.js.map +1 -1
- package/dist/components/Link.cjs +4 -4
- package/dist/components/Link.cjs.map +1 -1
- package/dist/components/Link.d.cts +1 -1
- package/dist/components/Link.d.ts +1 -1
- package/dist/components/Link.js +4 -4
- package/dist/components/Link.js.map +1 -1
- package/dist/components/Logo.cjs +1 -1
- package/dist/components/Logo.cjs.map +1 -1
- package/dist/components/Logo.d.cts +1 -1
- package/dist/components/Logo.d.ts +1 -1
- package/dist/components/Logo.js +1 -1
- package/dist/components/Logo.js.map +1 -1
- package/dist/components/Modal.cjs +1 -1
- package/dist/components/Modal.cjs.map +1 -1
- package/dist/components/Modal.d.cts +4 -4
- package/dist/components/Modal.d.ts +4 -4
- package/dist/components/Modal.js +1 -1
- package/dist/components/Modal.js.map +1 -1
- package/dist/components/MultiSelectCombobox.cjs +2 -2
- package/dist/components/MultiSelectCombobox.cjs.map +1 -1
- package/dist/components/MultiSelectCombobox.d.cts +1 -1
- package/dist/components/MultiSelectCombobox.d.ts +1 -1
- package/dist/components/MultiSelectCombobox.js +2 -2
- package/dist/components/MultiSelectCombobox.js.map +1 -1
- package/dist/components/Navbar.cjs +7 -7
- package/dist/components/Navbar.cjs.map +1 -1
- package/dist/components/Navbar.d.cts +1 -1
- package/dist/components/Navbar.d.ts +1 -1
- package/dist/components/Navbar.js +7 -7
- package/dist/components/Navbar.js.map +1 -1
- package/dist/components/NavbarItem.cjs +4 -4
- package/dist/components/NavbarItem.cjs.map +1 -1
- package/dist/components/NavbarItem.d.cts +1 -1
- package/dist/components/NavbarItem.d.ts +1 -1
- package/dist/components/NavbarItem.js +4 -4
- package/dist/components/NavbarItem.js.map +1 -1
- package/dist/components/Option.cjs +2 -2
- package/dist/components/Option.cjs.map +1 -1
- package/dist/components/Option.js +2 -2
- 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 +2 -2
- package/dist/components/ProfileCard.cjs.map +1 -1
- package/dist/components/ProfileCard.d.cts +1 -1
- package/dist/components/ProfileCard.d.ts +1 -1
- package/dist/components/ProfileCard.js +2 -2
- package/dist/components/ProfileCard.js.map +1 -1
- package/dist/components/ProgressBar.cjs +3 -3
- package/dist/components/ProgressBar.cjs.map +1 -1
- package/dist/components/ProgressBar.js +3 -3
- package/dist/components/ProgressBar.js.map +1 -1
- package/dist/components/RadioGroup.cjs +3 -3
- package/dist/components/RadioGroup.cjs.map +1 -1
- package/dist/components/RadioGroup.js +3 -3
- package/dist/components/RadioGroup.js.map +1 -1
- package/dist/components/SegmentedTabs.cjs +4 -4
- package/dist/components/SegmentedTabs.cjs.map +1 -1
- package/dist/components/SegmentedTabs.js +4 -4
- package/dist/components/SegmentedTabs.js.map +1 -1
- package/dist/components/Sidebar.cjs +1 -1
- package/dist/components/Sidebar.cjs.map +1 -1
- package/dist/components/Sidebar.d.cts +1 -1
- package/dist/components/Sidebar.d.ts +1 -1
- package/dist/components/Sidebar.js +1 -1
- package/dist/components/Sidebar.js.map +1 -1
- package/dist/components/SlideButton.cjs +1 -1
- package/dist/components/SlideButton.cjs.map +1 -1
- package/dist/components/SlideButton.js +1 -1
- package/dist/components/SlideButton.js.map +1 -1
- package/dist/components/Slider.cjs.map +1 -1
- package/dist/components/Slider.js.map +1 -1
- package/dist/components/SocialCard.cjs +4 -4
- package/dist/components/SocialCard.cjs.map +1 -1
- package/dist/components/SocialCard.d.cts +1 -1
- package/dist/components/SocialCard.d.ts +1 -1
- package/dist/components/SocialCard.js +4 -4
- 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.d.cts +2 -2
- package/dist/components/Spinner.d.ts +2 -2
- package/dist/components/Spinner.js +1 -1
- package/dist/components/Spinner.js.map +1 -1
- package/dist/components/Switch.cjs.map +1 -1
- package/dist/components/Switch.d.cts +2 -2
- package/dist/components/Switch.d.ts +2 -2
- package/dist/components/Switch.js.map +1 -1
- package/dist/components/Tabs.cjs +3 -3
- package/dist/components/Tabs.cjs.map +1 -1
- package/dist/components/Tabs.js +3 -3
- package/dist/components/Tabs.js.map +1 -1
- package/dist/components/Tag.cjs +3 -3
- package/dist/components/Tag.cjs.map +1 -1
- package/dist/components/Tag.d.cts +1 -1
- package/dist/components/Tag.d.ts +1 -1
- package/dist/components/Tag.js +3 -3
- package/dist/components/Tag.js.map +1 -1
- package/dist/components/Text.cjs +1 -1
- package/dist/components/Text.cjs.map +1 -1
- package/dist/components/Text.d.cts +1 -1
- package/dist/components/Text.d.ts +1 -1
- package/dist/components/Text.js +1 -1
- package/dist/components/Text.js.map +1 -1
- package/dist/components/TextArea.cjs +4 -4
- package/dist/components/TextArea.cjs.map +1 -1
- package/dist/components/TextArea.d.cts +1 -1
- package/dist/components/TextArea.d.ts +1 -1
- package/dist/components/TextArea.js +4 -4
- package/dist/components/TextArea.js.map +1 -1
- package/dist/components/Toast.cjs +3 -3
- package/dist/components/Toast.cjs.map +1 -1
- package/dist/components/Toast.d.cts +7 -7
- package/dist/components/Toast.d.ts +7 -7
- package/dist/components/Toast.js +3 -3
- package/dist/components/Toast.js.map +1 -1
- package/dist/components/ToastProvider.cjs +1 -1
- package/dist/components/ToastProvider.cjs.map +1 -1
- package/dist/components/ToastProvider.d.cts +1 -1
- package/dist/components/ToastProvider.d.ts +1 -1
- package/dist/components/ToastProvider.js +1 -1
- package/dist/components/ToastProvider.js.map +1 -1
- package/dist/components/Tooltip.cjs +3 -3
- package/dist/components/Tooltip.cjs.map +1 -1
- package/dist/components/Tooltip.d.cts +1 -1
- package/dist/components/Tooltip.d.ts +1 -1
- package/dist/components/Tooltip.js +3 -3
- package/dist/components/Tooltip.js.map +1 -1
- package/dist/components/VideoPlayer.cjs +2 -2
- package/dist/components/VideoPlayer.cjs.map +1 -1
- package/dist/components/VideoPlayer.d.cts +4 -4
- package/dist/components/VideoPlayer.d.ts +4 -4
- package/dist/components/VideoPlayer.js +2 -2
- package/dist/components/VideoPlayer.js.map +1 -1
- package/dist/components/WorkCard.cjs +3 -3
- package/dist/components/WorkCard.cjs.map +1 -1
- package/dist/components/WorkCard.d.cts +1 -1
- package/dist/components/WorkCard.d.ts +1 -1
- package/dist/components/WorkCard.js +3 -3
- package/dist/components/WorkCard.js.map +1 -1
- package/dist/index.cjs +8 -8
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +39 -39
- package/dist/index.d.ts +39 -39
- package/dist/index.js +8 -8
- package/dist/index.js.map +1 -1
- package/dist/styles/styles.css +1 -1
- package/package.json +2 -2
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import i from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {IconMap}from'@deckai/icons';function x(...e){return twMerge(clsx(e))}var g={12:"h-[12px] w-[12px]",16:"h-[16px] w-[16px]",18:"h-[18px] w-[18px]",20:"h-[20px] w-[20px]",24:"h-[24px] w-[24px]",32:"h-[32px] w-[32px]",36:"h-[36px] w-[36px]",40:"h-[40px] w-[40px]",42:"h-[42px] w-[42px]",48:"h-[48px] w-[48px]",64:"h-[64px] w-[64px]",72:"h-[72px] w-[72px]"},w={sm:{12:"sm:h-[12px] sm:w-[12px]",16:"sm:h-[16px] sm:w-[16px]",18:"sm:h-[18px] sm:w-[18px]",20:"sm:h-[20px] sm:w-[20px]",24:"sm:h-[24px] sm:w-[24px]",32:"sm:h-[32px] sm:w-[32px]",36:"sm:h-[36px] sm:w-[36px]",40:"sm:h-[40px] sm:w-[40px]",42:"sm:h-[42px] sm:w-[42px]",48:"sm:h-[48px] sm:w-[48px]",64:"sm:h-[64px] sm:w-[64px]",72:"sm:h-[72px] sm:w-[72px]"},md:{12:"md:h-[12px] md:w-[12px]",16:"md:h-[16px] md:w-[16px]",18:"md:h-[18px] md:w-[18px]",20:"md:h-[20px] md:w-[20px]",24:"md:h-[24px] md:w-[24px]",32:"md:h-[32px] md:w-[32px]",36:"md:h-[36px] md:w-[36px]",40:"md:h-[40px] md:w-[40px]",42:"md:h-[42px] md:w-[42px]",48:"md:h-[48px] md:w-[48px]",64:"md:h-[64px] md:w-[64px]",72:"md:h-[72px] md:w-[72px]"},lg:{12:"lg:h-[12px] lg:w-[12px]",16:"lg:h-[16px] lg:w-[16px]",18:"lg:h-[18px] lg:w-[18px]",20:"lg:h-[20px] lg:w-[20px]",24:"lg:h-[24px] lg:w-[24px]",32:"lg:h-[32px] lg:w-[32px]",36:"lg:h-[36px] lg:w-[36px]",40:"lg:h-[40px] lg:w-[40px]",42:"lg:h-[42px] lg:w-[42px]",48:"lg:h-[48px] lg:w-[48px]",64:"lg:h-[64px] lg:w-[64px]",72:"lg:h-[72px] lg:w-[72px]"},xl:{12:"xl:h-[12px] xl:w-[12px]",16:"xl:h-[16px] xl:w-[16px]",18:"xl:h-[18px] xl:w-[18px]",20:"xl:h-[20px] xl:w-[20px]",24:"xl:h-[24px] xl:w-[24px]",32:"xl:h-[32px] xl:w-[32px]",36:"xl:h-[36px] xl:w-[36px]",40:"xl:h-[40px] xl:w-[40px]",42:"xl:h-[42px] xl:w-[42px]",48:"xl:h-[48px] xl:w-[48px]",64:"xl:h-[64px] xl:w-[64px]",72:"xl:h-[72px] xl:w-[72px]"},"2xl":{12:"2xl:h-[12px] 2xl:w-[12px]",16:"2xl:h-[16px] 2xl:w-[16px]",18:"2xl:h-[18px] 2xl:w-[18px]",20:"2xl:h-[20px] 2xl:w-[20px]",24:"2xl:h-[24px] 2xl:w-[24px]",32:"2xl:h-[32px] 2xl:w-[32px]",36:"2xl:h-[36px] 2xl:w-[36px]",40:"2xl:h-[40px] 2xl:w-[40px]",42:"2xl:h-[42px] 2xl:w-[42px]",48:"2xl:h-[48px] 2xl:w-[48px]",64:"2xl:h-[64px] 2xl:w-[64px]",72:"2xl:h-[72px] 2xl:w-[72px]"}},d=e=>String(e),H=(e,p=24)=>{let t=[],o={};if(e===
|
|
1
|
+
import i from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {IconMap}from'@deckai/icons';function x(...e){return twMerge(clsx(e))}var g={12:"h-[12px] w-[12px]",16:"h-[16px] w-[16px]",18:"h-[18px] w-[18px]",20:"h-[20px] w-[20px]",24:"h-[24px] w-[24px]",32:"h-[32px] w-[32px]",36:"h-[36px] w-[36px]",40:"h-[40px] w-[40px]",42:"h-[42px] w-[42px]",48:"h-[48px] w-[48px]",64:"h-[64px] w-[64px]",72:"h-[72px] w-[72px]"},w={sm:{12:"sm:h-[12px] sm:w-[12px]",16:"sm:h-[16px] sm:w-[16px]",18:"sm:h-[18px] sm:w-[18px]",20:"sm:h-[20px] sm:w-[20px]",24:"sm:h-[24px] sm:w-[24px]",32:"sm:h-[32px] sm:w-[32px]",36:"sm:h-[36px] sm:w-[36px]",40:"sm:h-[40px] sm:w-[40px]",42:"sm:h-[42px] sm:w-[42px]",48:"sm:h-[48px] sm:w-[48px]",64:"sm:h-[64px] sm:w-[64px]",72:"sm:h-[72px] sm:w-[72px]"},md:{12:"md:h-[12px] md:w-[12px]",16:"md:h-[16px] md:w-[16px]",18:"md:h-[18px] md:w-[18px]",20:"md:h-[20px] md:w-[20px]",24:"md:h-[24px] md:w-[24px]",32:"md:h-[32px] md:w-[32px]",36:"md:h-[36px] md:w-[36px]",40:"md:h-[40px] md:w-[40px]",42:"md:h-[42px] md:w-[42px]",48:"md:h-[48px] md:w-[48px]",64:"md:h-[64px] md:w-[64px]",72:"md:h-[72px] md:w-[72px]"},lg:{12:"lg:h-[12px] lg:w-[12px]",16:"lg:h-[16px] lg:w-[16px]",18:"lg:h-[18px] lg:w-[18px]",20:"lg:h-[20px] lg:w-[20px]",24:"lg:h-[24px] lg:w-[24px]",32:"lg:h-[32px] lg:w-[32px]",36:"lg:h-[36px] lg:w-[36px]",40:"lg:h-[40px] lg:w-[40px]",42:"lg:h-[42px] lg:w-[42px]",48:"lg:h-[48px] lg:w-[48px]",64:"lg:h-[64px] lg:w-[64px]",72:"lg:h-[72px] lg:w-[72px]"},xl:{12:"xl:h-[12px] xl:w-[12px]",16:"xl:h-[16px] xl:w-[16px]",18:"xl:h-[18px] xl:w-[18px]",20:"xl:h-[20px] xl:w-[20px]",24:"xl:h-[24px] xl:w-[24px]",32:"xl:h-[32px] xl:w-[32px]",36:"xl:h-[36px] xl:w-[36px]",40:"xl:h-[40px] xl:w-[40px]",42:"xl:h-[42px] xl:w-[42px]",48:"xl:h-[48px] xl:w-[48px]",64:"xl:h-[64px] xl:w-[64px]",72:"xl:h-[72px] xl:w-[72px]"},"2xl":{12:"2xl:h-[12px] 2xl:w-[12px]",16:"2xl:h-[16px] 2xl:w-[16px]",18:"2xl:h-[18px] 2xl:w-[18px]",20:"2xl:h-[20px] 2xl:w-[20px]",24:"2xl:h-[24px] 2xl:w-[24px]",32:"2xl:h-[32px] 2xl:w-[32px]",36:"2xl:h-[36px] 2xl:w-[36px]",40:"2xl:h-[40px] 2xl:w-[40px]",42:"2xl:h-[42px] 2xl:w-[42px]",48:"2xl:h-[48px] 2xl:w-[48px]",64:"2xl:h-[64px] 2xl:w-[64px]",72:"2xl:h-[72px] 2xl:w-[72px]"}},d=e=>String(e),H=(e,p=24)=>{let t=[],o={};if(e===void 0){let r=d(p);r?t.push(g[r]):(o.height=`${p}px`,o.width=`${p}px`);}if(typeof e=="number"){let r=d(e);r?t.push(g[r]):(o.height=`${e}px`,o.width=`${e}px`);}if(Array.isArray(e)){let r=d(p),n=[r&&g[r]||`h-[${p}px] w-[${p}px]`];e.forEach(l=>{if(typeof l=="string"){let[s,m]=l.split(":"),a=parseInt(m,10),c=d(a);t.push(c&&w[s]?.[c]||`${s}:h-[${a}px] ${s}:w-[${a}px]`);}}),t.push(...n);}if(typeof e=="string"){let[r,n]=e.split(":"),l=parseInt(n,10),s=d(l);t.push(s&&w[r]?.[s]||`${r}:h-[${l}px] ${r}:w-[${l}px]`);}return {responsiveSizeClasses:t.join(" "),responsiveSizeStyles:o}};var M={primary:"var(--color-primary)",secondary:"var(--color-secondary)",white:"var(--color-white)",primaryBlue:"var(--color-primary-100)",disabled:"var(--color-disabled)",danger:"var(--color-danger)"},f=i.forwardRef(({name:e,size:p=24,color:t="primary",title:o,className:r,style:n={},...l},s)=>{let m=IconMap[e],{responsiveSizeClasses:a,responsiveSizeStyles:c}=H(p,24);return i.createElement("div",{className:x("flex justify-center items-center",a,r),style:{"--icon-stroke":M[t],...c,...n}},i.createElement(m,{ref:s,"aria-hidden":!o,"aria-label":o,stroke:e.includes("filled")?void 0:M[t],...l}))});f.displayName="Icon";var y="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100";var A={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},C=e=>{let[p,t]=e.split("-");return p==="heading"?A[t]||"p":p==="label"?"label":"p"},P={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},B=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[o,r]=t.split(":");return `${o}:text-${r}`}return `text-${t}`}).join(" "):"text-body-default",h=i.forwardRef(({variant:e="body-default",color:p="primary",as:t,className:o,children:r,weight:n,...l},s)=>{let m=B(e),a=p==="inherit"?"text-inherit":`text-${p}`,c=i.useMemo(()=>{let R=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return C(R)},[e]);return i.createElement(t||c,{ref:s,className:`
|
|
2
2
|
font-sans antialiased
|
|
3
3
|
${m}
|
|
4
4
|
${a}
|
|
5
5
|
${n&&`!${P[n]}`}
|
|
6
6
|
${o}
|
|
7
|
-
`,...l},r)});h.displayName="Text";
|
|
7
|
+
`,...l},r)});h.displayName="Text";function L({children:e,color:p="inherit",variant:t="body-default-semibold",href:o,className:r,...n}){return i.createElement(h,{variant:t,color:p},i.createElement("a",{href:o,className:x("hover:opacity-80 transition-all ease-in-out active:scale-95 hover:underline text-ellipsis",y,r),...n},e))}var b=i.forwardRef(({children:e,type:p="button",className:t,disabled:o,...r},n)=>i.createElement("button",{ref:n,type:p,disabled:o,className:x("appearance-none hover:opacity-80 transition-all active:scale-95",y,o&&"opacity-50 cursor-not-allowed",t),...r},e));b.displayName="Pressable";function I(){return i.createElement(h,{variant:["sm:body-lg","body-xs"]},"/")}var N=i.forwardRef(({items:e,className:p,SeparatorComponent:t=I,onHomeClick:o,children:r},n)=>{let l=()=>typeof t=="function"?i.createElement(t,null):i.cloneElement(t);return i.createElement("nav",{ref:n,"aria-label":"Breadcrumb",className:x("sm:relative sticky top-0 sm:border-none !border-solid border-secondary-50 border-b-[1px] pb-6 flex justify-between gap-2 md:flex-row flex-col",p)},i.createElement("ol",{className:"flex flex-wrap items-center gap-2"},i.createElement(b,{onClick:o},i.createElement(f,{name:"home",size:["sm:20",16],color:"secondary",className:"pb-0.5"})),l(),e.map((s,m)=>{let a=m===e.length-1;return a||!s.href?i.createElement(h,{variant:a?["body-default-semibold"]:["body-xs","md:body-default"],color:a?"primary":"secondary","aria-current":a?"page":void 0,key:s.label},s.label):i.createElement(i.Fragment,null,i.createElement(L,{href:s.href,key:s.label},s.label),l())})),r)});N.displayName="Breadcrumbs";export{N as Breadcrumbs};//# sourceMappingURL=Breadcrumbs.js.map
|
|
8
8
|
//# sourceMappingURL=Breadcrumbs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/responsive.ts","../../src/components/Icon.tsx","../../src/components/Link.tsx","../../src/components/Text.tsx","../../src/utils/tailwind.ts","../../src/components/Pressable.tsx","../../src/components/Breadcrumbs.tsx"],"names":["cn","inputs","twMerge","clsx","BASE_SIZES","RESPONSIVE_SIZES","getSizeKey","size","getResponsiveSize","baseSize","classes","styles","key","baseKey","responsiveClasses","s","breakpoint","valueStr","value","valueKey","COLOR_MAP","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","responsiveSizeClasses","responsiveSizeStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","children","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","focusRingStyles","Link","href","Pressable","type","disabled","DefaultSeparator","Breadcrumbs","items","SeparatorComponent","onHomeClick","renderSeparator","item","index","isLastItem"],"mappings":"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","file":"Breadcrumbs.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","export type Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\nexport type ResponsiveSize = number | `${Breakpoint}:${number}`;\n\ntype SizeKey =\n | \"12\"\n | \"16\"\n | \"18\"\n | \"20\"\n | \"24\"\n | \"32\"\n | \"36\"\n | \"40\"\n | \"42\"\n | \"48\"\n | \"64\"\n | \"72\";\n\n// These constants help Tailwind identify the classes during compilation\nconst BASE_SIZES: Record<SizeKey, string> = {\n \"12\": \"h-[12px] w-[12px]\",\n \"16\": \"h-[16px] w-[16px]\",\n \"18\": \"h-[18px] w-[18px]\",\n \"20\": \"h-[20px] w-[20px]\",\n \"24\": \"h-[24px] w-[24px]\",\n \"32\": \"h-[32px] w-[32px]\",\n \"36\": \"h-[36px] w-[36px]\",\n \"40\": \"h-[40px] w-[40px]\",\n \"42\": \"h-[42px] w-[42px]\",\n \"48\": \"h-[48px] w-[48px]\",\n \"64\": \"h-[64px] w-[64px]\",\n \"72\": \"h-[72px] w-[72px]\"\n};\n\nconst RESPONSIVE_SIZES: Record<Breakpoint, Record<SizeKey, string>> = {\n sm: {\n \"12\": \"sm:h-[12px] sm:w-[12px]\",\n \"16\": \"sm:h-[16px] sm:w-[16px]\",\n \"18\": \"sm:h-[18px] sm:w-[18px]\",\n \"20\": \"sm:h-[20px] sm:w-[20px]\",\n \"24\": \"sm:h-[24px] sm:w-[24px]\",\n \"32\": \"sm:h-[32px] sm:w-[32px]\",\n \"36\": \"sm:h-[36px] sm:w-[36px]\",\n \"40\": \"sm:h-[40px] sm:w-[40px]\",\n \"42\": \"sm:h-[42px] sm:w-[42px]\",\n \"48\": \"sm:h-[48px] sm:w-[48px]\",\n \"64\": \"sm:h-[64px] sm:w-[64px]\",\n \"72\": \"sm:h-[72px] sm:w-[72px]\"\n },\n md: {\n \"12\": \"md:h-[12px] md:w-[12px]\",\n \"16\": \"md:h-[16px] md:w-[16px]\",\n \"18\": \"md:h-[18px] md:w-[18px]\",\n \"20\": \"md:h-[20px] md:w-[20px]\",\n \"24\": \"md:h-[24px] md:w-[24px]\",\n \"32\": \"md:h-[32px] md:w-[32px]\",\n \"36\": \"md:h-[36px] md:w-[36px]\",\n \"40\": \"md:h-[40px] md:w-[40px]\",\n \"42\": \"md:h-[42px] md:w-[42px]\",\n \"48\": \"md:h-[48px] md:w-[48px]\",\n \"64\": \"md:h-[64px] md:w-[64px]\",\n \"72\": \"md:h-[72px] md:w-[72px]\"\n },\n lg: {\n \"12\": \"lg:h-[12px] lg:w-[12px]\",\n \"16\": \"lg:h-[16px] lg:w-[16px]\",\n \"18\": \"lg:h-[18px] lg:w-[18px]\",\n \"20\": \"lg:h-[20px] lg:w-[20px]\",\n \"24\": \"lg:h-[24px] lg:w-[24px]\",\n \"32\": \"lg:h-[32px] lg:w-[32px]\",\n \"36\": \"lg:h-[36px] lg:w-[36px]\",\n \"40\": \"lg:h-[40px] lg:w-[40px]\",\n \"42\": \"lg:h-[42px] lg:w-[42px]\",\n \"48\": \"lg:h-[48px] lg:w-[48px]\",\n \"64\": \"lg:h-[64px] lg:w-[64px]\",\n \"72\": \"lg:h-[72px] lg:w-[72px]\"\n },\n xl: {\n \"12\": \"xl:h-[12px] xl:w-[12px]\",\n \"16\": \"xl:h-[16px] xl:w-[16px]\",\n \"18\": \"xl:h-[18px] xl:w-[18px]\",\n \"20\": \"xl:h-[20px] xl:w-[20px]\",\n \"24\": \"xl:h-[24px] xl:w-[24px]\",\n \"32\": \"xl:h-[32px] xl:w-[32px]\",\n \"36\": \"xl:h-[36px] xl:w-[36px]\",\n \"40\": \"xl:h-[40px] xl:w-[40px]\",\n \"42\": \"xl:h-[42px] xl:w-[42px]\",\n \"48\": \"xl:h-[48px] xl:w-[48px]\",\n \"64\": \"xl:h-[64px] xl:w-[64px]\",\n \"72\": \"xl:h-[72px] xl:w-[72px]\"\n },\n \"2xl\": {\n \"12\": \"2xl:h-[12px] 2xl:w-[12px]\",\n \"16\": \"2xl:h-[16px] 2xl:w-[16px]\",\n \"18\": \"2xl:h-[18px] 2xl:w-[18px]\",\n \"20\": \"2xl:h-[20px] 2xl:w-[20px]\",\n \"24\": \"2xl:h-[24px] 2xl:w-[24px]\",\n \"32\": \"2xl:h-[32px] 2xl:w-[32px]\",\n \"36\": \"2xl:h-[36px] 2xl:w-[36px]\",\n \"40\": \"2xl:h-[40px] 2xl:w-[40px]\",\n \"42\": \"2xl:h-[42px] 2xl:w-[42px]\",\n \"48\": \"2xl:h-[48px] 2xl:w-[48px]\",\n \"64\": \"2xl:h-[64px] 2xl:w-[64px]\",\n \"72\": \"2xl:h-[72px] 2xl:w-[72px]\"\n }\n};\n\nconst getSizeKey = (size: number): SizeKey | undefined => {\n return String(size) as SizeKey;\n};\n\nexport const getResponsiveSize = (\n size: ResponsiveSize | ResponsiveSize[] | undefined,\n baseSize: number = 24\n): {\n responsiveSizeClasses: string;\n responsiveSizeStyles: Record<string, string>;\n} => {\n const classes: string[] = [];\n const styles: Record<string, string> = {};\n\n // If no size provided, use baseSize\n if (size === undefined) {\n const key = getSizeKey(baseSize);\n if (key) {\n classes.push(BASE_SIZES[key]);\n } else {\n styles.height = `${baseSize}px`;\n styles.width = `${baseSize}px`;\n }\n }\n\n // If size is a number, use that directly\n if (typeof size === \"number\") {\n const key = getSizeKey(size);\n if (key) {\n classes.push(BASE_SIZES[key]);\n } else {\n styles.height = `${size}px`;\n styles.width = `${size}px`;\n }\n }\n\n // If array of responsive sizes, generate responsive classes\n if (Array.isArray(size)) {\n const baseKey = getSizeKey(baseSize);\n const responsiveClasses = [\n (baseKey && BASE_SIZES[baseKey]) || `h-[${baseSize}px] w-[${baseSize}px]`\n ];\n\n size.forEach((s) => {\n if (typeof s === \"string\") {\n const [breakpoint, valueStr] = s.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n const key = getSizeKey(value);\n classes.push(\n (key && RESPONSIVE_SIZES[breakpoint]?.[key]) ||\n `${breakpoint}:h-[${value}px] ${breakpoint}:w-[${value}px]`\n );\n }\n });\n\n classes.push(...responsiveClasses);\n }\n\n if (typeof size === \"string\") {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n const valueKey = getSizeKey(value);\n classes.push(\n (valueKey && RESPONSIVE_SIZES[breakpoint]?.[valueKey]) ||\n `${breakpoint}:h-[${value}px] ${breakpoint}:w-[${value}px]`\n );\n }\n\n return {\n responsiveSizeClasses: classes.join(\" \"),\n responsiveSizeStyles: styles\n };\n};\n","import { IconMap, IconName } from \"@deckai/icons\";\nimport React, { SVGProps } from \"react\";\nimport { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\nimport { ResponsiveSize, getResponsiveSize } from \"../utils/responsive\";\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: ResponsiveSize | ResponsiveSize[];\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\n// Using CSS variables to support dark mode\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"var(--color-primary)\",\n secondary: \"var(--color-secondary)\",\n white: \"var(--color-white)\",\n primaryBlue: \"var(--color-primary-100)\",\n disabled: \"var(--color-disabled)\",\n danger: \"var(--color-danger)\"\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const { responsiveSizeClasses, responsiveSizeStyles } = getResponsiveSize(\n size,\n 24\n );\n\n return (\n <div\n className={cn(\n \"flex justify-center items-center\",\n responsiveSizeClasses,\n className\n )}\n style={{\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...responsiveSizeStyles,\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import React from \"react\";\nimport { Text, TextProps } from \"./Text\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type LinkProps = {\n href: string;\n children: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n} & Pick<TextProps, \"variant\" | \"color\"> &\n React.AnchorHTMLAttributes<HTMLAnchorElement>;\n\nexport const Link = ({\n children,\n color = \"inherit\",\n variant = \"body-default-semibold\",\n href,\n className,\n ...props\n}: LinkProps) => (\n <Text variant={variant} color={color}>\n <a\n href={href}\n className={cn(\n \"hover:opacity-80 transition-all ease-in-out active:scale-95 hover:underline\",\n focusRingStyles,\n className\n )}\n {...props}\n >\n {children}\n </a>\n </Text>\n);\n","import React from \"react\";\nimport { Typography } from \"../types/tailwind\";\nimport { Breakpoint } from \"../utils/responsive\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n | \"primary\"\n | \"secondary\"\n | \"white\"\n | \"primary-blue\"\n | \"disabled\"\n | \"danger\"\n | \"inherit\"\n | \"primary-100\";\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: TextColor;\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles using Tailwind classes that reference CSS variables\n const colorClasses = color === \"inherit\" ? \"text-inherit\" : `text-${color}`;\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`\n font-sans antialiased\n ${typographyClasses}\n ${colorClasses}\n ${weight && `!${fontWeight[weight]}`}\n ${className}\n `}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const sizes = [\"24\", \"42\", \"48\", \"64\", \"72\"]; // Add all the sizes you need\n\n const safelist: (string | { pattern: RegExp; variants: string[] })[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n // Generate size classes with responsive variants\n const sizeClasses = sizes.flatMap((size) => [\n `h-[${size}px]`,\n `w-[${size}px]`,\n ...breakpoints.flatMap((bp) => [\n `${bp}:h-[${size}px]`,\n `${bp}:w-[${size}px]`\n ])\n ]);\n\n return [...typographyClasses, ...responsiveTypographyClasses, ...sizeClasses];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100\";\nexport const focusRingWithinStyles =\n \"focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-100\";\nexport const focusRingStylesCoerced = \"ring-2 ring-primary-100\";\n","import React, { ButtonHTMLAttributes } from \"react\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable = React.forwardRef<HTMLButtonElement, PressableProps>(\n ({ children, type = \"button\", className, disabled, ...props }, ref) => (\n <button\n ref={ref}\n type={type}\n disabled={disabled}\n className={cn(\n \"appearance-none hover:opacity-80 transition-all active:scale-95\",\n focusRingStyles,\n disabled && \"opacity-50 cursor-not-allowed\",\n className\n )}\n {...props}\n >\n {children}\n </button>\n )\n);\n\nPressable.displayName = \"Pressable\";\n","import React from \"react\";\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\nimport { Link } from \"./Link\";\nimport { Pressable } from \"./Pressable\";\nimport { Text } from \"./Text\";\n\ntype BreadcrumbItem = {\n label: string;\n href?: string;\n};\n\nexport type BreadcrumbsProps = {\n items: BreadcrumbItem[];\n className?: string;\n SeparatorComponent?: React.ReactElement;\n onHomeClick?: () => void;\n children?: React.ReactNode;\n};\n\nconst DefaultSeparator = () => (\n <Text variant={[\"sm:body-lg\", \"body-xs\"]}>/</Text>\n);\n\nexport const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(\n (\n {\n items,\n className,\n SeparatorComponent = DefaultSeparator,\n onHomeClick,\n children\n },\n ref\n ) => {\n const renderSeparator = () =>\n typeof SeparatorComponent === \"function\" ? (\n <SeparatorComponent />\n ) : (\n React.cloneElement(SeparatorComponent)\n );\n\n return (\n <nav\n ref={ref}\n aria-label=\"Breadcrumb\"\n className={cn(\n \"sm:relative sticky top-0 sm:border-none !border-solid border-secondary-50 border-b-[1px] pb-6 flex justify-between gap-2 md:flex-row flex-col\",\n className\n )}\n >\n <ol className=\"flex flex-wrap items-center gap-2\">\n <Pressable onClick={onHomeClick}>\n <Icon\n name=\"home\"\n size={[\"sm:20\", 16]}\n color=\"secondary\"\n className=\"pb-0.5\"\n />\n </Pressable>\n {renderSeparator()}\n {items.map((item, index) => {\n const isLastItem = index === items.length - 1;\n\n return isLastItem || !item.href ? (\n <Text\n variant={\n isLastItem\n ? [\"body-default-semibold\"]\n : [\"body-xs\", \"md:body-default\"]\n }\n color={isLastItem ? \"primary\" : \"secondary\"}\n aria-current={isLastItem ? \"page\" : undefined}\n key={item.label}\n >\n {item.label}\n </Text>\n ) : (\n <>\n <Link href={item.href} key={item.label}>\n {item.label}\n </Link>\n {renderSeparator()}\n </>\n );\n })}\n </ol>\n {children}\n </nav>\n );\n }\n);\n\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts","../../src/utils/responsive.ts","../../src/components/Icon.tsx","../../src/utils/tailwind.ts","../../src/components/Text.tsx","../../src/components/Link.tsx","../../src/components/Pressable.tsx","../../src/components/Breadcrumbs.tsx"],"names":["cn","inputs","twMerge","clsx","BASE_SIZES","RESPONSIVE_SIZES","getSizeKey","size","getResponsiveSize","baseSize","classes","styles","key","baseKey","responsiveClasses","s","breakpoint","valueStr","value","valueKey","COLOR_MAP","Icon","React","name","color","title","className","style","props","ref","IconComponent","IconMap","responsiveSizeClasses","responsiveSizeStyles","focusRingStyles","HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","fontWeight","processVariants","variants","typographyClass","Text","as","children","weight","typographyClasses","colorClasses","suggestedElement","baseVariant","Link","href","Pressable","type","disabled","DefaultSeparator","Breadcrumbs","items","SeparatorComponent","onHomeClick","renderSeparator","item","index","isLastItem"],"mappings":"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","file":"Breadcrumbs.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","export type Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\nexport type ResponsiveSize = number | `${Breakpoint}:${number}`;\n\ntype SizeKey =\n | \"12\"\n | \"16\"\n | \"18\"\n | \"20\"\n | \"24\"\n | \"32\"\n | \"36\"\n | \"40\"\n | \"42\"\n | \"48\"\n | \"64\"\n | \"72\";\n\n// These constants help Tailwind identify the classes during compilation\nconst BASE_SIZES: Record<SizeKey, string> = {\n \"12\": \"h-[12px] w-[12px]\",\n \"16\": \"h-[16px] w-[16px]\",\n \"18\": \"h-[18px] w-[18px]\",\n \"20\": \"h-[20px] w-[20px]\",\n \"24\": \"h-[24px] w-[24px]\",\n \"32\": \"h-[32px] w-[32px]\",\n \"36\": \"h-[36px] w-[36px]\",\n \"40\": \"h-[40px] w-[40px]\",\n \"42\": \"h-[42px] w-[42px]\",\n \"48\": \"h-[48px] w-[48px]\",\n \"64\": \"h-[64px] w-[64px]\",\n \"72\": \"h-[72px] w-[72px]\"\n};\n\nconst RESPONSIVE_SIZES: Record<Breakpoint, Record<SizeKey, string>> = {\n sm: {\n \"12\": \"sm:h-[12px] sm:w-[12px]\",\n \"16\": \"sm:h-[16px] sm:w-[16px]\",\n \"18\": \"sm:h-[18px] sm:w-[18px]\",\n \"20\": \"sm:h-[20px] sm:w-[20px]\",\n \"24\": \"sm:h-[24px] sm:w-[24px]\",\n \"32\": \"sm:h-[32px] sm:w-[32px]\",\n \"36\": \"sm:h-[36px] sm:w-[36px]\",\n \"40\": \"sm:h-[40px] sm:w-[40px]\",\n \"42\": \"sm:h-[42px] sm:w-[42px]\",\n \"48\": \"sm:h-[48px] sm:w-[48px]\",\n \"64\": \"sm:h-[64px] sm:w-[64px]\",\n \"72\": \"sm:h-[72px] sm:w-[72px]\"\n },\n md: {\n \"12\": \"md:h-[12px] md:w-[12px]\",\n \"16\": \"md:h-[16px] md:w-[16px]\",\n \"18\": \"md:h-[18px] md:w-[18px]\",\n \"20\": \"md:h-[20px] md:w-[20px]\",\n \"24\": \"md:h-[24px] md:w-[24px]\",\n \"32\": \"md:h-[32px] md:w-[32px]\",\n \"36\": \"md:h-[36px] md:w-[36px]\",\n \"40\": \"md:h-[40px] md:w-[40px]\",\n \"42\": \"md:h-[42px] md:w-[42px]\",\n \"48\": \"md:h-[48px] md:w-[48px]\",\n \"64\": \"md:h-[64px] md:w-[64px]\",\n \"72\": \"md:h-[72px] md:w-[72px]\"\n },\n lg: {\n \"12\": \"lg:h-[12px] lg:w-[12px]\",\n \"16\": \"lg:h-[16px] lg:w-[16px]\",\n \"18\": \"lg:h-[18px] lg:w-[18px]\",\n \"20\": \"lg:h-[20px] lg:w-[20px]\",\n \"24\": \"lg:h-[24px] lg:w-[24px]\",\n \"32\": \"lg:h-[32px] lg:w-[32px]\",\n \"36\": \"lg:h-[36px] lg:w-[36px]\",\n \"40\": \"lg:h-[40px] lg:w-[40px]\",\n \"42\": \"lg:h-[42px] lg:w-[42px]\",\n \"48\": \"lg:h-[48px] lg:w-[48px]\",\n \"64\": \"lg:h-[64px] lg:w-[64px]\",\n \"72\": \"lg:h-[72px] lg:w-[72px]\"\n },\n xl: {\n \"12\": \"xl:h-[12px] xl:w-[12px]\",\n \"16\": \"xl:h-[16px] xl:w-[16px]\",\n \"18\": \"xl:h-[18px] xl:w-[18px]\",\n \"20\": \"xl:h-[20px] xl:w-[20px]\",\n \"24\": \"xl:h-[24px] xl:w-[24px]\",\n \"32\": \"xl:h-[32px] xl:w-[32px]\",\n \"36\": \"xl:h-[36px] xl:w-[36px]\",\n \"40\": \"xl:h-[40px] xl:w-[40px]\",\n \"42\": \"xl:h-[42px] xl:w-[42px]\",\n \"48\": \"xl:h-[48px] xl:w-[48px]\",\n \"64\": \"xl:h-[64px] xl:w-[64px]\",\n \"72\": \"xl:h-[72px] xl:w-[72px]\"\n },\n \"2xl\": {\n \"12\": \"2xl:h-[12px] 2xl:w-[12px]\",\n \"16\": \"2xl:h-[16px] 2xl:w-[16px]\",\n \"18\": \"2xl:h-[18px] 2xl:w-[18px]\",\n \"20\": \"2xl:h-[20px] 2xl:w-[20px]\",\n \"24\": \"2xl:h-[24px] 2xl:w-[24px]\",\n \"32\": \"2xl:h-[32px] 2xl:w-[32px]\",\n \"36\": \"2xl:h-[36px] 2xl:w-[36px]\",\n \"40\": \"2xl:h-[40px] 2xl:w-[40px]\",\n \"42\": \"2xl:h-[42px] 2xl:w-[42px]\",\n \"48\": \"2xl:h-[48px] 2xl:w-[48px]\",\n \"64\": \"2xl:h-[64px] 2xl:w-[64px]\",\n \"72\": \"2xl:h-[72px] 2xl:w-[72px]\"\n }\n};\n\nconst getSizeKey = (size: number): SizeKey | undefined => {\n return String(size) as SizeKey;\n};\n\nexport const getResponsiveSize = (\n size: ResponsiveSize | ResponsiveSize[] | undefined,\n baseSize: number = 24\n): {\n responsiveSizeClasses: string;\n responsiveSizeStyles: Record<string, string>;\n} => {\n const classes: string[] = [];\n const styles: Record<string, string> = {};\n\n // If no size provided, use baseSize\n if (size === undefined) {\n const key = getSizeKey(baseSize);\n if (key) {\n classes.push(BASE_SIZES[key]);\n } else {\n styles.height = `${baseSize}px`;\n styles.width = `${baseSize}px`;\n }\n }\n\n // If size is a number, use that directly\n if (typeof size === \"number\") {\n const key = getSizeKey(size);\n if (key) {\n classes.push(BASE_SIZES[key]);\n } else {\n styles.height = `${size}px`;\n styles.width = `${size}px`;\n }\n }\n\n // If array of responsive sizes, generate responsive classes\n if (Array.isArray(size)) {\n const baseKey = getSizeKey(baseSize);\n const responsiveClasses = [\n (baseKey && BASE_SIZES[baseKey]) || `h-[${baseSize}px] w-[${baseSize}px]`\n ];\n\n size.forEach((s) => {\n if (typeof s === \"string\") {\n const [breakpoint, valueStr] = s.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n const key = getSizeKey(value);\n classes.push(\n (key && RESPONSIVE_SIZES[breakpoint]?.[key]) ||\n `${breakpoint}:h-[${value}px] ${breakpoint}:w-[${value}px]`\n );\n }\n });\n\n classes.push(...responsiveClasses);\n }\n\n if (typeof size === \"string\") {\n const [breakpoint, valueStr] = size.split(\":\") as [Breakpoint, string];\n const value = parseInt(valueStr, 10);\n const valueKey = getSizeKey(value);\n classes.push(\n (valueKey && RESPONSIVE_SIZES[breakpoint]?.[valueKey]) ||\n `${breakpoint}:h-[${value}px] ${breakpoint}:w-[${value}px]`\n );\n }\n\n return {\n responsiveSizeClasses: classes.join(\" \"),\n responsiveSizeStyles: styles\n };\n};\n","import type { IconName } from \"@deckai/icons\";\nimport { IconMap } from \"@deckai/icons\";\nimport type { SVGProps } from \"react\";\nimport React from \"react\";\n\nimport type { IconColors } from \"../types/tailwind\";\nimport { cn } from \"../utils\";\nimport type { ResponsiveSize } from \"../utils/responsive\";\nimport { getResponsiveSize } from \"../utils/responsive\";\n\nexport type IconProps = {\n name: IconName;\n /** @default 24 */\n size?: ResponsiveSize | ResponsiveSize[];\n /** @default primary */\n color?: IconColors;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n} & Omit<SVGProps<SVGSVGElement>, \"aria-hidden\" | \"aria-label\">;\n\n// Using CSS variables to support dark mode\nconst COLOR_MAP: Record<IconColors, string> = {\n primary: \"var(--color-primary)\",\n secondary: \"var(--color-secondary)\",\n white: \"var(--color-white)\",\n primaryBlue: \"var(--color-primary-100)\",\n disabled: \"var(--color-disabled)\",\n danger: \"var(--color-danger)\"\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n (\n {\n name,\n size = 24,\n color = \"primary\",\n title,\n className,\n style = {},\n ...props\n },\n ref\n ) => {\n const IconComponent = IconMap[name];\n const { responsiveSizeClasses, responsiveSizeStyles } = getResponsiveSize(\n size,\n 24\n );\n\n return (\n <div\n className={cn(\n \"flex justify-center items-center\",\n responsiveSizeClasses,\n className\n )}\n style={{\n [\"--icon-stroke\" as string]: COLOR_MAP[color],\n ...responsiveSizeStyles,\n ...style\n }}\n >\n <IconComponent\n ref={ref}\n aria-hidden={!title}\n aria-label={title}\n stroke={name.includes(\"filled\") ? undefined : COLOR_MAP[color]}\n {...props}\n />\n </div>\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n","import type { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const sizes = [\"24\", \"42\", \"48\", \"64\", \"72\"]; // Add all the sizes you need\n\n const safelist: (string | { pattern: RegExp; variants: string[] })[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n // Generate size classes with responsive variants\n const sizeClasses = sizes.flatMap((size) => [\n `h-[${size}px]`,\n `w-[${size}px]`,\n ...breakpoints.flatMap((bp) => [\n `${bp}:h-[${size}px]`,\n `${bp}:w-[${size}px]`\n ])\n ]);\n\n return [...typographyClasses, ...responsiveTypographyClasses, ...sizeClasses];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100\";\nexport const focusRingWithinStyles =\n \"focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-100\";\nexport const focusRingStylesCoerced = \"ring-2 ring-primary-100\";\n","import React from \"react\";\n\nimport type { Typography } from \"../types/tailwind\";\nimport type { Breakpoint } from \"../utils/responsive\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n | \"primary\"\n | \"secondary\"\n | \"white\"\n | \"primary-blue\"\n | \"disabled\"\n | \"danger\"\n | \"inherit\"\n | \"primary-100\";\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: TextColor;\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles using Tailwind classes that reference CSS variables\n const colorClasses = color === \"inherit\" ? \"text-inherit\" : `text-${color}`;\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`\n font-sans antialiased\n ${typographyClasses}\n ${colorClasses}\n ${weight && `!${fontWeight[weight]}`}\n ${className}\n `}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import React from \"react\";\n\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport type { TextProps } from \"./Text\";\nimport { Text } from \"./Text\";\n\nexport type LinkProps = {\n href: string;\n children: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n} & Pick<TextProps, \"variant\" | \"color\"> &\n React.AnchorHTMLAttributes<HTMLAnchorElement>;\n\nexport function Link({\n children,\n color = \"inherit\",\n variant = \"body-default-semibold\",\n href,\n className,\n ...props\n}: LinkProps) {\n return (\n <Text variant={variant} color={color}>\n <a\n href={href}\n className={cn(\n \"hover:opacity-80 transition-all ease-in-out active:scale-95 hover:underline text-ellipsis\",\n focusRingStyles,\n className\n )}\n {...props}\n >\n {children}\n </a>\n </Text>\n );\n}\n","import type { ButtonHTMLAttributes } from \"react\";\nimport React from \"react\";\n\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Pressable = React.forwardRef<HTMLButtonElement, PressableProps>(\n ({ children, type = \"button\", className, disabled, ...props }, ref) => (\n <button\n ref={ref}\n type={type}\n disabled={disabled}\n className={cn(\n \"appearance-none hover:opacity-80 transition-all active:scale-95\",\n focusRingStyles,\n disabled && \"opacity-50 cursor-not-allowed\",\n className\n )}\n {...props}\n >\n {children}\n </button>\n )\n);\n\nPressable.displayName = \"Pressable\";\n","import React from \"react\";\n\nimport { cn } from \"../utils\";\nimport { Icon } from \"./Icon\";\nimport { Link } from \"./Link\";\nimport { Pressable } from \"./Pressable\";\nimport { Text } from \"./Text\";\n\ntype BreadcrumbItem = {\n label: string;\n href?: string;\n};\n\nexport type BreadcrumbsProps = {\n items: BreadcrumbItem[];\n className?: string;\n SeparatorComponent?: React.ReactElement;\n onHomeClick?: () => void;\n children?: React.ReactNode;\n};\n\nfunction DefaultSeparator() {\n return <Text variant={[\"sm:body-lg\", \"body-xs\"]}>/</Text>;\n}\n\nexport const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(\n (\n {\n items,\n className,\n SeparatorComponent = DefaultSeparator,\n onHomeClick,\n children\n },\n ref\n ) => {\n const renderSeparator = () =>\n typeof SeparatorComponent === \"function\" ? (\n <SeparatorComponent />\n ) : (\n React.cloneElement(SeparatorComponent)\n );\n\n return (\n <nav\n ref={ref}\n aria-label=\"Breadcrumb\"\n className={cn(\n \"sm:relative sticky top-0 sm:border-none !border-solid border-secondary-50 border-b-[1px] pb-6 flex justify-between gap-2 md:flex-row flex-col\",\n className\n )}\n >\n <ol className=\"flex flex-wrap items-center gap-2\">\n <Pressable onClick={onHomeClick}>\n <Icon\n name=\"home\"\n size={[\"sm:20\", 16]}\n color=\"secondary\"\n className=\"pb-0.5\"\n />\n </Pressable>\n {renderSeparator()}\n {items.map((item, index) => {\n const isLastItem = index === items.length - 1;\n\n return isLastItem || !item.href ? (\n <Text\n variant={\n isLastItem\n ? [\"body-default-semibold\"]\n : [\"body-xs\", \"md:body-default\"]\n }\n color={isLastItem ? \"primary\" : \"secondary\"}\n aria-current={isLastItem ? \"page\" : undefined}\n key={item.label}\n >\n {item.label}\n </Text>\n ) : (\n <>\n <Link href={item.href} key={item.label}>\n {item.label}\n </Link>\n {renderSeparator()}\n </>\n );\n })}\n </ol>\n {children}\n </nav>\n );\n }\n);\n\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"]}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
'use strict';var c=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 c__namespace=/*#__PURE__*/_interopNamespace(c);var b={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},h=e=>{let[r,t]=e.split("-");return r==="heading"?b[t]||"p":r==="label"?"label":"p"},f={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},H=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[n
|
|
1
|
+
'use strict';var c=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 c__namespace=/*#__PURE__*/_interopNamespace(c);var b={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},h=e=>{let[r,t]=e.split("-");return r==="heading"?b[t]||"p":r==="label"?"label":"p"},f={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},H=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[o,n]=t.split(":");return `${o}:text-${n}`}return `text-${t}`}).join(" "):"text-body-default",y=c__namespace.default.forwardRef(({variant:e="body-default",color:r="primary",as:t,className:o,children:n,weight:s,...i},p)=>{let l=H(e),T=r==="inherit"?"text-inherit":`text-${r}`,g=c__namespace.default.useMemo(()=>{let u=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return h(u)},[e]);return c__namespace.default.createElement(t||g,{ref:p,className:`
|
|
2
2
|
font-sans antialiased
|
|
3
3
|
${l}
|
|
4
|
-
${
|
|
4
|
+
${T}
|
|
5
5
|
${s&&`!${f[s]}`}
|
|
6
|
-
${
|
|
7
|
-
`,...i},
|
|
6
|
+
${o}
|
|
7
|
+
`,...i},n)});y.displayName="Text";function m(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var d="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100";var L={black:"bg-primary text-white",accent:"bg-primary-100 text-white",secondary:"bg-secondary-100 text-secondary"},E={black:"border border-text text-primary",accent:"border border-primary-100 text-primary-100",secondary:"border border-text-secondary text-secondary"},R=c__namespace.forwardRef(({className:e,variant:r="filled",color:t="black",isLoading:o=false,children:n,disabled:s,end:i,...p},l)=>c__namespace.createElement("button",{ref:l,className:m(`
|
|
8
8
|
sm:px-7 px-4
|
|
9
9
|
py-2
|
|
10
10
|
inline-flex items-center justify-center
|
|
@@ -12,5 +12,5 @@
|
|
|
12
12
|
transition-colors duration-200
|
|
13
13
|
disabled:opacity-50 disabled:pointer-events-none
|
|
14
14
|
hover:opacity-80 active:scale-95
|
|
15
|
-
truncate`,
|
|
15
|
+
truncate`,d,r==="filled"?L[t]:r==="transparent"?"bg-transparent text-text":E[t],e),disabled:s||o,type:"button",...p},typeof n=="string"?c__namespace.createElement(y,{variant:["sm:body-default-bold","body-xxs-semibold"],color:"inherit"},n):n,i));R.displayName="Button";exports.Button=R;exports.filled=L;exports.outlined=E;//# sourceMappingURL=Button.cjs.map
|
|
16
16
|
//# sourceMappingURL=Button.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Text.tsx","../../src/utils/tailwind.ts","../../src/utils/index.ts","../../src/components/Button.tsx"],"names":["HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","size","fontWeight","processVariants","variants","breakpoint","typographyClass","Text","React","color","as","className","children","weight","props","ref","typographyClasses","colorClasses","suggestedElement","baseVariant","focusRingStyles","cn","inputs","twMerge","clsx","filled","outlined","Button","a","isLoading","disabled","end"],"mappings":"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","file":"Button.cjs","sourcesContent":["import React from \"react\";\nimport { Typography } from \"../types/tailwind\";\nimport { Breakpoint } from \"../utils/responsive\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n | \"primary\"\n | \"secondary\"\n | \"white\"\n | \"primary-blue\"\n | \"disabled\"\n | \"danger\"\n | \"inherit\"\n | \"primary-100\";\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: TextColor;\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles using Tailwind classes that reference CSS variables\n const colorClasses = color === \"inherit\" ? \"text-inherit\" : `text-${color}`;\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`\n font-sans antialiased\n ${typographyClasses}\n ${colorClasses}\n ${weight && `!${fontWeight[weight]}`}\n ${className}\n `}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const sizes = [\"24\", \"42\", \"48\", \"64\", \"72\"]; // Add all the sizes you need\n\n const safelist: (string | { pattern: RegExp; variants: string[] })[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n // Generate size classes with responsive variants\n const sizeClasses = sizes.flatMap((size) => [\n `h-[${size}px]`,\n `w-[${size}px]`,\n ...breakpoints.flatMap((bp) => [\n `${bp}:h-[${size}px]`,\n `${bp}:w-[${size}px]`\n ])\n ]);\n\n return [...typographyClasses, ...responsiveTypographyClasses, ...sizeClasses];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100\";\nexport const focusRingWithinStyles =\n \"focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-100\";\nexport const focusRingStylesCoerced = \"ring-2 ring-primary-100\";\n","import { 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 { Text } from \"./Text\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type ButtonProps = {\n /** @default filled */\n variant?: \"filled\" | \"outlined\" | \"transparent\";\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-primary 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-primary\",\n accent: \"border border-primary-100 text-primary-100\",\n secondary: \"border border-text-secondary text-secondary\"\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant = \"filled\",\n color = \"black\",\n isLoading = false,\n children,\n disabled,\n end,\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\"\n ? filled[color]\n : variant === \"transparent\"\n ? \"bg-transparent text-text\"\n : 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 {end}\n </button>\n )\n);\n\nButton.displayName = \"Button\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/Text.tsx","../../src/utils/index.ts","../../src/utils/tailwind.ts","../../src/components/Button.tsx"],"names":["HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","size","fontWeight","processVariants","variants","breakpoint","typographyClass","Text","React","color","as","className","children","weight","props","ref","typographyClasses","colorClasses","suggestedElement","baseVariant","cn","inputs","twMerge","clsx","focusRingStyles","filled","outlined","Button","a","isLoading","disabled","end"],"mappings":"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","file":"Button.cjs","sourcesContent":["import React from \"react\";\n\nimport type { Typography } from \"../types/tailwind\";\nimport type { Breakpoint } from \"../utils/responsive\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n | \"primary\"\n | \"secondary\"\n | \"white\"\n | \"primary-blue\"\n | \"disabled\"\n | \"danger\"\n | \"inherit\"\n | \"primary-100\";\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: TextColor;\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles using Tailwind classes that reference CSS variables\n const colorClasses = color === \"inherit\" ? \"text-inherit\" : `text-${color}`;\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`\n font-sans antialiased\n ${typographyClasses}\n ${colorClasses}\n ${weight && `!${fontWeight[weight]}`}\n ${className}\n `}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import type { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const sizes = [\"24\", \"42\", \"48\", \"64\", \"72\"]; // Add all the sizes you need\n\n const safelist: (string | { pattern: RegExp; variants: string[] })[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n // Generate size classes with responsive variants\n const sizeClasses = sizes.flatMap((size) => [\n `h-[${size}px]`,\n `w-[${size}px]`,\n ...breakpoints.flatMap((bp) => [\n `${bp}:h-[${size}px]`,\n `${bp}:w-[${size}px]`\n ])\n ]);\n\n return [...typographyClasses, ...responsiveTypographyClasses, ...sizeClasses];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100\";\nexport const focusRingWithinStyles =\n \"focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-100\";\nexport const focusRingStylesCoerced = \"ring-2 ring-primary-100\";\n","import * as React from \"react\";\n\nimport { Text } from \"./Text\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type ButtonProps = {\n /** @default filled */\n variant?: \"filled\" | \"outlined\" | \"transparent\";\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-primary 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-primary\",\n accent: \"border border-primary-100 text-primary-100\",\n secondary: \"border border-text-secondary text-secondary\"\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant = \"filled\",\n color = \"black\",\n isLoading = false,\n children,\n disabled,\n end,\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\"\n ? filled[color]\n : variant === \"transparent\"\n ? \"bg-transparent text-text\"\n : 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 {end}\n </button>\n )\n);\n\nButton.displayName = \"Button\";\n"]}
|
|
@@ -24,13 +24,13 @@ declare const outlined: {
|
|
|
24
24
|
};
|
|
25
25
|
declare const Button: React.ForwardRefExoticComponent<{
|
|
26
26
|
/** @default filled */
|
|
27
|
-
variant?: "filled" | "outlined" | "transparent";
|
|
27
|
+
variant?: "filled" | "outlined" | "transparent" | undefined;
|
|
28
28
|
/** @default primary */
|
|
29
|
-
color?: "black" | "accent" |
|
|
30
|
-
isLoading?: boolean;
|
|
29
|
+
color?: "secondary" | "black" | "accent" | undefined;
|
|
30
|
+
isLoading?: boolean | undefined;
|
|
31
31
|
children: React.ReactNode;
|
|
32
|
-
className?: string;
|
|
33
|
-
disabled?: boolean;
|
|
32
|
+
className?: string | undefined;
|
|
33
|
+
disabled?: boolean | undefined;
|
|
34
34
|
start?: React.ReactNode;
|
|
35
35
|
end?: React.ReactNode;
|
|
36
36
|
} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -24,13 +24,13 @@ declare const outlined: {
|
|
|
24
24
|
};
|
|
25
25
|
declare const Button: React.ForwardRefExoticComponent<{
|
|
26
26
|
/** @default filled */
|
|
27
|
-
variant?: "filled" | "outlined" | "transparent";
|
|
27
|
+
variant?: "filled" | "outlined" | "transparent" | undefined;
|
|
28
28
|
/** @default primary */
|
|
29
|
-
color?: "black" | "accent" |
|
|
30
|
-
isLoading?: boolean;
|
|
29
|
+
color?: "secondary" | "black" | "accent" | undefined;
|
|
30
|
+
isLoading?: boolean | undefined;
|
|
31
31
|
children: React.ReactNode;
|
|
32
|
-
className?: string;
|
|
33
|
-
disabled?: boolean;
|
|
32
|
+
className?: string | undefined;
|
|
33
|
+
disabled?: boolean | undefined;
|
|
34
34
|
start?: React.ReactNode;
|
|
35
35
|
end?: React.ReactNode;
|
|
36
36
|
} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import*as c from'react';import c__default from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';var b={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},h=e=>{let[r,t]=e.split("-");return r==="heading"?b[t]||"p":r==="label"?"label":"p"},f={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},H=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[n
|
|
1
|
+
import*as c from'react';import c__default from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';var b={xl:"h1",lg:"h1",md:"h2",sm:"h3",xs:"h4"},h=e=>{let[r,t]=e.split("-");return r==="heading"?b[t]||"p":r==="label"?"label":"p"},f={light:"font-light",regular:"font-regular",semibold:"font-semibold",bold:"font-bold"},H=e=>e?(Array.isArray(e)?e:[e]).map(t=>{if(t.includes(":")){let[o,n]=t.split(":");return `${o}:text-${n}`}return `text-${t}`}).join(" "):"text-body-default",y=c__default.forwardRef(({variant:e="body-default",color:r="primary",as:t,className:o,children:n,weight:s,...i},p)=>{let l=H(e),T=r==="inherit"?"text-inherit":`text-${r}`,g=c__default.useMemo(()=>{let u=typeof e=="string"?e.split(":").pop():Array.isArray(e)?e[0].split(":").pop():"body-default";return h(u)},[e]);return c__default.createElement(t||g,{ref:p,className:`
|
|
2
2
|
font-sans antialiased
|
|
3
3
|
${l}
|
|
4
|
-
${
|
|
4
|
+
${T}
|
|
5
5
|
${s&&`!${f[s]}`}
|
|
6
|
-
${
|
|
7
|
-
`,...i},
|
|
6
|
+
${o}
|
|
7
|
+
`,...i},n)});y.displayName="Text";function m(...e){return twMerge(clsx(e))}var d="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100";var L={black:"bg-primary text-white",accent:"bg-primary-100 text-white",secondary:"bg-secondary-100 text-secondary"},E={black:"border border-text text-primary",accent:"border border-primary-100 text-primary-100",secondary:"border border-text-secondary text-secondary"},R=c.forwardRef(({className:e,variant:r="filled",color:t="black",isLoading:o=false,children:n,disabled:s,end:i,...p},l)=>c.createElement("button",{ref:l,className:m(`
|
|
8
8
|
sm:px-7 px-4
|
|
9
9
|
py-2
|
|
10
10
|
inline-flex items-center justify-center
|
|
@@ -12,5 +12,5 @@ import*as c from'react';import c__default from'react';import {clsx}from'clsx';im
|
|
|
12
12
|
transition-colors duration-200
|
|
13
13
|
disabled:opacity-50 disabled:pointer-events-none
|
|
14
14
|
hover:opacity-80 active:scale-95
|
|
15
|
-
truncate`,
|
|
15
|
+
truncate`,d,r==="filled"?L[t]:r==="transparent"?"bg-transparent text-text":E[t],e),disabled:s||o,type:"button",...p},typeof n=="string"?c.createElement(y,{variant:["sm:body-default-bold","body-xxs-semibold"],color:"inherit"},n):n,i));R.displayName="Button";export{R as Button,L as filled,E as outlined};//# sourceMappingURL=Button.js.map
|
|
16
16
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Text.tsx","../../src/utils/tailwind.ts","../../src/utils/index.ts","../../src/components/Button.tsx"],"names":["HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","size","fontWeight","processVariants","variants","breakpoint","typographyClass","Text","React","color","as","className","children","weight","props","ref","typographyClasses","colorClasses","suggestedElement","baseVariant","focusRingStyles","cn","inputs","twMerge","clsx","filled","outlined","Button","a","isLoading","disabled","end"],"mappings":"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","file":"Button.js","sourcesContent":["import React from \"react\";\nimport { Typography } from \"../types/tailwind\";\nimport { Breakpoint } from \"../utils/responsive\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n | \"primary\"\n | \"secondary\"\n | \"white\"\n | \"primary-blue\"\n | \"disabled\"\n | \"danger\"\n | \"inherit\"\n | \"primary-100\";\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: TextColor;\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles using Tailwind classes that reference CSS variables\n const colorClasses = color === \"inherit\" ? \"text-inherit\" : `text-${color}`;\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`\n font-sans antialiased\n ${typographyClasses}\n ${colorClasses}\n ${weight && `!${fontWeight[weight]}`}\n ${className}\n `}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const sizes = [\"24\", \"42\", \"48\", \"64\", \"72\"]; // Add all the sizes you need\n\n const safelist: (string | { pattern: RegExp; variants: string[] })[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n // Generate size classes with responsive variants\n const sizeClasses = sizes.flatMap((size) => [\n `h-[${size}px]`,\n `w-[${size}px]`,\n ...breakpoints.flatMap((bp) => [\n `${bp}:h-[${size}px]`,\n `${bp}:w-[${size}px]`\n ])\n ]);\n\n return [...typographyClasses, ...responsiveTypographyClasses, ...sizeClasses];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100\";\nexport const focusRingWithinStyles =\n \"focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-100\";\nexport const focusRingStylesCoerced = \"ring-2 ring-primary-100\";\n","import { 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 { Text } from \"./Text\";\nimport { focusRingStyles } from \"../utils/tailwind\";\nimport { cn } from \"../utils\";\n\nexport type ButtonProps = {\n /** @default filled */\n variant?: \"filled\" | \"outlined\" | \"transparent\";\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-primary 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-primary\",\n accent: \"border border-primary-100 text-primary-100\",\n secondary: \"border border-text-secondary text-secondary\"\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant = \"filled\",\n color = \"black\",\n isLoading = false,\n children,\n disabled,\n end,\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\"\n ? filled[color]\n : variant === \"transparent\"\n ? \"bg-transparent text-text\"\n : 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 {end}\n </button>\n )\n);\n\nButton.displayName = \"Button\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/Text.tsx","../../src/utils/index.ts","../../src/utils/tailwind.ts","../../src/components/Button.tsx"],"names":["HEADING_ELEMENT_MAP","getElementFromVariant","variant","category","size","fontWeight","processVariants","variants","breakpoint","typographyClass","Text","React","color","as","className","children","weight","props","ref","typographyClasses","colorClasses","suggestedElement","baseVariant","cn","inputs","twMerge","clsx","focusRingStyles","filled","outlined","Button","a","isLoading","disabled","end"],"mappings":"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","file":"Button.js","sourcesContent":["import React from \"react\";\n\nimport type { Typography } from \"../types/tailwind\";\nimport type { Breakpoint } from \"../utils/responsive\";\n\ntype TextElement =\n | \"p\"\n | \"span\"\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h5\"\n | \"h6\"\n | \"strong\"\n | \"em\"\n | \"blockquote\"\n | \"pre\"\n | \"code\"\n | \"small\"\n | \"label\"\n | \"a\";\n\n// HTML element mapping type\ntype HTMLElementByTag = {\n p: HTMLParagraphElement;\n span: HTMLSpanElement;\n h1: HTMLHeadingElement;\n h2: HTMLHeadingElement;\n h3: HTMLHeadingElement;\n h4: HTMLHeadingElement;\n h5: HTMLHeadingElement;\n h6: HTMLHeadingElement;\n strong: HTMLElement;\n em: HTMLElement;\n blockquote: HTMLQuoteElement;\n pre: HTMLPreElement;\n code: HTMLElement;\n small: HTMLElement;\n label: HTMLLabelElement;\n a: HTMLAnchorElement;\n};\n\n// HTML props mapping type\ntype HTMLPropsMap = {\n p: React.HTMLAttributes<HTMLParagraphElement>;\n span: React.HTMLAttributes<HTMLSpanElement>;\n h1: React.HTMLAttributes<HTMLHeadingElement>;\n h2: React.HTMLAttributes<HTMLHeadingElement>;\n h3: React.HTMLAttributes<HTMLHeadingElement>;\n h4: React.HTMLAttributes<HTMLHeadingElement>;\n h5: React.HTMLAttributes<HTMLHeadingElement>;\n h6: React.HTMLAttributes<HTMLHeadingElement>;\n strong: React.HTMLAttributes<HTMLElement>;\n em: React.HTMLAttributes<HTMLElement>;\n blockquote: React.HTMLAttributes<HTMLQuoteElement>;\n pre: React.HTMLAttributes<HTMLPreElement>;\n code: React.HTMLAttributes<HTMLElement>;\n small: React.HTMLAttributes<HTMLElement>;\n label: React.LabelHTMLAttributes<HTMLLabelElement>;\n a: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">;\n};\n\ntype TextColor =\n | \"primary\"\n | \"secondary\"\n | \"white\"\n | \"primary-blue\"\n | \"disabled\"\n | \"danger\"\n | \"inherit\"\n | \"primary-100\";\n\nconst HEADING_ELEMENT_MAP: Record<string, TextElement> = {\n xl: \"h1\",\n lg: \"h1\",\n md: \"h2\",\n sm: \"h3\",\n xs: \"h4\"\n};\n\nconst getElementFromVariant = (variant: TypographyKey): TextElement => {\n const [category, size] = variant.split(\"-\");\n\n if (category === \"heading\") {\n return HEADING_ELEMENT_MAP[size] || \"p\";\n }\n\n if (category === \"label\") {\n return \"label\";\n }\n\n return \"p\";\n};\n\ntype Weight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\nconst fontWeight: Record<Weight, string> = {\n light: \"font-light\",\n regular: \"font-regular\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n};\n\ntype ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;\n\ntype TypographyCategory = keyof Typography;\ntype TypographyValue<T extends TypographyCategory> = Extract<\n keyof Typography[T],\n string | number | bigint | boolean | null | undefined\n>;\ntype TypographyKey = {\n [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;\n}[TypographyCategory];\n\n// Update TextProps to use ResponsiveVariant\nexport type TextProps<T extends TextElement = \"p\"> = {\n variant?: ResponsiveVariant | ResponsiveVariant[];\n color?: TextColor;\n as?: T;\n className?: string;\n children: React.ReactNode;\n weight?: Weight;\n} & HTMLPropsMap[T];\n\n// Add helper function to process variants\nconst processVariants = (\n variants: ResponsiveVariant | ResponsiveVariant[] | undefined\n): string => {\n if (!variants) return \"text-body-default\";\n\n const variantArray = Array.isArray(variants) ? variants : [variants];\n\n return variantArray\n .map((variant) => {\n if (variant.includes(\":\")) {\n const [breakpoint, typographyClass] = variant.split(\":\");\n return `${breakpoint}:text-${typographyClass}`;\n }\n return `text-${variant}`;\n })\n .join(\" \");\n};\n\nexport const Text = React.forwardRef(\n <T extends TextElement = \"p\">(\n {\n variant = \"body-default\",\n color = \"primary\",\n as,\n className,\n children,\n weight,\n ...props\n }: TextProps<T>,\n ref: React.ForwardedRef<HTMLElementByTag[T]>\n ) => {\n // Process typography classes with breakpoints\n const typographyClasses = processVariants(variant);\n\n // Get color styles using Tailwind classes that reference CSS variables\n const colorClasses = color === \"inherit\" ? \"text-inherit\" : `text-${color}`;\n\n const suggestedElement = React.useMemo(() => {\n const baseVariant =\n typeof variant === \"string\"\n ? variant.split(\":\").pop()!\n : Array.isArray(variant)\n ? variant[0].split(\":\").pop()!\n : \"body-default\";\n return getElementFromVariant(baseVariant as TypographyKey);\n }, [variant]);\n\n const Component = (as || suggestedElement) as T;\n\n return (\n // @ts-expect-error TODO: figure this out\n <Component\n ref={ref}\n className={`\n font-sans antialiased\n ${typographyClasses}\n ${colorClasses}\n ${weight && `!${fontWeight[weight]}`}\n ${className}\n `}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nText.displayName = \"Text\";\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport const noopFn = () => {};\n","import type { Colors, Typography } from \"../types/tailwind\";\n\n// Generate safelist patterns for all color utilities so you can use any theme color variable in your code\nexport const generateSafelist = (colors: Colors, typography: Typography) => {\n const colorNames = Object.keys(colors) as (keyof Colors)[];\n const utilities = [\"bg\", \"text\", \"border\", \"ring\", \"divide\", \"outline\"];\n const variants = [\"hover:\", \"focus:\", \"active:\", \"disabled:\"];\n const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"];\n const sizes = [\"24\", \"42\", \"48\", \"64\", \"72\"]; // Add all the sizes you need\n\n const safelist: (string | { pattern: RegExp; variants: string[] })[] = [];\n\n colorNames.forEach((colorName) => {\n if (typeof colors[colorName] === \"object\") {\n // Handle nested color objects (with number keys)\n Object.keys(colors[colorName]).forEach((shade) => {\n utilities.forEach((utility) => {\n // Base utility\n safelist.push(`${utility}-${colorName}-${shade}`);\n\n // Variant utilities\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}-${shade}`);\n });\n });\n });\n } else {\n // Handle direct color values\n utilities.forEach((utility) => {\n safelist.push(`${utility}-${colorName}`);\n\n variants.forEach((variant) => {\n safelist.push(`${variant}${utility}-${colorName}`);\n });\n });\n }\n });\n\n // Generate typography classes\n Object.entries(typography).forEach(([family, sizes]) => {\n Object.keys(sizes).forEach((size) => {\n // Base typography classes\n safelist.push(`text-${family}-${size}`);\n\n // Add variants\n variants.forEach((variant) => {\n safelist.push(`${variant}text-${family}-${size}`);\n });\n });\n });\n\n const typographyClasses = Object.entries(typography).flatMap(\n ([category, sizes]) =>\n Object.keys(sizes).map((size) => `text-${category}-${size}`)\n );\n\n // Generate responsive variants\n const responsiveTypographyClasses = typographyClasses.flatMap((className) =>\n breakpoints.map((breakpoint) => `${breakpoint}:${className}`)\n );\n\n // Generate size classes with responsive variants\n const sizeClasses = sizes.flatMap((size) => [\n `h-[${size}px]`,\n `w-[${size}px]`,\n ...breakpoints.flatMap((bp) => [\n `${bp}:h-[${size}px]`,\n `${bp}:w-[${size}px]`\n ])\n ]);\n\n return [...typographyClasses, ...responsiveTypographyClasses, ...sizeClasses];\n};\n\nexport const focusRingStyles =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100\";\nexport const focusRingWithinStyles =\n \"focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-100\";\nexport const focusRingStylesCoerced = \"ring-2 ring-primary-100\";\n","import * as React from \"react\";\n\nimport { Text } from \"./Text\";\nimport { cn } from \"../utils\";\nimport { focusRingStyles } from \"../utils/tailwind\";\n\nexport type ButtonProps = {\n /** @default filled */\n variant?: \"filled\" | \"outlined\" | \"transparent\";\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-primary 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-primary\",\n accent: \"border border-primary-100 text-primary-100\",\n secondary: \"border border-text-secondary text-secondary\"\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant = \"filled\",\n color = \"black\",\n isLoading = false,\n children,\n disabled,\n end,\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\"\n ? filled[color]\n : variant === \"transparent\"\n ? \"bg-transparent text-text\"\n : 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 {end}\n </button>\n )\n);\n\nButton.displayName = \"Button\";\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var
|
|
1
|
+
'use strict';var C=require('@radix-ui/react-scroll-area'),p=require('react'),icons=require('@deckai/icons'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var C__namespace=/*#__PURE__*/_interopNamespace(C);var p__default=/*#__PURE__*/_interopDefault(p);function b(...t){return tailwindMerge.twMerge(clsx.clsx(t))}var T={12:"h-[12px] w-[12px]",16:"h-[16px] w-[16px]",18:"h-[18px] w-[18px]",20:"h-[20px] w-[20px]",24:"h-[24px] w-[24px]",32:"h-[32px] w-[32px]",36:"h-[36px] w-[36px]",40:"h-[40px] w-[40px]",42:"h-[42px] w-[42px]",48:"h-[48px] w-[48px]",64:"h-[64px] w-[64px]",72:"h-[72px] w-[72px]"},N={sm:{12:"sm:h-[12px] sm:w-[12px]",16:"sm:h-[16px] sm:w-[16px]",18:"sm:h-[18px] sm:w-[18px]",20:"sm:h-[20px] sm:w-[20px]",24:"sm:h-[24px] sm:w-[24px]",32:"sm:h-[32px] sm:w-[32px]",36:"sm:h-[36px] sm:w-[36px]",40:"sm:h-[40px] sm:w-[40px]",42:"sm:h-[42px] sm:w-[42px]",48:"sm:h-[48px] sm:w-[48px]",64:"sm:h-[64px] sm:w-[64px]",72:"sm:h-[72px] sm:w-[72px]"},md:{12:"md:h-[12px] md:w-[12px]",16:"md:h-[16px] md:w-[16px]",18:"md:h-[18px] md:w-[18px]",20:"md:h-[20px] md:w-[20px]",24:"md:h-[24px] md:w-[24px]",32:"md:h-[32px] md:w-[32px]",36:"md:h-[36px] md:w-[36px]",40:"md:h-[40px] md:w-[40px]",42:"md:h-[42px] md:w-[42px]",48:"md:h-[48px] md:w-[48px]",64:"md:h-[64px] md:w-[64px]",72:"md:h-[72px] md:w-[72px]"},lg:{12:"lg:h-[12px] lg:w-[12px]",16:"lg:h-[16px] lg:w-[16px]",18:"lg:h-[18px] lg:w-[18px]",20:"lg:h-[20px] lg:w-[20px]",24:"lg:h-[24px] lg:w-[24px]",32:"lg:h-[32px] lg:w-[32px]",36:"lg:h-[36px] lg:w-[36px]",40:"lg:h-[40px] lg:w-[40px]",42:"lg:h-[42px] lg:w-[42px]",48:"lg:h-[48px] lg:w-[48px]",64:"lg:h-[64px] lg:w-[64px]",72:"lg:h-[72px] lg:w-[72px]"},xl:{12:"xl:h-[12px] xl:w-[12px]",16:"xl:h-[16px] xl:w-[16px]",18:"xl:h-[18px] xl:w-[18px]",20:"xl:h-[20px] xl:w-[20px]",24:"xl:h-[24px] xl:w-[24px]",32:"xl:h-[32px] xl:w-[32px]",36:"xl:h-[36px] xl:w-[36px]",40:"xl:h-[40px] xl:w-[40px]",42:"xl:h-[42px] xl:w-[42px]",48:"xl:h-[48px] xl:w-[48px]",64:"xl:h-[64px] xl:w-[64px]",72:"xl:h-[72px] xl:w-[72px]"},"2xl":{12:"2xl:h-[12px] 2xl:w-[12px]",16:"2xl:h-[16px] 2xl:w-[16px]",18:"2xl:h-[18px] 2xl:w-[18px]",20:"2xl:h-[20px] 2xl:w-[20px]",24:"2xl:h-[24px] 2xl:w-[24px]",32:"2xl:h-[32px] 2xl:w-[32px]",36:"2xl:h-[36px] 2xl:w-[36px]",40:"2xl:h-[40px] 2xl:w-[40px]",42:"2xl:h-[42px] 2xl:w-[42px]",48:"2xl:h-[48px] 2xl:w-[48px]",64:"2xl:h-[64px] 2xl:w-[64px]",72:"2xl:h-[72px] 2xl:w-[72px]"}},v=t=>String(t),O=(t,l=24)=>{let n=[],o={};if(t===void 0){let s=v(l);s?n.push(T[s]):(o.height=`${l}px`,o.width=`${l}px`);}if(typeof t=="number"){let s=v(t);s?n.push(T[s]):(o.height=`${t}px`,o.width=`${t}px`);}if(Array.isArray(t)){let s=v(l),i=[s&&T[s]||`h-[${l}px] w-[${l}px]`];t.forEach(c=>{if(typeof c=="string"){let[x,w]=c.split(":"),m=parseInt(w,10),u=v(m);n.push(u&&N[x]?.[u]||`${x}:h-[${m}px] ${x}:w-[${m}px]`);}}),n.push(...i);}if(typeof t=="string"){let[s,i]=t.split(":"),c=parseInt(i,10),x=v(c);n.push(x&&N[s]?.[x]||`${s}:h-[${c}px] ${s}:w-[${c}px]`);}return {responsiveSizeClasses:n.join(" "),responsiveSizeStyles:o}};var B={primary:"var(--color-primary)",secondary:"var(--color-secondary)",white:"var(--color-white)",primaryBlue:"var(--color-primary-100)",disabled:"var(--color-disabled)",danger:"var(--color-danger)"},$=p__default.default.forwardRef(({name:t,size:l=24,color:n="primary",title:o,className:s,style:i={},...c},x)=>{let w=icons.IconMap[t],{responsiveSizeClasses:m,responsiveSizeStyles:u}=O(l,24);return p__default.default.createElement("div",{className:b("flex justify-center items-center",m,s),style:{"--icon-stroke":B[n],...u,...i}},p__default.default.createElement(w,{ref:x,"aria-hidden":!o,"aria-label":o,stroke:t.includes("filled")?void 0:B[n],...c}))});$.displayName="Icon";var H="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100";var E=p__default.default.forwardRef(({children:t,type:l="button",className:n,disabled:o,...s},i)=>p__default.default.createElement("button",{ref:i,type:l,disabled:o,className:b("appearance-none hover:opacity-80 transition-all active:scale-95",H,o&&"opacity-50 cursor-not-allowed",n),...s},t));E.displayName="Pressable";var q=typeof window<"u"?p.useEffect:()=>{},V=t=>{let[l,n]=p.useState(null),o=p.useCallback(s=>typeof window<"u"?window.matchMedia(s).matches:false,[]);return q(()=>{n(o(t));},[t,o]),p.useEffect(()=>{if(typeof window<"u"){let s=window.matchMedia(t),i=()=>{n(o(t));};return s.addEventListener("change",i),()=>{s.removeEventListener("change",i);}}},[t,o]),l??false};function be({children:t,className:l="",gap:n=20}){let o=p.useRef(null),[s,i]=p.useState(false),[c,x]=p.useState(false),[w,m]=p.useState(false),[u,I]=p.useState(false),[M,j]=p.useState(null),[k,A]=p.useState(null),R=V("(max-width: 768px)"),y=p.useCallback(()=>{let e=o.current;if(!e)return;let{scrollLeft:r,scrollWidth:a,clientWidth:h}=e;i(r>0),x(Math.ceil(r+h)<a);},[]),W=p.useCallback(e=>{if(R)return;let a=e.currentTarget.getBoundingClientRect(),h=e.clientX-a.left,S=300;m(h<S),I(h>a.width-S);},[R]),D=p.useCallback(e=>{j(e.touches[0].clientX),A(null);},[]),G=p.useCallback(e=>{A(e.touches[0].clientX);},[]),X=p.useCallback(()=>{if(!M||!k)return;let e=o.current;if(!e)return;let r=M-k;if(Math.abs(r)<50)return;let h=e.clientWidth,S=r>0?1:-1,Q=e.scrollLeft+h*S;e.scrollTo({left:Q,behavior:"smooth"});},[M,k]),P=p.useCallback(e=>{let r=o.current;if(!r)return;let a=Math.abs(e.deltaX)>Math.abs(e.deltaY);if(!a&&!e.shiftKey)return;e.preventDefault();let h=a?e.deltaX:e.deltaY;r.scrollBy({left:h,behavior:"smooth"});},[]);p.useEffect(()=>{let e=o.current;if(!e)return;let r=new ResizeObserver(y);return r.observe(e),e.addEventListener("scroll",y),e.addEventListener("wheel",P,{passive:false}),()=>{r.disconnect(),e.removeEventListener("scroll",y),e.removeEventListener("wheel",P);}},[y,P]);let g=p.useCallback(e=>{let r=o.current;if(!r)return;let a=r.clientWidth,h=r.scrollLeft+(e==="left"?-a:a);r.scrollTo({left:h,behavior:"smooth"});},[]),_=p.useCallback(e=>{e.key==="ArrowLeft"?g("left"):e.key==="ArrowRight"&&g("right");},[g]);return p__default.default.createElement("div",{className:`relative group ${l}`,onKeyDown:_,onMouseMove:W,onMouseLeave:()=>{m(false),I(false);},onTouchStart:D,onTouchMove:G,onTouchEnd:X,role:"region","aria-label":"Carousel"},p__default.default.createElement(C__namespace.Root,{className:"overflow-hidden",type:"hover"},p__default.default.createElement(C__namespace.Viewport,{ref:o,className:"w-full overflow-x-auto snap-x snap-mandatory",style:{scrollbarWidth:"none",msOverflowStyle:"none",WebkitOverflowScrolling:"touch"}},p__default.default.createElement("div",{className:"inline-flex",style:{gap:`${n}px`}},p__default.default.Children.map(t,e=>e===null?null:p__default.default.createElement("div",{className:"snap-start shrink-0"},e))))),!R&&p__default.default.createElement(p__default.default.Fragment,null,s&&w&&p__default.default.createElement(E,{onClick:()=>g("left"),className:"absolute left-4 top-1/2 -translate-y-1/2 z-20 transition-opacity duration-200","aria-label":"Scroll left"},p__default.default.createElement("div",{className:"flex items-center justify-center w-10 h-10 rounded-full bg-overlay backdrop-blur-sm"},p__default.default.createElement($,{name:"arrow-left",size:24,color:"white"}))),c&&u&&p__default.default.createElement(E,{onClick:()=>g("right"),className:"absolute right-4 top-1/2 -translate-y-1/2 z-20 transition-opacity duration-200","aria-label":"Scroll right"},p__default.default.createElement("div",{className:"flex items-center justify-center w-10 h-10 rounded-full bg-overlay backdrop-blur-sm"},p__default.default.createElement($,{name:"arrow-right",size:24,color:"white"})))))}exports.Carousel=be;//# sourceMappingURL=Carousel.cjs.map
|
|
2
2
|
//# sourceMappingURL=Carousel.cjs.map
|