@optiaxiom/react 0.1.0-next.12 → 0.1.0-next.14

package/dist/switch/Switch-css.js

@@ -1,5 +1,5 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-DWW2Oo9s.css';
+import './../assets/src/styles/theme.css.ts.vanilla-D9K5B5ZA.css';
 import './../assets/src/control-base/ControlBase.css.ts.vanilla-DGX7Yb9J.css';
 import './../assets/src/switch/Switch.css.ts.vanilla-BMfNlTAt.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';

package/dist/switch/Switch.js

@@ -3,25 +3,22 @@ import * as RadixSwitch from '@radix-ui/react-switch';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { ControlBase } from '../control-base/ControlBase.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles-css.js';
 import { Text } from '../text/Text.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
-import { container, root, thumb } from './Switch-css.js';
+import { root, thumb, container } from './Switch-css.js';
 
 const Switch = forwardRef(
   ({ children, className, endDecorator, id, size = "md", ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
     return /* @__PURE__ */ jsx(
       ControlBase,
       {
+        control: /* @__PURE__ */ jsx(Box, { asChild: true, ...root(), children: /* @__PURE__ */ jsx(RadixSwitch.Root, { children: /* @__PURE__ */ jsx(Box, { asChild: true, ...thumb({ size }), children: /* @__PURE__ */ jsx(RadixSwitch.Thumb, {}) }) }) }),
         endDecorator,
         id,
-        label: /* @__PURE__ */ jsx(Tooltip, { auto: true, content: children, children: /* @__PURE__ */ jsx(Text, { as: "span", truncate: true, children }) }),
         ref,
         ...container({}, className),
-        ...sprinkleProps,
-        children: /* @__PURE__ */ jsx(Box, { asChild: true, ...root(), children: /* @__PURE__ */ jsx(RadixSwitch.Root, { ...restProps, children: /* @__PURE__ */ jsx(Box, { asChild: true, ...thumb({ size }), children: /* @__PURE__ */ jsx(RadixSwitch.Thumb, {}) }) }) })
+        ...props,
+        children: /* @__PURE__ */ jsx(Tooltip, { auto: true, content: children, children: /* @__PURE__ */ jsx(Text, { as: "span", truncate: true, children }) })
       }
     );
   }

package/dist/table/Table-css.js

@@ -0,0 +1,8 @@
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
+import './../assets/src/table/Table.css.ts.vanilla-C9ntYW9X.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var table = recipeRuntime({base:[{w:'full'},'n7dxra0']});
+var wrapper = recipeRuntime({base:[{bg:'surface',border:'1',borderColor:'border.tertiary',overflow:'auto',rounded:'lg'},'n7dxra1']});
+
+export { table, wrapper };

package/dist/table/Table.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { wrapper, table } from './Table-css.js';
+
+const Table = forwardRef(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx(Box, { ...wrapper({}, className), ...props, children: /* @__PURE__ */ jsx(Box, { asChild: true, ...table(), children: /* @__PURE__ */ jsx("table", { ref, children }) }) })
+);
+Table.displayName = "@optiaxiom/react/Table";
+
+export { Table };

package/dist/table-body/TableBody-css.js

@@ -0,0 +1,7 @@
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
+import './../assets/src/table-body/TableBody.css.ts.vanilla-WI2VmycQ.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var body = recipeRuntime({base:['gt6egm0']});
+
+export { body };

package/dist/table-body/TableBody.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { body } from './TableBody-css.js';
+
+const TableBody = forwardRef(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx(Box, { asChild: true, ...body({}, className), ...props, children: /* @__PURE__ */ jsx("tbody", { ref, children }) })
+);
+TableBody.displayName = "@optiaxiom/react/TableBody";
+
+export { TableBody };

package/dist/table-cell/TableCell-css.js

@@ -0,0 +1,9 @@
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
+import './../assets/src/styles/theme.css.ts.vanilla-D9K5B5ZA.css';
+import './../assets/src/table-row/TableRow.css.ts.vanilla-4BGjgIuZ.css';
+import './../assets/src/table-cell/TableCell.css.ts.vanilla-Bn9ccAMh.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var cell = recipeRuntime({base:[{borderColor:'border.tertiary',borderT:'1',color:'fg.secondary',fontSize:'md',fontWeight:'400',p:'md',transition:'colors'},'_15qsgdy0']});
+
+export { cell };

package/dist/table-cell/TableCell.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { cell } from './TableCell-css.js';
+
+const TableCell = forwardRef(
+  ({ children, className, colSpan, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...cell({}, className), ...props, children: /* @__PURE__ */ jsx("td", { colSpan, ref, children }) });
+  }
+);
+TableCell.displayName = "@optiaxiom/react/TableCell";
+
+export { TableCell };

package/dist/table-head/TableHead.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+
+const TableHead = forwardRef(
+  ({ children, ...props }, ref) => /* @__PURE__ */ jsx(Box, { asChild: true, ...props, children: /* @__PURE__ */ jsx("thead", { ref, children }) })
+);
+TableHead.displayName = "@optiaxiom/react/TableHead";
+
+export { TableHead };

package/dist/table-header-cell/TableHeaderCell-css.js

@@ -0,0 +1,7 @@
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
+import './../assets/src/table-header-cell/TableHeaderCell.css.ts.vanilla-DEMkJMmk.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var head = recipeRuntime({base:[{color:'fg.tertiary',fontSize:'sm',fontWeight:'400',px:'md',py:'sm',textAlign:'start'},'_1nhtayz0']});
+
+export { head };

package/dist/table-header-cell/TableHeaderCell.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { head } from './TableHeaderCell-css.js';
+
+const TableHeaderCell = forwardRef(
+  ({ children, className, colSpan, ...props }, ref) => /* @__PURE__ */ jsx(Box, { asChild: true, ...head({}, className), ...props, children: /* @__PURE__ */ jsx("th", { colSpan, ref, children }) })
+);
+TableHeaderCell.displayName = "@optiaxiom/react/TableHeaderCell";
+
+export { TableHeaderCell };

package/dist/table-row/TableRow-css.js

@@ -0,0 +1,7 @@
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
+import './../assets/src/table-row/TableRow.css.ts.vanilla-4BGjgIuZ.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var row = recipeRuntime({base:['ozx0pm0',{w:'full'}]});
+
+export { row };

package/dist/table-row/TableRow.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { row } from './TableRow-css.js';
+
+const TableRow = forwardRef(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx(Box, { asChild: true, ...row({}, className), ...props, children: /* @__PURE__ */ jsx("tr", { ref, children }) })
+);
+TableRow.displayName = "@optiaxiom/react/TableRow";
+
+export { TableRow };

package/dist/tabs-list/TabsList-css.js

@@ -1,5 +1,5 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-DWW2Oo9s.css';
+import './../assets/src/styles/theme.css.ts.vanilla-D9K5B5ZA.css';
 import './../assets/src/tabs-list/TabsList.css.ts.vanilla-B8IFbvV2.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 

package/dist/tabs-trigger/TabsTrigger-css.js

@@ -1,5 +1,5 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-DWW2Oo9s.css';
+import './../assets/src/styles/theme.css.ts.vanilla-D9K5B5ZA.css';
 import './../assets/src/tabs-trigger/TabsTrigger.css.ts.vanilla-CCcsbANV.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 

package/dist/textarea/Textarea.js

@@ -7,13 +7,21 @@ import { wrapper, textarea } from './Textarea-css.js';
 
 const Textarea = forwardRef(
   ({ className, resize = "none", ...props }, ref) => {
-    return /* @__PURE__ */ jsx(InputBase, { ...wrapper({ resize }, className), ...props, children: /* @__PURE__ */ jsx(Box, { asChild: true, ...textarea(), children: resize === "auto" ? /* @__PURE__ */ jsx(
-      TextareaAutosize,
+    return /* @__PURE__ */ jsx(
+      InputBase,
       {
-        minRows: "minRows" in props ? props.minRows : 3,
-        ref
+        size: "lg",
+        ...wrapper({ resize }, className),
+        ...props,
+        children: /* @__PURE__ */ jsx(Box, { asChild: true, ...textarea(), children: resize === "auto" ? /* @__PURE__ */ jsx(
+          TextareaAutosize,
+          {
+            minRows: "minRows" in props ? props.minRows : 3,
+            ref
+          }
+        ) : /* @__PURE__ */ jsx("textarea", { ref, rows: "rows" in props ? props.rows : 3 }) })
       }
-    ) : /* @__PURE__ */ jsx("textarea", { ref, rows: "rows" in props ? props.rows : 3 }) }) });
+    );
   }
 );
 Textarea.displayName = "@optiaxiom/react/Textarea";

package/dist/toast/Toast-css.js

@@ -1,6 +1,7 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-DWW2Oo9s.css';
-import './../assets/src/toast/Toast.css.ts.vanilla-N6bXbnrT.css';
+import './../assets/src/styles/theme.css.ts.vanilla-D9K5B5ZA.css';
+import './../assets/src/toast-provider/ToastProvider.css.ts.vanilla-C2Olq0Jl.css';
+import './../assets/src/toast/Toast.css.ts.vanilla-D1qN8JIH.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var icon = recipeRuntime({base:[{alignSelf:'start',h:'16',mt:'4',w:'auto'},'_1egjidma']});

package/dist/toast/Toast.js

@@ -34,10 +34,10 @@ const Toast = forwardRef(
           /* @__PURE__ */ jsx(RadixToast.Close, { asChild: true, children: /* @__PURE__ */ jsx(
             Button,
             {
+              appearance: "inverse",
               "aria-label": "close",
               icon: /* @__PURE__ */ jsx(IconX, {}),
-              size: "sm",
-              variant: "solid"
+              size: "sm"
             }
           ) })
         ]

package/dist/toast-action/ToastAction.js

@@ -17,7 +17,7 @@ const ToastAction = forwardRef(
           orientation: "vertical"
         }
       ),
