@okshaun/components 2.0.0 → 2.0.1

package/dist/index.js

@@ -2,8 +2,8 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { useLayoutEffect, forwardRef, useMemo, createElement, createContext, useContext, useRef, useState, useCallback, useEffect, useSyncExternalStore, useId as useId$1, Children, isValidElement, cloneElement, useReducer } from "react";
 import * as ReactDOM from "react-dom";
-import { c as containerSizes, b as breakpoints } from "./preset-Coz-VwQR.js";
-import { o } from "./preset-Coz-VwQR.js";
+import { c as containerSizes, b as breakpoints } from "./preset-Df8i1OIQ.js";
+import { o } from "./preset-Df8i1OIQ.js";
 function hasWindow() {
   return typeof window !== "undefined";
 }
@@ -6550,7 +6550,9 @@ const label = /* @__PURE__ */ Object.assign(memo(labelFn.recipeFn), {
   },
   getVariantProps: labelFn.getVariantProps
 });
-const linkFn = /* @__PURE__ */ createRecipe("link", {}, []);
+const linkFn = /* @__PURE__ */ createRecipe("link", {
+  "family": "inherit"
+}, []);
 const linkVariantMap = {
   "family": [
     "heading",
@@ -7048,7 +7050,9 @@ const tag = /* @__PURE__ */ Object.assign(memo(tagFn.recipeFn), {
   },
   getVariantProps: tagFn.getVariantProps
 });
-const textFn = /* @__PURE__ */ createRecipe("text", {}, []);
+const textFn = /* @__PURE__ */ createRecipe("text", {
+  "family": "inherit"
+}, []);
 const textVariantMap = {
   "family": [
     "heading",
@@ -7480,11 +7484,13 @@ const button = /* @__PURE__ */ Object.assign(buttonFn, {
     "variant": [
       "default",
       "primary",
-      "hollow",
       "ghost",
+      "subtle",
+      "hollow",
       "danger",
       "selected",
-      "selectedBold"
+      "selectedBold",
+      "selectedSubtle"
     ],
     "size": [
       "sm",
@@ -7802,11 +7808,13 @@ const iconButton = /* @__PURE__ */ Object.assign(iconButtonFn, {
     "variant": [
       "default",
       "primary",
-      "hollow",
       "ghost",
+      "subtle",
+      "hollow",
       "danger",
       "selected",
-      "selectedBold"
+      "selectedBold",
+      "selectedSubtle"
     ],
     "size": [
       "sm",
@@ -9342,9 +9350,7 @@ const Text = (props) => {
     textStyle,
     weight,
     role,
-    // role if use in form input text for refrence, also semantic role overrides if non-semantic tag.
     tabIndex,
-    // tabIndex main use for in list or loop select text using key press focus
     truncate,
     allCaps,
     ...rest
@@ -11998,26 +12004,50 @@ const tokens = {
     "value": "var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-sizes-1) var(--oks-colors-shadow-raised-1-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-raised-2-light)",
     "variable": "var(--oks-shadows-raised-light)"
   },
+  "shadows.raisedLightUp": {
+    "value": "var(--oks-sizes-0) [-1] var(--oks-sizes-1) var(--oks-colors-shadow-raised-1-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-raised-2-light)",
+    "variable": "var(--oks-shadows-raised-light-up)"
+  },
   "shadows.raisedDark": {
     "value": "var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-sizes-1) var(--oks-colors-shadow-raised-1-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-raised-2-dark)",
     "variable": "var(--oks-shadows-raised-dark)"
   },
+  "shadows.raisedDarkUp": {
+    "value": "var(--oks-sizes-0) [-1] var(--oks-sizes-1) var(--oks-colors-shadow-raised-1-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-raised-2-dark)",
+    "variable": "var(--oks-shadows-raised-dark-up)"
+  },
   "shadows.elevatedLight": {
     "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-elevated-1-light), var(--oks-sizes-0) var(--oks-sizes-4) var(--oks-sizes-7) var(--oks-colors-shadow-elevated-2-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-elevated-3-light)",
     "variable": "var(--oks-shadows-elevated-light)"
   },
+  "shadows.elevatedLightUp": {
+    "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-elevated-1-light), var(--oks-sizes-0) [-4] var(--oks-sizes-7) var(--oks-colors-shadow-elevated-2-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-elevated-3-light)",
+    "variable": "var(--oks-shadows-elevated-light-up)"
+  },
   "shadows.elevatedDark": {
     "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-elevated-1-dark), var(--oks-sizes-0) var(--oks-sizes-4) var(--oks-sizes-7) var(--oks-colors-shadow-elevated-2-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-elevated-3-dark)",
     "variable": "var(--oks-shadows-elevated-dark)"
   },
+  "shadows.elevatedDarkUp": {
+    "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-elevated-1-dark), var(--oks-sizes-0) [-4] var(--oks-sizes-7) var(--oks-colors-shadow-elevated-2-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-elevated-3-dark)",
+    "variable": "var(--oks-shadows-elevated-dark-up)"
+  },
   "shadows.overlayLight": {
     "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-overlay-1-light), var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-sizes-12) var(--oks-colors-shadow-overlay-2-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-overlay-3-light)",
     "variable": "var(--oks-shadows-overlay-light)"
   },
+  "shadows.overlayLightUp": {
+    "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-overlay-1-light), var(--oks-sizes-0) [-8] var(--oks-sizes-12) var(--oks-colors-shadow-overlay-2-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-overlay-3-light)",
+    "variable": "var(--oks-shadows-overlay-light-up)"
+  },
   "shadows.overlayDark": {
     "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-overlay-1-dark), var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-sizes-12) var(--oks-colors-shadow-overlay-2-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-overlay-3-dark)",
     "variable": "var(--oks-shadows-overlay-dark)"
   },
+  "shadows.overlayDarkUp": {
+    "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-overlay-1-dark), var(--oks-sizes-0) [-8] var(--oks-sizes-12) var(--oks-colors-shadow-overlay-2-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-overlay-3-dark)",
+    "variable": "var(--oks-shadows-overlay-dark-up)"
+  },
   "shadows.overflowLight": {
     "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-colors-shadow-overflow-1-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-overflow-2-light)",
     "variable": "var(--oks-shadows-overflow-light)"
@@ -12026,38 +12056,6 @@ const tokens = {
     "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-12) var(--oks-colors-shadow-overflow-1-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-overflow-2-dark)",
     "variable": "var(--oks-shadows-overflow-dark)"
   },
-  "shadows.lowLight": {
-    "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-sizes-1) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-3) rgba(30, 30, 30, 0.2)",
-    "variable": "var(--oks-shadows-low-light)"
-  },
-  "shadows.lowDark": {
-    "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-sizes-1) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-3) rgba(0, 0, 0, 0.4)",
-    "variable": "var(--oks-shadows-low-dark)"
-  },
-  "shadows.mediumLight": {
-    "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-4) var(--oks-sizes-4) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-sizes-8) rgba(30, 30, 30, 0.2)",
-    "variable": "var(--oks-shadows-medium-light)"
-  },
-  "shadows.mediumDark": {
-    "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-4) var(--oks-sizes-4) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-sizes-8) rgba(0, 0, 0, 0.4)",
-    "variable": "var(--oks-shadows-medium-dark)"
-  },
-  "shadows.highLight": {
-    "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-4) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-6) var(--oks-sizes-8) var(--oks-sizes-1) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-14) var(--oks-sizes-16) var(--oks-sizes-2) rgba(30, 30, 30, 0.2)",
-    "variable": "var(--oks-shadows-high-light)"
-  },
-  "shadows.highDark": {
-    "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-4) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-6) var(--oks-sizes-8) var(--oks-sizes-1) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-14) var(--oks-sizes-16) var(--oks-sizes-2) rgba(0, 0, 0, 0.4)",
-    "variable": "var(--oks-shadows-high-dark)"
-  },
-  "shadows.insetLight": {
-    "value": "inset var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), inset var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-1) rgba(30, 30, 30, 0.2), inset var(--oks-sizes-0) var(--oks-sizes-3) var(--oks-sizes-2) rgba(30, 30, 30, 0.2)",
-    "variable": "var(--oks-shadows-inset-light)"
-  },
-  "shadows.insetDark": {
-    "value": "inset var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), inset var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-1) rgba(0, 0, 0, 0.4), inset var(--oks-sizes-0) var(--oks-sizes-3) var(--oks-sizes-2) rgba(0, 0, 0, 0.4)",
-    "variable": "var(--oks-shadows-inset-dark)"
-  },
   "sizes.0": {
     "value": "0",
     "variable": "var(--oks-sizes-0)"
@@ -13514,34 +13512,30 @@ const tokens = {
     "value": "var(--oks-shadows-raised)",
     "variable": "var(--oks-shadows-raised)"
   },
+  "shadows.raised.up": {
+    "value": "var(--oks-shadows-raised-up)",
+    "variable": "var(--oks-shadows-raised-up)"
+  },
   "shadows.elevated": {
     "value": "var(--oks-shadows-elevated)",
     "variable": "var(--oks-shadows-elevated)"
   },
+  "shadows.elevated.up": {
+    "value": "var(--oks-shadows-elevated-up)",
+    "variable": "var(--oks-shadows-elevated-up)"
+  },
   "shadows.overlay": {
     "value": "var(--oks-shadows-overlay)",
     "variable": "var(--oks-shadows-overlay)"
   },
+  "shadows.overlay.dark": {
+    "value": "var(--oks-shadows-overlay-dark)",
+    "variable": "var(--oks-shadows-overlay-dark)"
+  },
   "shadows.overflow": {
     "value": "var(--oks-shadows-overflow)",
     "variable": "var(--oks-shadows-overflow)"
   },
-  "shadows.low": {
-    "value": "var(--oks-shadows-low)",
-    "variable": "var(--oks-shadows-low)"
-  },
-  "shadows.medium": {
-    "value": "var(--oks-shadows-medium)",
-    "variable": "var(--oks-shadows-medium)"
-  },
-  "shadows.high": {
-    "value": "var(--oks-shadows-high)",
-    "variable": "var(--oks-shadows-high)"
-  },
-  "shadows.inset": {
-    "value": "var(--oks-shadows-inset)",
-    "variable": "var(--oks-shadows-inset)"
-  },
   "zIndex.base": {
     "value": "var(--oks-z-index-0)",
     "variable": "var(--oks-z-index-base)"
@@ -14969,7 +14963,7 @@ const Calendar = (props) => {
   const totalDays = daysInMonth(viewYear, viewMonth);
   const gridDays = [];
   for (let i = 0; i < firstDay; i++) gridDays.push(null);
-  for (let d = 1; d <= totalDays; d++) gridDays.push(d);
+  for (let day = 1; day <= totalDays; day++) gridDays.push(day);
   while (gridDays.length < 42) gridDays.push(null);
   const [prevYear, prevMonthNum] = prevMonth(viewYear, viewMonth);
   const [nextYear, nextMonthNum] = nextMonth(viewYear, viewMonth);
@@ -14981,9 +14975,9 @@ const Calendar = (props) => {
       onSelect(date);
     }
   };
-  const handleDayKeyDown = (e, day) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
+  const handleDayKeyDown = (event, day) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
       handleDayClick(day);
     }
   };
@@ -15035,22 +15029,22 @@ const Calendar = (props) => {
         role: "grid",
         "aria-label": `${MONTH_NAMES[viewMonth - 1]} ${viewYear}`,
         children: [
-          WEEKDAY_LABELS.map((label2, i) => /* @__PURE__ */ jsx(
+          WEEKDAY_LABELS.map((label2, index2) => /* @__PURE__ */ jsx(
             Text,
             {
               textStyle: "mono.xs",
               allCaps: true,
               className: classes.weekdayLabel,
               role: "columnheader",
-              "aria-label": WEEKDAY_FULL[i],
+              "aria-label": WEEKDAY_FULL[index2],
               children: label2
             },
             label2
           )),
-          CALENDAR_ROW_KEYS.map((rowKey, rowIdx) => {
-            const rowDays = gridDays.slice(rowIdx * 7, rowIdx * 7 + 7);
-            return /* @__PURE__ */ jsx(Box, { role: "row", display: "contents", children: rowDays.map((day, colIdx) => {
-              const weekday = WEEKDAY_FULL[colIdx];
+          CALENDAR_ROW_KEYS.map((rowKey, rowIndex) => {
+            const rowDays = gridDays.slice(rowIndex * 7, rowIndex * 7 + 7);
+            return /* @__PURE__ */ jsx(Box, { role: "row", display: "contents", children: rowDays.map((day, columnIndex) => {
+              const weekday = WEEKDAY_FULL[columnIndex];
               if (!day) {
                 return /* @__PURE__ */ jsx(
                   Box,
@@ -15089,7 +15083,7 @@ const Calendar = (props) => {
                       "aria-label": `${MONTH_NAMES[viewMonth - 1]} ${day}, ${viewYear}${isToday ? ", today" : ""}${isSelected ? ", selected" : ""}`,
                       tabIndex: isUnavailable ? -1 : 0,
                       onClick: () => !isUnavailable && handleDayClick(day),
-                      onKeyDown: (e) => !isUnavailable && handleDayKeyDown(e, day),
+                      onKeyDown: (event) => !isUnavailable && handleDayKeyDown(event, day),
                       children: String(day)
                     }
                   )
@@ -17162,11 +17156,12 @@ const ThemeContext = createContext(
 );
 const THEME_STORAGE_KEY = "cetec-theme-preference";
 function getInitialTheme() {
+  var _a;
   const storedTheme = localStorage.getItem(THEME_STORAGE_KEY);
   if (storedTheme) {
     return storedTheme;
   }
-  if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+  if ((_a = window.matchMedia) == null ? void 0 : _a.call(window, "(prefers-color-scheme: dark)").matches) {
     return "dark";
   }
   return "light";