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

package/dist/preset.js

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

package/dist/specs/color-palette.json

@@ -27,8 +27,10 @@
       "bg.cta.bold",
       "bg.danger",
       "bg.danger.bold",
+      "bg.danger.subtle",
       "bg.info",
       "bg.info.bold",
+      "bg.info.subtle",
       "bg.input",
       "bg.neutral",
       "bg.neutral.bold",
@@ -41,8 +43,10 @@
       "bg.slate",
       "bg.success",
       "bg.success.bold",
+      "bg.success.subtle",
       "bg.warning",
       "bg.warning.bold",
+      "bg.warning.subtle",
       "blanket",
       "blue",
       "border",

package/dist/specs/conditions.json

@@ -1309,6 +1309,18 @@
         "<Box margin=\"2\" _collapsed={{ margin: '4' }} />"
       ]
     },
+    {
+      "name": "_new",
+      "value": "&[data-new=true]",
+      "functionExamples": [
+        "css({ margin: { base: '2', _new: '4' } })",
+        "css({ margin: '2', _new: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _new: '4' }} />",
+        "<Box margin=\"2\" _new={{ margin: '4' }} />"
+      ]
+    },
     {
       "name": "_utility",
       "value": "&[data-utility=true]",

package/dist/specs/recipes.json

@@ -250,6 +250,9 @@
         "underline": [
           "true"
         ],
+        "dashedUnderline": [
+          "true"
+        ],
         "truncate": [
           "true"
         ],
@@ -290,24 +293,26 @@
         "label({ bold: true })",
         "label({ italic: true })",
         "label({ underline: true })",
+        "label({ dashedUnderline: true })",
         "label({ truncate: true })",
         "label({ allCaps: true })",
         "label({ size: '10' })",
         "label({ weight: 'light' })",
         "label({ _disabled: true })",
-        "label({ family: 'heading', bold: true, italic: true, underline: true, truncate: true, allCaps: true, size: '10', weight: 'light', _disabled: true })"
+        "label({ family: 'heading', bold: true, italic: true, underline: true, dashedUnderline: true, truncate: true, allCaps: true, size: '10', weight: 'light', _disabled: true })"
       ],
       "jsxExamples": [
         "<Label family=\"heading\" />",
         "<Label bold={true} />",
         "<Label italic={true} />",
         "<Label underline={true} />",
+        "<Label dashedUnderline={true} />",
         "<Label truncate={true} />",
         "<Label allCaps={true} />",
         "<Label size=\"10\" />",
         "<Label weight=\"light\" />",
         "<Label _disabled={true} />",
-        "<Label family=\"heading\" bold={true} italic={true} underline={true} truncate={true} allCaps={true} size=\"10\" weight=\"light\" _disabled={true} />"
+        "<Label family=\"heading\" bold={true} italic={true} underline={true} dashedUnderline={true} truncate={true} allCaps={true} size=\"10\" weight=\"light\" _disabled={true} />"
       ]
     },
     {
@@ -328,6 +333,9 @@
         "underline": [
           "true"
         ],
+        "dashedUnderline": [
+          "true"
+        ],
         "truncate": [
           "true"
         ],
@@ -355,9 +363,6 @@
           "medium",
           "bold",
           "black"
-        ],
-        "_disabled": [
-          "true"
         ]
       },
       "defaultVariants": {
@@ -368,24 +373,24 @@
         "link({ bold: true })",
         "link({ italic: true })",
         "link({ underline: true })",
+        "link({ dashedUnderline: true })",
         "link({ truncate: true })",
         "link({ allCaps: true })",
         "link({ size: '10' })",
         "link({ weight: 'light' })",
-        "link({ _disabled: true })",
-        "link({ family: 'heading', bold: true, italic: true, underline: true, truncate: true, allCaps: true, size: '10', weight: 'light', _disabled: true })"
+        "link({ family: 'heading', bold: true, italic: true, underline: true, dashedUnderline: true, truncate: true, allCaps: true, size: '10', weight: 'light' })"
       ],
       "jsxExamples": [
         "<Link family=\"heading\" />",
         "<Link bold={true} />",
         "<Link italic={true} />",
         "<Link underline={true} />",
+        "<Link dashedUnderline={true} />",
         "<Link truncate={true} />",
         "<Link allCaps={true} />",
         "<Link size=\"10\" />",
         "<Link weight=\"light\" />",
-        "<Link _disabled={true} />",
-        "<Link family=\"heading\" bold={true} italic={true} underline={true} truncate={true} allCaps={true} size=\"10\" weight=\"light\" _disabled={true} />"
+        "<Link family=\"heading\" bold={true} italic={true} underline={true} dashedUnderline={true} truncate={true} allCaps={true} size=\"10\" weight=\"light\" />"
       ]
     },
     {
@@ -588,6 +593,9 @@
         "underline": [
           "true"
         ],
+        "dashedUnderline": [
+          "true"
+        ],
         "truncate": [
           "true"
         ],
@@ -623,22 +631,24 @@
         "text({ bold: true })",
         "text({ italic: true })",
         "text({ underline: true })",
+        "text({ dashedUnderline: true })",
         "text({ truncate: true })",
         "text({ allCaps: true })",
         "text({ size: '10' })",
         "text({ weight: 'light' })",
-        "text({ family: 'heading', bold: true, italic: true, underline: true, truncate: true, allCaps: true, size: '10', weight: 'light' })"
+        "text({ family: 'heading', bold: true, italic: true, underline: true, dashedUnderline: true, truncate: true, allCaps: true, size: '10', weight: 'light' })"
       ],
       "jsxExamples": [
         "<Text family=\"heading\" />",
         "<Text bold={true} />",
         "<Text italic={true} />",
         "<Text underline={true} />",
+        "<Text dashedUnderline={true} />",
         "<Text truncate={true} />",
         "<Text allCaps={true} />",
         "<Text size=\"10\" />",
         "<Text weight=\"light\" />",
-        "<Text family=\"heading\" bold={true} italic={true} underline={true} truncate={true} allCaps={true} size=\"10\" weight=\"light\" />"
+        "<Text family=\"heading\" bold={true} italic={true} underline={true} dashedUnderline={true} truncate={true} allCaps={true} size=\"10\" weight=\"light\" />"
       ]
     },
     {
@@ -692,6 +702,35 @@
         "<Toggle />"
       ]
     },
