@demokit-ui/demokit 0.1.0

package/dist/app/tweak-panel.js

@@ -0,0 +1,182 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { SlidersHorizontal as I } from "lucide-react";
+import { APP_SETTINGS as n } from "../config/settings.config.js";
+import { cn as d } from "../lib/utils.js";
+import { useSettings as O } from "../providers/settings-provider.js";
+import { Popover as z, PopoverTrigger as _, PopoverContent as E } from "../kit/components/feedback/popover/popover.js";
+import { Button as g } from "../kit/components/form/button/button.js";
+import { ToggleGroup as j, ToggleGroupItem as D } from "../kit/components/form/toggle-group/toggle-group.js";
+const G = [
+  { value: "glass", label: "活力", description: "玻璃质感与轻量背景", dot: "#009ef7" },
+  { value: "navy", label: "沉稳", description: "高对比业务界面", dot: "#2563eb" }
+], H = [
+  { value: "compact", label: "紧凑", description: "高频操作台" },
+  { value: "standard", label: "标准", description: "默认后台节奏" },
+  { value: "relaxed", label: "宽松", description: "演示与大屏预览" }
+], A = [
+  { value: "sharp", label: "直角" },
+  { value: "sm", label: "小" },
+  { value: "md", label: "中" },
+  { value: "lg", label: "大" }
+], B = [
+  { value: "fluid", label: "流式", description: "跟随窗口铺满" },
+  { value: "fixed", label: "固定", description: "限制最大宽度" }
+];
+function K({ className: l, ...o }) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "tweak-scope",
+      className: d("demokit-tweak-scope min-w-0", l),
+      ...o
+    }
+  );
+}
+function L({
+  triggerLabel: l = "Tweak",
+  triggerTitle: o = "调整界面外观",
+  title: u = "界面设置",
+  description: i = "调整主题、密度、圆角和内容宽度。",
+  resetLabel: p = "重置",
+  side: h = "top",
+  align: a = "end",
+  sideOffset: v = 10,
+  triggerClassName: f,
+  contentClassName: x,
+  showTheme: b = !0,
+  showDensity: N = !0,
+  showRadius: T = !0,
+  showContainer: y = !0
+}) {
+  const { settings: c, storeOption: t } = O(), w = c.theme ?? n.theme, k = c.appearance?.density ?? n.appearance.density, S = c.appearance?.radius ?? n.appearance.radius, C = c.container ?? n.container, P = () => {
+    t("theme", n.theme), t("appearance.density", n.appearance.density), t("appearance.radius", n.appearance.radius), t("container", n.container);
+  };
+  return /* @__PURE__ */ r(z, { children: [
+    /* @__PURE__ */ e(_, { asChild: !0, children: /* @__PURE__ */ r(
+      g,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        shape: "circle",
+        title: o,
+        className: d(
+          "h-7 gap-1.5 rounded-full px-3 text-xs text-foreground/80 hover:bg-muted hover:text-foreground",
+          f
+        ),
+        children: [
+          /* @__PURE__ */ e(I, { className: "size-3.5" }),
+          l
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      E,
+      {
+        align: a,
+        side: h,
+        sideOffset: v,
+        className: d("w-[340px] rounded-[var(--dk-radius-card)] p-3", x),
+        children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ r("div", { className: "flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ r("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ e("div", { className: "text-sm font-semibold text-foreground", children: u }),
+              i && /* @__PURE__ */ e("div", { className: "text-xs leading-5 text-muted-foreground", children: i })
+            ] }),
+            /* @__PURE__ */ e(g, { type: "button", variant: "ghost", size: "sm", onClick: P, children: p })
+          ] }),
+          b && /* @__PURE__ */ e(
+            m,
+            {
+              columns: 2,
+              label: "主题",
+              value: w,
+              options: G,
+              onChange: (s) => t("theme", s)
+            }
+          ),
+          N && /* @__PURE__ */ e(
+            m,
+            {
+              columns: 3,
+              label: "密度",
+              value: k,
+              options: H,
+              onChange: (s) => t("appearance.density", s)
+            }
+          ),
+          T && /* @__PURE__ */ e(
+            m,
+            {
+              columns: 4,
+              label: "圆角",
+              value: S,
+              options: A,
+              onChange: (s) => t("appearance.radius", s)
+            }
+          ),
+          y && /* @__PURE__ */ e(
+            m,
+            {
+              columns: 2,
+              label: "容器",
+              value: C,
+              options: B,
+              onChange: (s) => t("container", s)
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+function m({
+  label: l,
+  value: o,
+  options: u,
+  columns: i,
+  onChange: p
+}) {
+  return /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ e("div", { className: "text-xs font-medium text-muted-foreground", children: l }),
+    /* @__PURE__ */ e(
+      j,
+      {
+        type: "single",
+        value: o,
+        onValueChange: (a) => {
+          a && p(a);
+        },
+        className: d("grid rounded-md border border-border bg-muted/50 p-1", i === 4 ? "grid-cols-4" : i === 3 ? "grid-cols-3" : "grid-cols-2"),
+        children: u.map((a) => /* @__PURE__ */ r(
+          D,
+          {
+            value: a.value,
+            className: d(
+              "h-auto min-h-10 min-w-0 flex-col items-start rounded-[var(--dk-radius-control)] px-2.5 py-2 text-left data-[state=on]:bg-card data-[state=on]:text-foreground data-[state=on]:shadow-xs",
+              a.description && "min-h-12"
+            ),
+            children: [
+              /* @__PURE__ */ r("span", { className: "flex min-w-0 items-center gap-1.5 text-xs font-semibold leading-4", children: [
+                a.dot && /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: "size-2.5 shrink-0 rounded-full",
+                    style: { background: a.dot }
+                  }
+                ),
+                /* @__PURE__ */ e("span", { className: "truncate", children: a.label })
+              ] }),
+              a.description && /* @__PURE__ */ e("span", { className: "mt-0.5 line-clamp-2 text-[10px] font-normal leading-4 text-muted-foreground", children: a.description })
+            ]
+          },
+          a.value
+        ))
+      }
+    )
+  ] });
+}
+export {
+  L as TweakPanel,
+  K as TweakScope
+};

package/dist/components/apexcharts.css

@@ -0,0 +1,101 @@
+@layer components {
+  .apexcharts-text,
+  .apexcharts-title-text,
+  .apexcharts-legend-text {
+    font-family: inherit !important;
+  }
+
+  .apexcharts-title-text {
+    font-weight: var(--font-weight-normal);
+  }
+
+  .apexcharts-pie-label {
+    @apply text-xs;
+  }
+
+  .apexcharts-toolbar {
+    text-align: start !important;
+  }
+
+  .apexcharts-menu {
+    border: 1px solid var(--color-border) !important;
+    box-shadow: var(--box-shadow-sm) !important;
+    background-color: var(--color-background) !important;
+    border-radius: 0.625rem !important;
+    padding: 0.5rem 0 !important;
+    overflow: hidden;
+    min-width: 10rem !important;
+  }
+
+  .apexcharts-menu .apexcharts-menu-item {
+    padding: 0.5rem 0.5rem !important;
+  }
+
+  .apexcharts-menu .apexcharts-menu-item:hover {
+    background-color: var(--gray-100) !important;
+  }
+
+  .apexcharts-tooltip {
+    border: 1px solid var(--color-border) !important;
+    box-shadow: var(--box-shadow-sm) !important;
+    background-color: var(--color-background) !important;
+    border-radius: 0.625rem !important;
+    color: var(--color-secondary-foreground) !important;
+  }
+
+  .apexcharts-tooltip .apexcharts-tooltip-title {
+    @apply text-foreground text-sm font-medium;
+    padding: 0.25rem 0.5rem !important;
+    background-color: transparent !important;
+    border-bottom: 1px solid var(--color-border) !important;
+  }
+
+  .apexcharts-xaxistooltip {
+    border: 1px solid var(--color-border) !important;
+    box-shadow: var(--box-shadow-sm) !important;
+    background-color: var(--color-background) !important;
+    border-radius: 0.625rem;
+    color: var(--color-mono);
+  }
+
+  .apexcharts-xaxistooltip:before {
+    border-bottom: 0 !important;
+  }
+
+  .apexcharts-legend {
+    display: flex;
+    flex-direction: column;
+    @apply gap-2;
+  }
+
+  .apexcharts-legend .apexcharts-legend-series {
+    @apply gap-1;
+    display: flex;
+    align-items: center;
+  }
+
+  .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-text {
+    @apply text-muted-foreground text-sm font-medium;
+  }
+
+  .apexcharts-card-rounded .apexcharts-canvas svg {
+    border-bottom-left-radius: var(--radius-xl);
+    border-bottom-right-radius: var(--radius-xl);
+  }
+
+  .apexcharts-rounded-sm .apexcharts-canvas svg {
+    border-radius: var(--radius-sm);
+  }
+
+  .apexcharts-rounded .apexcharts-canvas svg {
+    border-radius: var(--radius-md);
+  }
+
+  .apexcharts-rounded-lg .apexcharts-canvas svg {
+    border-radius: var(--radius-lg);
+  }
+
+  .apexcharts-rounded-xl .apexcharts-canvas svg {
+    border-radius: var(--radius-xl);
+  }
+}

package/dist/components/scrollable.css

@@ -0,0 +1,120 @@
+@layer components {
+  /* Base scrollable styles */
+  .kt-scrollable,
+  .kt-scrollable-y,
+  .kt-scrollable-x,
+  .kt-scrollable-hover,
+  .kt-scrollable-y-hover,
+  .kt-scrollable-x-hover,
+  .kt-scrollable-auto,
+  .kt-scrollable-y-auto,
+  .kt-scrollable-x-auto {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+    position: relative;
+
+    &::-webkit-scrollbar {
+      width: 0.35rem;
+      height: 0.35rem;
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 1.25rem;
+    }
+
+    &::-webkit-scrollbar-corner {
+      background-color: transparent;
+    }
+  }
+
+  /* Overflow styles for scrollable variants */
+  .kt-scrollable,
+  .kt-scrollable-hover {
+    overflow: scroll;
+  }
+
+  .kt-scrollable-y,
+  .kt-scrollable-y-hover {
+    overflow-y: scroll;
+  }
+
+  .kt-scrollable-x,
+  .kt-scrollable-x-hover {
+    overflow-x: scroll;
+  }
+
+  .kt-scrollable-auto {
+    overflow: auto;
+  }
+
+  .kt-scrollable-y-auto {
+    overflow-y: auto;
+  }
+
+  .kt-scrollable-x-auto {
+    overflow-x: auto;
+  }
+
+  /* Scrollbar visibility and color */
+  .kt-scrollable,
+  .kt-scrollable-y,
+  .kt-scrollable-x,
+  .kt-scrollable-auto,
+  .kt-scrollable-y-auto,
+  .kt-scrollable-x-auto,
+  .kt-scrollable-hover:hover,
+  .kt-scrollable-y-hover:hover,
+  .kt-scrollable-x-hover:hover {
+    scrollbar-color: var(--scrollbar-thumb-color, var(--color-input))
+      transparent;
+
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--scrollbar-thumb-color, var(--color-input));
+    }
+
+    &::-webkit-scrollbar-corner {
+      background-color: transparent;
+    }
+  }
+  
+  /* Target safari browser only */
+  @supports (-webkit-hyphens: none) {
+    .kt-scrollable,
+    .kt-scrollable-hover {
+      overflow: auto;
+    }
+
+    .kt-scrollable-y,
+    .kt-scrollable-y-hover {
+      overflow-y: auto;
+    }
+
+    .kt-scrollable-x,
+    .kt-scrollable-x-hover {
+      overflow-x: auto;
+    }
+  }
+
+
+  /* Responsive adjustments for smaller screens */
+  @media (max-width: 64rem) {
+    .kt-scrollable,
+    .kt-scrollable-hover {
+      overflow: auto;
+    }
+
+    .kt-scrollable-y,
+    .kt-scrollable-y-hover {
+      overflow-y: auto;
+    }
+
+    .kt-scrollable-x,
+    .kt-scrollable-x-hover {
+      overflow-x: auto;
+    }
+  }
+}

