@demokit-ui/demokit 0.1.0

package/dist/kit/components/navigation/tabs/tabs.js

@@ -0,0 +1,172 @@
+import { jsx as s } from "react/jsx-runtime";
+import * as l from "react";
+import { cn as r } from "../../../../lib/utils.js";
+import { cva as d } from "class-variance-authority";
+import { Tabs as n } from "radix-ui";
+const m = d("flex items-center shrink-0", {
+  variants: {
+    variant: {
+      default: "bg-accent p-1",
+      button: "",
+      line: "border-b border-border"
+    },
+    shape: {
+      default: "",
+      pill: ""
+    },
+    size: {
+      lg: "gap-2.5",
+      md: "gap-2",
+      sm: "gap-1.5",
+      xs: "gap-1"
+    }
+  },
+  compoundVariants: [
+    { variant: "default", size: "lg", className: "p-1.5 gap-2.5" },
+    { variant: "default", size: "md", className: "p-1 gap-2" },
+    { variant: "default", size: "sm", className: "p-1 gap-1.5" },
+    { variant: "default", size: "xs", className: "p-1 gap-1" },
+    {
+      variant: "default",
+      shape: "default",
+      size: "lg",
+      className: "rounded-lg"
+    },
+    {
+      variant: "default",
+      shape: "default",
+      size: "md",
+      className: "rounded-lg"
+    },
+    {
+      variant: "default",
+      shape: "default",
+      size: "sm",
+      className: "rounded-md"
+    },
+    {
+      variant: "default",
+      shape: "default",
+      size: "xs",
+      className: "rounded-md"
+    },
+    { variant: "line", size: "lg", className: "gap-9" },
+    { variant: "line", size: "md", className: "gap-8" },
+    { variant: "line", size: "sm", className: "gap-4" },
+    { variant: "line", size: "xs", className: "gap-4" },
+    {
+      variant: "default",
+      shape: "pill",
+      className: "rounded-full [&_[role=tab]]:rounded-full"
+    },
+    {
+      variant: "button",
+      shape: "pill",
+      className: "rounded-full [&_[role=tab]]:rounded-full"
+    }
+  ],
+  defaultVariants: {
+    variant: "default",
+    size: "md"
+  }
+}), c = d(
+  "shrink-0 cursor-pointer whitespace-nowrap inline-flex justify-center items-center font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:shrink-0 [&_svg]:text-muted-foreground [&:hover_svg]:text-primary [&[data-state=active]_svg]:text-primary",
+  {
+    variants: {
+      variant: {
+        default: "text-muted-foreground data-[state=active]:bg-background hover:text-foreground data-[state=active]:text-foreground data-[state=active]:shadow-xs data-[state=active]:shadow-black/5",
+        button: "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-lg text-accent-foreground hover:text-foreground data-[state=active]:bg-accent data-[state=active]:text-foreground",
+        line: "border-b-2 text-muted-foreground border-transparent data-[state=active]:border-primary hover:text-primary data-[state=active]:text-primary data-[state=active]:border-primary data-[state=active]:text-primary"
+      },
+      size: {
+        lg: "gap-2.5 [&_svg]:size-5 text-sm",
+        md: "gap-2 [&_svg]:size-4 text-sm",
+        sm: "gap-1.5 [&_svg]:size-3.5 text-xs",
+        xs: "gap-1 [&_svg]:size-3.5 text-xs"
+      }
+    },
+    compoundVariants: [
+      { variant: "default", size: "lg", className: "py-2.5 px-4 rounded-md" },
+      { variant: "default", size: "md", className: "py-1.5 px-3 rounded-md" },
+      { variant: "default", size: "sm", className: "py-1.5 px-2.5 rounded-sm" },
+      { variant: "default", size: "xs", className: "py-1 px-2 rounded-sm" },
+      { variant: "button", size: "lg", className: "py-3 px-4 rounded-lg" },
+      { variant: "button", size: "md", className: "py-2.5 px-3 rounded-lg" },
+      { variant: "button", size: "sm", className: "py-2 px-2.5 rounded-md" },
+      { variant: "button", size: "xs", className: "py-1.5 px-2 rounded-md" },
+      { variant: "line", size: "lg", className: "py-3" },
+      { variant: "line", size: "md", className: "py-2.5" },
+      { variant: "line", size: "sm", className: "py-2" },
+      { variant: "line", size: "xs", className: "py-1.5" }
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+), v = d(
+  "mt-2.5 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+), o = l.createContext({
+  variant: "default",
+  size: "md"
+});
+function x({ className: e, ...a }) {
+  return /* @__PURE__ */ s(n.Root, { "data-slot": "tabs", className: r("", e), ...a });
+}
+function z({
+  className: e,
+  variant: a = "default",
+  shape: t = "default",
+  size: i = "md",
+  ...u
+}) {
+  return /* @__PURE__ */ s(o.Provider, { value: { variant: a || "default", size: i || "md" }, children: /* @__PURE__ */ s(
+    n.List,
+    {
+      "data-slot": "tabs-list",
+      className: r(m({ variant: a, shape: t, size: i }), e),
+      ...u
+    }
+  ) });
+}
+function N({ className: e, ...a }) {
+  const { variant: t, size: i } = l.useContext(o);
+  return /* @__PURE__ */ s(
+    n.Trigger,
+    {
+      "data-slot": "tabs-trigger",
+      className: r(c({ variant: t, size: i }), e),
+      ...a
+    }
+  );
+}
+function y({
+  className: e,
+  variant: a,
+  ...t
+}) {
+  return /* @__PURE__ */ s(
+    n.Content,
+    {
+      "data-slot": "tabs-content",
+      className: r(v({ variant: a }), e),
+      ...t
+    }
+  );
+}
+export {
+  x as Tabs,
+  y as TabsContent,
+  z as TabsList,
+  N as TabsTrigger
+};

package/dist/kit/themes/theme-toggle.d.ts

@@ -0,0 +1 @@
+export declare function ThemeToggle(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/themes/theme-toggle.js

@@ -0,0 +1,56 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { useSettings as s } from "../../providers/settings-provider.js";
+import { cn as d } from "../../lib/utils.js";
+const n = [
+  { value: "glass", label: "活力", dot: "#009ef7" },
+  { value: "navy", label: "沉稳", dot: "#2563eb" }
+];
+function g() {
+  const { settings: o, storeOption: l } = s();
+  return /* @__PURE__ */ r("div", { className: "theme-toggle px-5 pb-4 pt-3 border-t border-border", children: [
+    /* @__PURE__ */ t(
+      "div",
+      {
+        "data-slot": "theme-toggle-label",
+        className: "text-[11px] uppercase tracking-wider text-muted-foreground/70 mb-2",
+        children: "主题"
+      }
+    ),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        "data-slot": "theme-toggle-grid",
+        className: "grid grid-cols-2 gap-1 p-1 bg-muted rounded-md",
+        children: n.map((e) => {
+          const a = o.theme === e.value;
+          return /* @__PURE__ */ r(
+            "button",
+            {
+              type: "button",
+              onClick: () => l("theme", e.value),
+              title: e.label,
+              className: d(
+                "flex items-center justify-center gap-1.5 h-8 rounded text-xs font-medium transition-colors",
+                a ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+              ),
+              children: [
+                /* @__PURE__ */ t(
+                  "span",
+                  {
+                    className: "inline-block size-2.5 rounded-full shrink-0",
+                    style: { background: e.dot }
+                  }
+                ),
+                /* @__PURE__ */ t("span", { "data-slot": "theme-toggle-text", children: e.label })
+              ]
+            },
+            e.value
+          );
+        })
+      }
+    )
+  ] });
+}
+export {
+  g as ThemeToggle
+};

