@boxcustodia/library 2.0.0-alpha.2 → 2.0.0-alpha.21

package/src/components/select/select.tsx

@@ -0,0 +1,443 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import { useRender } from "@base-ui/react/use-render";
+import {
+  ChevronDownIcon,
+  ChevronsUpDownIcon,
+  ChevronUpIcon,
+} from "lucide-react";
+import * as React from "react";
+import { cn } from "../../lib";
+import { inputBaseClasses } from "../input";
+
+// ─── Primitives ───────────────────────────────────────────────────────────────
+
+export const selectTriggerClasses = cn(
+  inputBaseClasses,
+  "relative inline-flex items-center justify-between gap-2 select-none text-left text-foreground",
+  "focus-visible:border-ring",
+  "aria-invalid:border-error focus-visible:aria-invalid:ring-error/20",
+  "has-aria-invalid:border-error has-focus-visible:has-aria-invalid:ring-error/20",
+  "data-disabled:cursor-not-allowed data-disabled:opacity-50",
+  "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+);
+
+export const selectTriggerIconClassName = "-me-1 size-4.5 opacity-80 sm:size-4";
+
+export function SelectRoot<
+  Value = string,
+  Multiple extends boolean | undefined = false,
+>({
+  ...props
+}: SelectPrimitive.Root.Props<Value, Multiple>): React.ReactElement {
+  return <SelectPrimitive.Root {...props} />;
+}
+
+export function SelectTrigger({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.Trigger.Props): React.ReactElement {
+  return (
+    <SelectPrimitive.Trigger
+      className={cn(selectTriggerClasses, className)}
+      data-slot="select-trigger"
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon
+        data-slot="select-icon"
+        className="text-muted-foreground hover:text-foreground transition-colors"
+      >
+        <ChevronsUpDownIcon className={selectTriggerIconClassName} />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+export type SelectButtonProps = useRender.ComponentProps<"button"> & {
+  ref?: React.Ref<HTMLButtonElement>;
+};
+
+export function SelectButton({
+  className,
+  render,
+  children,
+  ...props
+}: SelectButtonProps): React.ReactElement {
+  const typeValue: React.ButtonHTMLAttributes<HTMLButtonElement>["type"] =
+    render ? undefined : "button";
+
+  const defaultProps = {
+    children: (
+      <>
+        <span className="flex-1 truncate in-data-placeholder:text-muted-foreground/72">
+          {children}
+        </span>
+        <ChevronsUpDownIcon className={selectTriggerIconClassName} />
+      </>
+    ),
+    className: cn(selectTriggerClasses, "min-w-0", className),
+    "data-slot": "select-button",
+    type: typeValue,
+  };
+
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(defaultProps, props),
+    render,
+  });
+}
+
+export function SelectValue({
+  className,
+  ...props
+}: SelectPrimitive.Value.Props): React.ReactElement {
+  return (
+    <SelectPrimitive.Value
+      className={cn(
+        "flex-1 truncate data-placeholder:text-muted-foreground",
+        className,
+      )}
+      data-slot="select-value"
+      {...props}
+    />
+  );
+}
+
+export function SelectPopup({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "start",
+  alignOffset = 0,
+  alignItemWithTrigger = false,
+  anchor,
+  portalProps,
+  ...props
+}: SelectPrimitive.Popup.Props & {
+  portalProps?: SelectPrimitive.Portal.Props;
+  side?: SelectPrimitive.Positioner.Props["side"];
+  sideOffset?: SelectPrimitive.Positioner.Props["sideOffset"];
+  align?: SelectPrimitive.Positioner.Props["align"];
+  alignOffset?: SelectPrimitive.Positioner.Props["alignOffset"];
+  alignItemWithTrigger?: SelectPrimitive.Positioner.Props["alignItemWithTrigger"];
+  anchor?: SelectPrimitive.Positioner.Props["anchor"];
+}): React.ReactElement {
+  return (
+    <SelectPrimitive.Portal {...portalProps}>
+      <SelectPrimitive.Positioner
+        align={align}
+        alignItemWithTrigger={alignItemWithTrigger}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="z-50 select-none"
+        data-slot="select-positioner"
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <SelectPrimitive.Popup
+          className="origin-(--transform-origin) text-foreground outline-none duration-100 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2"
+          data-slot="select-popup"
+          {...props}
+        >
+          <SelectPrimitive.ScrollUpArrow
+            className="top-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:top-px before:h-[200%] before:rounded-t-[calc(var(--radius-lg)-1px)] before:bg-linear-to-b before:from-50% before:from-popover"
+            data-slot="select-scroll-up-arrow"
+          >
+            <ChevronUpIcon className="relative size-4.5 sm:size-4" />
+          </SelectPrimitive.ScrollUpArrow>
+          <div className="relative h-full min-w-(--anchor-width) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]">
+            <SelectPrimitive.List
+              className={cn(
+                "max-h-[min(24rem,var(--available-height))] overflow-y-auto p-1",
+                className,
+              )}
+              data-slot="select-list"
+            >
+              {children}
+            </SelectPrimitive.List>
+          </div>
+          <SelectPrimitive.ScrollDownArrow
+            className="bottom-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:bottom-px before:h-[200%] before:rounded-b-[calc(var(--radius-lg)-1px)] before:bg-linear-to-t before:from-50% before:from-popover"
+            data-slot="select-scroll-down-arrow"
+          >
+            <ChevronDownIcon className="relative size-4.5 sm:size-4" />
+          </SelectPrimitive.ScrollDownArrow>
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  );
+}
+
+export function SelectItem({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.Item.Props): React.ReactElement {
+  return (
+    <SelectPrimitive.Item
+      className={cn(
+        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1fr_1rem] items-center gap-2 rounded-sm py-1 px-2 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      data-slot="select-item"
+      {...props}
+    >
+      <SelectPrimitive.ItemText className="col-start-1 min-w-0">
+        {children}
+      </SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator className="col-start-2">
+        <svg
+          aria-hidden="true"
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
+        </svg>
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  );
+}
+
+export function SelectSeparator({
+  className,
+  ...props
+}: SelectPrimitive.Separator.Props): React.ReactElement {
+  return (
+    <SelectPrimitive.Separator
+      className={cn("mx-2 my-1 h-px bg-border", className)}
+      data-slot="select-separator"
+      {...props}
+    />
+  );
+}
+
+export function SelectGroup(
+  props: SelectPrimitive.Group.Props,
+): React.ReactElement {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+export function SelectGroupLabel(
+  props: SelectPrimitive.GroupLabel.Props,
+): React.ReactElement {
+  return (
+    <SelectPrimitive.GroupLabel
+      className="px-2 py-1.5 font-medium text-muted-foreground text-xs"
+      data-slot="select-group-label"
+      {...props}
+    />
+  );
+}
+
+export function SelectLabel({
+  className,
+  ...props
+}: SelectPrimitive.Label.Props): React.ReactElement {
+  return (
+    <SelectPrimitive.Label
+      className={cn(
+        "not-in-data-[slot=field]:mb-2 inline-flex cursor-default items-center gap-2 font-medium text-base/4.5 text-foreground sm:text-sm/4",
+        className,
+      )}
+      data-slot="select-label"
+      {...props}
+    />
+  );
+}
+
+// ─── Composite ────────────────────────────────────────────────────────────────
+
+function defaultGetLabel(item: unknown): string {
+  if (item == null) return "";
+  if (typeof item === "string" || typeof item === "number") return String(item);
+  if (typeof item === "object") {
+    const record = item as Record<string, unknown>;
+    if ("label" in record) return String(record.label);
+    if ("name" in record) return String(record.name);
+    if ("title" in record) return String(record.title);
+  }
+  return String(item);
+}
+
+function defaultGetId(item: unknown): string {
+  if (item == null) return "";
+  if (typeof item === "string" || typeof item === "number") return String(item);
+  if (typeof item === "object") {
+    const record = item as Record<string, unknown>;
+    if ("id" in record) return String(record.id);
+    if ("value" in record) return String(record.value);
+  }
+  return String(item);
+}
+
+function defaultGetDisabled(item: unknown): boolean {
+  if (item != null && typeof item === "object" && "disabled" in item)
+    return Boolean((item as Record<string, unknown>).disabled);
+  return false;
+}
+
+type SelectBaseProps<TItem = unknown> = Omit<
+  SelectPrimitive.Root.Props<string, false>,
+  "children" | "onValueChange" | "value" | "defaultValue" | "items" | "multiple"
+> & {
+  items: readonly TItem[];
+  /** Returns the display text for an item. Used for the trigger value and ARIA. Defaults to `item.label`, `item.name`, `item.title`, or the stringified primitive. */
+  getLabel?: (item: TItem) => string;
+  /** Returns a stable string identifier for an item. Used as the React key and the underlying option value. Defaults to `item.id`, `item.value`, or the stringified primitive. */
+  getId?: (item: TItem) => string;
+  /** Returns whether an item should be disabled. Defaults to `item.disabled === true`. */
+  getDisabled?: (item: TItem) => boolean;
+  renderItem?: (item: TItem) => React.ReactNode;
+  placeholder?: string;
+  className?: string;
+  /** Styles applied to each internal slot. */
+  classNames?: {
+    /** Popup panel containing the item list. */
+    popup?: string;
+    /** Individual item row. */
+    item?: string;
+  };
+};
+
+export type SelectProps<TItem = unknown> =
+  | (SelectBaseProps<TItem> & {
+      multiple?: false;
+      value?: TItem | null;
+      defaultValue?: TItem | null;
+      onValueChange?: (value: TItem | null) => void;
+    })
+  | (SelectBaseProps<TItem> & {
+      multiple: true;
+      value?: TItem[];
+      defaultValue?: TItem[];
+      onValueChange?: (value: TItem[]) => void;
+    });
+
+/**
+ * Composite select for single and multiple selection.
+ *
+ * Items shaped as `{ id, name }`, `{ label, value }`, or plain strings/numbers
+ * work with no extra props. For other shapes, provide `getLabel` and/or `getId`.
+ *
+ * `renderItem` customizes the content **inside** each `SelectItem` (the
+ * checkmark indicator is always rendered by the item wrapper).
+ *
+ * Use `SelectRoot` + primitives directly when you need full structural
+ * control beyond what `className` + `classNames` slots offer.
+ */
+export function Select<TItem = unknown>(
+  allProps: SelectProps<TItem>,
+): React.ReactElement {
+  const {
+    items,
+    getLabel: getLabelProp,
+    getId: getIdProp,
+    getDisabled: getDisabledProp,
+    renderItem,
+    placeholder,
+    onValueChange,
+    value,
+    defaultValue,
+    multiple,
+    className,
+    classNames,
+    "aria-invalid": ariaInvalid,
+    ...rest
+  } = allProps as SelectBaseProps<TItem> & {
+    multiple?: boolean;
+    onValueChange?: (value: any) => void;
+    value?: any;
+    defaultValue?: any;
+    "aria-invalid"?: React.AriaAttributes["aria-invalid"];
+  };
+
+  const getLabel: (item: TItem) => string = getLabelProp ?? defaultGetLabel;
+  const getId: (item: TItem) => string = getIdProp ?? defaultGetId;
+  const getDisabled: (item: TItem) => boolean =
+    getDisabledProp ?? defaultGetDisabled;
+
+  const stringValue = multiple
+    ? (value as TItem[] | undefined)?.map(getId)
+    : value != null
+      ? getId(value as TItem)
+      : undefined;
+
+  const stringDefaultValue = multiple
+    ? (defaultValue as TItem[] | undefined)?.map(getId)
+    : defaultValue != null
+      ? getId(defaultValue as TItem)
+      : undefined;
+
+  const handleChange = (stringVal: string | string[] | null) => {
+    if (multiple) {
+      const vals = (stringVal as string[]) ?? [];
+      const found = vals
+        .map((sv) => items.find((i) => getId(i) === sv) ?? null)
+        .filter(Boolean) as TItem[];
+      onValueChange?.(found);
+    } else {
+      if (stringVal == null) {
+        onValueChange?.(null);
+        return;
+      }
+      const item =
+        items.find((i) => getId(i) === (stringVal as string)) ?? null;
+      onValueChange?.(item);
+    }
+  };
+
+  const itemToStringLabel = (stringVal: string) => {
+    const item = items.find((i) => getId(i) === stringVal);
+    return item ? getLabel(item) : stringVal;
+  };
+
+  return (
+    <SelectRoot
+      itemToStringLabel={itemToStringLabel}
+      multiple={multiple as any}
+      value={stringValue as any}
+      defaultValue={stringDefaultValue as any}
+      onValueChange={handleChange as any}
+      {...(rest as any)}
+    >
+      <SelectTrigger
+        className={className}
+        // Only forward `aria-invalid` when explicitly set. Base UI's Field
+        // integration already sets it from validity state; passing `undefined`
+        // here would clobber that value during prop merge and drop the error border.
+        {...(ariaInvalid === undefined ? {} : { "aria-invalid": ariaInvalid })}
+      >
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectPopup className={classNames?.popup}>
+        {items.map((item) => (
+          <SelectItem
+            key={getId(item)}
+            value={getId(item)}
+            disabled={getDisabled(item)}
+            className={classNames?.item}
+          >
+            {renderItem ? renderItem(item) : getLabel(item)}
+          </SelectItem>
+        ))}
+      </SelectPopup>
+    </SelectRoot>
+  );
+}
+
+// ─── Exports ──────────────────────────────────────────────────────────────────
+
+export { SelectPrimitive };
+export { SelectPopup as SelectContent };

package/src/components/skeleton/index.ts

@@ -0,0 +1 @@
+export * from "./skeleton";

package/src/components/skeleton/skeleton.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Skeleton } from "./skeleton";
+
+/**
+ * Loading placeholder that fills the space of the expected content.
+ * Fully composable — apply size, shape, and spacing directly via `className`.
+ * Conditionally render it yourself; `Skeleton` does not manage loading state.
+ */
+const meta: Meta<typeof Skeleton> = {
+  title: "Components/Skeleton",
+  component: Skeleton,
+  args: {
+    className: "h-4 w-[200px]",
+  },
+  parameters: { layout: "centered" },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+/**
+ * Compose multiple skeletons to sketch the loading state of a complex layout.
+ * Each skeleton maps 1:1 to a piece of real content it replaces.
+ */
+export const Composition: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Skeleton className="size-10 shrink-0 rounded-full" />
+      <div className="flex flex-col gap-2">
+        <Skeleton className="h-4 w-[150px]" />
+        <Skeleton className="h-4 w-[100px]" />
+      </div>
+    </div>
+  ),
+};

package/src/components/skeleton/skeleton.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Skeleton } from "../../components";
+
+// ── New coverage ──────────────────────────────────────────────────────────────
+
+describe("Skeleton component", () => {
+  const testId = "skeleton";
+
+  it("should render correctly", () => {
+    render(<Skeleton data-testid={testId} />);
+    const skeleton = screen.getByTestId(testId);
+
+    expect(skeleton).toBeInTheDocument();
+  });
+});
+
+describe("Skeleton", () => {
+  it("renders with data-slot='skeleton'", () => {
+    render(<Skeleton />);
+    expect(document.querySelector('[data-slot="skeleton"]')).toBeTruthy();
+  });
+
+  it("applies className", () => {
+    render(<Skeleton className="custom-cls" />);
+    expect(document.querySelector('[data-slot="skeleton"]')).toHaveClass(
+      "custom-cls",
+    );
+  });
+
+  it("renders children", () => {
+    render(
+      <Skeleton>
+        <span data-testid="child">loading</span>
+      </Skeleton>,
+    );
+    expect(screen.getByTestId("child")).toBeTruthy();
+  });
+
+  it("applies animate-skeleton class", () => {
+    render(<Skeleton />);
+    expect(document.querySelector('[data-slot="skeleton"]')).toHaveClass(
+      "animate-skeleton",
+    );
+  });
+
+  it("forwards additional props to div", () => {
+    render(<Skeleton aria-label="loading" data-testid="sk" />);
+    expect(screen.getByTestId("sk")).toHaveAttribute("aria-label", "loading");
+  });
+});

package/src/components/skeleton/skeleton.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import type { ComponentProps } from "react";
+import { cn } from "../../lib";
+
+export function Skeleton({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "animate-skeleton rounded-sm [--skeleton-highlight:--alpha(var(--color-white)/64%)] [background:linear-gradient(120deg,transparent_40%,var(--skeleton-highlight),transparent_60%)_var(--color-muted)_0_0/200%_100%_fixed] dark:[--skeleton-highlight:--alpha(var(--color-white)/4%)]",
+        className,
+      )}
+      data-slot="skeleton"
+      {...props}
+    />
+  );
+}

package/src/components/stack/index.ts

@@ -0,0 +1 @@
+export * from "./stack";