@zyncat/ui 0.8.0

package/src/components/primitives/tag/ToggleTag.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import './tag.css';
+import '../collapse/collapse.css';
+import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react';
+import { IconSlot } from '../../internal/icon/IconSlot';
+import { useControllable } from '../../internal/hooks/use-controllable';
+import type { DataAttributes } from '../../../dom-props';
+import { cx } from '../../internal/utils/cx';
+
+interface ToggleTagOwnProps {
+  /** Chip content; the label shown beside the tick or `icon`. */
+  children: ReactNode;
+  /** Controlled selected value. Omit for uncontrolled. */
+  selected?: boolean;
+  /** Uncontrolled initial value. */
+  defaultSelected?: boolean;
+  /** Fires with the next value on every toggle. */
+  onChange?: (selected: boolean) => void;
+  /** Your own icon node; replaces the tick. Selected state reads from the wash. */
+  icon?: ReactNode | null;
+  /** Optional result count - rendered mono/tabular. */
+  count?: ReactNode;
+  /** 'md' = 28px (default) - 'sm' = 24px for dense rows. */
+  size?: 'md' | 'sm';
+  /** Disable the button, blocking toggles. @default false */
+  disabled?: boolean;
+  /** Extra class(es) merged onto the root element. */
+  className?: string;
+  /** Inline styles merged onto the root element. */
+  style?: CSSProperties;
+}
+
+/** ToggleTag - the on/off filter chip (<button aria-pressed>). */
+export interface ToggleTagProps extends ToggleTagOwnProps {
+  /** Standard <button> attributes forwarded to the chip. */
+  htmlProps?: Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ToggleTagOwnProps> & DataAttributes;
+}
+
+function ToggleTagTick({ selected }: { selected: boolean }) {
+  return (
+    <span className="tag__check collapse" data-axis="width" data-open={selected ? 'true' : 'false'} aria-hidden="true">
+      <span className="collapse__inner">
+        <svg viewBox="0 0 12 12" fill="none">
+          <path
+            d="M2.5 6.5 L5 9 L9.5 3.5"
+            pathLength="1"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </span>
+    </span>
+  );
+}
+
+export function ToggleTag({
+  children,
+  selected: selectedProp,
+  defaultSelected = false,
+  onChange,
+  icon = null,
+  count = null,
+  size = 'md',
+  disabled = false,
+  className = '',
+  style,
+  htmlProps,
+}: ToggleTagProps) {
+  const [selected, setSelected] = useControllable(selectedProp, defaultSelected, onChange);
+  const toggle = () => setSelected(!selected);
+
+  const cls = cx('tag', 'tag--toggle', size === 'sm' && 'tag--sm', className);
+
+  return (
+    <button
+      type="button"
+      className={cls}
+      style={style}
+      aria-pressed={selected}
+      disabled={disabled}
+      onClick={toggle}
+      {...htmlProps}
+    >
+      {icon ? (
+        <span className="tag__icon">
+          <IconSlot size="sm">{icon}</IconSlot>
+        </span>
+      ) : (
+        <ToggleTagTick selected={selected} />
+      )}
+      <span className="tag__label">{children}</span>
+      {count != null && <span className="tag__count">{count}</span>}
+    </button>
+  );
+}

package/src/components/primitives/tag/tag.css

