@indinno/digicode-ui 0.1.0

package/registry/components/empty-state.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+
+export interface EmptyStateProps {
+  icon?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  className?: string;
+}
+
+export function EmptyState({ icon, title, description, actions, className }: EmptyStateProps) {
+  return (
+    <div className={className ? `digicode-empty ${className}` : "digicode-empty"}>
+      {icon && <div className="digicode-empty__icon">{icon}</div>}
+      <h3 className="digicode-empty__title">{title}</h3>
+      {description && <p className="digicode-empty__description">{description}</p>}
+      {actions && <div className="digicode-empty__actions">{actions}</div>}
+    </div>
+  );
+}

package/registry/components/input.tsx

@@ -0,0 +1,28 @@
+import { forwardRef, type InputHTMLAttributes, type ReactNode } from "react";
+import { cn } from "../../lib/cn";
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  hint?: string;
+  error?: string;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  { className, id, label, hint, error, prefix, suffix, ...props },
+  ref
+) {
+  const inputId = id || props.name;
+  return (
+    <label className="digicode-field" htmlFor={inputId}>
+      {label && <span className="digicode-field__label">{label}</span>}
+      <span className={cn("digicode-input-wrap", error && "digicode-input-wrap--error")}>
+        {prefix && <span className="digicode-input__affix">{prefix}</span>}
+        <input ref={ref} id={inputId} className={cn("digicode-input", className)} aria-invalid={!!error || undefined} {...props} />
+        {suffix && <span className="digicode-input__affix">{suffix}</span>}
+      </span>
+      {error ? <span className="digicode-field__error">{error}</span> : hint && <span className="digicode-field__hint">{hint}</span>}
+    </label>
+  );
+});

package/registry/components/pagination.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+export interface PaginationProps {
+  page: number;
+  totalPages: number;
+  onPageChange?: (page: number) => void;
+  className?: string;
+}
+
+export function Pagination({ page, totalPages, onPageChange, className }: PaginationProps) {
+  const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
+  return (
+    <nav aria-label="Pagination" className={className ? `digicode-pagination ${className}` : "digicode-pagination"}>
+      <button type="button" className="digicode-pagination__item" disabled={page <= 1} onClick={() => onPageChange?.(page - 1)} aria-label="Previous page">‹</button>
+      {pages.map((value) => (
+        <button key={value} type="button" className="digicode-pagination__item" data-active={page === value} aria-current={page === value ? "page" : undefined} onClick={() => onPageChange?.(value)}>{value}</button>
+      ))}
+      <button type="button" className="digicode-pagination__item" disabled={page >= totalPages} onClick={() => onPageChange?.(page + 1)} aria-label="Next page">›</button>
+    </nav>
+  );
+}

package/registry/components/progress.tsx

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from "react";
+import { cn } from "../../lib/cn";
+
+export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+  value: number;
+  max?: number;
+  label?: string;
+}
+
+export function Progress({ className, value, max = 100, label = "Progress", ...props }: ProgressProps) {
+  const percent = Math.max(0, Math.min(100, (value / max) * 100));
+  return (
+    <div className={cn("digicode-progress", className)} role="progressbar" aria-label={label} aria-valuenow={value} aria-valuemin={0} aria-valuemax={max} {...props}>
+      <div className="digicode-progress__bar" style={{ width: `${percent}%` }} />
+    </div>
+  );
+}

package/registry/components/radio-group.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import type { InputHTMLAttributes } from "react";
+
+export interface RadioOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+export interface RadioGroupProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> {
+  name: string;
+  value?: string;
+  defaultValue?: string;
+  options: RadioOption[];
+  onValueChange?: (value: string) => void;
+}
+
+export function RadioGroup({ name, value, defaultValue, options, onValueChange, ...props }: RadioGroupProps) {
+  return (
+    <div className="digicode-radio-group" role="radiogroup">
+      {options.map((option) => (
+        <label className="digicode-checkline" key={option.value}>
+          <input
+            type="radio"
+            className="digicode-radio"
+            name={name}
+            value={option.value}
+            checked={value !== undefined ? value === option.value : undefined}
+            defaultChecked={value === undefined ? defaultValue === option.value : undefined}
+            disabled={option.disabled}
+            onChange={() => onValueChange?.(option.value)}
+            {...props}
+          />
+          <span>{option.label}</span>
+        </label>
+      ))}
+    </div>
+  );
+}

