@optiaxiom/react 0.1.0-next.8 → 0.1.0-next.9

package/dist/alert-dialog/AlertDialog-css.js

@@ -0,0 +1,12 @@
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
+import './../assets/src/styles/theme.css.ts.vanilla-CQvpCMCS.css';
+import './../assets/src/alert-dialog/AlertDialog.css.ts.vanilla-CeDk9JQ5.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:[{rounded:'lg',shadow:'md',z:'popover'},'ot5vc20'],variants:{size:{sm:'ot5vc21',md:'ot5vc22',lg:'ot5vc23'}}});
+var description = recipeRuntime({base:[{fontSize:'md',overflow:'auto',px:'24',py:'16'},'ot5vc26']});
+var footer = recipeRuntime({base:[{flexDirection:'row',gap:'md',justifyContent:'end',px:'24',py:'20'},'ot5vc25']});
+var overlay = recipeRuntime({base:[{bg:'overlay',z:'popover'},'ot5vc24']});
+var title = recipeRuntime({base:[{fontSize:'2xl',fontWeight:'600',pb:'16',pt:'24',px:'24'}]});
+
+export { content, description, footer, overlay, title };

package/dist/alert-dialog/AlertDialog.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
+import { forwardRef } from 'react';
+import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
+import '../animate-presence/PresenceContext.js';
+import { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { Flex } from '../flex/Flex.js';
+import { Paper } from '../paper/Paper.js';
+import { Transition } from '../transition/Transition.js';
+import { overlay, content, title, description, footer } from './AlertDialog-css.js';
+
+const AlertDialog = forwardRef(
+  ({
+    action,
+    appearance = "primary",
+    cancel = "Cancel",
+    children,
+    defaultOpen,
+    onAction,
+    onCancel,
+    onOpenChange,
+    open,
+    size = "sm",
+    title: title$1,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      RadixAlertDialog.Root,
+      {
+        defaultOpen,
+        onOpenChange,
+        open,
+        children: /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(RadixAlertDialog.Portal, { forceMount: true, children: [
+          /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Box, { asChild: true, ...overlay(), children: /* @__PURE__ */ jsx(RadixAlertDialog.Overlay, {}) }) }),
+          /* @__PURE__ */ jsx(Transition, { type: "fade-down", children: /* @__PURE__ */ jsx(Paper, { asChild: true, ...content({ size }), children: /* @__PURE__ */ jsxs(RadixAlertDialog.Content, { ref, ...props, children: [
+            /* @__PURE__ */ jsx(Box, { asChild: true, ...title(), children: /* @__PURE__ */ jsx(RadixAlertDialog.Title, { children: title$1 }) }),
+            /* @__PURE__ */ jsx(Box, { asChild: true, ...description(), children: /* @__PURE__ */ jsx(RadixAlertDialog.Description, { children }) }),
+            /* @__PURE__ */ jsxs(Flex, { ...footer(), children: [
+              /* @__PURE__ */ jsx(RadixAlertDialog.Cancel, { asChild: true, children: /* @__PURE__ */ jsx(Button, { appearance: "secondary", onClick: onCancel, children: cancel }) }),
+              /* @__PURE__ */ jsx(RadixAlertDialog.Action, { asChild: true, children: /* @__PURE__ */ jsx(Button, { appearance, onClick: onAction, children: action }) })
+            ] })
+          ] }) }) })
+        ] }) })
+      }
+    );
+  }
+);
+AlertDialog.displayName = "@optiaxiom/react/AlertDialog";
+
+export { AlertDialog };

package/dist/assets/src/alert-dialog/AlertDialog.css.ts.vanilla-CeDk9JQ5.css

@@ -0,0 +1,29 @@
+@layer optiaxiom._1kfj4ga1;
+@layer optiaxiom._1kfj4ga1 {
+  .ot5vc20 {
+    left: 50%;
+    max-width: 90dvw;
+    position: fixed;
+    top: 50%;
+    translate: -50% -50%;
+  }
+  .ot5vc21 {
+    width: 375px;
+  }
+  .ot5vc22 {
+    width: 600px;
+  }
+  .ot5vc23 {
+    width: 800px;
+  }
+  .ot5vc24 {
+    inset: 0;
+    position: fixed;
+  }
+  .ot5vc25 {
+    border-top: 1px solid var(--ax-colors-border-secondary);
+  }
+  .ot5vc26 {
+    max-height: 50dvh;
+  }
+}

