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

package/dist/types/preset.d.ts

@@ -1,5 +1,20 @@
 import { Preset } from '@pandacss/dev';
 
+/**
+ * Panda CSS preset containing Cetec tokens, semantic tokens, recipes,
+ * utilities, patterns, global CSS, and conditions.
+ *
+ * Add this preset to a Panda configuration to generate styles that match the
+ * design system. It extends Panda's base preset while replacing its
+ * `dropShadow` utility and omitting the base `box` and `divider` patterns.
+ *
+ * @example
+ * ```ts
+ * import { cetecPreset } from 'cetec-design-system';
+ *
+ * export default defineConfig({ presets: [cetecPreset] });
+ * ```
+ */
 export declare const cetecPreset: Preset;
 
 export { }

package/package.json

@@ -1,17 +1,20 @@
 {
   "name": "cetec-design-system",
-  "version": "2.2.2-next.0",
+  "version": "2.3.7",
   "description": "Cetec-ERP Design System",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
   "scripts": {
     "prepare": "npx panda codegen && npx simple-git-hooks",
+    "predev": "npm run check:jsdoc",
     "dev": "npx panda --watch & vite",
     "build": "rm -rf dist && PANDA_STATIC=true npx panda && npx panda spec && npx panda ship --outfile ./panda.buildinfo.json && vite build",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "lint:staged": "lint-staged",
+    "check:jsdoc": "node tools/check-public-jsdoc.mjs --warn",
+    "check:jsdoc:strict": "node tools/check-public-jsdoc.mjs",
     "typecheck": "tsc --noEmit",
     "validate": "npm run lint && npm run typecheck",
     "validate:full": "npm run validate && npm run build",
@@ -47,6 +50,7 @@
   "peerDependencies": {
     "@fontsource-variable/recursive": "^5.1.1",
     "@fontsource-variable/ruda": "^5.1.1",
+    "@tanstack/react-form": "^1.0.0",
     "react": "19.0.0",
     "react-dom": "19.0.0"
   },
@@ -67,6 +71,7 @@
     "@storybook/react": "^8.6.17",
     "@storybook/react-vite": "^8.6.17",
     "@storybook/test": "^8.6.17",
+    "@tanstack/react-form": "^1.33.5",
     "@types/node": "^22.15.30",
     "@types/react": "19.0.8",
     "@types/react-dom": "19.0.3",

package/src/recipes/autocomplete.ts

@@ -0,0 +1,266 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+import { globalBaseStyles } from '~/styles/utilities';
+
+const validationStyles = {
+  danger: {
+    borderColor: 'border.danger',
+    outlineColor: 'border.danger',
+  },
+  success: {
+    borderColor: 'border.success',
+    outlineColor: 'border.success',
+  },
+};
+
+const autocompleteBase = {
+  root: {
+    ...globalBaseStyles,
+    '--control-py': 'token(sizes.3)',
+    '--control-px': 'token(sizes.10)',
+    '--control-fs': 'token(sizes.16)',
+    '--control-min-height': 'token(sizes.32)',
+    '--value-gap': 'token(sizes.4)',
+    '--input-min-width': 'token(sizes.80)',
+    '--loading-size': 'token(sizes.20)',
+    position: 'relative',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    width: 'full',
+    minWidth: '0',
+    maxWidth: 'full',
+    fontFamily: 'body',
+    lineHeight: 'default',
+    _disabled: {
+      opacity: 0.4,
+      cursor: 'not-allowed',
+    },
+    _groupDisabled: {
+      opacity: 1,
+    },
+  },
+  control: {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    width: 'full',
+    minWidth: '0',
+    minHeight: 'var(--control-min-height)',
+    py: 'var(--control-py)',
+    ps: 'var(--control-px)',
+    pe: 'var(--control-px)',
+    bg: 'surface',
+    color: 'text',
+    borderWidth: '1',
+    borderStyle: 'solid',
+    borderColor: 'border.input',
+    borderRadius: '4',
+    outlineWidth: '1',
+    outlineStyle: 'solid',
+    outlineColor: 'transparent',
+    cursor: 'text',
+    transitionDuration: 'fast',
+    transitionProperty: 'background, border-color, outline-color',
+    transitionTimingFunction: 'default',
+    _focusWithin: {
+      borderColor: 'border.focused',
+      outlineColor: 'border.focused',
+    },
+    _open: {
+      borderColor: 'border.focused',
+      outlineColor: 'border.focused',
+    },
+    _error: validationStyles.danger,
+    _invalid: validationStyles.danger,
+    _valid: validationStyles.success,
+    _disabled: {
+      bg: 'bg.disabled',
+      borderColor: 'border.disabled',
+      color: 'text.disabled',
+      cursor: 'not-allowed',
+      pointerEvents: 'none',
+      _focusWithin: {
+        borderColor: 'border.disabled',
+        outlineColor: 'transparent',
+      },
+    },
+  },
+  valueContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    flex: '1',
+    flexWrap: 'wrap',
+    minWidth: '0',
+    gap: 'var(--value-gap)',
+  },
+  input: {
+    flexGrow: '1',
+    flexShrink: '0',
+    flexBasis: 'var(--input-min-width)',
+    minWidth: 'var(--input-min-width)',
+    maxWidth: 'full',
+    p: '0',
+    marginBlock: '-3',
+    bg: 'transparent',
+    color: 'text',
+    fontFamily: 'body',
+    fontSize: 'var(--control-fs)',
+    lineHeight: 'default',
+    border: 'none',
+    outline: 'none',
+    _placeholder: {
+      color: 'text.placeholder',
+    },
+    _disabled: {
+      color: 'text.disabled',
+      cursor: 'not-allowed',
+    },
+  },
+  token: {
+    minWidth: '0',
+    maxWidth: 'full',
+    flex: '0 1 auto',
+    _new: {
+      bg: 'transparent',
+      outlineWidth: '1',
+      outlineStyle: 'dashed',
+      outlineColor: 'border.warning',
+    },
+  },
+  overflowIndicator: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    flexShrink: '0',
+    minHeight: 'var(--loading-size)',
+    px: '6',
+    bg: 'bg.neutral',
+    color: 'text.subtle',
+    borderRadius: '999',
+    fontSize: '14',
+    fontWeight: 'medium',
+    lineHeight: 'default',
+    whiteSpace: 'nowrap',
+  },
+  loadingIndicator: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    alignSelf: 'center',
+    flexShrink: '0',
+    ms: 'var(--control-py)',
+    width: 'var(--loading-size)',
+    height: 'var(--loading-size)',
+    _icon: {
+      width: 'var(--loading-size)',
+      height: 'var(--loading-size)',
+    },
+  },
+  listbox: {
+    ...globalBaseStyles,
+    width: 'full',
+    maxHeight: '192',
+    overflowY: 'auto',
+    bg: 'surface',
+    borderRadius: '4',
+    boxShadow: 'overlay',
+    outline: 'none',
+  },
+  status: {
+    display: 'flex',
+    alignItems: 'center',
+    width: 'full',
+    minHeight: '40',
+    px: '12',
+    py: '8',
+    color: 'text.subtle',
+    fontSize: '14',
+    lineHeight: 'default',
+  },
+  liveRegion: {
+    srOnly: true,
+  },
+};
+
+const autocompleteVariants = {
+  layer: {
+    elevated: {
+      listbox: {
+        zIndex: 'elevated',
+      },
+    },
+    modalFloating: {
+      listbox: {
+        zIndex: 'modalFloating',
+      },
+    },
+  },
+  size: {
+    sm: {
+      root: {
+        '--control-py': 'token(sizes.0)',
+        '--control-px': 'token(sizes.8)',
+        '--control-fs': 'token(sizes.14)',
+        '--control-min-height': 'token(sizes.24)',
+        '--value-gap': 'token(sizes.3)',
+        '--input-min-width': 'token(sizes.64)',
+        '--loading-size': 'token(sizes.16)',
+      },
+    },
+    md: {
+      root: {
+        '--control-py': 'token(sizes.3)',
+        '--control-px': 'token(sizes.10)',
+        '--control-fs': 'token(sizes.16)',
+        '--control-min-height': 'token(sizes.32)',
+        '--value-gap': 'token(sizes.4)',
+        '--input-min-width': 'token(sizes.80)',
+        '--loading-size': 'token(sizes.20)',
+      },
+    },
+    lg: {
+      root: {
+        '--control-py': 'token(sizes.7)',
+        '--control-px': 'token(sizes.12)',
+        '--control-fs': 'token(sizes.16)',
+        '--control-min-height': 'token(sizes.40)',
+        '--value-gap': 'token(sizes.5)',
+        '--input-min-width': 'token(sizes.96)',
+        '--loading-size': 'token(sizes.20)',
+      },
+    },
+    xl: {
+      root: {
+        '--control-py': 'token(sizes.9)',
+        '--control-px': 'token(sizes.16)',
+        '--control-fs': 'token(sizes.20)',
+        '--control-min-height': 'token(sizes.48)',
+        '--value-gap': 'token(sizes.6)',
+        '--input-min-width': 'token(sizes.112)',
+        '--loading-size': 'token(sizes.24)',
+      },
+    },
+  },
+};
+
+export const autocompleteRecipe = defineSlotRecipe({
+  className: 'autocomplete',
+  jsx: ['Autocomplete'],
+  slots: [
+    'root',
+    'control',
+    'valueContainer',
+    'input',
+    'token',
+    'overflowIndicator',
+    'loadingIndicator',
+    'listbox',
+    'status',
+    'liveRegion',
+  ],
+  base: autocompleteBase,
+  variants: autocompleteVariants,
+  defaultVariants: {
+    size: 'md',
+    layer: 'elevated',
+  },
+});