@@ -0,0 +1,248 @@
+/* Tag / chip - interactive label (button-family chrome): base .tag + .tag--toggle sibling. */
+
+.tag {
+  --tag-h: var(--control-height-sm);
+  /* button-family DNA: lit from above + a contact shadow (.btn--secondary) */
+  --tag-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.6), 0 1px 2px 0 rgb(var(--shadow-rgb) / 0.05);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  height: var(--tag-h);
+  max-width: 100%;
+  padding-inline: var(--space-2);
+  border: var(--border-hairline) solid var(--border-default);
+  border-radius: var(--radius-sm);
+  background: var(--bg-surface);
+  color: var(--text-body);
+
+  font-family: var(--font-sans);
+  font-size: var(--size-caption);
+  line-height: 1;
+  font-weight: var(--weight-medium);
+  letter-spacing: var(--tracking-normal);
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  -webkit-user-select: none;
+  box-shadow: var(--tag-shadow);
+
+  /* no transform transition here - Motion writes transforms on grouped tags (section C) */
+  transition: var(--transition-control);
+}
+
+.tag__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tag--sm {
+  --tag-h: var(--space-5);
+  font-size: var(--size-micro);
+}
+
+.tag__icon {
+  display: inline-flex;
+  flex: none;
+}
+.tag__icon svg,
+.tag__icon i {
+  display: block;
+}
+
+/* Dual-weight icon crossfade - transitions, not animations, so nothing plays on first paint. */
+.tag__icon--dual {
+  display: inline-grid;
+}
+.tag__icon--dual > :is(i, svg) {
+  grid-area: 1 / 1;
+  transition:
+    opacity var(--duration-base) var(--ease-standard),
+    transform var(--duration-base) var(--ease-standard);
+}
+.tag__icon--dual > :is(i, svg):last-child {
+  opacity: 0;
+  transform: scale(0.6);
+}
+.tag--toggle[aria-pressed='true'] .tag__icon--dual > :is(i, svg):first-child {
+  opacity: 0;
+}
+.tag--toggle[aria-pressed='true'] .tag__icon--dual > :is(i, svg):last-child {
+  opacity: 1;
+  transform: scale(1);
+  transition:
+    opacity var(--duration-fast) var(--ease-standard),
+    transform var(--duration-slow) var(--ease-spring);
+}
+
+.tag__count {
+  font-family: var(--font-mono);
+  font-size: var(--size-micro);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-subtle);
+  transition: color var(--duration-fast) var(--ease-standard);
+}
+
+.tag__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: calc(var(--tag-h) - var(--space-2));
+  height: calc(var(--tag-h) - var(--space-2));
+  margin-right: calc(var(--space-1) * -1);
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: var(--text-subtle);
+  cursor: pointer;
+  appearance: none;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    color var(--duration-fast) var(--ease-standard),
+    background-color var(--duration-fast) var(--ease-standard),
+    transform var(--duration-fast) var(--ease-standard);
+}
+.tag__remove svg {
+  display: block;
+  width: var(--space-3);
+  height: var(--space-3);
+  transition: transform var(--duration-base) var(--ease-standard);
+}
+.tag__remove:hover {
+  color: var(--text-strong);
+  background: var(--bg-muted);
+}
+.tag__remove:hover svg {
+  transform: rotate(30deg);
+}
+.tag__remove:active {
+  transform: scale(0.9);
+}
+.tag__remove:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.tag:has(.tag__remove:hover):not([data-disabled]),
+.tag:has(.tag__remove:focus-visible) {
+  color: var(--text-muted);
+  border-color: var(--border-strong);
+}
+
+.tag--toggle {
+  cursor: pointer;
+  appearance: none;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    var(--transition-control),
+    transform var(--duration-fast) var(--ease-standard);
+}
+.tag--toggle:hover:not(:disabled) {
+  color: var(--text-strong);
+  border-color: var(--border-strong);
+  background: var(--neutral-wash);
+}
+.tag--toggle:active:not(:disabled) {
+  transform: translateY(var(--space-px));
+  background: var(--bg-muted);
+  --tag-shadow: inset 0 1px 2px 0 rgb(var(--shadow-rgb) / 0.07);
+}
+/* composed ring - never erases the resting shadow (.btn pattern) */
+.tag--toggle:focus-visible {
+  outline: none;
+  box-shadow: var(--tag-shadow), var(--focus-ring);
+}
+
+/* Selected = accent wash, never a solid fill; the top sheen comes off (matte), the contact shadow stays. */
+.tag--toggle[aria-pressed='true'] {
+  color: var(--text-accent);
+  border-color: var(--accent-border);
+  background: var(--accent-wash);
+  --tag-shadow: 0 1px 2px 0 rgb(var(--shadow-rgb) / 0.05);
+}
+.tag--toggle[aria-pressed='true']:hover:not(:disabled) {
+  color: var(--accent-active);
+  border-color: var(--accent-border);
+  background: var(--accent-wash);
+}
+.tag--toggle[aria-pressed='true']:active:not(:disabled) {
+  background: var(--accent-subtle);
+}
+.tag--toggle[aria-pressed='true'] .tag__count {
+  color: inherit;
+}
+
+/* Tick slot (Collapse width mechanism); the negative margin cancels the flex gap while collapsed, the inner margin restores it when open. */
+.tag__check {
+  margin-right: calc(var(--space-1) * -1);
+}
+.tag__check svg {
+  display: block;
+  width: var(--space-3);
+  height: var(--space-3);
+  margin-right: var(--space-1);
+}
+.tag__check path {
+  stroke: currentColor;
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+  transition: stroke-dashoffset var(--duration-base) var(--ease-standard);
+}
+.tag--toggle[aria-pressed='true'] .tag__check path {
+  stroke-dashoffset: 0;
+  transition: stroke-dashoffset var(--duration-slow) var(--ease-entrance) 60ms;
+}
+
+.tag[data-disabled],
+.tag--toggle:disabled {
+  color: var(--text-disabled);
+  border-color: var(--border-subtle);
+  background: var(--bg-surface);
+  cursor: default;
+  --tag-shadow: none;
+}
+.tag[data-disabled] .tag__count,
+.tag--toggle:disabled .tag__count {
+  color: var(--text-disabled);
+}
+.tag[data-disabled] .tag__remove {
+  color: var(--text-disabled);
+  background: transparent;
+  cursor: default;
+  pointer-events: none;
+}
+.tag--toggle:disabled {
+  transform: none;
+}
+.tag--toggle:disabled[aria-pressed='true'] {
+  background: var(--bg-muted);
+  border-color: var(--border-subtle);
+}
+
+.tag-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tag__remove svg {
+    transition: none;
+  }
+  .tag__remove:hover svg {
+    transform: none;
+  }
+  .tag__remove:active {
+    transform: none;
+  }
+  .tag--toggle:active:not(:disabled) {
+    transform: none;
+  }
+  .tag__icon--dual > :is(i, svg) {
+    transition: none;
+  }
+}

