@momoi-labs/kiso-react 0.2.0 → 0.4.0

package/dist/split.js

@@ -0,0 +1,64 @@
+// Adapted from shadcn/ui new-york-v4. See ../SHADCN-LICENSE.
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { clsx as cn } from "clsx";
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.js";
+function Split({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "split", className: cn("split", className), ...props }));
+}
+function Pane({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "pane", className: cn("pane", className), ...props }));
+}
+/* The divider owns the size so that dropping one between two panes is the
+   whole setup — no state to lift for a drag. Where it puts that size is what
+   `.split > .pane` already expects: `flex-basis` on the pane before it.
+   `onSizeChange` reports the percentage for anyone who wants to persist it. */
+function Splitter({ className, defaultSize = 50, min = 25, max = 75, step = 2, onSizeChange, onPointerDown, onPointerMove, onLostPointerCapture, onKeyDown, "aria-label": ariaLabel = "Resize panes", ...props }) {
+    const ref = React.useRef(null);
+    const [size, setSize] = React.useState(defaultSize);
+    const [dragging, setDragging] = React.useState(false);
+    useIsomorphicLayoutEffect(() => {
+        const pane = ref.current?.previousElementSibling;
+        if (pane instanceof HTMLElement)
+            pane.style.flexBasis = `${size}%`;
+    }, [size]);
+    function resize(next) {
+        const value = Math.min(max, Math.max(min, next));
+        if (value === size)
+            return;
+        setSize(value);
+        onSizeChange?.(value);
+    }
+    return (_jsx("div", { ref: ref, role: "separator", tabIndex: 0, "aria-orientation": "vertical", "aria-label": ariaLabel, "aria-valuenow": Math.round(size), "aria-valuemin": min, "aria-valuemax": max, "data-slot": "splitter", className: cn("splitter", dragging && "dragging", className), ...props, onPointerDown: (event) => {
+            onPointerDown?.(event);
+            event.currentTarget.setPointerCapture(event.pointerId);
+            setDragging(true);
+        }, onPointerMove: (event) => {
+            onPointerMove?.(event);
+            if (!dragging)
+                return;
+            const box = event.currentTarget.parentElement?.getBoundingClientRect();
+            if (box)
+                resize(((event.clientX - box.left) / box.width) * 100);
+        }, 
+        /* Covers the pointer being released and the drag being cancelled. */
+        onLostPointerCapture: (event) => {
+            onLostPointerCapture?.(event);
+            setDragging(false);
+        }, onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (event.key === "ArrowLeft")
+                resize(size - step);
+            else if (event.key === "ArrowRight")
+                resize(size + step);
+            else if (event.key === "Home")
+                resize(min);
+            else if (event.key === "End")
+                resize(max);
+            else
+                return;
+            event.preventDefault();
+        } }));
+}
+export { Split, Pane, Splitter };

package/dist/stat.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare function Stat({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function StatHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function StatLabel({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function StatValue({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function StatFoot({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare const statDeltaVariants: (props?: ({
+    variant?: "danger" | "info" | "neutral" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function StatDelta({ className, variant, ...props }: React.ComponentProps<"span"> & VariantProps<typeof statDeltaVariants>): React.JSX.Element;
+export { Stat, StatHeader, StatLabel, StatValue, StatFoot, StatDelta, statDeltaVariants, };

package/dist/stat.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { clsx as cn } from "clsx";
+function Stat({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "stat", className: cn("stat", className), ...props }));
+}
+/* The tile puts its label and its delta on one line. */
+function StatHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "stat-header", className: cn("between", className), ...props }));
+}
+function StatLabel({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "stat-label", className: cn("stat-label", className), ...props }));
+}
+function StatValue({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "stat-value", className: cn("stat-value", className), ...props }));
+}
+function StatFoot({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "stat-foot", className: cn("stat-foot", className), ...props }));
+}
+const statDeltaVariants = cva("badge badge-outline stat-delta", {
+    variants: { variant: {
+            neutral: "", info: "info", success: "success",
+            warning: "warning", danger: "danger",
+        } },
+    defaultVariants: { variant: "neutral" },
+});
+/* A slot rather than a prop: the direction arrow, the number and its unit are
+   content, and only their colour is the component's business. */
+function StatDelta({ className, variant = "neutral", ...props }) {
+    return (_jsx("span", { "data-slot": "stat-delta", "data-variant": variant, className: cn(statDeltaVariants({ variant }), className), ...props }));
+}
+export { Stat, StatHeader, StatLabel, StatValue, StatFoot, StatDelta, statDeltaVariants, };

package/dist/styles.css

@@ -108,4 +108,159 @@
 .kiso-checkbox .checkbox-mixed,
 .kiso-checkbox[data-state="indeterminate"] .checkbox-check { display: none; }
 .kiso-checkbox[data-state="indeterminate"] .checkbox-mixed { display: block; }