package/src/recipes/calendar.ts

@@ -0,0 +1,92 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+import { globalBaseStyles } from '~/styles/utilities';
+
+export const calendarRecipe = defineSlotRecipe({
+  className: 'calendar',
+  jsx: ['Calendar'],
+  slots: ['root', 'header', 'grid', 'weekdayLabel', 'day', 'monthYearGrid'],
+  base: {
+    root: {
+      ...globalBaseStyles,
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      bg: 'surface',
+      width: '278',
+    },
+    header: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: '4',
+      width: 'full',
+      p: '8',
+      borderBottom: 'default',
+      fontFamily: 'mono',
+      fontVariantsProperty: 'mono',
+    },
+    grid: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(7, minmax(0, 1fr))',
+      gap: '4',
+      width: 'fit',
+      p: '8',
+      mx: 'auto',
+    },
+    weekdayLabel: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      userSelect: 'none',
+    },
+    day: {
+      position: 'relative',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontFamily: 'mono',
+      width: '32',
+      height: '32',
+      minWidth: '32',
+      _today: {
+        outline: '1px solid {colors.border.focused}',
+        outlineOffset: '1',
+      },
+      _unavailable: {
+        color: 'text.disabled',
+        cursor: 'not-allowed',
+        pointerEvents: 'none',
+        _hover: {
+          bg: 'transparent',
+        },
+      },
+    },
+    monthYearGrid: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+      gap: '4',
+      width: 'full',
+      p: '8',
+    },
+  },
+  variants: {
+    type: {
+      days: {},
+      months: {
+        day: {
+          width: 'auto',
+          px: '8',
+        },
+      },
+      years: {
+        day: {
+          width: 'auto',
+          px: '8',
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    type: 'days',
+  },
+});

package/src/recipes/chip.ts

@@ -134,6 +134,7 @@ export const chipRecipe = defineSlotRecipe({
       position: 'relative',
       display: 'inline-flex',
       alignItems: 'center',
+      justifyContent: 'center',
       minW: '0',
       flexShrink: '0',
       bg: 'transparent',
@@ -147,6 +148,11 @@ export const chipRecipe = defineSlotRecipe({
       ...buttonStyles,
       w: 'calc(var(--slot-size) + (var(--slot-px) * 2))',
       h: 'calc(var(--slot-size) + (var(--slot-px) * 2))',
+      _icon: {
+        fill: 'icon.decorative',
+        width: 'var(--slot-size)',
+        height: 'var(--slot-size)',
+      },
     },
     slot: {
       display: 'inline-flex',

package/src/recipes/dateMenus.ts

@@ -0,0 +1,40 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+// Content-only slots shared by DateMenu (single Calendar) and DateRangeMenu
+// (two Calendars + a middle divider + a Cancel/Apply footer for the pending
+// selection). The popover chrome itself (bg/radius/shadow) comes from
+// `<Menu>`, not from a slot here, so it isn't duplicated.
+const dateMenusBase = {
+  // Row wrapper for DateRangeMenu's two Calendar instances.
+  calendars: {
+    display: 'flex',
+    alignItems: 'stretch',
+  },
+
+  // Vertical rule between the two calendars.
+  calendarsDivider: {
+    width: '1',
+    alignSelf: 'stretch',
+    bg: 'border',
+  },
+
+  // Right-aligned Cancel/Apply pair for the pending range selection.
+  footer: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    gap: '8',
+    borderTopWidth: '1',
+    borderTopStyle: 'solid',
+    borderColor: 'border',
+    px: '16',
+    py: '8',
+  },
+};
+
+export const dateMenusRecipe = defineSlotRecipe({
+  className: 'dateMenus',
+  jsx: ['DateMenus', 'DateMenu', 'DateRangeMenu'],
+  slots: ['calendars', 'calendarsDivider', 'footer'],
+  base: dateMenusBase,
+});

package/src/recipes/dateTimeMenus.ts

@@ -0,0 +1,43 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+// Content-only slots for DateTimeMenu: a single Calendar + a 4px divider +
+// the same scrollable time columns TimeMenu/TimeRangeMenu use (imported
+// directly from `timeMenus` in the component — the column look lives in one
+// place). The popover chrome itself (bg/radius/shadow) comes from `<Menu>`,
+// not from a slot here. One fixed layout, not range-variant, per the Figma spec.
+const dateTimeMenusBase = {
+  // Row holding the Calendar + divider + time columns, above the footer.
+  content: {
+    display: 'flex',
+    alignItems: 'stretch',
+  },
+
+  // 4px-wide vertical divider between the Calendar and the time columns.
+  divider: {
+    width: '4',
+    alignSelf: 'stretch',
+    bg: 'border',
+  },
+
+  // Right-aligned Cancel/Apply pair — always present per the Figma spec,
+  // even though DateTimeMenu isn't itself a range variant.
+  footer: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    w: 'full',
+    gap: '8',
+    borderTopWidth: '1',
+    borderTopStyle: 'solid',
+    borderColor: 'border',
+    px: '16',
+    py: '8',
+  },
+};
+
+export const dateTimeMenusRecipe = defineSlotRecipe({
+  className: 'dateTimeMenus',
+  jsx: ['DateTimeMenus', 'DateTimeMenu'],
+  slots: ['content', 'divider', 'footer'],
+  base: dateTimeMenusBase,
+});

package/src/recipes/menu.ts

@@ -10,7 +10,6 @@ const menuBase = {
     borderRadius: '4',
     boxShadow: 'overlay',
     overflow: 'hidden',
-    zIndex: '100',
     transitionProperty: 'width, height',
     transitionDuration: 'normal',
     transitionTimingFunction: 'default',
@@ -72,6 +71,18 @@ const menuBase = {
 };
 
 const menuVariants = {
+  layer: {
+    elevated: {
+      wrapper: {
+        zIndex: 'elevated',
+      },
+    },
+    modalFloating: {
+      wrapper: {
+        zIndex: 'modalFloating',
+      },
+    },
+  },
   density: {
     compact: {
       backHeader: {
@@ -131,5 +142,6 @@ export const menuRecipe = defineSlotRecipe({
   variants: menuVariants,
   defaultVariants: {
     density: 'compact',
+    layer: 'elevated',
   },
 });

package/src/recipes/modal.ts

@@ -164,7 +164,7 @@ const modalVariants = {
 
 export const modalRecipe = defineSlotRecipe({
   className: 'modal',
-  jsx: ['Modal', 'ModalHeader', 'ModalBody', 'ModalFooter'],
+  jsx: ['ModalWrapper', 'ModalHeader', 'ModalBody', 'ModalFooter', 'Modal'],
   slots: [
     'positionWrapper',
     'overlay',

package/src/recipes/recipes-slot.ts

@@ -11,8 +11,13 @@ export { chipRecipe } from './chip';
 export { listItemRecipe } from './listItem';
 export { listItemGroupRecipe } from './listItemGroup';
 export { modalRecipe } from './modal';
-export { datePickerRecipe } from './datePicker';
-export { timePickerRecipe } from './timePicker';
 export { breadcrumbsRecipe } from './breadcrumbs';
 export { selectRecipe } from './select';
 export { kbdRecipe } from './kbd';
+export { autocompleteRecipe } from './autocomplete';
+export { segmentedInputsRecipe } from './segmentedInputs';
+export { segmentedFieldsRecipe } from './segmentedFields';
+export { calendarRecipe } from './calendar';
+export { dateMenusRecipe } from './dateMenus';
+export { timeMenusRecipe } from './timeMenus';
+export { dateTimeMenusRecipe } from './dateTimeMenus';