@stasho/ds 0.1.0

package/src/components/dialog/dialog.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type HTMLAttributes,
+} from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { X } from "@phosphor-icons/react";
+import { cn } from "@ac/lib/cn";
+
+/* ── Direct re-exports ─────────────────────────── */
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogClose = DialogPrimitive.Close;
+
+/* ── DialogContent (Portal + Overlay + Content) ── */
+
+type DialogContentProps = ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Content
+> & {
+  locked?: boolean;
+};
+
+const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
+  ({ className, children, locked, ...rest }, ref) => (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Overlay
+        className={cn(
+          "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+          "motion-reduce:animate-none",
+        )}
+      />
+      <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <DialogPrimitive.Content
+          ref={ref}
+          className={cn(
+            "relative w-full max-w-md rounded-md bg-surface p-6 shadow-brand-lg",
+            "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+            "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+            "motion-reduce:animate-none",
+            className,
+          )}
+          {...(locked
+            ? {
+                onInteractOutside: (e: Event) => e.preventDefault(),
+                onEscapeKeyDown: (e: KeyboardEvent) => e.preventDefault(),
+              }
+            : {})}
+          {...rest}
+        >
+          {children}
+          {locked ? null : (
+            <DialogPrimitive.Close
+              className={cn(
+                "absolute top-4 right-4 rounded-sm",
+                "text-muted-foreground transition-colors hover:text-foreground",
+                "focus-visible:outline-none focus-visible:ring-2",
+                "focus-visible:ring-primary-400 focus-visible:ring-offset-2",
+              )}
+              aria-label="Close"
+            >
+              <X weight="bold" className="size-4" />
+            </DialogPrimitive.Close>
+          )}
+        </DialogPrimitive.Content>
+      </div>
+    </DialogPrimitive.Portal>
+  ),
+);
+
+DialogContent.displayName = "DialogContent";
+
+/* ── DialogTitle ───────────────────────────────── */
+
+const DialogTitle = forwardRef<
+  HTMLHeadingElement,
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...rest }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "font-heading font-bold text-lg text-foreground",
+      className,
+    )}
+    {...rest}
+  />
+));
+
+DialogTitle.displayName = "DialogTitle";
+
+/* ── DialogDescription ─────────────────────────── */
+
+const DialogDescription = forwardRef<
+  HTMLParagraphElement,
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...rest }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...rest}
+  />
+));
+
+DialogDescription.displayName = "DialogDescription";
+
+/* ── Layout helpers (plain divs) ───────────────── */
+
+function DialogHeader({
+  className,
+  ...rest
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn("flex flex-col gap-1.5", className)} {...rest} />
+  );
+}
+
+function DialogFooter({
+  className,
+  ...rest
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("flex justify-end gap-3 pt-4", className)}
+      {...rest}
+    />
+  );
+}
+
+/* ── Exports ───────────────────────────────────── */
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  type DialogContentProps,
+};

package/src/components/form-field/form-field.tsx

