@shadow-js/ui 0.0.0-stage → 1.0.0

package/registry/skeleton/item.json

@@ -0,0 +1,4 @@
+{
+  "title": "Skeleton",
+  "description": "Use to show a placeholder while content is loading."
+}

package/registry/skeleton/skeleton.tsx

@@ -0,0 +1,47 @@
+import { splitProps } from "@shadow-js/core";
+import type { ComponentProps, JSX } from "@shadow-js/web";
+import { cn } from "@/lib/utils";
+
+/**
+ * A placeholder shaped like the content that is loading: a pulsing block that you size with
+ * `class`. The placeholder is decorative, so it is hidden from assistive technology
+ * (`aria-hidden="true"`). Mark the region that loads with `aria-busy="true"`, or announce the
+ * loading state with a status (see {@link Spinner}). Under reduced motion the pulse stops.
+ *
+ * Keyboard and ARIA: no keys and no role. The element is `aria-hidden="true"`, so the loading
+ * state must be announced by the region around it, not by the placeholder.
+ *
+ * shadcn/ui differences: `class` replaces `className`. Unlike shadcn/ui, the placeholder is
+ * `aria-hidden="true"` by default.
+ *
+ * @param props - The props: the attributes of the `div`. `class` is merged with the base classes.
+ * @returns The placeholder `div`.
+ * @example
+ * ```tsx
+ * import { Skeleton } from "@/components/ui/skeleton";
+ *
+ * export function CardSkeleton() {
+ *   return (
+ *     <div aria-busy="true" class="flex items-center gap-4">
+ *       <Skeleton class="size-12 rounded-full" />
+ *       <Skeleton class="h-4 w-[250px]" />
+ *     </div>
+ *   );
+ * }
+ * ```
+ * @since 1.0.0
+ * @see {@link Spinner}
+ */
+function Skeleton(props: ComponentProps<"div">): JSX.Element {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (
+    <div
+      data-slot="skeleton"
+      aria-hidden="true"
+      class={cn("animate-pulse rounded-md bg-accent motion-reduce:animate-none", local.class)}
+      {...rest}
+    />
+  );
+}
+
+export { Skeleton };

package/registry/slider/item.json

@@ -0,0 +1,4 @@
+{
+  "title": "Slider",
+  "description": "An input where the user selects a value, or a range, from within a given range."
+}

package/registry/slider/slider.tsx

