premium-ds 0.1.0

package/src/components/tag/Tag.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+/* Tag (+ TagGroup) - removable/editable label; stateless, the parent owns the list. */
+
+import * as React from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { UIMotion } from '../../tokens/motion-tokens';
+import { IconSlot } from '../icon/IconSlot';
+
+/** Tag - the removable, editable label (stateless; the parent owns the list). */
+export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+  /** The label. */
+  children: React.ReactNode;
+  /** Your own icon node, sized small and tinted to the tag's text. */
+  icon?: React.ReactNode | null;
+  /** Presence adds the remove button; called on click - remove the item yourself. */
+  onRemove?: (() => void) | null;
+  /** Accessible label for the remove button. Defaults to "Remove {label}" for string labels. */
+  removeLabel?: string;
+  /** 'md' = 28px (default) - 'sm' = 24px for dense rows. */
+  size?: 'md' | 'sm';
+  disabled?: boolean;
+  className?: string;
+}
+
+/** TagGroup - wrapping flex row + removal/insertion choreography. */
+export interface TagGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Accessible name for the group (role="group"). */
+  label?: string;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+const TagGroupContext = React.createContext(false);
+
+/* GOTCHA (buildless pages): split props manually, not object-rest. */
+const TAG_OWN_PROPS: Record<string, number> = {
+  children: 1,
+  icon: 1,
+  onRemove: 1,
+  removeLabel: 1,
+  size: 1,
+  disabled: 1,
+  className: 1,
+};
+function tagRestProps(props: Record<string, unknown>, own: Record<string, number>) {
+  const rest: Record<string, unknown> = {};
+  for (const k in props) {
+    if (!own[k]) rest[k] = props[k];
+  }
+  return rest;
+}
+
+/* The remove glyph - drawn inline (path-level, per section D) so it can wind up on hover. */
+function TagRemoveGlyph() {
+  return (
+    <svg viewBox="0 0 12 12" fill="none" aria-hidden="true">
+      <path d="M3 3 L9 9 M9 3 L3 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export function Tag(props: TagProps) {
+  const {
+    children,
+    icon = null,
+    onRemove = null,
+    removeLabel,
+    size = 'md',
+    disabled = false,
+    className = '',
+  } = props;
+  const rest = tagRestProps(props as unknown as Record<string, unknown>, TAG_OWN_PROPS);
+  const grouped = React.useContext(TagGroupContext);
+  const classes = ['tag', size === 'sm' ? 'tag--sm' : '', className].filter(Boolean).join(' ');
+
+  const xLabel = removeLabel || (typeof children === 'string' ? 'Remove ' + children : 'Remove');
+
+  const content = (
+    <React.Fragment>
+      {icon && (
+        <span className="tag__icon">
+          <IconSlot size="sm">{icon}</IconSlot>
+        </span>
+      )}
+      <span className="tag__label">{children}</span>
+      {onRemove && (
+        <button
+          type="button"
+          className="tag__remove"
+          aria-label={xLabel}
+          disabled={disabled}
+          onClick={onRemove}
+        >
+          <TagRemoveGlyph />
+        </button>
+      )}
+    </React.Fragment>
+  );
+
+  if (!grouped) {
+    return (
+      <span className={classes} data-disabled={disabled ? 'true' : undefined} {...rest}>
+        {content}
+      </span>
+    );
+  }
+
+  const { t } = UIMotion;
+  return (
+    <motion.span
+      layout
+      className={classes}
+      data-disabled={disabled ? 'true' : undefined}
+      initial={{ opacity: 0, scale: 0.9 }}
+      animate={{ opacity: 1, scale: 1, transition: t.enter }}
+      exit={{ opacity: 0, scale: 0.9, transition: t.exit }}
+      transition={t.layout}
+      {...rest}
+    >
+      {content}
+    </motion.span>
+  );
+}
+
+export function TagGroup(props: TagGroupProps) {
+  const { label, className = '', children } = props;
+  const rest = tagRestProps(props as unknown as Record<string, unknown>, {
+    label: 1,
+    className: 1,
+    children: 1,
+  });
+  return (
+    <div
+      className={['tag-group', className].filter(Boolean).join(' ')}
+      role="group"
+      aria-label={label}
+      {...rest}
+    >
+      <TagGroupContext.Provider value={true}>
+        <AnimatePresence initial={false}>{children}</AnimatePresence>
+      </TagGroupContext.Provider>
+    </div>
+  );
+}

package/src/components/tag/ToggleTag.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+/* ToggleTag - on/off filter chip (<button aria-pressed>); owns its selection state. */
+
+import * as React from 'react';
+import { IconSlot } from '../icon/IconSlot';
+
+/** ToggleTag - the on/off filter chip (<button aria-pressed>). */
+export interface ToggleTagProps extends Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  'onChange' | 'children'
+> {
+  /** The label. */
+  children: React.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?: React.ReactNode | null;
+  /** Optional result count - rendered mono/tabular. */
+  count?: React.ReactNode;
+  /** 'md' = 28px (default) - 'sm' = 24px for dense rows. */
+  size?: 'md' | 'sm';
+  disabled?: boolean;
+  className?: string;
+}
+
+/* GOTCHA: split props manually instead of object-rest. */
+const TOGGLE_TAG_OWN_PROPS: Record<string, number> = {
+  children: 1,
+  selected: 1,
+  defaultSelected: 1,
+  onChange: 1,
+  icon: 1,
+  count: 1,
+  size: 1,
+  disabled: 1,
+  className: 1,
+};
+function toggleTagRestProps(props: Record<string, unknown>, own: Record<string, number>) {
+  const rest: Record<string, unknown> = {};
+  for (const k in props) {
+    if (!own[k]) rest[k] = props[k];
+  }
+  return rest;
+}
+
+function ToggleTagTick({ selected }: { selected: boolean }) {
+  /* collapse.css mechanism on spans - width 0fr and 1fr, content clipped */
+  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(props: ToggleTagProps) {
+  const {
+    children,
+    selected: controlledSelected,
+    defaultSelected = false,
+    onChange,
+    icon = null,
+    count = null,
+    size = 'md',
+    disabled = false,
+    className = '',
+  } = props;
+  const rest = toggleTagRestProps(
+    props as unknown as Record<string, unknown>,
+    TOGGLE_TAG_OWN_PROPS,
+  );
+  const [uncontrolled, setUncontrolled] = React.useState(defaultSelected);
+  const isControlled = controlledSelected !== undefined;
+  const selected = isControlled ? controlledSelected : uncontrolled;
+
+  function toggle() {
+    const next = !selected;
+    if (!isControlled) setUncontrolled(next);
+    if (onChange) onChange(next);
+  }
+
+  const classes = ['tag', 'tag--toggle', size === 'sm' ? 'tag--sm' : '', className]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <button
+      type="button"
+      className={classes}
+      aria-pressed={selected}
+      disabled={disabled}
+      onClick={toggle}
+      {...rest}
+    >
+      {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/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(--bg-subtle);
+}
+.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;
+  }
+}