package/dist/kit/tokens/chart-palette.d.ts

@@ -0,0 +1 @@
+export declare function useChartPalette(): string[];

package/dist/kit/tokens/chart-palette.js

@@ -0,0 +1,12 @@
+import { useOptionalSettings as s } from "../../providers/settings-provider.js";
+const t = {
+  glass: ["#009EF7", "#1BC5BD", "#FFA800", "#8950FC", "#F64E60", "#50CD89"],
+  navy: ["#2563eb", "#7c3aed", "#0d9488", "#f97316", "#e11d48", "#0891b2"]
+};
+function a() {
+  const e = s()?.settings.theme ?? "glass";
+  return t[e] ?? t.glass;
+}
+export {
+  a as useChartPalette
+};

package/dist/lib/utils.d.ts

@@ -0,0 +1,8 @@
+import { ClassValue } from 'clsx';
+/**
+ * Merges Tailwind class names, resolving any conflicts.
+ *
+ * @param inputs - An array of class names to merge.
+ * @returns A string of merged and optimized class names.
+ */
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/utils.js

@@ -0,0 +1,8 @@
+import { clsx as o } from "clsx";
+import { twMerge as t } from "tailwind-merge";
+function n(...r) {
+  return t(o(r));
+}
+export {
+  n as cn
+};

