@zyncat/ui 0.8.0

package/dist/button.css

@@ -0,0 +1,269 @@
+/* Button - variants, sizes, states; lit gradient, tactile press, composed focus ring. */
+
+/* Gradient stops as typed properties: background-image can't transition, but registered
+   <color> values can - gradient variants set the stops once and states swap them. */
+@property --btn-grad-a {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: transparent;
+}
+@property --btn-grad-b {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: transparent;
+}
+
+.btn {
+  --btn-shadow: none;
+  --btn-ring: var(--ring-accent);
+
+  position: relative;
+  isolation: isolate;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+
+  height: var(--control-height);
+  padding: 0 var(--space-4);
+  border: var(--border-hairline) solid transparent;
+  border-radius: var(--radius-md);
+
+  font-family: var(--font-sans);
+  font-size: var(--size-body);
+  font-weight: var(--weight-medium);
+  line-height: 1;
+  letter-spacing: var(--tracking-normal);
+  white-space: nowrap;
+
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  appearance: none;
+  box-shadow: var(--btn-shadow);
+
+  transition:
+    background-color var(--duration-fast) var(--ease-standard),
+    --btn-grad-a var(--duration-base) var(--ease-standard),
+    --btn-grad-b var(--duration-base) var(--ease-standard),
+    border-color var(--duration-fast) var(--ease-standard),
+    color var(--duration-fast) var(--ease-standard),
+    box-shadow var(--duration-fast) var(--ease-standard),
+    transform var(--duration-fast) var(--ease-standard);
+}
+
+/* Composed focus ring: keep the resting shadow, add the ring on top. */
+.btn:focus-visible {
+  outline: none;
+  box-shadow: var(--btn-shadow), var(--btn-ring);
+}
+
+.btn--sm {
+  height: var(--control-height-sm);
+  padding: 0 var(--space-3);
+  font-size: var(--size-caption);
+  border-radius: var(--radius-sm);
+  gap: var(--space-1);
+}
+.btn--lg {
+  height: var(--control-height-lg);
+  padding: 0 var(--space-5);
+  border-radius: var(--radius-md);
+}
+.btn--block {
+  width: 100%;
+}
+.btn--icon {
+  width: var(--control-height-sm);
+  height: var(--control-height-sm);
+  border-radius: var(--radius-sm);
+}
+
+.btn__icon {
+  display: inline-flex;
+  flex: none;
+  width: 1em;
+  height: 1em;
+}
+.btn__icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+/* optical: pull icons slightly toward the label */
+.btn__icon:first-child {
+  margin-left: calc(var(--space-1) * -1);
+}
+.btn__icon:last-child {
+  margin-right: calc(var(--space-1) * -1);
+}
+
+.btn--primary {
+  color: var(--text-on-accent);
+  --btn-grad-a: var(--accent);
+  --btn-grad-b: var(--accent-hover);
+  background: linear-gradient(180deg, var(--btn-grad-a), var(--btn-grad-b));
+  --btn-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.16), var(--shadow-sm);
+}
+.btn--primary:hover:not(:disabled):not(.is-loading) {
+  --btn-grad-a: var(--accent-lift);
+  --btn-grad-b: var(--accent);
+  --btn-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.22), var(--shadow-md);
+}
+.btn--primary:active:not(:disabled):not(.is-loading) {
+  --btn-grad-a: var(--accent-hover);
+  --btn-grad-b: var(--accent-active);
+  transform: translateY(var(--space-px));
+  --btn-shadow: inset 0 1px 1px 0 rgb(var(--shadow-rgb) / 0.4), 0 1px 1px 0 rgb(var(--shadow-rgb) / 0.1);
+}
+
+.btn--secondary {
+  color: var(--text-body);
+  background: var(--bg-surface);
+  border-color: var(--border-default);
+  --btn-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.6), 0 1px 2px 0 rgb(var(--shadow-rgb) / 0.05);
+}
+.btn--secondary:hover:not(:disabled):not(.is-loading) {
+  color: var(--text-strong);
+  background: var(--neutral-wash);
+  border-color: var(--border-strong);
+}
+.btn--secondary:active:not(:disabled):not(.is-loading) {
+  background: var(--neutral-wash-press);
+  transform: translateY(var(--space-px));
+  --btn-shadow: inset 0 1px 2px 0 rgb(var(--shadow-rgb) / 0.07);
+}
+
+.btn--ghost {
+  color: var(--text-body);
+  background: transparent;
+}
+/* hover wash grows from the center rather than flat-filling: a ::before scales up under the
+   label (.btn is isolated, so z-index:-1 stays inside the button, behind .btn__label). */
+.btn--ghost::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--neutral-wash);
+  opacity: 0;
+  transform: scale(0.75);
+  transition:
+    transform var(--duration-fast) var(--ease-standard),
+    opacity var(--duration-fast) var(--ease-standard),
+    background-color var(--duration-fast) var(--ease-standard);
+}
+.btn--ghost:hover:not(:disabled):not(.is-loading) {
+  color: var(--text-strong);
+}
+.btn--ghost:hover:not(:disabled):not(.is-loading)::before {
+  opacity: 1;
+  transform: scale(1);
+}
+.btn--ghost:active:not(:disabled):not(.is-loading) {
+  transform: translateY(var(--space-px));
+}
+.btn--ghost:active:not(:disabled):not(.is-loading)::before {
+  background: var(--neutral-wash-press);
+}
+
+.btn--danger {
+  color: var(--text-on-accent);
+  --btn-grad-a: var(--red-500);
+  --btn-grad-b: var(--red-600);
+  background: linear-gradient(180deg, var(--btn-grad-a), var(--btn-grad-b));
+  --btn-ring: var(--ring-danger);
+  --btn-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.16), var(--shadow-sm);
+}
+.btn--danger:hover:not(:disabled):not(.is-loading) {
+  --btn-grad-a: var(--red-400);
+  --btn-grad-b: var(--red-500);
+  --btn-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.22), var(--shadow-md);
+}
+.btn--danger:active:not(:disabled):not(.is-loading) {
+  --btn-grad-a: var(--red-600);
+  --btn-grad-b: var(--red-700);
+  transform: translateY(var(--space-px));
+  --btn-shadow: inset 0 1px 1px 0 rgb(var(--shadow-rgb) / 0.4), 0 1px 1px 0 rgb(var(--shadow-rgb) / 0.1);
+}
+
+.btn--link {
+  height: auto;
+  padding: 0;
+  border-radius: var(--radius-sm);
+  color: var(--text-accent);
+  background: none;
+  --btn-shadow: none;
+  font-weight: var(--weight-medium);
+}
+.btn--link:hover:not(:disabled):not(.is-loading) {
+  color: var(--accent-active);
+  text-decoration: underline;
+  text-underline-offset: var(--space-px);
+}
+.btn--link:active:not(:disabled):not(.is-loading) {
+  color: var(--accent-active);
+}
+.btn--link:focus-visible {
+  border-radius: var(--radius-sm);
+  box-shadow: var(--btn-ring);
+}
+
+/* Disabled - explicit per variant, never a blanket fade. */
+.btn:disabled,
+.btn.is-loading {
+  cursor: default;
+}
+.btn:disabled {
+  transform: none;
+}
+.btn--primary:disabled {
+  background: var(--accent-disabled);
+  color: var(--text-on-accent);
+  --btn-shadow: none;
+}
+.btn--danger:disabled {
+  background: var(--danger-disabled);
+  color: var(--text-on-accent);
+  --btn-shadow: none;
+}
+.btn--secondary:disabled {
+  color: var(--text-disabled);
+  background: var(--bg-surface);
+  border-color: var(--border-subtle);
+  --btn-shadow: none;
+}
+.btn--ghost:disabled {
+  color: var(--text-disabled);
+  background: transparent;
+}
+.btn--link:disabled {
+  color: var(--text-disabled);
+  text-decoration: none;
+}
+
+/* Loading - content holds its width, spinner overlays. */
+.btn.is-loading .btn__label,
+.btn.is-loading .btn__icon {
+  opacity: 0;
+}
+.btn__spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 1em;
+  height: 1em;
+  margin: -0.5em 0 0 -0.5em;
+  border-radius: var(--radius-full);
+  border: var(--border-emphasis) solid currentColor;
+  border-right-color: transparent;
+  opacity: 0.9;
+  animation: btn-spin var(--duration-spin) var(--ease-standard) infinite;
+}
+@keyframes btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/button.d.ts

