cetec-design-system 1.2.0 → 1.2.1

package/dist/panda.buildinfo.json

@@ -210,13 +210,19 @@
       "boxShadow]___[value:overlay",
       "textStyle]___[value:body.sm",
       "fill]___[value:icon",
+      "top]___[value:50%",
+      "transform]___[value:translate(-50%, -50%) scale(0.95) translateY(-10px)",
+      "animation]___[value:modalScaleIn 150ms ease-out forwards",
+      "animation]___[value:modalScaleOut 150ms ease-out forwards]___[cond:&[data-state=\"closing\"]",
       "textStyle]___[value:heading.xs",
       "textStyle]___[value:mono.sm",
+      "fontWeight]___[value:semibold",
       "gridTemplateColumns]___[value:1fr auto 1fr",
       "marginInline]___[value:8",
       "marginBlock]___[value:12",
       "fill]___[value:icon.decorative",
       "gap]___[value:3",
+      "padding]___[value:8",
       "textStyle]___[value:heading.xs]___[cond:sm",
       "background]___[value:bg.neutral.boldest",
       "width]___[value:sm",
@@ -413,7 +419,6 @@
       "borderBottomColor]___[value:border.selected]___[cond:_current",
       "color]___[value:text]___[cond:_current",
       "fontWeight]___[value:bold]___[cond:_current",
-      "padding]___[value:8",
       "background]___[value:bg.warning]___[cond:_even",
       "background]___[value:surface]___[cond:_odd",
       "color]___[value:text.accent.gold]___[cond:_marker",
@@ -822,12 +827,14 @@
       "modal": [
         "variant]___[value:default]___[recipe:modal",
         "size]___[value:md]___[recipe:modal",
+        "position]___[value:centered]___[recipe:modal",
         "size]___[value:sm]___[recipe:modal",
         "size]___[value:lg]___[recipe:modal",
         "size]___[value:xl]___[recipe:modal",
         "size]___[value:full]___[recipe:modal",
         "size]___[value:mobile]___[recipe:modal",
-        "variant]___[value:confirmation]___[recipe:modal"
+        "variant]___[value:confirmation]___[recipe:modal",
+        "position]___[value:top]___[recipe:modal"
       ],
       "textarea": [
         "size]___[value:md]___[recipe:textarea",

package/dist/preset.js

@@ -1,5 +1,5 @@
 import "@pandacss/dev";
-import { a } from "./cetec-preset-kUkA_FyU.js";
+import { a } from "./cetec-preset-D3bQHejk.js";
 export {
   a as cetecPreset
 };

package/dist/specs/keyframes.json

@@ -132,6 +132,28 @@
         "<Box animationName=\"modalScaleOut\" />",
         "<Box animation=\"modalScaleOut 1s ease-in-out infinite\" />"
       ]
+    },
+    {
+      "name": "modalScaleInTop",
+      "functionExamples": [
+        "css({ animationName: 'modalScaleInTop' })",
+        "css({ animation: 'modalScaleInTop 1s ease-in-out infinite' })"
+      ],
+      "jsxExamples": [
+        "<Box animationName=\"modalScaleInTop\" />",
+        "<Box animation=\"modalScaleInTop 1s ease-in-out infinite\" />"
+      ]
+    },
+    {
+      "name": "modalScaleOutTop",
+      "functionExamples": [
+        "css({ animationName: 'modalScaleOutTop' })",
+        "css({ animation: 'modalScaleOutTop 1s ease-in-out infinite' })"
+      ],
+      "jsxExamples": [
+        "<Box animationName=\"modalScaleOutTop\" />",
+        "<Box animation=\"modalScaleOutTop 1s ease-in-out infinite\" />"
+      ]
     }
   ]
 }

package/dist/specs/recipes.json

@@ -972,6 +972,10 @@
           "full",
           "mobile"
         ],
+        "position": [
+          "centered",
+          "top"
+        ],
         "variant": [
           "default",
           "confirmation"
@@ -979,17 +983,20 @@
       },
       "defaultVariants": {
         "variant": "default",
-        "size": "md"
+        "size": "md",
+        "position": "centered"
       },
       "functionExamples": [
         "modal({ size: 'sm' })",
+        "modal({ position: 'centered' })",
         "modal({ variant: 'default' })",
-        "modal({ size: 'sm', variant: 'default' })"
+        "modal({ size: 'sm', position: 'centered', variant: 'default' })"
       ],
       "jsxExamples": [
         "<Modal size=\"sm\" />",
+        "<Modal position=\"centered\" />",
         "<Modal variant=\"default\" />",
-        "<Modal size=\"sm\" variant=\"default\" />"
+        "<Modal size=\"sm\" position=\"centered\" variant=\"default\" />"
       ]
     },
     {

package/dist/styles.css

@@ -1351,6 +1351,30 @@
       opacity: 0;
       transform: translate(-50%, -50%) scale(0.95) translateY(-10px);
 }