@@ -0,0 +1,149 @@
+import { splitProps } from "@shadow-js/core";
+import {
+  type PolymorphicTarget,
+  Slider as SliderPrimitive,
+  type SliderProps as SliderPrimitiveProps,
+} from "@shadow-js/primitives";
+import { For, type JSX } from "@shadow-js/web";
+import { type ClassValue, cn } from "@/lib/utils";
+
+/**
+ * Props that {@link Slider} adds to the primitive's props. Use them to name the thumbs and to
+ * give a value text.
+ * @since 1.0.0
+ * @see {@link Slider}
+ */
+export interface SliderExtraProps {
+  /**
+   * The accessible name of each thumb of a range slider, by thumb index (for example
+   * `["Minimum price", "Maximum price"]`). Without it a range of two thumbs is named "Minimum" and
+   * "Maximum". A single-thumb slider is named by `aria-label` or `aria-labelledby` instead.
+   * @default none (a range of two thumbs is named "Minimum" and "Maximum")
+   */
+  readonly thumbLabels?: readonly string[] | undefined;
+  /**
+   * The `aria-valuetext` of each thumb of a range, by thumb index (for example
+   * `["40 events per second"]`). It is set on the thumb, the element with `role="slider"`, and
+   * never on the group that wraps a range.
+   * @default none
+   */
+  readonly thumbValueTexts?: readonly string[] | undefined;
+  /**
+   * The value text of a single-thumb slider, for example `"30 percent"`. It is set on the thumb.
+   * @default none
+   */
+  readonly "aria-valuetext"?: string | undefined;
+}
+
+/** The props as the implementation sees them. */
+type Loose = {
+  readonly class?: ClassValue;
+  readonly value?: readonly number[] | undefined;
+  readonly defaultValue?: readonly number[] | undefined;
+  readonly min?: number | undefined;
+  readonly thumbLabels?: readonly string[] | undefined;
+  readonly thumbValueTexts?: readonly string[] | undefined;
+  readonly "aria-label"?: string | undefined;
+  readonly "aria-labelledby"?: string | undefined;
+  readonly "aria-valuetext"?: string | undefined;
+  readonly [prop: string]: unknown;
+};
+
+/**
+ * Props of {@link Slider}: the primitive's props (`value`, `defaultValue`, `onValueChange`,
+ * `onValueCommit`, `min`, `max`, `step`, `orientation`, `dir`, `inverted`, `disabled`, `name` and
+ * others), plus the {@link SliderExtraProps}. The remaining props are the attributes of the root
+ * element.
+ * @since 1.0.0
+ * @see {@link Slider}
+ */
+export type SliderProps<T extends PolymorphicTarget = "span"> = SliderPrimitiveProps<T> &
+  SliderExtraProps;
+
+/**
+ * Selects a number, or a range of several numbers, by dragging a thumb along a track or with the
+ * keyboard. The number of thumbs is the length of `value` or `defaultValue` (one thumb at `min` when
+ * neither is given). Use `value` and `onValueChange` to control it, or `defaultValue` to start it.
+ *
+ * Keyboard and ARIA: each thumb is a focusable element with `role="slider"`. Arrow keys move one
+ * step (the arrow that raises the value follows the direction, `inverted` and the orientation).
+ * Shift+Arrow and PageUp or PageDown move ten steps, and Home and End jump to the ends. The
+ * thumb sets `aria-valuemin`, `aria-valuenow`, `aria-valuemax` and `aria-orientation`. While
+ * disabled it leaves the tab order and has `aria-disabled="true"`. A single slider is named by
+ * `aria-label` or `aria-labelledby`, which the component puts on its thumb. A range is a
+ * `role="group"` named by `aria-label` or `aria-labelledby`, and each of its thumbs is named by
+ * `thumbLabels` (default "Minimum" and "Maximum"). A press on the track moves the nearest thumb to
+ * the pointer, and the drag continues outside the slider.
+ *
+ * shadcn/ui differences: `class` replaces `className`. Each thumb gets its own accessible name
+ * here (`thumbLabels`, or `aria-label` for a single thumb). shadcn/ui does not name the thumbs.
+ *
+ * @param props - The props, see {@link SliderProps}.
+ * @returns The slider root, with the track, the range and one thumb per value.
+ * @example
+ * ```tsx
+ * import { Slider } from "@/components/ui/slider";
+ *
+ * export function VolumeControl() {
+ *   return <Slider defaultValue={[50]} max={100} step={1} aria-label="Volume" class="w-64" />;
+ * }
+ * ```
+ * @since 1.0.0
+ * @see {@link SliderProps}
+ */
+function Slider<T extends PolymorphicTarget = "span">(props: SliderProps<T>): JSX.Element {
+  const [local, rest] = splitProps(props as unknown as Loose, [
+    "class",
+    "value",
+    "defaultValue",
+    "min",
+    "thumbLabels",
+    "thumbValueTexts",
+    "aria-label",
+    "aria-labelledby",
+    "aria-valuetext",
+  ]);
+  const values = (): readonly number[] => local.value ?? local.defaultValue ?? [local.min ?? 0];
+  const single = (): boolean => values().length === 1;
+  return (
+    <SliderPrimitive
+      data-slot="slider"
+      value={local.value}
+      defaultValue={local.defaultValue}
+      min={local.min}
+      role={single() ? undefined : "group"}
+      aria-label={single() ? undefined : local["aria-label"]}
+      aria-labelledby={single() ? undefined : local["aria-labelledby"]}
+      class={cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        local.class,
+      )}
+      {...rest}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        class="relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5 forced-colors:border forced-colors:border-[ButtonText] forced-colors:bg-[Canvas]"
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          class="absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full forced-colors:bg-[Highlight]"
+        />
+      </SliderPrimitive.Track>
+      <For each={values().map((_, index) => index)}>
+        {(index: number) => (
+          <SliderPrimitive.Thumb
+            data-slot="slider-thumb"
+            aria-label={single() ? local["aria-label"] : local.thumbLabels?.[index]}
+            aria-labelledby={single() ? local["aria-labelledby"] : undefined}
+            aria-valuetext={
+              local.thumbValueTexts?.[index] ?? (single() ? local["aria-valuetext"] : undefined)
+            }
+            class="block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden motion-reduce:transition-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 forced-colors:border-[ButtonText] forced-colors:bg-[ButtonFace]"
+          />
+        )}
+      </For>
+    </SliderPrimitive>
+  );
+}
+
+export { Slider };