package/registry/components/select.tsx

@@ -0,0 +1,33 @@
+import { forwardRef, type SelectHTMLAttributes } from "react";
+import { cn } from "../../lib/cn";
+
+export interface SelectOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  label?: string;
+  hint?: string;
+  error?: string;
+  options?: SelectOption[];
+  placeholder?: string;
+}
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
+  { className, id, label, hint, error, options = [], placeholder, children, ...props },
+  ref
+) {
+  const selectId = id || props.name;
+  return (
+    <label className="digicode-field" htmlFor={selectId}>
+      {label && <span className="digicode-field__label">{label}</span>}
+      <select ref={ref} id={selectId} className={cn("digicode-select", className)} aria-invalid={!!error || undefined} {...props}>
+        {placeholder && <option value="">{placeholder}</option>}
+        {children || options.map((option) => <option key={option.value} value={option.value} disabled={option.disabled}>{option.label}</option>)}
+      </select>
+      {error ? <span className="digicode-field__error">{error}</span> : hint && <span className="digicode-field__hint">{hint}</span>}
+    </label>
+  );
+});

package/registry/components/separator.tsx

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+import { cn } from "../../lib/cn";
+
+export interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {
+  orientation?: "horizontal" | "vertical";
+}
+
+export function Separator({ className, orientation = "horizontal", ...props }: SeparatorProps) {
+  return <hr role="separator" aria-orientation={orientation} className={cn("digicode-separator", `digicode-separator--${orientation}`, className)} {...props} />;
+}

package/registry/components/skeleton.tsx

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from "react";
+import { cn } from "../../lib/cn";
+
+export function Skeleton({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div aria-hidden="true" className={cn("digicode-skeleton", className)} {...props} />;
+}

package/registry/components/spinner.tsx

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from "react";
+import { cn } from "../../lib/cn";
+
+export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+  size?: "sm" | "md" | "lg";
+  label?: string;
+}
+
+export function Spinner({ className, size = "md", label = "Loading", ...props }: SpinnerProps) {
+  return <span role="status" aria-label={label} className={cn("digicode-spinner", size !== "md" && `digicode-spinner--${size}`, className)} {...props} />;
+}

package/registry/components/stat-card.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import { cn } from "../../lib/cn";
+
+export interface StatCardProps {
+  label: ReactNode;
+  value: ReactNode;
+  icon?: ReactNode;
+  delta?: ReactNode;
+  trend?: "up" | "down" | "neutral";
+  className?: string;
+}
+
+export function StatCard({ label, value, icon, delta, trend = "neutral", className }: StatCardProps) {
+  return (
+    <div className={cn("digicode-stat", className)}>
+      <div className="digicode-stat__top"><span className="digicode-stat__label">{label}</span>{icon && <span className="digicode-stat__icon">{icon}</span>}</div>
+      <div className="digicode-stat__value">{value}</div>
+      {delta && <div className={cn("digicode-stat__delta", trend !== "neutral" && `digicode-stat__delta--${trend}`)}>{delta}</div>}
+    </div>
+  );
+}

package/registry/components/switch.tsx

@@ -0,0 +1,15 @@
+import { forwardRef, type InputHTMLAttributes, type ReactNode } from "react";
+import { cn } from "../../lib/cn";
+
+export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+  label?: ReactNode;
+}
+
+export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch({ className, label, ...props }, ref) {
+  return (
+    <label className="digicode-switch-wrap">
+      <input ref={ref} type="checkbox" role="switch" className={cn("digicode-switch", className)} {...props} />
+      {label && <span>{label}</span>}
+    </label>
+  );
+});

package/registry/components/table.tsx

