rift-ds 1.0.0

package/components/ImageCompare/ImageCompare.css

@@ -0,0 +1,112 @@
+/* ============================================
+   IMAGE COMPARE COMPONENT
+   Before-and-after images behind one divider
+   ============================================ */
+
+.ds-image-compare {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--radius-400);
+  border: var(--border-025) solid var(--color-bg-container-border);
+  background-color: var(--color-bg-container-secondary);
+  /* pan-y keeps the page scrollable over the frame on touch; horizontal
+     drags stay with the slider. */
+  touch-action: pan-y;
+  user-select: none;
+  cursor: col-resize;
+}
+
+/* ============================================
+   IMAGES
+   ============================================ */
+
+.ds-image-compare__after,
+.ds-image-compare__before {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* The before layer sits on top at full frame size and is clipped to the
+   left of the divider. clip-path leaves the image's own geometry alone,
+   so the two layers stay pixel-aligned as the split moves. */
+.ds-image-compare__before-clip {
+  position: absolute;
+  inset: 0;
+  clip-path: inset(0 calc(100% - var(--ds-image-compare-position, 50%)) 0 0);
+}
+
+/* ============================================
+   LABELS
+   ============================================ */
+
+.ds-image-compare__label {
+  position: absolute;
+  top: var(--gap-400);
+  z-index: 2;
+  padding: var(--padding-050) var(--padding-200);
+  border-radius: var(--radius-pill);
+  background-color: var(--color-bg-container-inverse);
+  color: var(--color-text-on-inverse);
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  pointer-events: none;
+}
+
+.ds-image-compare__label--before {
+  left: var(--gap-400);
+}
+
+.ds-image-compare__label--after {
+  right: var(--gap-400);
+}
+
+/* ============================================
+   DIVIDER + HANDLE
+   ============================================ */
+
+.ds-image-compare__divider {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--ds-image-compare-position);
+  width: var(--border-050);
+  transform: translateX(-50%);
+  background-color: var(--color-bg-page-primary);
+  z-index: 1;
+  pointer-events: none;
+}
+
+.ds-image-compare__handle {
+  position: absolute;
+  top: 50%;
+  left: var(--ds-image-compare-position);
+  transform: translate(-50%, -50%);
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-pill);
+  background-color: var(--color-bg-page-primary);
+  color: var(--color-icon-primary);
+  border: var(--border-025) solid var(--color-bg-container-border);
+  box-shadow: var(--shadow-floating);
+  cursor: col-resize;
+}
+
+.ds-image-compare__handle .material-symbols-rounded {
+  --icon-size: var(--icon-size-500);
+}
+
+.ds-image-compare__handle:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}

