aidos-ui 4.0.3 → 4.0.4

package/dist/Tooltip.js

@@ -4,7 +4,7 @@ import { BaseView } from "./BaseView";
 import { useRefEffect } from "./useRefEffect";
 import { Text } from "./Text";
 import { cssVar, toClassnames } from "./jss";
-const jsss = {
+const styles = {
     tooltip: {
         top: "-100%",
         transform: "translateY(50%)",
@@ -49,7 +49,7 @@ export function Tooltip({ content, jss, tag, children }) {
             setTooltip(_jsx("dialog", { ref: (ref) => {
                     dialogRef.current = ref;
                     focusTrapRoot(ref);
-                }, className: toClassnames(jsss.tooltip), onClose: () => {
+                }, className: toClassnames(styles.tooltip), onClose: () => {
                     setTooltip(null);
                 }, onClick: (e) => {
                     e.preventDefault();

package/dist/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../src/Tooltip.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../src/Tooltip.tsx"],"names":[],"mappings":"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"}

package/dist/vite-plugin-jss-debug.d.ts

@@ -13,11 +13,15 @@
  */
 export default function jssDebug(): ({
     name: string;
-    config(): {
-        esbuild: {
-            jsx: string;
-            jsxDev: boolean;
-            jsxImportSource: string;
+    config(_config: unknown, { command }: {
+        command: string;
+    }): {
+        oxc: {
+            jsx: {
+                runtime: string;
+                development: boolean;
+                importSource: string;
+            };
         };
     };
     enforce?: undefined;

package/dist/vite-plugin-jss-debug.js

@@ -16,12 +16,14 @@ export default function jssDebug() {
     return [
         {
             name: "jss-debug-jsx",
-            config() {
+            config(_config, { command }) {
                 return {
-                    esbuild: {
-                        jsx: "automatic",
-                        jsxDev: true,
-                        jsxImportSource: "aidos-ui",
+                    oxc: {
+                        jsx: {
+                            runtime: "automatic",
+                            development: command === "serve",
+                            importSource: "aidos-ui",
+                        },
                     },
                 };
             },

package/dist/vite-plugin-jss-debug.js.map

@@ -1 +1 @@
-{"version":3,"file":"vite-plugin-jss-debug.js","sourceRoot":"","sources":["../src/vite-plugin-jss-debug.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC9B,OAAO;QACL;YACE,IAAI,EAAE,eAAe;YACrB,MAAM;gBACJ,OAAO;oBACL,OAAO,EAAE;wBACP,GAAG,EAAE,WAAW;wBAChB,MAAM,EAAE,IAAI;wBACZ,eAAe,EAAE,UAAU;qBAC5B;iBACF,CAAC;YACJ,CAAC;SACF;QACD;YACE,IAAI,EAAE,sBAAsB;YAC5B,OAAO,EAAE,KAAc;YAEvB,SAAS,CAAC,IAAY,EAAE,EAAU;gBAChC,IAAI,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC;oBAAE,OAAO;gBACxC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC;oBAAE,OAAO;gBACpC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC;oBAAE,OAAO;gBAE5C,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;gBACrD,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;gBACtC,MAAM,MAAM,GAAG,eAAe,CAAC;gBAC/B,IAAI,MAAM,GAAG,EAAE,CAAC;gBAChB,IAAI,CAAC,GAAG,CAAC,CAAC;gBAEV,OAAO,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;oBACvB,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;oBACpC,IAAI,GAAG,KAAK,CAAC,CAAC,EAAE,CAAC;wBACf,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;wBACxB,MAAM;oBACR,CAAC;oBAED,sDAAsD;oBACtD,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;oBAC7C,CAAC,GAAG,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC;oBAExB,8CAA8C;oBAC9C,IAAI,KAAK,GAAG,CAAC,CAAC;oBACd,IAAI,CAAC,GAAG,CAAC,CAAC;oBACV,OAAO,CAAC,GAAG,IAAI,CAAC,MAAM,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;wBACpC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;wBACnB,IAAI,EAAE,KAAK,GAAG;4BAAE,KAAK,EAAE,CAAC;6BACnB,IAAI,EAAE,KAAK,GAAG;4BAAE,KAAK,EAAE,CAAC;wBAC7B,IAAI,KAAK,GAAG,CAAC;4BAAE,CAAC,EAAE,CAAC;oBACrB,CAAC;oBAED,8DAA8D;oBAC9D,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;oBACzC,CAAC,GAAG,CAAC,CAAC;gBACR,CAAC;gBAED,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC;YACrC,CAAC;SACF;KACF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"vite-plugin-jss-debug.js","sourceRoot":"","sources":["../src/vite-plugin-jss-debug.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC9B,OAAO;QACL;YACE,IAAI,EAAE,eAAe;YACrB,MAAM,CAAC,OAAgB,EAAE,EAAE,OAAO,EAAuB;gBACvD,OAAO;oBACL,GAAG,EAAE;wBACH,GAAG,EAAE;4BACH,OAAO,EAAE,WAAW;4BACpB,WAAW,EAAE,OAAO,KAAK,OAAO;4BAChC,YAAY,EAAE,UAAU;yBACzB;qBACF;iBACF,CAAC;YACJ,CAAC;SACF;QACD;YACE,IAAI,EAAE,sBAAsB;YAC5B,OAAO,EAAE,KAAc;YAEvB,SAAS,CAAC,IAAY,EAAE,EAAU;gBAChC,IAAI,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC;oBAAE,OAAO;gBACxC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC;oBAAE,OAAO;gBACpC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC;oBAAE,OAAO;gBAE5C,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;gBACrD,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;gBACtC,MAAM,MAAM,GAAG,eAAe,CAAC;gBAC/B,IAAI,MAAM,GAAG,EAAE,CAAC;gBAChB,IAAI,CAAC,GAAG,CAAC,CAAC;gBAEV,OAAO,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;oBACvB,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;oBACpC,IAAI,GAAG,KAAK,CAAC,CAAC,EAAE,CAAC;wBACf,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;wBACxB,MAAM;oBACR,CAAC;oBAED,sDAAsD;oBACtD,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;oBAC7C,CAAC,GAAG,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC;oBAExB,8CAA8C;oBAC9C,IAAI,KAAK,GAAG,CAAC,CAAC;oBACd,IAAI,CAAC,GAAG,CAAC,CAAC;oBACV,OAAO,CAAC,GAAG,IAAI,CAAC,MAAM,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;wBACpC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;wBACnB,IAAI,EAAE,KAAK,GAAG;4BAAE,KAAK,EAAE,CAAC;6BACnB,IAAI,EAAE,KAAK,GAAG;4BAAE,KAAK,EAAE,CAAC;wBAC7B,IAAI,KAAK,GAAG,CAAC;4BAAE,CAAC,EAAE,CAAC;oBACrB,CAAC;oBAED,8DAA8D;oBAC9D,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;oBACzC,CAAC,GAAG,CAAC,CAAC;gBACR,CAAC;gBAED,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC;YACrC,CAAC;SACF;KACF,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aidos-ui",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "description": "A simple UI framework",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/BaseView.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { JSS, toClassnames } from "./jss";
 
-const jsss: { [key: string]: JSS } = {
+const styles: { [key: string]: JSS } = {
   relative: {
     position: "relative",
   },
@@ -44,9 +44,9 @@ export const BaseView = React.forwardRef(
         ref={ref}
         className={toClassnames([
           jss,
-          grow && jsss.grow,
-          shrink && jsss.shrink,
-          relative && jsss.relative,
+          grow && styles.grow,
+          shrink && styles.shrink,
+          relative && styles.relative,
         ])}
         {...otherProps}
       >

package/src/Calendar.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { cloneElement, useMemo } from "react";
 import { BaseView } from "./BaseView";
 import { JSS } from "./jss";
 
@@ -78,18 +78,17 @@ export const Calendar = React.forwardRef(
             index + 1 - offset
           );
 
-          return (
-            <React.Fragment key={dayDate.toISOString()}>
-              {cell({
-                date: dayDate,
-                today: false,
-                top: true,
-                left: index % 7 === 0,
-                outOfMonth: true,
-                right: false,
-                bottom: false,
-              })}
-            </React.Fragment>
+          return cloneElement(
+            cell({
+              date: dayDate,
+              today: false,
+              top: true,
+              left: index % 7 === 0,
+              outOfMonth: true,
+              right: false,
+              bottom: false,
+            }),
+            { key: dayDate.toISOString() }
           );
         })}
 
@@ -101,22 +100,21 @@ export const Calendar = React.forwardRef(
             12 // If we do not add this the ISO string would be from the day before at midnight
           );
 
-          return (
-            <React.Fragment key={dayDate.toISOString()}>
-              {cell({
-                date: dayDate,
-                top: index + offset < 7,
-                left: (index + offset) % 7 === 0,
-                right:
-                  (index + offset) % 7 === 7 - 1 || index === daysInMonth - 1,
-                bottom: index > daysInMonth - 7 - 1,
-                outOfMonth: false,
-                today:
-                  dayDate.getDate() == new Date().getDate() &&
-                  dayDate.getMonth() == new Date().getMonth() &&
-                  dayDate.getFullYear() == new Date().getFullYear(),
-              })}
-            </React.Fragment>
+          return cloneElement(
+            cell({
+              date: dayDate,
+              top: index + offset < 7,
+              left: (index + offset) % 7 === 0,
+              right:
+                (index + offset) % 7 === 7 - 1 || index === daysInMonth - 1,
+              bottom: index > daysInMonth - 7 - 1,
+              outOfMonth: false,
+              today:
+                dayDate.getDate() == new Date().getDate() &&
+                dayDate.getMonth() == new Date().getMonth() &&
+                dayDate.getFullYear() == new Date().getFullYear(),
+            }),
+            { key: dayDate.toISOString() }
           );
         })}
       </BaseView>

package/src/DateInput.tsx

@@ -12,7 +12,7 @@ export interface DateInputProps extends BaseInputProps {
   icon?: IconType;
   addOn?: ReactNode;
   onChange?: undefined;
-  jsss?: JSS;
+  jss?: JSS;
 }
 
 export const DateInput = React.forwardRef(

package/src/DatePicker.tsx

@@ -2,7 +2,7 @@ import React, { useRef } from "react";
 import { Text } from "./Text";
 import { TextColor, toClassnames } from "./jss";
 
-const jsss = {
+const styles = {
   dateInput: {
     border: "1px solid var(--divider)",
     backgroundColor: "var(--primary-background)",
@@ -47,7 +47,7 @@ export function DatePicker({
       <input
         min={min}
         max={max}
-        className={toClassnames(jsss.dateInput)}
+        className={toClassnames(styles.dateInput)}
         type="date"
         id={id}
         value={date.toISOString().substring(0, 10)}

package/src/DatetimeInput.tsx

@@ -15,7 +15,7 @@ export interface DatetimeInputProps extends BaseInputProps {
   jss?: JSS;
 }
 
-const jsss = {
+const styles = {
   root: {
     backgroundColor: "var(--primary-background)",
   },
@@ -43,7 +43,7 @@ export const DatetimeInput = React.forwardRef(
     ref?: React.Ref<HTMLInputElement>
   ) => {
     return (
-      <Row jss={jsss.root}>
+      <Row jss={styles.root}>
         {icon && (
           <Box padding="medium">
             <Icon size="medium" color="secondary" icon={icon} />
@@ -55,7 +55,7 @@ export const DatetimeInput = React.forwardRef(
           ref={ref}
           value={date.toISOString().substring(0, 16)}
           onChange={(e) => onDateChange(new Date(e.target.value))}
-          jss={[jsss.input, jss]}
+          jss={[styles.input, jss]}
         />
         {addOn}
       </Row>

package/src/Dialog.tsx

@@ -8,7 +8,7 @@ import { Row } from "./Row";
 import { IconButton } from "./IconButton";
 import { toClassnames } from "./jss";
 
-const jsss = {
+const styles = {
   dialog: {
     border: "1px solid var(--divider)",
     borderRadius: "var(--border-radius-l)",
@@ -50,8 +50,8 @@ export const Dialog = ({
   close: () => void;
 }) => {
   return (
-    <BaseView jss={jsss.root}>
-      <Column jss={jsss.header}>
+    <BaseView jss={styles.root}>
+      <Column jss={styles.header}>
         <Row padding="medium" justify="space-between" align="center">
           <Text size="medium" color="secondary">
             {label}
@@ -67,7 +67,7 @@ export const Dialog = ({
         </Row>
         <ListDivider />
       </Column>
-      <BaseView jss={jsss.content}>{children}</BaseView>
+      <BaseView jss={styles.content}>{children}</BaseView>
     </BaseView>
   );
 };
@@ -113,7 +113,7 @@ export function useDialog<Input>(
           dialogRef.current = ref;
           ref && ref.showModal();
         }}
-        className={toClassnames(jsss.dialog)}
+        className={toClassnames(styles.dialog)}
         onClose={() => {
           closeRef.current();
         }}

package/src/Dropdown.tsx

@@ -7,7 +7,7 @@ import { useNavigation } from "./useNavigation";
 import { useRefEffect } from "./useRefEffect";
 import { Gap, JSS, Padding, Size, getBackground } from "./jss";
 
-const jsss: { [key: string]: JSS } = {
+const styles: { [key: string]: JSS } = {
   root: {
     position: "relative",
     display: "flex",
@@ -76,7 +76,7 @@ export function Dropdown<T extends string | number>({
   }, [expanded]);
 
   return (
-    <BaseView ref={rootRef} jss={[jsss.root, jss]}>
+    <BaseView ref={rootRef} jss={[styles.root, jss]}>
       <Button
         size={size}
         padding={padding}
@@ -87,7 +87,7 @@ export function Dropdown<T extends string | number>({
         role="combobox"
         justify="space-between"
         tabIndex={0}
-        jss={[jsss.button, jssButton]}
+        jss={[styles.button, jssButton]}
         color="positive"
         icon="fa-chevron-down"
         iconPosition="right"
@@ -101,7 +101,7 @@ export function Dropdown<T extends string | number>({
       {expanded && (
         <Column
           gap={gap}
-          jss={[jsss.dropdown, getBackground("secondary-background")]}
+          jss={[styles.dropdown, getBackground("secondary-background")]}
           id={id}
           role="listbox"
           aria-label={label}

package/src/Icon.tsx

@@ -4,7 +4,7 @@ import { BaseView } from "./BaseView";
 import { IconType } from "./IconType";
 import { Size, TextColor, getTextColor } from "./jss";
 
-const jsss = {
+const styles = {
   root: {
     display: "flex",
     justifyContent: "center",
@@ -63,14 +63,14 @@ export function Icon({
     <BaseView
       aria-label={ariaLabel}
       jss={[
-        jsss.root,
-        size === "xsmall" && jsss.xsmall,
-        size === "small" && jsss.small,
-        size === "medium" && jsss.medium,
-        size === "large" && jsss.large,
-        size === "xlarge" && jsss.xlarge,
-        size === "xxlarge" && jsss.xxlarge,
-        size === "xxxlarge" && jsss.xxxlarge,
+        styles.root,
+        size === "xsmall" && styles.xsmall,
+        size === "small" && styles.small,
+        size === "medium" && styles.medium,
+        size === "large" && styles.large,
+        size === "xlarge" && styles.xlarge,
+        size === "xxlarge" && styles.xxlarge,
+        size === "xxxlarge" && styles.xxxlarge,
         getTextColor(color),
       ]}
     >

package/src/IconButton.tsx

@@ -4,28 +4,46 @@ import { Icon } from "./Icon";
 import { IconType } from "./IconType";
 import { getGlyphColor } from "./Interactable";
 import { Size } from "./jss";
+import { Span } from "./Text";
 
-const sizes = {
+const sizes: {
+  [key in Size]: number;
+} = {
   xsmall: 20,
   small: 24,
   medium: 32,
   large: 40,
   xlarge: 48,
+  xxlarge: 56,
+  xxxlarge: 64,
 };
 
 export interface IconButtonProps extends BaseButtonProps {
   icon: IconType;
   size: Size;
+  label?: string;
+  labelSize?: Size;
 }
 
 export const IconButton = React.forwardRef(
   (
-    { icon, size, color, bare, disabled, jss, ...buttonProps }: IconButtonProps,
+    {
+      icon,
+      size,
+      color,
+      bare,
+      disabled,
+      jss,
+      label,
+      labelSize = "medium",
+      ...buttonProps
+    }: IconButtonProps,
     ref?: React.Ref<HTMLButtonElement>
   ) => {
     return (
       <BaseButton
         {...buttonProps}
+        aria-label={buttonProps["aria-label"] ?? label}
         bare={bare}
         jss={[
           {
@@ -52,6 +70,11 @@ export const IconButton = React.forwardRef(
           icon={icon}
           color={getGlyphColor(color, disabled, bare)}
         />
+        {label && (
+          <Span size={labelSize} color={getGlyphColor(color, disabled, bare)}>
+            {label}
+          </Span>
+        )}
       </BaseButton>
     );
   }

package/src/Interactable.tsx

@@ -7,7 +7,7 @@ export type InteractableColor =
   | "dark"
   | "light";
 
-const jsss = {
+const styles = {
   root: {
     cursor: "pointer",
     display: "inline-flex",
@@ -94,18 +94,18 @@ export function getInteractableJSS({
   border: boolean;
 }): Array<JSS> {
   return [
-    jsss.root,
-    color === "dark" && jsss.dark,
-    color === "light" && jsss.light,
-    color === "positive" && jsss.positive,
-    color === "primary" && jsss.primary,
-    color === "negative" && jsss.negative,
+    styles.root,
+    color === "dark" && styles.dark,
+    color === "light" && styles.light,
+    color === "positive" && styles.positive,
+    color === "primary" && styles.primary,
+    color === "negative" && styles.negative,
     border && {
       border: `1px solid ${getCSSColor(color, disabled, bare)}`,
     },
-    bare && jsss.bare,
-    disabled && jsss.disabled,
-    !bare && jsss.opacityHover,
+    bare && styles.bare,
+    disabled && styles.disabled,
+    !bare && styles.opacityHover,
     animateInteraction &&
       !disabled && {
         position: "relative",

package/src/ListDivider.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { BaseView } from "./BaseView";
 
-const jsss = {
+const styles = {
   root: {
     width: "100%",
     borderBottom: "1px solid var(--divider)",
@@ -9,5 +9,5 @@ const jsss = {
 };
 
 export function ListDivider() {
-  return <BaseView jss={jsss.root} />;
+  return <BaseView jss={styles.root} />;
 }

package/src/ListSpacer.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { BaseView } from "./BaseView";
 
-const jsss = {
+const styles = {
   root: {
     height: "var(--spacing-xl)",
     backgroundColor: "var(--secondary-background)",
@@ -10,5 +10,5 @@ const jsss = {
 };
 
 export function ListSpacer() {
-  return <BaseView jss={jsss.root} />;
+  return <BaseView jss={styles.root} />;
 }

package/src/NextJSRouter.tsx

@@ -7,7 +7,7 @@ import { BaseView } from "./BaseView";
 import { useRouterState } from "./NextJSRouterState";
 import { JSS } from "./jss";
 
-const jsss: { [key: string]: JSS } = {
+const styles: { [key: string]: JSS } = {
   root: {
     display: "flex",
     flexDirection: "column",
@@ -36,25 +36,23 @@ export function Router() {
   } = useRouterState();
 
   return (
-    <BaseView jss={jsss.root}>
+    <BaseView jss={styles.root}>
       {navigationStack.map(({ route, routeProps }, index, list) => {
         const isTopOfStack = index === list.length - 1;
 
         return (
-          <StackContextProvider
+          <Column
             key={route.title(routeProps)}
-            isTopOfStack={isTopOfStack}
+            jss={[styles.route, !isTopOfStack && styles.hidden]}
+            aria-hidden={!isTopOfStack}
           >
-            <Column
-              jss={[jsss.route, !isTopOfStack && jsss.hidden]}
-              aria-hidden={!isTopOfStack}
-            >
+            <StackContextProvider isTopOfStack={isTopOfStack}>
               <ListDivider />
               <Suspense fallback={null}>
                 <route.root {...routeProps} />
               </Suspense>
-            </Column>
-          </StackContextProvider>
+            </StackContextProvider>
+          </Column>
         );
       })}
     </BaseView>

package/src/Popover.tsx

@@ -5,7 +5,7 @@ import { BaseView } from "./BaseView";
 import { useRefEffect } from "./useRefEffect";
 import { JSS, toClassnames } from "./jss";
 
-const jsss: { [key: string]: JSS } = {
+const styles: { [key: string]: JSS } = {
   popover: {
     padding: 0,
     zIndex: 1,
@@ -129,7 +129,7 @@ export function PopoverTrigger<Input>({
         ref={(ref: null | HTMLDialogElement) => {
           dialogRef.current = ref;
         }}
-        className={toClassnames([jsss.popover, jssDialog])}
+        className={toClassnames([styles.popover, jssDialog])}
         onClose={() => {
           setPopover(null);
         }}

package/src/ProgressBar.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { BaseView } from "./BaseView";
 import { Color, Size, JSS, getBackground } from "./jss";
 
-const jsss: { [key: string]: JSS } = {
+const styles: { [key: string]: JSS } = {
   root: {
     width: "100%",
     display: "flex",
@@ -45,7 +45,7 @@ export function ProgressBar({
   return (
     <BaseView
       jss={[
-        jsss.root,
+        styles.root,
         {
           height: sizes[size],
         },
@@ -53,7 +53,7 @@ export function ProgressBar({
       ]}
     >
       <BaseView
-        jss={[jsss.fill, getBackground(color)]}
+        jss={[styles.fill, getBackground(color)]}
         style={{
           transform: `scaleX(${progress > 1 ? 1 : progress})`,
         }}

package/src/StaticCheckbox.tsx

@@ -10,7 +10,7 @@ type StaticCheckboxProps = {
   icon?: IconType;
 };
 
-const jsss: { [key: string]: JSS } = {
+const styles: { [key: string]: JSS } = {
   border: {
     position: "absolute",
     top: "var(--spacing-xs)",
@@ -61,9 +61,9 @@ export function StaticCheckbox({
         width: sizes[size],
       }}
     >
-      <BaseView jss={[jsss.border, checked && jsss.borderChecked]} />
+      <BaseView jss={[styles.border, checked && styles.borderChecked]} />
       {checked && (
-        <BaseView jss={jsss.icon}>
+        <BaseView jss={styles.icon}>
           <Icon size={size} color="light" icon={icon} />
         </BaseView>
       )}

package/src/Tooltip.tsx

@@ -5,7 +5,7 @@ import { useRefEffect } from "./useRefEffect";
 import { Text } from "./Text";
 import { JSS, cssVar, toClassnames } from "./jss";
 
-const jsss: { [key: string]: JSS } = {
+const styles: { [key: string]: JSS } = {
   tooltip: {
     top: "-100%",
     transform: "translateY(50%)",
@@ -67,7 +67,7 @@ export function Tooltip({ content, jss, tag, children }: TooltipProps) {
             dialogRef.current = ref;
             focusTrapRoot(ref);
           }}
-          className={toClassnames(jsss.tooltip)}
+          className={toClassnames(styles.tooltip)}
           onClose={() => {
             setTooltip(null);
           }}

package/src/vite-plugin-jss-debug.ts

@@ -17,12 +17,14 @@ export default function jssDebug() {
   return [
     {
       name: "jss-debug-jsx",
-      config() {
+      config(_config: unknown, { command }: { command: string }) {
         return {
-          esbuild: {
-            jsx: "automatic",
-            jsxDev: true,
-            jsxImportSource: "aidos-ui",
+          oxc: {
+            jsx: {
+              runtime: "automatic",
+              development: command === "serve",
+              importSource: "aidos-ui",
+            },
           },
         };
       },

package/.claude/settings.local.json

@@ -1,22 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(npm publish:*)",
-      "Bash(npm whoami:*)",
-      "Bash(npm run dev:*)",
-      "Bash(npx npm-check-updates:*)",
-      "Bash(npm install:*)",
-      "Bash(npm run build:lib:*)",
-      "Bash(npm run build:*)",
-      "Bash(npm ls:*)",
-      "Bash(npm show:*)",
-      "Bash(npm info:*)",
-      "WebFetch(domain:iconify.design)",
-      "Bash(ls:*)",
-      "Bash(xargs basename:*)",
-      "Bash(pkill:*)",
-      "Bash(npx tsc:*)",
-      "WebSearch"
-    ]
-  }
-}