package/registry/spinner/item.json

@@ -0,0 +1,4 @@
+{
+  "title": "Spinner",
+  "description": "An indicator that can be used to show a loading state."
+}

package/registry/spinner/spinner.tsx

@@ -0,0 +1,51 @@
+import { splitProps } from "@shadow-js/core";
+import type { JSX } from "@shadow-js/web";
+import { type IconProps, LoaderIcon } from "@/components/ui/icons";
+import { useUiStrings } from "@/lib/ui-strings";
+import { cn } from "@/lib/utils";
+
+/**
+ * A loading indicator: a spinning arc that assistive technology announces as "Loading". It is an
+ * `svg` with `role="status"`. It is sized with `class` (the default is `size-4`, the icon size).
+ * Under reduced motion it turns slowly instead of stopping, so it still reads as busy.
+ *
+ * Keyboard and ARIA: no keys. The element is `role="status"` with `aria-label="Loading"` by
+ * default; pass your own `aria-label` (for example "Saving") to name what is loading.
+ *
+ * shadcn/ui differences: `class` replaces `className`. The spinner also keeps turning slowly under
+ * reduced motion, which shadcn/ui does not do.
+ *
+ * @param props - The props: the attributes of the `svg`, such as `class` and `aria-label`.
+ * @returns The spinner `svg`.
+ * @example
+ * ```tsx
+ * import { Button } from "@/components/ui/button";
+ * import { Spinner } from "@/components/ui/spinner";
+ *
+ * export function SaveButton() {
+ *   return (
+ *     <Button disabled>
+ *       <Spinner />
+ *       Saving
+ *     </Button>
+ *   );
+ * }
+ * ```
+ * @since 1.0.0
+ */
+function Spinner(props: IconProps): JSX.Element {
+  const [local, rest] = splitProps(props, ["class"]);
+  const t = useUiStrings();
+  return (
+    <LoaderIcon
+      role="status"
+      aria-label={t("spinner.loading", "Loading")}
+      aria-hidden="false"
+      data-slot="spinner"
+      class={cn("size-4 animate-spin motion-reduce:animate-[spin_3s_linear_infinite]", local.class)}
+      {...rest}
+    />
+  );
+}
+
+export { Spinner };

package/registry/switch/item.json

@@ -0,0 +1,4 @@
+{
+  "title": "Switch",
+  "description": "A control that allows the user to toggle between checked and not checked."
+}

package/registry/switch/switch.tsx

