@accelint/design-toolkit 5.1.0 → 6.0.0
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/catalog-info.yaml +44 -0
- package/dist/components/accordion/index.js +1 -1
- package/dist/components/accordion/index.js.map +1 -1
- package/dist/components/accordion/styles.d.ts +3 -3
- package/dist/components/accordion/styles.js +1 -1
- package/dist/components/accordion/styles.js.map +1 -1
- package/dist/components/action-bar/index.d.ts +11 -0
- package/dist/components/action-bar/index.js.map +1 -1
- package/dist/components/breadcrumbs/index.d.ts +27 -0
- package/dist/components/breadcrumbs/index.js +4 -0
- package/dist/components/breadcrumbs/index.js.map +1 -0
- package/dist/components/breadcrumbs/styles.d.ts +48 -0
- package/dist/components/breadcrumbs/styles.js +2 -0
- package/dist/components/breadcrumbs/styles.js.map +1 -0
- package/dist/components/breadcrumbs/types.d.ts +20 -0
- package/dist/components/breadcrumbs/types.js +2 -0
- package/dist/components/breadcrumbs/types.js.map +1 -0
- package/dist/components/button/index.d.ts +2 -2
- package/dist/components/button/index.js +1 -1
- package/dist/components/button/index.js.map +1 -1
- package/dist/components/button/styles.d.ts +15 -15
- package/dist/components/button/styles.js +1 -1
- package/dist/components/button/styles.js.map +1 -1
- package/dist/components/button/types.d.ts +7 -5
- package/dist/components/clock/index.d.ts +39 -0
- package/dist/components/clock/index.js +4 -0
- package/dist/components/clock/index.js.map +1 -0
- package/dist/components/clock/types.d.ts +7 -0
- package/dist/components/clock/types.js +2 -0
- package/dist/components/clock/types.js.map +1 -0
- package/dist/components/color-picker/styles.d.ts +3 -3
- package/dist/components/combobox-field/index.d.ts +11 -0
- package/dist/components/combobox-field/index.js.map +1 -1
- package/dist/components/combobox-field/styles.js +1 -1
- package/dist/components/combobox-field/styles.js.map +1 -1
- package/dist/components/dialog/index.js +1 -1
- package/dist/components/dialog/index.js.map +1 -1
- package/dist/components/divider/index.d.ts +32 -0
- package/dist/components/divider/index.js +4 -0
- package/dist/components/divider/index.js.map +1 -0
- package/dist/components/divider/styles.d.ts +5 -0
- package/dist/components/divider/styles.js +2 -0
- package/dist/components/divider/styles.js.map +1 -0
- package/dist/components/divider/types.d.ts +11 -0
- package/dist/components/divider/types.js +2 -0
- package/dist/components/divider/types.js.map +1 -0
- package/dist/components/drawer/index.d.ts +48 -3
- package/dist/components/drawer/index.js +1 -1
- package/dist/components/drawer/index.js.map +1 -1
- package/dist/components/drawer/styles.js +1 -1
- package/dist/components/drawer/styles.js.map +1 -1
- package/dist/components/drawer/types.d.ts +13 -7
- package/dist/components/input/styles.js +1 -1
- package/dist/components/input/styles.js.map +1 -1
- package/dist/components/lines/index.d.ts +9 -0
- package/dist/components/lines/index.js.map +1 -1
- package/dist/components/link/index.d.ts +9 -0
- package/dist/components/link/index.js.map +1 -1
- package/dist/components/link/styles.js +1 -1
- package/dist/components/link/styles.js.map +1 -1
- package/dist/components/menu/styles.js +1 -1
- package/dist/components/menu/styles.js.map +1 -1
- package/dist/components/notice/events.d.ts +10 -0
- package/dist/components/notice/events.js +2 -0
- package/dist/components/notice/events.js.map +1 -0
- package/dist/components/notice/index.d.ts +20 -0
- package/dist/components/notice/index.js +4 -0
- package/dist/components/notice/index.js.map +1 -0
- package/dist/components/notice/styles.d.ts +60 -0
- package/dist/components/notice/styles.js +2 -0
- package/dist/components/notice/styles.js.map +1 -0
- package/dist/components/notice/types.d.ts +75 -0
- package/dist/components/notice/types.js +2 -0
- package/dist/components/notice/types.js.map +1 -0
- package/dist/components/query-builder/index.js +1 -1
- package/dist/components/query-builder/index.js.map +1 -1
- package/dist/components/search-field/styles.js +1 -1
- package/dist/components/search-field/styles.js.map +1 -1
- package/dist/components/select-field/types.d.ts +0 -1
- package/dist/components/sidenav/index.d.ts +57 -6
- package/dist/components/sidenav/index.js +1 -1
- package/dist/components/sidenav/index.js.map +1 -1
- package/dist/components/sidenav/styles.js +1 -1
- package/dist/components/sidenav/styles.js.map +1 -1
- package/dist/components/slider/index.js +1 -1
- package/dist/components/slider/index.js.map +1 -1
- package/dist/components/slider/styles.js +1 -1
- package/dist/components/slider/styles.js.map +1 -1
- package/dist/components/table/context.d.ts +11 -0
- package/dist/components/table/context.js +2 -0
- package/dist/components/table/context.js.map +1 -0
- package/dist/components/table/index.d.ts +36 -0
- package/dist/components/table/index.js +4 -0
- package/dist/components/table/index.js.map +1 -0
- package/dist/components/table/styles.d.ts +134 -0
- package/dist/components/table/styles.js +2 -0
- package/dist/components/table/styles.js.map +1 -0
- package/dist/components/table/table-body.d.ts +12 -0
- package/dist/components/table/table-body.js +2 -0
- package/dist/components/table/table-body.js.map +1 -0
- package/dist/components/table/table-cell.d.ts +12 -0
- package/dist/components/table/table-cell.js +2 -0
- package/dist/components/table/table-cell.js.map +1 -0
- package/dist/components/table/table-header-cell.d.ts +12 -0
- package/dist/components/table/table-header-cell.js +2 -0
- package/dist/components/table/table-header-cell.js.map +1 -0
- package/dist/components/table/table-header.d.ts +12 -0
- package/dist/components/table/table-header.js +2 -0
- package/dist/components/table/table-header.js.map +1 -0
- package/dist/components/table/table-row.d.ts +12 -0
- package/dist/components/table/table-row.js +2 -0
- package/dist/components/table/table-row.js.map +1 -0
- package/dist/components/table/types.d.ts +185 -0
- package/dist/components/table/types.js +2 -0
- package/dist/components/table/types.js.map +1 -0
- package/dist/components/tabs/styles.js +1 -1
- package/dist/components/tabs/styles.js.map +1 -1
- package/dist/components/time-field/index.d.ts +19 -0
- package/dist/components/time-field/index.js +4 -0
- package/dist/components/time-field/index.js.map +1 -0
- package/dist/components/time-field/styles.d.ts +69 -0
- package/dist/components/time-field/styles.js +2 -0
- package/dist/components/time-field/styles.js.map +1 -0
- package/dist/components/time-field/types.d.ts +23 -0
- package/dist/components/time-field/types.js +2 -0
- package/dist/components/time-field/types.js.map +1 -0
- package/dist/components/tooltip/index.d.ts +23 -34
- package/dist/components/tooltip/index.js +1 -1
- package/dist/components/tooltip/index.js.map +1 -1
- package/dist/components/tooltip/types.d.ts +5 -6
- package/dist/components/tree/index.d.ts +22 -1
- package/dist/components/tree/index.js +1 -1
- package/dist/components/tree/index.js.map +1 -1
- package/dist/components/tree/styles.js +1 -1
- package/dist/components/tree/styles.js.map +1 -1
- package/dist/components/view-stack/index.d.ts +42 -2
- package/dist/components/view-stack/index.js +1 -1
- package/dist/components/view-stack/index.js.map +1 -1
- package/dist/foundation/token-data.js +1 -1
- package/dist/foundation/token-data.js.map +1 -1
- package/dist/index.css +5 -3
- package/dist/index.d.ts +32 -6
- package/dist/index.js +1 -1
- package/dist/metafile-esm.json +1 -1
- package/dist/providers/portal.d.ts +9 -0
- package/dist/providers/portal.js +2 -0
- package/dist/providers/portal.js.map +1 -0
- package/dist/providers/theme-provider.d.ts +6 -6
- package/dist/providers/theme-provider.js +1 -1
- package/dist/providers/theme-provider.js.map +1 -1
- package/dist/styles.css +3355 -974
- package/dist/tokens/themes.css +56 -24
- package/dist/tokens/tokens.css +8 -8
- package/dist/tokens/tokens.d.ts +18 -0
- package/dist/tokens/tokens.js +1 -1
- package/dist/tokens/tokens.js.map +1 -1
- package/dist/tokens/types.d.ts +9 -0
- package/dist/variants/variants.css +3 -0
- package/package.json +39 -17
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {tv}from'./../../lib/utils.js';const l={color:"info",variant:"filled"},o=tv({base:["group/button flex w-content cursor-pointer items-center justify-center rounded-medium outline outline-transparent","disabled:cursor-not-allowed","size-large:gap-xs size-large:px-m size-large:py-s size-large:text-button-l","size-medium:gap-xs size-medium:px-m size-medium:py-s size-medium:text-button-m","size-small:gap-xxs size-small:px-s size-small:py-xs size-small:text-button-s","size-xsmall:gap-xxs size-xsmall:px-s size-xsmall:py-xs size-xsmall:text-button-xs"],variants:{variant:{filled:["disabled:fg-disabled disabled:bg-interactive-disabled","enabled:color-info:fg-inverse-bold","enabled:color-info:bg-interactive-bold","enabled:hover:color-info:bg-interactive-bold-hover","enabled:focus-visible:color-info:bg-interactive-bold-hover","enabled:color-serious:fg-a11y-on-utility","enabled:color-serious:bg-serious-bold","enabled:hover:color-serious:bg-serious-hover","enabled:focus-visible:color-serious:bg-serious-hover","enabled:color-critical:fg-a11y-on-utility","enabled:color-critical:bg-critical-bold","enabled:hover:color-critical:bg-critical-hover","enabled:focus-visible:color-critical:bg-critical-hover"],outline:["disabled:fg-disabled disabled:outline-interactive-disabled","enabled:color-info:fg-primary-bold enabled:color-info:outline-interactive","enabled:hover:color-info:outline-interactive-hover","enabled:focus-visible:color-info:outline-interactive-hover","enabled:color-serious:fg-primary-bold enabled:color-serious:outline-serious-bold","enabled:hover:color-serious:outline-interactive-hover","enabled:focus-visible:color-serious:outline-interactive-hover","enabled:color-critical:fg-primary-bold enabled:color-critical:outline-critical-bold","enabled:hover:color-critical:outline-interactive-hover","enabled:focus-visible:color-critical:outline-interactive-hover"],flat:"disabled:fg-disabled disabled:bg-transparent",icon:["size-small:rounded-small size-xsmall:rounded-small size-large:p-xs size-medium:p-xs size-small:p-xxs size-xsmall:p-xxs","disabled:fg-disabled disabled:bg-transparent"],floating:["rounded-full","size-large:p-xs size-medium:p-xs size-small:p-xxs size-xsmall:p-xxs","disabled:fg-disabled disabled:bg-interactive-disabled disabled:outline-interactive-disabled","enabled:color-info:fg-info-bold enabled:color-info:bg-surface-default enabled:color-info:outline-interactive","enabled:hover:color-info:fg-info-hover enabled:hover:color-info:outline-interactive-hover","enabled:focus-visible:color-info:fg-info-hover enabled:focus-visible:color-info:outline-interactive-hover","enabled:color-serious:fg-serious-bold enabled:color-serious:bg-serious-muted enabled:color-serious:outline-serious-bold","enabled:hover:color-serious:fg-info-hover enabled:hover:color-serious:outline-interactive-hover","enabled:focus-visible:color-serious:fg-info-hover enabled:focus-visible:color-serious:outline-interactive-hover","enabled:color-critical:fg-critical-bold enabled:color-critical:bg-critical-muted enabled:color-critical:outline-critical-bold","enabled:hover:color-critical:fg-info-hover enabled:hover:color-critical:outline-interactive-hover","enabled:focus-visible:color-critical:fg-info-hover enabled:focus-visible:color-critical:outline-interactive-hover"]}},compoundVariants:[{variant:["flat","icon"],className:["enabled:color-info:fg-primary-bold","enabled:hover:color-info:bg-interactive-muted-hover","enabled:focus-visible:color-info:bg-interactive-muted-hover"]},{variant:["flat","icon"],className:["enabled:color-serious:fg-primary-bold","enabled:hover:color-serious:bg-serious-hover","enabled:focus-visible:color-serious:bg-serious-hover"]},{variant:["flat","icon"],className:["enabled:color-critical:fg-primary-bold","enabled:hover:color-critical:bg-critical-hover","enabled:focus-visible:color-critical:bg-critical-hover"]}],defaultVariants:l}),r=tv({extend:o}),a=tv({extend:o}),s=tv({extend:o,base:["enabled:selected:fg-accent-primary-bold","enabled:selected:hover:fg-accent-primary-bold","enabled:selected:focus-visible:fg-accent-primary-bold"],variants:{variant:{filled:["enabled:selected:color-info:bg-info-muted","enabled:selected:hover:color-info:bg-interactive-bold-hover","enabled:selected:focus-visible:color-info:bg-interactive-bold-hover","enabled:selected:color-serious:bg-serious-muted","enabled:selected:hover:color-serious:bg-serious-hover","enabled:selected:focus-visible:color-serious:bg-serious-hover","enabled:selected:color-critical:bg-critical-muted","enabled:selected:hover:color-critical:bg-critical-hover","enabled:selected:focus-visible:color-critical:bg-critical-hover"],floating:["enabled:selected:color-info:outline-accent-primary-bold","enabled:selected:hover:color-info:outline-interactive-hover","enabled:selected:focus-visible:color-info:outline-interactive-hover","enabled:selected:color-serious:outline-accent-primary-bold","enabled:selected:hover:color-serious:outline-interactive-hover","enabled:selected:focus-visible:color-serious:outline-interactive-hover","enabled:selected:color-critical:outline-accent-primary-bold","enabled:selected:hover:color-critical:outline-interactive-hover","enabled:selected:focus-visible:color-critical:outline-interactive-hover"]}}});export{r as ButtonStyles,l as ButtonStylesDefaults,a as LinkButtonStyles,s as ToggleButtonStyles};//# sourceMappingURL=styles.js.map
|
|
1
|
+
import {tv}from'./../../lib/utils.js';const l={variant:"filled"},o=tv({base:["group/button flex w-content shrink-0 cursor-pointer items-center justify-center rounded-medium outline outline-transparent","disabled:cursor-not-allowed","size-large:min-w-[96px] size-large:gap-xs size-large:px-l size-large:py-s size-large:text-button-l","size-medium:min-w-[68px] size-medium:gap-xs size-medium:px-m size-medium:py-xs size-medium:text-button-m","size-small:min-w-[54px] size-small:gap-xxs size-small:px-s size-small:py-xs size-small:text-button-s","size-xsmall:min-w-[41px] size-xsmall:gap-xxs size-xsmall:p-xs size-xsmall:text-button-xs"],variants:{variant:{filled:["disabled:fg-disabled disabled:bg-interactive-disabled","enabled:color-mono-muted:fg-primary-bold enabled:color-mono-muted:bg-interactive-muted","enabled:hover:color-mono-muted:bg-interactive-muted-hover","enabled:focus-visible:color-mono-muted:bg-interactive-muted-hover","enabled:pressed:color-mono-muted:fg-primary-muted enabled:pressed:color-mono-muted:bg-interactive-muted-pressed","enabled:color-mono-bold:fg-inverse-bold enabled:color-mono-bold:bg-interactive-bold","enabled:hover:color-mono-bold:fg-disabled enabled:hover:color-mono-bold:bg-interactive-bold-hover","enabled:focus-visible:color-mono-bold:fg-disabled enabled:focus-visible:color-mono-bold:bg-interactive-bold-hover","enabled:pressed:color-mono-bold:fg-inverse-muted enabled:pressed:color-mono-bold:bg-interactive-bold-pressed","enabled:color-accent:fg-a11y-on-accent enabled:color-accent:bg-accent-primary-bold","enabled:hover:color-accent:bg-accent-primary-hover","enabled:focus-visible:color-accent:bg-accent-primary-hover","enabled:pressed:color-accent:fg-accent-primary-bold enabled:pressed:color-accent:bg-accent-primary-pressed","enabled:color-serious:fg-a11y-on-utility enabled:color-serious:bg-serious-bold","enabled:hover:color-serious:bg-serious-hover","enabled:focus-visible:color-serious:bg-serious-hover","enabled:pressed:color-serious:fg-serious-bold enabled:pressed:color-serious:bg-serious-pressed","enabled:color-critical:fg-a11y-on-utility enabled:color-critical:bg-critical-bold","enabled:hover:color-critical:bg-critical-hover","enabled:focus-visible:color-critical:bg-critical-hover","enabled:pressed:color-critical:fg-critical-bold enabled:pressed:color-critical:bg-critical-pressed"],outline:["disabled:fg-disabled disabled:outline-interactive-disabled","enabled:color-mono-muted:fg-primary-bold enabled:color-mono-muted:bg-transparent enabled:color-mono-muted:outline enabled:color-mono-muted:outline-interactive","enabled:hover:color-mono-muted:bg-interactive-muted-hover enabled:hover:color-mono-muted:outline-2 enabled:hover:color-mono-muted:outline-interactive-hover","enabled:focus-visible:color-mono-muted:bg-interactive-muted-hover enabled:focus-visible:color-mono-muted:outline-2 enabled:focus-visible:color-mono-muted:outline-interactive-hover","enabled:pressed:color-mono-muted:fg-pressed enabled:pressed:color-mono-muted:bg-interactive-muted-pressed enabled:pressed:color-mono-muted:outline-2 enabled:pressed:color-mono-muted:outline-interactive-pressed","enabled:color-mono-bold:fg-primary-bold enabled:color-mono-bold:bg-transparent enabled:color-mono-bold:outline enabled:color-mono-bold:outline-mono-bold","enabled:hover:color-mono-bold:bg-interactive-muted-hover enabled:hover:color-mono-bold:outline-2 enabled:hover:color-mono-bold:outline-interactive-hover","enabled:focus-visible:color-mono-bold:bg-interactive-muted-hover enabled:focus-visible:color-mono-bold:outline-2 enabled:focus-visible:color-mono-bold:outline-interactive-hover","enabled:pressed:color-mono-bold:fg-pressed enabled:pressed:color-mono-bold:bg-interactive-muted-pressed enabled:pressed:color-mono-bold:outline-2 enabled:pressed:color-mono-bold:outline-mono-bold-pressed","enabled:color-accent:fg-primary-bold enabled:color-accent:bg-transparent enabled:color-accent:outline enabled:color-accent:outline-accent-primary-bold","enabled:hover:color-accent:fg-a11y-on-accent enabled:hover:color-accent:bg-accent-primary-hover enabled:hover:color-accent:outline-2 enabled:hover:color-accent:outline-accent-primary-hover","enabled:focus-visible::color-accent:fg-a11y-on-accent enabled:focus-visible:color-accent:bg-accent-primary-hover enabled:focus-visible:color-accent:outline-2 enabled:focus-visible:color-accent:outline-accent-primary-hover","enabled:pressed:color-accent:fg-accent-primary-bold enabled:pressed:color-accent:bg-accent-primary-pressed enabled:pressed:color-accent:outline-2 enabled:pressed:color-accent:outline-accent-primary-pressed","enabled:color-serious:fg-primary-bold enabled:color-serious:bg-transparent enabled:color-serious:outline enabled:color-serious:outline-serious-bold","enabled:hover:color-serious:fg-a11y-on-accent enabled:hover:color-serious:bg-serious-hover enabled:hover:color-serious:outline-2 enabled:hover:color-serious:outline-serious-hover","enabled:focus-visible:color-serious:fg-a11y-on-accent enabled:focus-visible:color-serious:bg-serious-hover enabled:focus-visible:color-serious:outline-2 enabled:focus-visible:color-serious:outline-serious-hover","enabled:pressed:color-serious:fg-serious-bold enabled:pressed:color-serious:bg-serious-pressed enabled:pressed:color-serious:outline-2 enabled:pressed:color-serious:outline-serious-pressed","enabled:color-critical:fg-primary-bold enabled:color-critical:bg-transparent enabled:color-critical:outline enabled:color-critical:outline-critical-bold","enabled:hover:color-critical:fg-a11y-on-accent enabled:hover:color-critical:bg-critical-hover enabled:hover:color-critical:outline-2 enabled:hover:color-critical:outline-critical-hover","enabled:focus-visible:color-critical:fg-a11y-on-accent enabled:focus-visible:color-critical:bg-critical-hover enabled:focus-visible:color-critical:outline-2 enabled:focus-visible:color-critical:outline-critical-hover","enabled:pressed:color-critical:fg-critical-pressed enabled:pressed:color-critical:bg-critical-pressed enabled:pressed:color-critical:outline-2 enabled:pressed:color-critical:outline-critical-pressed"],flat:["disabled:fg-disabled disabled:bg-transparent","enabled:color-mono-muted:fg-primary-muted","enabled:hover:color-mono-muted:bg-interactive-muted-hover","enabled:focus-visible:color-mono-muted:bg-interactive-muted-hover","enabled:pressed:color-mono-muted:fg-pressed enabled:pressed:color-mono-muted:bg-interactive-muted-pressed","enabled:color-mono-bold:fg-primary-bold","enabled:hover:color-mono-bold:bg-interactive-muted-hover","enabled:focus-visible:color-mono-bold:bg-interactive-muted-hover","enabled:pressed:color-mono-bold:fg-pressed enabled:pressed:color-mono-bold:bg-interactive-muted-pressed","enabled:color-accent:fg-accent-primary-bold","enabled:hover:color-accent:fg-a11y-on-accent enabled:hover:color-accent:bg-accent-primary-hover","enabled:focus-visible:color-accent:fg-a11y-on-accent enabled:focus-visible:color-accent:bg-accent-primary-hover","enabled:pressed:color-accent:fg-accent-primary-pressed enabled:pressed:color-accent:bg-accent-primary-pressed","enabled:color-serious:fg-serious-bold","enabled:hover:color-serious:fg-a11y-on-accent enabled:hover:color-serious:bg-serious-hover","enabled:focus-visible:color-serious:fg-a11y-on-accent enabled:focus-visible:color-serious:bg-serious-hover","enabled:pressed:color-serious:fg-serious-pressed enabled:pressed:color-serious:bg-serious-pressed","enabled:color-critical:fg-critical-bold","enabled:hover:color-critical:fg-a11y-on-accent enabled:hover:color-critical:bg-critical-hover","enabled:focus-visible:color-critical:fg-a11y-on-accent enabled:focus-visible:color-critical:bg-critical-hover","enabled:pressed:color-critical:fg-critical-pressed enabled:pressed:color-critical:bg-critical-pressed"],icon:["size-large:min-w-0 size-large:p-xs","size-medium:min-w-0 size-medium:p-xs","size-small:min-w-0 size-small:rounded-small size-small:p-xxs","size-xsmall:min-w-0 size-xsmall:rounded-small size-xsmall:p-xxs","disabled:fg-disabled disabled:bg-transparent","enabled:color-mono-muted:fg-primary-muted","enabled:hover:color-mono-muted:bg-interactive-muted-hover","enabled:focus-visible:color-mono-muted:bg-interactive-muted-hover","enabled:pressed:color-mono-muted:fg-pressed enabled:pressed:color-mono-muted:bg-interactive-muted-pressed","enabled:color-mono-bold:fg-primary-bold","enabled:hover:color-mono-bold:bg-interactive-muted-hover","enabled:focus-visible:color-mono-bold:bg-interactive-muted-hover","enabled:pressed:color-mono-bold:fg-pressed enabled:pressed:color-mono-bold:bg-interactive-muted-pressed","enabled:color-accent:fg-accent-primary-bold","enabled:hover:color-accent:fg-accent-primary-hover enabled:hover:color-accent:bg-interactive-muted-hover","enabled:focus-visible:color-accent:fg-accent-primary-hover enabled:focus-visible:color-accent:bg-interactive-muted-hover","enabled:pressed:color-accent:fg-accent-primary-pressed enabled:pressed:color-accent:bg-interactive-muted-pressed","enabled:color-serious:fg-serious-bold","enabled:hover:color-serious:fg-serious-hover enabled:hover:color-serious:bg-interactive-muted-hover","enabled:focus-visible:color-serious:fg-serious-hover enabled:focus-visible:color-serious:bg-interactive-muted-hover","enabled:pressed:color-serious:fg-serious-pressed enabled:pressed:color-serious:bg-interactive-muted-pressed","enabled:color-critical:fg-critical-bold","enabled:hover:color-critical:fg-critical-hover enabled:hover:color-critical:bg-interactive-muted-hover","enabled:focus-visible:color-critical:fg-critical-hover enabled:focus-visible:color-critical:bg-interactive-muted-hover","enabled:pressed:color-critical:fg-critical-pressed enabled:pressed:color-critical:bg-interactive-muted-pressed"],floating:["rounded-full","size-large:min-w-0 size-large:p-xs","size-medium:min-w-0 size-medium:p-xs","size-small:min-w-0 size-small:p-xxs","size-xsmall:min-w-0 size-xsmall:p-xxs","disabled:fg-disabled disabled:bg-interactive-disabled disabled:outline-interactive-disabled","enabled:color-mono-muted:fg-primary-muted enabled:color-mono-muted:bg-surface-default enabled:color-mono-muted:outline-interactive","enabled:hover:color-mono-muted:fg-primary-hover enabled:hover:color-mono-muted:outline-interactive-hover","enabled:focus-visible:color-mono-muted:fg-primary-hover enabled:focus-visible:color-mono-muted:outline-interactive-hover","enabled:pressed:color-mono-muted:fg-pressed enabled:pressed:color-mono-muted:bg-interactive-muted-pressed","enabled:color-mono-bold:fg-primary-bold enabled:color-mono-bold:bg-surface-default enabled:color-mono-bold:outline-interactive","enabled:hover:color-mono-bold:fg-primary-hover enabled:hover:color-mono-bold:outline-interactive-hover","enabled:focus-visible:color-mono-bold:fg-primary-hover enabled:focus-visible:color-mono-bold:outline-interactive-hover","enabled:pressed:color-mono-bold:fg-pressed enabled:pressed:color-mono-bold:bg-interactive-muted-pressed","enabled:color-accent:fg-accent-primary-bold enabled:color-accent:bg-accent-primary-bold enabled:color-accent:outline-accent-primary-bold","enabled:hover:color-accent:fg-accent-primary-hover enabled:hover:color-accent:outline-accent-primary-hover","enabled:focus-visible:color-accent:fg-accent-primary-hover enabled:focus-visible:color-accent:outline-accent-primary-hover","enabled:pressed:color-accent:fg-accent-primary-pressed enabled:pressed:color-accent:bg-interactive-muted-pressed enabled:pressed:color-accent:outline-accent-primary-pressed","enabled:color-serious:fg-serious-bold enabled:color-serious:bg-serious-muted enabled:color-serious:outline-serious-bold","enabled:hover:color-serious:fg-serious-hover enabled:hover:color-serious:outline-interactive-hover","enabled:focus-visible:color-serious:fg-serious-hover enabled:focus-visible:color-serious:outline-interactive-hover","enabled:pressed:color-serious:fg-serious-pressed enabled:pressed:color-serious:bg-interactive-muted-pressed enabled:pressed:color-serious:outline-serious-pressed","enabled:color-critical:fg-critical-bold enabled:color-critical:bg-critical-muted enabled:color-critical:outline-critical-bold","enabled:hover:color-critical:fg-critiical-hover enabled:hover:color-critical:outline-critical-hover","enabled:focus-visible:color-critical:fg-critiical-hover enabled:focus-visible:color-critical:outline-critical-hover","enabled:pressed:color-critical:fg-critical-pressed enabled:pressed:color-critical:bg-interactive-muted-pressed enabled:pressed:color-critical:outline-critical-pressed"]}},defaultVariants:l}),c=tv({extend:o}),s=tv({extend:o}),d=tv({extend:o,base:["enabled:color-accent:fg-accent-primary-bold enabled:color-accent:bg-transparent","enabled:hover:color-accent:fg-accent-primary-hover enabled:hover:color-accent:bg-accent-primary-muted","enabled:focus-visible:color-accent:fg-accent-primary-hover enabled:focus-visible:color-accent:bg-accent-primary-muted","enabled:pressed:color-accent:fg-accent-primary-bold enabled:pressed:color-accent:bg-accent-primary-pressed"],variants:{variant:{flat:["disabled:fg-disabled disabled:bg-transparent","disabled:selected:fg-disabled disabled:selected:bg-interactive-disabled disabled:selected:outline-interactive-disabled","enabled:color-mono-muted:fg-primary-muted enabled:color-mono-muted:bg-transparent","enabled:hover:color-mono-muted:bg-interactive-muted-hover","enabled:focus-visible:color-mono-muted:bg-interactive-muted-hover","enabled:pressed:color-mono-muted:fg-pressed enabled:pressed:color-mono-muted:bg-interactive-muted-pressed","enabled:selected:color-mono-muted:fg-primary-muted enabled:selected:color-mono-muted:bg-interactive-muted enabled:selected:color-mono-muted:outline enabled:selected:color-mono-muted:outline-interactive-hover","enabled:selected:hover:color-mono-muted:bg-interactive-muted-hover enabled:selected:hover:color-mono-muted:outline-2","enabled:selected:focus-visible:color-mono-muted:bg-interactive-muted-hover enabled:selected:focus-visible:color-mono-muted:outline-2","enabled:selected:pressed:color-mono-muted:fg-pressed enabled:selected:pressed:color-mono-muted:bg-interactive-muted-pressed enabled:selected:pressed:color-mono-muted:outline-2 enabled:selected:pressed:color-mono-muted:outline-interactive-pressed","enabled:color-mono-bold:fg-primary-bold","enabled:hover:color-mono-bold:bg-interactive-muted-hover","enabled:focus-visible:color-mono-bold:bg-interactive-muted-hover","enabled:pressed:color-mono-bold:fg-pressed enabled:pressed:color-mono-bold:bg-interactive-muted-pressed","enabled:selected:color-mono-bold:fg-primary-bold enabled:selected:color-mono-bold:outline enabled:selected:color-mono-bold:outline-mono-bold","enabled:selected:hover:color-mono-bold:fg-hover enabled:selected:hover:color-mono-bold:bg-interactive-muted-hover enabled:selected:hover:color-mono-bold:outline-2 enabled:selected:hover:color-mono-bold:outline-mono-bold-hover","enabled:selected:focus-visible:color-mono-bold:bg-interactive-muted-hover enabled:selected:focus-visible:color-mono-bold:outline-2 enabled:selected:focus-visible:color-mono-bold:outline-mono-bold-hover","enabled:selected:pressed:color-mono-bold:fg-pressed enabled:selected:pressed:color-mono-bold:bg-interactive-muted-pressed enabled:selected:pressed:color-mono-bold:outline-2 enabled:selected:pressed:color-mono-bold:outline-interactive-pressed","enabled:color-accent:fg-primary-bold enabled:color-accent:bg-transparent","enabled:hover:color-accent:fg-accent-primary-hover enabled:hover:color-accent:bg-accent-primary-muted","enabled:focus-visible:color-accent:fg-accent-primary-hover enabled:focus-visible:color-accent:bg-accent-primary-muted","enabled:pressed:color-accent:fg-accent-primary-bold enabled:pressed:color-accent:bg-accent-primary-pressed","enabled:selected:color-accent:fg-a11y-on-accent enabled:selected:color-accent:bg-accent-primary-bold enabled:color-accent:outline enabled:selected:color-accent:outline-accent-primary-bold","enabled:selected:hover:color-accent:fg-a11y-on-accent enabled:selected:hover:color-accent:bg-accent-primary-hover enabled:selected:hover:color-accent:outline-2 enabled:selected:hover:color-accent:outline-accent-primary-hover","enabled:selected:focus-visible:color-accent:fg-a11y-on-accent enabled:selected:focus-visible:color-accent:bg-accent-primary-hover enabled:selected:focus-visible:color-accent:outline-2 enabled:selected:focus-visible:color-accent:outline-accent-primary-hover","enabled:selected:pressed:color-accent:fg-accent-primary-bold enabled:selected:pressed:color-accent:bg-accent-primary-pressed enabled:selected:pressed:color-accent:outline-2 enabled:selected:pressed:color-accent:outline-accent-primary-pressed","enabled:color-serious:fg-serious-bold enabled:color-serious:bg-transparent","enabled:hover:color-serious:fg-serious-hover enabled:hover:color-serious:bg-serious-bold","enabled:focus-visible:color-serious:fg-serious-hover enabled:focus-visible:color-serious:bg-serious-muted","enabled:pressed:color-serious:fg-serious-bold enabled:pressed:color-serious:bg-serious-pressed","enabled:selected:color-serious:fg-primary-bold enabled:selected:color-serious:bg-serious-muted enabled:selected:color-serious:outline enabled:selected:color-serious:outline-serious-bold","enabled:selected:hover:color-serious:fg-primary-bold enabled:selected:hover:color-serious:bg-serious-hover enabled:selected:hover:color-serious:outline-2 enabled:selected:hover:color-serious:outline-serious-hover","enabled:selected:focus-visible:color-serious:fg-primary-bold enabled:selected:focus-visible:color-serious:bg-serious-hover enabled:selected:focus-visible:color-serious:outline-2 enabled:selected:focus-visible:color-serious:outline-serious-hover","enabled:selected:pressed:color-serious:fg-serious-pressed enabled:selected:pressed:color-serious:bg-serious-pressed enabled:selected:pressed:color-serious:outline-2 enabled:selected:pressed:color-serious:outline-serious-pressed","enabled:color-critical:fg-critical-bold enabled:color-critical:bg-transparent","enabled:hover:color-critical:fg-critical-hover enabled:hover:color-critical:bg-critical-muted","enabled:focus-visible:color-critical:fg-critical-hover enabled:focus-visible:color-critical:bg-critical-muted","enabled:pressed:color-critical:fg-critical-bold enabled:pressed:color-critical:bg-critical-pressed","enabled:selected:color-critical:fg-primary-bold enabled:selected:color-critical:bg-critical-muted enabled:selected:color-critical:outline enabled:selected:color-critical:outline-critical-bold","enabled:selected:hover:color-critical:fg-a11y-on-accent enabled:selected:hover:color-critical:bg-critical-hover enabled:selected:hover:color-critical:outline-2","enabled:selected:focus-visible:color-critical:fg-a11y-on-accent enabled:selected:focus-visible:color-critical:bg-critical-hover enabled:selected:focus-visible:color-critical:outline-2","enabled:selected:pressed:color-critical:fg-critical-bold enabled:selected:pressed:color-critical:bg-critical-pressed enabled:selected:pressed:color-critical:outline-2 enabled:selected:pressed:color-critical:outline-critical-pressed"],outline:["disabled: disabled:fg-disabled outline-interactive-disabled disabled:bg-transparent","disabled:selected:fg-disabled disabled:selected:bg-interactive-disabled disabled:selected:outline-interactive-disabled","enabled:color-mono-muted:fg-primary-bold enabled:color-mono-muted:bg-transparent enabled:color-mono-muted:outline enabled:color-mono-muted:outline-interactive","enabled:hover:color-mono-muted:bg-interactive-muted-hover enabled:hover:color-mono-muted:outline-2 enabled:hover:color-mono-muted:outline-interactive-hover","enabled:focus-visible:color-mono-muted:bg-interactive-muted-hover enabled:focus-visible:color-mono-muted:outline-2 enabled:focus-visible:color-mono-muted:outline-interactive-hover","enabled:pressed:color-mono-muted:fg-pressed enabled:pressed:color-mono-muted:bg-interactive-muted-pressed enabled:pressed:color-mono-muted:outline-2 enabled:pressed:color-mono-muted:outline-interactive-pressed","enabled:selected:color-mono-muted:fg-primary-muted enabled:selected:color-mono-muted:bg-interactive-muted enabled:selected:color-mono-muted:outline enabled:selected:color-mono-muted:outline-interactive-hover","enabled:selected:hover:color-mono-muted:fg-hover enabled:selected:hover:color-mono-muted:bg-interactive-muted-hover enabled:selected:hover:color-mono-muted:outline-2","enabled:selected:focus-visible:color-mono-muted:bg-interactive-muted-hover enabled:selected:focus-visible:color-mono-muted:outline-2","enabled:selected:pressed:color-mono-muted:fg-pressed enabled:selected:pressed:color-mono-muted:bg-interactive-muted-pressed enabled:selected:pressed:color-mono-muted:outline-2 enabled:selected:pressed:color-mono-muted:outline-interactive-pressed","enabled:color-mono-bold:fg-primary-bold enabled:color-mono-bold:bg-transparent enabled:color-mono-bold:outline enabled:color-mono-bold:outline-mono-bold","enabled:hover:color-mono-bold:bg-interactive-muted-hover enabled:hover:color-mono-bold:outline-2 enabled:hover:color-mono-bold:outline-mono-bold-hover","enabled:focus-visible:color-mono-bold:bg-interactive-muted-hover enabled:focus-visible:color-mono-bold:outline-2 enabled:focus-visible:color-mono-bold:outline-mono-bold-hover","enabled:pressed:color-mono-bold:fg-pressed enabled:pressed:color-mono-bold:bg-interactive-muted-pressed","enabled:selected:color-mono-bold:fg-primary-bold enabled:selected:color-mono-bold:bg-interactive-muted-hover enabled:selected:color-mono-bold:outline enabled:selected:color-mono-bold:outline-mono-bold","enabled:selected:hover:color-mono-bold:fg-inverse-bold enabled:selected:hover:color-mono-bold:bg-interactive-bold-hover enabled:selected:hover:color-mono-bold:outline-2 enabled:selected:hover:color-mono-bold:outline-mono-bold-hover","enabled:selected:focus-visible:color-mono-bold:fg-inverse-bold enabled:selected:focus-visible:color-mono-bold:bg-interactive-muted-hover enabled:selected:focus-visible:color-mono-bold:outline-2 enabled:selected:focus-visible:color-mono-bold:outline-mono-bold-hover","enabled:selected:pressed:color-mono-bold:fg-pressed enabled:selected:pressed:color-mono-bold:bg-interactive-muted-pressed enabled:selected:pressed:color-mono-bold:outline-2 enabled:selected:pressed:color-mono-bold:outline-mono-bold-pressed","enabled:color-accent:fg-primary-bold enabled:color-accent:bg-transparent enabled:color-accent:outline enabled:color-accent:outline-mono-bold","enabled:hover:color-accent:fg-hover enabled:hover:color-accent:bg-accent-primary-muted enabled:hover:color-accent:outline-2 enabled:hover:color-accent:outline-accent-primary-hover","enabled:focus-visible:color-accent:fg-hover enabled:focus-visible:color-accent:bg-accent-primary-muted enabled:focus-visible:color-accent:outline-2 enabled:focus-visible:color-accent:outline-accent-primary-hover","enabled:pressed:color-accent:fg-pressed enabled:pressed:color-accent:bg-interactive-muted-pressed enabled:pressed:color-accent:outline-2 enabled:pressed:color-accent:outline-accent-primary-pressed","enabled:selected:color-accent:fg-primary-bold enabled:selected:color-accent:bg-accent-primary-muted enabled:color-accent:outline enabled:selected:color-accent:outline-accent-primary-bold","enabled:selected:hover:color-accent:fg-a11y-on-accent enabled:selected:hover:color-accent:bg-accent-primary-hover enabled:selected:hover:color-accent:outline-2 enabled:selected:hover:color-accent:outline-accent-primary-hover","enabled:selected:focus-visible:color-accent:fg-a11y-on-accent enabled:selected:focus-visible:color-accent:bg-accent-primary-hover enabled:selected:focus-visible:color-accent:outline-2 enabled:selected:focus-visible:color-accent:outline-accent-primary-hover","enabled:selected:pressed:color-accent:fg-accent-primary-pressed enabled:selected:pressed:color-accent:bg-accent-primary-pressed enabled:selected:pressed:color-accent:outline-2 enabled:selected:pressed:color-accent:outline-accent-primary-pressed","enabled:color-serious:fg-primary-bold enabled:color-serious:bg-transparent enabled:color-serious:outline enabled:color-serious:outline-serious-bold","enabled:hover:color-serious:fg-primary-bold enabled:hover:color-serious:bg-serious-bold enabled:hover:color-serious:outline-2 enabled:hover:color-serious:outline-serious-hover","enabled:focus-visible:color-serious:fg-primary-bold enabled:focus-visible:color-serious:bg-serious-muted enabled:focus-visible:color-serious:outline-2 enabled:focus-visible:color-serious:outline-serious-hover","enabled:pressed:color-serious:fg-serious-bold enabled:pressed:color-serious:bg-serious-pressed enabled:pressed:color-serious:outline-2 enabled:pressed:color-serious:outline-serious-pressed","enabled:selected:color-serious:fg-serious-bold enabled:selected:color-serious:bg-serious-muted enabled:selected:color-serious:outline-serious-muted","enabled:selected:hover:color-serious:fg-primary-bold enabled:selected:hover:color-serious:bg-serious-hover enabled:selected:hover:color-serious:outline-serious-hover","enabled:selected:focus-visible:color-serious:fg-primary-bold enabled:selected:focus-visible:color-serious:bg-serious-hover enabled:selected:focus-visible:color-serious:outline-serious-hover","enabled:selected:pressed:color-serious:fg-serious-pressed enabled:selected:pressed:color-serious:bg-serious-pressed enabled:selected:pressed:color-serious:outline-2 enabled:selected:pressed:color-serious:outline-serious-pressed","enabled:color-critical:fg-primary-bold enabled:color-critical:bg-transparent enabled:color-critical:outline enabled:color-critical:outline-critical-bold","enabled:hover:color-critical:fg-primary-bold enabled:hover:color-critical:bg-critical-bold enabled:hover:color-critical:outline-2 enabled:hover:color-critical:outline-critical-hover","enabled:focus-visible:color-critical:fg-primary-bold enabled:focus-visible:color-critical:bg-critical-muted enabled:focus-visible:color-critical:outline-2 enabled:focus-visible:color-critical:outline-critical-hover","enabled:pressed:color-critical:fg-critical-bold enabled:pressed:color-critical:bg-critical-pressed enabled:pressed:color-critical:outline-2 enabled:pressed:color-critical:outline-critical-pressed","enabled:selected:color-critical:fg-critical-bold enabled:selected:color-critical:bg-critical-muted enabled:selected:color-critical:outline-critical-muted","enabled:selected:hover:color-critical:fg-primary-bold enabled:selected:hover:color-critical:bg-critical-hover enabled:selected:hover:color-critical:outline-critical-hover","enabled:selected:focus-visible:color-critical:fg-primary-bold enabled:selected:focus-visible:color-critical:bg-critical-hover enabled:selected:focus-visible:color-critical:outline-critical-hover","enabled:selected:pressed:color-critical:fg-critical-pressed enabled:selected:pressed:color-critical:bg-critical-pressed enabled:selected:pressed:color-critical:outline-2 enabled:selected:pressed:color-critical:outline-critical-pressed"],icon:["size-small:rounded-small size-xsmall:rounded-small size-large:p-xs size-medium:p-xs size-small:p-xxs size-xsmall:p-xxs","size-large:min-w-xxl size-large:max-w-xxl","size-medium:min-w-[28px] size-medium:max-w-[28px]","size-small:min-w-xl size-small:max-w-xl","size-xsmall:min-w-[20px] size-xsmall:max-w-[20px]","disabled:fg-disabled disabled:bg-transparent","disabled:selected:fg-disabled disabled:selected:bg-interactive-disabled","enabled:color-mono-muted:fg-primary-muted","enabled:hover:color-mono-muted:bg-interactive-muted-hover","enabled:focus-visible:color-mono-muted:bg-interactive-muted-hover","enabled:pressed:color-mono-muted:fg-pressed enabled:pressed:color-mono-muted:bg-interactive-muted-pressed","enabled:selected:color-mono-muted:fg-primary-muted enabled:selected:color-mono-muted:bg-interactive-muted","enabled:selected:hover:color-mono-muted:fg-primary-bold enabled:selected:hover:color-mono-muted:bg-interactive-muted-hover","enabled:selected:focus-visible:color-mono-muted:fg-primary-bold enabled:selected:focus-visible:color-mono-muted:bg-interactive-muted-hover","enabled:selected:pressed:color-mono-muted:fg-pressed enabled:selected:pressed:color-mono-muted:bg-interactive-muted-pressed","enabled:color-mono-bold:fg-primary-bold","enabled:hover:color-mono-bold:bg-interactive-muted-hover","enabled:focus-visible:color-mono-bold:bg-interactive-muted-hover","enabled:pressed:color-mono-bold:fg-pressed enabled:pressed:color-mono-bold:bg-interactive-muted-pressed","enabled:selected:color-mono-bold:fg-inverse-bold enabled:selected:color-mono-bold:bg-interactive-bold","enabled:selected:hover:color-mono-bold:fg-inverse-bold enabled:selected:hover:color-mono-bold:bg-interactive-bold-hover","enabled:selected:focus-visible:color-mono-bold:bg-interactive-bold-hover","enabled:selected:pressed:color-mono-bold:fg-pressed enabled:selected:pressed:color-mono-bold:bg-interactive-muted-pressed","enabled:color-accent:fg-primary-bold","enabled:hover:color-accent:fg-accent-primary-hover enabled:hover:color-accent:bg-accent-primary-muted","enabled:focus-visible:color-accent:fg-accent-primary-hover enabled:focus-visible:color-accent:bg-accent-primary-muted","enabled:pressed:color-accent:fg-accent-primary-pressed enabled:pressed:color-accent:bg-accent-primary-pressed","enabled:selected:color-accent:fg-accent-primary-hover enabled:selected:color-accent:bg-accent-primary-muted","enabled:selected:hover:color-accent:fg-a11y-on-accent enabled:selected:hover:color-accent:bg-accent-primary-hover","enabled:selected:focus-visible:color-accent:fg-a11y-on-accent enabled:selected:focus-visible:color-accent:bg-accent-primary-hover","enabled:selected:pressed:color-accent:fg-accent-primary-pressed enabled:selected:pressed:color-accent:bg-accent-primary-pressed","enabled:color-serious:fg-serious-bold","enabled:hover:color-serious:fg-serious-hover enabled:hover:color-serious:bg-serious-muted","enabled:focus-visible:color-serious:fg-serious-hover enabled:focus-visible:color-serious:bg-serious-muted","enabled:pressed:color-serious:fg-serious-pressed enabled:pressed:color-serious:bg-serious-pressed","enabled:selected:color-serious:fg-serious-bold enabled:selected:color-serious:bg-serious-muted","enabled:selected:hover:color-serious:fg-primary-bold enabled:selected:hover:color-serious:bg-serious-hover","enabled:selected:focus-visible:color-serious:fg-primary-bold enabled:selected:focus-visible:color-serious:bg-serious-hover","enabled:selected:pressed:color-serious:fg-serious-pressed enabled:selected:pressed:color-serious:bg-serious-pressed","enabled:color-critical:fg-critical-bold","enabled:hover:color-critical:fg-critical-hover enabled:hover:color-critical:bg-critical-muted","enabled:focus-visible:color-critical:fg-critical-hover enabled:focus-visible:color-critical:bg-critical-muted","enabled:pressed:color-critical:fg-critical-pressed enabled:pressed:color-critical:bg-critical-pressed","enabled:selected:color-critical:fg-critical-bold enabled:selected:color-critical:bg-critical-muted","enabled:selected:hover:color-critical:fg-a11y-on-accent enabled:selected:hover:color-critical:bg-critical-hover","enabled:selected:focus-visible:color-critical:fg-a11y-on-accent enabled:selected:focus-visible:color-critical:bg-critical-hover","enabled:selected:pressed:color-critical:fg-critical-pressed enabled:selected:pressed:color-critical:bg-critical-pressed"]}}});export{c as ButtonStyles,l as ButtonStylesDefaults,s as LinkButtonStyles,d as ToggleButtonStyles};//# sourceMappingURL=styles.js.map
|
|
2
2
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/button/styles.ts"],"names":["BaseButtonStyles","e"],"mappings":"sCAeS,MAAA,CAAA,CAAA,CAAA,KACP,CAAA,cACF,CAEMA,QACJ,CAAA,CAAM,CACJ,CAAAC,EAAA,CAAA,CAAA,IAAA,CAAA,CAAA,mHACA,CAAA,0GAEA,CAAA,gFACA,CAAA,8EACA,CAAA,oFAEQ,CACR,QAAS,CACP,CAAA,OACE,iEAGA,CAAA,oCACA,CAAA,6FAEA,CAAA,4DAGA,CAAA,kFAEA,CAAA,8CACA,CAAA,kGAIA,CAAA,yCACA,CAAA,yGAGO,CACP,CAAA,OAAA,CAAA,CAAA,wIAIA,CAAA,oDACA,CAAA,+IAIA,CAAA,uDACA,CAAA,qJAIA,CAAA,wDACA,CAAA,gEAEI,CAAA,CAAA,IAAA,CAAA,8CAEJ,CAAA,IAAA,CAAA,CAAA,uKAGF,CAAU,CACR,QAAA,CAAA,CAAA,cACA,CAAA,qEACA,CAAA,6FAGA,CAAA,0MAEA,CAAA,2GAGA,CAAA,2NAEA,CAAA,iHAGA,CAAA,mOAEA,CAAA,mHAIN,CAAA,CAAA,CAAA,CAAA,gBAGI,CAAS,CAAC,CAAA,OAAQ,CAAA,CAAA,MAClB,CAAA,MAAA,CAAA,CAAW,SACT,CAAA,CAAA,oCACA,CAAA,mHAOF,CAAA,CAAS,CAAC,QAAQ,CAAA,CAAA,eACP,SACT,CAAA,CAAA,sFAEA,CAAA,sDAMF,CAAA,CAAS,CAAC,CAAA,OAAQ,CAAA,CAAA,MAClB,CAAA,MAAA,CAAA,CAAW,SACT,CAAA,CAAA,wCACA,CAAA,yGAKN,CAAA,CAAA,CAAA,CAAA,eAIA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQD,EACV,CAAC,CAAA,MAGC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQA,EACV,CAAC,CAAA,MAGC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQA,GACR,CAAA,wDAEE,CAAA,+CACA,CAAA,uDAEF,CAAU,CACR,QAAS,CACP,CAAA,OAEE,CAAA,CAAA,MAAA,CAAA,CAAA,2CACA,CAAA,mIAIA,CAAA,iDACA,CAAA,uHAIA,CAAA,mDACA,CAAA,2HAGF,CAAU,CAER,QAAA,CAAA,CAAA,yDACA,CAAA,mIAIA,CAAA,4DACA,CAAA,yIAIA,CAAA,6DACA,CAAA,2IAKP,CAAA,CAAA,CAAA,CAAA","file":"styles.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { tv } from '@/lib/utils';\n\nexport const ButtonStylesDefaults = {\n color: 'info',\n variant: 'filled',\n} as const;\n\nconst BaseButtonStyles = tv({\n base: [\n 'group/button flex w-content cursor-pointer items-center justify-center rounded-medium outline outline-transparent',\n 'disabled:cursor-not-allowed',\n 'size-large:gap-xs size-large:px-m size-large:py-s size-large:text-button-l',\n 'size-medium:gap-xs size-medium:px-m size-medium:py-s size-medium:text-button-m',\n 'size-small:gap-xxs size-small:px-s size-small:py-xs size-small:text-button-s',\n 'size-xsmall:gap-xxs size-xsmall:px-s size-xsmall:py-xs size-xsmall:text-button-xs',\n ],\n variants: {\n variant: {\n filled: [\n 'disabled:fg-disabled disabled:bg-interactive-disabled',\n\n // Info\n 'enabled:color-info:fg-inverse-bold',\n 'enabled:color-info:bg-interactive-bold',\n 'enabled:hover:color-info:bg-interactive-bold-hover',\n 'enabled:focus-visible:color-info:bg-interactive-bold-hover',\n\n // Serious\n 'enabled:color-serious:fg-a11y-on-utility',\n 'enabled:color-serious:bg-serious-bold',\n 'enabled:hover:color-serious:bg-serious-hover',\n 'enabled:focus-visible:color-serious:bg-serious-hover',\n\n // Critical\n 'enabled:color-critical:fg-a11y-on-utility',\n 'enabled:color-critical:bg-critical-bold',\n 'enabled:hover:color-critical:bg-critical-hover',\n 'enabled:focus-visible:color-critical:bg-critical-hover',\n ],\n outline: [\n 'disabled:fg-disabled disabled:outline-interactive-disabled',\n\n // Info\n 'enabled:color-info:fg-primary-bold enabled:color-info:outline-interactive',\n 'enabled:hover:color-info:outline-interactive-hover',\n 'enabled:focus-visible:color-info:outline-interactive-hover',\n\n // Serious\n 'enabled:color-serious:fg-primary-bold enabled:color-serious:outline-serious-bold',\n 'enabled:hover:color-serious:outline-interactive-hover',\n 'enabled:focus-visible:color-serious:outline-interactive-hover',\n\n // Critical\n 'enabled:color-critical:fg-primary-bold enabled:color-critical:outline-critical-bold',\n 'enabled:hover:color-critical:outline-interactive-hover',\n 'enabled:focus-visible:color-critical:outline-interactive-hover',\n ],\n flat: 'disabled:fg-disabled disabled:bg-transparent',\n icon: [\n 'size-small:rounded-small size-xsmall:rounded-small size-large:p-xs size-medium:p-xs size-small:p-xxs size-xsmall:p-xxs',\n 'disabled:fg-disabled disabled:bg-transparent',\n ],\n floating: [\n 'rounded-full',\n 'size-large:p-xs size-medium:p-xs size-small:p-xxs size-xsmall:p-xxs',\n 'disabled:fg-disabled disabled:bg-interactive-disabled disabled:outline-interactive-disabled',\n\n // Info\n 'enabled:color-info:fg-info-bold enabled:color-info:bg-surface-default enabled:color-info:outline-interactive',\n 'enabled:hover:color-info:fg-info-hover enabled:hover:color-info:outline-interactive-hover',\n 'enabled:focus-visible:color-info:fg-info-hover enabled:focus-visible:color-info:outline-interactive-hover',\n\n // Serious\n 'enabled:color-serious:fg-serious-bold enabled:color-serious:bg-serious-muted enabled:color-serious:outline-serious-bold',\n 'enabled:hover:color-serious:fg-info-hover enabled:hover:color-serious:outline-interactive-hover',\n 'enabled:focus-visible:color-serious:fg-info-hover enabled:focus-visible:color-serious:outline-interactive-hover',\n\n // Critical\n 'enabled:color-critical:fg-critical-bold enabled:color-critical:bg-critical-muted enabled:color-critical:outline-critical-bold',\n 'enabled:hover:color-critical:fg-info-hover enabled:hover:color-critical:outline-interactive-hover',\n 'enabled:focus-visible:color-critical:fg-info-hover enabled:focus-visible:color-critical:outline-interactive-hover',\n ],\n },\n },\n compoundVariants: [\n // Info\n {\n variant: ['flat', 'icon'],\n className: [\n 'enabled:color-info:fg-primary-bold',\n 'enabled:hover:color-info:bg-interactive-muted-hover',\n 'enabled:focus-visible:color-info:bg-interactive-muted-hover',\n ],\n },\n\n // Serious\n {\n variant: ['flat', 'icon'],\n className: [\n 'enabled:color-serious:fg-primary-bold',\n 'enabled:hover:color-serious:bg-serious-hover',\n 'enabled:focus-visible:color-serious:bg-serious-hover',\n ],\n },\n\n // Critical\n {\n variant: ['flat', 'icon'],\n className: [\n 'enabled:color-critical:fg-primary-bold',\n 'enabled:hover:color-critical:bg-critical-hover',\n 'enabled:focus-visible:color-critical:bg-critical-hover',\n ],\n },\n ],\n defaultVariants: ButtonStylesDefaults,\n});\n\nexport const ButtonStyles = tv({\n extend: BaseButtonStyles,\n});\n\nexport const LinkButtonStyles = tv({\n extend: BaseButtonStyles,\n});\n\nexport const ToggleButtonStyles = tv({\n extend: BaseButtonStyles,\n base: [\n 'enabled:selected:fg-accent-primary-bold',\n 'enabled:selected:hover:fg-accent-primary-bold',\n 'enabled:selected:focus-visible:fg-accent-primary-bold',\n ],\n variants: {\n variant: {\n filled: [\n // Info\n 'enabled:selected:color-info:bg-info-muted',\n 'enabled:selected:hover:color-info:bg-interactive-bold-hover',\n 'enabled:selected:focus-visible:color-info:bg-interactive-bold-hover',\n\n // Serious\n 'enabled:selected:color-serious:bg-serious-muted',\n 'enabled:selected:hover:color-serious:bg-serious-hover',\n 'enabled:selected:focus-visible:color-serious:bg-serious-hover',\n\n // Critical\n 'enabled:selected:color-critical:bg-critical-muted',\n 'enabled:selected:hover:color-critical:bg-critical-hover',\n 'enabled:selected:focus-visible:color-critical:bg-critical-hover',\n ],\n floating: [\n // Info\n 'enabled:selected:color-info:outline-accent-primary-bold',\n 'enabled:selected:hover:color-info:outline-interactive-hover',\n 'enabled:selected:focus-visible:color-info:outline-interactive-hover',\n\n // Serious\n 'enabled:selected:color-serious:outline-accent-primary-bold',\n 'enabled:selected:hover:color-serious:outline-interactive-hover',\n 'enabled:selected:focus-visible:color-serious:outline-interactive-hover',\n\n // Critical\n 'enabled:selected:color-critical:outline-accent-primary-bold',\n 'enabled:selected:hover:color-critical:outline-interactive-hover',\n 'enabled:selected:focus-visible:color-critical:outline-interactive-hover',\n ],\n },\n },\n});\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/button/styles.ts"],"names":["BaseButtonStyles","e"],"mappings":"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","file":"styles.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { tv } from '@/lib/utils';\n\nexport const ButtonStylesDefaults = {\n variant: 'filled',\n} as const;\n\nconst BaseButtonStyles = tv({\n base: [\n 'group/button flex w-content shrink-0 cursor-pointer items-center justify-center rounded-medium outline outline-transparent',\n 'disabled:cursor-not-allowed',\n 'size-large:min-w-[96px] size-large:gap-xs size-large:px-l size-large:py-s size-large:text-button-l',\n 'size-medium:min-w-[68px] size-medium:gap-xs size-medium:px-m size-medium:py-xs size-medium:text-button-m',\n 'size-small:min-w-[54px] size-small:gap-xxs size-small:px-s size-small:py-xs size-small:text-button-s',\n 'size-xsmall:min-w-[41px] size-xsmall:gap-xxs size-xsmall:p-xs size-xsmall:text-button-xs',\n ],\n variants: {\n variant: {\n filled: [\n 'disabled:fg-disabled disabled:bg-interactive-disabled',\n\n // Mono Muted\n 'enabled:color-mono-muted:fg-primary-bold enabled:color-mono-muted:bg-interactive-muted',\n 'enabled:hover:color-mono-muted:bg-interactive-muted-hover',\n 'enabled:focus-visible:color-mono-muted:bg-interactive-muted-hover',\n 'enabled:pressed:color-mono-muted:fg-primary-muted enabled:pressed:color-mono-muted:bg-interactive-muted-pressed',\n\n // Mono Bold\n 'enabled:color-mono-bold:fg-inverse-bold enabled:color-mono-bold:bg-interactive-bold',\n 'enabled:hover:color-mono-bold:fg-disabled enabled:hover:color-mono-bold:bg-interactive-bold-hover',\n 'enabled:focus-visible:color-mono-bold:fg-disabled enabled:focus-visible:color-mono-bold:bg-interactive-bold-hover',\n 'enabled:pressed:color-mono-bold:fg-inverse-muted enabled:pressed:color-mono-bold:bg-interactive-bold-pressed',\n\n // Accent\n 'enabled:color-accent:fg-a11y-on-accent enabled:color-accent:bg-accent-primary-bold',\n 'enabled:hover:color-accent:bg-accent-primary-hover',\n 'enabled:focus-visible:color-accent:bg-accent-primary-hover',\n 'enabled:pressed:color-accent:fg-accent-primary-bold enabled:pressed:color-accent:bg-accent-primary-pressed',\n\n // Serious\n 'enabled:color-serious:fg-a11y-on-utility enabled:color-serious:bg-serious-bold',\n 'enabled:hover:color-serious:bg-serious-hover',\n 'enabled:focus-visible:color-serious:bg-serious-hover',\n 'enabled:pressed:color-serious:fg-serious-bold enabled:pressed:color-serious:bg-serious-pressed',\n\n // Critical\n 'enabled:color-critical:fg-a11y-on-utility enabled:color-critical:bg-critical-bold',\n 'enabled:hover:color-critical:bg-critical-hover',\n 'enabled:focus-visible:color-critical:bg-critical-hover',\n 'enabled:pressed:color-critical:fg-critical-bold enabled:pressed:color-critical:bg-critical-pressed',\n ],\n outline: [\n 'disabled:fg-disabled disabled:outline-interactive-disabled',\n\n // Mono Muted\n 'enabled:color-mono-muted:fg-primary-bold enabled:color-mono-muted:bg-transparent enabled:color-mono-muted:outline enabled:color-mono-muted:outline-interactive',\n 'enabled:hover:color-mono-muted:bg-interactive-muted-hover enabled:hover:color-mono-muted:outline-2 enabled:hover:color-mono-muted:outline-interactive-hover',\n 'enabled:focus-visible:color-mono-muted:bg-interactive-muted-hover enabled:focus-visible:color-mono-muted:outline-2 enabled:focus-visible:color-mono-muted:outline-interactive-hover',\n 'enabled:pressed:color-mono-muted:fg-pressed enabled:pressed:color-mono-muted:bg-interactive-muted-pressed enabled:pressed:color-mono-muted:outline-2 enabled:pressed:color-mono-muted:outline-interactive-pressed',\n\n // Mono Bold\n 'enabled:color-mono-bold:fg-primary-bold enabled:color-mono-bold:bg-transparent enabled:color-mono-bold:outline enabled:color-mono-bold:outline-mono-bold',\n 'enabled:hover:color-mono-bold:bg-interactive-muted-hover enabled:hover:color-mono-bold:outline-2 enabled:hover:color-mono-bold:outline-interactive-hover',\n 'enabled:focus-visible:color-mono-bold:bg-interactive-muted-hover enabled:focus-visible:color-mono-bold:outline-2 enabled:focus-visible:color-mono-bold:outline-interactive-hover',\n 'enabled:pressed:color-mono-bold:fg-pressed enabled:pressed:color-mono-bold:bg-interactive-muted-pressed enabled:pressed:color-mono-bold:outline-2 enabled:pressed:color-mono-bold:outline-mono-bold-pressed',\n\n // Accent\n 'enabled:color-accent:fg-primary-bold enabled:color-accent:bg-transparent enabled:color-accent:outline enabled:color-accent:outline-accent-primary-bold',\n 'enabled:hover:color-accent:fg-a11y-on-accent enabled:hover:color-accent:bg-accent-primary-hover enabled:hover:color-accent:outline-2 enabled:hover:color-accent:outline-accent-primary-hover',\n 'enabled:focus-visible::color-accent:fg-a11y-on-accent enabled:focus-visible:color-accent:bg-accent-primary-hover enabled:focus-visible:color-accent:outline-2 enabled:focus-visible:color-accent:outline-accent-primary-hover',\n 'enabled:pressed:color-accent:fg-accent-primary-bold enabled:pressed:color-accent:bg-accent-primary-pressed enabled:pressed:color-accent:outline-2 enabled:pressed:color-accent:outline-accent-primary-pressed',\n\n // Serious\n 'enabled:color-serious:fg-primary-bold enabled:color-serious:bg-transparent enabled:color-serious:outline enabled:color-serious:outline-serious-bold',\n 'enabled:hover:color-serious:fg-a11y-on-accent enabled:hover:color-serious:bg-serious-hover enabled:hover:color-serious:outline-2 enabled:hover:color-serious:outline-serious-hover',\n 'enabled:focus-visible:color-serious:fg-a11y-on-accent enabled:focus-visible:color-serious:bg-serious-hover enabled:focus-visible:color-serious:outline-2 enabled:focus-visible:color-serious:outline-serious-hover',\n 'enabled:pressed:color-serious:fg-serious-bold enabled:pressed:color-serious:bg-serious-pressed enabled:pressed:color-serious:outline-2 enabled:pressed:color-serious:outline-serious-pressed',\n\n // Critical\n 'enabled:color-critical:fg-primary-bold enabled:color-critical:bg-transparent enabled:color-critical:outline enabled:color-critical:outline-critical-bold',\n 'enabled:hover:color-critical:fg-a11y-on-accent enabled:hover:color-critical:bg-critical-hover enabled:hover:color-critical:outline-2 enabled:hover:color-critical:outline-critical-hover',\n 'enabled:focus-visible:color-critical:fg-a11y-on-accent enabled:focus-visible:color-critical:bg-critical-hover enabled:focus-visible:color-critical:outline-2 enabled:focus-visible:color-critical:outline-critical-hover',\n 'enabled:pressed:color-critical:fg-critical-pressed enabled:pressed:color-critical:bg-critical-pressed enabled:pressed:color-critical:outline-2 enabled:pressed:color-critical:outline-critical-pressed',\n ],\n flat: [\n 'disabled:fg-disabled disabled:bg-transparent',\n\n // Mono Muted\n 'enabled:color-mono-muted:fg-primary-muted',\n 'enabled:hover:color-mono-muted:bg-interactive-muted-hover',\n 'enabled:focus-visible:color-mono-muted:bg-interactive-muted-hover',\n 'enabled:pressed:color-mono-muted:fg-pressed enabled:pressed:color-mono-muted:bg-interactive-muted-pressed',\n\n // Mono Bold\n 'enabled:color-mono-bold:fg-primary-bold',\n 'enabled:hover:color-mono-bold:bg-interactive-muted-hover',\n 'enabled:focus-visible:color-mono-bold:bg-interactive-muted-hover',\n 'enabled:pressed:color-mono-bold:fg-pressed enabled:pressed:color-mono-bold:bg-interactive-muted-pressed',\n\n // Accent\n 'enabled:color-accent:fg-accent-primary-bold',\n 'enabled:hover:color-accent:fg-a11y-on-accent enabled:hover:color-accent:bg-accent-primary-hover',\n 'enabled:focus-visible:color-accent:fg-a11y-on-accent enabled:focus-visible:color-accent:bg-accent-primary-hover',\n 'enabled:pressed:color-accent:fg-accent-primary-pressed enabled:pressed:color-accent:bg-accent-primary-pressed',\n\n // Serious\n 'enabled:color-serious:fg-serious-bold',\n 'enabled:hover:color-serious:fg-a11y-on-accent enabled:hover:color-serious:bg-serious-hover',\n 'enabled:focus-visible:color-serious:fg-a11y-on-accent enabled:focus-visible:color-serious:bg-serious-hover',\n 'enabled:pressed:color-serious:fg-serious-pressed enabled:pressed:color-serious:bg-serious-pressed',\n\n // Critical\n 'enabled:color-critical:fg-critical-bold',\n 'enabled:hover:color-critical:fg-a11y-on-accent enabled:hover:color-critical:bg-critical-hover',\n 'enabled:focus-visible:color-critical:fg-a11y-on-accent enabled:focus-visible:color-critical:bg-critical-hover',\n 'enabled:pressed:color-critical:fg-critical-pressed enabled:pressed:color-critical:bg-critical-pressed',\n ],\n icon: [\n 'size-large:min-w-0 size-large:p-xs',\n 'size-medium:min-w-0 size-medium:p-xs',\n 'size-small:min-w-0 size-small:rounded-small size-small:p-xxs',\n 'size-xsmall:min-w-0 size-xsmall:rounded-small size-xsmall:p-xxs',\n 'disabled:fg-disabled disabled:bg-transparent',\n\n // Mono Muted\n 'enabled:color-mono-muted:fg-primary-muted',\n 'enabled:hover:color-mono-muted:bg-interactive-muted-hover',\n 'enabled:focus-visible:color-mono-muted:bg-interactive-muted-hover',\n 'enabled:pressed:color-mono-muted:fg-pressed enabled:pressed:color-mono-muted:bg-interactive-muted-pressed',\n\n // Mono Bold\n 'enabled:color-mono-bold:fg-primary-bold',\n 'enabled:hover:color-mono-bold:bg-interactive-muted-hover',\n 'enabled:focus-visible:color-mono-bold:bg-interactive-muted-hover',\n 'enabled:pressed:color-mono-bold:fg-pressed enabled:pressed:color-mono-bold:bg-interactive-muted-pressed',\n\n // Accent\n 'enabled:color-accent:fg-accent-primary-bold',\n 'enabled:hover:color-accent:fg-accent-primary-hover enabled:hover:color-accent:bg-interactive-muted-hover',\n 'enabled:focus-visible:color-accent:fg-accent-primary-hover enabled:focus-visible:color-accent:bg-interactive-muted-hover',\n 'enabled:pressed:color-accent:fg-accent-primary-pressed enabled:pressed:color-accent:bg-interactive-muted-pressed',\n\n // Serious\n 'enabled:color-serious:fg-serious-bold',\n 'enabled:hover:color-serious:fg-serious-hover enabled:hover:color-serious:bg-interactive-muted-hover',\n 'enabled:focus-visible:color-serious:fg-serious-hover enabled:focus-visible:color-serious:bg-interactive-muted-hover',\n 'enabled:pressed:color-serious:fg-serious-pressed enabled:pressed:color-serious:bg-interactive-muted-pressed',\n\n // Critical\n 'enabled:color-critical:fg-critical-bold',\n 'enabled:hover:color-critical:fg-critical-hover enabled:hover:color-critical:bg-interactive-muted-hover',\n 'enabled:focus-visible:color-critical:fg-critical-hover enabled:focus-visible:color-critical:bg-interactive-muted-hover',\n 'enabled:pressed:color-critical:fg-critical-pressed enabled:pressed:color-critical:bg-interactive-muted-pressed',\n ],\n floating: [\n 'rounded-full',\n 'size-large:min-w-0 size-large:p-xs',\n 'size-medium:min-w-0 size-medium:p-xs',\n 'size-small:min-w-0 size-small:p-xxs',\n 'size-xsmall:min-w-0 size-xsmall:p-xxs',\n 'disabled:fg-disabled disabled:bg-interactive-disabled disabled:outline-interactive-disabled',\n\n // Mono Muted\n 'enabled:color-mono-muted:fg-primary-muted enabled:color-mono-muted:bg-surface-default enabled:color-mono-muted:outline-interactive',\n 'enabled:hover:color-mono-muted:fg-primary-hover enabled:hover:color-mono-muted:outline-interactive-hover',\n 'enabled:focus-visible:color-mono-muted:fg-primary-hover enabled:focus-visible:color-mono-muted:outline-interactive-hover',\n 'enabled:pressed:color-mono-muted:fg-pressed enabled:pressed:color-mono-muted:bg-interactive-muted-pressed',\n\n // Mono Bold\n 'enabled:color-mono-bold:fg-primary-bold enabled:color-mono-bold:bg-surface-default enabled:color-mono-bold:outline-interactive',\n 'enabled:hover:color-mono-bold:fg-primary-hover enabled:hover:color-mono-bold:outline-interactive-hover',\n 'enabled:focus-visible:color-mono-bold:fg-primary-hover enabled:focus-visible:color-mono-bold:outline-interactive-hover',\n 'enabled:pressed:color-mono-bold:fg-pressed enabled:pressed:color-mono-bold:bg-interactive-muted-pressed',\n\n // Accent\n 'enabled:color-accent:fg-accent-primary-bold enabled:color-accent:bg-accent-primary-bold enabled:color-accent:outline-accent-primary-bold',\n 'enabled:hover:color-accent:fg-accent-primary-hover enabled:hover:color-accent:outline-accent-primary-hover',\n 'enabled:focus-visible:color-accent:fg-accent-primary-hover enabled:focus-visible:color-accent:outline-accent-primary-hover',\n 'enabled:pressed:color-accent:fg-accent-primary-pressed enabled:pressed:color-accent:bg-interactive-muted-pressed enabled:pressed:color-accent:outline-accent-primary-pressed',\n\n // Serious\n 'enabled:color-serious:fg-serious-bold enabled:color-serious:bg-serious-muted enabled:color-serious:outline-serious-bold',\n 'enabled:hover:color-serious:fg-serious-hover enabled:hover:color-serious:outline-interactive-hover',\n 'enabled:focus-visible:color-serious:fg-serious-hover enabled:focus-visible:color-serious:outline-interactive-hover',\n 'enabled:pressed:color-serious:fg-serious-pressed enabled:pressed:color-serious:bg-interactive-muted-pressed enabled:pressed:color-serious:outline-serious-pressed',\n\n // Critical\n 'enabled:color-critical:fg-critical-bold enabled:color-critical:bg-critical-muted enabled:color-critical:outline-critical-bold',\n 'enabled:hover:color-critical:fg-critiical-hover enabled:hover:color-critical:outline-critical-hover',\n 'enabled:focus-visible:color-critical:fg-critiical-hover enabled:focus-visible:color-critical:outline-critical-hover',\n 'enabled:pressed:color-critical:fg-critical-pressed enabled:pressed:color-critical:bg-interactive-muted-pressed enabled:pressed:color-critical:outline-critical-pressed',\n ],\n },\n },\n defaultVariants: ButtonStylesDefaults,\n});\n\nexport const ButtonStyles = tv({\n extend: BaseButtonStyles,\n});\n\nexport const LinkButtonStyles = tv({\n extend: BaseButtonStyles,\n});\n\nexport const ToggleButtonStyles = tv({\n extend: BaseButtonStyles,\n base: [\n 'enabled:color-accent:fg-accent-primary-bold enabled:color-accent:bg-transparent',\n 'enabled:hover:color-accent:fg-accent-primary-hover enabled:hover:color-accent:bg-accent-primary-muted',\n 'enabled:focus-visible:color-accent:fg-accent-primary-hover enabled:focus-visible:color-accent:bg-accent-primary-muted',\n 'enabled:pressed:color-accent:fg-accent-primary-bold enabled:pressed:color-accent:bg-accent-primary-pressed',\n ],\n variants: {\n variant: {\n flat: [\n 'disabled:fg-disabled disabled:bg-transparent',\n 'disabled:selected:fg-disabled disabled:selected:bg-interactive-disabled disabled:selected:outline-interactive-disabled',\n\n // Mono Muted\n 'enabled:color-mono-muted:fg-primary-muted enabled:color-mono-muted:bg-transparent',\n 'enabled:hover:color-mono-muted:bg-interactive-muted-hover',\n 'enabled:focus-visible:color-mono-muted:bg-interactive-muted-hover',\n 'enabled:pressed:color-mono-muted:fg-pressed enabled:pressed:color-mono-muted:bg-interactive-muted-pressed',\n\n // Mono Muted - Selected\n 'enabled:selected:color-mono-muted:fg-primary-muted enabled:selected:color-mono-muted:bg-interactive-muted enabled:selected:color-mono-muted:outline enabled:selected:color-mono-muted:outline-interactive-hover',\n 'enabled:selected:hover:color-mono-muted:bg-interactive-muted-hover enabled:selected:hover:color-mono-muted:outline-2',\n 'enabled:selected:focus-visible:color-mono-muted:bg-interactive-muted-hover enabled:selected:focus-visible:color-mono-muted:outline-2',\n 'enabled:selected:pressed:color-mono-muted:fg-pressed enabled:selected:pressed:color-mono-muted:bg-interactive-muted-pressed enabled:selected:pressed:color-mono-muted:outline-2 enabled:selected:pressed:color-mono-muted:outline-interactive-pressed',\n\n // Mono Bold\n 'enabled:color-mono-bold:fg-primary-bold',\n 'enabled:hover:color-mono-bold:bg-interactive-muted-hover',\n 'enabled:focus-visible:color-mono-bold:bg-interactive-muted-hover',\n 'enabled:pressed:color-mono-bold:fg-pressed enabled:pressed:color-mono-bold:bg-interactive-muted-pressed',\n\n // Mono Bold - Selected\n 'enabled:selected:color-mono-bold:fg-primary-bold enabled:selected:color-mono-bold:outline enabled:selected:color-mono-bold:outline-mono-bold',\n 'enabled:selected:hover:color-mono-bold:fg-hover enabled:selected:hover:color-mono-bold:bg-interactive-muted-hover enabled:selected:hover:color-mono-bold:outline-2 enabled:selected:hover:color-mono-bold:outline-mono-bold-hover',\n 'enabled:selected:focus-visible:color-mono-bold:bg-interactive-muted-hover enabled:selected:focus-visible:color-mono-bold:outline-2 enabled:selected:focus-visible:color-mono-bold:outline-mono-bold-hover',\n 'enabled:selected:pressed:color-mono-bold:fg-pressed enabled:selected:pressed:color-mono-bold:bg-interactive-muted-pressed enabled:selected:pressed:color-mono-bold:outline-2 enabled:selected:pressed:color-mono-bold:outline-interactive-pressed',\n\n // Accent\n 'enabled:color-accent:fg-primary-bold enabled:color-accent:bg-transparent',\n 'enabled:hover:color-accent:fg-accent-primary-hover enabled:hover:color-accent:bg-accent-primary-muted',\n 'enabled:focus-visible:color-accent:fg-accent-primary-hover enabled:focus-visible:color-accent:bg-accent-primary-muted',\n 'enabled:pressed:color-accent:fg-accent-primary-bold enabled:pressed:color-accent:bg-accent-primary-pressed',\n\n // Accent - Selected\n 'enabled:selected:color-accent:fg-a11y-on-accent enabled:selected:color-accent:bg-accent-primary-bold enabled:color-accent:outline enabled:selected:color-accent:outline-accent-primary-bold',\n 'enabled:selected:hover:color-accent:fg-a11y-on-accent enabled:selected:hover:color-accent:bg-accent-primary-hover enabled:selected:hover:color-accent:outline-2 enabled:selected:hover:color-accent:outline-accent-primary-hover',\n 'enabled:selected:focus-visible:color-accent:fg-a11y-on-accent enabled:selected:focus-visible:color-accent:bg-accent-primary-hover enabled:selected:focus-visible:color-accent:outline-2 enabled:selected:focus-visible:color-accent:outline-accent-primary-hover',\n 'enabled:selected:pressed:color-accent:fg-accent-primary-bold enabled:selected:pressed:color-accent:bg-accent-primary-pressed enabled:selected:pressed:color-accent:outline-2 enabled:selected:pressed:color-accent:outline-accent-primary-pressed',\n\n // Serious\n 'enabled:color-serious:fg-serious-bold enabled:color-serious:bg-transparent',\n 'enabled:hover:color-serious:fg-serious-hover enabled:hover:color-serious:bg-serious-bold',\n 'enabled:focus-visible:color-serious:fg-serious-hover enabled:focus-visible:color-serious:bg-serious-muted',\n 'enabled:pressed:color-serious:fg-serious-bold enabled:pressed:color-serious:bg-serious-pressed',\n\n // Serious - Selected\n 'enabled:selected:color-serious:fg-primary-bold enabled:selected:color-serious:bg-serious-muted enabled:selected:color-serious:outline enabled:selected:color-serious:outline-serious-bold',\n 'enabled:selected:hover:color-serious:fg-primary-bold enabled:selected:hover:color-serious:bg-serious-hover enabled:selected:hover:color-serious:outline-2 enabled:selected:hover:color-serious:outline-serious-hover',\n 'enabled:selected:focus-visible:color-serious:fg-primary-bold enabled:selected:focus-visible:color-serious:bg-serious-hover enabled:selected:focus-visible:color-serious:outline-2 enabled:selected:focus-visible:color-serious:outline-serious-hover',\n 'enabled:selected:pressed:color-serious:fg-serious-pressed enabled:selected:pressed:color-serious:bg-serious-pressed enabled:selected:pressed:color-serious:outline-2 enabled:selected:pressed:color-serious:outline-serious-pressed',\n\n // Critical\n 'enabled:color-critical:fg-critical-bold enabled:color-critical:bg-transparent',\n 'enabled:hover:color-critical:fg-critical-hover enabled:hover:color-critical:bg-critical-muted',\n 'enabled:focus-visible:color-critical:fg-critical-hover enabled:focus-visible:color-critical:bg-critical-muted',\n 'enabled:pressed:color-critical:fg-critical-bold enabled:pressed:color-critical:bg-critical-pressed',\n\n // Critical - Selected\n 'enabled:selected:color-critical:fg-primary-bold enabled:selected:color-critical:bg-critical-muted enabled:selected:color-critical:outline enabled:selected:color-critical:outline-critical-bold',\n 'enabled:selected:hover:color-critical:fg-a11y-on-accent enabled:selected:hover:color-critical:bg-critical-hover enabled:selected:hover:color-critical:outline-2',\n 'enabled:selected:focus-visible:color-critical:fg-a11y-on-accent enabled:selected:focus-visible:color-critical:bg-critical-hover enabled:selected:focus-visible:color-critical:outline-2',\n 'enabled:selected:pressed:color-critical:fg-critical-bold enabled:selected:pressed:color-critical:bg-critical-pressed enabled:selected:pressed:color-critical:outline-2 enabled:selected:pressed:color-critical:outline-critical-pressed',\n ],\n outline: [\n 'disabled: disabled:fg-disabled outline-interactive-disabled disabled:bg-transparent',\n 'disabled:selected:fg-disabled disabled:selected:bg-interactive-disabled disabled:selected:outline-interactive-disabled',\n\n // Mono Muted\n 'enabled:color-mono-muted:fg-primary-bold enabled:color-mono-muted:bg-transparent enabled:color-mono-muted:outline enabled:color-mono-muted:outline-interactive',\n 'enabled:hover:color-mono-muted:bg-interactive-muted-hover enabled:hover:color-mono-muted:outline-2 enabled:hover:color-mono-muted:outline-interactive-hover',\n 'enabled:focus-visible:color-mono-muted:bg-interactive-muted-hover enabled:focus-visible:color-mono-muted:outline-2 enabled:focus-visible:color-mono-muted:outline-interactive-hover',\n 'enabled:pressed:color-mono-muted:fg-pressed enabled:pressed:color-mono-muted:bg-interactive-muted-pressed enabled:pressed:color-mono-muted:outline-2 enabled:pressed:color-mono-muted:outline-interactive-pressed',\n\n // Mono Muted - Selected\n 'enabled:selected:color-mono-muted:fg-primary-muted enabled:selected:color-mono-muted:bg-interactive-muted enabled:selected:color-mono-muted:outline enabled:selected:color-mono-muted:outline-interactive-hover',\n 'enabled:selected:hover:color-mono-muted:fg-hover enabled:selected:hover:color-mono-muted:bg-interactive-muted-hover enabled:selected:hover:color-mono-muted:outline-2',\n 'enabled:selected:focus-visible:color-mono-muted:bg-interactive-muted-hover enabled:selected:focus-visible:color-mono-muted:outline-2',\n 'enabled:selected:pressed:color-mono-muted:fg-pressed enabled:selected:pressed:color-mono-muted:bg-interactive-muted-pressed enabled:selected:pressed:color-mono-muted:outline-2 enabled:selected:pressed:color-mono-muted:outline-interactive-pressed',\n\n // Mono Bold\n 'enabled:color-mono-bold:fg-primary-bold enabled:color-mono-bold:bg-transparent enabled:color-mono-bold:outline enabled:color-mono-bold:outline-mono-bold',\n 'enabled:hover:color-mono-bold:bg-interactive-muted-hover enabled:hover:color-mono-bold:outline-2 enabled:hover:color-mono-bold:outline-mono-bold-hover',\n 'enabled:focus-visible:color-mono-bold:bg-interactive-muted-hover enabled:focus-visible:color-mono-bold:outline-2 enabled:focus-visible:color-mono-bold:outline-mono-bold-hover',\n 'enabled:pressed:color-mono-bold:fg-pressed enabled:pressed:color-mono-bold:bg-interactive-muted-pressed',\n\n // Mono Bold - Selected\n 'enabled:selected:color-mono-bold:fg-primary-bold enabled:selected:color-mono-bold:bg-interactive-muted-hover enabled:selected:color-mono-bold:outline enabled:selected:color-mono-bold:outline-mono-bold',\n 'enabled:selected:hover:color-mono-bold:fg-inverse-bold enabled:selected:hover:color-mono-bold:bg-interactive-bold-hover enabled:selected:hover:color-mono-bold:outline-2 enabled:selected:hover:color-mono-bold:outline-mono-bold-hover',\n 'enabled:selected:focus-visible:color-mono-bold:fg-inverse-bold enabled:selected:focus-visible:color-mono-bold:bg-interactive-muted-hover enabled:selected:focus-visible:color-mono-bold:outline-2 enabled:selected:focus-visible:color-mono-bold:outline-mono-bold-hover',\n 'enabled:selected:pressed:color-mono-bold:fg-pressed enabled:selected:pressed:color-mono-bold:bg-interactive-muted-pressed enabled:selected:pressed:color-mono-bold:outline-2 enabled:selected:pressed:color-mono-bold:outline-mono-bold-pressed',\n\n // Accent\n 'enabled:color-accent:fg-primary-bold enabled:color-accent:bg-transparent enabled:color-accent:outline enabled:color-accent:outline-mono-bold',\n 'enabled:hover:color-accent:fg-hover enabled:hover:color-accent:bg-accent-primary-muted enabled:hover:color-accent:outline-2 enabled:hover:color-accent:outline-accent-primary-hover',\n 'enabled:focus-visible:color-accent:fg-hover enabled:focus-visible:color-accent:bg-accent-primary-muted enabled:focus-visible:color-accent:outline-2 enabled:focus-visible:color-accent:outline-accent-primary-hover',\n 'enabled:pressed:color-accent:fg-pressed enabled:pressed:color-accent:bg-interactive-muted-pressed enabled:pressed:color-accent:outline-2 enabled:pressed:color-accent:outline-accent-primary-pressed',\n\n // Accent - Selected\n 'enabled:selected:color-accent:fg-primary-bold enabled:selected:color-accent:bg-accent-primary-muted enabled:color-accent:outline enabled:selected:color-accent:outline-accent-primary-bold',\n 'enabled:selected:hover:color-accent:fg-a11y-on-accent enabled:selected:hover:color-accent:bg-accent-primary-hover enabled:selected:hover:color-accent:outline-2 enabled:selected:hover:color-accent:outline-accent-primary-hover',\n 'enabled:selected:focus-visible:color-accent:fg-a11y-on-accent enabled:selected:focus-visible:color-accent:bg-accent-primary-hover enabled:selected:focus-visible:color-accent:outline-2 enabled:selected:focus-visible:color-accent:outline-accent-primary-hover',\n 'enabled:selected:pressed:color-accent:fg-accent-primary-pressed enabled:selected:pressed:color-accent:bg-accent-primary-pressed enabled:selected:pressed:color-accent:outline-2 enabled:selected:pressed:color-accent:outline-accent-primary-pressed',\n\n // Serious\n 'enabled:color-serious:fg-primary-bold enabled:color-serious:bg-transparent enabled:color-serious:outline enabled:color-serious:outline-serious-bold',\n 'enabled:hover:color-serious:fg-primary-bold enabled:hover:color-serious:bg-serious-bold enabled:hover:color-serious:outline-2 enabled:hover:color-serious:outline-serious-hover',\n 'enabled:focus-visible:color-serious:fg-primary-bold enabled:focus-visible:color-serious:bg-serious-muted enabled:focus-visible:color-serious:outline-2 enabled:focus-visible:color-serious:outline-serious-hover',\n 'enabled:pressed:color-serious:fg-serious-bold enabled:pressed:color-serious:bg-serious-pressed enabled:pressed:color-serious:outline-2 enabled:pressed:color-serious:outline-serious-pressed',\n\n // Serious - Selected\n 'enabled:selected:color-serious:fg-serious-bold enabled:selected:color-serious:bg-serious-muted enabled:selected:color-serious:outline-serious-muted',\n 'enabled:selected:hover:color-serious:fg-primary-bold enabled:selected:hover:color-serious:bg-serious-hover enabled:selected:hover:color-serious:outline-serious-hover',\n 'enabled:selected:focus-visible:color-serious:fg-primary-bold enabled:selected:focus-visible:color-serious:bg-serious-hover enabled:selected:focus-visible:color-serious:outline-serious-hover',\n 'enabled:selected:pressed:color-serious:fg-serious-pressed enabled:selected:pressed:color-serious:bg-serious-pressed enabled:selected:pressed:color-serious:outline-2 enabled:selected:pressed:color-serious:outline-serious-pressed',\n\n // Critical\n 'enabled:color-critical:fg-primary-bold enabled:color-critical:bg-transparent enabled:color-critical:outline enabled:color-critical:outline-critical-bold',\n 'enabled:hover:color-critical:fg-primary-bold enabled:hover:color-critical:bg-critical-bold enabled:hover:color-critical:outline-2 enabled:hover:color-critical:outline-critical-hover',\n 'enabled:focus-visible:color-critical:fg-primary-bold enabled:focus-visible:color-critical:bg-critical-muted enabled:focus-visible:color-critical:outline-2 enabled:focus-visible:color-critical:outline-critical-hover',\n 'enabled:pressed:color-critical:fg-critical-bold enabled:pressed:color-critical:bg-critical-pressed enabled:pressed:color-critical:outline-2 enabled:pressed:color-critical:outline-critical-pressed',\n\n // Critical - Selected\n 'enabled:selected:color-critical:fg-critical-bold enabled:selected:color-critical:bg-critical-muted enabled:selected:color-critical:outline-critical-muted',\n 'enabled:selected:hover:color-critical:fg-primary-bold enabled:selected:hover:color-critical:bg-critical-hover enabled:selected:hover:color-critical:outline-critical-hover',\n 'enabled:selected:focus-visible:color-critical:fg-primary-bold enabled:selected:focus-visible:color-critical:bg-critical-hover enabled:selected:focus-visible:color-critical:outline-critical-hover',\n 'enabled:selected:pressed:color-critical:fg-critical-pressed enabled:selected:pressed:color-critical:bg-critical-pressed enabled:selected:pressed:color-critical:outline-2 enabled:selected:pressed:color-critical:outline-critical-pressed',\n ],\n icon: [\n 'size-small:rounded-small size-xsmall:rounded-small size-large:p-xs size-medium:p-xs size-small:p-xxs size-xsmall:p-xxs',\n 'size-large:min-w-xxl size-large:max-w-xxl',\n 'size-medium:min-w-[28px] size-medium:max-w-[28px]',\n 'size-small:min-w-xl size-small:max-w-xl',\n 'size-xsmall:min-w-[20px] size-xsmall:max-w-[20px]',\n\n // Disabled\n 'disabled:fg-disabled disabled:bg-transparent',\n\n // Disabled - Selected\n 'disabled:selected:fg-disabled disabled:selected:bg-interactive-disabled',\n\n // Mono Muted\n 'enabled:color-mono-muted:fg-primary-muted',\n 'enabled:hover:color-mono-muted:bg-interactive-muted-hover',\n 'enabled:focus-visible:color-mono-muted:bg-interactive-muted-hover',\n 'enabled:pressed:color-mono-muted:fg-pressed enabled:pressed:color-mono-muted:bg-interactive-muted-pressed',\n\n // Mono Muted-Selected\n 'enabled:selected:color-mono-muted:fg-primary-muted enabled:selected:color-mono-muted:bg-interactive-muted',\n 'enabled:selected:hover:color-mono-muted:fg-primary-bold enabled:selected:hover:color-mono-muted:bg-interactive-muted-hover',\n 'enabled:selected:focus-visible:color-mono-muted:fg-primary-bold enabled:selected:focus-visible:color-mono-muted:bg-interactive-muted-hover',\n 'enabled:selected:pressed:color-mono-muted:fg-pressed enabled:selected:pressed:color-mono-muted:bg-interactive-muted-pressed',\n\n // Mono Bold\n 'enabled:color-mono-bold:fg-primary-bold',\n 'enabled:hover:color-mono-bold:bg-interactive-muted-hover',\n 'enabled:focus-visible:color-mono-bold:bg-interactive-muted-hover',\n 'enabled:pressed:color-mono-bold:fg-pressed enabled:pressed:color-mono-bold:bg-interactive-muted-pressed',\n\n // Mono Bold - Selected\n 'enabled:selected:color-mono-bold:fg-inverse-bold enabled:selected:color-mono-bold:bg-interactive-bold',\n 'enabled:selected:hover:color-mono-bold:fg-inverse-bold enabled:selected:hover:color-mono-bold:bg-interactive-bold-hover',\n 'enabled:selected:focus-visible:color-mono-bold:bg-interactive-bold-hover',\n 'enabled:selected:pressed:color-mono-bold:fg-pressed enabled:selected:pressed:color-mono-bold:bg-interactive-muted-pressed',\n\n // Accent\n 'enabled:color-accent:fg-primary-bold',\n 'enabled:hover:color-accent:fg-accent-primary-hover enabled:hover:color-accent:bg-accent-primary-muted',\n 'enabled:focus-visible:color-accent:fg-accent-primary-hover enabled:focus-visible:color-accent:bg-accent-primary-muted',\n 'enabled:pressed:color-accent:fg-accent-primary-pressed enabled:pressed:color-accent:bg-accent-primary-pressed',\n\n // Accent - Selected\n 'enabled:selected:color-accent:fg-accent-primary-hover enabled:selected:color-accent:bg-accent-primary-muted',\n 'enabled:selected:hover:color-accent:fg-a11y-on-accent enabled:selected:hover:color-accent:bg-accent-primary-hover',\n 'enabled:selected:focus-visible:color-accent:fg-a11y-on-accent enabled:selected:focus-visible:color-accent:bg-accent-primary-hover',\n 'enabled:selected:pressed:color-accent:fg-accent-primary-pressed enabled:selected:pressed:color-accent:bg-accent-primary-pressed',\n\n // Serious\n 'enabled:color-serious:fg-serious-bold',\n 'enabled:hover:color-serious:fg-serious-hover enabled:hover:color-serious:bg-serious-muted',\n 'enabled:focus-visible:color-serious:fg-serious-hover enabled:focus-visible:color-serious:bg-serious-muted',\n 'enabled:pressed:color-serious:fg-serious-pressed enabled:pressed:color-serious:bg-serious-pressed',\n\n // Serious - Selected\n 'enabled:selected:color-serious:fg-serious-bold enabled:selected:color-serious:bg-serious-muted',\n 'enabled:selected:hover:color-serious:fg-primary-bold enabled:selected:hover:color-serious:bg-serious-hover',\n 'enabled:selected:focus-visible:color-serious:fg-primary-bold enabled:selected:focus-visible:color-serious:bg-serious-hover',\n 'enabled:selected:pressed:color-serious:fg-serious-pressed enabled:selected:pressed:color-serious:bg-serious-pressed',\n\n // Critical\n 'enabled:color-critical:fg-critical-bold',\n 'enabled:hover:color-critical:fg-critical-hover enabled:hover:color-critical:bg-critical-muted',\n 'enabled:focus-visible:color-critical:fg-critical-hover enabled:focus-visible:color-critical:bg-critical-muted',\n 'enabled:pressed:color-critical:fg-critical-pressed enabled:pressed:color-critical:bg-critical-pressed',\n\n // Critical - Selected\n 'enabled:selected:color-critical:fg-critical-bold enabled:selected:color-critical:bg-critical-muted',\n 'enabled:selected:hover:color-critical:fg-a11y-on-accent enabled:selected:hover:color-critical:bg-critical-hover',\n 'enabled:selected:focus-visible:color-critical:fg-a11y-on-accent enabled:selected:focus-visible:color-critical:bg-critical-hover',\n 'enabled:selected:pressed:color-critical:fg-critical-pressed enabled:selected:pressed:color-critical:bg-critical-pressed',\n ],\n },\n },\n});\n"]}
|
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
import { ButtonProps as ButtonProps$1, LinkProps, ToggleButtonProps as ToggleButtonProps$1 } from 'react-aria-components';
|
|
2
2
|
import { VariantProps } from 'tailwind-variants';
|
|
3
3
|
import { AriaAttributesWithRef } from '../../lib/types.js';
|
|
4
|
-
import { ButtonStyles } from './styles.js';
|
|
4
|
+
import { ButtonStyles, ToggleButtonStyles } from './styles.js';
|
|
5
5
|
import 'react';
|
|
6
6
|
import 'tailwind-merge';
|
|
7
7
|
|
|
8
|
-
type
|
|
8
|
+
type ButtonVariantProps = {
|
|
9
9
|
size?: 'large' | 'medium' | 'small' | 'xsmall';
|
|
10
|
-
color?: '
|
|
10
|
+
color?: 'mono-muted' | 'mono-bold' | 'accent' | 'serious' | 'critical';
|
|
11
11
|
};
|
|
12
|
+
type ButtonStyleVariants = VariantProps<typeof ButtonStyles> & ButtonVariantProps;
|
|
13
|
+
type ToggleButtonStyleVariants = VariantProps<typeof ToggleButtonStyles> & ButtonVariantProps;
|
|
12
14
|
type ButtonProps = ButtonProps$1 & ButtonStyleVariants & AriaAttributesWithRef<HTMLButtonElement>;
|
|
13
15
|
type LinkButtonProps = LinkProps & ButtonStyleVariants & AriaAttributesWithRef<HTMLAnchorElement>;
|
|
14
|
-
type ToggleButtonProps = ToggleButtonProps$1 &
|
|
16
|
+
type ToggleButtonProps = ToggleButtonProps$1 & ToggleButtonStyleVariants & AriaAttributesWithRef<HTMLButtonElement>;
|
|
15
17
|
|
|
16
|
-
export type { ButtonProps, ButtonStyleVariants, LinkButtonProps, ToggleButtonProps };
|
|
18
|
+
export type { ButtonProps, ButtonStyleVariants, LinkButtonProps, ToggleButtonProps, ToggleButtonStyleVariants };
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ClockProps } from './types.js';
|
|
3
|
+
import 'react';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Clock - An auto-updating UTC time component.
|
|
7
|
+
*
|
|
8
|
+
* Uses a {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat|DateTimeFormat} configured with `'en-US', { timeStyle: 'long, timeZone: 'UTC', hour12: false }` by default,
|
|
9
|
+
* but can be overridden with the `formatter` prop.
|
|
10
|
+
*
|
|
11
|
+
* NOTE: This component comes **unstyled by default**.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* // Standard Clock
|
|
15
|
+
* <Clock /> // <time>15:54:14 UTC</time>
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* // Styled
|
|
19
|
+
* <Clock className="fg-accent-primary-bold" />
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* // Custom Format
|
|
23
|
+
* const formatter = new Intl.DateTimeFormat('en-US', {
|
|
24
|
+
* dateStyle: "short",
|
|
25
|
+
* timeStyle: 'long',
|
|
26
|
+
* timeZone: 'UTC',
|
|
27
|
+
* hour12: false
|
|
28
|
+
* });
|
|
29
|
+
*
|
|
30
|
+
* <Clock formatter={formatter} /> // <time>9/30/25, 15:54:14 UTC</time>
|
|
31
|
+
*
|
|
32
|
+
* @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat| DateTimeFormat MDN}
|
|
33
|
+
*/
|
|
34
|
+
declare function Clock({ formatter, ...rest }: ClockProps): react_jsx_runtime.JSX.Element;
|
|
35
|
+
declare namespace Clock {
|
|
36
|
+
var displayName: string;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
export { Clock };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import {jsx}from'react/jsx-runtime';import'client-only';import {setClockInterval}from'@accelint/temporal';import {useCallback,useState,useEffect}from'react';const c=new Intl.DateTimeFormat("en-US",{timeStyle:"long",timeZone:"UTC",hour12:false});function p({formatter:e=c,...o}){const t=useCallback(()=>e.format(Date.now()),[e]),[m,n]=useState(t());return useEffect(()=>setClockInterval(()=>n(t()),1e3),[t]),jsx("time",{...o,children:m})}p.displayName="Clock";export{p as Clock};//# sourceMappingURL=index.js.map
|
|
4
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/clock/index.tsx"],"names":["DEFAULT_FORMATTER","Clock","formatter","rest","now","useCallback","time","setTime","useState","useEffect","setClockInterval","jsx"],"mappings":"6JAkBA,MAAMA,EAAoB,IAAI,IAAA,CAAK,cAAA,CAAe,OAAA,CAAS,CACzD,SAAA,CAAW,MAAA,CACX,SAAU,KAAA,CACV,MAAA,CAAQ,KACV,CAAC,CAAA,CA+BM,SAASC,CAAAA,CAAM,CAAE,UAAAC,CAAAA,CAAYF,CAAAA,CAAmB,GAAGG,CAAK,CAAA,CAAe,CAC5E,MAAMC,CAAAA,CAAMC,WAAAA,CAAY,IAAMH,EAAU,MAAA,CAAO,IAAA,CAAK,KAAK,CAAA,CAAG,CAACA,CAAS,CAAC,EAEjE,CAACI,CAAAA,CAAMC,CAAO,CAAA,CAAIC,QAAAA,CAAiBJ,GAAK,CAAA,CAE9C,OAAAK,SAAAA,CAAU,IAAMC,gBAAAA,CAAiB,IAAMH,EAAQH,CAAAA,EAAK,EAAG,GAAI,CAAA,CAAG,CAACA,CAAG,CAAC,EAE5DO,GAAAA,CAAC,MAAA,CAAA,CAAM,GAAGR,CAAAA,CAAO,QAAA,CAAAG,EAAK,CAC/B,CACAL,EAAM,WAAA,CAAc,OAAA","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { setClockInterval } from '@accelint/temporal';\nimport { useCallback, useEffect, useState } from 'react';\nimport type { ClockProps } from './types';\n\nconst DEFAULT_FORMATTER = new Intl.DateTimeFormat('en-US', {\n timeStyle: 'long',\n timeZone: 'UTC',\n hour12: false,\n});\n\n/**\n * Clock - An auto-updating UTC time component.\n *\n * Uses a {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat|DateTimeFormat} configured with `'en-US', { timeStyle: 'long, timeZone: 'UTC', hour12: false }` by default,\n * but can be overridden with the `formatter` prop.\n *\n * NOTE: This component comes **unstyled by default**.\n *\n * @example\n * // Standard Clock\n * <Clock /> // <time>15:54:14 UTC</time>\n *\n * @example\n * // Styled\n * <Clock className=\"fg-accent-primary-bold\" />\n *\n * @example\n * // Custom Format\n * const formatter = new Intl.DateTimeFormat('en-US', {\n * dateStyle: \"short\",\n * timeStyle: 'long',\n * timeZone: 'UTC',\n * hour12: false\n * });\n *\n * <Clock formatter={formatter} /> // <time>9/30/25, 15:54:14 UTC</time>\n *\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat| DateTimeFormat MDN}\n */\nexport function Clock({ formatter = DEFAULT_FORMATTER, ...rest }: ClockProps) {\n const now = useCallback(() => formatter.format(Date.now()), [formatter]);\n\n const [time, setTime] = useState<string>(now());\n\n useEffect(() => setClockInterval(() => setTime(now()), 1000), [now]);\n\n return <time {...rest}>{time}</time>;\n}\nClock.displayName = 'Clock';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"types.js"}
|
|
@@ -4,17 +4,17 @@ import * as tailwind_merge from 'tailwind-merge';
|
|
|
4
4
|
declare const ColorPickerStyles: tailwind_variants.TVReturnType<{
|
|
5
5
|
[key: string]: {
|
|
6
6
|
[key: string]: tailwind_merge.ClassNameValue | {
|
|
7
|
+
item?: tailwind_merge.ClassNameValue;
|
|
7
8
|
picker?: tailwind_merge.ClassNameValue;
|
|
8
9
|
swatch?: tailwind_merge.ClassNameValue;
|
|
9
|
-
item?: tailwind_merge.ClassNameValue;
|
|
10
10
|
};
|
|
11
11
|
};
|
|
12
12
|
} | {
|
|
13
13
|
[x: string]: {
|
|
14
14
|
[x: string]: tailwind_merge.ClassNameValue | {
|
|
15
|
+
item?: tailwind_merge.ClassNameValue;
|
|
15
16
|
picker?: tailwind_merge.ClassNameValue;
|
|
16
17
|
swatch?: tailwind_merge.ClassNameValue;
|
|
17
|
-
item?: tailwind_merge.ClassNameValue;
|
|
18
18
|
};
|
|
19
19
|
};
|
|
20
20
|
} | {}, {
|
|
@@ -24,9 +24,9 @@ declare const ColorPickerStyles: tailwind_variants.TVReturnType<{
|
|
|
24
24
|
}, undefined, {
|
|
25
25
|
[key: string]: {
|
|
26
26
|
[key: string]: tailwind_merge.ClassNameValue | {
|
|
27
|
+
item?: tailwind_merge.ClassNameValue;
|
|
27
28
|
picker?: tailwind_merge.ClassNameValue;
|
|
28
29
|
swatch?: tailwind_merge.ClassNameValue;
|
|
29
|
-
item?: tailwind_merge.ClassNameValue;
|
|
30
30
|
};
|
|
31
31
|
};
|
|
32
32
|
} | {}, {
|
|
@@ -11,6 +11,17 @@ import '../button/styles.js';
|
|
|
11
11
|
import 'tailwind-merge';
|
|
12
12
|
|
|
13
13
|
declare const ComboBoxFieldContext: react.Context<ContextValue<ComboBoxFieldProps<any>, HTMLDivElement>>;
|
|
14
|
+
/**
|
|
15
|
+
* ComboBoxField - Accessible searchable combobox with dropdown options
|
|
16
|
+
*
|
|
17
|
+
* A combobox field that provides a searchable input with virtualized dropdown
|
|
18
|
+
* options and support for sections, icons, and rich content.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* <ComboBoxField defaultItems={items}>
|
|
22
|
+
* {(item) => <Options.Item key={item.id} textValue={item.name}>{item.name}</Options.Item>}
|
|
23
|
+
* </ComboBoxField>
|
|
24
|
+
*/
|
|
14
25
|
declare function ComboBoxField<T extends OptionsDataItem>({ ref, ...props }: ComboBoxFieldProps<T>): react_jsx_runtime.JSX.Element;
|
|
15
26
|
declare namespace ComboBoxField {
|
|
16
27
|
var displayName: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/combobox-field/index.tsx"],"names":["input","trigger","description","error","ComboBoxStyles","ComboBoxFieldProvider","k","children","props","ComboBoxFieldContext","labelProp","isInvalidProp","errorMessageProp","size","jsx","ComboBox","rest","ref","composeRenderProps","o","I","className","s","menuTrigger","errorMessage","isInvalid","Fragment","u","X","label","classNames","R","isDisabled","isRequired","control","D","Button","T","Icon","h","descriptionProp","g","M","FieldError","O","popover","z","L","S"],"mappings":"2bAqC+BA,MAAAA,CAAO,KAAA,CAAA,CAAA,CAAAC,KAAS,CAAA,CAAA,CAAA,OAAAC,CAAa,OAAAC,CAAO,CAAA,CAAA,OAAQ,CAAA,CACzEC,CAAAA,WAIyE,CAAA,CAE3E,CAAA,KAAA,CAAA,CAAA,CAASC,OACP,CAAA,CAAA,CAAA,CAAAC,cAAAC,EACA,CAAA,CAAA,CAAGC,aACL,CAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/combobox-field/index.tsx"],"names":["input","trigger","description","error","ComboBoxStyles","ComboBoxFieldProvider","k","children","props","ComboBoxFieldContext","labelProp","isInvalidProp","errorMessageProp","size","jsx","ComboBox","rest","ref","composeRenderProps","o","I","className","s","menuTrigger","errorMessage","isInvalid","Fragment","u","X","label","classNames","R","isDisabled","isRequired","control","D","Button","T","Icon","h","descriptionProp","g","M","FieldError","O","popover","z","L","S"],"mappings":"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","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { ChevronDown } from '@accelint/icons';\nimport { createContext } from 'react';\nimport {\n Button,\n ComboBox,\n type ContextValue,\n composeRenderProps,\n FieldError,\n Input,\n ListLayout,\n Popover,\n Text,\n useContextProps,\n Virtualizer,\n} from 'react-aria-components';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport { Options } from '../options';\nimport { ComboBoxStyles } from './styles';\nimport type { ProviderProps } from '@/lib/types';\nimport type { OptionsDataItem } from '../options/types';\nimport type { ComboBoxFieldProps } from './types';\n\nconst { field, label, control, input, trigger, description, error, popover } =\n ComboBoxStyles();\n\nexport const ComboBoxFieldContext =\n // biome-ignore lint/suspicious/noExplicitAny: Setting a type would restrict it beyond what the component allows to extend to\n createContext<ContextValue<ComboBoxFieldProps<any>, HTMLDivElement>>(null);\n\nfunction ComboBoxFieldProvider<T extends OptionsDataItem>({\n children,\n ...props\n}: ProviderProps<ComboBoxFieldProps<T>>) {\n return (\n <ComboBoxFieldContext.Provider value={props}>\n {children}\n </ComboBoxFieldContext.Provider>\n );\n}\nComboBoxFieldProvider.displayName = 'ComboBoxField.Provider';\n\n/**\n * ComboBoxField - Accessible searchable combobox with dropdown options\n *\n * A combobox field that provides a searchable input with virtualized dropdown\n * options and support for sections, icons, and rich content.\n *\n * @example\n * <ComboBoxField defaultItems={items}>\n * {(item) => <Options.Item key={item.id} textValue={item.name}>{item.name}</Options.Item>}\n * </ComboBoxField>\n */\nexport function ComboBoxField<T extends OptionsDataItem>({\n ref,\n ...props\n}: ComboBoxFieldProps<T>) {\n [props, ref] = useContextProps(props, ref ?? null, ComboBoxFieldContext);\n\n const {\n children,\n classNames,\n description: descriptionProp,\n errorMessage: errorMessageProp,\n inputProps,\n label: labelProp,\n layoutOptions,\n menuTrigger = 'focus',\n size = 'medium',\n isInvalid: isInvalidProp,\n ...rest\n } = props;\n const errorMessage = errorMessageProp || null; // Protect against empty string\n const isSmall = size === 'small';\n\n return (\n <ComboBox<T>\n {...rest}\n ref={ref}\n className={composeRenderProps(classNames?.field, (className) =>\n field({ className }),\n )}\n menuTrigger={menuTrigger}\n isInvalid={isInvalidProp || (errorMessage ? true : undefined)} // Leave uncontrolled if possible to fallback to validation state\n data-size={size}\n >\n {(\n { isDisabled, isInvalid, isRequired }, // Rely on internal state, not props, since state could differ from props\n ) => (\n <>\n {!!labelProp && !isSmall && (\n <Label\n className={label({ className: classNames?.label })}\n isDisabled={isDisabled}\n isRequired={isRequired}\n >\n {labelProp}\n </Label>\n )}\n <div className={control({ className: classNames?.control })}>\n <Input\n {...inputProps}\n className={composeRenderProps(classNames?.input, (className) =>\n input({ className }),\n )}\n />\n <Button\n className={composeRenderProps(classNames?.trigger, (className) =>\n trigger({ className }),\n )}\n >\n <Icon size='small'>\n <ChevronDown />\n </Icon>\n </Button>\n </div>\n {!!descriptionProp && !(isSmall || isInvalid) && (\n <Text\n className={description({\n className: classNames?.description,\n })}\n slot='description'\n >\n {descriptionProp}\n </Text>\n )}\n <FieldError\n className={composeRenderProps(classNames?.error, (className) =>\n error({ className }),\n )}\n >\n {errorMessage}\n </FieldError>\n <Popover\n className={composeRenderProps(classNames?.popover, (className) =>\n popover({ className }),\n )}\n >\n <Virtualizer layout={ListLayout} layoutOptions={layoutOptions}>\n <Options>{children}</Options>\n </Virtualizer>\n </Popover>\n </>\n )}\n </ComboBox>\n );\n}\nComboBoxField.displayName = 'ComboBox';\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {tv}from'./../../lib/utils.js';const i=tv({slots:{field:"group/combobox-field flex flex-col gap-xs",label:"",control:["flex items-center rounded-medium px-s py-xs outline","group-size-medium/combobox-field:min-w-[160px] group-size-medium/combobox-field:max-w-[400px]","group-size-small/combobox-field:min-w-[80px] group-size-small/combobox-field:max-w-[200px]","group-enabled/combobox-field:fg-primary-bold group-enabled/combobox-field:outline-interactive","group-enabled/combobox-field:placeholder:fg-primary-muted","group-enabled/combobox-field:focus-visible-within:outline-accent-primary-bold","group-enabled/combobox-field:
|
|
1
|
+
import {tv}from'./../../lib/utils.js';const i=tv({slots:{field:"group/combobox-field flex flex-col gap-xs",label:"",control:["flex items-center rounded-medium px-s py-xs outline","group-size-medium/combobox-field:min-w-[160px] group-size-medium/combobox-field:max-w-[400px]","group-size-small/combobox-field:min-w-[80px] group-size-small/combobox-field:max-w-[200px]","group-enabled/combobox-field:fg-primary-bold group-enabled/combobox-field:outline-interactive","group-enabled/combobox-field:placeholder:fg-primary-muted","group-enabled/combobox-field:hover:outline-interactive-hover","group-enabled/combobox-field:focus-visible:outline-interactive-hover","group-enabled/combobox-field:focus-within:outline-accent-primary-bold","group-enabled/combobox-field:pressed:outline-interactive-pressed","group-enabled/combobox-field:group-invalid/combobox-field:outline-serious-bold","group-disabled/combobox-field:fg-disabled group-disabled/combobox-field:outline-interactive-disabled"],input:["grow font-display outline-none","group-size-medium/combobox-field:text-body-s","group-size-small/combobox-field:text-body-xs"],trigger:["fg-primary-bold","group-open/combobox-field:rotate-180 group-open/combobox-field:transform","group-disabled/combobox-field:fg-disabled"],description:["fg-primary-muted text-body-xs","group-disabled/combobox-field:fg-disabled"],error:"fg-serious-bold text-body-xs",popover:"-ml-s min-w-[calc(var(--trigger-width)+(var(--spacing-s)*2))]"}});export{i as ComboBoxStyles};//# sourceMappingURL=styles.js.map
|
|
2
2
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/combobox-field/styles.ts"],"names":["o"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/combobox-field/styles.ts"],"names":["o"],"mappings":"sCAeE,MAAA,CAAO,CACLA,EAAA,CAAA,CAAA,KAAO,CAAA,CAAA,KAAA,CAAA,2CAEP,CAAA,KAAA,CAAA,EACE,CAAA,OAAA,CAAA,CAAA,qDACA,CAAA,4LAEA,CAAA,+FACA,CAAA,2DACA,CAAA,8DACA,CAAA,sEACA,CAAA,uEACA,CAAA,mJAEA,CAAA,sGAGA,CAAA,CAAA,KAAA,CAAA,CAAA,+EAEA,CAAA,8CAEO,CACP,CAAA,OAAA,CAAA,CAAA,iBACA,CAAA,sHAGF,CAAA,CAAA,WACE,CAAA,CAAA,+BACA,CAAA,2CAEK,CAAA,CAAA,KAAA,CAAA,8BACE,CAAA,OAAA,CAAA,+DAEZ,CAAA,CAAA","file":"styles.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { tv } from '@/lib/utils';\n\nexport const ComboBoxStyles = tv({\n slots: {\n field: 'group/combobox-field flex flex-col gap-xs',\n label: '',\n control: [\n 'flex items-center rounded-medium px-s py-xs outline',\n 'group-size-medium/combobox-field:min-w-[160px] group-size-medium/combobox-field:max-w-[400px]',\n 'group-size-small/combobox-field:min-w-[80px] group-size-small/combobox-field:max-w-[200px]',\n 'group-enabled/combobox-field:fg-primary-bold group-enabled/combobox-field:outline-interactive',\n 'group-enabled/combobox-field:placeholder:fg-primary-muted',\n 'group-enabled/combobox-field:hover:outline-interactive-hover',\n 'group-enabled/combobox-field:focus-visible:outline-interactive-hover',\n 'group-enabled/combobox-field:focus-within:outline-accent-primary-bold',\n 'group-enabled/combobox-field:pressed:outline-interactive-pressed',\n 'group-enabled/combobox-field:group-invalid/combobox-field:outline-serious-bold',\n 'group-disabled/combobox-field:fg-disabled group-disabled/combobox-field:outline-interactive-disabled',\n ],\n input: [\n 'grow font-display outline-none',\n 'group-size-medium/combobox-field:text-body-s',\n 'group-size-small/combobox-field:text-body-xs',\n ],\n trigger: [\n 'fg-primary-bold',\n 'group-open/combobox-field:rotate-180 group-open/combobox-field:transform',\n 'group-disabled/combobox-field:fg-disabled',\n ],\n description: [\n 'fg-primary-muted text-body-xs',\n 'group-disabled/combobox-field:fg-disabled',\n ],\n error: 'fg-serious-bold text-body-xs',\n popover: '-ml-s min-w-[calc(var(--trigger-width)+(var(--spacing-s)*2))]',\n },\n});\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import {jsx}from'react/jsx-runtime';import'client-only';import {
|
|
3
|
+
import {jsx}from'react/jsx-runtime';import'client-only';import {createContext,useContext}from'react';import {useContextProps,ModalOverlay,composeRenderProps,Modal,Dialog,DialogTrigger,Heading,OverlayTriggerStateContext}from'react-aria-components';import {isSlottedContextValue}from'./../../lib/utils.js';import {PortalProvider}from'./../../providers/portal.js';import {ButtonContext}from'../button/index.js';import {DialogStyles}from'./styles.js';const {overlay:O,modal:R,dialog:S,title:V,content:A,footer:B}=DialogStyles(),s=createContext(null);function g({children:e,className:o}){return jsx(Heading,{slot:"title",className:V({className:o}),children:e})}g.displayName="Dialog.Title";function p({children:e,className:o}){return jsx("div",{className:A({className:o}),children:e})}p.displayName="Dialog.Content";function c({children:e,className:o}){const r=useContext(s),a=(isSlottedContextValue(r)?null:r?.size)??"small",i=useContext(OverlayTriggerStateContext);return jsx("footer",{className:B({className:o}),children:jsx(ButtonContext.Provider,{value:{size:a,onPress:i?.close??(()=>{})},children:e})})}c.displayName="Dialog.Footer";function l({ref:e,...o}){[o,e]=useContextProps(o,e??null,s);const{children:r,classNames:a,parentRef:i,size:u="small",...D}=o;return jsx(s.Provider,{value:o,children:jsx(PortalProvider,{parentRef:i,children:jsx(ModalOverlay,{...D,ref:e,className:composeRenderProps(a?.overlay,n=>O({className:n})),"data-size":u,children:jsx(Modal,{className:composeRenderProps(a?.modal,n=>R({className:n})),children:jsx(Dialog,{className:S({className:a?.dialog}),children:r})})})})})}l.displayName="Dialog",l.Trigger=DialogTrigger,l.Title=g,l.Content=p,l.Footer=c;export{l as Dialog,s as DialogContext};//# sourceMappingURL=index.js.map
|
|
4
4
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/dialog/index.tsx"],"names":["title","
|
|
1
|
+
{"version":3,"sources":["../../../src/components/dialog/index.tsx"],"names":["title","content","footer","DialogContext","createContext","DialogTitle","F","children","jsx","Heading","t","C","className","context","useContext","m","state","OverlayTriggerStateContext","N","DialogFooter","ref","props","T","parentRef","size","PortalProvider","rest","M","x","overlay","d","y","AriaDialog","f","Dialog","DialogTrigger","DialogContent"],"mappings":"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","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { type ComponentProps, createContext, useContext } from 'react';\nimport {\n Dialog as AriaDialog,\n type ContextValue,\n composeRenderProps,\n DialogTrigger,\n Heading,\n type HeadingProps,\n Modal,\n ModalOverlay,\n OverlayTriggerStateContext,\n useContextProps,\n} from 'react-aria-components';\nimport { isSlottedContextValue } from '@/lib/utils';\nimport { PortalProvider } from '@/providers/portal';\nimport { ButtonContext } from '../button';\nimport { DialogStyles } from './styles';\nimport type { DialogProps } from './types';\n\nconst { overlay, modal, dialog, title, content, footer } = DialogStyles();\n\nexport const DialogContext =\n createContext<ContextValue<DialogProps, HTMLDivElement>>(null);\n\nfunction DialogTitle({ children, className }: HeadingProps) {\n return (\n <Heading slot='title' className={title({ className })}>\n {children}\n </Heading>\n );\n}\nDialogTitle.displayName = 'Dialog.Title';\n\nfunction DialogContent({ children, className }: ComponentProps<'div'>) {\n return <div className={content({ className })}>{children}</div>;\n}\nDialogContent.displayName = 'Dialog.Content';\n\nfunction DialogFooter({ children, className }: ComponentProps<'footer'>) {\n const context = useContext(DialogContext);\n const size =\n (isSlottedContextValue(context) ? null : context?.size) ?? 'small';\n const state = useContext(OverlayTriggerStateContext);\n\n return (\n <footer className={footer({ className })}>\n <ButtonContext.Provider\n value={{\n size,\n onPress: state?.close ?? (() => undefined),\n }}\n >\n {children}\n </ButtonContext.Provider>\n </footer>\n );\n}\n\nDialogFooter.displayName = 'Dialog.Footer';\n\n/**\n * Dialog - A modal dialog component for important content and interactions\n *\n * Provides accessible modal functionality with focus management, backdrop handling,\n * and keyboard navigation. Supports multiple sizes and customizable dismissal behavior.\n * Perfect for confirmations, forms, or any content requiring user focus.\n *\n * @example\n * // Basic dialog with trigger\n * <Dialog.Trigger>\n * <Button>Open Dialog</Button>\n * <Dialog>\n * {({ close }) => (\n * <>\n * <Dialog.Title>Confirm Action</Dialog.Title>\n * <p>Are you sure you want to continue?</p>\n * <Dialog.Footer>\n * <Dialog.Button onPress={close}>Confirm</Dialog.Button>\n * </Dialog.Footer>\n * </>\n * )}\n * </Dialog>\n * </Dialog.Trigger>\n */\nexport function Dialog({ ref, ...props }: DialogProps) {\n [props, ref] = useContextProps(props, ref ?? null, DialogContext);\n\n const { children, classNames, parentRef, size = 'small', ...rest } = props;\n\n return (\n <DialogContext.Provider value={props}>\n <PortalProvider parentRef={parentRef}>\n <ModalOverlay\n {...rest}\n ref={ref}\n className={composeRenderProps(classNames?.overlay, (className) =>\n overlay({ className }),\n )}\n data-size={size}\n >\n <Modal\n className={composeRenderProps(classNames?.modal, (className) =>\n modal({ className }),\n )}\n >\n <AriaDialog className={dialog({ className: classNames?.dialog })}>\n {children}\n </AriaDialog>\n </Modal>\n </ModalOverlay>\n </PortalProvider>\n </DialogContext.Provider>\n );\n}\nDialog.displayName = 'Dialog';\nDialog.Trigger = DialogTrigger;\nDialog.Title = DialogTitle;\nDialog.Content = DialogContent;\nDialog.Footer = DialogFooter;\n"]}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
import { ContextValue } from 'react-aria-components';
|
|
4
|
+
import { ProviderProps } from '../../lib/types.js';
|
|
5
|
+
import { DividerProps } from './types.js';
|
|
6
|
+
|
|
7
|
+
declare const DividerContext: react.Context<ContextValue<DividerProps, HTMLHRElement>>;
|
|
8
|
+
declare function DividerProvider({ children, ...props }: ProviderProps<DividerProps>): react_jsx_runtime.JSX.Element;
|
|
9
|
+
declare namespace DividerProvider {
|
|
10
|
+
var displayName: string;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Divider - A simple horizontal or vertical rule component
|
|
14
|
+
*
|
|
15
|
+
* Provides a visual separator between content sections with support for both
|
|
16
|
+
* horizontal and vertical orientations.
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* // Basic horizontal divider
|
|
20
|
+
* <Divider />
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* // Vertical divider
|
|
24
|
+
* <Divider orientation="vertical" />
|
|
25
|
+
*/
|
|
26
|
+
declare function Divider({ ref, ...props }: DividerProps): react_jsx_runtime.JSX.Element;
|
|
27
|
+
declare namespace Divider {
|
|
28
|
+
var displayName: string;
|
|
29
|
+
var Provider: typeof DividerProvider;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export { Divider, DividerContext };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import {jsx}from'react/jsx-runtime';import'client-only';import {createContext}from'react';import {useContextProps}from'react-aria-components';import {DividerStyles}from'./styles.js';const i=createContext(null);function o({children:r,...e}){return jsx(i.Provider,{value:e,children:r})}o.displayName="Divider.Provider";function t({ref:r,...e}){[e,r]=useContextProps(e,r??null,i);const{className:d,orientation:v="horizontal",...p}=e;return jsx("hr",{...p,ref:r,className:DividerStyles({className:d}),"data-orientation":v})}t.displayName="Divider",t.Provider=o;export{t as Divider,i as DividerContext};//# sourceMappingURL=index.js.map
|
|
4
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/divider/index.tsx"],"names":["createContext","s","props","n","DividerProvider","ref","useContextProps","rest","l","Divider"],"mappings":"sLAsBEA,MAAyD,CAAA,CAAAC,aAAA,CAAI,IAE/D,EAAA,SAA2B,CAAA,CAAA,CAAA,UAAaC,CAAM,GAC5C,CAAA,CAAA,CAAA,CAAA,OACkBC,GAAA,CAAA,CAAA,CAAA,eAAwB,CAAA,CAAA,CAAA,QAE5C,CACAC,EAAgB,CAAA,CAAA,CAAA,CAAA,WAAc,CAAA,kBAgBvB,CAAA,SAAmB,CAAA,CAAA,CAAAC,GAAK,CAAA,CAAGH,CAAM,GACtC,CAACA,EAAOG,CAAG,CAAA,CAAIC,EAAgBJ,CAAAA,CAAOG,eAAAA,CAAAA,CAAO,QAE7C,SAAQ,CAAA,SAAW,CAAA,CAAA,CAAA,WAAc,CAAA,CAAA,CAAA,YAAiBE,CAAK,IAEvD,CAAA,CAAA,CAAA,CAAA,eAEK,CAAGA,CAAAA,KACCF,GACL,CAAA,CAAA,CAAA,SAA2B,CAAAG,aAAA,CAAA,CAAA,SAAW,CACtC,sBAGN,CACAC,CAAAA,CAAQ,CAAA,CAAA,CAAA,CAAA,WAAc,CAAA,SACd,CAAA,CAAA,CAAA,QAAWL,CAAAA,CAAAA","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { createContext } from 'react';\nimport { type ContextValue, useContextProps } from 'react-aria-components';\nimport { DividerStyles } from './styles';\nimport type { ProviderProps } from '@/lib/types';\nimport type { DividerProps } from './types';\n\nexport const DividerContext =\n createContext<ContextValue<DividerProps, HTMLHRElement>>(null);\n\nfunction DividerProvider({ children, ...props }: ProviderProps<DividerProps>) {\n return (\n <DividerContext.Provider value={props}>{children}</DividerContext.Provider>\n );\n}\nDividerProvider.displayName = 'Divider.Provider';\n\n/**\n * Divider - A simple horizontal or vertical rule component\n *\n * Provides a visual separator between content sections with support for both\n * horizontal and vertical orientations.\n *\n * @example\n * // Basic horizontal divider\n * <Divider />\n *\n * @example\n * // Vertical divider\n * <Divider orientation=\"vertical\" />\n */\nexport function Divider({ ref, ...props }: DividerProps) {\n [props, ref] = useContextProps(props, ref ?? null, DividerContext);\n\n const { className, orientation = 'horizontal', ...rest } = props;\n\n return (\n <hr\n {...rest}\n ref={ref}\n className={DividerStyles({ className })}\n data-orientation={orientation}\n />\n );\n}\nDivider.displayName = 'Divider';\nDivider.Provider = DividerProvider;\n"]}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import * as tailwind_variants from 'tailwind-variants';
|
|
2
|
+
|
|
3
|
+
declare const DividerStyles: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], unknown, unknown>>;
|
|
4
|
+
|
|
5
|
+
export { DividerStyles };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {tv}from'./../../lib/utils.js';const e=tv({base:["shrink-0 grow-0 border-0 bg-[var(--outline-static)]","orientation-horizontal:h-px orientation-horizontal:w-full","orientation-vertical:h-full orientation-vertical:w-px","[&:where(.flex>&)]:self-stretch","[&:where(.flex>&)]:orientation-horizontal:w-auto","[&:where(.flex>&)]:orientation-vertical:h-auto"]});export{e as DividerStyles};//# sourceMappingURL=styles.js.map
|
|
2
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/divider/styles.ts"],"names":["t"],"mappings":"sCAeE,MAAM,CACJ,CAAAA,EAAA,CAAA,CAAA,IAAA,CAAA,CAAA,iHAEA,CAAA,uDAEA,CAAA,iCACA,CAAA,kDACA,CAAA,gDAEH,CAAA,CAAA","file":"styles.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { tv } from '@/lib/utils';\n\nexport const DividerStyles = tv({\n base: [\n 'shrink-0 grow-0 border-0 bg-[var(--outline-static)]',\n 'orientation-horizontal:h-px orientation-horizontal:w-full',\n 'orientation-vertical:h-full orientation-vertical:w-px',\n // CSS flexbox breaks height: 100%, so we utilize align-self: stretch & height: auto instead. While width isn't broken, for consistency it's implemented the same way\n '[&:where(.flex>&)]:self-stretch',\n '[&:where(.flex>&)]:orientation-horizontal:w-auto',\n '[&:where(.flex>&)]:orientation-vertical:h-auto',\n ],\n});\n"]}
|