@shadow-js/ui 0.0.0-stage → 1.0.0

package/registry/toggle/item.json

@@ -0,0 +1,4 @@
+{
+  "title": "Toggle",
+  "description": "A two-state button that can be either on or off."
+}

package/registry/toggle/toggle.tsx

@@ -0,0 +1,110 @@
+import { splitProps } from "@shadow-js/core";
+import {
+  type PolymorphicTarget,
+  Toggle as TogglePrimitive,
+  type ToggleProps as TogglePrimitiveProps,
+} from "@shadow-js/primitives";
+import type { JSX } from "@shadow-js/web";
+import { cva, type VariantProps } from "class-variance-authority";
+import { type ClassValue, cn } from "@/lib/utils";
+
+/**
+ * The class list of a toggle, built from `variant` and `size`. Use it to style another element
+ * (for example a link) like a toggle. The pressed look comes from `data-state="on"`, which
+ * {@link Toggle} sets.
+ *
+ * @param props - Optional `variant` (`"default"` or `"outline"`) and `size` (`"default"`, `"sm"` or
+ * `"lg"`), and an optional `class` to add.
+ * @returns The class string.
+ * @example
+ * ```tsx
+ * import { toggleVariants } from "@/components/ui/toggle";
+ *
+ * export function BoldLink() {
+ *   return (
+ *     <a href="/bold" class={toggleVariants({ variant: "outline", size: "sm" })}>
+ *       Bold
+ *     </a>
+ *   );
+ * }
+ * ```
+ * @since 1.0.0
+ * @see {@link Toggle}
+ */
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 motion-reduce:transition-none data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 forced-colors:data-[state=on]:bg-[Highlight] forced-colors:data-[state=on]:text-[HighlightText] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-transparent",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 min-w-9 px-2",
+        sm: "h-8 min-w-8 px-1.5",
+        lg: "h-10 min-w-10 px-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+/** The props as the implementation sees them. */
+type Loose = VariantProps<typeof toggleVariants> & {
+  readonly class?: ClassValue;
+  readonly [prop: string]: unknown;
+};
+
+/**
+ * Props of {@link Toggle}: the primitive's props (`pressed`, `defaultPressed`, `onPressedChange`,
+ * `disabled`), `variant` (`"default"` or `"outline"`) and `size` (`"default"`, `"sm"` or `"lg"`),
+ * and the attributes of the rendered `button`. `as` renders another element instead.
+ * @since 1.0.0
+ * @see {@link Toggle}
+ */
+export type ToggleProps<T extends PolymorphicTarget = "button"> = TogglePrimitiveProps<T> &
+  VariantProps<typeof toggleVariants>;
+
+/**
+ * A two-state button that is either pressed (on) or not. Controlled with `pressed` and
+ * `onPressedChange`, or uncontrolled with `defaultPressed`. Pick a `variant` and a `size`.
+ *
+ * Keyboard and ARIA: Space, Enter and a click toggle it. It is a `button` with `aria-pressed`
+ * (`"true"` or `"false"`) and `data-state` (`"on"` or `"off"`). Disabled, it is a disabled button.
+ * A toggle that shows only an icon needs an `aria-label`, because the icon has no text to name it.
+ *
+ * shadcn/ui differences: `class` replaces `className`, and `as` replaces `asChild`.
+ *
+ * @param props - The props, see {@link ToggleProps}.
+ * @returns The toggle `button`.
+ * @example
+ * ```tsx
+ * import { Toggle } from "@/components/ui/toggle";
+ *
+ * export function BoldToggle() {
+ *   return (
+ *     <Toggle aria-label="Toggle bold" variant="outline" onPressedChange={(on: boolean) => console.log(on)}>
+ *       B
+ *     </Toggle>
+ *   );
+ * }
+ * ```
+ * @since 1.0.0
+ * @see {@link toggleVariants}
+ */
+function Toggle<T extends PolymorphicTarget = "button">(props: ToggleProps<T>): JSX.Element {
+  const [local, rest] = splitProps(props as unknown as Loose, ["class", "variant", "size"]);
+  return (
+    <TogglePrimitive
+      data-slot="toggle"
+      class={cn(toggleVariants({ variant: local.variant, size: local.size }), local.class)}
+      {...rest}
+    />
+  );
+}
+
+export { Toggle, toggleVariants };

package/registry/toggle-group/item.json

@@ -0,0 +1,4 @@
+{
+  "title": "Toggle Group",
+  "description": "A set of two-state buttons that can be toggled on or off."
+}

package/registry/toggle-group/toggle-group.tsx