+}
+
+  @keyframes modalScaleInTop {
+    0% {
+      opacity: 0;
+      transform: translateX(-50%) scale(0.95) translateY(-10px);
+}
+
+    100% {
+      opacity: 1;
+      transform: translateX(-50%) scale(1) translateY(0);
+}
+}
+
+  @keyframes modalScaleOutTop {
+    0% {
+      opacity: 1;
+      transform: translateX(-50%) scale(1) translateY(0);
+}
+
+    100% {
+      opacity: 0;
+      transform: translateX(-50%) scale(0.95) translateY(-10px);
+}
 }
 }
 
@@ -3336,7 +3360,6 @@
       margin: var(--cetec-spacing-0);
       padding: var(--cetec-spacing-0);
       background: var(--cetec-colors-surface-overlay);
-      animation: modalScaleIn 150ms ease-out forwards;
       border-radius: 12px;
       outline: var(--cetec-borders-none);
       box-sizing: border-box;
@@ -3350,18 +3373,12 @@
       flex-direction: column;
       box-shadow: var(--cetec-shadows-overlay);
       z-index: var(--cetec-z-index-1101);
-      opacity: 0;
-      transform: translate(-50%, -50%) scale(0.95) translateY(-10px);
-      top: 50%;
       left: 50%;
       width: var(--cetec-sizes-full);
+      max-width: 95vw;
       max-height: 95vh;
 }
 
-    .cetec-modal__container[data-state="closing"] {
-      animation: modalScaleOut 150ms ease-out forwards;
-}
-
     .cetec-modal__header {
       gap: var(--cetec-spacing-12);
       padding-inline: var(--cetec-spacing-20);
@@ -3539,16 +3556,6 @@
       outline-color: var(--cetec-colors-transparent);
 }
 
-    .cetec-textInput__container:is(:read-only, [readonly], [data-read-only=true], [aria-readonly=true]) {
-      opacity: 0.4;
-      cursor: not-allowed;
-}
-
-    .cetec-textInput__container:is(:read-only, [readonly], [data-read-only=true], [aria-readonly=true]):focus-within {
-      border-color: var(--cetec-colors-border-input);
-      outline-color: var(--cetec-colors-transparent);
-}
-
     .group:is(:disabled, [disabled], [data-disabled=true], [aria-disabled=true]) .cetec-textInput__container {
       opacity: 1;
 }
@@ -4983,23 +4990,33 @@
 }
 
   .cetec-modal__container--size_md {
-    max-width: var(--cetec-sizes-xl);
+    width: var(--cetec-sizes-xl);
+}
+
+  .cetec-modal__container--position_centered {
+    animation: modalScaleIn 150ms ease-out forwards;
+    transform: translate(-50%, -50%) scale(0.95) translateY(-10px);
+    top: 50%;
+}
+
+  .cetec-modal__container--position_centered[data-state="closing"] {
+    animation: modalScaleOut 150ms ease-out forwards;
 }
 
   .cetec-modal__container--size_sm {
-    max-width: var(--cetec-sizes-md);
+    width: var(--cetec-sizes-md);
 }
 
   .cetec-modal__container--size_lg {
-    max-width: var(--cetec-sizes-3xl);
+    width: var(--cetec-sizes-3xl);
 }
 
   .cetec-modal__container--size_xl {
-    max-width: var(--cetec-sizes-5xl);
+    width: var(--cetec-sizes-5xl);
 }
 
   .cetec-modal__container--size_full {
-    max-width: 95vw;
+    width: 95vw;
 }
 
   .cetec-modal__container--size_mobile {
@@ -5010,6 +5027,16 @@
     max-height: 100vh;
 }
 
+  .cetec-modal__container--position_top {
+    animation: modalScaleInTop 150ms ease-out forwards;
+    transform: translate(-50%, 0) scale(0.95) translateY(-10px);
+    top: min(2.5vh, var(--cetec-spacing-64));
+}
+
+  .cetec-modal__container--position_top[data-state="closing"] {
+    animation: modalScaleOutTop 150ms ease-out forwards;
+}
+
   .cetec-modal__container--variant_confirmation {
     height: var(--cetec-sizes-fit);
     width: var(--cetec-sizes-md);
@@ -5133,6 +5160,15 @@
       height: var(--cetec-sizes-full);
       max-width: 100vw;
       max-height: 100vh;
+}
+    .cetec-modal__container--position_top {
+      animation: modalScaleIn 150ms ease-out forwards;
+      transform: translate(-50%, -50%) scale(0.95) translateY(-10px);
+      top: 50%;
+}
+
+    .cetec-modal__container--position_top[data-state="closing"] {
+      animation: modalScaleOut 150ms ease-out forwards;
 }
 }
 }
