cetec-design-system 2.2.2-next.0 → 2.3.7

package/src/recipes/segmentedFields.ts

@@ -0,0 +1,192 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+import { globalBaseStyles } from '~/styles/utilities';
+
+const segmentedFieldsBase = {
+  container: {
+    ...globalBaseStyles,
+    '--input-py': 'token(sizes.3)',
+    '--input-px': 'token(sizes.10)',
+    '--slot-size': 'token(sizes.20)',
+    '--slot-px': 'token(sizes.6)',
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    width: 'full',
+    py: 'var(--input-py)',
+    px: 'var(--input-px)',
+    bg: 'bg.input',
+    borderWidth: '1',
+    borderStyle: 'solid',
+    borderColor: 'border.input',
+    borderRadius: '4',
+    outlineWidth: '2',
+    outlineOffset: '-1',
+    outlineStyle: 'solid',
+    outlineColor: 'transparent',
+    transitionDuration: 'fast',
+    transitionProperty: 'background, border-color, outline-color',
+    transitionTimingFunction: 'default',
+    '&:focus-within:not(:has(button:focus))': {
+      bg: 'bg.input.pressed',
+      borderColor: 'border.focused',
+      outlineColor: 'border.focused',
+    },
+    _open: {
+      bg: 'bg.input.pressed',
+      borderColor: 'border.focused',
+      outlineColor: 'border.focused',
+    },
+    _disabled: {
+      bg: 'bg.disabled',
+      borderColor: 'border.disabled',
+      cursor: 'not-allowed',
+      pointerEvents: 'none',
+    },
+    _error: {
+      borderColor: 'border.danger',
+      '&:focus-within:not(:has(button:focus))': {
+        borderColor: 'border.danger',
+        outlineColor: 'border.danger',
+      },
+    },
+    _invalid: {
+      borderColor: 'border.danger',
+      '&:focus-within:not(:has(button:focus))': {
+        borderColor: 'border.danger',
+        outlineColor: 'border.danger',
+      },
+    },
+  },
+  slot: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    transitionDuration: 'fast',
+    transitionProperty: 'all',
+    transitionTimingFunction: 'default',
+    flex: '0 0 var(--slot-size)',
+    px: 'var(--slot-px)',
+    fill: 'icon.decorative',
+    pointerEvents: 'none',
+    zIndex: 1,
+  },
+  buttonSlot: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    flex: '0 0 var(--slot-size)',
+    px: '0',
+    zIndex: 1,
+    m: '-1',
+  },
+};
+
+const segmentedFieldsVariants = {
+  size: {
+    sm: {
+      container: {
+        '--input-py': 'token(sizes.0)',
+        '--input-px': 'token(sizes.8)',
+        '--slot-size': 'token(sizes.16)',
+        '--slot-px': 'token(sizes.4)',
+      },
+    },
+    md: {
+      container: {
+        '--input-py': 'token(sizes.3)',
+        '--input-px': 'token(sizes.10)',
+        '--slot-size': 'token(sizes.20)',
+        '--slot-px': 'token(sizes.6)',
+      },
+    },
+    lg: {
+      container: {
+        '--input-py': 'token(sizes.7)',
+        '--input-px': 'token(sizes.12)',
+        '--slot-size': 'token(sizes.24)',
+        '--slot-px': 'token(sizes.8)',
+      },
+    },
+    xl: {
+      container: {
+        '--input-py': 'token(sizes.9)',
+        '--input-px': 'token(sizes.16)',
+        '--slot-size': 'token(sizes.28)',
+        '--slot-px': 'token(sizes.10)',
+      },
+    },
+  },
+  field: {
+    date: {
+      container: {
+        minW: '128',
+      },
+    },
+    time: {
+      container: {
+        minW: '104',
+      },
+    },
+    dateTime: {
+      container: {
+        minW: '216',
+      },
+    },
+  },
+  range: {
+    date: {
+      container: {
+        minW: '248',
+      },
+    },
+    time: {
+      container: {
+        minW: '200',
+      },
+    },
+  },
+  before: {
+    true: {
+      container: {
+        ps: '0',
+      },
+      buttonSlot: {
+        '& button': {
+          borderTopRightRadius: '0',
+          borderBottomRightRadius: '0',
+        },
+      },
+    },
+  },
+  after: {
+    true: {
+      container: {
+        pe: '0',
+      },
+      buttonSlot: {
+        '& button': {
+          borderTopLeftRadius: '0',
+          borderBottomLeftRadius: '0',
+        },
+      },
+    },
+  },
+};
+
+// validate-ignore: recipe-jsx-name-matches-component — shared chrome for the segmented date/time field family
+export const segmentedFieldsRecipe = defineSlotRecipe({
+  className: 'segmentedFields',
+  jsx: [
+    'SegmentedFields',
+    'DateInput',
+    'DateRangeInput',
+    'TimeInput',
+    'TimeRangeInput',
+    'DateTimeInput',
+  ],
+  slots: ['container', 'slot', 'buttonSlot'],
+  base: segmentedFieldsBase,
+  variants: segmentedFieldsVariants,
+  defaultVariants: {
+    size: 'md',
+  },
+});

