@zyncat/ui 0.8.0

package/package.json

@@ -0,0 +1,257 @@
+{
+  "name": "@zyncat/ui",
+  "version": "0.8.0",
+  "description": "A React 19 design system: accessible, animated UI components built on a small, closed CSS design-token vocabulary. No Tailwind, no CSS-in-JS.",
+  "keywords": [
+    "react",
+    "react-19",
+    "design-system",
+    "component-library",
+    "react-components",
+    "ui-components",
+    "ui-kit",
+    "design-tokens",
+    "css",
+    "typescript",
+    "accessible",
+    "a11y",
+    "motion",
+    "animation",
+    "headless-ui",
+    "esm"
+  ],
+  "type": "module",
+  "license": "MIT",
+  "author": "Tabsir Ahammed",
+  "homepage": "https://ui.zyncat.app",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Tabsir99/zyncat-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Tabsir99/zyncat-ui/issues"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "bin": {
+    "zyncat-ui-mcp": "./dist/mcp.js"
+  },
+  "exports": {
+    "./button": {
+      "source": "./src/components/primitives/button/Button.tsx",
+      "types": "./dist/button.d.ts",
+      "import": "./dist/button.js"
+    },
+    "./collapse": {
+      "source": "./src/components/primitives/collapse/Collapse.tsx",
+      "types": "./dist/collapse.d.ts",
+      "import": "./dist/collapse.js"
+    },
+    "./badge": {
+      "source": "./src/components/primitives/badge/Badge.tsx",
+      "types": "./dist/badge.d.ts",
+      "import": "./dist/badge.js"
+    },
+    "./status-badge": {
+      "source": "./src/components/primitives/badge/StatusBadge.tsx",
+      "types": "./dist/status-badge.d.ts",
+      "import": "./dist/status-badge.js"
+    },
+    "./count-badge": {
+      "source": "./src/components/primitives/badge/CountBadge.tsx",
+      "types": "./dist/count-badge.d.ts",
+      "import": "./dist/count-badge.js"
+    },
+    "./avatar": {
+      "source": "./src/components/primitives/avatar/Avatar.tsx",
+      "types": "./dist/avatar.d.ts",
+      "import": "./dist/avatar.js"
+    },
+    "./avatar-group": {
+      "source": "./src/components/primitives/avatar/AvatarGroup.tsx",
+      "types": "./dist/avatar-group.d.ts",
+      "import": "./dist/avatar-group.js"
+    },
+    "./tag": {
+      "source": "./src/components/primitives/tag/Tag.tsx",
+      "types": "./dist/tag.d.ts",
+      "import": "./dist/tag.js"
+    },
+    "./toggle-tag": {
+      "source": "./src/components/primitives/tag/ToggleTag.tsx",
+      "types": "./dist/toggle-tag.d.ts",
+      "import": "./dist/toggle-tag.js"
+    },
+    "./table": {
+      "source": "./src/components/composites/table/Table.tsx",
+      "types": "./dist/table.d.ts",
+      "import": "./dist/table.js"
+    },
+    "./pagination": {
+      "source": "./src/components/composites/pagination/Pagination.tsx",
+      "types": "./dist/pagination.d.ts",
+      "import": "./dist/pagination.js"
+    },
+    "./text-field": {
+      "source": "./src/components/primitives/input/TextField.tsx",
+      "types": "./dist/text-field.d.ts",
+      "import": "./dist/text-field.js"
+    },
+    "./number-field": {
+      "source": "./src/components/primitives/input/NumberField.tsx",
+      "types": "./dist/number-field.d.ts",
+      "import": "./dist/number-field.js"
+    },
+    "./otp-field": {
+      "source": "./src/components/primitives/input/OtpField.tsx",
+      "types": "./dist/otp-field.d.ts",
+      "import": "./dist/otp-field.js"
+    },
+    "./textarea": {
+      "source": "./src/components/primitives/textarea/Textarea.tsx",
+      "types": "./dist/textarea.d.ts",
+      "import": "./dist/textarea.js"
+    },
+    "./checkbox": {
+      "source": "./src/components/primitives/checkbox/Checkbox.tsx",
+      "types": "./dist/checkbox.d.ts",
+      "import": "./dist/checkbox.js"
+    },
+    "./toggle": {
+      "source": "./src/components/primitives/toggle/Toggle.tsx",
+      "types": "./dist/toggle.d.ts",
+      "import": "./dist/toggle.js"
+    },
+    "./radio-group": {
+      "source": "./src/components/primitives/radio-group/RadioGroup.tsx",
+      "types": "./dist/radio-group.d.ts",
+      "import": "./dist/radio-group.js"
+    },
+    "./select": {
+      "source": "./src/components/composites/select/Select.tsx",
+      "types": "./dist/select.d.ts",
+      "import": "./dist/select.js"
+    },
+    "./multi-select": {
+      "source": "./src/components/composites/select/MultiSelect.tsx",
+      "types": "./dist/multi-select.d.ts",
+      "import": "./dist/multi-select.js"
+    },
+    "./date-field": {
+      "source": "./src/components/composites/date-picker/DateField.tsx",
+      "types": "./dist/date-field.d.ts",
+      "import": "./dist/date-field.js"
+    },
+    "./datetime-field": {
+      "source": "./src/components/composites/date-picker/DateTimeField.tsx",
+      "types": "./dist/datetime-field.d.ts",
+      "import": "./dist/datetime-field.js"
+    },
+    "./date-range-field": {
+      "source": "./src/components/composites/date-picker/DateRangeField.tsx",
+      "types": "./dist/date-range-field.d.ts",
+      "import": "./dist/date-range-field.js"
+    },
+    "./time-field": {
+      "source": "./src/components/composites/date-picker/TimeField.tsx",
+      "types": "./dist/time-field.d.ts",
+      "import": "./dist/time-field.js"
+    },
+    "./tabs": {
+      "source": "./src/components/composites/tabs/Tabs.tsx",
+      "types": "./dist/tabs.d.ts",
+      "import": "./dist/tabs.js"
+    },
+    "./popover": {
+      "source": "./src/components/composites/popover/Popover.tsx",
+      "types": "./dist/popover.d.ts",
+      "import": "./dist/popover.js"
+    },
+    "./sheet": {
+      "source": "./src/components/composites/sheet/Sheet.tsx",
+      "types": "./dist/sheet.d.ts",
+      "import": "./dist/sheet.js"
+    },
+    "./dialog": {
+      "source": "./src/components/composites/dialog/Dialog.tsx",
+      "types": "./dist/dialog.d.ts",
+      "import": "./dist/dialog.js"
+    },
+    "./tooltip": {
+      "source": "./src/components/composites/tooltip/Tooltip.tsx",
+      "types": "./dist/tooltip.d.ts",
+      "import": "./dist/tooltip.js"
+    },
+    "./alert": {
+      "source": "./src/components/composites/alert/Alert.tsx",
+      "types": "./dist/alert.d.ts",
+      "import": "./dist/alert.js"
+    },
+    "./toast": {
+      "source": "./src/components/composites/toast/Toast.tsx",
+      "types": "./dist/toast.d.ts",
+      "import": "./dist/toast.js"
+    },
+    "./toast-store": {
+      "source": "./src/components/composites/toast/toast-store.ts",
+      "types": "./dist/toast-store.d.ts",
+      "import": "./dist/toast-store.js"
+    },
+    "./motion-tokens": {
+      "source": "./src/tokens/motion-tokens.ts",
+      "types": "./dist/motion-tokens.d.ts",
+      "import": "./dist/motion-tokens.js"
+    },
+    "./motion-devtools": {
+      "source": "./src/components/dev/MotionDevtools.tsx",
+      "types": "./dist/motion-devtools.d.ts",
+      "import": "./dist/motion-devtools.js"
+    },
+    "./glide": {
+      "source": "./src/motion/glide.tsx",
+      "types": "./dist/glide.d.ts",
+      "import": "./dist/glide.js"
+    },
+    "./styles.css": "./src/styles.css",
+    "./next": {
+      "types": "./next.d.mts",
+      "default": "./next.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "llms.txt",
+    "next.mjs",
+    "next.d.mts"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit && tsc -p tsconfig.node.json",
+    "check:css": "node scripts/check-css-graph.mjs",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "prepublishOnly": "pnpm build"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "devDependencies": {
+    "@phosphor-icons/react": "^2.1.10",
+    "@types/node": "^26.0.1",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "madge": "^8.0.0",
+    "prettier": "^3.8.3",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "tsup": "^8.5.0",
+    "typescript": "~6.0.3"
+  }
+}

package/src/components/composites/alert/Alert.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import './alert.css';
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import { Presence } from '../../../motion/presence';
+import { Motion } from '../../../motion/element';
+import { resolveMotionTiming } from '../../../motion/motion-timing';
+import type { DisableableAnimation } from '../../../motion/timing';
+import { Icon, type IconName } from '../../internal/icon/Icon';
+import { Button } from '../../primitives/button/Button';
+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';
+
+export type AlertTone = 'info' | 'success' | 'warning' | 'danger';
+
+export interface AlertAction {
+  /** Sentence-case label, e.g. "Update billing". */
+  label: string;
+  onClick?: () => void;
+}
+
+interface AlertOwnProps {
+  /** Status of the message; info/success are polite, warning/danger assertive. Default 'info'. */
+  tone?: AlertTone;
+  /** The message - sentence case, ideally one line. */
+  title: ReactNode;
+  /** Optional description; stays neutral - tone marks the message, not the prose. */
+  children?: ReactNode;
+  /** One action max, rendered as the system secondary small button. */
+  action?: AlertAction;
+  /** Renders the always-visible close button. Uncontrolled unless `open` is given. */
+  dismissible?: boolean;
+  /** Fires on dismiss. With `open` set, the parent owns hiding the alert. */
+  onDismiss?: () => void;
+  /** Controlled visibility; omit for uncontrolled. Exit eases shut (height collapse). */
+  open?: boolean;
+  /** App-level strip: square corners, hairline below only. Paint modifier. */
+  banner?: boolean;
+  /** Override the tone glyph; pass null to render no glyph. */
+  icon?: ReactNode | null;
+  /** Extra class(es) merged onto the alert. */
+  className?: string;
+  /** Inline styles merged onto the alert. */
+  style?: CSSProperties;
+  /** Enter/exit timing - motion tokens only, or `null` to disable (the height collapse snaps).
+   *  @default height 'slow'/'entrance'; opacity in 'base'/'entrance', out 'fast'/'exit' */
+  animation?: DisableableAnimation;
+}
+
+export interface AlertProps extends AlertOwnProps {
+  /** Standard <div> attributes (aria-*, data-*, ...) forwarded to the alert. */
+  htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof AlertOwnProps> & DataAttributes;
+}
+
+const ALERT_HEIGHT_TIMING = {
+  open: { duration: 'slow', ease: 'entrance' },
+  close: { duration: 'slow', ease: 'entrance' },
+} as const;
+const ALERT_OPACITY_TIMING = {
+  open: { duration: 'base', ease: 'entrance' },
+  close: { duration: 'fast', ease: 'exit' },
+} as const;
+
+const TONE_GLYPH: Record<AlertTone, IconName> = {
+  info: 'info',
+  success: 'check-circle',
+  warning: 'warning',
+  danger: 'warning-circle',
+};
+const TONE_ROLE: Record<AlertTone, string> = { info: 'status', success: 'status', warning: 'alert', danger: 'alert' };
+
+export function Alert({
+  tone = 'info',
+  title,
+  children = null,
+  action = null,
+  dismissible = false,
+  onDismiss,
+  open,
+  banner = false,
+  icon,
+  className = '',
+  style,
+  htmlProps,
+  animation,
+}: AlertProps) {
+  const [isOpen, setOpen] = useControllable(open, true, onDismiss);
+  const dismiss = () => setOpen(false);
+
+  const h = resolveMotionTiming(animation, ALERT_HEIGHT_TIMING);
+  const o = resolveMotionTiming(animation, ALERT_OPACITY_TIMING);
+
+  const cls = cx('alert', banner && 'alert--banner', className);
+
+  return (
+    <Presence initial={false}>
+      {isOpen && (
+        <Motion
+          key="alert-shell"
+          className="alert-shell"
+          animate={[
+            { height: [0, 'auto'], timing: h.open },
+            { opacity: [0, 1], timing: o.open },
+          ]}
+          exit={[
+            { height: ['auto', 0], timing: h.close },
+            { opacity: [1, 0], timing: o.close },
+          ]}
+        >
+          <div className={cls} style={style} data-tone={tone} role={TONE_ROLE[tone] || 'status'} {...htmlProps}>
+            {icon === null ? null : (
+              <span className="alert__icon" aria-hidden="true">
+                {icon !== undefined ? (
+                  <IconSlot size="md">{icon}</IconSlot>
+                ) : (
+                  <Icon name={TONE_GLYPH[tone] || 'info'} size="md" />
+                )}
+              </span>
+            )}
+            <div className="alert__body">
+              <p className="alert__title">{title}</p>
+              {children != null && <p className="alert__desc">{children}</p>}
+            </div>
+            {action && (
+              <Button variant="unstyled" size="sm" className="alert__action" onClick={action.onClick}>
+                {action.label}
+              </Button>
+            )}
+            {dismissible && (
+              <button type="button" className="alert__close" aria-label="Dismiss" onClick={dismiss}>
+                <Icon name="close" size="sm" />
+              </button>
+            )}
+          </div>
+        </Motion>
+      )}
+    </Presence>
+  );
+}

package/src/components/composites/alert/alert.css

@@ -0,0 +1,132 @@
+/* alert.css - the persistent in-flow status message: a lit tinted pane per tone. */
+
+.alert-shell {
+  overflow: hidden;
+}
+
+.alert {
+  /* tone hooks - repointed by [data-tone] below; info is the default */
+  --alert-hue: var(--info);
+  --alert-fg: var(--info-text);
+  --alert-bg: var(--info-subtle);
+  --alert-wash: var(--accent-wash); /* info's wash = accent (teal) */
+
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  /* the lit pane: top-light gradient over the tint + 1px inner highlight (Button's lighting model) */
+  background: linear-gradient(180deg, color-mix(in oklab, var(--bg-surface) 45%, var(--alert-bg)), var(--alert-bg));
+  border: var(--border-hairline) solid color-mix(in oklab, var(--alert-hue) 30%, transparent);
+  border-radius: var(--radius-lg);
+  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.55);
+}
+
+.alert[data-tone='success'] {
+  --alert-hue: var(--success);
+  --alert-fg: var(--success-text);
+  --alert-bg: var(--success-subtle);
+  --alert-wash: var(--success-wash);
+}
+.alert[data-tone='warning'] {
+  --alert-hue: var(--warning);
+  --alert-fg: var(--warning-text);
+  --alert-bg: var(--warning-subtle);
+  --alert-wash: var(--warning-wash);
+}
+.alert[data-tone='danger'] {
+  --alert-hue: var(--danger);
+  --alert-fg: var(--danger-text);
+  --alert-bg: var(--danger-subtle);
+  --alert-wash: var(--danger-wash);
+}
+
+/* with a description: glyph rides the title line, controls stay centered */
+.alert:has(.alert__desc) {
+  align-items: flex-start;
+}
+.alert:has(.alert__desc) .alert__action,
+.alert:has(.alert__desc) .alert__close {
+  align-self: center;
+}
+
+.alert--banner {
+  border-radius: 0;
+  border-block-start: 0;
+  border-inline: 0;
+  padding-inline: var(--space-6);
+}
+
+/* Glyph - one --leading-body tall so it centers on the title line. */
+.alert__icon {
+  flex: none;
+  display: grid;
+  place-items: center;
+  height: var(--leading-body);
+  color: var(--alert-hue);
+}
+
+.alert__body {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.alert__title {
+  margin: 0;
+  font: var(--type-label);
+  color: var(--alert-fg);
+  text-wrap: pretty;
+}
+.alert__desc {
+  margin: var(--space-1) 0 0;
+  font: var(--type-caption);
+  color: color-mix(in oklab, var(--alert-fg) 56%, var(--text-body));
+  text-wrap: pretty;
+}
+
+/* Action - the system .btn .btn--sm re-skinned to the pane's tone (alert-local chrome, not a global Button variant). */
+.alert__action {
+  flex: none;
+  color: var(--alert-fg);
+  background: transparent;
+}
+.alert__action:hover:not(:disabled) {
+  color: var(--alert-fg);
+  background: var(--alert-wash);
+}
+.alert__action:active:not(:disabled) {
+  background: color-mix(in oklab, var(--alert-hue) 16%, transparent);
+  transform: translateY(var(--space-px));
+}
+.alert[data-tone='danger'] .alert__action {
+  --btn-ring: var(--ring-danger);
+}
+
+/* Dismiss - always visible (alerts persist; no hover-reveal like toast). */
+.alert__close {
+  flex: none;
+  appearance: none;
+  display: grid;
+  place-items: center;
+  width: var(--space-6);
+  height: var(--space-6);
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: color-mix(in oklab, var(--alert-fg) 64%, transparent);
+  cursor: pointer;
+  transition: var(--transition-control);
+}
+.alert__close:hover {
+  background: color-mix(in oklab, var(--alert-fg) 9%, transparent);
+  color: var(--alert-fg);
+}
+.alert__close:active {
+  background: color-mix(in oklab, var(--alert-fg) 14%, transparent);
+}
+.alert__close:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}