package/components/ImageCompare/ImageCompare.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+/** Props owned by ImageCompare itself — everything else falls through to the root node. */
+type ImageCompareOwnProps = {
+    /** Source of the image revealed on the left of the divider */
+    beforeSrc: string;
+    /** Source of the image revealed on the right of the divider */
+    afterSrc: string;
+    /** Alt text for the before image */
+    beforeAlt: string;
+    /** Alt text for the after image */
+    afterAlt: string;
+    /** Corner label over the before side */
+    beforeLabel?: string;
+    /** Corner label over the after side */
+    afterLabel?: string;
+    /** Whether the corner labels render */
+    showLabels?: boolean;
+    /** Divider position as a percentage from the left (controlled) */
+    position?: number;
+    /** Initial divider position for uncontrolled use */
+    defaultPosition?: number;
+    /** Convenience callback receiving the divider position on every change */
+    onPositionChange?: (position: number) => void;
+    /** CSS aspect-ratio of the frame (both images are sized to cover it) */
+    aspectRatio?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface ImageCompareProps extends ImageCompareOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ImageCompareOwnProps> {
+}
+/**
+ * Before-and-after comparison of two images sharing one frame. Dragging the
+ * divider (or clicking anywhere in the frame) sweeps the split; the handle is
+ * a `role="slider"` with arrow-key, Home/End and PageUp/PageDown control, so
+ * the comparison works without a pointer.
+ *
+ * Forwards a ref to the root element and spreads unrecognised props onto it.
+ */
+export declare const ImageCompare: React.ForwardRefExoticComponent<ImageCompareProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/ImageCompare/ImageCompare.js

@@ -0,0 +1,134 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React, { useState, useRef } from "react";
+import "./ImageCompare.css";
+import "../../fonts/material-symbols.css";
+const clamp = (n) => Math.max(0, Math.min(100, n));
+const ImageCompare = React.forwardRef(
+  ({
+    beforeSrc,
+    afterSrc,
+    beforeAlt,
+    afterAlt,
+    beforeLabel = "Before",
+    afterLabel = "After",
+    showLabels = true,
+    position,
+    defaultPosition = 50,
+    onPositionChange,
+    aspectRatio = "16 / 10",
+    className = "",
+    style,
+    ...rest
+  }, ref) => {
+    const [internalPosition, setInternalPosition] = useState(clamp(defaultPosition));
+    const [dragging, setDragging] = useState(false);
+    const frameRef = useRef(null);
+    const baseClass = "ds-image-compare";
+    const currentPosition = clamp(position ?? internalPosition);
+    const classes = [baseClass, dragging ? `${baseClass}--dragging` : "", className].filter(Boolean).join(" ");
+    const setRef = (node) => {
+      frameRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const setPosition = (next) => {
+      const resolved = clamp(next);
+      if (position === void 0) setInternalPosition(resolved);
+      onPositionChange?.(resolved);
+    };
+    const positionFromPointer = (clientX) => {
+      const frame = frameRef.current;
+      if (!frame) return;
+      const rect = frame.getBoundingClientRect();
+      if (rect.width === 0) return;
+      setPosition((clientX - rect.left) / rect.width * 100);
+    };
+    const handlePointerDown = (event) => {
+      if (event.button !== 0) return;
+      event.currentTarget.setPointerCapture(event.pointerId);
+      setDragging(true);
+      positionFromPointer(event.clientX);
+    };
+    const handlePointerMove = (event) => {
+      if (!dragging) return;
+      positionFromPointer(event.clientX);
+    };
+    const endDrag = () => setDragging(false);
+    const handleKeyDown = (event) => {
+      let next = null;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowUp":
+          next = currentPosition + 1;
+          break;
+        case "ArrowLeft":
+        case "ArrowDown":
+          next = currentPosition - 1;
+          break;
+        case "PageUp":
+          next = currentPosition + 10;
+          break;
+        case "PageDown":
+          next = currentPosition - 10;
+          break;
+        case "Home":
+          next = 0;
+          break;
+        case "End":
+          next = 100;
+          break;
+      }
+      if (next !== null) {
+        event.preventDefault();
+        setPosition(next);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref: setRef,
+        className: classes,
+        style: {
+          ...style,
+          aspectRatio,
+          ["--ds-image-compare-position"]: `${currentPosition}%`
+        },
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: endDrag,
+        onPointerCancel: endDrag,
+        children: [
+          /* @__PURE__ */ jsx("img", { className: `${baseClass}__after`, src: afterSrc, alt: afterAlt, draggable: false }),
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__before-clip`, children: /* @__PURE__ */ jsx("img", { className: `${baseClass}__before`, src: beforeSrc, alt: beforeAlt, draggable: false }) }),
+          showLabels && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__label ${baseClass}__label--before`, "aria-hidden": "true", children: beforeLabel }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__label ${baseClass}__label--after`, "aria-hidden": "true", children: afterLabel })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__divider`, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `${baseClass}__handle`,
+              role: "slider",
+              tabIndex: 0,
+              "aria-label": `${beforeLabel} and ${afterLabel} comparison`,
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              "aria-valuenow": Math.round(currentPosition),
+              "aria-valuetext": `${Math.round(currentPosition)}% ${beforeLabel.toLowerCase()}`,
+              "aria-orientation": "horizontal",
+              onKeyDown: handleKeyDown,
+              children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "drag_indicator" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ImageCompare.displayName = "ImageCompare";
+export {
+  ImageCompare
+};

package/components/Input/Input.css

@@ -0,0 +1,150 @@
+/* ============================================
+   INPUT COMPONENT
+   Text input with label, icons, and helper text
+   ============================================ */
+
+.ds-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-200); /* 8px */
+  width: 100%;
+}
+
+/* ============================================
+   FIELD WRAPPER
+   ============================================ */
+
+.ds-input__field-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+/* ============================================
+   FIELD
+   ============================================ */
+
+.ds-input__field {
+  width: 100%;
+  padding: var(--padding-200) var(--padding-400); /* 8px 16px */
+  border: var(--border-025) solid var(--color-input-border-primary);
+  border-radius: var(--radius-300); /* 12px */
+  background-color: var(--color-input-bg-primary);
+
+  /* Typography */
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  letter-spacing: var(--font-paragraph-letter-spacing);
+  color: var(--color-input-text-primary);
+
+  /* Transitions */
+  transition: border-color var(--motion-duration-base) var(--motion-ease-standard), background-color var(--motion-duration-base) var(--motion-ease-standard);
+  outline: none;
+}
+
+.ds-input__field::placeholder {
+  color: var(--color-input-text-placeholder);
+}
+
+.ds-input__field:hover:not(:focus):not(:disabled) {
+  border-color: var(--color-input-border-hover);
+}
+
+.ds-input__field:focus {
+  border-color: var(--color-input-border-selected);
+  background-color: var(--color-input-bg-primary);
+}
+
+/* ============================================
+   ICONS
+   ============================================ */
+
+.ds-input__icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  --icon-size: var(--icon-size-600);
+  color: var(--color-icon-primary);
+  pointer-events: none;
+}
+
+.ds-input__icon--left {
+  left: var(--padding-400); /* 16px */
+}
+
+.ds-input__icon--right {
+  right: var(--padding-400); /* 16px */
+}
+
+.ds-input--has-icon-left .ds-input__field {
+  padding-left: calc(var(--padding-400) + 24px + var(--gap-200)); /* 16px + 24px icon + 8px gap */
+}
+
+.ds-input--has-icon-right .ds-input__field {
+  padding-right: calc(var(--padding-400) + 24px + var(--gap-200)); /* 16px + 24px icon + 8px gap */
+}
+
+/* ============================================
+   ERROR STATE
+   ============================================ */
+
+.ds-input--error .ds-input__field {
+  border-color: var(--color-status-error-border);
+}
+
+.ds-input--error .ds-input__field:focus {
+  border-color: var(--color-status-error-border);
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.ds-input--disabled .ds-input__field {
+  background-color: var(--color-input-bg-disabled);
+  border-color: var(--color-input-border-disabled);
+  color: var(--color-input-text-disabled);
+  cursor: not-allowed;
+}
+
+.ds-input--disabled .ds-input__field::placeholder {
+  color: var(--color-input-text-disabled);
+}
+
+.ds-input--disabled .ds-input__icon {
+  color: var(--color-input-text-disabled);
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-input--compact .ds-input__field {
+  padding: var(--padding-150) var(--padding-300); /* 6px 12px */
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+}
+
+.ds-input--compact .ds-input__icon {
+  --icon-size: var(--icon-size-500);
+}
+
+.ds-input--compact .ds-input__icon--left {
+  left: var(--padding-300); /* 12px */
+}
+
+.ds-input--compact .ds-input__icon--right {
+  right: var(--padding-300); /* 12px */
+}
+
+.ds-input--compact.ds-input--has-icon-left .ds-input__field {
+  padding-left: calc(var(--padding-300) + 20px + var(--gap-200)); /* 12px + 20px icon + 8px gap */
+}
+
+.ds-input--compact.ds-input--has-icon-right .ds-input__field {
+  padding-right: calc(var(--padding-300) + 20px + var(--gap-200)); /* 12px + 20px icon + 8px gap */
+}
+

package/components/Input/Input.d.ts

@@ -0,0 +1,45 @@
+import { default as React } from 'react';
+/** Props owned by Input itself — everything else falls through to the <input>. */
+type InputOwnProps = {
+    /** Input label text */
+    label?: string;
+    /** Current value */
+    value?: string;
+    /** Input type — curated subset; use a dedicated component for checkbox/radio/file */
+    type?: 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url';
+    /** Component size (not the native character-width `size` attribute) */
+    size?: 'default' | 'compact';
+    /** Error state — shows error styling and message */
+    error?: boolean;
+    /** Helper or error message displayed below the input */
+    helperText?: string;
+    /** Leading icon — Material Symbol name (string) or custom element (ReactNode) */
+    iconLeft?: string | React.ReactNode;
+    /** Trailing icon — Material Symbol name (string) or custom element (ReactNode) */
+    iconRight?: string | React.ReactNode;
+    /**
+     * Convenience callback receiving the value directly.
+     * Fires alongside `onChange`, which keeps the standard React event signature
+     * so form libraries (react-hook-form, Formik, TanStack Form) work unmodified.
+     */
+    onValueChange?: (value: string) => void;
+    /** Additional CSS classes — applied to the wrapper, not the <input> */
+    className?: string;
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
+    ariaLabel?: string;
+};
+export interface InputProps extends InputOwnProps, Omit<React.ComponentPropsWithoutRef<'input'>, keyof InputOwnProps> {
+}
+/**
+ * Text input with optional label, helper text, icons and error state.
+ *
+ * Forwards a ref to the underlying `<input>` and spreads unrecognised props onto
+ * it, so `autoComplete`, `maxLength`, `inputMode`, `data-*` and form-library
+ * registration all work.
+ */
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/components/Input/Input.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Field } from "../Field/Field.js";
+import "./Input.css";
+import "../../fonts/material-symbols.css";
+const Input = React.forwardRef(
+  ({
+    label,
+    placeholder = "",
+    value,
+    type = "text",
+    size = "default",
+    disabled = false,
+    required = false,
+    error = false,
+    helperText,
+    iconLeft,
+    iconRight,
+    onChange,
+    onValueChange,
+    className = "",
+    ariaLabel,
+    name,
+    id,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-input";
+    const classes = [
+      baseClass,
+      size === "compact" ? `${baseClass}--compact` : "",
+      error ? `${baseClass}--error` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      iconLeft ? `${baseClass}--has-icon-left` : "",
+      iconRight ? `${baseClass}--has-icon-right` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const handleChange = (e) => {
+      onChange?.(e);
+      onValueChange?.(e.target.value);
+    };
+    const inputId = id || name || label?.toLowerCase().replace(/\s+/g, "-");
+    const describedBy = helperText ? `${inputId}-helper` : rest["aria-describedby"];
+    return /* @__PURE__ */ jsx(
+      Field,
+      {
+        className: classes,
+        label,
+        helperText,
+        error,
+        required,
+        disabled,
+        size,
+        id: inputId,
+        children: /* @__PURE__ */ jsxs("div", { className: `${baseClass}__field-wrapper`, children: [
+          iconLeft && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `${baseClass}__icon ${baseClass}__icon--left${typeof iconLeft === "string" ? " material-symbols-rounded" : ""}`,
+              "aria-hidden": "true",
+              children: iconLeft
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...rest,
+              ref,
+              className: `${baseClass}__field`,
+              type,
+              id: inputId,
+              name,
+              value,
+              placeholder,
+              disabled,
+              required,
+              "aria-label": ariaLabel || rest["aria-label"] || label,
+              "aria-invalid": error,
+              "aria-describedby": describedBy,
+              onChange: handleChange
+            }
+          ),
+          iconRight && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `${baseClass}__icon ${baseClass}__icon--right${typeof iconRight === "string" ? " material-symbols-rounded" : ""}`,
+              "aria-hidden": "true",
+              children: iconRight
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+export {
+  Input
+};