package/src/recipes/segmentedInputs.ts

@@ -0,0 +1,106 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+import { globalBaseStyles } from '~/styles/utilities';
+
+// Shared low-level styling for segmented input guts (MM/DD/YYYY, HH:MM AM/PM,
+// account-style part numbers, phone-like segments, etc). Higher-level input
+// wrappers own border, background, padding, validation, and open/focus state.
+const segmentedInputsBase = {
+  root: {
+    ...globalBaseStyles,
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '0',
+    width: 'fit',
+    color: 'text',
+    fontFamily: 'mono',
+    lineHeight: 'default',
+    cursor: 'text',
+    userSelect: 'none',
+    flexGrow: '0',
+    flexShrink: '0',
+    flexBasis: 'fit',
+    minW: '0',
+    _disabled: {
+      color: 'text.disabled',
+      cursor: 'not-allowed',
+      pointerEvents: 'none',
+    },
+  },
+
+  // Individual focusable segment span (MM, DD, YYYY, HH, AM/PM, ...)
+  segment: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    outline: 'none',
+    borderRadius: '2',
+    cursor: 'default',
+    userSelect: 'none',
+    fontFamily: 'mono',
+    fontVariantsProperty: 'mono',
+    fontVariantNumeric: 'tabular-nums',
+    textAlign: 'center',
+    color: 'text',
+    _focus: {
+      bg: 'bg.accent.gold.subtlest/75',
+    },
+    _groupDisabled: {
+      color: 'text.disabled',
+    },
+  },
+
+  // The "/" or ":" or " " literal between segments. `minWidth: '0.75em'`
+  // is a deliberate floor, not decoration — the " " separators (minute/AM-PM,
+  // and the gap between a DateTimeInput's date/time halves) render at 0
+  // layout width in the Recursive Variable font at this size/axis regardless
+  // of `whiteSpace: 'pre'` (confirmed: real space character, zero measured
+  // width) — a font-rendering quirk, not a whitespace-collapsing bug. The
+  // floor keeps the visual gap independent of what the glyph itself measures.
+  separator: {
+    color: 'text.placeholder',
+    textAlign: 'center',
+    userSelect: 'none',
+    whiteSpace: 'pre',
+    minWidth: '0.75em',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    '&[data-gap=none]': {
+      minWidth: '0',
+      px: '0',
+    },
+    '&[data-gap=tight]': {
+      minWidth: '0.5em',
+      px: '1',
+    },
+    '&[data-gap=normal]': {
+      minWidth: '0.75em',
+      px: '1',
+    },
+    '&[data-gap=loose]': {
+      minWidth: '1.25em',
+      px: '2',
+    },
+  },
+};
+
+const segmentedInputsVariants = {
+  size: {
+    sm: { root: { fontSize: '14' } },
+    md: { root: { fontSize: '16' } },
+    lg: { root: { fontSize: '16' } },
+    xl: { root: { fontSize: '20' } },
+  },
+};
+
+export const segmentedInputsRecipe = defineSlotRecipe({
+  className: 'segmentedInputs',
+  jsx: ['SegmentedInputs', 'SegmentedInput', 'SegmentedDate', 'SegmentedTime'],
+  slots: ['root', 'segment', 'separator'],
+  base: segmentedInputsBase,
+  variants: segmentedInputsVariants,
+  defaultVariants: {
+    size: 'md',
+  },
+});