package/src/components/composites/date-picker/DateField.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import './date-picker.css';
+import { useState } from 'react';
+import { Popover } from '../popover/Popover';
+import { FieldShell, FieldTrigger, type DateFieldBaseProps } from './field-shell';
+import { useControllable } from '../../internal/hooks/use-controllable';
+import { DtpPanel } from './calendar-panel';
+import { displayDay } from './date-utils';
+
+export interface DateFieldProps extends DateFieldBaseProps {
+  /** Controlled value, 'YYYY-MM-DD'. */
+  value?: string | null;
+  /** Uncontrolled initial value, 'YYYY-MM-DD'. Use instead of `value`. @default null */
+  defaultValue?: string | null;
+  /** Fires on each day pick (commit is live), with the picked 'YYYY-MM-DD'. */
+  onChange?: (value: string) => void;
+  /** Trigger text shown when no date is picked. @default 'Pick a date' */
+  placeholder?: string;
+  /** IANA timezone name (e.g. 'Europe/Riga') - display context only, shown with its GMT offset in the footer. */
+  timezone?: string;
+  /** Earliest pickable date, 'YYYY-MM-DD', inclusive. */
+  min?: string;
+  /** Latest pickable date, 'YYYY-MM-DD', inclusive. */
+  max?: string;
+}
+
+export function DateField({
+  value,
+  defaultValue = null,
+  onChange,
+  label,
+  placeholder = 'Pick a date',
+  timezone,
+  min,
+  max,
+  required = false,
+  invalid = false,
+  message,
+  disabled = false,
+  className = '',
+  htmlProps,
+  animation,
+}: DateFieldProps) {
+  const [val, commit] = useControllable(value, defaultValue, onChange);
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const trigger = <FieldTrigger display={displayDay(val)} placeholder={placeholder} disabled={disabled} />;
+
+  return (
+    <FieldShell
+      variant="dtf"
+      label={label}
+      required={required}
+      invalid={invalid}
+      message={message}
+      icon="calendar"
+      className={className}
+      htmlProps={htmlProps}
+    >
+      <Popover
+        trigger={trigger}
+        side="bottom"
+        align="start"
+        animation={animation}
+        open={pickerOpen}
+        onOpenChange={setPickerOpen}
+      >
+        <DtpPanel
+          val={val}
+          commit={commit}
+          close={() => setPickerOpen(false)}
+          min={min}
+          max={max}
+          timezone={timezone}
+          label={label}
+        />
+      </Popover>
+    </FieldShell>
+  );
+}