marclayui 0.0.0-stage → 0.3.0

package/src/components/checks/checks.css

@@ -0,0 +1,157 @@
+/* MarclayUI — Checkbox / Radio / Switch.
+   Native inputs stay in the DOM (keyboard + a11y); visuals are sibling spans. */
+.mcl-check {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.mcl-check:has(.mcl-check-input:disabled) {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+.mcl-check-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+.mcl-check-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--mcl-ink);
+}
+
+.mcl-check-box {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  flex: none;
+  border-radius: 9px;
+  background: var(--mcl-bg);
+  box-shadow: var(--mcl-in-sm);
+  display: grid;
+  place-items: center;
+  transition: box-shadow 0.2s, background 0.2s;
+}
+.mcl-check-box::after {
+  content: "";
+  width: 10px;
+  height: 6px;
+  border-left: 2.5px solid var(--mcl-primary-ink);
+  border-bottom: 2.5px solid var(--mcl-primary-ink);
+  transform: rotate(-45deg) scale(0);
+  transform-origin: center;
+  margin-top: -2px;
+  transition: transform 0.18s var(--mcl-ease);
+}
+.mcl-check-input:checked + .mcl-check-box {
+  background: linear-gradient(145deg, var(--mcl-primary-2), var(--mcl-primary));
+  box-shadow: var(--mcl-out-xs), var(--mcl-clay-p);
+}
+.mcl-check-input:checked + .mcl-check-box::after {
+  transform: rotate(-45deg) scale(1);
+}
+/* indeterminate: a dash on the gradient dish */
+.mcl-check-input:indeterminate + .mcl-check-box {
+  background: linear-gradient(145deg, var(--mcl-primary-2), var(--mcl-primary));
+  box-shadow: var(--mcl-out-xs), var(--mcl-clay-p);
+}
+.mcl-check-input:indeterminate + .mcl-check-box::after {
+  width: 10px;
+  height: 2.5px;
+  border: 0;
+  border-radius: 2px;
+  background: var(--mcl-primary-ink);
+  transform: none;
+  margin-top: 0;
+}
+.mcl-check-input:focus-visible + .mcl-check-box {
+  box-shadow: var(--mcl-in-sm), 0 0 0 2.5px var(--mcl-ring);
+}
+.mcl-check-disabled {
+  cursor: not-allowed;
+}
+
+/* checkbox group */
+.mcl-check-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.mcl-check-group-items {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.mcl-check-group-all {
+  padding-bottom: 12px;
+  box-shadow: 0 1px 0 var(--mcl-hair);
+}
+
+/* radio: round box + round dot instead of the check tick */
+.mcl-radio-box {
+  border-radius: 50%;
+}
+.mcl-radio-box::after {
+  width: 10px;
+  height: 10px;
+  border: 0;
+  border-radius: 50%;
+  background: var(--mcl-primary-ink);
+  transform: scale(0);
+  margin-top: 0;
+}
+.mcl-check-input:checked + .mcl-radio-box::after {
+  transform: scale(1);
+}
+
+/* switch */
+.mcl-switch {
+  display: inline-flex;
+}
+.mcl-switch-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+.mcl-switch-track {
+  position: relative;
+  width: 52px;
+  height: 30px;
+  flex: none;
+  border-radius: 999px;
+  background: var(--mcl-bg);
+  box-shadow: var(--mcl-in-sm);
+  display: block;
+  transition: background 0.25s, box-shadow 0.25s;
+}
+.mcl-switch-knob {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: var(--mcl-bg);
+  box-shadow: var(--mcl-out-xs);
+  transition: transform 0.25s var(--mcl-ease), background 0.25s;
+}
+.mcl-switch-input:checked + .mcl-switch-track {
+  background: linear-gradient(145deg, var(--mcl-primary-2), var(--mcl-primary));
+  box-shadow: var(--mcl-clay-p);
+}
+.mcl-switch-input:checked + .mcl-switch-track .mcl-switch-knob {
+  transform: translateX(22px);
+  background: var(--mcl-primary-ink);
+}
+.mcl-switch-input:focus-visible + .mcl-switch-track {
+  box-shadow: var(--mcl-in-sm), 0 0 0 2.5px var(--mcl-ring);
+}

package/src/components/checks/checks.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+
+function withLabel(input: React.ReactNode, label: React.ReactNode | undefined) {
+  if (label === undefined || label === null) return input;
+  return (
+    <label className="mcl-check">
+      {input}
+      <span className="mcl-check-label">{label}</span>
+    </label>
+  );
+}
+
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+  label?: React.ReactNode;
+  /** Shows a dash instead of a tick — the classic "some children selected" state. */
+  indeterminate?: boolean;
+}
+
+export function Checkbox({ label, indeterminate = false, className = "", ...rest }: CheckboxProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (inputRef.current) inputRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+
+  return withLabel(
+    <>
+      <input ref={inputRef} type="checkbox" className={`mcl-check-input ${className}`.trim()} {...rest} />
+      <span className="mcl-check-box" aria-hidden="true" />
+    </>,
+    label
+  );
+}
+
+export interface CheckboxGroupOption {
+  value: string;
+  label: React.ReactNode;
+  disabled?: boolean;
+}
+
+export interface CheckboxGroupProps {
+  options: CheckboxGroupOption[];
+  /** Controlled selected values. */
+  value?: string[];
+  /** Uncontrolled initial selection. */
+  defaultValue?: string[];
+  onChange?: (values: string[]) => void;
+  /** Renders a parent "select all" checkbox with an indeterminate state. */
+  selectAll?: boolean;
+  selectAllLabel?: React.ReactNode;
+  label?: React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function CheckboxGroup({
+  options,
+  value,
+  defaultValue = [],
+  onChange,
+  selectAll = false,
+  selectAllLabel = "Select all",
+  label,
+  disabled = false,
+  className = "",
+}: CheckboxGroupProps) {
+  const [inner, setInner] = useState<string[]>(defaultValue);
+  const allRef = useRef<HTMLInputElement>(null);
+  const selected = value ?? inner;
+
+  const enabled = options.filter((o) => !o.disabled).map((o) => o.value);
+  const allOn = enabled.length > 0 && enabled.every((v) => selected.includes(v));
+  const someOn = enabled.some((v) => selected.includes(v));
+
+  useEffect(() => {
+    if (allRef.current) allRef.current.indeterminate = someOn && !allOn;
+  }, [someOn, allOn]);
+
+  const commit = (next: string[]) => {
+    setInner(next);
+    onChange?.(next);
+  };
+
+  const toggle = (v: string) => {
+    commit(selected.includes(v) ? selected.filter((x) => x !== v) : [...selected, v]);
+  };
+
+  const toggleAll = () => {
+    commit(allOn ? selected.filter((v) => !enabled.includes(v)) : Array.from(new Set([...selected, ...enabled])));
+  };
+
+  return (
+    <div
+      className={`mcl-check-group ${className}`.trim()}
+      role="group"
+      aria-label={typeof label === "string" ? label : undefined}
+    >
+      {label && <span className="mcl-label">{label}</span>}
+      {selectAll && (
+        <label className={`mcl-check mcl-check-group-all${disabled ? " mcl-check-disabled" : ""}`}>
+          <input
+            ref={allRef}
+            type="checkbox"
+            className="mcl-check-input"
+            checked={allOn}
+            disabled={disabled}
+            onChange={toggleAll}
+          />
+          <span className="mcl-check-box" aria-hidden="true" />
+          <span className="mcl-check-label">{selectAllLabel}</span>
+        </label>
+      )}
+      <div className="mcl-check-group-items">
+        {options.map((o) => (
+          <label key={o.value} className={`mcl-check${o.disabled || disabled ? " mcl-check-disabled" : ""}`}>
+            <input
+              type="checkbox"
+              className="mcl-check-input"
+              checked={selected.includes(o.value)}
+              disabled={o.disabled || disabled}
+              onChange={() => toggle(o.value)}
+            />
+            <span className="mcl-check-box" aria-hidden="true" />
+            <span className="mcl-check-label">{o.label}</span>
+          </label>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: React.ReactNode;
+}
+
+export function Radio({ label, className = "", ...rest }: RadioProps) {
+  return withLabel(
+    <>
+      <input type="radio" className={`mcl-check-input ${className}`.trim()} {...rest} />
+      <span className="mcl-check-box mcl-radio-box" aria-hidden="true" />
+    </>,
+    label
+  );
+}
+
+export interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: React.ReactNode;
+}
+
+export function Switch({ label, className = "", ...rest }: SwitchProps) {
+  return withLabel(
+    <>
+      <input
+        type="checkbox"
+        role="switch"
+        className={`mcl-switch-input ${className}`.trim()}
+        {...rest}
+      />
+      <span className="mcl-switch-track" aria-hidden="true">
+        <span className="mcl-switch-knob" />
+      </span>
+    </>,
+    label
+  );
+}

package/src/components/divider/divider.css

@@ -0,0 +1,41 @@
+/* MarclayUI — Divider (inset hairline wells) */
+.mcl-divider {
+  border: 0;
+  background: var(--mcl-bg);
+  box-shadow: var(--mcl-in-xs);
+  border-radius: 999px;
+}
+.mcl-divider-horizontal {
+  display: block;
+  width: 100%;
+  height: 6px;
+  margin: 26px 0;
+}
+.mcl-divider-vertical {
+  display: inline-block;
+  width: 6px;
+  height: auto;
+  align-self: stretch;
+  margin: 0 22px;
+  min-height: 40px;
+}
+.mcl-divider-label {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin: 26px 0;
+  color: var(--mcl-muted);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+.mcl-divider-label::before,
+.mcl-divider-label::after {
+  content: "";
+  flex: 1;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--mcl-bg);
+  box-shadow: var(--mcl-in-xs);
+}

package/src/components/divider/divider.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+export interface DividerProps extends React.HTMLAttributes<HTMLElement> {
+  orientation?: "horizontal" | "vertical";
+  /** Renders an inset line — text — inset line. */
+  label?: React.ReactNode;
+}
+
+export function Divider({ orientation = "horizontal", label, className = "", ...rest }: DividerProps) {
+  if (label !== undefined && label !== null) {
+    return (
+      <div className={`mcl-divider-label ${className}`.trim()} role="separator" {...rest}>
+        <span className="mcl-divider-label-text">{label}</span>
+      </div>
+    );
+  }
+  return (
+    <div
+      className={`mcl-divider mcl-divider-${orientation} ${className}`.trim()}
+      role="separator"
+      {...rest}
+    />
+  );
+}

package/src/components/dropdown/dropdown.css

@@ -0,0 +1,182 @@
+/* MarclayUI — Dropdown (custom popup menu, never the native browser list) */
+.mcl-dropdown-shell {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+}
+.mcl-dropdown-block {
+  display: block;
+  width: 100%;
+}
+
+/* trigger — an inset well like Select, but a real button */
+.mcl-dropdown-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  border: 0;
+  outline: none;
+  border-radius: var(--mcl-radius);
+  background: var(--mcl-bg);
+  box-shadow: var(--mcl-in-sm);
+  font-family: inherit;
+  font-size: 14.5px;
+  font-weight: 600;
+  color: var(--mcl-ink);
+  text-align: left;
+  cursor: pointer;
+  transition: box-shadow 0.25s;
+}
+.mcl-dropdown-trigger:focus-visible {
+  box-shadow: var(--mcl-in-sm), 0 0 0 2.5px var(--mcl-ring);
+}
+.mcl-dropdown-trigger:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.mcl-dropdown-md {
+  padding: 14px 20px;
+}
+.mcl-dropdown-sm {
+  padding: 10px 16px;
+  font-size: 13.5px;
+  border-radius: var(--mcl-radius-sm);
+}
+.mcl-dropdown-lg {
+  padding: 17px 24px;
+  font-size: 16px;
+  border-radius: calc(var(--mcl-radius) + 4px);
+}
+.mcl-dropdown-value {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mcl-dropdown-placeholder {
+  color: var(--mcl-muted);
+  opacity: 0.75;
+}
+.mcl-dropdown-chevron {
+  position: static;
+  width: 9px;
+  height: 9px;
+  flex: none;
+  border-right: 2.5px solid var(--mcl-muted);
+  border-bottom: 2.5px solid var(--mcl-muted);
+  transform: rotate(45deg);
+  transition: transform 0.25s var(--mcl-ease);
+}
+.mcl-dropdown-trigger[aria-expanded="true"] .mcl-dropdown-chevron {
+  transform: rotate(225deg);
+}
+
+/* popup menu */
+.mcl-dropdown-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  right: 0;
+  z-index: 70;
+  min-width: 200px;
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 10px;
+  background: var(--mcl-bg);
+  border-radius: calc(var(--mcl-radius) - 2px);
+  box-shadow: var(--mcl-out);
+  outline: none;
+  animation: mcl-menu-pop 0.18s var(--mcl-ease);
+}
+/* viewport-aware placement */
+.mcl-dropdown-menu-up {
+  top: auto;
+  bottom: calc(100% + 8px);
+  animation-name: mcl-menu-pop-up;
+}
+.mcl-dropdown-menu-left {
+  left: auto;
+  right: 0;
+}
+@keyframes mcl-menu-pop-up {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.98);
+  }
+}
+.mcl-dropdown-menu.mcl-dropdown-sm {
+  border-radius: var(--mcl-radius-sm);
+}
+@keyframes mcl-menu-pop {
+  from {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.98);
+  }
+}
+
+.mcl-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 11px 14px;
+  border-radius: var(--mcl-radius-sm);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--mcl-ink);
+  cursor: pointer;
+  user-select: none;
+  transition: box-shadow 0.15s, color 0.15s;
+}
+.mcl-dropdown-item-active {
+  box-shadow: var(--mcl-out-xs);
+}
+.mcl-dropdown-item-selected {
+  color: var(--mcl-primary);
+  box-shadow: var(--mcl-in-xs);
+}
+.mcl-dropdown-item-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.mcl-dropdown-item-label {
+  min-width: 0;
+  flex: 1;
+}
+.mcl-dropdown-tick {
+  color: var(--mcl-primary);
+  font-weight: 700;
+  font-size: 13px;
+}
+
+/* multi-select checkbox inside the menu */
+.mcl-dropdown-check {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  flex: none;
+  border-radius: 8px;
+  background: var(--mcl-bg);
+  box-shadow: var(--mcl-in-sm);
+  display: grid;
+  place-items: center;
+  transition: background 0.2s, box-shadow 0.2s;
+}
+.mcl-dropdown-check::after {
+  content: "";
+  width: 9px;
+  height: 5px;
+  border-left: 2.5px solid var(--mcl-primary-ink);
+  border-bottom: 2.5px solid var(--mcl-primary-ink);
+  transform: rotate(-45deg) scale(0);
+  margin-top: -2px;
+  transition: transform 0.15s var(--mcl-ease);
+}
+.mcl-dropdown-item-selected .mcl-dropdown-check {
+  background: linear-gradient(145deg, var(--mcl-primary-2), var(--mcl-primary));
+  box-shadow: var(--mcl-out-xs), var(--mcl-clay-p);
+}
+.mcl-dropdown-item-selected .mcl-dropdown-check::after {
+  transform: rotate(-45deg) scale(1);
+}