+    {
+      "name": "autocomplete",
+      "variants": {
+        "layer": [
+          "elevated",
+          "modalFloating"
+        ],
+        "size": [
+          "sm",
+          "md",
+          "lg",
+          "xl"
+        ]
+      },
+      "defaultVariants": {
+        "size": "md",
+        "layer": "elevated"
+      },
+      "functionExamples": [
+        "autocomplete({ layer: 'elevated' })",
+        "autocomplete({ size: 'sm' })",
+        "autocomplete({ layer: 'elevated', size: 'sm' })"
+      ],
+      "jsxExamples": [
+        "<Autocomplete layer=\"elevated\" />",
+        "<Autocomplete size=\"sm\" />",
+        "<Autocomplete layer=\"elevated\" size=\"sm\" />"
+      ]
+    },
     {
       "name": "avatar",
       "variants": {
@@ -827,6 +866,25 @@
         "<Button variant=\"standard\" size=\"sm\" before={true} after={true} />"
       ]
     },
+    {
+      "name": "calendar",
+      "variants": {
+        "type": [
+          "days",
+          "months",
+          "years"
+        ]
+      },
+      "defaultVariants": {
+        "type": "days"
+      },
+      "functionExamples": [
+        "calendar({ type: 'days' })"
+      ],
+      "jsxExamples": [
+        "<Calendar type=\"days\" />"
+      ]
+    },
     {
       "name": "checkbox",
       "variants": {},
@@ -876,23 +934,25 @@
       ]
     },
     {
-      "name": "datePicker",
-      "variants": {
-        "size": [
-          "sm",
-          "md",
-          "lg",
-          "xl"
-        ]
-      },
-      "defaultVariants": {
-        "size": "md"
-      },
+      "name": "dateMenus",
+      "variants": {},
+      "defaultVariants": {},
       "functionExamples": [
-        "datePicker({ size: 'sm' })"
+        "dateMenus()"
       ],
       "jsxExamples": [
-        "<DatePicker size=\"sm\" />"
+        "<DateMenus />"
+      ]
+    },
+    {
+      "name": "dateTimeMenus",
+      "variants": {},
+      "defaultVariants": {},
+      "functionExamples": [
+        "dateTimeMenus()"
+      ],
+      "jsxExamples": [
+        "<DateTimeMenus />"
       ]
     },
     {
@@ -1047,6 +1107,10 @@
     {
       "name": "menu",
       "variants": {
+        "layer": [
+          "elevated",
+          "modalFloating"
+        ],
         "density": [
           "compact",
           "comfortable",
@@ -1057,17 +1121,20 @@
         ]
       },
       "defaultVariants": {
-        "density": "compact"
+        "density": "compact",
+        "layer": "elevated"
       },
       "functionExamples": [
+        "menu({ layer: 'elevated' })",
         "menu({ density: 'compact' })",
         "menu({ panel: true })",
-        "menu({ density: 'compact', panel: true })"
+        "menu({ layer: 'elevated', density: 'compact', panel: true })"
       ],
       "jsxExamples": [
+        "<Menu layer=\"elevated\" />",
         "<Menu density=\"compact\" />",
         "<Menu panel={true} />",
-        "<Menu density=\"compact\" panel={true} />"
+        "<Menu layer=\"elevated\" density=\"compact\" panel={true} />"
       ]
     },
     {
@@ -1112,6 +1179,71 @@
         "<Radio />"
       ]
     },
