@syscore/ui-library 1.25.0 → 2.0.0-beta-publish-workflow-beta.1

package/client/components/ui/pagination-v01.tsx

@@ -0,0 +1,157 @@
+import * as React from "react";
+import { MoreHorizontal } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+export type PaginationV01State = "default" | "active" | "disabled";
+
+/**
+ * Figma draws the chevrons as filled paths on a 12x12 box (node 12223:4804 /
+ * 12223:4842), not as stroked icons — lucide's stroked chevron reads noticeably
+ * thinner at this size. Inlined verbatim; colour comes from `currentColor`,
+ * which the CSS sets independently of the label.
+ */
+const ChevronLeftFilled = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 12 12" fill="none" aria-hidden {...props}>
+    <path
+      d="M7.18279 1.18276C7.42687 0.938681 7.82348 0.938681 8.06755 1.18276C8.31159 1.42684 8.31162 1.82346 8.06755 2.06752L4.50994 5.62514L8.06755 9.18276C8.31159 9.42684 8.31162 9.82346 8.06755 10.0675C7.82349 10.3116 7.42687 10.3116 7.18279 10.0675L3.18279 6.06752C2.93871 5.82345 2.93871 5.42684 3.18279 5.18276L7.18279 1.18276Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+const ChevronRightFilled = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 12 12" fill="none" aria-hidden {...props}>
+    <path
+      d="M4.06774 10.0677C3.8238 10.3116 3.42708 10.3113 3.18297 10.0677C2.9389 9.82361 2.9389 9.427 3.18297 9.18292L6.74059 5.62531L3.18297 2.06769C2.9389 1.82361 2.9389 1.427 3.18297 1.18292C3.42705 0.938845 3.82366 0.938845 4.06774 1.18292L8.06774 5.18292C8.31139 5.42704 8.31167 5.82375 8.06774 6.06769L4.06774 10.0677Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+const PaginationV01 = ({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="Pagination"
+    className={cn("pagination-v01", className)}
+    {...props}
+  >
+    {children}
+  </nav>
+);
+PaginationV01.displayName = "PaginationV01";
+
+interface ControlProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  state?: PaginationV01State;
+}
+
+const PaginationV01Previous = React.forwardRef<HTMLButtonElement, ControlProps>(
+  (
+    { className, state = "default", disabled, children = "Previous", ...props },
+    ref,
+  ) => {
+    const isDisabled = disabled || state === "disabled";
+    return (
+      <button
+        ref={ref}
+        type="button"
+        data-state={state}
+        disabled={isDisabled}
+        aria-label="Go to previous page"
+        className={cn("pagination-v01-control font-mazzardSoft", className)}
+        {...props}
+      >
+        <ChevronLeftFilled className="pagination-v01-icon" />
+        <span className="pagination-v01-label body-small">{children}</span>
+      </button>
+    );
+  },
+);
+PaginationV01Previous.displayName = "PaginationV01Previous";
+
+const PaginationV01Next = React.forwardRef<HTMLButtonElement, ControlProps>(
+  (
+    { className, state = "default", disabled, children = "Next", ...props },
+    ref,
+  ) => {
+    const isDisabled = disabled || state === "disabled";
+    return (
+      <button
+        ref={ref}
+        type="button"
+        data-state={state}
+        disabled={isDisabled}
+        aria-label="Go to next page"
+        className={cn("pagination-v01-control font-mazzardSoft", className)}
+        {...props}
+      >
+        <span className="pagination-v01-label body-small">{children}</span>
+        <ChevronRightFilled className="pagination-v01-icon" />
+      </button>
+    );
+  },
+);
+PaginationV01Next.displayName = "PaginationV01Next";
+
+interface PageProps extends ControlProps {
+  current?: boolean;
+}
+
+const PaginationV01Page = React.forwardRef<HTMLButtonElement, PageProps>(
+  (
+    { className, state = "default", current, disabled, children, ...props },
+    ref,
+  ) => {
+    const resolved: PaginationV01State = current ? "active" : state;
+    const isDisabled = disabled || resolved === "disabled";
+    const isCurrent = resolved === "active";
+    return (
+      <button
+        ref={ref}
+        type="button"
+        data-state={resolved}
+        disabled={isDisabled}
+        aria-current={isCurrent ? "page" : undefined}
+        aria-label={typeof children === "string" ? `Page ${children}` : "Page"}
+        className={cn("pagination-v01-page", className)}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+PaginationV01Page.displayName = "PaginationV01Page";
+
+interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
+  state?: PaginationV01State;
+}
+
+const PaginationV01Ellipsis = ({
+  className,
+  state = "default",
+  ...props
+}: EllipsisProps) => (
+  <span
+    aria-hidden
+    data-state={state}
+    className={cn("pagination-v01-ellipsis", className)}
+    {...props}
+  >
+    <MoreHorizontal className="pagination-v01-icon" strokeWidth={4} />
+    <span className="sr-only">More pages</span>
+  </span>
+);
+PaginationV01Ellipsis.displayName = "PaginationV01Ellipsis";
+
+export {
+  PaginationV01,
+  PaginationV01Previous,
+  PaginationV01Next,
+  PaginationV01Page,
+  PaginationV01Ellipsis,
+};

package/client/components/ui/password-field-v01.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { Eye, EyeOff } from "lucide-react";
+
+import {
+  TextFieldV01,
+  type TextFieldV01Props,
+} from "@/components/ui/text-field-v01";
+
+export interface PasswordFieldV01Props
+  extends Omit<TextFieldV01Props, "type" | "action"> {
+  visible?: boolean;
+  defaultVisible?: boolean;
+  onVisibleChange?: (visible: boolean) => void;
+}
+
+const PasswordFieldV01 = React.forwardRef<
+  HTMLInputElement,
+  PasswordFieldV01Props
+>(
+  (
+    {
+      visible: controlledVisible,
+      defaultVisible = false,
+      onVisibleChange,
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    const isControlled = controlledVisible !== undefined;
+    const [internal, setInternal] = React.useState(defaultVisible);
+    const visible = isControlled ? controlledVisible : internal;
+
+    const toggle = () => {
+      if (!isControlled) setInternal(!visible);
+      onVisibleChange?.(!visible);
+    };
+
+    return (
+      <TextFieldV01
+        ref={ref}
+        type={visible ? "text" : "password"}
+        disabled={disabled}
+        action={
+          <button
+            type="button"
+            className="text-field-v01-action"
+            onClick={toggle}
+            disabled={disabled}
+            aria-label={visible ? "Hide password" : "Show password"}
+            aria-pressed={visible}
+          >
+            {visible ? (
+              <Eye size={16} strokeWidth={1.5} aria-hidden />
+            ) : (
+              <EyeOff size={16} strokeWidth={1.5} aria-hidden />
+            )}
+          </button>
+        }
+        {...props}
+      />
+    );
+  },
+);
+PasswordFieldV01.displayName = "PasswordFieldV01";
+
+export { PasswordFieldV01 };

package/client/components/ui/search-field-v01.tsx

@@ -0,0 +1,192 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * Search field — built from the Figma component set `Search field`
+ * (node 12008:2262, "Search Field -v0.1").
+ *
+ * Figma models it as a single `State` property: Default, Focus, Active, Filled,
+ * Disable. Those map onto real interaction here — focus and value derive the
+ * state — and `state` can also be passed to pin one for specs and stories.
+ *
+ * Spacing and radius come from `--space-*` / `--radius-*`. The sizes Figma
+ * specifies that are not on a scale live as `--search-field-*` variables.
+ */
+type SearchFieldV01State =
+  | "default"
+  | "focus"
+  | "active"
+  | "filled"
+  | "disabled";
+
+/**
+ * Figma's icons are stroked at 1.5 on a 16 viewBox — lucide's own 24 viewBox
+ * renders a different weight at this size, so the paths are inlined verbatim.
+ * All three take `currentColor`.
+ */
+const iconProps = {
+  fill: "none",
+  strokeWidth: 1.5,
+  strokeLinecap: "round" as const,
+  strokeLinejoin: "round" as const,
+  "aria-hidden": true,
+};
+
+const SearchIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 16 16" {...iconProps} {...props}>
+    <path
+      d="M15 15L10.3333 10.3333M11.8889 6.44444C11.8889 9.45133 9.45133 11.8889 6.44444 11.8889C3.43756 11.8889 1 9.45133 1 6.44444C1 3.43756 3.43756 1 6.44444 1C9.45133 1 11.8889 3.43756 11.8889 6.44444Z"
+      stroke="currentColor"
+    />
+  </svg>
+);
+
+const EnterIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 16 16" {...iconProps} {...props}>
+    <path d="M9.16667 13.6L15 8L9.16667 2.4M15 8L1 8" stroke="currentColor" />
+  </svg>
+);
+
+const ClearIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 11.1 11.1" {...iconProps} {...props}>
+    <path d="M10.35 0.75L0.75 10.35" stroke="currentColor" />
+    <path d="M0.75 0.75L10.35 10.35" stroke="currentColor" />
+  </svg>
+);
+
+interface SearchFieldV01Props
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+  /**
+   * Figma `State`. Omit to let focus and value drive it:
+   * empty + blurred = `default`, empty + focused = `focus`,
+   * has value + focused = `active`, has value + blurred = `filled`.
+   */
+  state?: SearchFieldV01State;
+  /**
+   * Inline typeahead remainder rendered after the value — Figma's `Active`
+   * state ("Entry" + "typeahead"). Also shows the Enter affordance.
+   */
+  suggestion?: string;
+  /** Renders the clear button once there is a value (Figma `Filled`). */
+  onClear?: () => void;
+  /** Class for the outer box; `className` goes to the input. */
+  containerClassName?: string;
+}
+
+const SearchFieldV01 = React.forwardRef<HTMLInputElement, SearchFieldV01Props>(
+  (
+    {
+      className,
+      containerClassName,
+      state,
+      suggestion,
+      onClear,
+      placeholder = "Placeholder",
+      disabled,
+      value,
+      defaultValue,
+      onFocus,
+      onBlur,
+      onChange,
+      ...props
+    },
+    ref,
+  ) => {
+    const [focused, setFocused] = React.useState(false);
+    const [internalValue, setInternalValue] = React.useState(
+      defaultValue != null ? String(defaultValue) : "",
+    );
+
+    const currentValue = value != null ? String(value) : internalValue;
+    const hasValue = currentValue.length > 0;
+
+    const resolved: SearchFieldV01State =
+      state ??
+      (disabled
+        ? "disabled"
+        : focused
+          ? hasValue
+            ? "active"
+            : "focus"
+          : hasValue
+            ? "filled"
+            : "default");
+
+    // Figma drops the search icon as soon as the field is in use.
+    const showSearchIcon = resolved === "default" || resolved === "disabled";
+    const showTypeahead = resolved === "active" && Boolean(suggestion);
+    const showEnter = resolved === "active";
+    const showClear = resolved === "filled" && hasValue && Boolean(onClear);
+
+    return (
+      <div
+        data-state={resolved}
+        className={cn(
+          "search-field-v01",
+          showTypeahead && "search-field-v01--typeahead",
+          containerClassName,
+        )}
+      >
+        {showSearchIcon && (
+          <span className="search-field-v01-icon-box">
+            <SearchIcon className="search-field-v01-icon" />
+          </span>
+        )}
+
+        <span className="search-field-v01-field">
+          <input
+            ref={ref}
+            type="search"
+            role="searchbox"
+            className={cn("search-field-v01-input", className)}
+            placeholder={placeholder}
+            disabled={disabled || resolved === "disabled"}
+            value={value != null ? value : internalValue}
+            onFocus={(event) => {
+              setFocused(true);
+              onFocus?.(event);
+            }}
+            onBlur={(event) => {
+              setFocused(false);
+              onBlur?.(event);
+            }}
+            onChange={(event) => {
+              if (value == null) setInternalValue(event.target.value);
+              onChange?.(event);
+            }}
+            {...props}
+          />
+          {showTypeahead && (
+            <span className="search-field-v01-suggestion" aria-hidden="true">
+              {suggestion}
+            </span>
+          )}
+        </span>
+
+        {(showEnter || showClear) && (
+          <span className="search-field-v01-actions">
+            {showClear ? (
+              <button
+                type="button"
+                className="search-field-v01-clear"
+                aria-label="Clear search"
+                onClick={onClear}
+              >
+                <ClearIcon className="search-field-v01-clear-glyph" />
+              </button>
+            ) : (
+              <span className="search-field-v01-enter-box">
+                <EnterIcon className="search-field-v01-icon" />
+              </span>
+            )}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+SearchFieldV01.displayName = "SearchFieldV01";
+
+export { SearchFieldV01 };
+export type { SearchFieldV01Props, SearchFieldV01State };

package/client/components/ui/section-heading.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { Text } from "@syscore/ui-library";
+import { Stack } from "./layout";
+
+// ---------------------------------------------------------------------------
+// SectionHeading — title + subtitle pair (RULE #-4B / ui-spacing-and-density.md)
+//
+// Owns the gap (floor gap-3, defaults to the gap-4 target) AND the line-height on
+// each line, via DS_PENDING_CSS combined selectors that beat the DS typography
+// class on specificity. No page should stack two Text lines and hand-roll this
+// itself -- that's exactly how the heading/subtitle overlap bug shipped.
+// ---------------------------------------------------------------------------
+interface SectionHeadingProps {
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+  titleAs?: React.ElementType;
+  titleVariant?: string;
+  subtitleVariant?: string;
+  gap?: number;
+}
+
+const SectionHeading = React.forwardRef<HTMLElement, SectionHeadingProps>(
+  (
+    {
+      title,
+      subtitle,
+      titleAs,
+      titleVariant = "heading-xxsmall",
+      subtitleVariant = "body-base",
+      gap = 4,
+    },
+    ref,
+  ) => (
+    <Stack ref={ref} gap={gap}>
+      <Text as={titleAs} variant={titleVariant} className="section-heading__title">
+        {title}
+      </Text>
+      {subtitle ? (
+        <Text variant={subtitleVariant} className="section-heading__subtitle">
+          {subtitle}
+        </Text>
+      ) : null}
+    </Stack>
+  ),
+);
+SectionHeading.displayName = "SectionHeading";
+
+export { SectionHeading };
+export type { SectionHeadingProps };

package/client/components/ui/sidebar.tsx

@@ -281,8 +281,12 @@ SidebarTrigger.displayName = "SidebarTrigger";
 
 const SidebarRail = React.forwardRef<
   HTMLButtonElement,
-  React.ComponentProps<"button">
->(({ className, ...props }, ref) => {
+  React.ComponentProps<"button"> & {
+    side?: "left" | "right";
+    state?: "expanded" | "collapsed";
+    collapsible?: "offcanvas" | "icon" | "none";
+  }
+>(({ className, side, state, collapsible, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
 
   return (
@@ -308,8 +312,11 @@ SidebarRail.displayName = "SidebarRail";
 
 const SidebarInset = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<"main">
->(({ className, ...props }, ref) => {
+  React.ComponentProps<"main"> & {
+    state?: "expanded" | "collapsed";
+    variant?: "sidebar" | "floating" | "inset";
+  }
+>(({ className, state, variant, ...props }, ref) => {
   return (
     <main
       ref={ref}
@@ -566,11 +573,10 @@ const SidebarMenuButton = React.forwardRef<
     }
 
     return (
-      <Tooltip>
+      <Tooltip trigger="hover">
         <TooltipTrigger asChild>{button}</TooltipTrigger>
         <TooltipContent
-          side="right"
-          align="center"
+          direction="left"
           hidden={state !== "collapsed" || isMobile}
           {...tooltip}
         />
@@ -707,7 +713,6 @@ const SidebarMenuSubButton = React.forwardRef<
         size === "md" && "sidebar-menu-sub-button--size-md",
         className,
       )}
-      data-size={size}
       {...props}
     />
   );

package/client/components/ui/stepper.tsx

@@ -0,0 +1,148 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+export interface StepItem {
+  title: string;
+  description?: string;
+}
+
+type StepStatus = "complete" | "current" | "upcoming";
+type StepperOrientation = "horizontal" | "vertical";
+type StepperVariant = "default" | "outlined";
+type StepperSize = "sm" | "md" | "lg";
+
+export interface StepperProps {
+  steps: StepItem[];
+  currentStep: number; // 0-indexed
+  orientation?: StepperOrientation;
+  variant?: StepperVariant;
+  size?: StepperSize;
+  onStepClick?: (index: number) => void;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function getStatus(index: number, currentStep: number): StepStatus {
+  if (index < currentStep) return "complete";
+  if (index === currentStep) return "current";
+  return "upcoming";
+}
+
+const CheckIcon = () => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+    <path
+      d="M2.5 7L5.5 10L11.5 4"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+// ---------------------------------------------------------------------------
+// Stepper
+// ---------------------------------------------------------------------------
+const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
+  (
+    {
+      steps,
+      currentStep,
+      orientation = "horizontal",
+      variant = "default",
+      size = "md",
+      onStepClick,
+      className,
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        role="list"
+        aria-label="Progress steps"
+        className={cn(
+          "stepper",
+          `stepper--${orientation}`,
+          `stepper--${size}`,
+          className,
+        )}
+      >
+        {steps.map((step, index) => {
+          const status = getStatus(index, currentStep);
+          const isClickable = !!onStepClick && status === "complete";
+          const isLast = index === steps.length - 1;
+
+          return (
+            <div
+              key={index}
+              role="listitem"
+              aria-current={status === "current" ? "step" : undefined}
+              className={cn(
+                "stepper-item",
+                `stepper-item--${status}`,
+                orientation === "horizontal" && !isLast && "stepper-item--with-connector",
+              )}
+            >
+              {/* Indicator + connector row */}
+              <div className="stepper-indicator-row">
+                {/* Circle */}
+                <button
+                  type="button"
+                  disabled={!isClickable}
+                  onClick={() => isClickable && onStepClick(index)}
+                  className={cn(
+                    "stepper-indicator",
+                    `stepper-indicator--${status}`,
+                    `stepper-indicator--${variant}`,
+                    isClickable && "stepper-indicator--clickable",
+                  )}
+                  aria-label={`Step ${index + 1}: ${step.title} (${status})`}
+                >
+                  {status === "complete" ? (
+                    <CheckIcon />
+                  ) : (
+                    <span className="stepper-indicator-number">{index + 1}</span>
+                  )}
+                </button>
+
+                {/* Connector line — horizontal: after indicator, vertical: below */}
+                {!isLast && (
+                  <div
+                    className={cn(
+                      "stepper-connector",
+                      `stepper-connector--${orientation}`,
+                      index < currentStep && "stepper-connector--complete",
+                    )}
+                    aria-hidden="true"
+                  />
+                )}
+              </div>
+
+              {/* Label */}
+              <div className="stepper-label">
+                <span className={cn("stepper-title", `stepper-title--${status}`)}>
+                  {step.title}
+                </span>
+                {step.description && (
+                  <span className={cn("stepper-description", `stepper-description--${status}`)}>
+                    {step.description}
+                  </span>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  },
+);
+
+Stepper.displayName = "Stepper";
+
+export { Stepper };