package/dist/assets/src/button/{Button.css.ts.vanilla-BopXGX13.css → Button.css.ts.vanilla-CmOG82Kg.css}

@@ -1,97 +1,78 @@
 @layer optiaxiom._1kfj4ga1;
 @layer optiaxiom._1kfj4ga1 {
-  ._1gqmi2d3 {
+  ._1gqmi2d4 {
     border-radius: var(--ax-borderRadius-sm);
     cursor: pointer;
+    padding-inline: var(--_1gqmi2d3);
     position: relative;
     text-decoration: none;
     user-select: none;
   }
-  ._1gqmi2d3:active:not([data-disabled="true"]) {
+  ._1gqmi2d4:active:not([data-disabled]) {
     box-shadow: var(--ax-boxShadow-inner);
   }
-  ._1gqmi2d3:focus-visible {
+  ._1gqmi2d4:focus-visible {
+    --tw-ring-offset-width: 0;
+    outline: 2px solid var(--ax-colors-outline-brand);
     outline-offset: 1px;
-    outline-style: solid;
-    outline-width: 2px;
   }
-  ._1gqmi2d3[data-disabled="true"] {
+  ._1gqmi2d4[data-disabled] {
     cursor: not-allowed;
   }
-  ._1sewcgl0[data-orientation="horizontal"] ._1gqmi2d3:not(:first-child):not(:last-child) {
+  ._1sewcgl0[data-orientation="horizontal"] ._1gqmi2d4:not(:first-child):not(:last-child) {
     border-inline-width: 0.5px;
   }
-  ._1sewcgl0[data-orientation="horizontal"] ._1gqmi2d3:not(:only-child):first-child {
+  ._1sewcgl0[data-orientation="horizontal"] ._1gqmi2d4:not(:only-child):first-child {
     border-bottom-right-radius: 0;
     border-right-width: 0.5px;
     border-top-right-radius: 0;
   }
-  ._1sewcgl0[data-orientation="horizontal"] ._1gqmi2d3:not(:only-child):last-child {
+  ._1sewcgl0[data-orientation="horizontal"] ._1gqmi2d4:not(:only-child):last-child {
     border-bottom-left-radius: 0;
     border-left-width: 0.5px;
     border-top-left-radius: 0;
   }
-  ._1sewcgl0[data-orientation="vertical"] ._1gqmi2d3:not(:first-child):not(:last-child) {
+  ._1sewcgl0[data-orientation="vertical"] ._1gqmi2d4:not(:first-child):not(:last-child) {
     border-block-width: 0.5px;
   }
-  ._1sewcgl0[data-orientation="vertical"] ._1gqmi2d3:not(:only-child):first-child {
+  ._1sewcgl0[data-orientation="vertical"] ._1gqmi2d4:not(:only-child):first-child {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border-bottom-width: 0.5px;
   }
-  ._1sewcgl0[data-orientation="vertical"] ._1gqmi2d3:not(:only-child):last-child {
+  ._1sewcgl0[data-orientation="vertical"] ._1gqmi2d4:not(:only-child):last-child {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     border-top-width: 0.5px;
   }
-  ._1sewcgl0[data-orientation] ._1gqmi2d3:not(:first-child):not(:last-child) {
+  ._1sewcgl0[data-orientation] ._1gqmi2d4:not(:first-child):not(:last-child) {
     border-radius: 0;
   }
-  ._1gqmi2d4 {
+  ._1gqmi2d5 {
     --_1gqmi2d0: var(--ax-colors-bg-error-solid);
     --_1gqmi2d1: var(--ax-colors-bg-error-solid-hover);
     --_1gqmi2d2: var(--ax-colors-bg-error-subtle);
   }
-  ._1gqmi2d4:focus-visible {
-    outline-color: var(--ax-colors-red-200);
-  }
-  ._1gqmi2d5 {
+  ._1gqmi2d6 {
     --_1gqmi2d0: var(--ax-colors-bg-brand-solid);
     --_1gqmi2d1: var(--ax-colors-bg-brand-solid-hover);
     --_1gqmi2d2: var(--ax-colors-bg-brand-subtle);
   }
-  ._1gqmi2d5:focus-visible {
-    outline-color: var(--ax-colors-brand-300);
-  }
-  ._1gqmi2d6 {
+  ._1gqmi2d7 {
     --_1gqmi2d0: var(--ax-colors-fg-secondary);
     --_1gqmi2d1: var(--ax-colors-fg-secondary-hover);
     --_1gqmi2d2: var(--ax-colors-bg-secondary-hover);
   }
-  ._1gqmi2d6:focus-visible {
-    outline-color: var(--ax-colors-neutral-500);
-  }
-  ._1gqmi2d7 {
-    background-color: transparent;
-    border-color: var(--_1gqmi2d0);
-    color: var(--_1gqmi2d0);
-  }
-  ._1gqmi2d7:hover:not([data-disabled="true"]) {
-    background-color: var(--_1gqmi2d2);
-  }
-  ._1gqmi2d7[data-disabled="true"] {
-    background-color: var(--ax-colors-bg-disabled);
-    color: var(--ax-colors-fg-disabled);
-  }
   ._1gqmi2d8 {
     background-color: transparent;
     border: 1px solid var(--_1gqmi2d0);
     color: var(--_1gqmi2d0);
+    padding-inline: calc(var(--_1gqmi2d3) - 1px);
   }
-  ._1gqmi2d8:hover:not([data-disabled="true"]) {
+  ._1gqmi2d8:hover:not([data-disabled]) {
     background-color: var(--_1gqmi2d2);
   }
-  ._1gqmi2d8[data-disabled="true"] {
+  ._1gqmi2d8[data-disabled] {
     border-color: var(--ax-colors-border-disabled);
     color: var(--ax-colors-fg-disabled);
   }
@@ -99,15 +80,46 @@
     background-color: var(--_1gqmi2d0);
     color: var(--ax-colors-fg-default-inverse);
   }
-  ._1gqmi2d9:hover:not([data-disabled="true"]) {
+  ._1gqmi2d9:hover:not([data-disabled]) {
     background-color: var(--_1gqmi2d1);
   }
-  ._1gqmi2d9[data-disabled="true"] {
+  ._1gqmi2d9[data-disabled] {
     background-color: var(--ax-colors-bg-disabled);
     border: 1px solid var(--ax-colors-border-disabled);
     color: var(--ax-colors-fg-disabled);
+    padding-inline: calc(var(--_1gqmi2d3) - 1px);
   }
   ._1gqmi2da {
+    background-color: transparent;
+    border-color: var(--_1gqmi2d0);
+    color: var(--_1gqmi2d0);
+  }
+  ._1gqmi2da:hover:not([data-disabled]) {
+    background-color: var(--_1gqmi2d2);
+  }
+  ._1gqmi2da[data-disabled] {
+    background-color: var(--ax-colors-bg-disabled);
+    color: var(--ax-colors-fg-disabled);
+  }
+  ._1gqmi2db {
     border-color: var(--ax-colors-border-default);
   }
+  ._1gqmi2dc {
+    --_1gqmi2d3: 2px;
+  }
+  ._1gqmi2dd {
+    --_1gqmi2d3: 4px;
+  }
+  ._1gqmi2de {
+    --_1gqmi2d3: 6px;
+  }
+  ._1gqmi2df {
+    --_1gqmi2d3: 8px;
+  }
+  ._1gqmi2dg {
+    --_1gqmi2d3: 10px;
+  }
+  ._1gqmi2dh {
+    --_1gqmi2d3: 12px;
+  }
 }

package/dist/assets/src/checkbox/Checkbox.css.ts.vanilla-w5cdPwHc.css

@@ -0,0 +1,23 @@
+@layer optiaxiom._1kfj4ga1;
+@layer optiaxiom._1kfj4ga1 {
+  ._1vlnf5q1 {
+    display: none;
+  }
+  ._1vlnf5q0[data-state="checked"] ._1vlnf5q1 {
+    display: block;
+  }
+  ._1vlnf5q2 {
+    display: none;
+  }
+  ._1vlnf5q0[data-state="indeterminate"] ._1vlnf5q2 {
+    display: block;
+  }
+  ._1vlnf5q3 {
+    border-color: var(--_7uwxjo1);
+    border-width: 1px;
+  }
+  ._1vlnf5q3:not([data-state="unchecked"]) {
+    background-color: var(--_7uwxjo1);
+    border-width: 0;
+  }
+}

package/dist/assets/src/chip/Chip.css.ts.vanilla-SD4SsrSx.css

@@ -0,0 +1,26 @@
+@layer optiaxiom._1kfj4ga1;
+@layer optiaxiom._1kfj4ga1 {
+  .wnd97r0 {
+    background-color: var(--ax-colors-gray-300);
+    color: var(--ax-colors-fg-default);
+    position: relative;
+    user-select: none;
+  }
+  .wnd97r0:focus-visible {
+    outline: 2px solid var(--ax-colors-gray-300);
+    outline-offset: 1px;
+  }
+  .wnd97r0:hover:not([data-disabled]) {
+    background-color: var(--ax-colors-gray-600);
+    color: var(--ax-colors-white);
+  }
+  .wnd97r0[data-disabled] {
+    background-color: var(--ax-colors-bg-disabled);
+    border: 1px solid var(--ax-colors-border-disabled);
+    color: var(--ax-colors-fg-disabled);
+  }
+  .wnd97r0[data-state="on"] {
+    background-color: var(--ax-colors-gray-600);
+    color: var(--ax-colors-white);
+  }
+}

package/dist/assets/src/control-base/ControlBase.css.ts.vanilla-BRvl57K9.css

@@ -0,0 +1,32 @@
+@layer optiaxiom._1kfj4ga1;
+@layer optiaxiom._1kfj4ga1 {
+  ._7uwxjo2 {
+    --_7uwxjo1: var(--ax-colors-border-active);
+    color: var(--ax-colors-fg-default);
+  }
+  ._7uwxjo2:has(._7uwxjo0:not([data-disabled]):not([data-state="unchecked"])):hover {
+    --_7uwxjo1: var(--ax-colors-bg-brand-solid-hover);
+  }
+  ._7uwxjo2:has(._7uwxjo0:not([data-disabled]):not([data-state="unchecked"])) {
+    --_7uwxjo1: var(--ax-colors-bg-brand-solid);
+  }
+  ._7uwxjo2:has(._7uwxjo0:not([data-disabled])[data-state="unchecked"]):hover {
+    --_7uwxjo1: var(--ax-colors-border-active-hover);
+  }
+  ._7uwxjo2:has(._7uwxjo0[data-disabled]) {
+    color: var(--ax-colors-fg-disabled);
+  }
+  ._7uwxjo3:focus-visible {
+    outline: 2px solid var(--ax-colors-outline-brand);
+    outline-offset: 1px;
+  }
+  ._7uwxjo3[data-disabled] {
+    --_7uwxjo1: var(--ax-colors-bg-disabled);
+  }
+  ._7uwxjo4 {
+    cursor: pointer;
+  }
+  ._7uwxjo0[data-disabled] + ._7uwxjo4 {
+    cursor: default;
+  }
+}

package/dist/assets/src/dialog/Dialog.css.ts.vanilla-B7OE7tnX.css

@@ -0,0 +1,28 @@
+@layer optiaxiom._1kfj4ga1;
+@layer optiaxiom._1kfj4ga1 {
+  ._1hgarxm0 {
+    left: 50%;
+    max-width: 90dvw;
+    position: fixed;
+    top: 50%;
+    translate: -50% -50%;
+  }
+  ._1hgarxm1 {
+    width: 375px;
+  }
+  ._1hgarxm2 {
+    width: 600px;
+  }
+  ._1hgarxm3 {
+    width: 800px;
+  }
+  ._1hgarxm4 {
+    inset: 0;
+    position: fixed;
+  }
+  ._1hgarxm5 {
+    position: absolute;
+    right: 24px;
+    top: 24px;
+  }
+}

package/dist/assets/src/dialog-body/DialogBody.css.ts.vanilla-C_QoodTy.css

@@ -0,0 +1,6 @@
+@layer optiaxiom._1kfj4ga1;
+@layer optiaxiom._1kfj4ga1 {
+  .qdjgpq0 {
+    max-height: 50dvh;
+  }
+}

package/dist/assets/src/{input/Input.css.ts.vanilla-X0R-SsOp.css → input-base/InputBase.css.ts.vanilla-CZg9RekC.css}

@@ -1,32 +1,34 @@
 @layer optiaxiom._1kfj4ga1;
 @layer optiaxiom._1kfj4ga1 {
-  ._5j10wf0 {
+  ._4nrdl00 {
     border-color: var(--ax-colors-border-default);
   }
-  ._5j10wf0:focus-within:is([data-invalid="true"]) {
+  ._4nrdl00:focus-within:is([data-invalid]) {
     outline-color: var(--ax-colors-red-200);
     outline-offset: 1px;
     outline-style: solid;
     outline-width: 2px;
   }
-  ._5j10wf0:focus-within:not([data-invalid="true"]) {
+  ._4nrdl00:focus-within:not([data-invalid]) {
     outline-color: var(--ax-colors-brand-200);
     outline-offset: 1px;
     outline-style: solid;
     outline-width: 2px;
   }
-  ._5j10wf0:hover {
+  ._4nrdl00:hover {
     border-color: var(--ax-colors-border-brand);
   }
-  ._5j10wf0[data-disabled="true"] {
+  ._4nrdl00[data-disabled] {
     background-color: var(--ax-colors-bg-disabled);
     border-color: var(--ax-colors-border-secondary);
     pointer-events: none;
   }
-  ._5j10wf0[data-invalid="true"] {
+  ._4nrdl00[data-invalid] {
     border-color: var(--ax-colors-border-error);
   }
-  ._5j10wf1:focus-visible {
-    outline-width: 0px;
+  ._4nrdl01 {
+    font-size: 14px;
+    line-height: 22px;
+    outline: 2px solid transparent;
   }
 }

package/dist/assets/src/kbd/{Kbd.css.ts.vanilla-DB-l95Nr.css → Kbd.css.ts.vanilla-C9xHGnsD.css}

@@ -1,9 +1,6 @@
 @layer optiaxiom._1kfj4ga1;
 @layer optiaxiom._1kfj4ga1 {
   .q5e32p0 {
-    border-bottom-width: 2px;
-  }
-  .q5e32p1 {
     font-size: 1.2em;
     line-height: 1;
     text-decoration: none;

package/dist/assets/src/link/Link.css.ts.vanilla-Cpe5mdsJ.css

@@ -0,0 +1,32 @@
+@layer optiaxiom._1kfj4ga1;
+@layer optiaxiom._1kfj4ga1 {
+  ._1gvyme20 {
+    text-decoration: none;
+  }
+  ._1gvyme20:focus-visible {
+    outline: 2px solid var(--ax-colors-outline-brand);
+    outline-offset: 1px;
+  }
+  ._1gvyme20:hover {
+    text-decoration: underline;
+  }
+  ._1gvyme20[data-disabled="true"] {
+    color: var(--ax-colors-fg-disabled);
+    cursor: not-allowed;
+  }
+  ._1gvyme21 {
+    color: var(--ax-colors-fg-brand);
+  }
+  ._1gvyme21:hover {
+    color: var(--ax-colors-fg-brand-hover);
+  }
+  ._1gvyme21:visited {
+    color: var(--ax-colors-purple-500);
+  }
+  ._1gvyme22 {
+    color: black;
+  }
+  ._1gvyme22:visited {
+    color: var(--ax-colors-purple-500);
+  }
+}

package/dist/assets/src/radio-group-item/RadioGroupItem.css.ts.vanilla-BFZr4-E-.css

@@ -0,0 +1,9 @@
+@layer optiaxiom._1kfj4ga1;
+@layer optiaxiom._1kfj4ga1 {
+  ._1ohtycq0 {
+    border-color: var(--_7uwxjo1);
+  }
+  ._1ohtycq1 {
+    background-color: var(--_7uwxjo1);
+  }
+}