@@ -0,0 +1,189 @@
+import { createContext, splitProps, useContext } from "@shadow-js/core";
+import {
+  type PolymorphicTarget,
+  type ToggleGroupItemProps as ToggleGroupItemPrimitiveProps,
+  ToggleGroup as ToggleGroupPrimitive,
+  type ToggleGroupProps as ToggleGroupPrimitiveProps,
+} from "@shadow-js/primitives";
+import type { JSX } from "@shadow-js/web";
+import type { VariantProps } from "class-variance-authority";
+import { toggleVariants } from "@/components/ui/toggle";
+import { type ClassValue, cn } from "@/lib/utils";
+
+type ToggleVariants = VariantProps<typeof toggleVariants>;
+
+/** What the items read from their group. */
+interface ToggleGroupContextValue {
+  readonly variant: () => ToggleVariants["variant"];
+  readonly size: () => ToggleVariants["size"];
+  readonly spacing: () => number;
+}
+
+const ToggleGroupContext = createContext<ToggleGroupContextValue>({
+  variant: () => "default",
+  size: () => "default",
+  spacing: () => 0,
+});
+
+/** The props as the implementation sees them. */
+type Loose = ToggleVariants & {
+  readonly class?: ClassValue;
+  readonly children?: JSX.Element;
+  readonly [prop: string]: unknown;
+};
+
+/**
+ * Props of {@link ToggleGroup}: the primitive's props (`type="single" | "multiple"`, `value`,
+ * `defaultValue`, `onValueChange`, `disabled`, `orientation`, `dir`, `loop`, `rovingFocus`),
+ * `variant` and `size` (inherited by the items) and the attributes of the rendered `div`.
+ * @since 1.0.0
+ * @see {@link ToggleGroup}
+ */
+export type ToggleGroupProps<T extends PolymorphicTarget = "div"> = ToggleGroupPrimitiveProps<T> &
+  ToggleVariants & {
+    /**
+     * The gap between the items, in units of the spacing scale (`spacing={2}` is 0.5 rem). `0` keeps the
+     * items connected: they share their borders and only the two ends are rounded. Any other value puts
+     * a gap between them and every item keeps its own corners and borders.
+     * @default 0
+     * @see {@link ToggleGroup}
+     */
+    readonly spacing?: number | undefined;
+  };
+
+/**
+ * Props of {@link ToggleGroupItem}: the primitive's props (`value`, `disabled`), `variant` and
+ * `size` (they win over the group's) and the attributes of the rendered `button`.
+ * @since 1.0.0
+ * @see {@link ToggleGroupItem}
+ */
+export type ToggleGroupItemProps<T extends PolymorphicTarget = "button"> =
+  ToggleGroupItemPrimitiveProps<T> & ToggleVariants;
+
+/**
+ * A row of toggles that share one look. With `type="single"` at most one item is pressed, and the
+ * items are radios. With `type="multiple"` any number can be pressed. Control it with `value` and
+ * `onValueChange`, or start it with `defaultValue`. A single group reports one string (`""` when
+ * the pressed item is pressed again), and a multiple group reports an array. `variant` and `size`
+ * reach every item, unless an item sets its own.
+ *
+ * Keyboard and ARIA: the root is a `role="group"` and needs a name from you (`aria-label` or
+ * `aria-labelledby`). The group is one tab stop: the item that had focus last, else the pressed
+ * item, else the first enabled item. The arrow keys move between items (all four arrows unless
+ * `orientation` is set; Left and Right swap in a right-to-left group), Home and End go to the ends,
+ * and the group wraps and skips disabled items. Space and Enter press the focused item. In a single
+ * group an item is a `role="radio"` with `aria-checked`; in a multiple group it has `aria-pressed`.
+ *
+ * shadcn/ui differences: `class` replaces `className`.
+ *
+ * @param props - The props, see {@link ToggleGroupProps}.
+ * @returns The group `div` with its items inside.
+ * @example
+ * ```tsx
+ * import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+ *
+ * export function TextStyle() {
+ *   return (
+ *     <ToggleGroup type="multiple" variant="outline" aria-label="Text style">
+ *       <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
+ *       <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
+ *     </ToggleGroup>
+ *   );
+ * }
+ * ```
+ * @since 1.0.0
+ * @see {@link ToggleGroupItem}
+ */
+function ToggleGroup<T extends PolymorphicTarget = "div">(props: ToggleGroupProps<T>): JSX.Element {
+  const [local, rest] = splitProps(props as unknown as Loose, [
+    "class",
+    "variant",
+    "size",
+    "spacing",
+    "children",
+  ]);
+  const spacing = (): number => (local.spacing as number | undefined) ?? 0;
+  return (
+    <ToggleGroupPrimitive
+      data-slot="toggle-group"
+      data-variant={local.variant}
+      data-size={local.size}
+      data-spacing={spacing()}
+      style={{ "--gap": String(spacing()) }}
+      class={cn(
+        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[variant=outline]:shadow-xs",
+        local.class,
+      )}
+      {...(rest as unknown as ToggleGroupPrimitiveProps)}
+    >
+      <ToggleGroupContext.Provider
+        value={{ variant: () => local.variant, size: () => local.size, spacing }}
+      >
+        {local.children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive>
+  );
+}
+
+/**
+ * One toggle of a {@link ToggleGroup}, identified by its `value`. Items sit flush against each
+ * other, so only the first and last item have rounded outer corners. A `variant` or `size` set on
+ * the item wins over the group's.
+ *
+ * Keyboard and ARIA: as for the group (see {@link ToggleGroup}). Space and Enter press the item. It
+ * is a `role="radio"` with `aria-checked` in a single group, and a `button` with `aria-pressed` in a
+ * multiple group. An item that shows only an icon needs an `aria-label`.
+ *
+ * @param props - The props: `value` (required), `disabled`, `variant`, `size`, and the attributes of
+ * the `button`.
+ * @returns The item `button`.
+ * @example
+ * ```tsx
+ * import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+ *
+ * export function Alignment() {
+ *   return (
+ *     <ToggleGroup type="single" aria-label="Alignment">
+ *       <ToggleGroupItem value="left" aria-label="Align left">
+ *         Left
+ *       </ToggleGroupItem>
+ *       <ToggleGroupItem value="right" aria-label="Align right">
+ *         Right
+ *       </ToggleGroupItem>
+ *     </ToggleGroup>
+ *   );
+ * }
+ * ```
+ * @since 1.0.0
+ * @see {@link ToggleGroup}
+ */
+function ToggleGroupItem<T extends PolymorphicTarget = "button">(
+  props: ToggleGroupItemProps<T>,
+): JSX.Element {
+  const group = useContext(ToggleGroupContext);
+  const [local, rest] = splitProps(props as unknown as Loose & { readonly value: string }, [
+    "class",
+    "variant",
+    "size",
+    "value",
+  ]);
+  const variant = (): ToggleVariants["variant"] => local.variant ?? group.variant();
+  const size = (): ToggleVariants["size"] => local.size ?? group.size();
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={variant()}
+      data-size={size()}
+      data-spacing={group.spacing()}
+      value={local.value}
+      class={cn(
+        toggleVariants({ variant: variant(), size: size() }),
+        "min-w-0 flex-1 shrink-0 shadow-none focus:z-10 focus-visible:z-10 data-[spacing=0]:rounded-none data-[spacing=0]:first:rounded-s-md data-[spacing=0]:last:rounded-e-md data-[spacing=0]:data-[variant=outline]:border-s-0 data-[spacing=0]:data-[variant=outline]:first:border-s group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-b-none group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-md group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-t-none group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-s group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+        local.class,
+      )}
+      {...rest}
+    />
+  );
+}
+
+export { ToggleGroup, ToggleGroupItem };

