@momoi-labs/kiso-react 0.2.0 → 0.3.0

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,15 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { Toast as ToastPrimitive } from "radix-ui";
+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;
+export { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastContent, ToastAction, ToastClose, toastVariants, };

package/dist/toast.js

@@ -0,0 +1,43 @@
+// Adapted from shadcn/ui new-york-v4. See ../SHADCN-LICENSE.
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { clsx as cn } from "clsx";
+import { Toast as ToastPrimitive } from "radix-ui";
+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 });
+}
+export { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastContent, ToastAction, ToastClose, 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.3.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.6.0",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "radix-ui": "1.6.7"