package/src/components/primitives/textarea/Textarea.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import './textarea.css';
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  type ChangeEventHandler,
+  type CSSProperties,
+  type KeyboardEvent,
+  type ReactNode,
+  type TextareaHTMLAttributes,
+} from 'react';
+import { FieldLabel, FieldMessage, resolveFieldMessage, type FieldMessagingProps } from '../input/field-chrome';
+import type { DataAttributes } from '../../../dom-props';
+import { cx } from '../../internal/utils/cx';
+
+const RING_C = (2 * Math.PI * 7).toFixed(2);
+
+/** The native <textarea> props Textarea surfaces at the top level (the rest live in `htmlProps`). */
+type TextareaNative = Pick<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  'placeholder' | 'disabled' | 'readOnly' | 'onKeyDown'
+>;
+
+interface TextareaOwnProps extends FieldMessagingProps, TextareaNative {
+  /** Controlled text value. @default '' */
+  value?: string;
+  /** Change handler - fired on each edit with the textarea change event. */
+  onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+  /** Fired on ⌘/Ctrl+Enter with the current text. */
+  onSubmit?: (value: string) => void;
+  /** Soft char limit: shows the meter + over-limit highlight. Does NOT truncate (use native maxLength for a hard stop). */
+  max?: number;
+  /** Rows shown before auto-grow kicks in. @default 3 */
+  minRows?: number;
+  /** Row cap - grows up to this, then the box scrolls. @default 10 */
+  maxRows?: number;
+  /** Remaining-chars threshold that flips the meter amber. Default 20. */
+  warnAt?: number;
+  /** Footer hint, left of the meter - e.g. a ⌘↵ affordance. */
+  hint?: ReactNode;
+  /** md (default) - lg (prominent composer). */
+  size?: 'md' | 'lg';
+  /** Extra class(es) merged onto the field root. */
+  className?: string;
+  /** Inline styles merged onto the field root. */
+  style?: CSSProperties;
+}
+
+export interface TextareaProps extends TextareaOwnProps {
+  /** Standard <textarea> attributes (name, maxLength, aria-*, onKeyDown, ...) forwarded to the textarea. */
+  htmlProps?: Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, keyof TextareaOwnProps | 'rows'> & DataAttributes;
+}
+
+export function Textarea({
+  id,
+  label,
+  required,
+  optional,
+  placeholder,
+  helper,
+  error,
+  warning,
+  success,
+  value = '',
+  onChange,
+  onKeyDown,
+  onSubmit,
+  max,
+  minRows = 3,
+  maxRows = 10,
+  warnAt = 20,
+  hint,
+  size,
+  disabled,
+  readOnly,
+  className = '',
+  style,
+  htmlProps,
+}: TextareaProps) {
+  const taRef = useRef<HTMLTextAreaElement>(null);
+  const stackRef = useRef<HTMLDivElement>(null);
+  const mirrorRef = useRef<HTMLDivElement>(null);
+  const text = value ?? '';
+  const count = text.length;
+  const over = max ? Math.max(count - max, 0) : 0;
+  const remaining = max ? max - count : 0;
+  const meterState = over ? 'is-over' : max && remaining <= warnAt ? 'is-near' : '';
+
+  const { state, msg, msgIcon } = resolveFieldMessage(error, warning, success, helper);
+
+  const resize = () => {
+    const el = taRef.current,
+      stack = stackRef.current;
+    if (!el || !stack) return;
+    const start = stack.offsetHeight;
+    el.style.height = 'auto';
+    el.style.height = el.scrollHeight + 'px';
+    const content = el.offsetHeight;
+    const maxPx = parseFloat(getComputedStyle(stack).maxHeight) || Infinity;
+    const target = Math.min(content, maxPx);
+    if (target === start) {
+      stack.style.overflowY = content > maxPx ? 'auto' : 'clip';
+      return;
+    }
+    stack.style.overflowY = 'clip';
+    stack.style.height = start + 'px';
+    void stack.offsetHeight;
+    stack.style.height = target + 'px';
+  };
+  useLayoutEffect(resize, [text, size]);
+  useEffect(() => {
+    const stack = stackRef.current;
+    if (!stack) return undefined;
+    let w = stack.offsetWidth;
+    const ro = new ResizeObserver(() => {
+      if (stack.offsetWidth !== w) {
+        w = stack.offsetWidth;
+        resize();
+      }
+    });
+    ro.observe(stack);
+    return () => ro.disconnect();
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (onSubmit && (e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+      e.preventDefault();
+      onSubmit(text);
+    }
+    onKeyDown?.(e);
+  };
+
+  const cls = cx('fld', 'fld--txa', size === 'lg' && 'fld--lg', state, className);
+  const boxCls = cx('txa', disabled && 'is-disabled', readOnly && 'is-readonly');
+
+  return (
+    <div className={cls} style={style}>
+      <FieldLabel id={id} label={label} required={required} optional={optional} />
+      <div className={boxCls} style={{ '--txa-min-rows': minRows, '--txa-max-rows': maxRows } as CSSProperties}>
+        <div className="txa__stack" ref={stackRef}>
+          <div className="txa__mirror" ref={mirrorRef} aria-hidden="true">
+            {over ? text.slice(0, max) : text}
+            {over ? <mark>{text.slice(max)}</mark> : null}
+            {'\n'}
+          </div>
+          <textarea
+            id={id}
+            className="txa__input"
+            ref={taRef}
+            rows={minRows}
+            value={text}
+            placeholder={placeholder}
+            required={required}
+            disabled={disabled}
+            readOnly={readOnly}
+            onChange={onChange}
+            onKeyDown={handleKeyDown}
+            onScroll={() => {
+              if (mirrorRef.current) mirrorRef.current.scrollTop = taRef.current.scrollTop;
+            }}
+            aria-invalid={error ? true : undefined}
+            {...htmlProps}
+          />
+        </div>
+        {(max || hint) && (
+          <div className="txa__bar">
+            {hint && <span className="txa__hint">{hint}</span>}
+            {max && (
+              <span className={cx('txa__meter', meterState)}>
+                <span className="txa__count">{over || remaining <= warnAt ? remaining : `${count} / ${max}`}</span>
+                <svg
+                  className="txa__ring"
+                  viewBox="0 0 16 16"
+                  aria-hidden="true"
+                  style={{ '--txa-ring-c': RING_C, '--txa-ring-p': Math.min(count / max, 1) } as CSSProperties}
+                >
+                  <circle className="txa__ring-trk" cx="8" cy="8" r="7" />
+                  <circle className="txa__ring-prg" cx="8" cy="8" r="7" />
+                </svg>
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+      <FieldMessage message={msg} icon={msgIcon} />
+    </div>
+  );
+}