@epilot/zenith-react 0.1.0 → 0.2.0-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +34 -0
- package/dist/components/accordion/accordion.js +57 -48
- package/dist/components/accordion/accordion.js.map +1 -1
- package/dist/components/alert-dialog/alert-dialog.js +120 -91
- package/dist/components/alert-dialog/alert-dialog.js.map +1 -1
- package/dist/components/avatar/avatar-group.js +38 -35
- package/dist/components/avatar/avatar-group.js.map +1 -1
- package/dist/components/avatar/avatar.js +78 -71
- package/dist/components/avatar/avatar.js.map +1 -1
- package/dist/components/badge/badge.js +60 -55
- package/dist/components/badge/badge.js.map +1 -1
- package/dist/components/breadcrumb/breadcrumb.js +99 -54
- package/dist/components/breadcrumb/breadcrumb.js.map +1 -1
- package/dist/components/button/button.js +87 -77
- package/dist/components/button/button.js.map +1 -1
- package/dist/components/button-group/button-group.js +36 -32
- package/dist/components/button-group/button-group.js.map +1 -1
- package/dist/components/callout/callout.js +113 -104
- package/dist/components/callout/callout.js.map +1 -1
- package/dist/components/card/card.js +62 -52
- package/dist/components/card/card.js.map +1 -1
- package/dist/components/checkbox/checkbox.js +22 -19
- package/dist/components/checkbox/checkbox.js.map +1 -1
- package/dist/components/code-block/code-block.js +135 -123
- package/dist/components/code-block/code-block.js.map +1 -1
- package/dist/components/code-editor/code-editor.js +276 -260
- package/dist/components/code-editor/code-editor.js.map +1 -1
- package/dist/components/collapsible-sidebar/collapsible-sidebar.js +62 -56
- package/dist/components/collapsible-sidebar/collapsible-sidebar.js.map +1 -1
- package/dist/components/command/command.js +116 -105
- package/dist/components/command/command.js.map +1 -1
- package/dist/components/data-table/data-table-body.js +38 -34
- package/dist/components/data-table/data-table-body.js.map +1 -1
- package/dist/components/data-table/data-table-column-header.js +30 -26
- package/dist/components/data-table/data-table-column-header.js.map +1 -1
- package/dist/components/data-table/data-table-column-order.js +79 -73
- package/dist/components/data-table/data-table-column-order.js.map +1 -1
- package/dist/components/data-table/data-table-column-visibility.js +25 -22
- package/dist/components/data-table/data-table-column-visibility.js.map +1 -1
- package/dist/components/data-table/data-table-content.js +47 -44
- package/dist/components/data-table/data-table-content.js.map +1 -1
- package/dist/components/data-table/data-table-error.js +36 -32
- package/dist/components/data-table/data-table-error.js.map +1 -1
- package/dist/components/data-table/data-table-footer.js +10 -8
- package/dist/components/data-table/data-table-footer.js.map +1 -1
- package/dist/components/data-table/data-table-header-draggable.js +40 -36
- package/dist/components/data-table/data-table-header-draggable.js.map +1 -1
- package/dist/components/data-table/data-table-loading.js +21 -18
- package/dist/components/data-table/data-table-loading.js.map +1 -1
- package/dist/components/data-table/data-table-resize-handle.js +13 -11
- package/dist/components/data-table/data-table-resize-handle.js.map +1 -1
- package/dist/components/data-table/data-table-row.js +47 -44
- package/dist/components/data-table/data-table-row.js.map +1 -1
- package/dist/components/data-table/data-table-toolbar.js +9 -7
- package/dist/components/data-table/data-table-toolbar.js.map +1 -1
- package/dist/components/data-table/data-table.js +48 -46
- package/dist/components/data-table/data-table.js.map +1 -1
- package/dist/components/date-range-picker/date-range-picker.js +212 -193
- package/dist/components/date-range-picker/date-range-picker.js.map +1 -1
- package/dist/components/date-range-picker/range-calendar.js +36 -34
- package/dist/components/date-range-picker/range-calendar.js.map +1 -1
- package/dist/components/date-time-picker/calendar.js +290 -272
- package/dist/components/date-time-picker/calendar.js.map +1 -1
- package/dist/components/date-time-picker/date-time-picker-input.js +127 -112
- package/dist/components/date-time-picker/date-time-picker-input.js.map +1 -1
- package/dist/components/date-time-picker/date-time-picker-panel.js +126 -120
- package/dist/components/date-time-picker/date-time-picker-panel.js.map +1 -1
- package/dist/components/date-time-picker/date-time-picker.js +91 -86
- package/dist/components/date-time-picker/date-time-picker.js.map +1 -1
- package/dist/components/date-time-picker/time-picker.js +95 -87
- package/dist/components/date-time-picker/time-picker.js.map +1 -1
- package/dist/components/dialog/dialog.js +125 -103
- package/dist/components/dialog/dialog.js.map +1 -1
- package/dist/components/drawer/drawer.js +151 -114
- package/dist/components/drawer/drawer.js.map +1 -1
- package/dist/components/dropdown-menu/dropdown-menu.js +141 -112
- package/dist/components/dropdown-menu/dropdown-menu.js.map +1 -1
- package/dist/components/field/field-combobox.js +196 -176
- package/dist/components/field/field-combobox.js.map +1 -1
- package/dist/components/field/field.js +237 -195
- package/dist/components/field/field.js.map +1 -1
- package/dist/components/list/list.js +237 -219
- package/dist/components/list/list.js.map +1 -1
- package/dist/components/option-card/option-card.js +129 -116
- package/dist/components/option-card/option-card.js.map +1 -1
- package/dist/components/pill/pill.js +55 -51
- package/dist/components/pill/pill.js.map +1 -1
- package/dist/components/popover/popover.js +53 -36
- package/dist/components/popover/popover.js.map +1 -1
- package/dist/components/radio/radio.js +38 -34
- package/dist/components/radio/radio.js.map +1 -1
- package/dist/components/scroll-area/scroll-area.js +38 -35
- package/dist/components/scroll-area/scroll-area.js.map +1 -1
- package/dist/components/scroll-overflow/scroll-overflow.js +166 -151
- package/dist/components/scroll-overflow/scroll-overflow.js.map +1 -1
- package/dist/components/segmented-control/segmented-control.js +93 -85
- package/dist/components/segmented-control/segmented-control.js.map +1 -1
- package/dist/components/select/select.js +149 -128
- package/dist/components/select/select.js.map +1 -1
- package/dist/components/separator/separator.js +19 -16
- package/dist/components/separator/separator.js.map +1 -1
- package/dist/components/skeleton/skeleton.js +34 -30
- package/dist/components/skeleton/skeleton.js.map +1 -1
- package/dist/components/spinner/spinner.js +22 -17
- package/dist/components/spinner/spinner.js.map +1 -1
- package/dist/components/surface/surface.js +25 -22
- package/dist/components/surface/surface.js.map +1 -1
- package/dist/components/switch/switch.js +66 -57
- package/dist/components/switch/switch.js.map +1 -1
- package/dist/components/table/table-pagination.js +139 -129
- package/dist/components/table/table-pagination.js.map +1 -1
- package/dist/components/table/table.js +104 -90
- package/dist/components/table/table.js.map +1 -1
- package/dist/components/tabs/tabs.js +212 -79
- package/dist/components/tabs/tabs.js.map +1 -1
- package/dist/components/toast/toast.js +112 -100
- package/dist/components/toast/toast.js.map +1 -1
- package/dist/components/toggle/toggle.js +32 -30
- package/dist/components/toggle/toggle.js.map +1 -1
- package/dist/components/tooltip/tooltip.js +59 -46
- package/dist/components/tooltip/tooltip.js.map +1 -1
- package/dist/index.d.ts +22 -0
- package/dist/lib/clear-button.js +18 -17
- package/dist/lib/clear-button.js.map +1 -1
- package/dist/styles/host-reset.js +47 -0
- package/dist/styles/host-reset.js.map +1 -0
- package/dist/styles/overlay-layer.js +5 -0
- package/dist/styles/overlay-layer.js.map +1 -0
- package/dist/tokens.json +1 -1
- package/package.json +8 -7
- package/scripts/migration-diagnostics.mjs +42 -7
- package/scripts/migration-sweep.mjs +9 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","sources":["../../../src/components/select/select.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { useAppearanceAttributes } from \"../appearance-boundary/appearance-boundary\"\nimport { useDensity } from \"../density-provider/density-provider\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst XIcon = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 -960 960 960\"\n width=\"24px\"\n fill=\"currentColor\"\n {...props}\n >\n <path d=\"M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z\" />\n </svg>\n)\n\nconst CheckIcon = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 -960 960 960\"\n width=\"24px\"\n fill=\"currentColor\"\n {...props}\n >\n <path d=\"m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z\" />\n </svg>\n)\n\nconst ChevronDownIcon = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 -960 960 960\"\n width=\"24px\"\n fill=\"currentColor\"\n {...props}\n >\n <path d=\"M459-381 314-526q-3-3-4.5-6.5T308-540q0-8 5.5-14t14.5-6h304q9 0 14.5 6t5.5 14q0 2-6 14L501-381q-5 5-10 7t-11 2q-6 0-11-2t-10-7Z\" />\n </svg>\n)\n\nconst ChevronUpIcon = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 -960 960 960\"\n width=\"24px\"\n fill=\"currentColor\"\n {...props}\n >\n <path d=\"M480-528 324-372q-11 11-28 11t-28-11q-11-11-11-28t11-28l184-184q12-12 28-12t28 12l184 184q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-528Z\" />\n </svg>\n)\n\nconst useStyles = makeZenithStyles({\n trigger: {\n display: \"flex\",\n width: \"100%\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n ...shorthands.gap(tokens.spacingElement2),\n ...shorthands.borderRadius(tokens.radiusLg),\n backgroundColor: \"transparent\",\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n outlineStyle: \"none\",\n whiteSpace: \"normal\",\n textAlign: \"left\",\n cursor: \"pointer\",\n transitionProperty: \"color, box-shadow\",\n transitionDuration: \"150ms\",\n transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n \"@media (prefers-reduced-motion: reduce)\": {\n transitionDuration: \"0.01ms\",\n },\n \":focus-visible\": {\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineOffset: \"2px\",\n outlineColor: tokens.focusRing,\n },\n \":disabled\": {\n cursor: \"not-allowed\",\n opacity: 0.5,\n },\n \"&[data-placeholder]\": {\n color: tokens.grayA8,\n },\n \"& svg\": {\n pointerEvents: \"none\",\n flexShrink: 0,\n },\n [`& [${SLOT_ATTR}=\"select-value\"]`]: {\n display: \"flex\",\n alignItems: \"center\",\n ...shorthands.gap(tokens.spacingElement2),\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n },\n\n // The open-state chevron rotation is declared HERE, on the trigger that carries the state\n // attribute, reaching the icon by SLOT_ATTR.\n [`&[data-state='open'] [${SLOT_ATTR}=\"select-icon\"] svg`]: {\n transform: \"rotate(180deg)\",\n },\n [`&[data-state='open'] [${SLOT_ATTR}=\"select-icon\"]`]: {\n transform: \"rotate(180deg)\",\n },\n [`&[data-open] [${SLOT_ATTR}=\"select-icon\"] svg`]: {\n transform: \"rotate(180deg)\",\n },\n [`&[data-popup-open] [${SLOT_ATTR}=\"select-icon\"] svg`]: {\n transform: \"rotate(180deg)\",\n },\n },\n triggerIconWrapper: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n flexShrink: 0,\n },\n triggerIcon: {\n width: \"1.5rem\",\n height: \"1.5rem\",\n color: tokens.grayA11,\n transitionProperty: \"transform\",\n transitionDuration: \"150ms\",\n transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n \"@media (prefers-reduced-motion: reduce)\": {\n transitionDuration: \"0.01ms\",\n },\n },\n triggerClear: {\n position: \"absolute\",\n right: \"2.75rem\",\n paddingTop: \"0.125rem\",\n paddingBottom: \"0.125rem\",\n paddingLeft: \"0.125rem\",\n paddingRight: \"0.125rem\",\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n backgroundColor: \"transparent\",\n color: tokens.accentA11,\n cursor: \"pointer\",\n ...shorthands.borderRadius(tokens.radiusMd),\n \":hover\": {\n backgroundColor: tokens.accentSoft,\n },\n \":focus-visible\": {\n outlineColor: tokens.focusRing,\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineOffset: \"2px\",\n },\n },\n triggerClearIcon: {\n width: \"1.25rem\",\n height: \"1.25rem\",\n color: tokens.accentA11,\n },\n popup: {\n backgroundColor: tokens.body,\n // DENSITY-SPEC.md §2.3 — popup padding/gap only; the slide-in animation offsets a few lines\n // below deliberately keep the plain (non-density) `spacingElement2` value: they are not in the\n // approved matrix, and re-using the same primitive for two unrelated purposes doesn't make the\n // animation distance a density lever too.\n ...shorthands.padding(tokens.selectContentPadding),\n ...shorthands.gap(tokens.selectContentGap),\n color: tokens.grayA12,\n position: \"relative\",\n zIndex: 50,\n transformOrigin: \"var(--radix-select-content-transform-origin)\",\n overflowX: \"hidden\",\n overflowY: \"auto\",\n ...shorthands.borderRadius(tokens.radius2xl),\n ...shorthands.border(\"1px\", \"solid\", \"transparent\"),\n // v1 shadow-md\n boxShadow: \"0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a\",\n outlineStyle: \"none\",\n maxHeight: \"var(--radix-popper-available-height, 20rem)\",\n \"@media (prefers-reduced-motion: reduce)\": {\n animationDuration: \"0.01ms\",\n animationIterationCount: \"1\",\n \"&[data-state='open']\": {\n animationDuration: \"0.01ms\",\n },\n },\n \"&[data-state='open']\": {\n animationName: {\n from: { opacity: 0, transform: \"scale(0.95)\" },\n to: { opacity: 1, transform: \"scale(1)\" },\n },\n animationDuration: \"150ms\",\n animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n },\n \"&[data-state='open'][data-side='bottom']\": {\n animationName: {\n from: {\n opacity: 0,\n transform: `translateY(-${tokens.spacingElement2}) scale(0.95)`,\n },\n to: { opacity: 1, transform: \"translateY(0) scale(1)\" },\n },\n },\n \"&[data-state='open'][data-side='left']\": {\n animationName: {\n from: {\n opacity: 0,\n transform: `translateX(${tokens.spacingElement2}) scale(0.95)`,\n },\n to: { opacity: 1, transform: \"translateX(0) scale(1)\" },\n },\n },\n \"&[data-state='open'][data-side='right']\": {\n animationName: {\n from: {\n opacity: 0,\n transform: `translateX(-${tokens.spacingElement2}) scale(0.95)`,\n },\n to: { opacity: 1, transform: \"translateX(0) scale(1)\" },\n },\n },\n \"&[data-state='open'][data-side='top']\": {\n animationName: {\n from: {\n opacity: 0,\n transform: `translateY(${tokens.spacingElement2}) scale(0.95)`,\n },\n to: { opacity: 1, transform: \"translateY(0) scale(1)\" },\n },\n },\n \"&[data-state='closed']\": {\n animationName: {\n from: { opacity: 1, transform: \"scale(1)\" },\n to: { opacity: 0, transform: \"scale(0.95)\" },\n },\n animationDuration: \"100ms\",\n animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n },\n },\n viewport: {\n width: \"100%\",\n minWidth: \"var(--radix-select-trigger-width)\",\n scrollMarginTop: tokens.spacingElement1,\n scrollMarginBottom: tokens.spacingElement1,\n },\n item: {\n position: \"relative\",\n display: \"flex\",\n width: \"100%\",\n cursor: \"default\",\n userSelect: \"none\",\n alignItems: \"center\",\n ...shorthands.gap(tokens.spacingElement2),\n ...shorthands.borderRadius(tokens.radiusMd),\n // DENSITY-SPEC.md §2.3 — left padding and vertical padding are density levers; right padding\n // stays a fixed 32px at every tier (reserves the check-indicator's space, not modeled in\n // density.yaml).\n paddingLeft: tokens.selectItemPaddingLeft,\n paddingRight: \"2rem\",\n paddingTop: tokens.selectItemPaddingY,\n paddingBottom: tokens.selectItemPaddingY,\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n color: tokens.grayA12,\n outlineStyle: \"none\",\n \":not(:first-child)\": {\n marginTop: \"0.125rem\",\n },\n \"&[data-highlighted]\": {\n backgroundColor: tokens.accentA3,\n },\n \"&[data-state='checked']\": {\n backgroundColor: tokens.accentA3,\n },\n \"&[data-disabled]\": {\n pointerEvents: \"none\",\n opacity: 0.5,\n },\n \"& svg\": {\n pointerEvents: \"none\",\n flexShrink: 0,\n },\n \"& svg:not([class*='text-'])\": {\n color: tokens.grayA11,\n },\n },\n itemIndicatorWrapper: {\n position: \"absolute\",\n right: tokens.spacingElement2,\n display: \"flex\",\n width: \"1rem\",\n height: \"1rem\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n itemIndicatorIcon: {\n width: \"1rem\",\n height: \"1rem\",\n color: tokens.grayA11,\n },\n label: {\n paddingLeft: tokens.spacingElement2,\n paddingRight: tokens.spacingElement2,\n paddingTop: \"0.375rem\",\n paddingBottom: \"0.375rem\",\n fontSize: tokens.textXs,\n lineHeight: tokens.leadingXs,\n fontWeight: tokens.fontWeightSemibold,\n color: tokens.gray11,\n },\n separator: {\n pointerEvents: \"none\",\n marginLeft: `calc(-1 * ${tokens.spacingElement1})`,\n marginRight: `calc(-1 * ${tokens.spacingElement1})`,\n marginTop: tokens.spacingElement1,\n marginBottom: tokens.spacingElement1,\n height: \"1px\",\n backgroundColor: tokens.graySoft,\n },\n scrollArrow: {\n display: \"flex\",\n cursor: \"default\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n scrollArrowUp: {\n paddingBottom: tokens.spacingElement1,\n },\n scrollArrowDown: {\n paddingTop: tokens.spacingElement1,\n },\n scrollArrowIcon: {\n width: \"1.5rem\",\n height: \"1.5rem\",\n },\n scrollArrowDownIcon: {\n transform: \"rotate(180deg)\",\n },\n})\n\nexport type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root>\n\nexport const Select: React.ForwardRefExoticComponent<\n SelectProps & React.RefAttributes<HTMLElement>\n> = React.forwardRef<HTMLElement, SelectProps>(function Select(props, _ref) {\n return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n})\n\nexport type SelectGroupProps = React.ComponentProps<\n typeof SelectPrimitive.Group\n>\n\nexport const SelectGroup = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Group>,\n SelectGroupProps\n>(function SelectGroup({ className, ...props }, ref) {\n return (\n <SelectPrimitive.Group\n ref={ref}\n data-slot=\"select-group\"\n {...{ [SLOT_ATTR]: \"select-group\" }}\n className={className}\n {...props}\n />\n )\n})\n\nexport type SelectValueProps = React.ComponentProps<\n typeof SelectPrimitive.Value\n>\n\nexport const SelectValue = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Value>,\n SelectValueProps\n>(function SelectValue({ className, ...props }, ref) {\n return (\n <SelectPrimitive.Value\n ref={ref}\n data-slot=\"select-value\"\n {...{ [SLOT_ATTR]: \"select-value\" }}\n className={className}\n {...props}\n />\n )\n})\n\nexport type SelectTriggerProps = React.ComponentProps<\n typeof SelectPrimitive.Trigger\n>\n\nexport const SelectTrigger = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Trigger>,\n SelectTriggerProps\n>(function SelectTrigger({ className, children, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <SelectPrimitive.Trigger\n ref={ref}\n data-slot=\"select-trigger\"\n {...{ [SLOT_ATTR]: \"select-trigger\" }}\n className={mergeClasses(styles.trigger, className)}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon\n asChild\n data-slot=\"select-icon\"\n {...{ [SLOT_ATTR]: \"select-icon\" }}\n className={styles.triggerIconWrapper}\n >\n <ChevronDownIcon className={styles.triggerIcon} />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n )\n})\n\nexport type SelectTriggerClearProps = React.ComponentProps<\"span\">\n\nexport const SelectTriggerClear = React.forwardRef<\n HTMLSpanElement,\n SelectTriggerClearProps\n>(function SelectTriggerClear({ className, onClick, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <span\n ref={ref}\n role=\"button\"\n tabIndex={0}\n data-slot=\"select-trigger-clear\"\n {...{ [SLOT_ATTR]: \"select-trigger-clear\" }}\n className={mergeClasses(styles.triggerClear, className)}\n onPointerDown={(event) => {\n event.preventDefault()\n event.stopPropagation()\n }}\n onClick={(event: React.MouseEvent<HTMLSpanElement>) => {\n event.preventDefault()\n event.stopPropagation()\n onClick?.(event)\n }}\n {...props}\n >\n <XIcon className={styles.triggerClearIcon} />\n </span>\n )\n})\n\nexport type SelectContentProps = React.ComponentProps<\n typeof SelectPrimitive.Content\n> & {\n container?: React.ComponentProps<typeof SelectPrimitive.Portal>[\"container\"]\n}\n\nexport const SelectContent = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Content>,\n SelectContentProps\n>(function SelectContent(\n {\n className,\n children,\n position = \"popper\",\n align = \"center\",\n container,\n ...props\n },\n ref\n) {\n const styles = useStyles()\n // DENSITY-SPEC.md §4.4 — SelectContent is a portal root: stamp the explicit override ONLY when\n // one exists in the React tree, so an ambient shell default (which already reaches this portal\n // via ordinary DOM inheritance, since the portal container is still a descendant of `<html>`)\n // isn't masked by a stale/default value.\n const override = useDensity()\n // SPEC.md §2 rule 3 — the same portal asymmetry, for the appearance pair: re-stamp the\n // nearest explicit AppearanceBoundary's mode+surface, or neither attribute when there is\n // none, leaving live shell inheritance in place.\n const appearance = useAppearanceAttributes()\n\n return (\n <SelectPrimitive.Portal container={container}>\n <SelectPrimitive.Content\n ref={ref}\n data-slot=\"select-content\"\n {...{ [SLOT_ATTR]: \"select-content\" }}\n {...(override !== undefined ? { \"data-density\": override } : {})}\n {...appearance}\n position={position}\n align={align}\n className={mergeClasses(styles.popup, className)}\n {...props}\n >\n <SelectScrollUpButton />\n <SelectPrimitive.Viewport\n data-slot=\"select-viewport\"\n {...{ [SLOT_ATTR]: \"select-viewport\" }}\n className={styles.viewport}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n )\n})\n\nexport type SelectLabelProps = React.ComponentProps<\n typeof SelectPrimitive.Label\n>\n\nexport const SelectLabel = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Label>,\n SelectLabelProps\n>(function SelectLabel({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <SelectPrimitive.Label\n ref={ref}\n data-slot=\"select-label\"\n {...{ [SLOT_ATTR]: \"select-label\" }}\n className={mergeClasses(styles.label, className)}\n {...props}\n />\n )\n})\n\nexport type SelectItemProps = React.ComponentProps<typeof SelectPrimitive.Item>\n\nexport const SelectItem = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Item>,\n SelectItemProps\n>(function SelectItem({ className, children, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <SelectPrimitive.Item\n ref={ref}\n data-slot=\"select-item\"\n {...{ [SLOT_ATTR]: \"select-item\" }}\n className={mergeClasses(styles.item, className)}\n {...props}\n >\n <span className={styles.itemIndicatorWrapper}>\n <SelectPrimitive.ItemIndicator>\n <CheckIcon className={styles.itemIndicatorIcon} />\n </SelectPrimitive.ItemIndicator>\n </span>\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n )\n})\n\nexport type SelectSeparatorProps = React.ComponentProps<\n typeof SelectPrimitive.Separator\n>\n\nexport const SelectSeparator = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Separator>,\n SelectSeparatorProps\n>(function SelectSeparator({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <SelectPrimitive.Separator\n ref={ref}\n data-slot=\"select-separator\"\n {...{ [SLOT_ATTR]: \"select-separator\" }}\n className={mergeClasses(styles.separator, className)}\n {...props}\n />\n )\n})\n\nexport type SelectScrollUpButtonProps = React.ComponentProps<\n typeof SelectPrimitive.ScrollUpButton\n>\n\nexport const SelectScrollUpButton = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n SelectScrollUpButtonProps\n>(function SelectScrollUpButton({ className, children, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <SelectPrimitive.ScrollUpButton\n ref={ref}\n data-slot=\"select-scroll-up-button\"\n {...{ [SLOT_ATTR]: \"select-scroll-up-button\" }}\n className={mergeClasses(\n styles.scrollArrow,\n styles.scrollArrowUp,\n className\n )}\n {...props}\n >\n {children ?? <ChevronUpIcon className={styles.scrollArrowIcon} />}\n </SelectPrimitive.ScrollUpButton>\n )\n})\n\nexport type SelectScrollDownButtonProps = React.ComponentProps<\n typeof SelectPrimitive.ScrollDownButton\n>\n\nexport const SelectScrollDownButton = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n SelectScrollDownButtonProps\n>(function SelectScrollDownButton({ className, children, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <SelectPrimitive.ScrollDownButton\n ref={ref}\n data-slot=\"select-scroll-down-button\"\n {...{ [SLOT_ATTR]: \"select-scroll-down-button\" }}\n className={mergeClasses(\n styles.scrollArrow,\n styles.scrollArrowDown,\n className\n )}\n {...props}\n >\n {children ?? (\n <ChevronUpIcon\n className={mergeClasses(\n styles.scrollArrowIcon,\n styles.scrollArrowDownIcon\n )}\n />\n )}\n </SelectPrimitive.ScrollDownButton>\n )\n})\n"],"names":["XIcon","props","jsx","CheckIcon","ChevronDownIcon","ChevronUpIcon","useStyles","makeZenithStyles","shorthands","tokens.spacingElement2","tokens.radiusLg","tokens.textSm","tokens.leadingSm","tokens.focusRing","tokens.grayA8","SLOT_ATTR","tokens.grayA11","tokens.accentA11","tokens.radiusMd","tokens.accentSoft","tokens.body","tokens.selectContentPadding","tokens.selectContentGap","tokens.grayA12","tokens.radius2xl","tokens.spacingElement1","tokens.selectItemPaddingLeft","tokens.selectItemPaddingY","tokens.accentA3","tokens.textXs","tokens.leadingXs","tokens.fontWeightSemibold","tokens.gray11","tokens.graySoft","Select","React","_ref","SelectPrimitive.Root","SelectGroup","className","ref","SelectPrimitive.Group","SelectValue","SelectPrimitive.Value","SelectTrigger","children","styles","jsxs","SelectPrimitive.Trigger","mergeClasses","SelectPrimitive.Icon","SelectTriggerClear","onClick","event","SelectContent","position","align","container","override","useDensity","appearance","useAppearanceAttributes","SelectPrimitive.Portal","SelectPrimitive.Content","SelectScrollUpButton","SelectPrimitive.Viewport","SelectScrollDownButton","SelectLabel","SelectPrimitive.Label","SelectItem","SelectPrimitive.Item","SelectPrimitive.ItemIndicator","SelectPrimitive.ItemText","SelectSeparator","SelectPrimitive.Separator","SelectPrimitive.ScrollUpButton","SelectPrimitive.ScrollDownButton"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"select.js","sources":["../../../src/components/select/select.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { useAppearanceAttributes } from \"../appearance-boundary/appearance-boundary\"\nimport { useDensity } from \"../density-provider/density-provider\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport { OVERLAY_Z_INDEX } from \"../../styles/overlay-layer\"\nimport * as tokens from \"../../tokens\"\n\nconst XIcon = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 -960 960 960\"\n width=\"24px\"\n fill=\"currentColor\"\n {...props}\n >\n <path d=\"M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z\" />\n </svg>\n)\n\nconst CheckIcon = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 -960 960 960\"\n width=\"24px\"\n fill=\"currentColor\"\n {...props}\n >\n <path d=\"m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z\" />\n </svg>\n)\n\nconst ChevronDownIcon = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 -960 960 960\"\n width=\"24px\"\n fill=\"currentColor\"\n {...props}\n >\n <path d=\"M459-381 314-526q-3-3-4.5-6.5T308-540q0-8 5.5-14t14.5-6h304q9 0 14.5 6t5.5 14q0 2-6 14L501-381q-5 5-10 7t-11 2q-6 0-11-2t-10-7Z\" />\n </svg>\n)\n\nconst ChevronUpIcon = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 -960 960 960\"\n width=\"24px\"\n fill=\"currentColor\"\n {...props}\n >\n <path d=\"M480-528 324-372q-11 11-28 11t-28-11q-11-11-11-28t11-28l184-184q12-12 28-12t28 12l184 184q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-528Z\" />\n </svg>\n)\n\nconst useStyles = makeZenithStyles({\n trigger: {\n ...nativeControl,\n display: \"flex\",\n width: \"100%\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n ...shorthands.gap(tokens.spacingElement2),\n ...shorthands.borderRadius(tokens.radiusLg),\n backgroundColor: \"transparent\",\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n outlineStyle: \"none\",\n whiteSpace: \"normal\",\n textAlign: \"left\",\n cursor: \"pointer\",\n transitionProperty: \"color, box-shadow\",\n transitionDuration: \"150ms\",\n transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n \"@media (prefers-reduced-motion: reduce)\": {\n transitionDuration: \"0.01ms\",\n },\n \":focus-visible\": {\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineOffset: \"2px\",\n outlineColor: tokens.focusRing,\n },\n \":disabled\": {\n cursor: \"not-allowed\",\n opacity: 0.5,\n },\n \"&[data-placeholder]\": {\n color: tokens.grayA8,\n },\n \"& svg\": {\n pointerEvents: \"none\",\n flexShrink: 0,\n },\n [`& [${SLOT_ATTR}=\"select-value\"]`]: {\n display: \"flex\",\n alignItems: \"center\",\n ...shorthands.gap(tokens.spacingElement2),\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n },\n\n // The open-state chevron rotation is declared HERE, on the trigger that carries the state\n // attribute, reaching the icon by SLOT_ATTR.\n [`&[data-state='open'] [${SLOT_ATTR}=\"select-icon\"] svg`]: {\n transform: \"rotate(180deg)\",\n },\n [`&[data-state='open'] [${SLOT_ATTR}=\"select-icon\"]`]: {\n transform: \"rotate(180deg)\",\n },\n [`&[data-open] [${SLOT_ATTR}=\"select-icon\"] svg`]: {\n transform: \"rotate(180deg)\",\n },\n [`&[data-popup-open] [${SLOT_ATTR}=\"select-icon\"] svg`]: {\n transform: \"rotate(180deg)\",\n },\n },\n triggerIconWrapper: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n flexShrink: 0,\n },\n triggerIcon: {\n ...boxModel,\n width: \"1.5rem\",\n height: \"1.5rem\",\n color: tokens.grayA11,\n transitionProperty: \"transform\",\n transitionDuration: \"150ms\",\n transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n \"@media (prefers-reduced-motion: reduce)\": {\n transitionDuration: \"0.01ms\",\n },\n },\n triggerClear: {\n ...boxModel,\n position: \"absolute\",\n right: \"2.75rem\",\n paddingTop: \"0.125rem\",\n paddingBottom: \"0.125rem\",\n paddingLeft: \"0.125rem\",\n paddingRight: \"0.125rem\",\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n backgroundColor: \"transparent\",\n color: tokens.accentA11,\n cursor: \"pointer\",\n ...shorthands.borderRadius(tokens.radiusMd),\n \":hover\": {\n backgroundColor: tokens.accentSoft,\n },\n \":focus-visible\": {\n outlineColor: tokens.focusRing,\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineOffset: \"2px\",\n },\n },\n triggerClearIcon: {\n ...boxModel,\n width: \"1.25rem\",\n height: \"1.25rem\",\n color: tokens.accentA11,\n },\n popup: {\n ...boxModel,\n backgroundColor: tokens.body,\n // DENSITY-SPEC.md §2.3 — popup padding/gap only; the slide-in animation offsets a few lines\n // below deliberately keep the plain (non-density) `spacingElement2` value: they are not in the\n // approved matrix, and re-using the same primitive for two unrelated purposes doesn't make the\n // animation distance a density lever too.\n ...shorthands.padding(tokens.selectContentPadding),\n ...shorthands.gap(tokens.selectContentGap),\n color: tokens.grayA12,\n position: \"relative\",\n zIndex: OVERLAY_Z_INDEX,\n transformOrigin: \"var(--radix-select-content-transform-origin)\",\n overflowX: \"hidden\",\n overflowY: \"auto\",\n ...shorthands.borderRadius(tokens.radius2xl),\n ...shorthands.border(\"1px\", \"solid\", \"transparent\"),\n // v1 shadow-md\n boxShadow: \"0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a\",\n outlineStyle: \"none\",\n maxHeight: \"var(--radix-popper-available-height, 20rem)\",\n \"@media (prefers-reduced-motion: reduce)\": {\n animationDuration: \"0.01ms\",\n animationIterationCount: \"1\",\n \"&[data-state='open']\": {\n animationDuration: \"0.01ms\",\n },\n \"&[data-state='closed']\": {\n animationDuration: \"0.01ms\",\n },\n },\n \"&[data-state='open']\": {\n animationName: {\n from: { opacity: 0, transform: \"scale(0.95)\" },\n to: { opacity: 1, transform: \"scale(1)\" },\n },\n animationDuration: \"150ms\",\n animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n },\n \"&[data-state='open'][data-side='bottom']\": {\n animationName: {\n from: {\n opacity: 0,\n transform: `translateY(-${tokens.spacingElement2}) scale(0.95)`,\n },\n to: { opacity: 1, transform: \"translateY(0) scale(1)\" },\n },\n },\n \"&[data-state='open'][data-side='left']\": {\n animationName: {\n from: {\n opacity: 0,\n transform: `translateX(${tokens.spacingElement2}) scale(0.95)`,\n },\n to: { opacity: 1, transform: \"translateX(0) scale(1)\" },\n },\n },\n \"&[data-state='open'][data-side='right']\": {\n animationName: {\n from: {\n opacity: 0,\n transform: `translateX(-${tokens.spacingElement2}) scale(0.95)`,\n },\n to: { opacity: 1, transform: \"translateX(0) scale(1)\" },\n },\n },\n \"&[data-state='open'][data-side='top']\": {\n animationName: {\n from: {\n opacity: 0,\n transform: `translateY(${tokens.spacingElement2}) scale(0.95)`,\n },\n to: { opacity: 1, transform: \"translateY(0) scale(1)\" },\n },\n },\n \"&[data-state='closed']\": {\n animationName: {\n from: { opacity: 1, transform: \"scale(1)\" },\n to: { opacity: 0, transform: \"scale(0.95)\" },\n },\n animationDuration: \"100ms\",\n animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n },\n },\n viewport: {\n ...boxModel,\n width: \"100%\",\n minWidth: \"var(--radix-select-trigger-width)\",\n scrollMarginTop: tokens.spacingElement1,\n scrollMarginBottom: tokens.spacingElement1,\n },\n item: {\n ...boxModel,\n position: \"relative\",\n display: \"flex\",\n width: \"100%\",\n cursor: \"default\",\n userSelect: \"none\",\n alignItems: \"center\",\n ...shorthands.gap(tokens.spacingElement2),\n ...shorthands.borderRadius(tokens.radiusMd),\n // DENSITY-SPEC.md §2.3 — left padding and vertical padding are density levers; right padding\n // stays a fixed 32px at every tier (reserves the check-indicator's space, not modeled in\n // density.yaml).\n paddingLeft: tokens.selectItemPaddingLeft,\n paddingRight: \"2rem\",\n paddingTop: tokens.selectItemPaddingY,\n paddingBottom: tokens.selectItemPaddingY,\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n color: tokens.grayA12,\n outlineStyle: \"none\",\n \":not(:first-child)\": {\n marginTop: \"0.125rem\",\n },\n \"&[data-highlighted]\": {\n backgroundColor: tokens.accentA3,\n },\n \"&[data-state='checked']\": {\n backgroundColor: tokens.accentA3,\n },\n \"&[data-disabled]\": {\n pointerEvents: \"none\",\n opacity: 0.5,\n },\n \"& svg\": {\n pointerEvents: \"none\",\n flexShrink: 0,\n },\n \"& svg:not([class*='text-'])\": {\n color: tokens.grayA11,\n },\n },\n itemIndicatorWrapper: {\n ...boxModel,\n position: \"absolute\",\n right: tokens.spacingElement2,\n display: \"flex\",\n width: \"1rem\",\n height: \"1rem\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n itemIndicatorIcon: {\n ...boxModel,\n // An inline svg sits on the text baseline and grows its wrapper by the line-height gap.\n display: \"block\",\n width: \"1rem\",\n height: \"1rem\",\n color: tokens.grayA11,\n },\n label: {\n ...boxModel,\n paddingLeft: tokens.spacingElement2,\n paddingRight: tokens.spacingElement2,\n paddingTop: \"0.375rem\",\n paddingBottom: \"0.375rem\",\n fontSize: tokens.textXs,\n lineHeight: tokens.leadingXs,\n fontWeight: tokens.fontWeightSemibold,\n color: tokens.gray11,\n },\n separator: {\n ...boxModel,\n pointerEvents: \"none\",\n marginLeft: `calc(-1 * ${tokens.spacingElement1})`,\n marginRight: `calc(-1 * ${tokens.spacingElement1})`,\n marginTop: tokens.spacingElement1,\n marginBottom: tokens.spacingElement1,\n height: \"1px\",\n backgroundColor: tokens.graySoft,\n },\n scrollArrow: {\n display: \"flex\",\n cursor: \"default\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n scrollArrowUp: {\n ...boxModel,\n paddingBottom: tokens.spacingElement1,\n },\n scrollArrowDown: {\n ...boxModel,\n paddingTop: tokens.spacingElement1,\n },\n scrollArrowIcon: {\n ...boxModel,\n width: \"1.5rem\",\n height: \"1.5rem\",\n },\n scrollArrowDownIcon: {\n transform: \"rotate(180deg)\",\n },\n})\n\nexport type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root>\n\nexport const Select: React.ForwardRefExoticComponent<\n SelectProps & React.RefAttributes<HTMLElement>\n> = React.forwardRef<HTMLElement, SelectProps>(function Select(props, _ref) {\n return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n})\n\nexport type SelectGroupProps = React.ComponentProps<\n typeof SelectPrimitive.Group\n>\n\nexport const SelectGroup = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Group>,\n SelectGroupProps\n>(function SelectGroup({ className, ...props }, ref) {\n return (\n <SelectPrimitive.Group\n ref={ref}\n data-slot=\"select-group\"\n {...{ [SLOT_ATTR]: \"select-group\" }}\n className={className}\n {...props}\n />\n )\n})\n\nexport type SelectValueProps = React.ComponentProps<\n typeof SelectPrimitive.Value\n>\n\nexport const SelectValue = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Value>,\n SelectValueProps\n>(function SelectValue({ className, ...props }, ref) {\n return (\n <SelectPrimitive.Value\n ref={ref}\n data-slot=\"select-value\"\n {...{ [SLOT_ATTR]: \"select-value\" }}\n className={className}\n {...props}\n />\n )\n})\n\nexport type SelectTriggerProps = React.ComponentProps<\n typeof SelectPrimitive.Trigger\n>\n\nexport const SelectTrigger = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Trigger>,\n SelectTriggerProps\n>(function SelectTrigger({ className, children, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <SelectPrimitive.Trigger\n ref={ref}\n data-slot=\"select-trigger\"\n {...{ [SLOT_ATTR]: \"select-trigger\" }}\n className={mergeClasses(styles.trigger, className)}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon\n asChild\n data-slot=\"select-icon\"\n {...{ [SLOT_ATTR]: \"select-icon\" }}\n className={styles.triggerIconWrapper}\n >\n <ChevronDownIcon className={styles.triggerIcon} />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n )\n})\n\nexport type SelectTriggerClearProps = React.ComponentProps<\"span\">\n\nexport const SelectTriggerClear = React.forwardRef<\n HTMLSpanElement,\n SelectTriggerClearProps\n>(function SelectTriggerClear({ className, onClick, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <span\n ref={ref}\n role=\"button\"\n tabIndex={0}\n data-slot=\"select-trigger-clear\"\n {...{ [SLOT_ATTR]: \"select-trigger-clear\" }}\n className={mergeClasses(styles.triggerClear, className)}\n onPointerDown={(event) => {\n event.preventDefault()\n event.stopPropagation()\n }}\n onClick={(event: React.MouseEvent<HTMLSpanElement>) => {\n event.preventDefault()\n event.stopPropagation()\n onClick?.(event)\n }}\n {...props}\n >\n <XIcon className={styles.triggerClearIcon} />\n </span>\n )\n})\n\nexport type SelectContentProps = React.ComponentProps<\n typeof SelectPrimitive.Content\n> & {\n container?: React.ComponentProps<typeof SelectPrimitive.Portal>[\"container\"]\n}\n\nexport const SelectContent = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Content>,\n SelectContentProps\n>(function SelectContent(\n {\n className,\n children,\n position = \"popper\",\n align = \"center\",\n container,\n ...props\n },\n ref\n) {\n const styles = useStyles()\n // DENSITY-SPEC.md §4.4 — SelectContent is a portal root: stamp the explicit override ONLY when\n // one exists in the React tree, so an ambient shell default (which already reaches this portal\n // via ordinary DOM inheritance, since the portal container is still a descendant of `<html>`)\n // isn't masked by a stale/default value.\n const override = useDensity()\n // SPEC.md §2 rule 3 — the same portal asymmetry, for the appearance pair: re-stamp the\n // nearest explicit AppearanceBoundary's mode+surface, or neither attribute when there is\n // none, leaving live shell inheritance in place.\n const appearance = useAppearanceAttributes()\n\n return (\n <SelectPrimitive.Portal container={container}>\n <SelectPrimitive.Content\n ref={ref}\n data-slot=\"select-content\"\n {...{ [SLOT_ATTR]: \"select-content\" }}\n {...(override !== undefined ? { \"data-density\": override } : {})}\n {...appearance}\n position={position}\n align={align}\n className={mergeClasses(styles.popup, className)}\n {...props}\n >\n <SelectScrollUpButton />\n <SelectPrimitive.Viewport\n data-slot=\"select-viewport\"\n {...{ [SLOT_ATTR]: \"select-viewport\" }}\n className={styles.viewport}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n )\n})\n\nexport type SelectLabelProps = React.ComponentProps<\n typeof SelectPrimitive.Label\n>\n\nexport const SelectLabel = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Label>,\n SelectLabelProps\n>(function SelectLabel({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <SelectPrimitive.Label\n ref={ref}\n data-slot=\"select-label\"\n {...{ [SLOT_ATTR]: \"select-label\" }}\n className={mergeClasses(styles.label, className)}\n {...props}\n />\n )\n})\n\nexport type SelectItemProps = React.ComponentProps<typeof SelectPrimitive.Item>\n\nexport const SelectItem = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Item>,\n SelectItemProps\n>(function SelectItem({ className, children, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <SelectPrimitive.Item\n ref={ref}\n data-slot=\"select-item\"\n {...{ [SLOT_ATTR]: \"select-item\" }}\n className={mergeClasses(styles.item, className)}\n {...props}\n >\n <span className={styles.itemIndicatorWrapper}>\n <SelectPrimitive.ItemIndicator>\n <CheckIcon className={styles.itemIndicatorIcon} />\n </SelectPrimitive.ItemIndicator>\n </span>\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n )\n})\n\nexport type SelectSeparatorProps = React.ComponentProps<\n typeof SelectPrimitive.Separator\n>\n\nexport const SelectSeparator = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Separator>,\n SelectSeparatorProps\n>(function SelectSeparator({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <SelectPrimitive.Separator\n ref={ref}\n data-slot=\"select-separator\"\n {...{ [SLOT_ATTR]: \"select-separator\" }}\n className={mergeClasses(styles.separator, className)}\n {...props}\n />\n )\n})\n\nexport type SelectScrollUpButtonProps = React.ComponentProps<\n typeof SelectPrimitive.ScrollUpButton\n>\n\nexport const SelectScrollUpButton = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n SelectScrollUpButtonProps\n>(function SelectScrollUpButton({ className, children, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <SelectPrimitive.ScrollUpButton\n ref={ref}\n data-slot=\"select-scroll-up-button\"\n {...{ [SLOT_ATTR]: \"select-scroll-up-button\" }}\n className={mergeClasses(\n styles.scrollArrow,\n styles.scrollArrowUp,\n className\n )}\n {...props}\n >\n {children ?? <ChevronUpIcon className={styles.scrollArrowIcon} />}\n </SelectPrimitive.ScrollUpButton>\n )\n})\n\nexport type SelectScrollDownButtonProps = React.ComponentProps<\n typeof SelectPrimitive.ScrollDownButton\n>\n\nexport const SelectScrollDownButton = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n SelectScrollDownButtonProps\n>(function SelectScrollDownButton({ className, children, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <SelectPrimitive.ScrollDownButton\n ref={ref}\n data-slot=\"select-scroll-down-button\"\n {...{ [SLOT_ATTR]: \"select-scroll-down-button\" }}\n className={mergeClasses(\n styles.scrollArrow,\n styles.scrollArrowDown,\n className\n )}\n {...props}\n >\n {children ?? (\n <ChevronUpIcon\n className={mergeClasses(\n styles.scrollArrowIcon,\n styles.scrollArrowDownIcon\n )}\n />\n )}\n </SelectPrimitive.ScrollDownButton>\n )\n})\n"],"names":["XIcon","props","jsx","CheckIcon","ChevronDownIcon","ChevronUpIcon","useStyles","makeZenithStyles","nativeControl","shorthands","tokens.spacingElement2","tokens.radiusLg","tokens.textSm","tokens.leadingSm","tokens.focusRing","tokens.grayA8","SLOT_ATTR","boxModel","tokens.grayA11","tokens.accentA11","tokens.radiusMd","tokens.accentSoft","tokens.body","tokens.selectContentPadding","tokens.selectContentGap","tokens.grayA12","OVERLAY_Z_INDEX","tokens.radius2xl","tokens.spacingElement1","tokens.selectItemPaddingLeft","tokens.selectItemPaddingY","tokens.accentA3","tokens.textXs","tokens.leadingXs","tokens.fontWeightSemibold","tokens.gray11","tokens.graySoft","Select","React","_ref","SelectPrimitive.Root","SelectGroup","className","ref","SelectPrimitive.Group","SelectValue","SelectPrimitive.Value","SelectTrigger","children","styles","jsxs","SelectPrimitive.Trigger","mergeClasses","SelectPrimitive.Icon","SelectTriggerClear","onClick","event","SelectContent","position","align","container","override","useDensity","appearance","useAppearanceAttributes","SelectPrimitive.Portal","SelectPrimitive.Content","SelectScrollUpButton","SelectPrimitive.Viewport","SelectScrollDownButton","SelectLabel","SelectPrimitive.Label","SelectItem","SelectPrimitive.Item","SelectPrimitive.ItemIndicator","SelectPrimitive.ItemText","SelectSeparator","SelectPrimitive.Separator","SelectPrimitive.ScrollUpButton","SelectPrimitive.ScrollDownButton"],"mappings":"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"}
|
|
@@ -1,41 +1,44 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import * as
|
|
3
|
-
import { mergeClasses as
|
|
1
|
+
import { jsx as m } from "react/jsx-runtime";
|
|
2
|
+
import * as p from "react";
|
|
3
|
+
import { mergeClasses as d, SLOT_ATTR as f } from "@epilot/zenith-runtime/v1";
|
|
4
4
|
import { makeZenithStyles as h } from "../../styles/make-styles.js";
|
|
5
|
-
import {
|
|
6
|
-
|
|
5
|
+
import { boxModel as a } from "../../styles/host-reset.js";
|
|
6
|
+
import { grayA5 as e } from "../../tokens/index.js";
|
|
7
|
+
const c = h({
|
|
7
8
|
horizontal: {
|
|
8
|
-
|
|
9
|
+
...a,
|
|
10
|
+
backgroundColor: e,
|
|
9
11
|
flexShrink: 0,
|
|
10
12
|
height: "1px",
|
|
11
13
|
width: "100%"
|
|
12
14
|
},
|
|
13
15
|
vertical: {
|
|
14
|
-
|
|
16
|
+
...a,
|
|
17
|
+
backgroundColor: e,
|
|
15
18
|
flexShrink: 0,
|
|
16
19
|
height: "100%",
|
|
17
20
|
width: "1px"
|
|
18
21
|
}
|
|
19
|
-
}),
|
|
20
|
-
function({ className:
|
|
21
|
-
const
|
|
22
|
-
return /* @__PURE__ */
|
|
22
|
+
}), y = p.forwardRef(
|
|
23
|
+
function({ className: i, orientation: r = "horizontal", decorative: o = !0, ...s }, n) {
|
|
24
|
+
const l = c(), t = !o;
|
|
25
|
+
return /* @__PURE__ */ m(
|
|
23
26
|
"div",
|
|
24
27
|
{
|
|
25
|
-
ref:
|
|
28
|
+
ref: n,
|
|
26
29
|
"data-slot": "separator",
|
|
27
|
-
[
|
|
30
|
+
[f]: "separator",
|
|
28
31
|
"data-orientation": r,
|
|
29
32
|
role: t ? "separator" : void 0,
|
|
30
33
|
"aria-orientation": t ? r : void 0,
|
|
31
34
|
"aria-hidden": o ? "true" : void 0,
|
|
32
|
-
className:
|
|
33
|
-
...
|
|
35
|
+
className: d(l[r], i),
|
|
36
|
+
...s
|
|
34
37
|
}
|
|
35
38
|
);
|
|
36
39
|
}
|
|
37
40
|
);
|
|
38
41
|
export {
|
|
39
|
-
|
|
42
|
+
y as Separator
|
|
40
43
|
};
|
|
41
44
|
//# sourceMappingURL=separator.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"separator.js","sources":["../../../src/components/separator/separator.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\n/**\n * Separator — v1's `@radix-ui/react-separator` ported to Griffel atoms with no Radix dependency. A\n * separator needs no behaviour beyond correct semantics, so it is a plain `<div>`.\n */\n\nexport type SeparatorOrientation = \"horizontal\" | \"vertical\"\n\nconst useStyles = makeZenithStyles({\n horizontal: {\n backgroundColor: tokens.grayA5,\n flexShrink: 0,\n height: \"1px\",\n width: \"100%\",\n },\n vertical: {\n backgroundColor: tokens.grayA5,\n flexShrink: 0,\n height: \"100%\",\n width: \"1px\",\n },\n})\n\nexport type SeparatorProps = React.ComponentProps<\"div\"> & {\n orientation?: SeparatorOrientation\n /**\n * When `true` the separator is purely decorative and is hidden from assistive technology\n * (`aria-hidden=\"true\"`, no `role`). When `false` it is a meaningful separator and gets\n * `role=\"separator\"` plus `aria-orientation`.\n */\n decorative?: boolean\n}\n\nexport const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n function Separator(\n { className, orientation = \"horizontal\", decorative = true, ...props },\n ref\n ) {\n const styles = useStyles()\n\n const meaningful = !decorative\n\n return (\n <div\n ref={ref}\n data-slot=\"separator\"\n {...{ [SLOT_ATTR]: \"separator\" }}\n data-orientation={orientation}\n role={meaningful ? \"separator\" : undefined}\n aria-orientation={meaningful ? orientation : undefined}\n aria-hidden={decorative ? \"true\" : undefined}\n className={mergeClasses(styles[orientation], className)}\n {...props}\n />\n )\n }\n)\n"],"names":["useStyles","makeZenithStyles","tokens.grayA5","Separator","React","className","orientation","decorative","props","ref","styles","meaningful","jsx","SLOT_ATTR","mergeClasses"],"mappings":"
|
|
1
|
+
{"version":3,"file":"separator.js","sources":["../../../src/components/separator/separator.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\n\n/**\n * Separator — v1's `@radix-ui/react-separator` ported to Griffel atoms with no Radix dependency. A\n * separator needs no behaviour beyond correct semantics, so it is a plain `<div>`.\n */\n\nexport type SeparatorOrientation = \"horizontal\" | \"vertical\"\n\nconst useStyles = makeZenithStyles({\n horizontal: {\n ...boxModel,\n backgroundColor: tokens.grayA5,\n flexShrink: 0,\n height: \"1px\",\n width: \"100%\",\n },\n vertical: {\n ...boxModel,\n backgroundColor: tokens.grayA5,\n flexShrink: 0,\n height: \"100%\",\n width: \"1px\",\n },\n})\n\nexport type SeparatorProps = React.ComponentProps<\"div\"> & {\n orientation?: SeparatorOrientation\n /**\n * When `true` the separator is purely decorative and is hidden from assistive technology\n * (`aria-hidden=\"true\"`, no `role`). When `false` it is a meaningful separator and gets\n * `role=\"separator\"` plus `aria-orientation`.\n */\n decorative?: boolean\n}\n\nexport const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n function Separator(\n { className, orientation = \"horizontal\", decorative = true, ...props },\n ref\n ) {\n const styles = useStyles()\n\n const meaningful = !decorative\n\n return (\n <div\n ref={ref}\n data-slot=\"separator\"\n {...{ [SLOT_ATTR]: \"separator\" }}\n data-orientation={orientation}\n role={meaningful ? \"separator\" : undefined}\n aria-orientation={meaningful ? orientation : undefined}\n aria-hidden={decorative ? \"true\" : undefined}\n className={mergeClasses(styles[orientation], className)}\n {...props}\n />\n )\n }\n)\n"],"names":["useStyles","makeZenithStyles","boxModel","tokens.grayA5","Separator","React","className","orientation","decorative","props","ref","styles","meaningful","jsx","SLOT_ATTR","mergeClasses"],"mappings":";;;;;;AAgBA,MAAMA,IAAYC,EAAiB;AAAA,EACjC,YAAY;AAAA,IACV,GAAGC;AAAA,IACH,iBAAiBC;AAAAA,IACjB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAAA,EAET,UAAU;AAAA,IACR,GAAGD;AAAA,IACH,iBAAiBC;AAAAA,IACjB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAEX,CAAC,GAYYC,IAAYC,EAAM;AAAA,EAC7B,SACE,EAAE,WAAAC,GAAW,aAAAC,IAAc,cAAc,YAAAC,IAAa,IAAM,GAAGC,EAAA,GAC/DC,GACA;AACA,UAAMC,IAASX,EAAA,GAETY,IAAa,CAACJ;AAEpB,WACE,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAH;AAAA,QACA,aAAU;AAAA,QACJ,CAACI,CAAS,GAAG;AAAA,QACnB,oBAAkBP;AAAA,QAClB,MAAMK,IAAa,cAAc;AAAA,QACjC,oBAAkBA,IAAaL,IAAc;AAAA,QAC7C,eAAaC,IAAa,SAAS;AAAA,QACnC,WAAWO,EAAaJ,EAAOJ,CAAW,GAAGD,CAAS;AAAA,QACrD,GAAGG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
|
|
@@ -1,13 +1,15 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import * as
|
|
3
|
-
import { mergeClasses as t, SLOT_ATTR as
|
|
4
|
-
import { makeZenithStyles as
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
|
|
1
|
+
import { jsxs as d, jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import * as p from "react";
|
|
3
|
+
import { mergeClasses as t, SLOT_ATTR as u, shorthands as i } from "@epilot/zenith-runtime/v1";
|
|
4
|
+
import { makeZenithStyles as f } from "../../styles/make-styles.js";
|
|
5
|
+
import { boxModel as o } from "../../styles/host-reset.js";
|
|
6
|
+
import { indigoA4 as g, pinkA4 as k, purpleA4 as b, gray3 as h, gray4 as y, radiusMd as c } from "../../tokens/index.js";
|
|
7
|
+
import { useZenithPaletteTokensWhen as N } from "../../tokens/use-palette-tokens.js";
|
|
8
|
+
const T = f({
|
|
8
9
|
default: {
|
|
9
|
-
|
|
10
|
-
|
|
10
|
+
...o,
|
|
11
|
+
backgroundColor: y,
|
|
12
|
+
...i.borderRadius(c),
|
|
11
13
|
animationName: {
|
|
12
14
|
"0%,100%": { opacity: 1 },
|
|
13
15
|
"50%": { opacity: 0.5 }
|
|
@@ -17,12 +19,14 @@ const N = p({
|
|
|
17
19
|
animationIterationCount: "infinite"
|
|
18
20
|
},
|
|
19
21
|
ai: {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
+
...o,
|
|
23
|
+
backgroundColor: h,
|
|
24
|
+
...i.borderRadius(c),
|
|
22
25
|
position: "relative",
|
|
23
26
|
...i.overflow("hidden")
|
|
24
27
|
},
|
|
25
28
|
spot: {
|
|
29
|
+
...o,
|
|
26
30
|
position: "absolute",
|
|
27
31
|
inset: "-50%",
|
|
28
32
|
...i.borderRadius("50%"),
|
|
@@ -31,7 +35,7 @@ const N = p({
|
|
|
31
35
|
pointerEvents: "none"
|
|
32
36
|
},
|
|
33
37
|
spot1: {
|
|
34
|
-
backgroundImage: `radial-gradient(circle, ${
|
|
38
|
+
backgroundImage: `radial-gradient(circle, ${b} 0%, transparent 65%)`,
|
|
35
39
|
animationName: {
|
|
36
40
|
"0%,100%": { transform: "translate(-20%, 0%) scale(1)" },
|
|
37
41
|
"33%": { transform: "translate(40%, -25%) scale(1.2)" },
|
|
@@ -42,7 +46,7 @@ const N = p({
|
|
|
42
46
|
animationIterationCount: "infinite"
|
|
43
47
|
},
|
|
44
48
|
spot2: {
|
|
45
|
-
backgroundImage: `radial-gradient(circle, ${
|
|
49
|
+
backgroundImage: `radial-gradient(circle, ${k} 0%, transparent 65%)`,
|
|
46
50
|
animationName: {
|
|
47
51
|
"0%,100%": { transform: "translate(20%, 0%) scale(1.1)" },
|
|
48
52
|
"33%": { transform: "translate(-35%, 25%) scale(0.9)" },
|
|
@@ -53,7 +57,7 @@ const N = p({
|
|
|
53
57
|
animationIterationCount: "infinite"
|
|
54
58
|
},
|
|
55
59
|
spot3: {
|
|
56
|
-
backgroundImage: `radial-gradient(circle, ${
|
|
60
|
+
backgroundImage: `radial-gradient(circle, ${g} 0%, transparent 65%)`,
|
|
57
61
|
animationName: {
|
|
58
62
|
"0%,100%": { transform: "translate(0%, 20%) scale(1)" },
|
|
59
63
|
"33%": { transform: "translate(25%, -30%) scale(1.2)" },
|
|
@@ -63,18 +67,18 @@ const N = p({
|
|
|
63
67
|
animationTimingFunction: "ease-in-out",
|
|
64
68
|
animationIterationCount: "infinite"
|
|
65
69
|
}
|
|
66
|
-
}),
|
|
67
|
-
function({ variant: e = "default", className:
|
|
68
|
-
|
|
69
|
-
const a =
|
|
70
|
-
return e === "ai" ? /* @__PURE__ */
|
|
70
|
+
}), D = p.forwardRef(
|
|
71
|
+
function({ variant: e = "default", className: r, children: s, ...m }, l) {
|
|
72
|
+
N(e === "ai");
|
|
73
|
+
const a = T();
|
|
74
|
+
return e === "ai" ? /* @__PURE__ */ d(
|
|
71
75
|
"div",
|
|
72
76
|
{
|
|
73
|
-
ref:
|
|
77
|
+
ref: l,
|
|
74
78
|
"data-slot": "skeleton",
|
|
75
|
-
[
|
|
76
|
-
className: t(a.ai,
|
|
77
|
-
...
|
|
79
|
+
[u]: "skeleton",
|
|
80
|
+
className: t(a.ai, r),
|
|
81
|
+
...m,
|
|
78
82
|
children: [
|
|
79
83
|
/* @__PURE__ */ n(
|
|
80
84
|
"span",
|
|
@@ -97,23 +101,23 @@ const N = p({
|
|
|
97
101
|
className: t(a.spot, a.spot3)
|
|
98
102
|
}
|
|
99
103
|
),
|
|
100
|
-
|
|
104
|
+
s
|
|
101
105
|
]
|
|
102
106
|
}
|
|
103
107
|
) : /* @__PURE__ */ n(
|
|
104
108
|
"div",
|
|
105
109
|
{
|
|
106
|
-
ref:
|
|
110
|
+
ref: l,
|
|
107
111
|
"data-slot": "skeleton",
|
|
108
|
-
[
|
|
109
|
-
className: t(a.default,
|
|
110
|
-
...
|
|
111
|
-
children:
|
|
112
|
+
[u]: "skeleton",
|
|
113
|
+
className: t(a.default, r),
|
|
114
|
+
...m,
|
|
115
|
+
children: s
|
|
112
116
|
}
|
|
113
117
|
);
|
|
114
118
|
}
|
|
115
119
|
);
|
|
116
120
|
export {
|
|
117
|
-
|
|
121
|
+
D as Skeleton
|
|
118
122
|
};
|
|
119
123
|
//# sourceMappingURL=skeleton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.js","sources":["../../../src/components/skeleton/skeleton.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { useZenithPaletteTokensWhen } from \"../../tokens/use-palette-tokens\"\n\n/**\n * Skeleton — v1's loading placeholder ported to Griffel atoms. Two variants, `default` and `ai`.\n */\n\nexport type SkeletonVariant = \"default\" | \"ai\"\n\nconst useStyles = makeZenithStyles({\n default: {\n backgroundColor: tokens.gray4,\n ...shorthands.borderRadius(tokens.radiusMd),\n animationName: {\n \"0%,100%\": { opacity: 1 },\n \"50%\": { opacity: 0.5 },\n },\n animationDuration: \"2s\",\n animationTimingFunction: \"cubic-bezier(0.4,0,0.6,1)\",\n animationIterationCount: \"infinite\",\n },\n ai: {\n backgroundColor: tokens.gray3,\n ...shorthands.borderRadius(tokens.radiusMd),\n position: \"relative\",\n ...shorthands.overflow(\"hidden\"),\n },\n spot: {\n position: \"absolute\",\n inset: \"-50%\",\n ...shorthands.borderRadius(\"50%\"),\n opacity: 0.6,\n filter: \"blur(18px)\",\n pointerEvents: \"none\",\n },\n spot1: {\n backgroundImage: `radial-gradient(circle, ${tokens.purpleA4} 0%, transparent 65%)`,\n animationName: {\n \"0%,100%\": { transform: \"translate(-20%, 0%) scale(1)\" },\n \"33%\": { transform: \"translate(40%, -25%) scale(1.2)\" },\n \"66%\": { transform: \"translate(-10%, 30%) scale(0.9)\" },\n },\n animationDuration: \"10s\",\n animationTimingFunction: \"ease-in-out\",\n animationIterationCount: \"infinite\",\n },\n spot2: {\n backgroundImage: `radial-gradient(circle, ${tokens.pinkA4} 0%, transparent 65%)`,\n animationName: {\n \"0%,100%\": { transform: \"translate(20%, 0%) scale(1.1)\" },\n \"33%\": { transform: \"translate(-35%, 25%) scale(0.9)\" },\n \"66%\": { transform: \"translate(30%, -20%) scale(1.3)\" },\n },\n animationDuration: \"12s\",\n animationTimingFunction: \"ease-in-out\",\n animationIterationCount: \"infinite\",\n },\n spot3: {\n backgroundImage: `radial-gradient(circle, ${tokens.indigoA4} 0%, transparent 65%)`,\n animationName: {\n \"0%,100%\": { transform: \"translate(0%, 20%) scale(1)\" },\n \"33%\": { transform: \"translate(25%, -30%) scale(1.2)\" },\n \"66%\": { transform: \"translate(-30%, 10%) scale(0.8)\" },\n },\n animationDuration: \"14s\",\n animationTimingFunction: \"ease-in-out\",\n animationIterationCount: \"infinite\",\n },\n})\n\nexport type SkeletonProps = React.ComponentProps<\"div\"> & {\n /**\n * `default` is the ordinary loading pulse. `ai` is the placeholder for content being generated,\n * drawn with three drifting colour spots.\n */\n variant?: SkeletonVariant\n}\n\nexport const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n function Skeleton(\n { variant = \"default\", className, children, ...props },\n ref\n ) {\n // The decorative families live in the palette sheet, which is not installed by default\n // (CONVENTIONS rule 3). Only the `ai` variant paints them — purple-a4, pink-a4, indigo-a4.\n // The hook is called unconditionally every render (WP2B2 — hook order); the `variant === \"ai\"`\n // branch lives inside its commit-phase effect, not around this call, so the default variant\n // still installs nothing it never reads.\n useZenithPaletteTokensWhen(variant === \"ai\")\n\n const styles = useStyles()\n\n if (variant === \"ai\") {\n return (\n <div\n ref={ref}\n data-slot=\"skeleton\"\n {...{ [SLOT_ATTR]: \"skeleton\" }}\n className={mergeClasses(styles.ai, className)}\n {...props}\n >\n <span\n aria-hidden=\"true\"\n className={mergeClasses(styles.spot, styles.spot1)}\n />\n <span\n aria-hidden=\"true\"\n className={mergeClasses(styles.spot, styles.spot2)}\n />\n <span\n aria-hidden=\"true\"\n className={mergeClasses(styles.spot, styles.spot3)}\n />\n {children}\n </div>\n )\n }\n\n return (\n <div\n ref={ref}\n data-slot=\"skeleton\"\n {...{ [SLOT_ATTR]: \"skeleton\" }}\n className={mergeClasses(styles.default, className)}\n {...props}\n >\n {children}\n </div>\n )\n }\n)\n"],"names":["useStyles","makeZenithStyles","tokens.gray4","shorthands","tokens.radiusMd","tokens.gray3","tokens.purpleA4","tokens.pinkA4","tokens.indigoA4","Skeleton","React","variant","className","children","props","ref","useZenithPaletteTokensWhen","styles","jsxs","SLOT_ATTR","mergeClasses","jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"skeleton.js","sources":["../../../src/components/skeleton/skeleton.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { useZenithPaletteTokensWhen } from \"../../tokens/use-palette-tokens\"\n\n/**\n * Skeleton — v1's loading placeholder ported to Griffel atoms. Two variants, `default` and `ai`.\n */\n\nexport type SkeletonVariant = \"default\" | \"ai\"\n\nconst useStyles = makeZenithStyles({\n default: {\n ...boxModel,\n backgroundColor: tokens.gray4,\n ...shorthands.borderRadius(tokens.radiusMd),\n animationName: {\n \"0%,100%\": { opacity: 1 },\n \"50%\": { opacity: 0.5 },\n },\n animationDuration: \"2s\",\n animationTimingFunction: \"cubic-bezier(0.4,0,0.6,1)\",\n animationIterationCount: \"infinite\",\n },\n ai: {\n ...boxModel,\n backgroundColor: tokens.gray3,\n ...shorthands.borderRadius(tokens.radiusMd),\n position: \"relative\",\n ...shorthands.overflow(\"hidden\"),\n },\n spot: {\n ...boxModel,\n position: \"absolute\",\n inset: \"-50%\",\n ...shorthands.borderRadius(\"50%\"),\n opacity: 0.6,\n filter: \"blur(18px)\",\n pointerEvents: \"none\",\n },\n spot1: {\n backgroundImage: `radial-gradient(circle, ${tokens.purpleA4} 0%, transparent 65%)`,\n animationName: {\n \"0%,100%\": { transform: \"translate(-20%, 0%) scale(1)\" },\n \"33%\": { transform: \"translate(40%, -25%) scale(1.2)\" },\n \"66%\": { transform: \"translate(-10%, 30%) scale(0.9)\" },\n },\n animationDuration: \"10s\",\n animationTimingFunction: \"ease-in-out\",\n animationIterationCount: \"infinite\",\n },\n spot2: {\n backgroundImage: `radial-gradient(circle, ${tokens.pinkA4} 0%, transparent 65%)`,\n animationName: {\n \"0%,100%\": { transform: \"translate(20%, 0%) scale(1.1)\" },\n \"33%\": { transform: \"translate(-35%, 25%) scale(0.9)\" },\n \"66%\": { transform: \"translate(30%, -20%) scale(1.3)\" },\n },\n animationDuration: \"12s\",\n animationTimingFunction: \"ease-in-out\",\n animationIterationCount: \"infinite\",\n },\n spot3: {\n backgroundImage: `radial-gradient(circle, ${tokens.indigoA4} 0%, transparent 65%)`,\n animationName: {\n \"0%,100%\": { transform: \"translate(0%, 20%) scale(1)\" },\n \"33%\": { transform: \"translate(25%, -30%) scale(1.2)\" },\n \"66%\": { transform: \"translate(-30%, 10%) scale(0.8)\" },\n },\n animationDuration: \"14s\",\n animationTimingFunction: \"ease-in-out\",\n animationIterationCount: \"infinite\",\n },\n})\n\nexport type SkeletonProps = React.ComponentProps<\"div\"> & {\n /**\n * `default` is the ordinary loading pulse. `ai` is the placeholder for content being generated,\n * drawn with three drifting colour spots.\n */\n variant?: SkeletonVariant\n}\n\nexport const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n function Skeleton(\n { variant = \"default\", className, children, ...props },\n ref\n ) {\n // The decorative families live in the palette sheet, which is not installed by default\n // (CONVENTIONS rule 3). Only the `ai` variant paints them — purple-a4, pink-a4, indigo-a4.\n // The hook is called unconditionally every render (WP2B2 — hook order); the `variant === \"ai\"`\n // branch lives inside its commit-phase effect, not around this call, so the default variant\n // still installs nothing it never reads.\n useZenithPaletteTokensWhen(variant === \"ai\")\n\n const styles = useStyles()\n\n if (variant === \"ai\") {\n return (\n <div\n ref={ref}\n data-slot=\"skeleton\"\n {...{ [SLOT_ATTR]: \"skeleton\" }}\n className={mergeClasses(styles.ai, className)}\n {...props}\n >\n <span\n aria-hidden=\"true\"\n className={mergeClasses(styles.spot, styles.spot1)}\n />\n <span\n aria-hidden=\"true\"\n className={mergeClasses(styles.spot, styles.spot2)}\n />\n <span\n aria-hidden=\"true\"\n className={mergeClasses(styles.spot, styles.spot3)}\n />\n {children}\n </div>\n )\n }\n\n return (\n <div\n ref={ref}\n data-slot=\"skeleton\"\n {...{ [SLOT_ATTR]: \"skeleton\" }}\n className={mergeClasses(styles.default, className)}\n {...props}\n >\n {children}\n </div>\n )\n }\n)\n"],"names":["useStyles","makeZenithStyles","boxModel","tokens.gray4","shorthands","tokens.radiusMd","tokens.gray3","tokens.purpleA4","tokens.pinkA4","tokens.indigoA4","Skeleton","React","variant","className","children","props","ref","useZenithPaletteTokensWhen","styles","jsxs","SLOT_ATTR","mergeClasses","jsx"],"mappings":"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"}
|
|
@@ -1,21 +1,26 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import * as
|
|
3
|
-
import { mergeClasses as
|
|
4
|
-
import { makeZenithStyles as
|
|
5
|
-
|
|
1
|
+
import { jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
2
|
+
import * as m from "react";
|
|
3
|
+
import { mergeClasses as h, SLOT_ATTR as c } from "@epilot/zenith-runtime/v1";
|
|
4
|
+
import { makeZenithStyles as l } from "../../styles/make-styles.js";
|
|
5
|
+
import { boxModel as t } from "../../styles/host-reset.js";
|
|
6
|
+
const f = l({
|
|
6
7
|
sm: {
|
|
8
|
+
...t,
|
|
7
9
|
width: "1rem",
|
|
8
10
|
height: "1rem"
|
|
9
11
|
},
|
|
10
12
|
base: {
|
|
13
|
+
...t,
|
|
11
14
|
width: "1.5rem",
|
|
12
15
|
height: "1.5rem"
|
|
13
16
|
},
|
|
14
17
|
lg: {
|
|
18
|
+
...t,
|
|
15
19
|
width: "2.5rem",
|
|
16
20
|
height: "2.5rem"
|
|
17
21
|
},
|
|
18
22
|
xl: {
|
|
23
|
+
...t,
|
|
19
24
|
width: "4rem",
|
|
20
25
|
height: "4rem"
|
|
21
26
|
},
|
|
@@ -51,10 +56,10 @@ const l = c({
|
|
|
51
56
|
animationTimingFunction: "ease-in-out",
|
|
52
57
|
animationIterationCount: "infinite"
|
|
53
58
|
}
|
|
54
|
-
}),
|
|
55
|
-
function({ size:
|
|
56
|
-
const
|
|
57
|
-
return /* @__PURE__ */
|
|
59
|
+
}), k = m.forwardRef(
|
|
60
|
+
function({ size: r = "base", className: n, ...o }, s) {
|
|
61
|
+
const e = f();
|
|
62
|
+
return /* @__PURE__ */ i(
|
|
58
63
|
"svg",
|
|
59
64
|
{
|
|
60
65
|
ref: s,
|
|
@@ -66,15 +71,15 @@ const l = c({
|
|
|
66
71
|
stroke: "currentColor",
|
|
67
72
|
role: "status",
|
|
68
73
|
"data-slot": "spinner",
|
|
69
|
-
[
|
|
70
|
-
className:
|
|
71
|
-
...
|
|
72
|
-
children: /* @__PURE__ */ a("g", { className:
|
|
73
|
-
/* @__PURE__ */
|
|
74
|
-
/* @__PURE__ */
|
|
74
|
+
[c]: "spinner",
|
|
75
|
+
className: h(e[r], n),
|
|
76
|
+
...o,
|
|
77
|
+
children: /* @__PURE__ */ a("g", { className: e.spin, children: [
|
|
78
|
+
/* @__PURE__ */ i("circle", { cx: "12", cy: "12", r: "9.5", strokeWidth: "3", opacity: "0.1" }),
|
|
79
|
+
/* @__PURE__ */ i(
|
|
75
80
|
"circle",
|
|
76
81
|
{
|
|
77
|
-
className:
|
|
82
|
+
className: e.dash,
|
|
78
83
|
cx: "12",
|
|
79
84
|
cy: "12",
|
|
80
85
|
r: "9.5",
|
|
@@ -89,6 +94,6 @@ const l = c({
|
|
|
89
94
|
}
|
|
90
95
|
);
|
|
91
96
|
export {
|
|
92
|
-
|
|
97
|
+
k as Spinner
|
|
93
98
|
};
|
|
94
99
|
//# sourceMappingURL=spinner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spinner.js","sources":["../../../src/components/spinner/spinner.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\n\n/**\n * Spinner — v1's SVG spinner ported to a size-driven style object.\n *\n * v1 sizes this with Tailwind `size-*` utilities and deprecated the `size` prop in favour of a\n * `className` like `size-4`. There is no Tailwind here, so that escape hatch does not exist:\n * `size` is the supported API and the `@deprecated` tag is dropped (CONVENTIONS rule 9).\n */\n\nexport type SpinnerSize = \"sm\" | \"base\" | \"lg\" | \"xl\" | \"2xl\"\n\nconst useStyles = makeZenithStyles({\n sm: {\n width: \"1rem\",\n height: \"1rem\",\n },\n base: {\n width: \"1.5rem\",\n height: \"1.5rem\",\n },\n lg: {\n width: \"2.5rem\",\n height: \"2.5rem\",\n },\n xl: {\n width: \"4rem\",\n height: \"4rem\",\n },\n \"2xl\": {\n width: \"6rem\",\n height: \"6rem\",\n },\n spin: {\n transformOrigin: \"center\",\n animationName: {\n \"100%\": { transform: \"rotate(360deg)\" },\n },\n animationDuration: \"2s\",\n animationTimingFunction: \"linear\",\n animationIterationCount: \"infinite\",\n },\n dash: {\n animationName: {\n \"0%\": {\n strokeDasharray: \"0 150\",\n strokeDashoffset: 0,\n },\n \"47.5%\": {\n strokeDasharray: \"42 150\",\n strokeDashoffset: -16,\n },\n \"95%,100%\": {\n strokeDasharray: \"42 150\",\n strokeDashoffset: -59,\n },\n },\n animationDuration: \"1.5s\",\n animationTimingFunction: \"ease-in-out\",\n animationIterationCount: \"infinite\",\n },\n})\n\nexport type SpinnerProps = React.ComponentProps<\"svg\"> & {\n size?: SpinnerSize\n}\n\nexport const Spinner = React.forwardRef<SVGSVGElement, SpinnerProps>(\n function Spinner({ size = \"base\", className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <svg\n ref={ref}\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n role=\"status\"\n data-slot=\"spinner\"\n {...{ [SLOT_ATTR]: \"spinner\" }}\n className={mergeClasses(styles[size], className)}\n {...props}\n >\n <g className={styles.spin}>\n <circle cx=\"12\" cy=\"12\" r=\"9.5\" strokeWidth=\"3\" opacity=\"0.1\" />\n <circle\n className={styles.dash}\n cx=\"12\"\n cy=\"12\"\n r=\"9.5\"\n strokeWidth=\"3\"\n strokeLinecap=\"round\"\n fill=\"none\"\n />\n </g>\n </svg>\n )\n }\n)\n"],"names":["useStyles","makeZenithStyles","Spinner","React","size","className","props","ref","styles","jsx","SLOT_ATTR","mergeClasses","jsxs"],"mappings":"
|
|
1
|
+
{"version":3,"file":"spinner.js","sources":["../../../src/components/spinner/spinner.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\n\n/**\n * Spinner — v1's SVG spinner ported to a size-driven style object.\n *\n * v1 sizes this with Tailwind `size-*` utilities and deprecated the `size` prop in favour of a\n * `className` like `size-4`. There is no Tailwind here, so that escape hatch does not exist:\n * `size` is the supported API and the `@deprecated` tag is dropped (CONVENTIONS rule 9).\n */\n\nexport type SpinnerSize = \"sm\" | \"base\" | \"lg\" | \"xl\" | \"2xl\"\n\nconst useStyles = makeZenithStyles({\n sm: {\n ...boxModel,\n width: \"1rem\",\n height: \"1rem\",\n },\n base: {\n ...boxModel,\n width: \"1.5rem\",\n height: \"1.5rem\",\n },\n lg: {\n ...boxModel,\n width: \"2.5rem\",\n height: \"2.5rem\",\n },\n xl: {\n ...boxModel,\n width: \"4rem\",\n height: \"4rem\",\n },\n \"2xl\": {\n width: \"6rem\",\n height: \"6rem\",\n },\n spin: {\n transformOrigin: \"center\",\n animationName: {\n \"100%\": { transform: \"rotate(360deg)\" },\n },\n animationDuration: \"2s\",\n animationTimingFunction: \"linear\",\n animationIterationCount: \"infinite\",\n },\n dash: {\n animationName: {\n \"0%\": {\n strokeDasharray: \"0 150\",\n strokeDashoffset: 0,\n },\n \"47.5%\": {\n strokeDasharray: \"42 150\",\n strokeDashoffset: -16,\n },\n \"95%,100%\": {\n strokeDasharray: \"42 150\",\n strokeDashoffset: -59,\n },\n },\n animationDuration: \"1.5s\",\n animationTimingFunction: \"ease-in-out\",\n animationIterationCount: \"infinite\",\n },\n})\n\nexport type SpinnerProps = React.ComponentProps<\"svg\"> & {\n size?: SpinnerSize\n}\n\nexport const Spinner = React.forwardRef<SVGSVGElement, SpinnerProps>(\n function Spinner({ size = \"base\", className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <svg\n ref={ref}\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n role=\"status\"\n data-slot=\"spinner\"\n {...{ [SLOT_ATTR]: \"spinner\" }}\n className={mergeClasses(styles[size], className)}\n {...props}\n >\n <g className={styles.spin}>\n <circle cx=\"12\" cy=\"12\" r=\"9.5\" strokeWidth=\"3\" opacity=\"0.1\" />\n <circle\n className={styles.dash}\n cx=\"12\"\n cy=\"12\"\n r=\"9.5\"\n strokeWidth=\"3\"\n strokeLinecap=\"round\"\n fill=\"none\"\n />\n </g>\n </svg>\n )\n }\n)\n"],"names":["useStyles","makeZenithStyles","boxModel","Spinner","React","size","className","props","ref","styles","jsx","SLOT_ATTR","mergeClasses","jsxs"],"mappings":";;;;;AAkBA,MAAMA,IAAYC,EAAiB;AAAA,EACjC,IAAI;AAAA,IACF,GAAGC;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM;AAAA,IACJ,GAAGA;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA,EAEV,IAAI;AAAA,IACF,GAAGA;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA,EAEV,IAAI;AAAA,IACF,GAAGA;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA,EAEV,OAAO;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM;AAAA,IACJ,iBAAiB;AAAA,IACjB,eAAe;AAAA,MACb,QAAQ,EAAE,WAAW,iBAAA;AAAA,IAAiB;AAAA,IAExC,mBAAmB;AAAA,IACnB,yBAAyB;AAAA,IACzB,yBAAyB;AAAA,EAAA;AAAA,EAE3B,MAAM;AAAA,IACJ,eAAe;AAAA,MACb,MAAM;AAAA,QACJ,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,MAAA;AAAA,MAEpB,SAAS;AAAA,QACP,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,MAAA;AAAA,MAEpB,YAAY;AAAA,QACV,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,MAAA;AAAA,IACpB;AAAA,IAEF,mBAAmB;AAAA,IACnB,yBAAyB;AAAA,IACzB,yBAAyB;AAAA,EAAA;AAE7B,CAAC,GAMYC,IAAUC,EAAM;AAAA,EAC3B,SAAiB,EAAE,MAAAC,IAAO,QAAQ,WAAAC,GAAW,GAAGC,EAAA,GAASC,GAAK;AAC5D,UAAMC,IAAST,EAAA;AAEf,WACE,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,OAAM;AAAA,QACN,OAAM;AAAA,QACN,QAAO;AAAA,QACP,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,QAAO;AAAA,QACP,MAAK;AAAA,QACL,aAAU;AAAA,QACJ,CAACG,CAAS,GAAG;AAAA,QACnB,WAAWC,EAAaH,EAAOJ,CAAI,GAAGC,CAAS;AAAA,QAC9C,GAAGC;AAAA,QAEJ,UAAA,gBAAAM,EAAC,KAAA,EAAE,WAAWJ,EAAO,MACnB,UAAA;AAAA,UAAA,gBAAAC,EAAC,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,OAAM,aAAY,KAAI,SAAQ,MAAA,CAAM;AAAA,UAC9D,gBAAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,EAAO;AAAA,cAClB,IAAG;AAAA,cACH,IAAG;AAAA,cACH,GAAE;AAAA,cACF,aAAY;AAAA,cACZ,eAAc;AAAA,cACd,MAAK;AAAA,YAAA;AAAA,UAAA;AAAA,QACP,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
|
|
@@ -1,44 +1,47 @@
|
|
|
1
1
|
import { jsx as a } from "react/jsx-runtime";
|
|
2
|
-
import * as
|
|
3
|
-
import { mergeClasses as
|
|
4
|
-
import { makeZenithStyles as
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
|
|
2
|
+
import * as l from "react";
|
|
3
|
+
import { mergeClasses as m, SLOT_ATTR as u, shorthands as r } from "@epilot/zenith-runtime/v1";
|
|
4
|
+
import { makeZenithStyles as f } from "../../styles/make-styles.js";
|
|
5
|
+
import { boxModel as d } from "../../styles/host-reset.js";
|
|
6
|
+
import { shadowContainer as C, surfaceRadiusContainer as h, surfaceContainer as p, blurObject as S, shadowObject as j, surfaceRadiusObject as O, surfaceObject as R, borderContainer as w, borderWidthContainer as x, borderObject as y, borderWidthObject as k } from "../../tokens/index.js";
|
|
7
|
+
import { ComposeAsChild as W } from "../slot/compose-as-child.js";
|
|
8
|
+
const g = f({
|
|
8
9
|
panel: {
|
|
9
|
-
|
|
10
|
+
...d,
|
|
11
|
+
backgroundColor: R,
|
|
10
12
|
...r.borderWidth(k),
|
|
11
13
|
...r.borderStyle("solid"),
|
|
12
14
|
...r.borderColor(y),
|
|
13
|
-
borderRadius:
|
|
14
|
-
boxShadow:
|
|
15
|
-
backdropFilter: `blur(${
|
|
15
|
+
borderRadius: O,
|
|
16
|
+
boxShadow: j,
|
|
17
|
+
backdropFilter: `blur(${S})`
|
|
16
18
|
},
|
|
17
19
|
section: {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
+
...d,
|
|
21
|
+
backgroundColor: p,
|
|
22
|
+
...r.borderWidth(x),
|
|
20
23
|
...r.borderStyle("solid"),
|
|
21
|
-
...r.borderColor(
|
|
22
|
-
borderRadius:
|
|
23
|
-
boxShadow:
|
|
24
|
+
...r.borderColor(w),
|
|
25
|
+
borderRadius: h,
|
|
26
|
+
boxShadow: C
|
|
24
27
|
}
|
|
25
|
-
}),
|
|
26
|
-
function({ kind:
|
|
27
|
-
const
|
|
28
|
-
return
|
|
28
|
+
}), Z = l.forwardRef(
|
|
29
|
+
function({ kind: i, asChild: b = !1, className: c, children: o, ...e }, t) {
|
|
30
|
+
const n = g(), s = m(n[i], c);
|
|
31
|
+
return b ? /* @__PURE__ */ a(W, { ...e, ref: t, className: s, children: o }) : /* @__PURE__ */ a(
|
|
29
32
|
"div",
|
|
30
33
|
{
|
|
31
34
|
...e,
|
|
32
|
-
ref:
|
|
35
|
+
ref: t,
|
|
33
36
|
"data-slot": "surface",
|
|
34
37
|
[u]: "surface",
|
|
35
|
-
className:
|
|
38
|
+
className: s,
|
|
36
39
|
children: o
|
|
37
40
|
}
|
|
38
41
|
);
|
|
39
42
|
}
|
|
40
43
|
);
|
|
41
44
|
export {
|
|
42
|
-
|
|
45
|
+
Z as Surface
|
|
43
46
|
};
|
|
44
47
|
//# sourceMappingURL=surface.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"surface.js","sources":["../../../src/components/surface/surface.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { ComposeAsChild } from \"../slot/compose-as-child\"\n\n/** A visual role, not an ARIA role or an elevation scale. */\nexport type SurfaceKind = \"panel\" | \"section\"\n\ntype SurfaceBaseProps = Omit<\n React.ComponentProps<\"div\">,\n \"children\" | \"kind\"\n> & {\n /** `panel` is an object frame; `section` is a container grouping. */\n kind: SurfaceKind\n}\n\nexport type SurfaceProps =\n | (SurfaceBaseProps & { asChild?: false; children?: React.ReactNode })\n | (SurfaceBaseProps & { asChild: true; children: React.ReactElement })\n\n/**\n * A role recipe with no layout opinions. The property shapes deliberately match the other role\n * recipes: per-side border atoms let `mergeClasses` replace a Card's border without a wrapper or\n * stylesheet-order dependency.\n */\nconst useStyles = makeZenithStyles({\n panel: {\n backgroundColor: tokens.surfaceObject,\n ...shorthands.borderWidth(tokens.borderWidthObject),\n ...shorthands.borderStyle(\"solid\"),\n ...shorthands.borderColor(tokens.borderObject),\n borderRadius: tokens.surfaceRadiusObject,\n boxShadow: tokens.shadowObject,\n backdropFilter: `blur(${tokens.blurObject})`,\n },\n section: {\n backgroundColor: tokens.surfaceContainer,\n ...shorthands.borderWidth(tokens.borderWidthContainer),\n ...shorthands.borderStyle(\"solid\"),\n ...shorthands.borderColor(tokens.borderContainer),\n borderRadius: tokens.surfaceRadiusContainer,\n boxShadow: tokens.shadowContainer,\n },\n})\n\n/**\n * One optional wrapper for an approved visual role. In asChild mode Surface intentionally keeps\n * the target's data-slot/SLOT_ATTR identity: a Card remains a Card, while a native child need not\n * pretend to be a component it is not.\n */\nexport const Surface = React.forwardRef<HTMLDivElement, SurfaceProps>(\n function Surface(\n { kind, asChild = false, className, children, ...props },\n ref\n ) {\n const styles = useStyles()\n const composedClassName = mergeClasses(styles[kind], className)\n\n if (asChild)\n return (\n <ComposeAsChild {...props} ref={ref} className={composedClassName}>\n {children as React.ReactElement}\n </ComposeAsChild>\n )\n\n return (\n <div\n {...props}\n ref={ref}\n data-slot=\"surface\"\n {...{ [SLOT_ATTR]: \"surface\" }}\n className={composedClassName}\n >\n {children}\n </div>\n )\n }\n)\n"],"names":["useStyles","makeZenithStyles","tokens.surfaceObject","shorthands","tokens.borderWidthObject","tokens.borderObject","tokens.surfaceRadiusObject","tokens.shadowObject","tokens.blurObject","tokens.surfaceContainer","tokens.borderWidthContainer","tokens.borderContainer","tokens.surfaceRadiusContainer","tokens.shadowContainer","Surface","React","kind","asChild","className","children","props","ref","styles","composedClassName","mergeClasses","ComposeAsChild","jsx","SLOT_ATTR"],"mappings":"
|
|
1
|
+
{"version":3,"file":"surface.js","sources":["../../../src/components/surface/surface.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { ComposeAsChild } from \"../slot/compose-as-child\"\n\n/** A visual role, not an ARIA role or an elevation scale. */\nexport type SurfaceKind = \"panel\" | \"section\"\n\ntype SurfaceBaseProps = Omit<\n React.ComponentProps<\"div\">,\n \"children\" | \"kind\"\n> & {\n /** `panel` is an object frame; `section` is a container grouping. */\n kind: SurfaceKind\n}\n\nexport type SurfaceProps =\n | (SurfaceBaseProps & { asChild?: false; children?: React.ReactNode })\n | (SurfaceBaseProps & { asChild: true; children: React.ReactElement })\n\n/**\n * A role recipe with no layout opinions. The property shapes deliberately match the other role\n * recipes: per-side border atoms let `mergeClasses` replace a Card's border without a wrapper or\n * stylesheet-order dependency.\n */\nconst useStyles = makeZenithStyles({\n panel: {\n ...boxModel,\n backgroundColor: tokens.surfaceObject,\n ...shorthands.borderWidth(tokens.borderWidthObject),\n ...shorthands.borderStyle(\"solid\"),\n ...shorthands.borderColor(tokens.borderObject),\n borderRadius: tokens.surfaceRadiusObject,\n boxShadow: tokens.shadowObject,\n backdropFilter: `blur(${tokens.blurObject})`,\n },\n section: {\n ...boxModel,\n backgroundColor: tokens.surfaceContainer,\n ...shorthands.borderWidth(tokens.borderWidthContainer),\n ...shorthands.borderStyle(\"solid\"),\n ...shorthands.borderColor(tokens.borderContainer),\n borderRadius: tokens.surfaceRadiusContainer,\n boxShadow: tokens.shadowContainer,\n },\n})\n\n/**\n * One optional wrapper for an approved visual role. In asChild mode Surface intentionally keeps\n * the target's data-slot/SLOT_ATTR identity: a Card remains a Card, while a native child need not\n * pretend to be a component it is not.\n */\nexport const Surface = React.forwardRef<HTMLDivElement, SurfaceProps>(\n function Surface(\n { kind, asChild = false, className, children, ...props },\n ref\n ) {\n const styles = useStyles()\n const composedClassName = mergeClasses(styles[kind], className)\n\n if (asChild)\n return (\n <ComposeAsChild {...props} ref={ref} className={composedClassName}>\n {children as React.ReactElement}\n </ComposeAsChild>\n )\n\n return (\n <div\n {...props}\n ref={ref}\n data-slot=\"surface\"\n {...{ [SLOT_ATTR]: \"surface\" }}\n className={composedClassName}\n >\n {children}\n </div>\n )\n }\n)\n"],"names":["useStyles","makeZenithStyles","boxModel","tokens.surfaceObject","shorthands","tokens.borderWidthObject","tokens.borderObject","tokens.surfaceRadiusObject","tokens.shadowObject","tokens.blurObject","tokens.surfaceContainer","tokens.borderWidthContainer","tokens.borderContainer","tokens.surfaceRadiusContainer","tokens.shadowContainer","Surface","React","kind","asChild","className","children","props","ref","styles","composedClassName","mergeClasses","ComposeAsChild","jsx","SLOT_ATTR"],"mappings":";;;;;;;AA8BA,MAAMA,IAAYC,EAAiB;AAAA,EACjC,OAAO;AAAA,IACL,GAAGC;AAAA,IACH,iBAAiBC;AAAAA,IACjB,GAAGC,EAAW,YAAYC,CAAwB;AAAA,IAClD,GAAGD,EAAW,YAAY,OAAO;AAAA,IACjC,GAAGA,EAAW,YAAYE,CAAmB;AAAA,IAC7C,cAAcC;AAAAA,IACd,WAAWC;AAAAA,IACX,gBAAgB,QAAQC,CAAiB;AAAA,EAAA;AAAA,EAE3C,SAAS;AAAA,IACP,GAAGP;AAAA,IACH,iBAAiBQ;AAAAA,IACjB,GAAGN,EAAW,YAAYO,CAA2B;AAAA,IACrD,GAAGP,EAAW,YAAY,OAAO;AAAA,IACjC,GAAGA,EAAW,YAAYQ,CAAsB;AAAA,IAChD,cAAcC;AAAAA,IACd,WAAWC;AAAAA,EAAO;AAEtB,CAAC,GAOYC,IAAUC,EAAM;AAAA,EAC3B,SACE,EAAE,MAAAC,GAAM,SAAAC,IAAU,IAAO,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GACjDC,GACA;AACA,UAAMC,IAASvB,EAAA,GACTwB,IAAoBC,EAAaF,EAAON,CAAI,GAAGE,CAAS;AAE9D,WAAID,sBAECQ,GAAA,EAAgB,GAAGL,GAAO,KAAAC,GAAU,WAAWE,GAC7C,UAAAJ,GACH,IAIF,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGN;AAAA,QACJ,KAAAC;AAAA,QACA,aAAU;AAAA,QACJ,CAACM,CAAS,GAAG;AAAA,QACnB,WAAWJ;AAAA,QAEV,UAAAJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
|