package/dist/providers/demokit-provider.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare function DemoKitProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/providers/demokit-provider.js

@@ -0,0 +1,9 @@
+import { jsx as r } from "react/jsx-runtime";
+import { SettingsProvider as i } from "./settings-provider.js";
+import { TooltipsProvider as t } from "./tooltips-provider.js";
+function p({ children: o }) {
+  return /* @__PURE__ */ r(i, { children: /* @__PURE__ */ r(t, { children: o }) });
+}
+export {
+  p as DemoKitProvider
+};

package/dist/providers/settings-provider.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { Settings } from '../config/types';
+type Path = string;
+type SettingsContextType = {
+    getOption: <T = any>(path: Path) => T;
+    setOption: <T = any>(path: Path, value: T) => void;
+    storeOption: <T = any>(path: Path, value: T) => void;
+    settings: Settings;
+};
+export declare const SettingsProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useSettings: () => SettingsContextType;
+export declare const useOptionalSettings: () => SettingsContextType | undefined;
+export {};

package/dist/providers/settings-provider.js

@@ -0,0 +1,78 @@
+import { jsx as O } from "react/jsx-runtime";
+import { useState as v, useEffect as f, useCallback as g, useMemo as E, useContext as y, createContext as w } from "react";
+import { APP_SETTINGS as p } from "../config/settings.config.js";
+const h = w(
+  void 0
+), l = "app_settings_", c = () => typeof window < "u";
+function P(e, t) {
+  return t.split(".").reduce((n, s) => n?.[s], e);
+}
+function S(e, t, n) {
+  const s = t.split("."), i = s.pop(), u = s.reduce((m, r) => m[r] ??= {}, e);
+  return u[i] = n, { ...e };
+}
+function x(e, t) {
+  if (c())
+    try {
+      localStorage.setItem(
+        `${l}${e}`,
+        JSON.stringify(t)
+      );
+    } catch (n) {
+      console.error("LocalStorage write error:", n);
+    }
+}
+function C(e) {
+  if (c())
+    try {
+      const t = localStorage.getItem(`${l}${e}`);
+      return t ? JSON.parse(t) : void 0;
+    } catch (t) {
+      console.error("LocalStorage read error:", t);
+      return;
+    }
+}
+const T = ({
+  children: e
+}) => {
+  const [t, n] = v(
+    structuredClone(p)
+  );
+  f(() => {
+    if (!c()) return;
+    const r = structuredClone(p);
+    Object.keys(localStorage).filter((o) => o.startsWith(l)).forEach((o) => {
+      const a = o.replace(l, ""), d = C(a);
+      d !== void 0 && S(r, a, d);
+    }), n(r);
+  }, []), f(() => {
+    c() && (document.documentElement.dataset.theme = t.theme);
+  }, [t.theme]), f(() => {
+    c() && (document.documentElement.dataset.density = t.appearance?.density ?? p.appearance.density, document.documentElement.dataset.radius = t.appearance?.radius ?? p.appearance.radius);
+  }, [t.appearance?.density, t.appearance?.radius]);
+  const s = g(
+    (r) => P(t, r),
+    [t]
+  ), i = g((r, o) => {
+    n((a) => S({ ...a }, r, o));
+  }, []), u = g((r, o) => {
+    n((a) => {
+      const d = S({ ...a }, r, o);
+      return x(r, o), d;
+    });
+  }, []), m = E(
+    () => ({ getOption: s, setOption: i, storeOption: u, settings: t }),
+    [s, i, u, t]
+  );
+  return /* @__PURE__ */ O(h.Provider, { value: m, children: e });
+}, $ = () => {
+  const e = y(h);
+  if (!e)
+    throw new Error("useSettings must be used within a SettingsProvider");
+  return e;
+}, b = () => y(h);
+export {
+  T as SettingsProvider,
+  b as useOptionalSettings,
+  $ as useSettings
+};