@@ -0,0 +1,44 @@
+import * as react from 'react';
+import { Ref, ReactNode, CSSProperties, ButtonHTMLAttributes } from 'react';
+import { D as DataAttributes } from './dom-props-C0jrllBw.js';
+
+interface ButtonOwnProps {
+    /** Visual weight / intent. `unstyled` emits base chrome only (sizing, focus ring,
+     *  layout) with no skin - for local re-skins via `className`, e.g. Alert's tone action. @default 'primary' */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'link' | 'unstyled';
+    /** Forwarded to the underlying <button> (React 19 ref-as-prop). */
+    ref?: Ref<HTMLButtonElement>;
+    /** Control height. sm 28px - md 36px (default) - lg 40px. @default 'md' */
+    size?: 'sm' | 'md' | 'lg' | 'icon';
+    /** `submit` / `reset` / `button`. @default 'button' */
+    type?: 'button' | 'submit' | 'reset';
+    /** Disable the control (also implied by `loading`). */
+    disabled?: boolean;
+    /** Loading - swaps content for a spinner and makes the button inert. */
+    loading?: boolean;
+    /** Leading icon node (e.g. a 16px <Icon>). Sized & aligned by the component. */
+    iconLeft?: ReactNode;
+    /** Trailing icon node. */
+    iconRight?: ReactNode;
+    /** Stretch to fill the container width. */
+    fullWidth?: boolean;
+    /** Extra class(es) merged onto the button. */
+    className?: string;
+    /** Inline styles merged onto the button. */
+    style?: CSSProperties;
+    /** Button label. */
+    children?: ReactNode;
+    /** Click handler */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /** Pointer handler */
+    onPointerDown?: React.PointerEventHandler<HTMLButtonElement>;
+}
+type ButtonRestProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonOwnProps> & DataAttributes;
+interface ButtonProps extends ButtonOwnProps, ButtonRestProps {
+    /** Standard <button> attributes (onClick, name, form, aria-*, data-*, ...) forwarded verbatim.
+     *  Bare `<button>` attributes also pass through directly; `htmlProps` wins on conflict. */
+    htmlProps?: ButtonRestProps;
+}
+declare function Button({ variant, size, type, disabled, loading, iconLeft, iconRight, fullWidth, className, style, children, onClick, ref, onPointerDown, htmlProps, ...rest }: ButtonProps): react.JSX.Element;
+
+export { Button, type ButtonProps };