@@ -0,0 +1,93 @@
+import { splitProps } from "@shadow-js/core";
+import {
+  type PolymorphicTarget,
+  Switch as SwitchPrimitive,
+  type SwitchProps as SwitchPrimitiveProps,
+} from "@shadow-js/primitives";
+import type { JSX } from "@shadow-js/web";
+import { type ClassValue, cn } from "@/lib/utils";
+
+/**
+ * Props of {@link Switch}: the primitive's props (`checked`, `defaultChecked`, `onCheckedChange`,
+ * `name`, `value`, `required`, `disabled`, `form`), `size` (`"default"` or `"sm"`), `as` to render
+ * another element, and the attributes of the rendered element.
+ * @since 1.0.0
+ * @see {@link Switch}
+ */
+export type SwitchProps<T extends PolymorphicTarget = "button"> = SwitchPrimitiveProps<T> &
+  SwitchExtraProps;
+
+/**
+ * The switch's own props: its size.
+ * @since 1.0.0
+ * @see {@link Switch}
+ */
+export interface SwitchExtraProps {
+  /**
+   * The size of the switch: `default` is 20px high and 32px wide, `sm` is 14px high and 24px wide.
+   * @default "default"
+   */
+  readonly size?: "sm" | "default" | undefined;
+}
+
+/** The props as the implementation sees them. */
+type Loose = {
+  readonly class?: ClassValue;
+  readonly size?: "sm" | "default" | undefined;
+  readonly [prop: string]: unknown;
+};
+
+/**
+ * A control that switches one setting on or off. Controlled with `checked` and `onCheckedChange`,
+ * or uncontrolled with `defaultChecked`. With a `name` it takes part in native forms. The thumb
+ * moves the right way in right-to-left layouts.
+ *
+ * Keyboard and ARIA: Tab moves focus to the switch. Space or Enter toggles it. It has
+ * `role="switch"` and `aria-checked` (`"true"` or `"false"`), and `data-state` (`"checked"` or
+ * `"unchecked"`). A disabled switch is a disabled button. `required` sets `aria-required`. Name it
+ * with a {@link Label} (`id` on the switch, `htmlFor` on the label) or with `aria-label`. Clicking
+ * the label toggles the switch.
+ *
+ * shadcn/ui differences: `as` replaces `asChild` for choosing the rendered element, and `class`
+ * replaces `className`. Each part has its `data-slot` (`switch` and `switch-thumb`).
+ *
+ * @param props - The props, see {@link SwitchProps}.
+ * @returns The switch element with its thumb inside.
+ * @example
+ * ```tsx
+ * import { Label } from "@/components/ui/label";
+ * import { Switch } from "@/components/ui/switch";
+ *
+ * export function AirplaneMode() {
+ *   return (
+ *     <div class="flex items-center gap-2">
+ *       <Switch id="airplane" onCheckedChange={(on: boolean) => console.log(on)} />
+ *       <Label htmlFor="airplane">Airplane mode</Label>
+ *     </div>
+ *   );
+ * }
+ * ```
+ * @since 1.0.0
+ * @see {@link SwitchProps}
+ */
+function Switch<T extends PolymorphicTarget = "button">(props: SwitchProps<T>): JSX.Element {
+  const [local, rest] = splitProps(props as unknown as Loose, ["class", "size"]);
+  return (
+    <SwitchPrimitive
+      data-slot="switch"
+      data-size={local.size ?? "default"}
+      class={cn(
+        "peer group/switch inline-flex h-[1.15rem] w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 motion-reduce:transition-none data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 forced-colors:border-[ButtonText] forced-colors:data-[state=checked]:bg-[Highlight] forced-colors:data-[state=unchecked]:bg-[Canvas] focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-transparent",
+        local.class,
+      )}
+      {...rest}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        class="pointer-events-none block size-4 group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 rounded-full bg-background ring-0 transition-transform motion-reduce:transition-none data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 rtl:data-[state=checked]:-translate-x-[calc(100%-2px)] dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground forced-colors:bg-[ButtonText] forced-colors:data-[state=checked]:bg-[HighlightText]"
+      />
+    </SwitchPrimitive>
+  );
+}
+
+export { Switch };

package/registry/table/item.json

@@ -0,0 +1,4 @@
+{
+  "title": "Table",
+  "description": "A responsive table component."
+}