+    {
+      "name": "segmentedFields",
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg",
+          "xl"
+        ],
+        "field": [
+          "date",
+          "time",
+          "dateTime"
+        ],
+        "range": [
+          "date",
+          "time"
+        ],
+        "before": [
+          "true"
+        ],
+        "after": [
+          "true"
+        ]
+      },
+      "defaultVariants": {
+        "size": "md"
+      },
+      "functionExamples": [
+        "segmentedFields({ size: 'sm' })",
+        "segmentedFields({ field: 'date' })",
+        "segmentedFields({ range: 'date' })",
+        "segmentedFields({ before: true })",
+        "segmentedFields({ after: true })",
+        "segmentedFields({ size: 'sm', field: 'date', range: 'date', before: true, after: true })"
+      ],
+      "jsxExamples": [
+        "<SegmentedFields size=\"sm\" />",
+        "<SegmentedFields field=\"date\" />",
+        "<SegmentedFields range=\"date\" />",
+        "<SegmentedFields before={true} />",
+        "<SegmentedFields after={true} />",
+        "<SegmentedFields size=\"sm\" field=\"date\" range=\"date\" before={true} after={true} />"
+      ]
+    },
+    {
+      "name": "segmentedInputs",
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg",
+          "xl"
+        ]
+      },
+      "defaultVariants": {
+        "size": "md"
+      },
+      "functionExamples": [
+        "segmentedInputs({ size: 'sm' })"
+      ],
+      "jsxExamples": [
+        "<SegmentedInputs size=\"sm\" />"
+      ]
+    },
     {
       "name": "select",
       "variants": {
@@ -1183,23 +1315,18 @@
       ]
     },
     {
-      "name": "timePicker",
+      "name": "timeMenus",
       "variants": {
-        "size": [
-          "sm",
-          "md",
-          "lg",
-          "xl"
+        "stretch": [
+          "true"
         ]
       },
-      "defaultVariants": {
-        "size": "md"
-      },
+      "defaultVariants": {},
       "functionExamples": [
-        "timePicker({ size: 'sm' })"
+        "timeMenus({ stretch: true })"
       ],
       "jsxExamples": [
-        "<TimePicker size=\"sm\" />"
+        "<TimeMenus stretch={true} />"
       ]
     },
     {

package/dist/specs/semantic-tokens.json

@@ -382,6 +382,48 @@
           ],
           "cssVar": "var(--cetec-colors-bg-success-bold-pressed)"
         },