-.kiso-react-dialog { max-height: calc(100dvh - 2 * var(--spacing-lg)); overflow-y: auto; }
+/* Corner marks are drawn outside the surface, so the surface itself must not
+   scroll: it would scroll to reveal them and show two scrollbars on a dialog
+   that fits. The content region scrolls instead. */
+.kiso-react-dialog {
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100dvh - 2 * var(--spacing-lg));
+}
+.kiso-react-dialog > *,
+.kiso-react-drawer > * {
+  min-width: 0;
+  min-height: 0;
+}
+
+/* Shapes the CSS layer names in prose but not in a class. */
+.spinner-sm { width: var(--size-icon-sm); height: var(--size-icon-sm); }
+.skeleton-text { height: 1lh; border-radius: var(--radius-sm); }
+.skeleton-circle { aspect-ratio: 1; border-radius: var(--radius-full); }
+.empty-sm { padding: var(--spacing-lg) var(--spacing-md); }
+
+/* Lists carry the semantics; the CSS layer styles their containers. */
+[data-slot="navigation-list"],
+[data-slot="breadcrumb-list"],
+[data-slot="toast-viewport"] {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+/* A column by default. `.nav-row` is the shared layer's row treatment, so
+   yield to it rather than override it from here. */
+[data-slot="navigation-list"]:not(.nav-row) {
+  display: grid;
+  gap: var(--spacing-2xs);
+}
+
+/* Radix renders the Select trigger as a button, so the native select's
+   text alignment has to be restated. */
+[data-slot="select-trigger"] {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  text-align: start;
+  cursor: pointer;
+}
+[data-slot="select-trigger"][data-placeholder] {
+  color: var(--color-subtle-foreground);
+}
+[data-slot="select-trigger"]:disabled { cursor: not-allowed; }
+[data-slot="select-item"] { justify-content: space-between; }
+
+/* Portalled surfaces: above the page, never wider than it. */
+.kiso-react-floating {
+  z-index: 70;
+  max-width: calc(100vw - 2 * var(--spacing-lg));
+}
+.kiso-react-floating .menu-item[data-highlighted] {
+  background: var(--color-selected);
+  color: var(--color-selected-foreground);
+  outline: none;
+}
+.kiso-react-floating .menu-item.is-danger[data-highlighted] {
+  background: var(--color-danger-surface);
+  color: var(--color-danger);
+}
+.kiso-react-floating .menu-item[data-disabled] {
+  color: var(--color-disabled);
+  cursor: not-allowed;
+}
+.kiso-react-popover {
+  display: grid;
+  gap: var(--spacing-md);
+  padding: var(--spacing-lg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-popover);
+  color: var(--color-popover-foreground);
+  box-shadow: var(--shadow-md);
+  max-width: min(24rem, calc(100vw - 2 * var(--spacing-lg)));
+}
+[data-slot="tooltip-content"] { max-width: 28ch; }
+
+.kiso-react-switch {
+  position: relative;
+  width: 32px;
+  height: 18px;
+  flex: none;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-full);
+  background: var(--color-border-strong);
+  cursor: pointer;
+  transition: background var(--motion-duration-fast) var(--motion-easing-standard);
+}
+.kiso-react-switch[data-state="checked"] { background: var(--color-primary); }
+.kiso-react-switch:disabled { opacity: .5; cursor: not-allowed; }
+.kiso-react-switch-thumb {
+  display: block;
+  width: 14px;
+  height: 14px;
+  margin-inline-start: 2px;
+  border-radius: var(--radius-full);
+  background: var(--color-white);
+  box-shadow: var(--shadow-xs);
+  transition: translate var(--motion-duration-fast) var(--motion-easing-standard);
+}
+.kiso-react-switch[data-state="checked"] .kiso-react-switch-thumb {
+  translate: 14px 0;
+  background: var(--color-primary-foreground);
+}
+
+[data-slot="tabs-content"] { padding-block-start: var(--spacing-lg); }
+
+[data-slot="toast-viewport"] { max-width: calc(100vw - 2 * var(--spacing-lg)); }
+[data-slot="toast"] { max-width: 100%; }
+[data-slot="toast"][data-variant="success"] { border-color: var(--color-success-border); }
+[data-slot="toast"][data-variant="warning"] { border-color: var(--color-warning-border); }
+[data-slot="toast"][data-variant="error"] { border-color: var(--color-danger-border); }
+
+/* A Drawer is the dialog surface moved to an edge. */
+.kiso-react-drawer {
+  position: fixed;
+  z-index: 51;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-elevated-surface);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-md);
+}
+.kiso-react-drawer[data-placement="side"] {
+  inset-block: 0;
+  inset-inline-end: 0;
+  width: min(28rem, calc(100vw - var(--spacing-xl)));
+  border-start-start-radius: var(--radius-surface);
+  border-end-start-radius: var(--radius-surface);
+}
+.kiso-react-drawer[data-placement="bottom"] {
+  inset-inline: 0;
+  inset-block-end: 0;
+  max-height: 85dvh;
+  border-start-start-radius: var(--radius-surface);
+  border-start-end-radius: var(--radius-surface);
+}
+/* Header and footer stay put; the body takes the leftover height. */
+.kiso-react-drawer [data-slot="dialog-body"] {
+  flex: 1 1 auto;
+  overflow-y: auto;
+}
+
+.kiso-react-palette {
+  position: fixed;
+  z-index: 51;
+  inset-block-start: 12vh;
+  inset-inline-start: 50%;
+  translate: -50% 0;
+  width: min(560px, calc(100vw - 2 * var(--spacing-lg)));
+}