@@ -8902,6 +8938,10 @@
     border: var(--cetec-borders-none);
 }
 
+  .cetec-anim_modalScaleIn_150ms_ease-out_forwards {
+    animation: modalScaleIn 150ms ease-out forwards;
+}
+
   .cetec-p_16 {
     padding: var(--cetec-spacing-16);
 }
@@ -8918,6 +8958,10 @@
     padding: var(--cetec-spacing-24);
 }
 
+  .cetec-p_8 {
+    padding: var(--cetec-spacing-8);
+}
+
   .cetec-p_2 {
     padding: var(--cetec-spacing-2);
 }
@@ -8926,10 +8970,6 @@
     background: bg.surface.subtle;
 }
 
-  .cetec-p_8 {
-    padding: var(--cetec-spacing-8);
-}
-
   .cetec-p_20 {
     padding: var(--cetec-spacing-20);
 }
@@ -16232,6 +16272,10 @@
     padding-inline-end: var(--cetec-spacing-4);
 }
 
+  .cetec-trf_translate\(-50\%\,_-50\%\)_scale\(0\.95\)_translateY\(-10px\) {
+    transform: translate(-50%, -50%) scale(0.95) translateY(-10px);
+}
+
   .cetec-ps_\[31px\] {
     padding-inline-start: 31px;
 }
@@ -16433,6 +16477,10 @@
     align-items: stretch;
 }
 
+  .cetec-fw_semibold {
+    font-weight: semibold;
+}
+
   .cetec-grid-tc_1fr_auto_1fr {
     grid-template-columns: 1fr auto 1fr;
 }
@@ -19033,6 +19081,10 @@
     max-height: 83.333333%;
 }
 
+  .cetec-top_50\% {
+    top: 50%;
+}
+
   .cetec-bd-t-w_1 {
     border-top-width: var(--cetec-border-widths-1);
 }
@@ -26001,6 +26053,10 @@
     border: var(--cetec-borders-none);
 }
 