@@ -0,0 +1,11 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { cn } from "../../lib/cn";
+
+export function Table({ className, ...props }: ComponentPropsWithoutRef<"table">) {
+  return <div className="digicode-table-wrap"><table className={cn("digicode-table", className)} {...props} /></div>;
+}
+export function TableHeader(props: ComponentPropsWithoutRef<"thead">) { return <thead {...props} />; }
+export function TableBody(props: ComponentPropsWithoutRef<"tbody">) { return <tbody {...props} />; }
+export function TableRow(props: ComponentPropsWithoutRef<"tr">) { return <tr {...props} />; }
+export function TableHead(props: ComponentPropsWithoutRef<"th">) { return <th {...props} />; }
+export function TableCell(props: ComponentPropsWithoutRef<"td">) { return <td {...props} />; }

package/registry/components/tabs.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useMemo, useState, type ReactNode } from "react";
+
+export interface TabItem {
+  value: string;
+  label: ReactNode;
+  content: ReactNode;
+  disabled?: boolean;
+}
+
+export interface TabsProps {
+  items: TabItem[];
+  defaultValue?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  className?: string;
+}
+
+export function Tabs({ items, defaultValue, value, onValueChange, className }: TabsProps) {
+  const first = useMemo(() => items.find((item) => !item.disabled)?.value ?? "", [items]);
+  const [internal, setInternal] = useState(defaultValue ?? first);
+  const active = value ?? internal;
+  const current = items.find((item) => item.value === active) ?? items[0];
+
+  function select(next: string) {
+    if (value === undefined) setInternal(next);
+    onValueChange?.(next);
+  }
+
+  return (
+    <div className={className ? `digicode-tabs ${className}` : "digicode-tabs"}>
+      <div className="digicode-tabs__list" role="tablist">
+        {items.map((item) => (
+          <button
+            type="button"
+            role="tab"
+            key={item.value}
+            disabled={item.disabled}
+            aria-selected={active === item.value}
+            data-active={active === item.value}
+            className="digicode-tabs__trigger"
+            onClick={() => select(item.value)}
+          >
+            {item.label}
+          </button>
+        ))}
+      </div>
+      <div className="digicode-tabs__panel" role="tabpanel">{current?.content}</div>
+    </div>
+  );
+}

package/registry/components/textarea.tsx

@@ -0,0 +1,22 @@
+import { forwardRef, type TextareaHTMLAttributes } from "react";
+import { cn } from "../../lib/cn";
+
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  hint?: string;
+  error?: string;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
+  { className, id, label, hint, error, ...props },
+  ref
+) {
+  const textareaId = id || props.name;
+  return (
+    <label className="digicode-field" htmlFor={textareaId}>
+      {label && <span className="digicode-field__label">{label}</span>}
+      <textarea ref={ref} id={textareaId} className={cn("digicode-textarea", className)} aria-invalid={!!error || undefined} {...props} />
+      {error ? <span className="digicode-field__error">{error}</span> : hint && <span className="digicode-field__hint">{hint}</span>}
+    </label>
+  );
+});