package/dist/button.js

@@ -0,0 +1,4 @@
+'use client';export { Button } from './chunk-U5QQZC3U.js';
+import './chunk-QGNC7LH5.js';
+//# sourceMappingURL=button.js.map
+//# sourceMappingURL=button.js.map

package/dist/button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"button.js"}

package/dist/checkbox.css

@@ -0,0 +1,177 @@
+/* Checkbox - on/off + indeterminate; native input hidden, box painted from :has()-set flags read via calc(). */
+
+.cbx {
+  --cbx-fill: linear-gradient(180deg, var(--accent), var(--accent-hover));
+  --cbx-on: var(--accent);
+  --cbx-off: var(--border-strong);
+  --cbx-ring: var(--ring-accent);
+  --cbx-size: var(--control-box);
+  --cbx-radius: var(--radius-sm);
+  --tick-len: 14px; /* needs a unit so the calc() dashoffset is a valid <length>; ~ the polyline path length */
+  --fill: 0;
+  --tick: 0;
+  --dash: 0;
+  --press: 1;
+
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--duration-base) var(--ease-standard);
+
+  /* later rule wins, so indeterminate beats checked */
+  &:has(:checked) {
+    --fill: 1;
+    --tick: 1;
+  }
+  &:has(:indeterminate) {
+    --fill: 1;
+    --tick: 0;
+    --dash: 1;
+  }
+
+  &:not(.cbx--disabled):hover {
+    background: var(--neutral-wash);
+  }
+  /* accent the empty box on hover */
+  &:not(.cbx--disabled):hover:not(:has(:checked, :indeterminate)) {
+    --cbx-off: var(--cbx-on);
+  }
+  &:not(.cbx--disabled):active {
+    --press: 0.88;
+  }
+  &:has(:focus-visible) .cbx__box {
+    box-shadow: var(--cbx-ring);
+  }
+}
+
+.cbx__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.cbx__box {
+  position: relative;
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: var(--cbx-size);
+  height: var(--cbx-size);
+  margin-top: calc((var(--leading-body) - var(--cbx-size)) / 2);
+  border: var(--border-hairline) solid color-mix(in oklab, var(--cbx-on) calc(var(--fill) * 100%), var(--cbx-off));
+  border-radius: var(--cbx-radius);
+  background: var(--bg-inset);
+  transform: scale(var(--press));
+  transition:
+    border-color var(--duration-fast) var(--ease-standard),
+    background-color var(--duration-fast) var(--ease-standard),
+    box-shadow var(--duration-fast) var(--ease-standard),
+    transform var(--duration-base) var(--ease-spring);
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+
+    /* inner corner = outer radius - border, so the fill reaches the corners (no --bg-inset showing) */
+    border-radius: calc(var(--cbx-radius) - var(--border-hairline));
+    background: var(--cbx-fill);
+    opacity: var(--fill);
+    transform: scale(calc(0.4 + 0.6 * var(--fill)));
+    transition:
+      transform var(--duration-base) var(--ease-spring),
+      opacity var(--duration-fast) var(--ease-standard);
+  }
+}
+
+/* stagger lives in the delay: draw-on waits a beat (calc - --tick), retract fires immediately */
+.cbx__mark {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  color: var(--text-on-accent);
+  pointer-events: none;
+}
+.cbx__tick {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-dasharray: var(--tick-len);
+  stroke-dashoffset: calc(var(--tick-len) * (1 - var(--tick)));
+  transition: stroke-dashoffset var(--duration-base) var(--ease-entrance) calc(var(--tick) * var(--duration-fast));
+}
+
+.cbx__dash {
+  position: absolute;
+  width: 56%;
+  height: 2px;
+  border-radius: var(--border-hairline);
+  background: var(--text-on-accent);
+  pointer-events: none;
+  opacity: var(--dash);
+  transform: scaleX(var(--dash));
+  transition:
+    transform var(--duration-base) var(--ease-spring),
+    opacity var(--duration-fast) var(--ease-standard);
+}
+
+.cbx__text {
+  display: grid;
+  gap: var(--space-1);
+}
+.cbx__label {
+  font: var(--type-label);
+  color: var(--text-strong);
+}
+.cbx__desc {
+  font: var(--type-caption);
+  color: var(--text-muted);
+}
+
+.cbx--sm {
+  --cbx-size: var(--space-4);
+  & .cbx__label {
+    font: var(--type-caption);
+    font-weight: var(--weight-medium);
+    color: var(--text-strong);
+  }
+  & .cbx__box {
+    margin-top: calc((var(--leading-caption) - var(--cbx-size)) / 2);
+  }
+}
+
+.cbx--error {
+  --cbx-fill: linear-gradient(180deg, var(--danger), var(--danger));
+  --cbx-on: var(--danger);
+  --cbx-off: var(--danger);
+  --cbx-ring: var(--ring-danger);
+}
+
+/* disabled leaves the state flags untouched, so the mark still matches checked state */
+.cbx--disabled {
+  cursor: not-allowed;
+  --cbx-fill: var(--border-strong);
+  --cbx-on: var(--border-default);
+  --cbx-off: var(--border-subtle);
+  & .cbx__box {
+    background: var(--bg-muted);
+  }
+  & .cbx__label,
+  & .cbx__desc {
+    color: var(--text-disabled);
+  }
+}