package/dist/switch.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { Switch as SwitchPrimitive } from "radix-ui";
+declare function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>): React.JSX.Element;
+export { Switch };

package/dist/switch.js

@@ -0,0 +1,11 @@
+// Adapted from shadcn/ui new-york-v4. See ../SHADCN-LICENSE.
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+import { Switch as SwitchPrimitive } from "radix-ui";
+// One immediate boolean setting. A form choice is Checkbox; one value out of
+// many is Select.
+function Switch({ className, ...props }) {
+    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", className: cn("kiso-react-switch", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "kiso-react-switch-thumb" }) }));
+}
+export { Switch };

package/dist/tabs.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { Tabs as TabsPrimitive } from "radix-ui";
+declare function Tabs({ ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): React.JSX.Element;
+declare function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): React.JSX.Element;
+declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): React.JSX.Element;
+declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): React.JSX.Element;
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/tabs.js

@@ -0,0 +1,18 @@
+// Adapted from shadcn/ui new-york-v4. See ../SHADCN-LICENSE.
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+import { Tabs as TabsPrimitive } from "radix-ui";
+function Tabs({ ...props }) {
+    return _jsx(TabsPrimitive.Root, { "data-slot": "tabs", ...props });
+}
+function TabsList({ className, ...props }) {
+    return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", className: cn("tabs", className), ...props }));
+}
+function TabsTrigger({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn("", className), ...props }));
+}
+function TabsContent({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("", className), ...props }));
+}
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/textarea.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
+export { Textarea };

package/dist/textarea.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+function Textarea({ className, ...props }) {
+    return (_jsx("textarea", { "data-slot": "textarea", className: cn("textarea", className), ...props }));
+}
+export { Textarea };

