apple-liquid-glass-react-ui-kit 0.1.0

package/dist/index.mjs

@@ -0,0 +1,615 @@
+// src/design-system/tokens/colors.ts
+var colors = {
+  primary: "#0066A1",
+  secondary: "#00B2A9",
+  text: {
+    primary: "#111827",
+    secondary: "#6B7280"
+  },
+  surface: {
+    // Liquid Glass surfaces (light)
+    base: "rgba(255,255,255,0.72)",
+    strong: "rgba(255,255,255,0.88)",
+    // Liquid Glass surfaces (dark)
+    dark: "rgba(20,20,25,0.65)"
+  },
+  border: {
+    glass: "rgba(255,255,255,0.35)"
+  },
+  status: {
+    info: "#0EA5E9",
+    success: "#22C55E",
+    warning: "#F59E0B",
+    error: "#EF4444"
+  }
+};
+
+// src/design-system/tokens/spacing.ts
+var spacing = {
+  0: "0px",
+  1: "4px",
+  2: "8px",
+  3: "12px",
+  4: "16px",
+  6: "24px",
+  8: "32px",
+  12: "48px"
+};
+
+// src/design-system/tokens/typography.ts
+var typography = {
+  fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji'",
+  display: { fontSize: "40px", lineHeight: "48px", fontWeight: 700 },
+  h1: { fontSize: "32px", lineHeight: "40px", fontWeight: 700 },
+  h2: { fontSize: "24px", lineHeight: "32px", fontWeight: 600 },
+  body: { fontSize: "16px", lineHeight: "24px", fontWeight: 400 },
+  caption: { fontSize: "13px", lineHeight: "18px", fontWeight: 400 }
+};
+
+// src/design-system/tokens/radius.ts
+var radius = {
+  sm: "8px",
+  md: "12px",
+  lg: "20px",
+  xl: "28px",
+  full: "999px"
+};
+
+// src/design-system/tokens/shadows.ts
+var shadows = {
+  glass: "0 8px 32px rgba(0,0,0,0.12)",
+  floating: "0 16px 48px rgba(0,0,0,0.18)",
+  modal: "0 24px 64px rgba(0,0,0,0.22)"
+};
+
+// src/design-system/components/atoms/Button.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var sizeStyles = {
+  sm: { padding: `${spacing[1]} ${spacing[2]}`, fontSize: "14px", lineHeight: "20px" },
+  md: { padding: `${spacing[2]} ${spacing[4]}`, fontSize: typography.body.fontSize, lineHeight: typography.body.lineHeight },
+  lg: { padding: `${spacing[3]} ${spacing[6]}`, fontSize: "16px", lineHeight: "24px" }
+};
+var Button = React.forwardRef(function Button2({ variant = "primary", size = "md", leftIcon, rightIcon, style, children, disabled, ...rest }, ref) {
+  const base = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: spacing[2],
+    borderRadius: radius.full,
+    border: "1px solid transparent",
+    cursor: disabled ? "not-allowed" : "pointer",
+    userSelect: "none",
+    fontFamily: typography.fontFamily,
+    fontWeight: 600,
+    transition: "transform 120ms ease, background 180ms ease, box-shadow 180ms ease, border-color 180ms ease, color 180ms ease",
+    transform: "translateZ(0)",
+    outline: "none",
+    WebkitTapHighlightColor: "transparent",
+    ...sizeStyles[size]
+  };
+  const variants = {
+    primary: {
+      background: colors.primary,
+      color: "white",
+      boxShadow: shadows.glass
+    },
+    secondary: {
+      background: colors.secondary,
+      color: "white",
+      boxShadow: shadows.glass
+    },
+    ghost: {
+      background: "transparent",
+      color: colors.text.primary,
+      borderColor: "rgba(17,24,39,0.12)"
+    },
+    glass: {
+      background: colors.surface.base,
+      color: colors.text.primary,
+      borderColor: colors.border.glass,
+      boxShadow: shadows.glass,
+      backdropFilter: "blur(18px)",
+      WebkitBackdropFilter: "blur(18px)"
+    },
+    danger: {
+      background: colors.status.error,
+      color: "white",
+      boxShadow: shadows.glass
+    }
+  };
+  const merged = {
+    ...base,
+    ...variants[variant],
+    opacity: disabled ? 0.6 : 1,
+    ...style
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      style: merged,
+      disabled,
+      onMouseDown: (e) => {
+        if (disabled) return;
+        e.currentTarget.style.transform = "scale(0.98)";
+        rest.onMouseDown?.(e);
+      },
+      onMouseUp: (e) => {
+        e.currentTarget.style.transform = "translateZ(0)";
+        rest.onMouseUp?.(e);
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.transform = "translateZ(0)";
+        rest.onMouseLeave?.(e);
+      },
+      onFocus: (e) => {
+        e.currentTarget.style.boxShadow = `0 0 0 4px rgba(0,102,161,0.18), ${variants[variant].boxShadow ?? ""}`;
+        rest.onFocus?.(e);
+      },
+      onBlur: (e) => {
+        e.currentTarget.style.boxShadow = String(variants[variant].boxShadow ?? "none");
+        rest.onBlur?.(e);
+      },
+      ...rest,
+      children: [
+        leftIcon,
+        /* @__PURE__ */ jsx("span", { children }),
+        rightIcon
+      ]
+    }
+  );
+});
+
+// src/design-system/components/atoms/Input.tsx
+import * as React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Input = React2.forwardRef(function Input2({ state = "default", style, disabled, ...rest }, ref) {
+  const isDisabled = disabled || state === "disabled";
+  const isError = state === "error";
+  const base = {
+    width: "100%",
+    padding: `${spacing[2]} ${spacing[3]}`,
+    borderRadius: radius.lg,
+    border: `1px solid ${isError ? "rgba(239,68,68,0.55)" : "rgba(17,24,39,0.12)"}`,
+    background: colors.surface.strong,
+    color: colors.text.primary,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.body.fontSize,
+    lineHeight: typography.body.lineHeight,
+    outline: "none",
+    boxShadow: "none",
+    backdropFilter: "blur(18px)",
+    WebkitBackdropFilter: "blur(18px)",
+    transition: "box-shadow 160ms ease, border-color 160ms ease, background 160ms ease",
+    opacity: isDisabled ? 0.6 : 1
+  };
+  return /* @__PURE__ */ jsx2(
+    "input",
+    {
+      ref,
+      disabled: isDisabled,
+      style: {
+        ...base,
+        ...state === "focused" ? { boxShadow: "0 0 0 4px rgba(0,102,161,0.18)", borderColor: "rgba(0,102,161,0.55)" } : null,
+        ...style
+      },
+      ...rest
+    }
+  );
+});
+
+// src/design-system/components/atoms/Badge.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Badge({ variant = "info", children, style }) {
+  const bg = {
+    info: "rgba(14,165,233,0.16)",
+    success: "rgba(34,197,94,0.16)",
+    warning: "rgba(245,158,11,0.16)",
+    error: "rgba(239,68,68,0.16)"
+  }[variant];
+  const fg = colors.status[variant];
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        padding: `2px ${spacing[2]}`,
+        borderRadius: radius.full,
+        background: bg,
+        color: fg,
+        fontFamily: typography.fontFamily,
+        fontSize: typography.caption.fontSize,
+        lineHeight: typography.caption.lineHeight,
+        border: "1px solid rgba(255,255,255,0.35)",
+        backdropFilter: "blur(12px)",
+        WebkitBackdropFilter: "blur(12px)",
+        ...style
+      },
+      children
+    }
+  );
+}
+
+// src/design-system/components/atoms/Avatar.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Avatar({ src, alt = "Avatar", initials, size = 36, style }) {
+  const base = {
+    width: size,
+    height: size,
+    borderRadius: radius.full,
+    overflow: "hidden",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: "rgba(17,24,39,0.08)",
+    color: "rgba(17,24,39,0.75)",
+    fontFamily: typography.fontFamily,
+    fontWeight: 600,
+    fontSize: Math.max(12, Math.round(size * 0.36)),
+    lineHeight: 1,
+    ...style
+  };
+  if (src) {
+    return /* @__PURE__ */ jsx4("img", { src, alt, style: { ...base, objectFit: "cover" } });
+  }
+  return /* @__PURE__ */ jsx4("span", { style: base, children: initials ?? "" });
+}
+
+// src/design-system/components/atoms/IconButton.tsx
+import * as React3 from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var IconButton = React3.forwardRef(function IconButton2({ variant = "default", icon, size = 40, style, ...rest }, ref) {
+  const variants = {
+    default: { background: "rgba(17,24,39,0.06)", border: "1px solid rgba(17,24,39,0.10)" },
+    glass: {
+      background: colors.surface.base,
+      border: `1px solid ${colors.border.glass}`,
+      boxShadow: shadows.glass,
+      backdropFilter: "blur(18px)",
+      WebkitBackdropFilter: "blur(18px)"
+    },
+    active: { background: "rgba(0,102,161,0.14)", border: "1px solid rgba(0,102,161,0.35)" }
+  };
+  return /* @__PURE__ */ jsx5(
+    "button",
+    {
+      ref,
+      style: {
+        width: size,
+        height: size,
+        borderRadius: radius.full,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: "pointer",
+        outline: "none",
+        transition: "transform 120ms ease, box-shadow 180ms ease, background 180ms ease",
+        ...variants[variant],
+        ...style
+      },
+      ...rest,
+      children: icon
+    }
+  );
+});
+
+// src/design-system/components/molecules/GlassCard.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function GlassCard({ tone = "light", strength = "base", floating = false, style, ...rest }) {
+  const bg = tone === "dark" ? colors.surface.dark : strength === "strong" ? colors.surface.strong : colors.surface.base;
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      style: {
+        background: bg,
+        border: `1px solid ${colors.border.glass}`,
+        borderRadius: radius.xl,
+        boxShadow: floating ? shadows.floating : shadows.glass,
+        backdropFilter: "blur(18px)",
+        WebkitBackdropFilter: "blur(18px)",
+        padding: spacing[4],
+        transform: "translateZ(0)",
+        ...style
+      },
+      ...rest
+    }
+  );
+}
+
+// src/design-system/components/molecules/StatCard.tsx
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+function StatCard({ label, value, delta, icon, tone = "light", style }) {
+  return /* @__PURE__ */ jsxs2(GlassCard, { tone, strength: "strong", style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: spacing[4], ...style }, children: [
+    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
+      /* @__PURE__ */ jsx7("div", { style: { fontFamily: typography.fontFamily, fontSize: typography.caption.fontSize, lineHeight: typography.caption.lineHeight, color: colors.text.secondary }, children: label }),
+      /* @__PURE__ */ jsx7("div", { style: { fontFamily: typography.fontFamily, fontSize: typography.h1.fontSize, lineHeight: typography.h1.lineHeight, fontWeight: typography.h1.fontWeight, color: colors.text.primary }, children: value }),
+      delta ? /* @__PURE__ */ jsx7("div", { style: { fontFamily: typography.fontFamily, fontSize: typography.caption.fontSize, lineHeight: typography.caption.lineHeight, color: colors.text.secondary }, children: delta }) : null
+    ] }),
+    icon ? /* @__PURE__ */ jsx7("div", { "aria-hidden": true, style: { opacity: 0.85 }, children: icon }) : null
+  ] });
+}
+
+// src/design-system/components/molecules/SearchBar.tsx
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+function SearchBar({ value, onChange, placeholder = "Search", onClear, leadingIcon, clearIcon }) {
+  return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: spacing[2] }, children: [
+    leadingIcon ? /* @__PURE__ */ jsx8("span", { "aria-hidden": true, style: { opacity: 0.8 }, children: leadingIcon }) : null,
+    /* @__PURE__ */ jsx8(
+      Input,
+      {
+        value,
+        onChange: (e) => onChange(e.target.value),
+        placeholder,
+        state: value ? "focused" : "default"
+      }
+    ),
+    onClear ? /* @__PURE__ */ jsx8(
+      IconButton,
+      {
+        "aria-label": "Clear",
+        variant: "glass",
+        icon: clearIcon ?? /* @__PURE__ */ jsx8("span", { style: { fontWeight: 700 }, children: "\xD7" }),
+        onClick: onClear
+      }
+    ) : null
+  ] });
+}
+
+// src/design-system/components/molecules/FormField.tsx
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+function FormField({ label, hint, error, children }) {
+  return /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: spacing[1] }, children: [
+    /* @__PURE__ */ jsx9("label", { style: { fontFamily: typography.fontFamily, fontSize: typography.caption.fontSize, lineHeight: typography.caption.lineHeight, color: colors.text.secondary }, children: label }),
+    children,
+    error ? /* @__PURE__ */ jsx9("div", { style: { fontFamily: typography.fontFamily, fontSize: typography.caption.fontSize, lineHeight: typography.caption.lineHeight, color: colors.status.error }, children: error }) : hint ? /* @__PURE__ */ jsx9("div", { style: { fontFamily: typography.fontFamily, fontSize: typography.caption.fontSize, lineHeight: typography.caption.lineHeight, color: colors.text.secondary }, children: hint }) : null
+  ] });
+}
+
+// src/design-system/components/molecules/Toast.tsx
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+function Toast({ title, message, variant = "info", onDismiss }) {
+  const accent = colors.status[variant];
+  return /* @__PURE__ */ jsxs5(
+    GlassCard,
+    {
+      strength: "strong",
+      floating: true,
+      role: "status",
+      "aria-live": "polite",
+      style: {
+        padding: spacing[3],
+        display: "flex",
+        gap: spacing[3],
+        alignItems: "flex-start",
+        borderLeft: `4px solid ${accent}`,
+        maxWidth: 420
+      },
+      children: [
+        /* @__PURE__ */ jsxs5("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 4 }, children: [
+          /* @__PURE__ */ jsx10("div", { style: { fontFamily: typography.fontFamily, fontWeight: 700, color: colors.text.primary }, children: title }),
+          message ? /* @__PURE__ */ jsx10("div", { style: { fontFamily: typography.fontFamily, color: colors.text.secondary, fontSize: typography.body.fontSize, lineHeight: typography.body.lineHeight }, children: message }) : null
+        ] }),
+        onDismiss ? /* @__PURE__ */ jsx10(
+          "button",
+          {
+            "aria-label": "Dismiss",
+            onClick: onDismiss,
+            style: {
+              background: "transparent",
+              border: "none",
+              cursor: "pointer",
+              fontSize: 18,
+              lineHeight: "18px",
+              padding: 0,
+              color: colors.text.secondary
+            },
+            children: "\xD7"
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/design-system/components/organisms/AppShell.tsx
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+function AppShell({ sidebar, header, children }) {
+  return /* @__PURE__ */ jsxs6("div", { style: { display: "grid", gridTemplateColumns: sidebar ? "280px 1fr" : "1fr", minHeight: "100vh", gap: spacing[4], padding: spacing[4] }, children: [
+    sidebar ? /* @__PURE__ */ jsx11(GlassCard, { strength: "strong", style: { padding: spacing[4] }, children: sidebar }) : null,
+    /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: spacing[4] }, children: [
+      header ? /* @__PURE__ */ jsx11("div", { children: header }) : null,
+      /* @__PURE__ */ jsx11("div", { style: { flex: 1 }, children })
+    ] })
+  ] });
+}
+
+// src/design-system/components/organisms/DashboardGrid.tsx
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+function DashboardGrid({ stats, main, side }) {
+  return /* @__PURE__ */ jsxs7("div", { style: { display: "flex", flexDirection: "column", gap: spacing[4] }, children: [
+    stats ? /* @__PURE__ */ jsx12("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: spacing[4] }, children: stats }) : null,
+    /* @__PURE__ */ jsxs7("div", { style: { display: "grid", gridTemplateColumns: side ? "1.4fr 0.6fr" : "1fr", gap: spacing[4], alignItems: "start" }, children: [
+      main ? /* @__PURE__ */ jsx12("div", { children: main }) : null,
+      side ? /* @__PURE__ */ jsx12("div", { children: side }) : null
+    ] })
+  ] });
+}
+
+// src/design-system/components/organisms/Modal.tsx
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+function Modal({ open, title, children, footer, onClose }) {
+  if (!open) return null;
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      role: "dialog",
+      "aria-modal": "true",
+      style: {
+        position: "fixed",
+        inset: 0,
+        display: "grid",
+        placeItems: "center",
+        padding: spacing[4],
+        background: "rgba(17,24,39,0.35)",
+        backdropFilter: "blur(8px)",
+        WebkitBackdropFilter: "blur(8px)",
+        zIndex: 50
+      },
+      onMouseDown: (e) => {
+        if (e.target === e.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ jsxs8(
+        GlassCard,
+        {
+          strength: "strong",
+          floating: true,
+          style: {
+            width: "min(720px, 100%)",
+            borderRadius: radius.xl,
+            boxShadow: shadows.modal,
+            padding: spacing[4]
+          },
+          children: [
+            title ? /* @__PURE__ */ jsx13("div", { style: { marginBottom: spacing[3] }, children: title }) : null,
+            /* @__PURE__ */ jsx13("div", { style: { marginBottom: footer ? spacing[4] : 0 }, children }),
+            footer ? /* @__PURE__ */ jsx13("div", { children: footer }) : null
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/design-system/components/organisms/DataTable.tsx
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+function DataTable({ columns, rows, rowKey, emptyState }) {
+  return /* @__PURE__ */ jsx14(GlassCard, { strength: "strong", style: { padding: spacing[3] }, children: /* @__PURE__ */ jsx14("div", { style: { overflowX: "auto" }, children: /* @__PURE__ */ jsxs9("table", { style: { width: "100%", borderCollapse: "separate", borderSpacing: 0 }, children: [
+    /* @__PURE__ */ jsx14("thead", { children: /* @__PURE__ */ jsx14("tr", { children: columns.map((c) => /* @__PURE__ */ jsx14(
+      "th",
+      {
+        style: {
+          textAlign: "left",
+          fontFamily: typography.fontFamily,
+          fontSize: typography.caption.fontSize,
+          lineHeight: typography.caption.lineHeight,
+          color: colors.text.secondary,
+          fontWeight: 700,
+          padding: `${spacing[2]} ${spacing[2]}`,
+          borderBottom: "1px solid rgba(255,255,255,0.35)",
+          width: c.width,
+          whiteSpace: "nowrap"
+        },
+        children: c.header
+      },
+      c.key
+    )) }) }),
+    /* @__PURE__ */ jsx14("tbody", { children: rows.length === 0 ? /* @__PURE__ */ jsx14("tr", { children: /* @__PURE__ */ jsx14("td", { colSpan: columns.length, style: { padding: spacing[4] }, children: emptyState ?? /* @__PURE__ */ jsx14("div", { style: { fontFamily: typography.fontFamily, color: colors.text.secondary }, children: "No results" }) }) }) : rows.map((r) => /* @__PURE__ */ jsx14("tr", { children: columns.map((c) => /* @__PURE__ */ jsx14(
+      "td",
+      {
+        style: {
+          padding: `${spacing[2]} ${spacing[2]}`,
+          borderBottom: "1px solid rgba(255,255,255,0.22)",
+          fontFamily: typography.fontFamily,
+          color: colors.text.primary
+        },
+        children: c.render(r)
+      },
+      c.key
+    )) }, rowKey(r))) })
+  ] }) }) });
+}
+
+// src/design-system/components/organisms/FormWizard.tsx
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+function FormWizard({ steps, activeStepId, onBack, onNext, onFinish, isLast }) {
+  const active = steps.find((s) => s.id === activeStepId) ?? steps[0];
+  return /* @__PURE__ */ jsx15(GlassCard, { strength: "strong", style: { padding: spacing[4] }, children: /* @__PURE__ */ jsxs10("div", { style: { display: "flex", flexDirection: "column", gap: spacing[4] }, children: [
+    /* @__PURE__ */ jsxs10("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx15("div", { style: { fontWeight: 700 }, children: active.title }),
+      /* @__PURE__ */ jsxs10("div", { style: { opacity: 0.75 }, children: [
+        steps.findIndex((s) => s.id === active.id) + 1,
+        "/",
+        steps.length
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx15("div", { children: active.content }),
+    /* @__PURE__ */ jsxs10("div", { style: { display: "flex", justifyContent: "space-between", gap: spacing[2] }, children: [
+      /* @__PURE__ */ jsx15(Button, { variant: "ghost", onClick: onBack, disabled: !onBack, children: "Back" }),
+      isLast ? /* @__PURE__ */ jsx15(Button, { variant: "primary", onClick: onFinish, children: "Finish" }) : /* @__PURE__ */ jsx15(Button, { variant: "primary", onClick: onNext, disabled: !onNext, children: "Next" })
+    ] })
+  ] }) });
+}
+
+// src/design-system/layouts/PageContainer.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+function PageContainer({ maxWidth = 1200, style, ...rest }) {
+  return /* @__PURE__ */ jsx16(
+    "div",
+    {
+      style: {
+        width: "100%",
+        maxWidth,
+        margin: "0 auto",
+        padding: spacing[4],
+        ...style
+      },
+      ...rest
+    }
+  );
+}
+
+// src/design-system/layouts/Section.tsx
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+function Section({ title, actions, children, style, ...rest }) {
+  return /* @__PURE__ */ jsxs11("section", { style: { display: "flex", flexDirection: "column", gap: spacing[3], ...style }, ...rest, children: [
+    title || actions ? /* @__PURE__ */ jsxs11("header", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: spacing[2] }, children: [
+      title ? /* @__PURE__ */ jsx17("div", { children: title }) : /* @__PURE__ */ jsx17("span", {}),
+      actions ? /* @__PURE__ */ jsx17("div", { children: actions }) : null
+    ] }) : null,
+    children
+  ] });
+}
+
+// src/design-system/layouts/Grid.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+function Grid({ columns = "repeat(auto-fit, minmax(260px, 1fr))", gap = 4, style, ...rest }) {
+  return /* @__PURE__ */ jsx18(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: columns,
+        gap: spacing[gap],
+        ...style
+      },
+      ...rest
+    }
+  );
+}
+export {
+  AppShell,
+  Avatar,
+  Badge,
+  Button,
+  DashboardGrid,
+  DataTable,
+  FormField,
+  FormWizard,
+  GlassCard,
+  Grid,
+  IconButton,
+  Input,
+  Modal,
+  PageContainer,
+  SearchBar,
+  Section,
+  StatCard,
+  Toast,
+  colors,
+  radius,
+  shadows,
+  spacing,
+  typography
+};

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "apple-liquid-glass-react-ui-kit",
+  "version": "0.1.0",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "^19.2.6"
+  },
+  "scripts": {
+    "build": "tsup src/design-system/index.ts --format esm,cjs --dts --out-dir dist"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3"
+  }
+}