+  .\[\&\[data-state\=\"closing\"\]\]\:cetec-anim_modalScaleOut_150ms_ease-out_forwards[data-state="closing"] {
+    animation: modalScaleOut 150ms ease-out forwards;
+}
+
   .utility\:cetec-bg_bg\.accent\.neutral\.subtlest[data-utility=true] {
     background: var(--cetec-colors-bg-accent-neutral-subtlest);
 }

package/dist/types/index.d.ts

@@ -2237,6 +2237,10 @@ declare interface ModalVariant {
      * @default "md"
      */
     size: "sm" | "md" | "lg" | "xl" | "full" | "mobile"
+    /**
+     * @default "centered"
+     */
+    position: "centered" | "top"
     /**
      * @default "default"
      */
@@ -2244,7 +2248,7 @@ declare interface ModalVariant {
 }
 
 declare type ModalVariantProps = {
-    [key in keyof ModalVariant]?: ConditionalValue<ModalVariant[key]> | undefined
+    [key in keyof ModalVariant]?: ModalVariant[key] | undefined
 }
 
 declare interface ModernCssProperties {
@@ -19732,7 +19736,7 @@ declare interface UtilityValues {
     	transitionDuration: Tokens["durations"];
     	transition: "all" | "common" | "size" | "position" | "background" | "colors" | "opacity" | "shadow" | "transform";
     	animation: Tokens["animations"];
-    	animationName: "spin" | "ping" | "pulse" | "bounce" | "badgePop" | "badgePopStandalone" | "slideLeft" | "slideRight" | "modalFadeIn" | "modalFadeOut" | "modalScaleIn" | "modalScaleOut";
+    	animationName: "spin" | "ping" | "pulse" | "bounce" | "badgePop" | "badgePopStandalone" | "slideLeft" | "slideRight" | "modalFadeIn" | "modalFadeOut" | "modalScaleIn" | "modalScaleOut" | "modalScaleInTop" | "modalScaleOutTop";
     	animationTimingFunction: Tokens["easings"];
     	animationDuration: Tokens["durations"];
     	animationDelay: Tokens["durations"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cetec-design-system",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Cetec-ERP Design System",
   "type": "module",
   "main": "./dist/index.js",

package/src/recipes/listItem.ts

@@ -13,6 +13,11 @@ export const listItemRecipe = defineSlotRecipe({
     'itemDescription',
     'divider',
   ],
+  staticCss: [
+    {
+      selected: ['*'],
+    },
+  ],
   base: {
     wrapper: {
       ...globalBaseStyles,

package/src/recipes/modal.ts

@@ -19,25 +19,17 @@ const modalBase = {
   container: {
     ...globalBaseStyles,
     position: 'fixed',
-    top: '50%',
     left: '50%',
     display: 'flex',
     flexDirection: 'column',
     width: 'full',
+    maxW: '95vw',
     maxHeight: '95vh',
     bg: 'surface.overlay',
     borderRadius: '12',
     boxShadow: 'overlay',
     outline: 'none',
     zIndex: 1101,
-    // Initial state matches animation start
-    opacity: '0',
-    transform: 'translate(-50%, -50%) scale(0.95) translateY(-10px)',
-    // Animation handled via data-state
-    animation: 'modalScaleIn 150ms ease-out forwards',
-    '&[data-state="closing"]': {
-      animation: 'modalScaleOut 150ms ease-out forwards',
-    },
   },
   header: {
     display: 'flex',
@@ -76,31 +68,41 @@ const modalBase = {
   },
 };
 
+/** Base-like positioning when `position: top` would fight a full-viewport sheet */
+const modalContainerCenteredOverlay = {
+  top: '50%',
+  transform: 'translate(-50%, -50%) scale(0.95) translateY(-10px)',
+  animation: 'modalScaleIn 150ms ease-out forwards',
+  '&[data-state="closing"]': {
+    animation: 'modalScaleOut 150ms ease-out forwards',
+  },
+};
+
 const modalVariants = {
   size: {
     sm: {
       container: {
-        maxWidth: 'md',
+        w: 'md',
       },
     },
     md: {
       container: {
-        maxWidth: 'xl',
+        w: 'xl',
       },
     },
     lg: {
       container: {
-        maxWidth: '3xl',
+        w: '3xl',
       },
     },
     xl: {
       container: {
-        maxWidth: '5xl',
+        w: '5xl',
       },
     },
     full: {
       container: {
-        maxWidth: '95vw',
+        w: '95vw',
       },
     },
     mobile: {
@@ -113,6 +115,24 @@ const modalVariants = {
       },
     },
   },
+  position: {
+    centered: {
+      container: modalContainerCenteredOverlay,
+    },
+    top: {
+      container: {
+        top: 'min(2.5vh, token(spacing.64))',
+        transform: 'translate(-50%, 0) scale(0.95) translateY(-10px)',
+        animation: 'modalScaleInTop 150ms ease-out forwards',
+        '&[data-state="closing"]': {
+          animation: 'modalScaleOutTop 150ms ease-out forwards',
+        },
+        // Align with default centered overlay at `xsDown` (full-viewport sheet):
+        // without this, `top` + fixed offset leaves a gap above the sheet.
+        xsDown: modalContainerCenteredOverlay,
+      },
+    },
+  },
   variant: {
     default: {
       container: {
@@ -149,8 +169,18 @@ export const modalRecipe = defineSlotRecipe({
   ],
   base: modalBase,
   variants: modalVariants,
+  compoundVariants: [
+    {
+      position: 'top',
+      size: 'mobile',
+      css: {
+        container: modalContainerCenteredOverlay,
+      },
+    },
+  ],
   defaultVariants: {
     variant: 'default',
     size: 'md',
+    position: 'centered',
   },
 });

package/src/recipes/textInput.ts

@@ -47,14 +47,6 @@ const textInputBase = {
         borderColor: 'border.input',
       },
     },
-    _readOnly: {
-      opacity: 0.4,
-      cursor: 'not-allowed',
-      _focusWithin: {
-        outlineColor: 'transparent',
-        borderColor: 'border.input',
-      },
-    },
     _groupDisabled: {
       opacity: 1, // let FormField handle disabled state opacity
     },

package/src/styles/utilities/keyframes.ts

@@ -86,4 +86,25 @@ export const keyframes = defineKeyframes({
       transform: 'translate(-50%, -50%) scale(0.95) translateY(-10px)',
     },
   },
+  /** Top-aligned modal: horizontal center only (see modal recipe `position: top`) */
+  modalScaleInTop: {
+    '0%': {
+      opacity: '0',
+      transform: 'translateX(-50%) scale(0.95) translateY(-10px)',
+    },
+    '100%': {
+      opacity: '1',
+      transform: 'translateX(-50%) scale(1) translateY(0)',
+    },
+  },
+  modalScaleOutTop: {
+    '0%': {
+      opacity: '1',
+      transform: 'translateX(-50%) scale(1) translateY(0)',
+    },
+    '100%': {
+      opacity: '0',
+      transform: 'translateX(-50%) scale(0.95) translateY(-10px)',
+    },
+  },
 });