aidos-ui 4.0.2 → 4.0.4

package/package.json

@@ -1,9 +1,27 @@
 {
   "name": "aidos-ui",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "description": "A simple UI framework",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./jsx-runtime": {
+      "types": "./dist/jsx-runtime.d.ts",
+      "default": "./dist/jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./dist/jsx-dev-runtime.d.ts",
+      "default": "./dist/jsx-dev-runtime.js"
+    },
+    "./vite-plugin-jss-debug": {
+      "types": "./dist/vite-plugin-jss-debug.d.ts",
+      "default": "./dist/vite-plugin-jss-debug.js"
+    }
+  },
   "scripts": {
     "embeddings": "node ./scripts/embeddings.js",
     "dev": "next dev",

package/src/BaseButton.tsx

@@ -32,6 +32,7 @@ export const BaseButton = React.forwardRef(
   ) => {
     return (
       <button
+        type="button"
         {...otherProps}
         aria-disabled={disabled ? true : undefined}
         ref={ref}

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/Card.tsx

@@ -19,7 +19,7 @@ export function Card({
         {
           backgroundColor: cssVar("--overlay-background"),
           borderRadius: cssVar("--border-radius-l"),
-          boxShadow: `1px 1px 4px 1px ${cssVar("--divider")}`,
+          boxShadow: cssVar("--shadow-sm"),
         },
         jss,
       ]}

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

@@ -1,14 +1,13 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useId, useRef, useState } from "react";
 
 import { BaseView } from "./BaseView";
-import { guid } from "./guid";
 import { Button } from "./Button";
 import { Column } from "./Column";
 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",
@@ -25,12 +24,12 @@ const jsss: { [key: string]: JSS } = {
     left: 0,
     right: 0,
     borderRadius: "var(--border-radius-m)",
-    boxShadow: "0px 1px 2px var(--divider)",
+    boxShadow: "var(--shadow-sm)",
     zIndex: 1,
   },
 };
 export function Dropdown<T extends string | number>({
-  id = guid(),
+  id: propId,
   label,
   options,
   selection,
@@ -54,6 +53,8 @@ export function Dropdown<T extends string | number>({
   gap?: Gap;
   size?: Size;
 }) {
+  const hookId = useId();
+  const id = propId ?? hookId;
   const triggerRef = useRef(null);
   const [expanded, setExpanded] = useState(false);
   const dropdownRef = useNavigation({ autofocus: true });
@@ -75,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}
@@ -86,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"
@@ -100,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/JSSComment.tsx

@@ -0,0 +1,56 @@
+import React, { useEffect, useRef } from "react";
+
+/**
+ * Injects a real HTML comment node (<!-- ComponentName -->) into the DOM.
+ *
+ * Renders nothing (null). Uses the React fiber tree to locate the sibling
+ * component's first DOM node, then inserts a comment before it.
+ * Client-only — no SSR output, no hydration mismatch.
+ */
+export function JSSComment({ name }: { name: string }) {
+  const fiberRef = useRef<any>(null);
+
+  // Capture our fiber during render
+  try {
+    const internals = (React as any)
+      .__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    fiberRef.current = internals?.ReactCurrentOwner?.current;
+  } catch {}
+
+  useEffect(() => {
+    const fiber = fiberRef.current;
+    if (!fiber) return;
+
+    // Our sibling in the Fragment is the actual component
+    const sibling = fiber.sibling;
+    if (!sibling) return;
+
+    // Walk down the sibling's fiber tree to find its first DOM node
+    const hostNode = findFirstDOMNode(sibling);
+    if (!hostNode?.parentNode) return;
+
+    const comment = document.createComment(` ${name} `);
+    hostNode.parentNode.insertBefore(comment, hostNode);
+
+    return () => {
+      comment.remove();
+    };
+  }, [name]);
+
+  return null;
+}
+
+function findFirstDOMNode(fiber: any): Node | null {
+  let current = fiber;
+  while (current) {
+    if (current.stateNode instanceof Node) {
+      return current.stateNode;
+    }
+    if (current.child) {
+      current = current.child;
+      continue;
+    }
+    break;
+  }
+  return null;
+}

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/Storage.tsx

@@ -99,9 +99,7 @@ export function createStorage<State>({
     useEffect(() => {
       return subscribe((newState) => {
         const newLocalState = selector(newState);
-        if (newLocalState != localState) {
-          setLocalState(selector(newState));
-        }
+        setLocalState((prev) => (newLocalState != prev ? newLocalState : prev));
       });
     }, []);
 

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);
           }}