package/registry/tooltip/item.json

@@ -0,0 +1,4 @@
+{
+  "title": "Tooltip",
+  "description": "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it."
+}

package/registry/tooltip/tooltip.tsx

@@ -0,0 +1,169 @@
+import { splitProps } from "@shadow-js/core";
+import {
+  type PolymorphicTarget,
+  type TooltipContentProps,
+  Tooltip as TooltipPrimitive,
+  type TooltipProps,
+  type TooltipProviderProps,
+  type TooltipTriggerProps,
+  tooltipGroupContext,
+} from "@shadow-js/primitives";
+import type { JSX } from "@shadow-js/web";
+import { cn } from "@/lib/utils";
+
+/**
+ * Shares the open delays between the tooltips inside it. `delayDuration` is how long the pointer
+ * must rest on a trigger before its tooltip opens, and it defaults to `0` here. `skipDelayDuration`
+ * is the window after one tooltip closes during which the next one opens without a delay. Renders
+ * no element; put one near the root of the application.
+ *
+ * @param props - The props: `delayDuration`, `skipDelayDuration`, and the other provider props.
+ * @returns The provider, wrapping its children.
+ * @example
+ * ```tsx
+ * import { TooltipProvider } from "@/components/ui/tooltip";
+ *
+ * export function App() {
+ *   return (
+ *     <TooltipProvider delayDuration={400}>
+ *       <p>Hover a control to see its tooltip.</p>
+ *     </TooltipProvider>
+ *   );
+ * }
+ * ```
+ * @since 1.0.0
+ * @see {@link Tooltip}
+ */
+function TooltipProvider(props: TooltipProviderProps): JSX.Element {
+  return <TooltipPrimitive.Provider {...props} delayDuration={props.delayDuration ?? 0} />;
+}
+
+/**
+ * A short label that appears when its trigger is hovered or focused. Put a {@link TooltipTrigger}
+ * and a {@link TooltipContent} inside it. Control it with `open` and `onOpenChange`, or start it
+ * with `defaultOpen`. Inside a {@link TooltipProvider} it uses the provider's delays. On its own it
+ * opens without a delay.
+ *
+ * Keyboard and ARIA: keyboard focus on the trigger opens the tooltip at once, and blurring the
+ * trigger closes it. Escape closes it too. A mouse that rests on the trigger opens it after the
+ * delay, and touch never opens it. The trigger is a `button` with `aria-describedby` pointing at the
+ * content while it is open, and the content is a `role="tooltip"`. A tooltip describes its trigger
+ * and does not name it, so give an icon-only trigger an `aria-label`.
+ *
+ * shadcn/ui differences: `as` replaces `asChild` on the trigger, and `class` replaces `className`.
+ *
+ * @param props - The props, see {@link TooltipProps}.
+ * @returns The tooltip, with its trigger and content inside.
+ * @example
+ * ```tsx
+ * import { Button } from "@/components/ui/button";
+ * import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+ *
+ * export function SaveHint() {
+ *   return (
+ *     <Tooltip>
+ *       <TooltipTrigger as={Button} variant="outline">
+ *         Save
+ *       </TooltipTrigger>
+ *       <TooltipContent>Save the document</TooltipContent>
+ *     </Tooltip>
+ *   );
+ * }
+ * ```
+ * @since 1.0.0
+ * @see {@link TooltipProvider}
+ */
+function Tooltip(props: TooltipProps): JSX.Element {
+  // A tooltip with a provider above it keeps that provider's delay and skip window.
+  const grouped = tooltipGroupContext.useOptional() !== undefined;
+  return grouped ? (
+    <TooltipPrimitive {...props} />
+  ) : (
+    <TooltipProvider>
+      <TooltipPrimitive {...props} />
+    </TooltipProvider>
+  );
+}
+
+/**
+ * The element the tooltip describes, and its anchor. It renders a `button`; `as` renders another
+ * element instead, such as a shadcn/ui `Button`.
+ *
+ * Keyboard and ARIA: it takes focus, which opens the tooltip; blurring, pressing, clicking or
+ * pressing Escape closes it. While the tooltip is open it has `aria-describedby` pointing at the
+ * content, and its `data-state` is `"closed"`, `"delayed-open"` or `"instant-open"`.
+ *
+ * shadcn/ui differences: `as` replaces `asChild`, and `class` replaces `className`.
+ *
+ * @param props - The props: `as` and the attributes of the trigger element.
+ * @returns The trigger element.
+ * @example
+ * ```tsx
+ * import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+ *
+ * export function BoldHint() {
+ *   return (
+ *     <Tooltip>
+ *       <TooltipTrigger aria-label="Bold">B</TooltipTrigger>
+ *       <TooltipContent>Bold</TooltipContent>
+ *     </Tooltip>
+ *   );
+ * }
+ * ```
+ * @since 1.0.0
+ */
+function TooltipTrigger<T extends PolymorphicTarget = "button">(
+  props: TooltipTriggerProps<T>,
+): JSX.Element {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+/**
+ * The tooltip bubble with its arrow. It is rendered in `document.body` and placed above the trigger
+ * by default; `side` and `sideOffset` change that. Assistive technology reads a visually hidden copy
+ * of the content with `role="tooltip"`, so the visible content may hold markup and styling.
+ *
+ * Keyboard and ARIA: the content takes no focus and has no keys of its own; Escape closes the
+ * tooltip (see {@link Tooltip}). The trigger's `aria-describedby` points at the hidden copy.
+ *
+ * shadcn/ui differences: `class` replaces `className`.
+ *
+ * @param props - The props: `side`, `sideOffset`, `ariaLabel`, and the attributes of the bubble.
+ * @returns The bubble, rendered in a portal.
+ * @example
+ * ```tsx
+ * import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+ *
+ * export function AddHint() {
+ *   return (
+ *     <Tooltip>
+ *       <TooltipTrigger aria-label="Add">+</TooltipTrigger>
+ *       <TooltipContent side="bottom">Add to library</TooltipContent>
+ *     </Tooltip>
+ *   );
+ * }
+ * ```
+ * @since 1.0.0
+ * @see {@link Tooltip}
+ */
+function TooltipContent(props: TooltipContentProps): JSX.Element {
+  const [local, rest] = splitProps(props, ["class", "sideOffset", "children"]);
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={local.sideOffset ?? 0}
+        class={cn(
+          "z-50 w-fit origin-(--primitives-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 forced-colors:border",
+          local.class,
+        )}
+        {...rest}
+      >
+        {local.children}
+        <TooltipPrimitive.Arrow class="fill-foreground" width={10} height={5} />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/registry/trace/item.json

@@ -0,0 +1,4 @@
+{
+  "title": "Trace",
+  "description": "A list of lines for the steps an agent takes: reasoning, tool calls, sources, plans and tasks, each with an icon, a title and a status, and optionally expandable."
+}