-      /* @__PURE__ */ jsx(Button, { asChild: true, size: "sm", variant: "solid", ...props, children: /* @__PURE__ */ jsx(RadixToast.Action, { altText, ref, children }) })
+      /* @__PURE__ */ jsx(Button, { appearance: "inverse", asChild: true, size: "sm", ...props, children: /* @__PURE__ */ jsx(RadixToast.Action, { altText, ref, children }) })
     ] });
   }
 );

package/dist/toast-provider/ToastProvider-css.js

@@ -2,6 +2,6 @@ import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
 import './../assets/src/toast-provider/ToastProvider.css.ts.vanilla-C2Olq0Jl.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var viewport = recipeRuntime({base:[{justifyContent:'normal',maxH:'full',overflowX:'hidden',overflowY:'auto',p:'24',w:['full','384'],z:'toast'},'kzhil00'],variants:{position:{bottom:'kzhil01','bottom-left':'kzhil02','bottom-right':'kzhil03',top:'kzhil04','top-left':'kzhil05','top-right':'kzhil06'}}});
+var viewport = recipeRuntime({base:[{gap:'md',justifyContent:'normal',maxH:'full',overflowX:'hidden',overflowY:'auto',p:'24',w:['full','384'],z:'toast'},'kzhil00'],variants:{position:{bottom:'kzhil01','bottom-left':'kzhil02','bottom-right':'kzhil03',top:'kzhil04','top-left':'kzhil05','top-right':'kzhil06'}}});
 
 export { viewport };

