@syscore/ui-library 1.27.3 → 2.0.0-beta-publish-workflow-beta.2

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

@@ -0,0 +1,108 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface TextFieldV01Props
+  extends Omit<React.ComponentProps<"input">, "size"> {
+  label?: React.ReactNode;
+  helperText?: React.ReactNode;
+  error?: boolean;
+  warning?: boolean;
+  typeahead?: string;
+  focused?: boolean;
+  action?: React.ReactNode;
+}
+
+const TextFieldV01 = React.forwardRef<HTMLInputElement, TextFieldV01Props>(
+  (
+    {
+      className,
+      label,
+      helperText,
+      error = false,
+      warning = false,
+      typeahead,
+      focused,
+      action,
+      disabled,
+      readOnly,
+      value,
+      defaultValue,
+      placeholder = "Placeholder",
+      onChange,
+      id,
+      ...props
+    },
+    ref,
+  ) => {
+    const generated = React.useId();
+    const inputId = id ?? generated;
+
+    const isControlled = value !== undefined;
+    const [internal, setInternal] = React.useState(
+      () => (defaultValue as string) ?? "",
+    );
+    const current = isControlled ? String(value ?? "") : internal;
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (!isControlled) setInternal(event.target.value);
+      onChange?.(event);
+    };
+
+    return (
+      <div
+        className={cn("text-field-v01 font-mazzardSoft", className)}
+        data-filled={current !== "" ? "true" : undefined}
+        data-error={error ? "true" : undefined}
+        data-warning={warning && !error ? "true" : undefined}
+        data-disabled={disabled ? "true" : undefined}
+        data-readonly={readOnly ? "true" : undefined}
+        data-focus={focused ? "true" : undefined}
+        data-typeahead={typeahead ? "true" : undefined}
+      >
+        {label != null && label !== "" ? (
+          <div className="text-field-v01-label">
+            <span className="text-field-v01-label-text overline-medium">
+              {label}
+            </span>
+          </div>
+        ) : null}
+
+        <div className="text-field-v01-cell">
+          {focused && current === "" ? (
+            <span className="text-field-v01-caret" aria-hidden />
+          ) : null}
+          <input
+            ref={ref}
+            id={inputId}
+            className="text-field-v01-input"
+            disabled={disabled}
+            readOnly={readOnly}
+            placeholder={placeholder}
+            value={isControlled ? value : internal}
+            onChange={handleChange}
+            aria-invalid={error || undefined}
+            aria-describedby={helperText ? `${inputId}-helper` : undefined}
+            {...props}
+          />
+          {focused && current !== "" ? (
+            <span className="text-field-v01-caret" aria-hidden />
+          ) : null}
+          {typeahead ? (
+            <span className="text-field-v01-typeahead">{typeahead}</span>
+          ) : null}
+          {action}
+        </div>
+
+        {helperText != null && helperText !== "" ? (
+          <div className="text-field-v01-helper" id={`${inputId}-helper`}>
+            {helperText}
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);
+TextFieldV01.displayName = "TextFieldV01";
+
+export { TextFieldV01 };

package/client/components/ui/timeline.tsx

@@ -0,0 +1,181 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+// ─── Context ──────────────────────────────────────────────────────────────────
+
+interface TimelineContextValue {
+  direction: "vertical" | "horizontal";
+  side: "start" | "end" | "alternate";
+  align: "center" | "start";
+  density: "default" | "compact";
+}
+
+const TimelineContext = React.createContext<TimelineContextValue>({
+  direction: "vertical",
+  side: "alternate",
+  align: "center",
+  density: "default",
+});
+
+// ─── Timeline Root ────────────────────────────────────────────────────────────
+
+export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Layout direction.
+   * - "vertical"   → items stack top-to-bottom (default)
+   * - "horizontal" → items flow left-to-right
+   */
+  direction?: "vertical" | "horizontal";
+  /**
+   * Which side content renders on relative to the stem.
+   * - "alternate" → alternates left / right (default)
+   * - "end"       → all content on the right (vertical) or below (horizontal)
+   * - "start"     → all content on the left (vertical) or above (horizontal)
+   */
+  side?: "start" | "end" | "alternate";
+  /**
+   * Vertical alignment of content inside each item.
+   * - "center" → content is centered on the dot (default)
+   * - "start"  → content aligns to the top of the dot
+   */
+  align?: "center" | "start";
+  /**
+   * Reduces spacing between items.
+   */
+  density?: "default" | "compact";
+}
+
+const Timeline = React.forwardRef<HTMLDivElement, TimelineProps>(
+  (
+    {
+      className,
+      children,
+      direction = "vertical",
+      side = "alternate",
+      align = "center",
+      density = "default",
+      ...props
+    },
+    ref
+  ) => (
+    <TimelineContext.Provider value={{ direction, side, align, density }}>
+      <div
+        ref={ref}
+        className={cn(
+          "timeline",
+          direction === "horizontal" && "timeline--horizontal",
+          `timeline--side-${side}`,
+          `timeline--align-${align}`,
+          density === "compact" && "timeline--compact",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </TimelineContext.Provider>
+  )
+);
+Timeline.displayName = "Timeline";
+
+// ─── TimelineItem ─────────────────────────────────────────────────────────────
+
+export interface TimelineItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Background color of the dot — any CSS color or var() token.
+   */
+  dotColor?: string;
+  /**
+   * Size of the dot.
+   * - "x-small" → 12px
+   * - "small"   → 16px  (default)
+   * - "default" → 24px
+   * - "large"   → 32px
+   * - "x-large" → 40px
+   */
+  size?: "x-small" | "small" | "default" | "large" | "x-large";
+  /**
+   * When true the dot background is filled with `dotColor`
+   * (instead of just a border ring).
+   */
+  fillDot?: boolean;
+  /**
+   * Completely hides the dot and stem connector.
+   */
+  hideDot?: boolean;
+  /**
+   * Icon rendered inside the dot. Pass any React node.
+   * For best results use with size="large" or size="x-large".
+   */
+  icon?: React.ReactNode;
+  /**
+   * Content rendered on the opposite side of the stem from the main content.
+   * Equivalent to Vuetify's v-slot:opposite.
+   */
+  opposite?: React.ReactNode;
+}
+
+const TimelineItem = React.forwardRef<HTMLDivElement, TimelineItemProps>(
+  (
+    {
+      className,
+      children,
+      dotColor,
+      size = "small",
+      fillDot = false,
+      hideDot = false,
+      icon,
+      opposite,
+      ...props
+    },
+    ref
+  ) => {
+    const { align } = React.useContext(TimelineContext);
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "timeline-item",
+          `timeline-item--size-${size}`,
+          fillDot && "timeline-item--fill-dot",
+          hideDot && "timeline-item--hide-dot",
+          align === "start" && "timeline-item--align-start",
+          className
+        )}
+        {...props}
+      >
+        {/* Opposite slot */}
+        <div className="timeline-item-opposite">
+          {opposite}
+        </div>
+
+        {/* Stem + dot column */}
+        <div className="timeline-item-stem">
+          <div className="timeline-item-stem-line timeline-item-stem-line--before" />
+          {!hideDot && (
+            <div
+              className="timeline-item-dot"
+              style={dotColor ? { backgroundColor: dotColor, borderColor: dotColor } : undefined}
+            >
+              {icon && (
+                <span className="timeline-item-dot-icon">{icon}</span>
+              )}
+            </div>
+          )}
+          <div className="timeline-item-stem-line timeline-item-stem-line--after" />
+        </div>
+
+        {/* Main content */}
+        <div className="timeline-item-body">
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+TimelineItem.displayName = "TimelineItem";
+
+// ─── Exports ──────────────────────────────────────────────────────────────────
+
+export { Timeline, TimelineItem };

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

@@ -0,0 +1,206 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { ButtonV01 } from "@/components/ui/button-v01";
+import { AvatarIdentity } from "@/components/ui/avatar-identity";
+import iconDone from "@/assets/alert/icon-done.svg";
+import iconClear from "@/assets/alert/icon-clear.svg";
+
+const toastV01Variants = cva("toast-v01 font-mazzardSoft", {
+  variants: {
+    variant: {
+      solid: "toast-v01--solid",
+      subtle: "toast-v01--subtle",
+      outline: "toast-v01--outline",
+    },
+    size: {
+      large: "toast-v01--large",
+      small: "toast-v01--small",
+    },
+    color: {
+      default: "toast-v01--default",
+      success: "toast-v01--success",
+      error: "toast-v01--error",
+    },
+  },
+  defaultVariants: {
+    variant: "solid",
+    size: "large",
+    color: "default",
+  },
+});
+
+export type ToastV01Variant = NonNullable<
+  VariantProps<typeof toastV01Variants>["variant"]
+>;
+export type ToastV01Size = NonNullable<
+  VariantProps<typeof toastV01Variants>["size"]
+>;
+export type ToastV01Color = NonNullable<
+  VariantProps<typeof toastV01Variants>["color"]
+>;
+export type ToastV01Indicator = "icon" | "avatar";
+
+function MaskIcon({ src, className }: { src: string; className?: string }) {
+  return (
+    <span
+      className={cn("toast-v01-mask-icon", className)}
+      style={{
+        WebkitMaskImage: `url("${src}")`,
+        maskImage: `url("${src}")`,
+      }}
+      aria-hidden
+    />
+  );
+}
+
+export interface ToastV01Props
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color" | "title">,
+    VariantProps<typeof toastV01Variants> {
+  indicator?: ToastV01Indicator;
+  action?: boolean;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  confirmLabel?: React.ReactNode;
+  cancelLabel?: React.ReactNode;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  onDismiss?: () => void;
+  icon?: React.ReactNode;
+  avatar?: React.ReactNode;
+  avatarSrc?: string;
+  avatarAlt?: string;
+}
+
+const ToastV01 = React.forwardRef<HTMLDivElement, ToastV01Props>(
+  (
+    {
+      className,
+      variant = "solid",
+      size = "large",
+      color = "default",
+      indicator = "icon",
+      action = true,
+      title,
+      description,
+      confirmLabel = "Confirm",
+      cancelLabel = "Cancel",
+      onConfirm,
+      onCancel,
+      onDismiss,
+      icon,
+      avatar,
+      avatarSrc,
+      avatarAlt,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const isLarge = size !== "small";
+    const showDescription =
+      isLarge && description != null && description !== "";
+    const showCancel = isLarge && action;
+    const heading = title ?? children;
+
+    const indicatorNode =
+      indicator === "avatar"
+        ? (avatar ?? (
+            <AvatarIdentity
+              className="toast-v01-avatar"
+              size="medium"
+              variant={avatarSrc ? "image" : "placeholder"}
+              src={avatarSrc}
+              alt={avatarAlt}
+              showText={false}
+            />
+          ))
+        : (icon ?? (
+            <span className="toast-v01-indicator">
+              <MaskIcon src={iconDone} className="toast-v01-icon-done" />
+            </span>
+          ));
+
+    const dismissButton = (
+      <button
+        type="button"
+        className="toast-v01-dismiss"
+        aria-label="Dismiss"
+        onClick={onDismiss}
+      >
+        <MaskIcon src={iconClear} className="toast-v01-icon-clear" />
+      </button>
+    );
+
+    const confirmButton = (
+      <ButtonV01
+        type="button"
+        size="small"
+        typeVariant="utility"
+        hierarchy="primary"
+        appearance="solid"
+        context="general"
+        className="toast-v01-button"
+        onClick={onConfirm}
+      >
+        {confirmLabel}
+      </ButtonV01>
+    );
+
+    const cancelButton = (
+      <ButtonV01
+        type="button"
+        size="small"
+        typeVariant="utility"
+        hierarchy="tertiary"
+        appearance="stroke"
+        theme="light"
+        context="general"
+        className="toast-v01-button toast-v01-button--cancel"
+        onClick={onCancel}
+      >
+        {cancelLabel}
+      </ButtonV01>
+    );
+
+    return (
+      <div
+        ref={ref}
+        role="status"
+        aria-live="polite"
+        className={cn(toastV01Variants({ variant, size, color }), className)}
+        {...props}
+      >
+        {indicatorNode}
+
+        {isLarge ? (
+          <div className="toast-v01-content">
+            <div className="toast-v01-heading">
+              <h5 className="toast-v01-title">{heading}</h5>
+              {dismissButton}
+            </div>
+            {showDescription ? (
+              <div className="toast-v01-description">{description}</div>
+            ) : null}
+            {action ? (
+              <div className="toast-v01-actions">
+                {confirmButton}
+                {showCancel ? cancelButton : null}
+              </div>
+            ) : null}
+          </div>
+        ) : (
+          <>
+            <h5 className="toast-v01-title">{heading}</h5>
+            {action ? confirmButton : null}
+            {dismissButton}
+          </>
+        )}
+      </div>
+    );
+  },
+);
+ToastV01.displayName = "ToastV01";
+
+export { ToastV01, toastV01Variants };