dishui 0.0.81 → 0.0.82

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -20,7 +20,7 @@ var i = ({ className: t }) => /* @__PURE__ */ n("svg", {
20
20
  h || m(n), l?.(n);
21
21
  };
22
22
  return /* @__PURE__ */ n("div", {
23
- className: e("w-full divide-y divide-base-300 overflow-hidden bg-base-100", d && "rounded-xl border border-base-300/70", f),
23
+ className: e("dishui-accordion w-full divide-y divide-base-300 overflow-hidden bg-base-100 text-body leading-5 text-base-content", d && "rounded-lg border border-base-300", f),
24
24
  children: a.map((t) => {
25
25
  let a = g.includes(t.key);
26
26
  return /* @__PURE__ */ r("div", {
@@ -30,10 +30,10 @@ var i = ({ className: t }) => /* @__PURE__ */ n("svg", {
30
30
  disabled: t.disabled,
31
31
  "aria-expanded": a,
32
32
  onClick: () => _(t.key, t.disabled),
33
- className: e("flex w-full items-center gap-2 px-4 py-3 text-left text-sm font-medium transition-colors", t.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-base-200/60", a && !t.disabled && "text-primary"),
33
+ className: e("flex min-h-10 w-full items-center gap-2 px-4 py-2 text-left text-body font-medium transition-colors duration-150 motion-reduce:transition-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-current", t.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-base-200/60", a && !t.disabled && "text-base-content"),
34
34
  children: [
35
35
  t.icon && /* @__PURE__ */ n("span", {
36
- className: "flex shrink-0 items-center text-base-content/60 [&>svg]:h-4 [&>svg]:w-4",
36
+ className: "flex shrink-0 items-center text-base-content/70 [&>svg]:h-4 [&>svg]:w-4",
37
37
  children: t.icon
38
38
  }),
39
39
  /* @__PURE__ */ n("span", {
@@ -45,17 +45,17 @@ var i = ({ className: t }) => /* @__PURE__ */ n("svg", {
45
45
  children: t.extra
46
46
  }),
47
47
  u && /* @__PURE__ */ n("span", {
48
- className: e("shrink-0 text-base-content/50 transition-transform duration-200", a && "rotate-180 text-primary"),
48
+ className: e("shrink-0 text-base-content/70 transition-transform duration-200 motion-reduce:transition-none", a && "rotate-180"),
49
49
  children: /* @__PURE__ */ n(i, {})
50
50
  })
51
51
  ]
52
52
  }), /* @__PURE__ */ n("div", {
53
- className: "grid transition-[grid-template-rows] duration-200 ease-out",
53
+ className: "grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
54
54
  style: { gridTemplateRows: a ? "1fr" : "0fr" },
55
55
  children: /* @__PURE__ */ n("div", {
56
56
  className: "overflow-hidden",
57
57
  children: /* @__PURE__ */ n("div", {
58
- className: "px-4 pb-4 pt-0 text-sm leading-relaxed text-base-content/75",
58
+ className: "px-4 pb-3 pt-1 text-body leading-5 text-base-content/70",
59
59
  children: t.content
60
60
  })
61
61
  })
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Accordion/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport type AccordionItemType = {\n /** 唯一标识(用于展开状态管理)。 */\n key: string;\n /** 标题。 */\n title: React.ReactNode;\n /** 展开区域内容。 */\n content: React.ReactNode;\n /** 标题左侧图标。 */\n icon?: React.ReactNode;\n /** 标题行右侧、展开指示器之前的附加内容。 */\n extra?: React.ReactNode;\n /** 禁用该项。 */\n disabled?: boolean;\n};\n\nexport type AccordionProps = {\n /** 手风琴项(数据驱动,可动态增删)。 */\n items: AccordionItemType[];\n /** 受控:当前展开项的 key 列表。 */\n openKeys?: string[];\n /** 非受控:默认展开项的 key 列表。 */\n defaultOpenKeys?: string[];\n /** 是否允许同时展开多项;默认 false(互斥展开,展开新项时收起其它项)。 */\n multiple?: boolean;\n /** 展开状态变化回调。 */\n onChange?: (openKeys: string[]) => void;\n /** 是否显示右侧展开指示箭头,默认 true。 */\n indicator?: boolean;\n /** 是否显示外层边框,默认 true。 */\n bordered?: boolean;\n className?: string;\n};\n\nconst ChevronGlyph: React.FC<{ className?: string }> = ({ className }) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth={2}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className={cn('h-4 w-4', className)}\n aria-hidden=\"true\"\n >\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n);\n\n/**\n * Accordion —— 手风琴组件:动态交互式的聚合展开列表。\n * 数据驱动(items 可动态增删),支持受控 / 非受控、互斥或多开、\n * 禁用项、图标与自定义内容,展开 / 收起带平滑过渡动画。\n */\nconst Accordion: React.FC<AccordionProps> = ({\n items,\n openKeys,\n defaultOpenKeys = [],\n multiple = false,\n onChange,\n indicator = true,\n bordered = true,\n className = '',\n}) => {\n const [innerKeys, setInnerKeys] = React.useState<string[]>(defaultOpenKeys);\n const isControlled = openKeys !== undefined;\n const currentKeys = isControlled ? (openKeys ?? []) : innerKeys;\n\n const toggle = (key: string, disabled?: boolean) => {\n if (disabled) return;\n const nextKeys = currentKeys.includes(key)\n ? currentKeys.filter((k) => k !== key)\n : multiple\n ? [...currentKeys, key]\n : [key];\n if (!isControlled) setInnerKeys(nextKeys);\n onChange?.(nextKeys);\n };\n\n return (\n <div\n className={cn(\n 'w-full divide-y divide-base-300 overflow-hidden bg-base-100',\n bordered && 'rounded-xl border border-base-300/70',\n className,\n )}\n >\n {items.map((item) => {\n const open = currentKeys.includes(item.key);\n return (\n <div key={item.key} className={cn(open && !item.disabled && 'bg-base-200/40')}>\n <button\n type=\"button\"\n disabled={item.disabled}\n aria-expanded={open}\n onClick={() => toggle(item.key, item.disabled)}\n className={cn(\n 'flex w-full items-center gap-2 px-4 py-3 text-left text-sm font-medium transition-colors',\n item.disabled\n ? 'cursor-not-allowed opacity-50'\n : 'cursor-pointer hover:bg-base-200/60',\n open && !item.disabled && 'text-primary',\n )}\n >\n {item.icon && <span className=\"flex shrink-0 items-center text-base-content/60 [&>svg]:h-4 [&>svg]:w-4\">{item.icon}</span>}\n <span className=\"min-w-0 flex-1 truncate\">{item.title}</span>\n {item.extra && <span className=\"flex shrink-0 items-center\">{item.extra}</span>}\n {indicator && (\n <span className={cn('shrink-0 text-base-content/50 transition-transform duration-200', open && 'rotate-180 text-primary')}>\n <ChevronGlyph />\n </span>\n )}\n </button>\n <div\n className=\"grid transition-[grid-template-rows] duration-200 ease-out\"\n style={{ gridTemplateRows: open ? '1fr' : '0fr' }}\n >\n <div className=\"overflow-hidden\">\n <div className=\"px-4 pb-4 pt-0 text-sm leading-relaxed text-base-content/75\">\n {item.content}\n </div>\n </div>\n </div>\n </div>\n );\n })}\n </div>\n );\n};\n\nexport default Accordion;\n"],"mappings":";;;;AAoCA,IAAM,KAAkD,EAAE,mBACxD,kBAAC,OAAD;CACE,OAAM;CACN,SAAQ;CACR,MAAK;CACL,QAAO;CACP,aAAa;CACb,eAAc;CACd,gBAAe;CACf,WAAW,EAAG,WAAW,CAAS;CAClC,eAAY;CAEZ,UAAA,kBAAC,QAAD,EAAM,GAAE,eAAgB,CAAA;AACrB,CAAA,GAQD,KAAuC,EAC3C,UACA,aACA,qBAAkB,CAAC,GACnB,cAAW,IACX,aACA,eAAY,IACZ,cAAW,IACX,eAAY,SACR;CACJ,IAAM,CAAC,GAAW,KAAgB,EAAM,SAAmB,CAAe,GACpE,IAAe,MAAa,KAAA,GAC5B,IAAc,IAAgB,KAAY,CAAC,IAAK,GAEhD,KAAU,GAAa,MAAuB;EAClD,IAAI,GAAU;EACd,IAAM,IAAW,EAAY,SAAS,CAAG,IACrC,EAAY,QAAQ,MAAM,MAAM,CAAG,IACnC,IACE,CAAC,GAAG,GAAa,CAAG,IACpB,CAAC,CAAG;EAEV,AADK,KAAc,EAAa,CAAQ,GACxC,IAAW,CAAQ;CACrB;CAEA,OACE,kBAAC,OAAD;EACE,WAAW,EACT,+DACA,KAAY,wCACZ,CACF;EAEC,UAAA,EAAM,KAAK,MAAS;GACnB,IAAM,IAAO,EAAY,SAAS,EAAK,GAAG;GAC1C,OACE,kBAAC,OAAD;IAAoB,WAAW,EAAG,KAAQ,CAAC,EAAK,YAAY,gBAAgB;IAA5E,UAAA,CACE,kBAAC,UAAD;KACE,MAAK;KACL,UAAU,EAAK;KACf,iBAAe;KACf,eAAe,EAAO,EAAK,KAAK,EAAK,QAAQ;KAC7C,WAAW,EACT,4FACA,EAAK,WACD,kCACA,uCACJ,KAAQ,CAAC,EAAK,YAAY,cAC5B;KAXF,UAAA;MAaG,EAAK,QAAQ,kBAAC,QAAD;OAAM,WAAU;OAA2E,UAAA,EAAK;MAAW,CAAA;MACzH,kBAAC,QAAD;OAAM,WAAU;OAA2B,UAAA,EAAK;MAAY,CAAA;MAC3D,EAAK,SAAS,kBAAC,QAAD;OAAM,WAAU;OAA8B,UAAA,EAAK;MAAY,CAAA;MAC7E,KACC,kBAAC,QAAD;OAAM,WAAW,EAAG,mEAAmE,KAAQ,yBAAyB;OACtH,UAAA,kBAAC,GAAD,CAAe,CAAA;MACX,CAAA;KAEF;IACR,CAAA,GAAA,kBAAC,OAAD;KACE,WAAU;KACV,OAAO,EAAE,kBAAkB,IAAO,QAAQ,MAAM;KAEhD,UAAA,kBAAC,OAAD;MAAK,WAAU;MACb,UAAA,kBAAC,OAAD;OAAK,WAAU;OACZ,UAAA,EAAK;MACH,CAAA;KACF,CAAA;IACF,CAAA,CACF;GAjCK,GAAA,EAAK,GAiCV;EAET,CAAC;CACE,CAAA;AAET"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Accordion/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport type AccordionItemType = {\n /** 唯一标识(用于展开状态管理)。 */\n key: string;\n /** 标题。 */\n title: React.ReactNode;\n /** 展开区域内容。 */\n content: React.ReactNode;\n /** 标题左侧图标。 */\n icon?: React.ReactNode;\n /** 标题行右侧、展开指示器之前的附加内容。 */\n extra?: React.ReactNode;\n /** 禁用该项。 */\n disabled?: boolean;\n};\n\nexport type AccordionProps = {\n /** 手风琴项(数据驱动,可动态增删)。 */\n items: AccordionItemType[];\n /** 受控:当前展开项的 key 列表。 */\n openKeys?: string[];\n /** 非受控:默认展开项的 key 列表。 */\n defaultOpenKeys?: string[];\n /** 是否允许同时展开多项;默认 false(互斥展开,展开新项时收起其它项)。 */\n multiple?: boolean;\n /** 展开状态变化回调。 */\n onChange?: (openKeys: string[]) => void;\n /** 是否显示右侧展开指示箭头,默认 true。 */\n indicator?: boolean;\n /** 是否显示外层边框,默认 true。 */\n bordered?: boolean;\n className?: string;\n};\n\nconst ChevronGlyph: React.FC<{ className?: string }> = ({ className }) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth={2}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className={cn('h-4 w-4', className)}\n aria-hidden=\"true\"\n >\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n);\n\n/**\n * Accordion —— 手风琴组件:动态交互式的聚合展开列表。\n * 数据驱动(items 可动态增删),支持受控 / 非受控、互斥或多开、\n * 禁用项、图标与自定义内容,展开 / 收起带平滑过渡动画。\n */\nconst Accordion: React.FC<AccordionProps> = ({\n items,\n openKeys,\n defaultOpenKeys = [],\n multiple = false,\n onChange,\n indicator = true,\n bordered = true,\n className = '',\n}) => {\n const [innerKeys, setInnerKeys] = React.useState<string[]>(defaultOpenKeys);\n const isControlled = openKeys !== undefined;\n const currentKeys = isControlled ? (openKeys ?? []) : innerKeys;\n\n const toggle = (key: string, disabled?: boolean) => {\n if (disabled) return;\n const nextKeys = currentKeys.includes(key)\n ? currentKeys.filter((k) => k !== key)\n : multiple\n ? [...currentKeys, key]\n : [key];\n if (!isControlled) setInnerKeys(nextKeys);\n onChange?.(nextKeys);\n };\n\n return (\n <div\n className={cn(\n 'dishui-accordion w-full divide-y divide-base-300 overflow-hidden bg-base-100 text-body leading-5 text-base-content',\n bordered && 'rounded-lg border border-base-300',\n className,\n )}\n >\n {items.map((item) => {\n const open = currentKeys.includes(item.key);\n return (\n <div key={item.key} className={cn(open && !item.disabled && 'bg-base-200/40')}>\n <button\n type=\"button\"\n disabled={item.disabled}\n aria-expanded={open}\n onClick={() => toggle(item.key, item.disabled)}\n className={cn(\n 'flex min-h-10 w-full items-center gap-2 px-4 py-2 text-left text-body font-medium transition-colors duration-150 motion-reduce:transition-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-current',\n item.disabled\n ? 'cursor-not-allowed opacity-50'\n : 'cursor-pointer hover:bg-base-200/60',\n open && !item.disabled && 'text-base-content',\n )}\n >\n {item.icon && <span className=\"flex shrink-0 items-center text-base-content/70 [&>svg]:h-4 [&>svg]:w-4\">{item.icon}</span>}\n <span className=\"min-w-0 flex-1 truncate\">{item.title}</span>\n {item.extra && <span className=\"flex shrink-0 items-center\">{item.extra}</span>}\n {indicator && (\n <span className={cn('shrink-0 text-base-content/70 transition-transform duration-200 motion-reduce:transition-none', open && 'rotate-180')}>\n <ChevronGlyph />\n </span>\n )}\n </button>\n <div\n className=\"grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none\"\n style={{ gridTemplateRows: open ? '1fr' : '0fr' }}\n >\n <div className=\"overflow-hidden\">\n <div className=\"px-4 pb-3 pt-1 text-body leading-5 text-base-content/70\">\n {item.content}\n </div>\n </div>\n </div>\n </div>\n );\n })}\n </div>\n );\n};\n\nexport default Accordion;\n"],"mappings":";;;;AAoCA,IAAM,KAAkD,EAAE,mBACxD,kBAAC,OAAD;CACE,OAAM;CACN,SAAQ;CACR,MAAK;CACL,QAAO;CACP,aAAa;CACb,eAAc;CACd,gBAAe;CACf,WAAW,EAAG,WAAW,CAAS;CAClC,eAAY;CAEZ,UAAA,kBAAC,QAAD,EAAM,GAAE,eAAgB,CAAA;AACrB,CAAA,GAQD,KAAuC,EAC3C,UACA,aACA,qBAAkB,CAAC,GACnB,cAAW,IACX,aACA,eAAY,IACZ,cAAW,IACX,eAAY,SACR;CACJ,IAAM,CAAC,GAAW,KAAgB,EAAM,SAAmB,CAAe,GACpE,IAAe,MAAa,KAAA,GAC5B,IAAc,IAAgB,KAAY,CAAC,IAAK,GAEhD,KAAU,GAAa,MAAuB;EAClD,IAAI,GAAU;EACd,IAAM,IAAW,EAAY,SAAS,CAAG,IACrC,EAAY,QAAQ,MAAM,MAAM,CAAG,IACnC,IACE,CAAC,GAAG,GAAa,CAAG,IACpB,CAAC,CAAG;EAEV,AADK,KAAc,EAAa,CAAQ,GACxC,IAAW,CAAQ;CACrB;CAEA,OACE,kBAAC,OAAD;EACE,WAAW,EACT,sHACA,KAAY,qCACZ,CACF;EAEC,UAAA,EAAM,KAAK,MAAS;GACnB,IAAM,IAAO,EAAY,SAAS,EAAK,GAAG;GAC1C,OACE,kBAAC,OAAD;IAAoB,WAAW,EAAG,KAAQ,CAAC,EAAK,YAAY,gBAAgB;IAA5E,UAAA,CACE,kBAAC,UAAD;KACE,MAAK;KACL,UAAU,EAAK;KACf,iBAAe;KACf,eAAe,EAAO,EAAK,KAAK,EAAK,QAAQ;KAC7C,WAAW,EACT,wOACA,EAAK,WACD,kCACA,uCACJ,KAAQ,CAAC,EAAK,YAAY,mBAC5B;KAXF,UAAA;MAaG,EAAK,QAAQ,kBAAC,QAAD;OAAM,WAAU;OAA2E,UAAA,EAAK;MAAW,CAAA;MACzH,kBAAC,QAAD;OAAM,WAAU;OAA2B,UAAA,EAAK;MAAY,CAAA;MAC3D,EAAK,SAAS,kBAAC,QAAD;OAAM,WAAU;OAA8B,UAAA,EAAK;MAAY,CAAA;MAC7E,KACC,kBAAC,QAAD;OAAM,WAAW,EAAG,iGAAiG,KAAQ,YAAY;OACvI,UAAA,kBAAC,GAAD,CAAe,CAAA;MACX,CAAA;KAEF;IACR,CAAA,GAAA,kBAAC,OAAD;KACE,WAAU;KACV,OAAO,EAAE,kBAAkB,IAAO,QAAQ,MAAM;KAEhD,UAAA,kBAAC,OAAD;MAAK,WAAU;MACb,UAAA,kBAAC,OAAD;OAAK,WAAU;OACZ,UAAA,EAAK;MACH,CAAA;KACF,CAAA;IACF,CAAA,CACF;GAjCK,GAAA,EAAK,GAiCV;EAET,CAAC;CACE,CAAA;AAET"}
@@ -11,6 +11,9 @@ export type CardProps = {
11
11
  compact?: boolean;
12
12
  hover?: boolean;
13
13
  glass?: boolean;
14
+ /** Background opacity only (0..1, default 0.15). Non-finite values use the default. */
15
+ glassOpacity?: number;
16
+ style?: React.CSSProperties;
14
17
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
15
18
  className?: string;
16
19
  };
@@ -42,7 +45,7 @@ export type CardFigureProps = {
42
45
  /** 指定 figure 高度(数字按 px,支持 "16rem"/"50%" 等);内部图片自动填满该高度 */
43
46
  height?: number | string;
44
47
  };
45
- export type CardFeatureProps = {
48
+ export type CardFeatureProps = Pick<CardProps, 'glassOpacity' | 'style'> & {
46
49
  /** Icon node (usually a lucide / inline svg), rendered inside a tinted container. */
47
50
  icon?: React.ReactNode;
48
51
  /** Feature title. */
@@ -66,7 +69,7 @@ export type CardFeatureProps = {
66
69
  /** Click handler. */
67
70
  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
68
71
  };
69
- export type CardQuoteProps = {
72
+ export type CardQuoteProps = Pick<CardProps, 'glassOpacity' | 'style'> & {
70
73
  /** The quoted text. */
71
74
  children: React.ReactNode;
72
75
  /** Author name (rendered in primary color). */
@@ -90,7 +93,7 @@ export type CardQuoteProps = {
90
93
  /** Click handler. */
91
94
  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
92
95
  };
93
- export type CardMetaProps = {
96
+ export type CardMetaProps = Pick<CardProps, 'glassOpacity' | 'style'> & {
94
97
  /** Card title (top-left). */
95
98
  title: React.ReactNode;
96
99
  /** Badge / tag node (top-right, e.g. a visibility badge). */
@@ -113,7 +116,7 @@ export type CardMetaProps = {
113
116
  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
114
117
  };
115
118
  export type CardInfoTone = 'primary' | 'success' | 'warning' | 'info' | 'error' | 'neutral';
116
- export type CardInfoProps = {
119
+ export type CardInfoProps = Pick<CardProps, 'glassOpacity' | 'style'> & {
117
120
  /** Metric name. */
118
121
  label: React.ReactNode;
119
122
  /** Metric value (number or short text). */
@@ -4,12 +4,18 @@ import { CardMetric as t } from "./Metric2.js";
4
4
  import "react";
5
5
  import { jsx as n, jsxs as r } from "react/jsx-runtime";
6
6
  //#region src/components/Card/index.tsx
7
- var i = ({ children: t, variant: r, bordered: i = !1, dash: a = !1, side: o = !1, imageFull: s = !1, compact: c = !1, hover: l = !0, glass: u = !0, size: d = "sm", className: f = "" }) => {
8
- let p = u && !r ? "glass dishui-card-glass shadow-lg" : "", m = r ? `bg-${r} text-${r}-content shadow-md` : "", h = i ? "card-bordered" : "", g = a ? "card-dash" : "", _ = o ? "card-side" : "", v = s ? "image-full" : "", y = c ? "card-compact" : "", b = l ? "hover:shadow-xl transition-shadow duration-300" : "", x = d ? `card-${d}` : "";
9
- f.includes("w-") || f.match(/max-w-|min-w-/);
10
- let S = e("card", "", p, m, h, g, _, v, y, b, x, f);
7
+ var i = ({ children: t, variant: r, bordered: i = !1, dash: a = !1, side: o = !1, imageFull: s = !1, compact: c = !1, hover: l = !0, glass: u = !0, glassOpacity: d, style: p, size: m = "sm", className: h = "" }) => {
8
+ let g = u && !r ? "dishui-card-glass" : "", _ = r ? `bg-${r} text-${r}-content shadow-md` : "", v = i ? "card-bordered" : "", y = a ? "card-dash" : "", b = o ? "card-side" : "", x = s ? "image-full" : "", S = c ? "card-compact" : "", C = l ? "hover:shadow-md transition-shadow duration-200 motion-reduce:transition-none" : "", w = m ? `card-${m}` : "";
9
+ h.includes("w-") || h.match(/max-w-|min-w-/);
10
+ let T = e("card", "", g, _, v, y, b, x, S, C, w, h);
11
11
  return /* @__PURE__ */ n("div", {
12
- className: S,
12
+ className: T,
13
+ style: f({
14
+ variant: r,
15
+ glass: u,
16
+ glassOpacity: d,
17
+ style: p
18
+ }),
13
19
  children: t
14
20
  });
15
21
  }, a = ({ children: t, className: r = "" }) => {
@@ -42,9 +48,12 @@ var i = ({ children: t, variant: r, bordered: i = !1, dash: a = !1, side: o = !1
42
48
  children: t
43
49
  });
44
50
  }, d = ({ variant: t, bordered: n = !1, glass: r = !0, className: i = "" }) => {
45
- let a = r && !t ? "glass dishui-card-glass shadow-lg" : "", o = t ? `bg-${t} text-${t}-content shadow-md` : "";
51
+ let a = r && !t ? "dishui-card-glass" : "", o = t ? `bg-${t} text-${t}-content shadow-md` : "";
46
52
  return e("card", a, o, n && "card-bordered", i);
47
- }, f = ({ className: t }) => /* @__PURE__ */ r("svg", {
53
+ }, f = ({ variant: e, glass: t = !0, glassOpacity: n = .15, style: r }) => !t || e ? r : {
54
+ "--dishui-card-glass-opacity": `${(Number.isFinite(n) ? Math.min(1, Math.max(0, n)) : .15) * 100}%`,
55
+ ...r
56
+ }, p = ({ className: t }) => /* @__PURE__ */ r("svg", {
48
57
  xmlns: "http://www.w3.org/2000/svg",
49
58
  className: e("h-4 w-4", t),
50
59
  fill: "none",
@@ -59,8 +68,8 @@ var i = ({ children: t, variant: r, bordered: i = !1, dash: a = !1, side: o = !1
59
68
  strokeLinecap: "round",
60
69
  d: "M12 7v5l3 2"
61
70
  })]
62
- }), p = ({ icon: t, title: i, description: a, layout: o = "vertical", iconShape: s, children: c, variant: l, bordered: u, glass: f = !0, className: p = "", onClick: m }) => {
63
- let h = t && /* @__PURE__ */ n("span", {
71
+ }), m = ({ icon: t, title: i, description: a, layout: o = "vertical", iconShape: s, children: c, variant: l, bordered: u, glass: p = !0, glassOpacity: m, style: h, className: g = "", onClick: _ }) => {
72
+ let v = t && /* @__PURE__ */ n("span", {
64
73
  className: e("flex shrink-0 items-center justify-center bg-primary/10 text-primary", o === "vertical" ? "size-16" : "size-12", (s ?? (o === "vertical" ? "circle" : "square")) === "circle" ? "rounded-full" : "rounded-xl"),
65
74
  children: t
66
75
  });
@@ -68,13 +77,19 @@ var i = ({ children: t, variant: r, bordered: i = !1, dash: a = !1, side: o = !1
68
77
  className: d({
69
78
  variant: l,
70
79
  bordered: u,
71
- glass: f,
72
- className: p
80
+ glass: p,
81
+ className: g
82
+ }),
83
+ style: f({
84
+ variant: l,
85
+ glass: p,
86
+ glassOpacity: m,
87
+ style: h
73
88
  }),
74
- onClick: m,
89
+ onClick: _,
75
90
  children: o === "horizontal" ? /* @__PURE__ */ r("div", {
76
91
  className: "card-body flex-row items-center gap-4",
77
- children: [h, /* @__PURE__ */ r("div", {
92
+ children: [v, /* @__PURE__ */ r("div", {
78
93
  className: "min-w-0 flex-1",
79
94
  children: [
80
95
  /* @__PURE__ */ n("h3", {
@@ -91,7 +106,7 @@ var i = ({ children: t, variant: r, bordered: i = !1, dash: a = !1, side: o = !1
91
106
  }) : /* @__PURE__ */ r("div", {
92
107
  className: "card-body items-center gap-3 text-center",
93
108
  children: [
94
- h,
109
+ v,
95
110
  /* @__PURE__ */ n("h3", {
96
111
  className: "text-lg font-bold text-base-content",
97
112
  children: i
@@ -104,14 +119,20 @@ var i = ({ children: t, variant: r, bordered: i = !1, dash: a = !1, side: o = !1
104
119
  ]
105
120
  })
106
121
  });
107
- }, m = ({ children: t, author: i, avatar: a, date: o, quoteMark: s = !0, divider: c = !0, variant: l, bordered: u, glass: p = !0, className: m = "", onClick: h }) => /* @__PURE__ */ r("div", {
122
+ }, h = ({ children: t, author: i, avatar: a, date: o, quoteMark: s = !0, divider: c = !0, variant: l, bordered: u, glass: m = !0, glassOpacity: h, style: g, className: _ = "", onClick: v }) => /* @__PURE__ */ r("div", {
108
123
  className: e(d({
109
124
  variant: l,
110
125
  bordered: u,
111
- glass: p,
112
- className: m
126
+ glass: m,
127
+ className: _
113
128
  }), "relative overflow-hidden"),
114
- onClick: h,
129
+ style: f({
130
+ variant: l,
131
+ glass: m,
132
+ glassOpacity: h,
133
+ style: g
134
+ }),
135
+ onClick: v,
115
136
  children: [s && /* @__PURE__ */ n("span", {
116
137
  "aria-hidden": "true",
117
138
  className: "pointer-events-none absolute right-5 top-2 select-none font-serif text-6xl leading-none text-primary/25",
@@ -134,18 +155,24 @@ var i = ({ children: t, variant: r, bordered: i = !1, dash: a = !1, side: o = !1
134
155
  })]
135
156
  }), o && /* @__PURE__ */ r("span", {
136
157
  className: "flex shrink-0 items-center gap-1.5 text-sm text-base-content/55",
137
- children: [/* @__PURE__ */ n(f, {}), o]
158
+ children: [/* @__PURE__ */ n(p, {}), o]
138
159
  })]
139
160
  })]
140
161
  })]
141
- }), h = ({ title: e, badge: t, children: i, footerLeft: a, footerRight: o, variant: s, bordered: c, glass: l = !0, className: u = "", onClick: f }) => /* @__PURE__ */ n("div", {
162
+ }), g = ({ title: e, badge: t, children: i, footerLeft: a, footerRight: o, variant: s, bordered: c, glass: l = !0, glassOpacity: u, style: p, className: m = "", onClick: h }) => /* @__PURE__ */ n("div", {
142
163
  className: d({
143
164
  variant: s,
144
165
  bordered: c,
145
166
  glass: l,
146
- className: u
167
+ className: m
147
168
  }),
148
- onClick: f,
169
+ style: f({
170
+ variant: s,
171
+ glass: l,
172
+ glassOpacity: u,
173
+ style: p
174
+ }),
175
+ onClick: h,
149
176
  children: /* @__PURE__ */ r("div", {
150
177
  className: "card-body gap-2.5 p-6",
151
178
  children: [
@@ -175,34 +202,40 @@ var i = ({ children: t, variant: r, bordered: i = !1, dash: a = !1, side: o = !1
175
202
  })
176
203
  ]
177
204
  })
178
- }), g = ({ label: t, value: i, icon: a, iconPosition: o = "top", iconShape: s = "square", iconBoxed: c = !1, tone: l = "neutral", layout: u = "stacked", align: f = "left", children: p, footer: m, hint: h, loading: g = !1, variant: _, bordered: v = !0, glass: y = !0, className: b = "", onClick: x }) => {
179
- let S = d({
180
- variant: _,
181
- bordered: v,
182
- glass: y,
183
- className: e("blade-card-info", "p-4", b)
184
- }), C = a != null && /* @__PURE__ */ n("span", {
205
+ }), _ = ({ label: t, value: i, icon: a, iconPosition: o = "top", iconShape: s = "square", iconBoxed: c = !1, tone: l = "neutral", layout: u = "stacked", align: p = "left", children: m, footer: h, hint: g, loading: _ = !1, variant: v, bordered: y = !0, glass: b = !0, glassOpacity: x, style: S, className: C = "", onClick: w }) => {
206
+ let T = d({
207
+ variant: v,
208
+ bordered: y,
209
+ glass: b,
210
+ className: e("blade-card-info", "p-4", C)
211
+ }), E = a != null && /* @__PURE__ */ n("span", {
185
212
  className: e("blade-card-info__icon", c && (s === "circle" ? "rounded-full" : "rounded-lg"), c && "bg-base-content/5"),
186
213
  children: a
187
214
  });
188
215
  return /* @__PURE__ */ r("div", {
189
- className: S,
216
+ className: T,
217
+ style: f({
218
+ variant: v,
219
+ glass: b,
220
+ glassOpacity: x,
221
+ style: S
222
+ }),
190
223
  "data-layout": u,
191
- "data-align": f,
192
- "data-tone": _ ? void 0 : l,
193
- "data-bordered": v,
194
- "data-glass": y,
195
- role: x ? "button" : void 0,
196
- tabIndex: x ? 0 : void 0,
197
- "aria-busy": g || void 0,
198
- onClick: x,
199
- onKeyDown: x ? (e) => {
224
+ "data-align": p,
225
+ "data-tone": v ? void 0 : l,
226
+ "data-bordered": y,
227
+ "data-glass": b,
228
+ role: w ? "button" : void 0,
229
+ tabIndex: w ? 0 : void 0,
230
+ "aria-busy": _ || void 0,
231
+ onClick: w,
232
+ onKeyDown: w ? (e) => {
200
233
  e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.repeat || e.currentTarget.click());
201
234
  } : void 0,
202
235
  children: [/* @__PURE__ */ r("div", {
203
236
  className: "blade-card-info__body",
204
237
  children: [
205
- o === "left" && C,
238
+ o === "left" && E,
206
239
  /* @__PURE__ */ r("div", {
207
240
  className: "blade-card-info__content",
208
241
  children: [/* @__PURE__ */ r("div", {
@@ -212,52 +245,52 @@ var i = ({ children: t, variant: r, bordered: i = !1, dash: a = !1, side: o = !1
212
245
  children: [/* @__PURE__ */ n("div", {
213
246
  className: "blade-card-info__label",
214
247
  children: t
215
- }), o === "top" && C]
248
+ }), o === "top" && E]
216
249
  }), /* @__PURE__ */ r("div", {
217
250
  className: "blade-card-info__reading",
218
251
  children: [/* @__PURE__ */ n("div", {
219
252
  className: "blade-card-info__value",
220
- children: g ? /* @__PURE__ */ n("span", {
253
+ children: _ ? /* @__PURE__ */ n("span", {
221
254
  className: "blade-card-info__skeleton",
222
255
  "aria-hidden": "true"
223
256
  }) : i
224
- }), h != null && /* @__PURE__ */ n("div", {
257
+ }), g != null && /* @__PURE__ */ n("div", {
225
258
  className: "blade-card-info__hint",
226
- children: h
259
+ children: g
227
260
  })]
228
261
  })]
229
- }), p != null && /* @__PURE__ */ n("div", {
262
+ }), m != null && /* @__PURE__ */ n("div", {
230
263
  className: "blade-card-info__details",
231
- children: p
264
+ children: m
232
265
  })]
233
266
  }),
234
- o === "right" && C
267
+ o === "right" && E
235
268
  ]
236
- }), m != null && /* @__PURE__ */ n("div", {
269
+ }), h != null && /* @__PURE__ */ n("div", {
237
270
  className: "blade-card-info__footer",
238
- children: m
271
+ children: h
239
272
  })]
240
273
  });
241
- }, _ = {
274
+ }, v = {
242
275
  primary: "text-primary",
243
276
  success: "text-success",
244
277
  warning: "text-warning",
245
278
  info: "text-info",
246
279
  error: "text-error",
247
280
  neutral: "text-base-content/70"
248
- }, v = {
281
+ }, y = {
249
282
  primary: "bg-primary text-primary-content",
250
283
  success: "bg-success text-success-content",
251
284
  warning: "bg-warning text-warning-content",
252
285
  info: "bg-info text-info-content",
253
286
  error: "bg-error text-error-content",
254
287
  neutral: "bg-neutral text-neutral-content"
255
- }, y = {
288
+ }, b = {
256
289
  md: "text-2xl",
257
290
  lg: "text-4xl",
258
291
  xl: "text-5xl",
259
292
  "2xl": "text-6xl"
260
- }, b = (e) => e === "neutral" ? "var(--color-base-content)" : `var(--color-${e})`, x = ({ data: e, type: t, height: i }) => {
293
+ }, x = (e) => e === "neutral" ? "var(--color-base-content)" : `var(--color-${e})`, S = ({ data: e, type: t, height: i }) => {
261
294
  if (!e || e.length < 2) return null;
262
295
  let a = Math.min(...e), o = Math.max(...e) - a || 1, s = (t) => t / (e.length - 1) * 100, c = (e) => i - 3 - (e - a) / o * (i - 6), l = e.map((e, t) => `${s(t).toFixed(2)},${c(e).toFixed(2)}`);
263
296
  if (t === "bar") {
@@ -308,21 +341,21 @@ var i = ({ children: t, variant: r, bordered: i = !1, dash: a = !1, side: o = !1
308
341
  vectorEffect: "non-scaling-stroke"
309
342
  })
310
343
  });
311
- }, S = ({ label: e, value: t, tone: i = "primary", loading: a = !1, className: o = "", unit: s, valueSize: c = "xl", align: l = "left", sparkline: u, sparklineData: d, sparklineType: f = "line", sparklineHeight: p = 36, indicator: m = !1, filled: h = !1, onClick: g }) => {
312
- let S = u ?? (d && d.length >= 2 ? /* @__PURE__ */ n(x, {
344
+ }, C = ({ label: e, value: t, tone: i = "primary", loading: a = !1, className: o = "", unit: s, valueSize: c = "xl", align: l = "left", sparkline: u, sparklineData: d, sparklineType: f = "line", sparklineHeight: p = 36, indicator: m = !1, filled: h = !1, onClick: g }) => {
345
+ let _ = u ?? (d && d.length >= 2 ? /* @__PURE__ */ n(S, {
313
346
  data: d,
314
347
  type: f,
315
348
  height: p
316
- }) : null), C = h ? "" : _[i], w = h ? "opacity-80" : "text-base-content/60";
349
+ }) : null), C = h ? "" : v[i], w = h ? "opacity-80" : "text-base-content/60";
317
350
  return /* @__PURE__ */ r("div", {
318
351
  onClick: g,
319
- className: `relative flex flex-col overflow-hidden rounded-lg p-3 ${h ? v[i] : "border border-base-300/60 bg-base-200"} ${g ? "cursor-pointer transition-colors hover:border-primary/40" : ""} ${o}`.trim(),
352
+ className: `relative flex flex-col overflow-hidden rounded-lg p-3 ${h ? y[i] : "border border-base-300/60 bg-base-200"} ${g ? "cursor-pointer transition-colors hover:border-primary/40" : ""} ${o}`.trim(),
320
353
  children: [
321
354
  m && !h && /* @__PURE__ */ n("span", {
322
355
  "aria-hidden": "true",
323
356
  className: "absolute right-0 top-0 h-0 w-0",
324
357
  style: {
325
- borderTop: "14px solid " + b(i),
358
+ borderTop: "14px solid " + x(i),
326
359
  borderLeft: "14px solid transparent"
327
360
  }
328
361
  }),
@@ -333,22 +366,22 @@ var i = ({ children: t, variant: r, bordered: i = !1, dash: a = !1, side: o = !1
333
366
  /* @__PURE__ */ n("div", {
334
367
  className: `flex min-h-[3rem] flex-1 items-center py-1 ${l === "center" ? "justify-center" : "justify-start"}`,
335
368
  children: a ? /* @__PURE__ */ n("span", { className: `inline-block h-8 w-16 animate-pulse rounded ${h ? "bg-white/25" : "bg-base-content/10"}` }) : /* @__PURE__ */ r("span", {
336
- className: `leading-none tracking-tight ${y[c]} font-semibold ${h ? "" : C}`.trim(),
369
+ className: `leading-none tracking-tight ${b[c]} font-semibold ${h ? "" : C}`.trim(),
337
370
  children: [t, s != null && s !== "" && /* @__PURE__ */ n("span", {
338
371
  className: "ml-0.5 text-[0.45em] font-semibold",
339
372
  children: s
340
373
  })]
341
374
  })
342
375
  }),
343
- S && /* @__PURE__ */ n("div", {
344
- className: `-mx-3 -mb-3 mt-1 ${h ? "text-white" : _[i]}`,
345
- children: S
376
+ _ && /* @__PURE__ */ n("div", {
377
+ className: `-mx-3 -mb-3 mt-1 ${h ? "text-white" : v[i]}`,
378
+ children: _
346
379
  })
347
380
  ]
348
381
  });
349
- }, C = i;
350
- C.Title = a, C.Body = o, C.Actions = s, C.Figure = u, C.Feature = p, C.Quote = m, C.Meta = h, C.Info = g, C.Stat = S, C.Metric = t;
382
+ }, w = i;
383
+ w.Title = a, w.Body = o, w.Actions = s, w.Figure = u, w.Feature = m, w.Quote = h, w.Meta = g, w.Info = _, w.Stat = C, w.Metric = t;
351
384
  //#endregion
352
- export { C as default };
385
+ export { w as default };
353
386
 
354
387
  //# sourceMappingURL=index.js.map