package/dist/toggle/Toggle.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixToggle from '@radix-ui/react-toggle';
+import { forwardRef } from 'react';
+import { Button } from '../button/Button.js';
+
+const Toggle = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Button, { appearance: "secondary", asChild: true, ...props, children: /* @__PURE__ */ jsx(RadixToggle.Root, { ref, children }) });
+  }
+);
+Toggle.displayName = "@optiaxiom/react/Toggle";
+
+export { Toggle };

package/dist/tokens/colors.js

@@ -64,8 +64,9 @@ const colorPalette = {
   "neutral.1000": "#1C2029",
   "neutral.1100": "#171A23",
   "neutral.1200": "#091E42",
+  "neutral.50/6": "#F9FAFC0F",
   "neutral.50/32": "#F9FAFC52",
-  "neutral.1200/5": "#091E420D",
+  "neutral.1200/4": "#091E420A",
   "neutral.1200/12": "#091E421F",
   "neutral.1200/18": "#091E422E",
   "neutral.1200/22": "#091E4238",
@@ -123,7 +124,7 @@ const colors = {
   "bg.error.solid.hover": colorPalette["red.600"],
   "bg.information": colorPalette["blue.50"],
   "bg.information.solid": colorPalette["blue.600"],
-  "bg.input.disabled": colorPalette["neutral.1200/5"],
+  "bg.input.disabled": colorPalette["neutral.1200/4"],
   "bg.neutral": colorPalette["neutral.75"],
   "bg.neutral.inverse": colorPalette["neutral.800"],
   "bg.neutral.inverse.hover": colorPalette["neutral.900"],
@@ -205,7 +206,7 @@ const colorsDark = {
   "bg.error.solid.hover": colorPalette["red.600"],
   "bg.information": colorPalette["blue.900"],
   "bg.information.solid": colorPalette["blue.600"],
-  "bg.input.disabled": colorPalette["neutral.1200/5"],
+  "bg.input.disabled": colorPalette["neutral.1200/4"],
   "bg.neutral": colorPalette["slate.800"],
   "bg.neutral.inverse": colorPalette["neutral.100"],
   "bg.neutral.inverse.hover": colorPalette["neutral.200"],

package/dist/tokens/size.js

@@ -5,7 +5,8 @@ const size = {
   sm: rem("24px"),
   md: rem("32px"),
   lg: rem("40px"),
-  xl: rem("64px"),
+  xl: rem("48px"),
+  "5xl": rem("80px"),
   "0": "0",
   "1": rem("1px"),
   "2": rem("2px"),

package/dist/tooltip/Tooltip.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
@@ -32,13 +32,27 @@ const Tooltip = forwardRef(
       onChange: onOpenChange,
       prop: openProp
     });
-    return /* @__PURE__ */ jsx(RadixTooltip.Provider, { delayDuration, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsxs(
       RadixTooltip.Root,
       {
+        delayDuration,
         onOpenChange: openProp === void 0 ? (flag) => {
           if (auto && flag && innerRef.current) {
-            const { offsetWidth, scrollWidth } = innerRef.current;
-            if (offsetWidth >= scrollWidth) {
+            let truncated = false;
+            const elements = [innerRef.current];
+            while (!truncated && elements.length) {
+              const element = elements.shift();
+              if (!(element instanceof HTMLElement)) {
+                continue;
+              }
+              const { offsetWidth, scrollWidth } = element;
+              if (offsetWidth < scrollWidth) {
+                truncated = true;
+                break;
+              }
+              elements.push(...element.children);
+            }
+            if (!truncated) {
               return;
             }
           }
@@ -97,7 +111,7 @@ const Tooltip = forwardRef(
           ) }) }) })
         ]
       }
-    ) });
+    );
   }
 );
 Tooltip.displayName = "@optiaxiom/react/Tooltip";