package/registry/components/tooltip.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+
+export interface TooltipProps {
+  content: ReactNode;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Tooltip({ content, children, className }: TooltipProps) {
+  return (
+    <span className={className ? `digicode-tooltip ${className}` : "digicode-tooltip"}>
+      {children}
+      <span role="tooltip" className="digicode-tooltip__content">{content}</span>
+    </span>
+  );
+}

package/registry/lib/cn.ts

@@ -0,0 +1,3 @@
+export function cn(...values: Array<string | false | null | undefined>) {
+  return values.filter(Boolean).join(" ");
+}

package/registry/registry.json

@@ -0,0 +1,32 @@
+{
+  "name": "DigiCode",
+  "style": "digicode",
+  "components": [
+    "accordion",
+    "alert",
+    "avatar",
+    "badge",
+    "breadcrumb",
+    "button",
+    "card",
+    "checkbox",
+    "dialog",
+    "drawer",
+    "dropdown-menu",
+    "empty-state",
+    "input",
+    "pagination",
+    "progress",
+    "radio-group",
+    "select",
+    "separator",
+    "skeleton",
+    "spinner",
+    "stat-card",
+    "switch",
+    "table",
+    "tabs",
+    "textarea",
+    "tooltip"
+  ]
+}

package/registry/styles/digicode.css

@@ -0,0 +1,253 @@
+:root {
+  --digicode-ink: #1c2f41;
+  --digicode-heading: #12212e;
+  --digicode-muted: #60707e;
+  --digicode-primary: #2474ad;
+  --digicode-primary-hover: #1f6699;
+  --digicode-primary-soft: #eef6fb;
+  --digicode-surface: #ffffff;
+  --digicode-surface-2: #f4f7f9;
+  --digicode-line: #e4eaee;
+  --digicode-line-strong: #ced9e0;
+  --digicode-success: #21986c;
+  --digicode-warning: #c98217;
+  --digicode-danger: #c34a4a;
+  --digicode-info: #2474ad;
+  --digicode-ring: rgba(36, 116, 173, 0.2);
+  --digicode-radius-sm: 8px;
+  --digicode-radius: 12px;
+  --digicode-radius-lg: 18px;
+  --digicode-shadow-sm: 0 1px 2px rgba(18, 33, 46, 0.07);
+  --digicode-shadow: 0 8px 24px rgba(18, 33, 46, 0.08);
+  --digicode-shadow-lg: 0 20px 60px rgba(18, 33, 46, 0.16);
+  --digicode-ease: cubic-bezier(0.19, 1, 0.22, 1);
+  --digicode-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+[data-digicode-theme="dark"] {
+  --digicode-ink: #e6eef4;
+  --digicode-heading: #f8fbfd;
+  --digicode-muted: #9babb8;
+  --digicode-primary: #5da4d1;
+  --digicode-primary-hover: #77b4da;
+  --digicode-primary-soft: #173247;
+  --digicode-surface: #0f1922;
+  --digicode-surface-2: #15232e;
+  --digicode-line: #253845;
+  --digicode-line-strong: #36505f;
+  --digicode-ring: rgba(93, 164, 209, 0.25);
+  --digicode-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --digicode-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+  --digicode-shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.38);
+}
+
+.digicode-button,
+.digicode-input,
+.digicode-textarea,
+.digicode-select,
+.digicode-checkbox,
+.digicode-radio,
+.digicode-switch,
+.digicode-badge,
+.digicode-card,
+.digicode-alert,
+.digicode-avatar,
+.digicode-tabs,
+.digicode-accordion,
+.digicode-dialog,
+.digicode-drawer,
+.digicode-dropdown,
+.digicode-tooltip,
+.digicode-breadcrumb,
+.digicode-pagination,
+.digicode-table,
+.digicode-empty,
+.digicode-stat {
+  font-family: var(--digicode-font);
+  box-sizing: border-box;
+}
+
+.digicode-button {
+  appearance: none;
+  border: 1px solid transparent;
+  border-radius: var(--digicode-radius);
+  min-height: 42px;
+  padding: 9px 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 9px;
+  font: 600 14px/1.2 var(--digicode-font);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: transform .18s var(--digicode-ease), background .18s, border-color .18s, box-shadow .18s, color .18s;
+}
+.digicode-button:hover { transform: translateY(-1px); }
+.digicode-button:active { transform: translateY(0); }
+.digicode-button:focus-visible,
+.digicode-input:focus-visible,
+.digicode-textarea:focus-visible,
+.digicode-select:focus-visible,
+.digicode-checkbox:focus-visible,
+.digicode-radio:focus-visible,
+.digicode-switch:focus-visible,
+.digicode-pagination__item:focus-visible {
+  outline: 3px solid var(--digicode-ring);
+  outline-offset: 2px;
+}
+.digicode-button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
+.digicode-button--primary { background: var(--digicode-ink); color: #fff; box-shadow: var(--digicode-shadow-sm); }
+.digicode-button--primary:hover { background: #284458; box-shadow: 0 7px 18px rgba(28,47,65,.16); }
+[data-digicode-theme="dark"] .digicode-button--primary { background: #e6eef4; color: #12212e; }
+[data-digicode-theme="dark"] .digicode-button--primary:hover { background: #fff; }
+.digicode-button--secondary { background: var(--digicode-primary); color: #fff; }
+.digicode-button--secondary:hover { background: var(--digicode-primary-hover); }
+.digicode-button--outline { background: var(--digicode-surface); color: var(--digicode-ink); border-color: var(--digicode-line-strong); }
+.digicode-button--outline:hover { border-color: var(--digicode-primary); color: var(--digicode-primary); }
+.digicode-button--ghost { background: transparent; color: var(--digicode-ink); }
+.digicode-button--ghost:hover { background: var(--digicode-surface-2); }
+.digicode-button--destructive { background: var(--digicode-danger); color: #fff; }
+.digicode-button--link { padding-inline: 0; min-height: auto; background: transparent; color: var(--digicode-primary); border-radius: 0; }
+.digicode-button--sm { min-height: 34px; padding: 7px 12px; font-size: 12px; border-radius: 9px; }
+.digicode-button--lg { min-height: 50px; padding: 12px 22px; font-size: 15px; }
+.digicode-button--icon { width: 42px; padding: 0; }
+.digicode-button__spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: digicode-spin .7s linear infinite; }
+@keyframes digicode-spin { to { transform: rotate(360deg); } }
+
+.digicode-field { display: grid; gap: 7px; font-family: var(--digicode-font); }
+.digicode-field__label { color: var(--digicode-heading); font-size: 13px; font-weight: 650; }
+.digicode-field__hint { color: var(--digicode-muted); font-size: 12px; line-height: 1.45; }
+.digicode-field__error { color: var(--digicode-danger); font-size: 12px; line-height: 1.45; }
+.digicode-input-wrap { display: flex; align-items: center; gap: 8px; min-height: 44px; border: 1px solid var(--digicode-line); border-radius: var(--digicode-radius); background: var(--digicode-surface); color: var(--digicode-ink); padding-inline: 12px; transition: border-color .18s, box-shadow .18s, background .18s; }
+.digicode-input-wrap:focus-within { border-color: var(--digicode-primary); box-shadow: 0 0 0 3px var(--digicode-ring); }
+.digicode-input-wrap--error { border-color: var(--digicode-danger); }
+.digicode-input { width: 100%; min-width: 0; border: 0; outline: 0; color: inherit; background: transparent; padding: 10px 0; font: 400 14px/1.4 var(--digicode-font); }
+.digicode-input::placeholder, .digicode-textarea::placeholder { color: #93a0aa; }
+.digicode-input__affix { display: inline-flex; align-items: center; color: var(--digicode-muted); font-size: 13px; }
+.digicode-textarea { width: 100%; min-height: 112px; resize: vertical; border: 1px solid var(--digicode-line); border-radius: var(--digicode-radius); background: var(--digicode-surface); color: var(--digicode-ink); padding: 11px 12px; font: 400 14px/1.55 var(--digicode-font); transition: border-color .18s, box-shadow .18s; }
+.digicode-textarea:focus { outline: 0; border-color: var(--digicode-primary); box-shadow: 0 0 0 3px var(--digicode-ring); }
+.digicode-select { width: 100%; min-height: 44px; border: 1px solid var(--digicode-line); border-radius: var(--digicode-radius); background: var(--digicode-surface); color: var(--digicode-ink); padding: 0 36px 0 12px; font: 500 14px var(--digicode-font); }
+
+.digicode-checkline { display: inline-flex; align-items: flex-start; gap: 10px; color: var(--digicode-ink); font: 500 14px/1.45 var(--digicode-font); cursor: pointer; }
+.digicode-checkbox, .digicode-radio { width: 18px; height: 18px; flex: 0 0 18px; margin: 1px 0 0; accent-color: var(--digicode-primary); cursor: pointer; }
+.digicode-radio-group { display: grid; gap: 10px; }
+.digicode-switch-wrap { display: inline-flex; align-items: center; gap: 10px; color: var(--digicode-ink); font: 500 14px var(--digicode-font); cursor: pointer; }
+.digicode-switch { position: relative; width: 42px; height: 24px; flex: 0 0 auto; appearance: none; border: 1px solid var(--digicode-line-strong); border-radius: 999px; background: #cfd8de; cursor: pointer; transition: background .2s, border-color .2s; }
+.digicode-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); transition: transform .2s var(--digicode-ease); }
+.digicode-switch:checked { background: var(--digicode-primary); border-color: var(--digicode-primary); }
+.digicode-switch:checked::after { transform: translateX(18px); }
+
+.digicode-badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; min-height: 24px; padding: 3px 9px; border-radius: 999px; background: var(--digicode-surface-2); color: var(--digicode-ink); border: 1px solid var(--digicode-line); font: 650 11px/1 var(--digicode-font); }
+.digicode-badge--primary { color: var(--digicode-primary); background: var(--digicode-primary-soft); border-color: transparent; }
+.digicode-badge--success { color: var(--digicode-success); background: rgba(33,152,108,.1); border-color: transparent; }
+.digicode-badge--warning { color: var(--digicode-warning); background: rgba(201,130,23,.11); border-color: transparent; }
+.digicode-badge--danger { color: var(--digicode-danger); background: rgba(195,74,74,.1); border-color: transparent; }
+
+.digicode-card { border: 1px solid var(--digicode-line); border-radius: var(--digicode-radius-lg); background: var(--digicode-surface); color: var(--digicode-ink); box-shadow: var(--digicode-shadow-sm); overflow: hidden; }
+.digicode-card--elevated { box-shadow: var(--digicode-shadow); }
+.digicode-card__header, .digicode-card__content, .digicode-card__footer { padding: 20px; }
+.digicode-card__header { display: grid; gap: 6px; }
+.digicode-card__content { padding-top: 0; }
+.digicode-card__footer { border-top: 1px solid var(--digicode-line); display: flex; align-items: center; gap: 10px; }
+.digicode-card__title { margin: 0; color: var(--digicode-heading); font: 650 17px/1.35 var(--digicode-font); }
+.digicode-card__description { margin: 0; color: var(--digicode-muted); font: 400 13px/1.55 var(--digicode-font); }
+
+.digicode-alert { display: flex; gap: 12px; border: 1px solid var(--digicode-line); border-radius: var(--digicode-radius); padding: 14px 15px; background: var(--digicode-surface); color: var(--digicode-ink); }
+.digicode-alert--info { border-color: rgba(36,116,173,.25); background: rgba(36,116,173,.06); }
+.digicode-alert--success { border-color: rgba(33,152,108,.25); background: rgba(33,152,108,.06); }
+.digicode-alert--warning { border-color: rgba(201,130,23,.25); background: rgba(201,130,23,.06); }
+.digicode-alert--danger { border-color: rgba(195,74,74,.25); background: rgba(195,74,74,.06); }
+.digicode-alert__icon { margin-top: 2px; flex: 0 0 auto; }
+.digicode-alert__title { margin: 0 0 3px; font: 650 13px/1.4 var(--digicode-font); }
+.digicode-alert__description { margin: 0; color: var(--digicode-muted); font: 400 13px/1.5 var(--digicode-font); }
+
+.digicode-avatar { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background: var(--digicode-primary-soft); color: var(--digicode-primary); font: 700 13px var(--digicode-font); flex: 0 0 auto; }
+.digicode-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.digicode-avatar--sm { width: 30px; height: 30px; }
+.digicode-avatar--md { width: 40px; height: 40px; }
+.digicode-avatar--lg { width: 52px; height: 52px; font-size: 16px; }
+
+.digicode-spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid var(--digicode-line); border-top-color: var(--digicode-primary); border-radius: 50%; animation: digicode-spin .75s linear infinite; }
+.digicode-spinner--sm { width: 16px; height: 16px; border-width: 2px; }
+.digicode-spinner--lg { width: 34px; height: 34px; border-width: 4px; }
+.digicode-skeleton { display: block; border-radius: var(--digicode-radius-sm); background: linear-gradient(90deg, var(--digicode-surface-2) 25%, var(--digicode-line) 37%, var(--digicode-surface-2) 63%); background-size: 400% 100%; animation: digicode-shimmer 1.35s ease infinite; }
+@keyframes digicode-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
+.digicode-progress { width: 100%; height: 8px; overflow: hidden; border-radius: 999px; background: var(--digicode-surface-2); }
+.digicode-progress__bar { height: 100%; border-radius: inherit; background: var(--digicode-primary); transition: width .3s var(--digicode-ease); }
+.digicode-separator { border: 0; margin: 0; background: var(--digicode-line); }
+.digicode-separator--horizontal { width: 100%; height: 1px; }
+.digicode-separator--vertical { width: 1px; height: 100%; min-height: 18px; }
+
+.digicode-tabs__list { display: inline-flex; align-items: center; gap: 3px; padding: 4px; background: var(--digicode-surface-2); border: 1px solid var(--digicode-line); border-radius: var(--digicode-radius); }
+.digicode-tabs__trigger { appearance: none; border: 0; border-radius: 9px; background: transparent; color: var(--digicode-muted); padding: 8px 13px; font: 600 13px var(--digicode-font); cursor: pointer; }
+.digicode-tabs__trigger[data-active="true"] { color: var(--digicode-heading); background: var(--digicode-surface); box-shadow: var(--digicode-shadow-sm); }
+.digicode-tabs__panel { padding-top: 16px; color: var(--digicode-ink); }
+
+.digicode-accordion { border: 1px solid var(--digicode-line); border-radius: var(--digicode-radius); background: var(--digicode-surface); overflow: hidden; }
+.digicode-accordion__item + .digicode-accordion__item { border-top: 1px solid var(--digicode-line); }
+.digicode-accordion__trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 16px; border: 0; background: transparent; color: var(--digicode-heading); text-align: left; font: 650 14px var(--digicode-font); cursor: pointer; }
+.digicode-accordion__chevron { transition: transform .2s; }
+.digicode-accordion__trigger[aria-expanded="true"] .digicode-accordion__chevron { transform: rotate(180deg); }
+.digicode-accordion__content { padding: 0 16px 16px; color: var(--digicode-muted); font: 400 13px/1.6 var(--digicode-font); }
+
+.digicode-dialog-native { width: min(520px, calc(100vw - 32px)); max-width: none; border: 1px solid var(--digicode-line); border-radius: 20px; padding: 0; background: var(--digicode-surface); color: var(--digicode-ink); box-shadow: var(--digicode-shadow-lg); }
+.digicode-dialog-native::backdrop { background: rgba(10, 22, 31, .56); backdrop-filter: blur(3px); }
+.digicode-dialog__header, .digicode-dialog__body, .digicode-dialog__footer { padding: 20px; }
+.digicode-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--digicode-line); }
+.digicode-dialog__title { margin: 0; color: var(--digicode-heading); font: 650 18px/1.4 var(--digicode-font); }
+.digicode-dialog__description { margin: 5px 0 0; color: var(--digicode-muted); font: 400 13px/1.55 var(--digicode-font); }
+.digicode-dialog__close { appearance: none; border: 0; border-radius: 8px; width: 32px; height: 32px; background: var(--digicode-surface-2); color: var(--digicode-muted); cursor: pointer; }
+.digicode-dialog__footer { border-top: 1px solid var(--digicode-line); display: flex; justify-content: flex-end; gap: 9px; }
+
+.digicode-drawer-native { margin: 0 0 0 auto; width: min(430px, 92vw); height: 100dvh; max-height: none; border: 0; border-left: 1px solid var(--digicode-line); border-radius: 20px 0 0 20px; padding: 0; background: var(--digicode-surface); color: var(--digicode-ink); box-shadow: var(--digicode-shadow-lg); }
+.digicode-drawer-native::backdrop { background: rgba(10,22,31,.48); }
+.digicode-drawer__header, .digicode-drawer__body, .digicode-drawer__footer { padding: 20px; }
+.digicode-drawer__header { border-bottom: 1px solid var(--digicode-line); display: flex; justify-content: space-between; gap: 16px; }
+.digicode-drawer__body { min-height: calc(100dvh - 150px); }
+.digicode-drawer__footer { border-top: 1px solid var(--digicode-line); }
+
+.digicode-dropdown { position: relative; display: inline-block; }
+.digicode-dropdown > summary { list-style: none; }
+.digicode-dropdown > summary::-webkit-details-marker { display: none; }
+.digicode-dropdown__menu { position: absolute; z-index: 40; top: calc(100% + 7px); right: 0; width: 200px; padding: 6px; border: 1px solid var(--digicode-line); border-radius: var(--digicode-radius); background: var(--digicode-surface); box-shadow: var(--digicode-shadow); }
+.digicode-dropdown__item { width: 100%; display: flex; align-items: center; gap: 9px; border: 0; border-radius: 8px; padding: 9px 10px; background: transparent; color: var(--digicode-ink); text-align: left; font: 500 13px var(--digicode-font); cursor: pointer; }
+.digicode-dropdown__item:hover { background: var(--digicode-surface-2); }
+.digicode-dropdown__item--danger { color: var(--digicode-danger); }
+.digicode-dropdown__separator { height: 1px; margin: 5px 2px; background: var(--digicode-line); }
+.digicode-dropdown__label { padding: 6px 10px; color: var(--digicode-muted); font: 650 11px var(--digicode-font); text-transform: uppercase; letter-spacing: .04em; }
+
+.digicode-tooltip { position: relative; display: inline-flex; }
+.digicode-tooltip__content { pointer-events: none; position: absolute; z-index: 60; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(3px); opacity: 0; min-width: max-content; max-width: 240px; padding: 6px 8px; border-radius: 7px; background: var(--digicode-heading); color: #fff; font: 500 11px/1.35 var(--digicode-font); transition: opacity .15s, transform .15s; }
+.digicode-tooltip:hover .digicode-tooltip__content, .digicode-tooltip:focus-within .digicode-tooltip__content { opacity: 1; transform: translateX(-50%) translateY(0); }
+
+.digicode-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: var(--digicode-muted); font: 500 12px var(--digicode-font); }
+.digicode-breadcrumb a { color: inherit; text-decoration: none; }
+.digicode-breadcrumb a:hover { color: var(--digicode-primary); }
+.digicode-breadcrumb__current { color: var(--digicode-heading); }
+.digicode-breadcrumb__sep { color: #a0aab1; }
+
+.digicode-pagination { display: flex; align-items: center; gap: 5px; }
+.digicode-pagination__item { min-width: 36px; height: 36px; border: 1px solid var(--digicode-line); border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--digicode-surface); color: var(--digicode-ink); font: 600 12px var(--digicode-font); cursor: pointer; }
+.digicode-pagination__item:hover { border-color: var(--digicode-primary); color: var(--digicode-primary); }
+.digicode-pagination__item[data-active="true"] { background: var(--digicode-ink); color: #fff; border-color: var(--digicode-ink); }
+
+.digicode-table-wrap { overflow-x: auto; border: 1px solid var(--digicode-line); border-radius: var(--digicode-radius); background: var(--digicode-surface); }
+.digicode-table { width: 100%; border-collapse: collapse; color: var(--digicode-ink); font: 400 13px/1.5 var(--digicode-font); }
+.digicode-table th { padding: 11px 14px; background: var(--digicode-surface-2); color: var(--digicode-muted); text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .035em; }
+.digicode-table td { padding: 13px 14px; border-top: 1px solid var(--digicode-line); }
+.digicode-table tbody tr:hover { background: color-mix(in srgb, var(--digicode-surface-2) 60%, transparent); }
+
+.digicode-empty { display: grid; place-items: center; text-align: center; gap: 8px; padding: 34px 24px; border: 1px dashed var(--digicode-line-strong); border-radius: var(--digicode-radius-lg); background: var(--digicode-surface); }
+.digicode-empty__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: var(--digicode-primary-soft); color: var(--digicode-primary); }
+.digicode-empty__title { margin: 4px 0 0; color: var(--digicode-heading); font: 650 15px var(--digicode-font); }
+.digicode-empty__description { margin: 0; max-width: 420px; color: var(--digicode-muted); font: 400 13px/1.55 var(--digicode-font); }
+.digicode-empty__actions { margin-top: 6px; display: flex; gap: 8px; }
+
+.digicode-stat { display: grid; gap: 9px; padding: 18px; border: 1px solid var(--digicode-line); border-radius: var(--digicode-radius-lg); background: var(--digicode-surface); box-shadow: var(--digicode-shadow-sm); }
+.digicode-stat__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.digicode-stat__label { color: var(--digicode-muted); font: 600 12px var(--digicode-font); }
+.digicode-stat__icon { color: var(--digicode-primary); }
+.digicode-stat__value { color: var(--digicode-heading); font: 700 28px/1 var(--digicode-font); letter-spacing: -.025em; }
+.digicode-stat__delta { color: var(--digicode-muted); font: 500 11px var(--digicode-font); }
+.digicode-stat__delta--up { color: var(--digicode-success); }
+.digicode-stat__delta--down { color: var(--digicode-danger); }