package/src/recipes/text.ts

@@ -1,11 +1,9 @@
 import { defineRecipe } from '@pandacss/dev';
 
-import {
-  fontSizes as fontSizeTokens,
-  fontWeights as fontWeightTokens,
-} from '../styles/primitives';
-import { globalBaseStyles } from '../styles/utilities';
-import { fontVariants } from '../styles/utilities';
+import { fontSizes as fontSizeTokens } from '../styles/primitives/fontSizes';
+import { fontWeights as fontWeightTokens } from '../styles/primitives/fontWeights';
+import { fontVariants } from '../styles/utilities/fontVariants';
+import { globalBaseStyles } from '../styles/utilities/recipeGlobalStyles';
 
 const textBase = {
   ...globalBaseStyles,
@@ -65,6 +63,18 @@ const textVariants = {
   underline: {
     true: {
       textDecoration: 'underline',
+      textDecorationThickness: '[0.0625em]',
+      textUnderlineOffset: '[0.15625em]',
+      textDecorationSkipInk: 'all',
+    },
+  },
+  dashedUnderline: {
+    true: {
+      textDecoration: 'underline',
+      textDecorationStyle: 'dashed',
+      textDecorationThickness: '[0.0625em]',
+      textUnderlineOffset: '[0.15625em]',
+      textDecorationSkipInk: 'all',
     },
   },
   truncate: {
@@ -116,38 +126,32 @@ const linkBase = {
   fontWeight: 'medium',
   gap: '1',
   color: 'link',
-  textDecoration: 'none',
-  backgroundImage: 'linear-gradient(90deg, transparent 0% 100%)',
-  backgroundSize: '100% 1px',
-  backgroundRepeat: 'no-repeat',
-  backgroundPositionY: '100%',
-  outlineWidth: '2',
-  outlineStyle: 'solid',
-  outlineColor: 'transparent',
-  outlineOffset: '1',
-  width: 'fit-content',
-  cursor: 'pointer',
+  textDecoration: 'underline',
+  textDecorationThickness: '[0.0625em]',
+  textUnderlineOffset: '[0.15625em]',
+  textDecorationSkipInk: 'all',
+  textDecorationColor: '[color-mix(in srgb, currentColor 30%, transparent)]',
+  transition: 'all',
+  transitionDuration: 'fast',
+  bg: 'none',
   _hover: {
-    color: 'link',
-    backgroundImage: 'linear-gradient(90deg, currentColor 0% 100%)',
+    color: 'link.pressed',
+    textDecorationColor: 'current',
+    textDecorationThickness: '[0.125em]',
   },
   _focusVisible: {
     borderRadius: '4',
     outlineColor: 'border.focused',
   },
-};
-
-const linkVariants = {
-  ...textVariants,
   _disabled: {
-    true: {
-      cursor: 'not-allowed',
-      opacity: 0.4,
-      pointerEvents: 'none',
-    },
+    cursor: 'not-allowed',
+    opacity: 0.4,
+    pointerEvents: 'none',
   },
 };
 
+const linkVariants = { ...textVariants };
+
 const labelBase = {
   fontSize: '16',
   fontWeight: 'normal',

package/src/recipes/timeMenus.ts

@@ -0,0 +1,110 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+// Content-only slots for TimeMenu/TimeRangeMenu's scrollable HR/MIN[/AM-PM]
+// column picker — the popover chrome itself (bg/radius/shadow) comes from
+// `<Menu>`, not from a slot here, so it isn't duplicated. Reused directly by
+// DateTimeMenu for its own time columns (see `dateTimeMenus.ts`) so the
+// column look only lives in one place. Structure/sizing preserves the
+// established picker column treatment (maxHeight, border separators instead
+// of a standalone divider element, hidden scrollbar).
+const timeMenusBase = {
+  // Row of columns (HR | MIN | AM-PM), doubled with its own divider for range.
+  // minH: '0' overrides the flexbox default of min-height:auto on a flex
+  // item, which otherwise floors this box at its content's natural height
+  // and defeats stretching it down to match a shorter sibling (DateTimeMenu's
+  // Calendar) — see the `column` slot below for the full explanation.
+  columns: {
+    display: 'flex',
+    alignItems: 'stretch',
+    minH: '0',
+  },
+
+  // A single scrollable HR/MIN/AM-PM column. `maxHeight` (not `h: 'full'`)
+  // matters here — Menu's own internal wrapper chain (levelsViewport >
+  // levelsTrack > level > list) doesn't propagate a concrete height down to
+  // this element, so `h: 'full'` resolves to "as tall as my content" and
+  // `overflowY: auto` never actually engages; an explicit cap makes the
+  // column bound itself regardless of what any ancestor does. `200` keeps
+  // the existing picker column cap exactly.
+  column: {
+    display: 'flex',
+    flexDirection: 'column',
+    flex: '1',
+    minW: '56',
+    // minH: '0' is the load-bearing part, not maxHeight — a flex item's
+    // default min-height:auto floors it at its content's natural height no
+    // matter what cross-axis stretch or maxHeight say, which silently
+    // defeats overflowY:auto (nothing to scroll if the box just grows to
+    // fit everything). Zeroing it lets maxHeight (standalone) or the
+    // stretch variant's parent-driven height (DateTimeMenu) actually apply.
+    minH: '0',
+    maxHeight: '200',
+    overflowY: 'auto',
+    textAlign: 'center',
+    borderRightWidth: '1',
+    borderRightStyle: 'solid',
+    borderColor: 'border',
+    _last: {
+      borderRight: 'none',
+    },
+    // Hide the scrollbar visually but keep it functional — matches legacy.
+    '&::-webkit-scrollbar': {
+      display: 'none',
+    },
+    scrollbarWidth: 'none',
+  },
+
+  // "HR" / "MIN" / "AM/PM" column label.
+  columnHeader: {
+    position: 'sticky',
+    top: '0',
+    textAlign: 'center',
+    fontSize: '12',
+    fontWeight: 'semibold',
+    color: 'text.subtlest',
+    bg: 'surface',
+    py: '4',
+    borderBottomWidth: '1',
+    borderBottomStyle: 'solid',
+    borderColor: 'border',
+    zIndex: '1',
+  },
+
+  // Right-aligned Cancel/Apply pair — TimeRangeMenu only (TimeMenu commits
+  // immediately per value, same as DateMenu's non-range case).
+  footer: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    gap: '8',
+    borderTopWidth: '1',
+    borderTopStyle: 'solid',
+    borderColor: 'border',
+    px: '16',
+    py: '8',
+  },
+};
+
+const timeMenusVariants = {
+  // DateTimeMenu pairs the columns with a Calendar sibling inside a
+  // stretch-aligned flex row, so the columns can size to match the
+  // Calendar's real rendered height instead of the standalone 200px cap —
+  // without this, the columns clip well short of the taller Calendar next to
+  // them. TimeMenu/TimeRangeMenu have no such sibling to stretch against, so
+  // they keep the fixed cap as their own default.
+  stretch: {
+    true: {
+      column: {
+        maxHeight: 'none',
+      },
+    },
+  },
+};
+
+export const timeMenusRecipe = defineSlotRecipe({
+  className: 'timeMenus',
+  jsx: ['TimeMenus', 'TimeMenu', 'TimeRangeMenu'],
+  slots: ['columns', 'column', 'columnHeader', 'footer'],
+  base: timeMenusBase,
+  variants: timeMenusVariants,
+});

package/src/styles/primitives/zIndex.ts

@@ -12,5 +12,6 @@ export const zIndex = defineTokens.zIndex({
   '1000': { value: 1000 },
   '1100': { value: 1100 },
   '1101': { value: 1101 },
+  '1102': { value: 1102 },
   '1200': { value: 1200 },
 });

package/src/styles/semantics/colors.ts

@@ -129,6 +129,17 @@ export const colors = defineSemanticTokens.colors({
           value: { base: '{colors.green.70}', _dark: '{colors.green.20}' },
         },
       },
+      subtle: {
+        DEFAULT: {
+          value: { base: '{colors.green.5}', _dark: '{colors.green.80}' },
+        },
+        hovered: {
+          value: { base: '{colors.green.10}', _dark: '{colors.green.70}' },
+        },
+        pressed: {
+          value: { base: '{colors.green.20}', _dark: '{colors.green.90}' },
+        },
+      },
     },
     warning: {
       DEFAULT: {
@@ -151,6 +162,17 @@ export const colors = defineSemanticTokens.colors({
           value: { base: '{colors.orange.70}', _dark: '{colors.orange.50}' },
         },
       },
+      subtle: {
+        DEFAULT: {
+          value: { base: '{colors.orange.5}', _dark: '{colors.orange.80}' },
+        },
+        hovered: {
+          value: { base: '{colors.orange.10}', _dark: '{colors.orange.70}' },
+        },
+        pressed: {
+          value: { base: '{colors.orange.20}', _dark: '{colors.orange.90}' },
+        },
+      },
     },
     danger: {
       DEFAULT: {
@@ -169,6 +191,17 @@ export const colors = defineSemanticTokens.colors({
           value: { base: '{colors.red.60}', _dark: '{colors.red.50}' },
         },
       },
+      subtle: {
+        DEFAULT: {
+          value: { base: '{colors.red.5}', _dark: '{colors.red.80}' },
+        },
+        hovered: {
+          value: { base: '{colors.red.10}', _dark: '{colors.red.70}' },
+        },
+        pressed: {
+          value: { base: '{colors.red.20}', _dark: '{colors.red.90}' },
+        },
+      },
     },
     info: {
       DEFAULT: {
@@ -191,6 +224,17 @@ export const colors = defineSemanticTokens.colors({
           value: { base: '{colors.blue.70}', _dark: '{colors.blue.20}' },
         },
       },
+      subtle: {
+        DEFAULT: {
+          value: { base: '{colors.blue.5}', _dark: '{colors.blue.80}' },
+        },
+        hovered: {
+          value: { base: '{colors.blue.10}', _dark: '{colors.blue.70}' },
+        },
+        pressed: {
+          value: { base: '{colors.blue.20}', _dark: '{colors.blue.90}' },
+        },
+      },
     },
     cta: {
       DEFAULT: {

package/src/styles/semantics/zIndex.ts

@@ -6,6 +6,7 @@ import { defineSemanticTokens } from '@pandacss/dev';
  *   elevated  → shadows.elevated                     (menus, dropdowns)
  *   overlay   → shadows.overlay   / surface.overlay  (modal backdrop)
  *   modal     →                                      (modal container, above backdrop)
+ *   modalFloating →                                  (floating content inside a modal)
  *   tooltip   →                                      (always on top)
  */
 export const zIndex = defineSemanticTokens.zIndex({
@@ -14,5 +15,6 @@ export const zIndex = defineSemanticTokens.zIndex({
   elevated: { value: '{zIndex.1000}' },
   overlay: { value: '{zIndex.1100}' },
   modal: { value: '{zIndex.1101}' },
+  modalFloating: { value: '{zIndex.1102}' },
   tooltip: { value: '{zIndex.1200}' },
 });

package/src/styles/utilities/conditions.ts

@@ -21,6 +21,7 @@ export const conditions = {
   collapsed:
     '&:is([aria-collapsed=true], [data-collapsed=true], [data-state="collapsed"])',
   highlighted: '&[data-highlighted=true]',
+  new: '&[data-new=true]',
   complete: '&[data-complete=true]',
   incomplete: '&[data-incomplete=true]',
   dragging: '&[data-dragging=true]',

package/src/styles/utilities/transitions.ts

@@ -1,6 +1,7 @@
 import { defineUtility } from '@pandacss/dev';
 
-import { durations, easings } from '../primitives';
+import { durations } from '../primitives/durations';
+import { easings } from '../primitives/easings';
 
 /**
  * Transition property tokens for use with strictTokens.