package/dist/config/settings.config.d.ts

@@ -0,0 +1,2 @@
+import { Settings } from './types';
+export declare const APP_SETTINGS: Settings;

package/dist/config/settings.config.js

@@ -0,0 +1,33 @@
+const e = {
+  appearance: {
+    density: "compact",
+    radius: "sm"
+  },
+  layout: "",
+  container: "fluid",
+  theme: "glass",
+  layouts: {
+    demo1: {
+      sidebarCollapse: !1
+    },
+    demo2: {
+      headerSticky: !0,
+      headerStickyOffset: 200
+    },
+    demo5: {
+      headerSticky: !0,
+      headerStickyOffset: 200
+    },
+    demo7: {
+      headerSticky: !0,
+      headerStickyOffset: 200
+    },
+    demo9: {
+      headerSticky: !0,
+      headerStickyOffset: 200
+    }
+  }
+};
+export {
+  e as APP_SETTINGS
+};

package/dist/config/types.d.ts

@@ -0,0 +1,50 @@
+import { ElementType } from 'react';
+export interface MenuItem {
+    title?: string;
+    icon?: ElementType;
+    path?: string;
+    rootPath?: string;
+    childrenIndex?: number;
+    heading?: string;
+    children?: MenuConfig;
+    disabled?: boolean;
+    collapse?: boolean;
+    collapseTitle?: string;
+    expandTitle?: string;
+    badge?: string;
+    separator?: boolean;
+}
+export type MenuConfig = MenuItem[];
+export type ThemePreset = 'glass' | 'navy';
+export type DensityPreset = 'compact' | 'standard' | 'relaxed';
+export type RadiusPreset = 'sharp' | 'sm' | 'md' | 'lg';
+export interface Settings {
+    appearance: {
+        density: DensityPreset;
+        radius: RadiusPreset;
+    };
+    container: 'fixed' | 'fluid';
+    layout: string;
+    theme: ThemePreset;
+    layouts: {
+        demo1: {
+            sidebarCollapse: boolean;
+        };
+        demo2: {
+            headerSticky: boolean;
+            headerStickyOffset: number;
+        };
+        demo5: {
+            headerSticky: boolean;
+            headerStickyOffset: number;
+        };
+        demo7: {
+            headerSticky: boolean;
+            headerStickyOffset: number;
+        };
+        demo9: {
+            headerSticky: boolean;
+            headerStickyOffset: number;
+        };
+    };
+}