+        {
+          "name": "bg.success.subtle",
+          "values": [
+            {
+              "value": "{colors.green.5}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.green.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--cetec-colors-bg-success-subtle)"
+        },
+        {
+          "name": "bg.success.subtle.hovered",
+          "values": [
+            {
+              "value": "{colors.green.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.green.70}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--cetec-colors-bg-success-subtle-hovered)"
+        },
+        {
+          "name": "bg.success.subtle.pressed",
+          "values": [
+            {
+              "value": "{colors.green.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.green.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--cetec-colors-bg-success-subtle-pressed)"
+        },
         {
           "name": "bg.warning",
           "values": [
@@ -466,6 +508,48 @@
           ],
           "cssVar": "var(--cetec-colors-bg-warning-bold-pressed)"
         },
+        {
+          "name": "bg.warning.subtle",
+          "values": [
+            {
+              "value": "{colors.orange.5}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.orange.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--cetec-colors-bg-warning-subtle)"
+        },
+        {
+          "name": "bg.warning.subtle.hovered",
+          "values": [
+            {
+              "value": "{colors.orange.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.orange.70}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--cetec-colors-bg-warning-subtle-hovered)"
+        },
+        {
+          "name": "bg.warning.subtle.pressed",
+          "values": [
+            {
+              "value": "{colors.orange.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.orange.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--cetec-colors-bg-warning-subtle-pressed)"
+        },
         {
           "name": "bg.danger",
           "values": [
@@ -550,6 +634,48 @@
           ],
           "cssVar": "var(--cetec-colors-bg-danger-bold-pressed)"
         },
+        {
+          "name": "bg.danger.subtle",
+          "values": [
+            {
+              "value": "{colors.red.5}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.red.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--cetec-colors-bg-danger-subtle)"
+        },
+        {
+          "name": "bg.danger.subtle.hovered",
+          "values": [
+            {
+              "value": "{colors.red.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.red.70}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--cetec-colors-bg-danger-subtle-hovered)"
+        },
+        {
+          "name": "bg.danger.subtle.pressed",
+          "values": [
+            {
+              "value": "{colors.red.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.red.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--cetec-colors-bg-danger-subtle-pressed)"
+        },
         {
           "name": "bg.info",
           "values": [
@@ -634,6 +760,48 @@
           ],
           "cssVar": "var(--cetec-colors-bg-info-bold-pressed)"
         },
+        {
+          "name": "bg.info.subtle",
+          "values": [
+            {
+              "value": "{colors.blue.5}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--cetec-colors-bg-info-subtle)"
+        },
+        {
+          "name": "bg.info.subtle.hovered",
+          "values": [
+            {
+              "value": "{colors.blue.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.70}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--cetec-colors-bg-info-subtle-hovered)"
+        },
+        {
+          "name": "bg.info.subtle.pressed",
+          "values": [
+            {
+              "value": "{colors.blue.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--cetec-colors-bg-info-subtle-pressed)"
+        },
         {
           "name": "bg.cta",
           "values": [
@@ -4389,6 +4557,16 @@
           ],
           "cssVar": "var(--cetec-z-index-modal)"
         },
+        {
+          "name": "modalFloating",
+          "values": [
+            {
+              "value": "{zIndex.1102}",
+              "condition": "base"
+            }
+          ],
+          "cssVar": "var(--cetec-z-index-modal-floating)"
+        },
         {
           "name": "tooltip",
           "values": [

package/dist/specs/tokens.json

@@ -3264,6 +3264,11 @@
           "value": 1101,
           "cssVar": "var(--cetec-z-index-1101)"
         },
+        {
+          "name": "1102",
+          "value": 1102,
+          "cssVar": "var(--cetec-z-index-1102)"
+        },
         {
           "name": "1200",
           "value": 1200,