package/dist/checkbox.d.ts

@@ -0,0 +1,35 @@
+import * as react from 'react';
+import { ReactNode, ChangeEventHandler, CSSProperties, InputHTMLAttributes } from 'react';
+import { D as DataAttributes } from './dom-props-C0jrllBw.js';
+
+interface CheckboxOwnProps {
+    /** Controlled checked state. Omit for uncontrolled (use `defaultChecked`). */
+    checked?: boolean;
+    /** Uncontrolled initial state. */
+    defaultChecked?: boolean;
+    /** Indeterminate - the "some, not all" select-all state; visually wins over `checked`. @default false */
+    indeterminate?: boolean;
+    /** Single error state for consent gates ("you must agree"); also sets `aria-invalid`. @default false */
+    error?: boolean;
+    /** Disabled - inert and de-emphasized (distinct fill when checked). */
+    disabled?: boolean;
+    /** Box size: `md` 18px - `sm` 16px for dense table rows. @default 'md' */
+    size?: 'sm' | 'md';
+    /** Label text beside the box. */
+    label?: ReactNode;
+    /** Optional secondary line under the label (settings rows). */
+    description?: ReactNode;
+    /** Fires on toggle - read `e.target.checked`. */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /** Extra class(es) merged onto the root label. */
+    className?: string;
+    /** Inline styles merged onto the root label. */
+    style?: CSSProperties;
+}
+interface CheckboxProps extends CheckboxOwnProps {
+    /** Standard <input> attributes (name, value, required, aria-*, ...) forwarded to the checkbox input. */
+    htmlProps?: Omit<InputHTMLAttributes<HTMLInputElement>, keyof CheckboxOwnProps | 'type'> & DataAttributes;
+}
+declare function Checkbox({ checked, defaultChecked, indeterminate, error, disabled, size, label, description, className, style, onChange, htmlProps, }: CheckboxProps): react.JSX.Element;
+
+export { Checkbox, type CheckboxProps };