@@ -0,0 +1,71 @@
+import {
+  cloneElement,
+  isValidElement,
+  useId,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { cn } from "@ac/lib/cn";
+
+type FormFieldProps = {
+  label: string;
+  required?: boolean;
+  helperText?: string;
+  error?: string;
+  children: ReactNode;
+  className?: string;
+};
+
+function FormField({
+  label,
+  required = false,
+  helperText,
+  error,
+  children,
+  className,
+}: FormFieldProps) {
+  const id = useId();
+  const inputId = `${id}-input`;
+  const messageId = `${id}-message`;
+  const hasMessage = Boolean(error ?? helperText);
+
+  const hasError = Boolean(error);
+
+  const child = isValidElement(children)
+    ? cloneElement(children as ReactElement<Record<string, unknown>>, {
+        id: inputId,
+        ...(hasMessage ? { "aria-describedby": messageId } : {}),
+        ...(hasError ? { error: true, "aria-invalid": true } : {}),
+      })
+    : children;
+
+  return (
+    <div className={cn("flex flex-col gap-1.5", className)}>
+      <label
+        htmlFor={inputId}
+        className="text-sm font-medium text-foreground"
+      >
+        {label}
+        {required && (
+          <span className="text-error-600 ml-0.5" aria-hidden="true">
+            *
+          </span>
+        )}
+      </label>
+      {child}
+      {error ? (
+        <p id={messageId} role="alert" className="text-xs text-error-600">
+          {error}
+        </p>
+      ) : helperText ? (
+        <p id={messageId} className="text-xs text-muted-foreground">
+          {helperText}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+FormField.displayName = "FormField";
+
+export { FormField, type FormFieldProps };

package/src/components/input/input.tsx

@@ -0,0 +1,52 @@
+import { forwardRef, type InputHTMLAttributes } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@ac/lib/cn";
+
+const inputVariants = cva(
+  [
+    "w-full font-sans text-foreground bg-primary-100 dark:bg-base-700",
+    "border-0 rounded-full",
+    "placeholder:text-muted-foreground",
+    "focus-visible:outline-none focus-visible:ring-3",
+    "focus-visible:ring-primary-500",
+    "disabled:opacity-50 disabled:pointer-events-none",
+    "ring-0 transition-colors",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "py-1.5 px-4 text-sm",
+        md: "py-2 px-5 text-base",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
+
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> &
+  VariantProps<typeof inputVariants> & {
+    error?: boolean;
+  };
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ size, error = false, className, ...rest }, ref) => {
+    return (
+      <input
+        ref={ref}
+        className={cn(
+          inputVariants({ size }),
+          error && "border-3 border-error-400 hover:border-error-500",
+          className,
+        )}
+        aria-invalid={error || undefined}
+        {...rest}
+      />
+    );
+  },
+);
+
+Input.displayName = "Input";
+
+export { Input, inputVariants, type InputProps };

package/src/components/logo/logo.tsx

@@ -0,0 +1,68 @@
+import { type ComponentPropsWithoutRef, forwardRef } from "react";
+
+import { cn } from "@ac/lib/cn";
+
+type LogoProps = Omit<ComponentPropsWithoutRef<"svg">, "viewBox" | "xmlns">;
+
+/**
+ * stasho icon mark (two circles + two arcs).
+ * Inherits color from parent via `currentColor`.
+ */
+const Logo = forwardRef<SVGSVGElement, LogoProps>(
+  ({ className, ...rest }, ref) => (
+    <svg
+      ref={ref}
+      viewBox="0 0 209 209"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      className={cn("shrink-0", className)}
+      {...rest}
+    >
+      <path d="M170.448 76.895c21.371 0 38.552-17.181 38.552-38.447C209 17.18 191.714 0 170.448 0c-21.372 0-38.552 17.181-38.552 38.448 0 21.266 17.18 38.447 38.552 38.447Z" />
+      <path d="M38.553 208.057c21.371 0 38.552-17.181 38.552-38.448 0-21.267-17.286-38.448-38.552-38.448C17.181 131.161 0 148.342 0 169.609c-.104 21.267 17.182 38.448 38.553 38.448Z" />
+      <path d="M143.106 11.314C106.544-3.772 62.858 3.457 33.106 33 3.353 62.647-3.875 106.019 11.21 142.476L143.106 11.314Z" />
+      <path d="M65.792 196.847c36.562 15.086 80.247 7.857 110-21.686 29.752-29.647 36.98-73.018 21.895-109.475L65.792 196.847Z" />
+    </svg>
+  ),
+);
+
+Logo.displayName = "Logo";
+
+/**
+ * stasho full logo (icon + "stasho" wordmark).
+ * Inherits color from parent via `currentColor`.
+ */
+const LogoFull = forwardRef<SVGSVGElement, LogoProps>(
+  ({ className, ...rest }, ref) => (
+    <svg
+      ref={ref}
+      viewBox="0 0 1383 229"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      className={cn("shrink-0", className)}
+      {...rest}
+    >
+      {/* Wordmark: "stasho" (placeholder — visual rebrand deferred) */}
+      <text
+        x="261"
+        y="180"
+        fill="currentColor"
+        fontFamily="inherit"
+        fontSize="200"
+        fontWeight="600"
+      >
+        stasho
+      </text>
+      {/* Icon mark */}
+      <path d="M170.448 76.895c21.371 0 38.552-17.181 38.552-38.447C209 17.18 191.714 0 170.448 0c-21.372 0-38.552 17.181-38.552 38.448 0 21.266 17.18 38.447 38.552 38.447Z" />
+      <path d="M38.553 208.056c21.371 0 38.552-17.18 38.552-38.447 0-21.267-17.286-38.448-38.552-38.448C17.181 131.161 0 148.342 0 169.609c-.104 21.267 17.182 38.447 38.553 38.447Z" />
+      <path d="M143.106 11.314C106.544-3.772 62.858 3.457 33.106 33 3.353 62.647-3.875 106.019 11.21 142.476L143.106 11.314Z" />
+      <path d="M65.792 196.847c36.562 15.086 80.247 7.857 110-21.686 29.752-29.647 36.98-73.018 21.895-109.475L65.792 196.847Z" />
+    </svg>
+  ),
+);
+
+LogoFull.displayName = "LogoFull";
+
+export { Logo, LogoFull };
+export type { LogoProps };

package/src/components/multi-select/multi-select.tsx

@@ -0,0 +1,312 @@
+import { forwardRef, useState } from "react";
+import { Popover } from "radix-ui";
+import { Command } from "cmdk";
+import { cva, type VariantProps } from "class-variance-authority";
+import { CaretDown, Check, X } from "@phosphor-icons/react";
+import { cn } from "@ac/lib/cn";
+
+const triggerVariants = cva(
+  [
+    "inline-flex items-center gap-1.5",
+    "w-full font-sans text-foreground bg-primary-100 dark:bg-base-700",
+    "border-0 rounded-2xl",
+    "focus-visible:outline-none focus-visible:ring-3",
+    "focus-visible:ring-primary-500",
+    "aria-disabled:opacity-50 aria-disabled:pointer-events-none",
+    "ring-0 transition-colors",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "min-h-9 py-1 px-3 text-sm",
+        md: "min-h-11 py-1.5 px-4 text-base",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
+
+const tagVariants = cva(
+  [
+    "inline-flex items-center gap-1 rounded-full bg-muted",
+    "text-foreground max-w-32 select-none",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "px-2 py-0.5 text-xs",
+        md: "px-2.5 py-0.5 text-sm",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
+
+type MultiSelectOption = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+
+type MultiSelectProps = VariantProps<typeof triggerVariants> & {
+  options: MultiSelectOption[];
+  value?: string[];
+  onValueChange?: (value: string[]) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  maxDisplayedTags?: number;
+  size?: "sm" | "md";
+  error?: boolean;
+  disabled?: boolean;
+  className?: string;
+  id?: string;
+  "aria-describedby"?: string;
+  "aria-invalid"?: boolean;
+};
+
+const MultiSelect = forwardRef<HTMLDivElement, MultiSelectProps>(
+  (
+    {
+      options,
+      value = [],
+      onValueChange,
+      placeholder = "Select...",
+      searchPlaceholder = "Search...",
+      emptyMessage = "No results found.",
+      maxDisplayedTags = 2,
+      size,
+      error = false,
+      disabled = false,
+      className,
+      id,
+      "aria-describedby": ariaDescribedBy,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [open, setOpen] = useState(false);
+    const [search, setSearch] = useState("");
+    const hasSelection = value.length > 0;
+
+    const selectedOptions = options.filter((o) =>
+      value.includes(o.value),
+    );
+    const displayedTags = selectedOptions.slice(0, maxDisplayedTags);
+    const overflowCount =
+      selectedOptions.length - displayedTags.length;
+
+    function toggle(optionValue: string) {
+      if (!onValueChange) return;
+      const next = value.includes(optionValue)
+        ? value.filter((v) => v !== optionValue)
+        : [...value, optionValue];
+      onValueChange(next);
+      setSearch("");
+    }
+
+    function removeTag(
+      e: React.MouseEvent,
+      optionValue: string,
+    ) {
+      e.stopPropagation();
+      onValueChange?.(value.filter((v) => v !== optionValue));
+    }
+
+    function clearAll(e: React.MouseEvent) {
+      e.stopPropagation();
+      onValueChange?.([]);
+    }
+
+    return (
+      <Popover.Root open={open} onOpenChange={setOpen}>
+        <Popover.Trigger asChild>
+          <div
+            ref={ref}
+            id={id}
+            role="button"
+            tabIndex={disabled ? -1 : 0}
+            aria-disabled={disabled || undefined}
+            aria-describedby={ariaDescribedBy}
+            aria-invalid={error || undefined}
+            className={cn(
+              triggerVariants({ size }),
+              "cursor-pointer",
+              error &&
+                "border-3 border-error-400 hover:border-error-500",
+              !hasSelection && "text-muted-foreground",
+              className,
+            )}
+            {...rest}
+          >
+          {hasSelection ? (
+            <>
+              <div className="flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden">
+                {displayedTags.map((opt) => (
+                  <span
+                    key={opt.value}
+                    className={cn(tagVariants({ size }), "shrink-0")}
+                  >
+                    <span className="truncate">{opt.label}</span>
+                    <button
+                      type="button"
+                      aria-label={`Remove ${opt.label}`}
+                      onClick={(e) => removeTag(e, opt.value)}
+                      className={cn(
+                        "shrink-0 rounded-full",
+                        "hover:bg-foreground/10 transition-colors",
+                        size === "sm" ? "size-3.5" : "size-4",
+                      )}
+                      tabIndex={-1}
+                    >
+                      <X
+                        weight="bold"
+                        className="size-full"
+                        aria-hidden="true"
+                      />
+                    </button>
+                  </span>
+                ))}
+                {overflowCount > 0 && (
+                  <span
+                    className={cn(
+                      "text-muted-foreground shrink-0",
+                      size === "sm" ? "text-xs" : "text-sm",
+                    )}
+                  >
+                    +{overflowCount} more
+                  </span>
+                )}
+              </div>
+              <button
+                type="button"
+                aria-label="Clear all"
+                onClick={clearAll}
+                className={cn(
+                  "shrink-0 rounded-full",
+                  "text-muted-foreground",
+                  "hover:text-foreground transition-colors",
+                  size === "sm" ? "size-4" : "size-5",
+                )}
+                tabIndex={-1}
+              >
+                <X
+                  weight="bold"
+                  className="size-full"
+                  aria-hidden="true"
+                />
+              </button>
+            </>
+          ) : (
+            <>
+              <span className="truncate flex-1 text-left">
+                {placeholder}
+              </span>
+              <CaretDown
+                weight="bold"
+                className={cn(
+                  "size-4 shrink-0 text-muted-foreground",
+                  "transition-transform",
+                  "motion-reduce:transition-none",
+                  open && "rotate-180",
+                )}
+                aria-hidden="true"
+              />
+            </>
+          )}
+          </div>
+        </Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content
+            className={cn(
+              "z-50 w-[var(--radix-popover-trigger-width)]",
+              "overflow-hidden rounded-2xl",
+              "bg-surface border border-edge shadow-brand",
+            )}
+            sideOffset={4}
+            align="start"
+            onOpenAutoFocus={(e) => e.preventDefault()}
+          >
+            <Command shouldFilter>
+              <Command.Input
+                placeholder={searchPlaceholder}
+                value={search}
+                onValueChange={setSearch}
+                className={cn(
+                  "w-full border-b border-edge bg-transparent",
+                  "px-4 py-2.5",
+                  "text-sm text-foreground",
+                  "placeholder:text-muted-foreground",
+                  "outline-none",
+                )}
+              />
+              <Command.List className="max-h-60 overflow-y-auto p-1">
+                <Command.Empty className="px-4 py-6 text-center text-sm text-muted-foreground">
+                  {emptyMessage}
+                </Command.Empty>
+                {options.map((option) => {
+                  const selected = value.includes(option.value);
+                  return (
+                    <Command.Item
+                      key={option.value}
+                      value={option.label}
+                      {...(option.disabled
+                        ? { disabled: true }
+                        : {})}
+                      onSelect={() => toggle(option.value)}
+                      className={cn(
+                        "relative flex items-center gap-2",
+                        "rounded-xl px-3 py-2",
+                        "text-sm text-foreground",
+                        "cursor-pointer select-none",
+                        "outline-none",
+                        "data-[selected=true]:bg-muted",
+                        "data-[disabled=true]:opacity-50",
+                        "data-[disabled=true]:pointer-events-none",
+                      )}
+                    >
+                      <span
+                        className={cn(
+                          "flex size-4 shrink-0 items-center",
+                          "justify-center",
+                          "rounded border-2 transition-colors",
+                          selected
+                            ? "border-primary bg-primary text-primary-foreground"
+                            : "border-edge bg-surface",
+                        )}
+                        aria-hidden="true"
+                      >
+                        {selected && (
+                          <Check
+                            weight="bold"
+                            className="size-3"
+                          />
+                        )}
+                      </span>
+                      <span className="flex-1">
+                        {option.label}
+                      </span>
+                    </Command.Item>
+                  );
+                })}
+              </Command.List>
+            </Command>
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
+    );
+  },
+);
+
+MultiSelect.displayName = "MultiSelect";
+
+export {
+  MultiSelect,
+  triggerVariants,
+  type MultiSelectProps,
+  type MultiSelectOption,
+};