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

package/dist/input/Input.js

@@ -8,10 +8,10 @@ import { decorator, input } from './Input-css.js';
 
 const Input = forwardRef(
   ({
+    appearance = "default",
     endDecorator,
     size = "md",
     startDecorator,
-    variant = "default",
     ...props
   }, ref) => {
     return /* @__PURE__ */ jsx(
@@ -21,7 +21,7 @@ const Input = forwardRef(
         size,
         startDecorator: startDecorator && /* @__PURE__ */ jsx(Box, { asChild: true, ...decorator({ position: "start", size }), children: fallbackSpan(startDecorator) }),
         ...props,
-        children: /* @__PURE__ */ jsx(Box, { asChild: true, ...input({ variant }), children: /* @__PURE__ */ jsx("input", { ref }) })
+        children: /* @__PURE__ */ jsx(Box, { asChild: true, ...input({ appearance }), children: /* @__PURE__ */ jsx("input", { ref }) })
       }
     );
   }

package/dist/input-base/InputBase-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/input-base/InputBase.css.ts.vanilla-By5uGeYP.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 

package/dist/link/Link-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/link/Link.css.ts.vanilla-PjwC2Bar.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 

package/dist/menu-item/MenuItem-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/menu-item/MenuItem.css.ts.vanilla-BjEdkhqZ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 

package/dist/pagination/Pagination-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/pagination/Pagination.css.ts.vanilla-CP7Jjsxf.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 

package/dist/pill/Pill-css.js

@@ -0,0 +1,8 @@
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
+import './../assets/src/styles/theme.css.ts.vanilla-D9K5B5ZA.css';
+import './../assets/src/pill/Pill.css.ts.vanilla-CMi1obNV.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var pill = recipeRuntime({base:[{bg:'neutral.100',border:'0',fontSize:'sm',rounded:'md'},'_176xwa50'],variants:{size:{md:{h:'xs'},lg:{h:'sm'}}}});
+
+export { pill };

package/dist/pill/Pill.js

@@ -0,0 +1,39 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Button } from '../button/Button.js';
+import { Text } from '../text/Text.js';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import { pill } from './Pill-css.js';
+
+const Pill = forwardRef(
+  ({
+    children,
+    className,
+    endDecorator,
+    onRemove,
+    size = "md",
+    startDecorator,
+    ...props
+  }, ref) => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Backspace" && onRemove) {
+        onRemove();
+      }
+    };
+    return /* @__PURE__ */ jsx(Tooltip, { auto: true, content: children, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        endDecorator,
+        onKeyDown: handleKeyDown,
+        ref,
+        startDecorator,
+        ...pill({ size }, className),
+        ...props,
+        children: /* @__PURE__ */ jsx(Text, { display: "block", fontSize: "inherit", truncate: true, children })
+      }
+    ) });
+  }
+);
+Pill.displayName = "@optiaxiom/react/Pill";
+
+export { Pill };

package/dist/radio-group-item/RadioGroupItem-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/radio-group-item/RadioGroupItem.css.ts.vanilla-BFZr4-E-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';

package/dist/radio-group-item/RadioGroupItem.js

@@ -3,22 +3,19 @@ import * as RadixRadio from '@radix-ui/react-radio-group';
 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 { item, indicator } from './RadioGroupItem-css.js';
 
 const RadioGroupItem = forwardRef(
-  ({ children, endDecorator, id, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+  ({ children, endDecorator, id, value, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       ControlBase,
       {
+        control: /* @__PURE__ */ jsx(Box, { asChild: true, ...item(), children: /* @__PURE__ */ jsx(RadixRadio.Item, { value, children: /* @__PURE__ */ jsx(Box, { asChild: true, ...indicator(), children: /* @__PURE__ */ jsx(RadixRadio.Indicator, {}) }) }) }),
         endDecorator,
         id,
-        label: children,
         ref,
-        ...sprinkleProps,
-        children: /* @__PURE__ */ jsx(Box, { asChild: true, ...item(), children: /* @__PURE__ */ jsx(RadixRadio.Item, { ...restProps, children: /* @__PURE__ */ jsx(Box, { asChild: true, ...indicator(), children: /* @__PURE__ */ jsx(RadixRadio.Indicator, {}) }) }) })
+        ...props,
+        children
       }
     );
   }

package/dist/spinner/Spinner.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles-css.js';
+
+const mapColorSchemeToBg = {
+  default: "bg.input.disabled",
+  inverse: "neutral.50/6"
+};
+const mapColorSchemeToFg = {
+  default: "fg.default",
+  inverse: "border.secondary"
+};
+const Spinner = forwardRef(
+  ({ colorScheme = "default", ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    return /* @__PURE__ */ jsx(Box, { animation: "spin", asChild: true, ...sprinkleProps, children: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        fill: "none",
+        height: 16,
+        ref,
+        role: "img",
+        viewBox: "0 0 16 16",
+        width: 16,
+        xmlns: "http://www.w3.org/2000/svg",
+        ...restProps,
+        children: [
+          /* @__PURE__ */ jsx(Box, { asChild: true, color: mapColorSchemeToBg[colorScheme], children: /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "8",
+              cy: "8",
+              r: "7",
+              stroke: "currentColor",
+              strokeWidth: "1.5"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Box, { asChild: true, color: mapColorSchemeToFg[colorScheme], children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M4.5 1.93782C5.78021 1.19869 7.26154 0.883827 8.7317 1.03835C10.2019 1.19287 11.5854 1.80884 12.6839 2.79798C13.7825 3.78713 14.5397 5.09866 14.847 6.54461C15.1544 7.99057 14.9961 9.4967 14.3948 10.8472",
+              stroke: "currentColor",
+              strokeLinecap: "round",
+              strokeWidth: "1.5"
+            }
+          ) })
+        ]
+      }
+    ) });
+  }
+);
+Spinner.displayName = "@optiaxiom/react/Spinner";
+
+export { Spinner };