package/dist/providers/theme-provider.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare function ThemeProvider({ children, }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/providers/theme-provider.js

@@ -0,0 +1,9 @@
+import { jsx as e, Fragment as o } from "react/jsx-runtime";
+function m({
+  children: r
+}) {
+  return /* @__PURE__ */ e(o, { children: r });
+}
+export {
+  m as ThemeProvider
+};

package/dist/providers/tooltips-provider.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare function TooltipsProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/providers/tooltips-provider.js

@@ -0,0 +1,8 @@
+import { jsx as r } from "react/jsx-runtime";
+import { TooltipProvider as i } from "../kit/components/feedback/tooltip/tooltip.js";
+function p({ children: o }) {
+  return /* @__PURE__ */ r(i, { delayDuration: 0, children: o });
+}
+export {
+  p as TooltipsProvider
+};

package/dist/styles.css

@@ -0,0 +1,237 @@
+/* Tailwind Core */
+@import 'tailwindcss';
+
+/* ReUI Configs */
+@import './config.reui.css';
+
+/** Global Styles **/
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  *:focus-visible {
+    @apply outline-ring rounded-xs shadow-none outline-2 outline-offset-3 transition-none!;
+  }
+
+  /* Override html/body h-full so window can scroll naturally */
+  html.h-full,
+  body.h-full {
+    height: auto;
+    min-height: 100%;
+  }
+
+  body {
+    background: var(--background);
+    color: var(--foreground);
+  }
+
+  #showcase-root {
+    min-width: 0;
+    width: 100%;
+  }
+}
+
+/* Kept component styles */
+@import './components/apexcharts.css';
+@import './components/scrollable.css';
+
+/* Demos */
+@import './demos/demo1.css';
+
+/**
+ * Theme-aware surface.
+ * Glass theme → translucent + backdrop blur + hairline white border
+ * Navy theme  → solid white + 1px slate border + no blur
+ * Use on Cards that need to sit above the decorative backdrop.
+ *
+ * NOT wrapped in @layer so it overrides Card's default `border-border`
+ * (which lives in Tailwind's utilities layer).
+ */
+.card-surface {
+  background: var(--surface-bg);
+  border-color: var(--surface-border);
+  border-radius: var(--dk-radius-card);
+  box-shadow: var(--surface-shadow);
+  backdrop-filter: blur(var(--surface-blur));
+  -webkit-backdrop-filter: blur(var(--surface-blur));
+}
+
+[data-slot='card'],
+[data-slot='popover-content'],
+[data-slot='dialog-content'],
+[data-slot='sheet-content'],
+[data-slot='drawer-content'] {
+  border-radius: var(--dk-radius-card);
+}
+
+[data-slot='table-head'] {
+  height: var(--dk-table-head-height);
+  padding-inline: var(--dk-table-cell-x);
+}
+
+[data-slot='table-cell'] {
+  padding: var(--dk-table-cell-y) var(--dk-table-cell-x);
+}
+
+:where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='container'] {
+  row-gap: var(--dk-page-gap);
+  padding-inline: var(--dk-container-x);
+}
+
+:where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='metric-card'],
+:where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='summary-card'],
+:where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='chart-card'],
+:where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='data-section'],
+:where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='filter-panel'] {
+  min-width: 0;
+}
+
+:where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='page-header'] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dk-page-gap);
+}
+
+:where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='page-header']
+  > :not([hidden])
+  ~ :not([hidden]) {
+  margin-top: 0 !important;
+}
+
+:where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='filter-panel'] {
+  padding: var(--dk-filter-padding);
+}
+
+:where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='filter-panel-body'],
+:where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='filter-panel-grid'] {
+  gap: var(--dk-filter-gap);
+}
+
+:where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='filter-panel-footer'] {
+  margin-top: var(--dk-filter-gap);
+  padding-top: var(--dk-filter-gap);
+}
+
+:where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='input'],
+:where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='input-wrapper'],
+:where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='select-trigger'],
+:where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='toggle-group'],
+:where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='toggle-group-item'] {
+  border-radius: var(--dk-radius-control);
+}
+
+:where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='input'],
+:where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='input-wrapper'],
+:where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='select-trigger'],
+:where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='toggle-group-item'] {
+  height: var(--dk-control-height);
+}
+
+.demokit-native-date-input {
+  position: relative;
+}
+
+.demokit-native-date-input::-webkit-calendar-picker-indicator {
+  position: absolute;
+  inset-inline-end: 0;
+  top: 0;
+  width: 2.5rem;
+  height: 100%;
+  margin: 0;
+  cursor: pointer;
+  opacity: 0;
+}
+
+.demokit-native-date-input::-webkit-inner-spin-button,
+.demokit-native-date-input::-webkit-clear-button {
+  display: none;
+}
+
+/* Markdown viewer — minimal typographic defaults */
+.kit-markdown h1 {
+  font-size: 1.6rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  margin: 1.5rem 0 1rem;
+  color: var(--foreground);
+}
+.kit-markdown h2 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin: 1.5rem 0 0.75rem;
+  color: var(--foreground);
+  padding-bottom: 0.4rem;
+  border-bottom: 1px solid var(--border);
+}
+.kit-markdown h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 1.25rem 0 0.5rem;
+  color: var(--foreground);
+}
+.kit-markdown p {
+  margin: 0.5rem 0;
+}
+.kit-markdown blockquote {
+  border-left: 3px solid var(--primary);
+  padding: 0.5rem 0.9rem;
+  margin: 0.75rem 0;
+  background: color-mix(in srgb, var(--primary) 6%, transparent);
+  color: var(--muted-foreground);
+  border-radius: 0 6px 6px 0;
+}
+.kit-markdown ul, .kit-markdown ol {
+  padding-inline-start: 1.5rem;
+  margin: 0.5rem 0;
+}
+.kit-markdown li { margin: 0.25rem 0; }
+.kit-markdown li > ul, .kit-markdown li > ol { margin: 0.25rem 0; }
+.kit-markdown code {
+  font-family: var(--font-mono, "SF Mono", "Menlo", monospace);
+  background: var(--muted);
+  padding: 0.12rem 0.4rem;
+  border-radius: 4px;
+  font-size: 0.85em;
+  color: var(--foreground);
+}
+.kit-markdown pre {
+  background: var(--muted);
+  padding: 0.9rem 1rem;
+  border-radius: 8px;
+  overflow-x: auto;
+  margin: 0.75rem 0;
+  border: 1px solid var(--border);
+}
+.kit-markdown pre code {
+  background: transparent;
+  padding: 0;
+  font-size: 12.5px;
+  line-height: 1.55;
+}
+.kit-markdown table {
+  border-collapse: collapse;
+  margin: 0.75rem 0;
+  font-size: 13px;
+  width: 100%;
+}
+.kit-markdown thead { background: var(--muted); }
+.kit-markdown th, .kit-markdown td {
+  border: 1px solid var(--border);
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+}
+.kit-markdown a {
+  color: var(--primary);
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+}
+.kit-markdown a:hover {
+  border-bottom-color: var(--primary);
+}
+.kit-markdown hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 1.5rem 0;
+}
+.kit-markdown strong { color: var(--foreground); font-weight: 600; }