package/dist/toast.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { Toast as ToastPrimitive } from "radix-ui";
+type ToastVariant = "neutral" | "success" | "warning" | "error";
+type ToastNotify = (variant: ToastVariant, title: React.ReactNode, body?: React.ReactNode) => void;
+declare const toastVariants: (props?: ({
+    variant?: "error" | "neutral" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function ToastProvider({ ...props }: React.ComponentProps<typeof ToastPrimitive.Provider>): React.JSX.Element;
+declare function ToastViewport({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Viewport>): React.JSX.Element;
+declare function Toast({ className, variant, type, ...props }: React.ComponentProps<typeof ToastPrimitive.Root> & VariantProps<typeof toastVariants>): React.JSX.Element;
+declare function ToastTitle({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Title>): React.JSX.Element;
+declare function ToastDescription({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Description>): React.JSX.Element;
+declare function ToastContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ToastAction({ ...props }: React.ComponentProps<typeof ToastPrimitive.Action>): React.JSX.Element;
+declare function ToastClose({ ...props }: React.ComponentProps<typeof ToastPrimitive.Close>): React.JSX.Element;
+declare function useToast(): ToastNotify;
+declare function Toasts({ children, duration, }: {
+    children: React.ReactNode;
+    duration?: number;
+}): React.JSX.Element;
+export { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastContent, ToastAction, ToastClose, Toasts, useToast, toastVariants, };
+export type { ToastNotify, ToastVariant };

package/dist/toast.js

@@ -0,0 +1,69 @@
+// Adapted from shadcn/ui new-york-v4. See ../SHADCN-LICENSE.
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { clsx as cn } from "clsx";
+import { Toast as ToastPrimitive } from "radix-ui";
+import { Button } from "./button.js";
+const ToastContext = React.createContext(null);
+const toastVariants = cva("toast", {
+    variants: {
+        variant: {
+            neutral: "",
+            success: "toast-success",
+            warning: "toast-warning",
+            error: "toast-error",
+        },
+    },
+    defaultVariants: { variant: "neutral" },
+});
+function ToastProvider({ ...props }) {
+    return _jsx(ToastPrimitive.Provider, { ...props });
+}
+function ToastViewport({ className, ...props }) {
+    return (_jsx(ToastPrimitive.Viewport, { "data-slot": "toast-viewport", className: cn("toast-region", className), ...props }));
+}
+// An error interrupts (assertive); everything else waits its turn (polite).
+function Toast({ className, variant = "neutral", type, ...props }) {
+    return (_jsx(ToastPrimitive.Root, { "data-slot": "toast", "data-variant": variant, type: type ?? (variant === "error" ? "foreground" : "background"), className: cn(toastVariants({ variant }), className), ...props }));
+}
+function ToastTitle({ className, ...props }) {
+    return (_jsx(ToastPrimitive.Title, { "data-slot": "toast-title", className: cn("alert-title", className), ...props }));
+}
+function ToastDescription({ className, ...props }) {
+    return (_jsx(ToastPrimitive.Description, { "data-slot": "toast-description", className: cn("alert-body", className), ...props }));
+}
+function ToastContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "toast-content", className: cn("stack-xs grow", className), ...props }));
+}
+function ToastAction({ ...props }) {
+    return _jsx(ToastPrimitive.Action, { "data-slot": "toast-action", ...props });
+}
+function ToastClose({ ...props }) {
+    return _jsx(ToastPrimitive.Close, { "data-slot": "toast-close", ...props });
+}
+function useToast() {
+    const notify = React.useContext(ToastContext);
+    if (!notify)
+        throw new Error("useToast must be used within Toasts");
+    return notify;
+}
+function Toasts({ children, duration = 6000, }) {
+    const [notices, setNotices] = React.useState([]);
+    const nextId = React.useRef(0);
+    const notify = React.useCallback((variant, title, body) => {
+        const id = nextId.current++;
+        setNotices((current) => [...current, { id, variant, title, body }]);
+    }, []);
+    const dismiss = React.useCallback((id) => {
+        setNotices((current) => current.filter((notice) => notice.id !== id));
+    }, []);
+    return (_jsx(ToastContext.Provider, { value: notify, children: _jsxs(ToastProvider, { duration: duration, children: [children, notices.map((notice) => (_jsxs(Toast, { variant: notice.variant, onOpenChange: (open) => {
+                        if (!open)
+                            dismiss(notice.id);
+                    }, children: [_jsxs(ToastContent, { children: [_jsx(ToastTitle, { children: notice.title }), typeof notice.body === "string" || typeof notice.body === "number"
+                                    ? _jsx(ToastDescription, { children: notice.body })
+                                    : notice.body] }), _jsx(ToastClose, { asChild: true, children: _jsx(Button, { size: "xs", variant: "ghost", children: "Dismiss" }) })] }, notice.id))), _jsx(ToastViewport, {})] }) }));
+}
+export { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastContent, ToastAction, ToastClose, Toasts, useToast, toastVariants, };

package/dist/tooltip.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element;
+declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): React.JSX.Element;
+declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): React.JSX.Element;
+declare function TooltipContent({ className, sideOffset, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): React.JSX.Element;
+export { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent };

package/dist/tooltip.js

@@ -0,0 +1,20 @@
+// Adapted from shadcn/ui new-york-v4. See ../SHADCN-LICENSE.
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+// Never essential: whatever a Tooltip says must also be reachable without
+// hover or focus.
+function TooltipProvider({ delayDuration = 150, ...props }) {
+    return (_jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delayDuration: delayDuration, ...props }));
+}
+function Tooltip({ ...props }) {
+    return _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({ ...props }) {
+    return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({ className, sideOffset = 4, ...props }) {
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn("tooltip kiso-react-floating", className), ...props }) }));
+}
+export { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent };

package/dist/use-isomorphic-layout-effect.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;

package/dist/use-isomorphic-layout-effect.js

@@ -0,0 +1,4 @@
+import * as React from "react";
+/* `useLayoutEffect` warns when it runs on the server, where there is no DOM to
+   measure. Internal: not exported from the package. */
+export const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;

package/dist/validation-message.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function ValidationMessage({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+export { ValidationMessage };

package/dist/validation-message.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+// Associate it with the control through aria-describedby, and mark the control
+// aria-invalid. Give it an id the control can point at.
+function ValidationMessage({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "validation-message", className: cn("field-error", className), ...props }));
+}
+export { ValidationMessage };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momoi-labs/kiso-react",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Kiso React components built with shadcn/ui and Radix",
   "type": "module",
   "license": "MIT",
@@ -32,7 +32,7 @@
     "prepack": "npm run build"
   },
   "dependencies": {
-    "@momoi-labs/kiso": "^0.5.0",
+    "@momoi-labs/kiso": "^0.7.0",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "radix-ui": "1.6.7"