package/dist/checkbox.js

@@ -0,0 +1,5 @@
+'use client';export { Checkbox } from './chunk-QDK66S4G.js';
+import './chunk-NNXJCLTV.js';
+import './chunk-QGNC7LH5.js';
+//# sourceMappingURL=checkbox.js.map
+//# sourceMappingURL=checkbox.js.map

package/dist/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"checkbox.js"}

package/dist/chunk-2ERBBFZS.js

@@ -0,0 +1,12 @@
+'use client';import './icon.css';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/internal/icon/IconSlot.tsx
+function IconSlot({ size = "md", children }) {
+  if (!children) return null;
+  return /* @__PURE__ */ jsx("span", { className: `icon-slot icon-slot--${size}`, children });
+}
+
+export { IconSlot };
+//# sourceMappingURL=chunk-2ERBBFZS.js.map
+//# sourceMappingURL=chunk-2ERBBFZS.js.map

package/dist/chunk-2ERBBFZS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/internal/icon/IconSlot.tsx"],"names":[],"mappings":";;;;AAMO,SAAS,QAAA,CAAS,EAAE,IAAA,GAAO,IAAA,EAAM,UAAS,EAA8C;AAC7F,EAAA,IAAI,CAAC,UAAU,OAAO,IAAA;AACtB,EAAA,2BAAQ,MAAA,EAAA,EAAK,SAAA,EAAW,CAAA,qBAAA,EAAwB,IAAI,IAAK,QAAA,EAAS,CAAA;AACpE","file":"chunk-2ERBBFZS.js","sourcesContent":["'use client';\n\nimport './icon.css';\nimport type { ReactNode } from 'react';\nimport type { IconSize } from './Icon';\n\nexport function IconSlot({ size = 'md', children }: { size?: IconSize; children?: ReactNode }) {\n  if (!children) return null;\n  return <span className={`icon-slot icon-slot--${size}`}>{children}</span>;\n}\n"]}