dishui 0.0.64 → 0.0.66

package/dist/components/Label/index.js

@@ -1,76 +1,65 @@
-import { useEffect as P, useRef as Q, useState as S } from "react";
-import { jsx as U } from "react/jsx-runtime";
-var Z = ({ children: k, variant: o = "neutral", size: g = "sm", outline: C = !1, dash: w = !1, soft: D = !1, bold: E = !1, italic: M = !1, underline: N = !1, ellipsis: c = !1, maxWidth: d, stateTimeout: n, styleConfig: u = {}, state: s, onStateChange: r, onClick: i, onDoubleClick: f, onMouseEnter: b, onMouseLeave: m, onDragStart: p, onDragEnd: x, draggable: R = !1, className: $ = "", style: j = {} }) => {
-  const [L, v] = S("default"), a = s !== void 0 ? s : L, t = Q(null), l = (e) => {
-    s === void 0 && v(e), r && r(e), y(e);
-  }, y = (e = a) => {
-    t.current && (clearTimeout(t.current), t.current = null), n && e !== "default" && s === void 0 && (t.current = setTimeout(() => {
-      v("default"), r && r("default");
-    }, n));
-  };
-  P(() => (y(), () => {
-    t.current && clearTimeout(t.current);
-  }), [
-    a,
-    n,
-    s
-  ]);
-  const T = "label dark:text-white", z = o ? `text-${o}` : "", h = {
-    xs: "text-xs",
-    sm: "text-sm",
-    md: "text-base",
-    lg: "text-lg",
-    xl: "text-xl"
-  }, B = [
-    T,
-    z,
-    h[g] || h.md,
-    C ? "border border-current px-2 py-1 rounded" : "",
-    w ? "border border-dashed border-current px-2 py-1 rounded" : "",
-    D ? "bg-opacity-10 bg-current px-2 py-1 rounded" : "",
-    E ? "font-bold" : "",
-    M ? "italic" : "",
-    N ? "underline" : "",
-    c ? "truncate" : "",
-    $
-  ].filter(Boolean).join(" "), I = (e) => {
-    l("clicked"), i && i(e);
-  }, O = (e) => {
-    l("doubleClicked"), f && f(e);
-  }, q = (e) => {
-    l("hover"), b && b(e);
-  }, A = (e) => {
-    l("default"), m && m(e);
-  }, F = (e) => {
-    l("dragging"), p && p(e);
-  }, G = (e) => {
-    l("default"), x && x(e);
-  }, H = u[a]?.style || {}, J = u[a]?.className || "", K = {
-    ...j,
-    ...H,
-    ...d ? { maxWidth: d } : {},
-    ...c ? {
-      display: "inline-block",
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap"
-    } : {}
-  };
-  return /* @__PURE__ */ U("span", {
-    className: `${B} ${J}`.trim(),
-    style: K,
-    onClick: I,
-    onDoubleClick: O,
-    onMouseEnter: q,
-    onMouseLeave: A,
-    onDragStart: F,
-    onDragEnd: G,
-    draggable: R,
-    children: k
-  });
-};
-export {
-  Z as default
+import { cn as e } from "../../utils/cn.js";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/Label/index.tsx
+var a = ({ children: a, variant: o = "neutral", size: s = "sm", outline: c = !1, dash: l = !1, soft: u = !1, bold: d = !1, italic: f = !1, underline: p = !1, ellipsis: m = !1, maxWidth: h, stateTimeout: g, styleConfig: _ = {}, state: v, onStateChange: y, onClick: b, onDoubleClick: x, onMouseEnter: S, onMouseLeave: C, onDragStart: w, onDragEnd: T, draggable: E = !1, className: D = "", style: O = {} }) => {
+	let [k, A] = r("default"), j = v === void 0 ? k : v, M = n(null), N = (e) => {
+		v === void 0 && A(e), y?.(e), P(e);
+	}, P = (e = j) => {
+		M.current &&= (clearTimeout(M.current), null), g && e !== "default" && v === void 0 && (M.current = setTimeout(() => {
+			A("default"), y?.("default");
+		}, g));
+	};
+	t(() => (P(), () => {
+		M.current && clearTimeout(M.current);
+	}), [
+		j,
+		g,
+		v
+	]);
+	let F = {
+		xs: "text-xs",
+		sm: "text-sm",
+		md: "text-base",
+		lg: "text-lg",
+		xl: "text-xl"
+	}, ee = F[s] || F.md, I = c || l || u, L = I ? "badge" : "label dark:text-white", R = !I && o ? `text-${o}` : "", z = c ? "badge-outline" : "", B = l ? "badge-dash" : "", V = u ? "badge-soft" : "", H = I && o && o !== "neutral" ? `badge-${o}` : "", U = e(L, R, ee, z, B, V, H, d ? "font-bold" : "", f ? "italic" : "", p ? "underline" : "", m ? "truncate" : "", D), W = (e) => {
+		N("clicked"), b?.(e);
+	}, G = (e) => {
+		N("doubleClicked"), x?.(e);
+	}, K = (e) => {
+		N("hover"), S?.(e);
+	}, q = (e) => {
+		N("default"), C?.(e);
+	}, J = (e) => {
+		N("dragging"), w?.(e);
+	}, Y = (e) => {
+		N("default"), T?.(e);
+	}, X = _[j]?.style || {}, Z = _[j]?.className || "", Q = {
+		...O,
+		...X,
+		...h ? { maxWidth: h } : {},
+		...m ? {
+			display: "inline-block",
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap"
+		} : {}
+	}, $ = e(U, Z);
+	return /* @__PURE__ */ i("span", {
+		className: $,
+		style: Q,
+		onClick: W,
+		onDoubleClick: G,
+		onMouseEnter: K,
+		onMouseLeave: q,
+		onDragStart: J,
+		onDragEnd: Y,
+		draggable: E,
+		children: a
+	});
 };
+//#endregion
+export { a as default };
 
 //# sourceMappingURL=index.js.map

package/dist/components/Label/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Label/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, DragEvent } from 'react';\n\n// 扩展LabelState类型为字符串，允许用户定义任意状态\nexport type LabelState = string;\n\nexport type LabelStyleConfig = {\n  [key: string]: {\n    className?: string;\n    style?: React.CSSProperties;\n  }\n};\n\nexport type LabelProps = {\n  children: React.ReactNode;\n  variant?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  outline?: boolean;\n  dash?: boolean;\n  soft?: boolean;\n  bold?: boolean;\n  italic?: boolean;\n  underline?: boolean;\n  ellipsis?: boolean;\n  maxWidth?: string;\n  stateTimeout?: number;\n  styleConfig?: LabelStyleConfig;\n  // 新增属性：用户自定义状态\n  state?: LabelState;\n  // 新增属性：状态变化回调\n  onStateChange?: (newState: LabelState) => void;\n  onClick?: (e: React.MouseEvent) => void;\n  onDoubleClick?: (e: React.MouseEvent) => void;\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  onMouseLeave?: (e: React.MouseEvent) => void;\n  onDragStart?: (e: DragEvent<HTMLSpanElement>) => void;\n  onDragEnd?: (e: DragEvent<HTMLSpanElement>) => void;\n  draggable?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n};\n\nconst Label = ({\n  children,\n  variant = 'neutral',\n  size = 'sm',\n  outline = false,\n  dash = false,\n  soft = false,\n  bold = false,\n  italic = false,\n  underline = false,\n  ellipsis = false,\n  maxWidth,\n  stateTimeout,\n  styleConfig = {},\n  // 使用用户传入的状态，默认为'default'\n  state: userState,\n  onStateChange,\n  onClick,\n  onDoubleClick,\n  onMouseEnter,\n  onMouseLeave,\n  onDragStart,\n  onDragEnd,\n  draggable = false,\n  className = '',\n  style = {},\n}: LabelProps) => {\n  // 当用户传入state时使用用户的状态，否则内部管理状态\n  const [internalState, setInternalState] = useState<LabelState>('default');\n  const state = userState !== undefined ? userState : internalState;\n  \n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  \n  // 更新状态的函数，同时执行回调\n  const updateState = (newState: LabelState) => {\n    if (userState === undefined) {\n      setInternalState(newState);\n    }\n    onStateChange && onStateChange(newState);\n    resetStateTimeout(newState);\n  };\n  \n  // 重置状态计时器\n  const resetStateTimeout = (currentState: LabelState = state) => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n    \n    if (stateTimeout && currentState !== 'default' && userState === undefined) {\n      timeoutRef.current = setTimeout(() => {\n        setInternalState('default');\n        onStateChange && onStateChange('default');\n      }, stateTimeout);\n    }\n  };\n  \n  // 当状态变化或stateTimeout变化时重置计时器\n  useEffect(() => {\n    resetStateTimeout();\n    \n    // 清除计时器\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, [state, stateTimeout, userState]);\n  \n  // 基础类名\n  const baseClass = 'label dark:text-white';\n  const variantClass = variant ? `text-${variant}` : '';\n  \n  // 尺寸类映射\n  const sizeClassMap = {\n    'xs': 'text-xs',\n    'sm': 'text-sm',\n    'md': 'text-base',\n    'lg': 'text-lg',\n    'xl': 'text-xl',\n  };\n  const sizeClass = sizeClassMap[size] || sizeClassMap.md;\n  \n  // 样式类\n  const outlineClass = outline ? 'border border-current px-2 py-1 rounded' : '';\n  const dashClass = dash ? 'border border-dashed border-current px-2 py-1 rounded' : '';\n  const softClass = soft ? 'bg-opacity-10 bg-current px-2 py-1 rounded' : '';\n  const boldClass = bold ? 'font-bold' : '';\n  const italicClass = italic ? 'italic' : '';\n  const underlineClass = underline ? 'underline' : '';\n  const ellipsisClass = ellipsis ? 'truncate' : '';\n  \n  // 组合所有类名\n  const labelClasses = [\n    baseClass,\n    variantClass,\n    sizeClass,\n    outlineClass,\n    dashClass,\n    softClass,\n    boldClass,\n    italicClass,\n    underlineClass,\n    ellipsisClass,\n    className\n  ].filter(Boolean).join(' ');\n  \n  // 处理事件\n  const handleClick = (e: React.MouseEvent) => {\n    updateState('clicked');\n    onClick && onClick(e);\n  };\n  \n  const handleDoubleClick = (e: React.MouseEvent) => {\n    updateState('doubleClicked');\n    onDoubleClick && onDoubleClick(e);\n  };\n  \n  const handleMouseEnter = (e: React.MouseEvent) => {\n    updateState('hover');\n    onMouseEnter && onMouseEnter(e);\n  };\n  \n  const handleMouseLeave = (e: React.MouseEvent) => {\n    updateState('default');\n    onMouseLeave && onMouseLeave(e);\n  };\n  \n  const handleDragStart = (e: DragEvent<HTMLSpanElement>) => {\n    updateState('dragging');\n    onDragStart && onDragStart(e);\n  };\n  \n  const handleDragEnd = (e: DragEvent<HTMLSpanElement>) => {\n    updateState('default');\n    onDragEnd && onDragEnd(e);\n  };\n  \n  // 获取当前状态的自定义样式和类\n  const stateStyle = styleConfig[state]?.style || {};\n  const stateClassName = styleConfig[state]?.className || '';\n  \n  // 合并样式\n  const combinedStyle = {\n    ...style,\n    ...stateStyle,\n    ...(maxWidth ? { maxWidth } : {}),\n    ...(ellipsis ? { display: 'inline-block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } : {})\n  };\n  \n  // 最终类名\n  const finalClassName = `${labelClasses} ${stateClassName}`.trim();\n  \n  return (\n    <span\n      className={finalClassName}\n      style={combinedStyle}\n      onClick={handleClick}\n      onDoubleClick={handleDoubleClick}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onDragStart={handleDragStart}\n      onDragEnd={handleDragEnd}\n      draggable={draggable}\n    >\n      {children}\n    </span>\n  );\n};\n\nexport default Label; "],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Label/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, DragEvent } from 'react';\nimport { cn } from '../../utils/cn';\n\n// 扩展LabelState类型为字符串，允许用户定义任意状态\nexport type LabelState = string;\n\nexport type LabelStyleConfig = {\n  [key: string]: {\n    className?: string;\n    style?: React.CSSProperties;\n  }\n};\n\nexport type LabelProps = {\n  children: React.ReactNode;\n  variant?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  outline?: boolean;\n  dash?: boolean;\n  soft?: boolean;\n  bold?: boolean;\n  italic?: boolean;\n  underline?: boolean;\n  ellipsis?: boolean;\n  maxWidth?: string;\n  stateTimeout?: number;\n  styleConfig?: LabelStyleConfig;\n  // 新增属性：用户自定义状态\n  state?: LabelState;\n  // 新增属性：状态变化回调\n  onStateChange?: (newState: LabelState) => void;\n  onClick?: (e: React.MouseEvent) => void;\n  onDoubleClick?: (e: React.MouseEvent) => void;\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  onMouseLeave?: (e: React.MouseEvent) => void;\n  onDragStart?: (e: DragEvent<HTMLSpanElement>) => void;\n  onDragEnd?: (e: DragEvent<HTMLSpanElement>) => void;\n  draggable?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n};\n\nconst Label = ({\n  children,\n  variant = 'neutral',\n  size = 'sm',\n  outline = false,\n  dash = false,\n  soft = false,\n  bold = false,\n  italic = false,\n  underline = false,\n  ellipsis = false,\n  maxWidth,\n  stateTimeout,\n  styleConfig = {},\n  // 使用用户传入的状态，默认为'default'\n  state: userState,\n  onStateChange,\n  onClick,\n  onDoubleClick,\n  onMouseEnter,\n  onMouseLeave,\n  onDragStart,\n  onDragEnd,\n  draggable = false,\n  className = '',\n  style = {},\n}: LabelProps) => {\n  // 当用户传入state时使用用户的状态，否则内部管理状态\n  const [internalState, setInternalState] = useState<LabelState>('default');\n  const state = userState !== undefined ? userState : internalState;\n  \n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  \n  // 更新状态的函数，同时执行回调\n  const updateState = (newState: LabelState) => {\n    if (userState === undefined) {\n      setInternalState(newState);\n    }\n    onStateChange?.(newState);\n    resetStateTimeout(newState);\n  };\n  \n  // 重置状态计时器\n  const resetStateTimeout = (currentState: LabelState = state) => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n    \n    if (stateTimeout && currentState !== 'default' && userState === undefined) {\n      timeoutRef.current = setTimeout(() => {\n        setInternalState('default');\n        onStateChange?.('default');\n      }, stateTimeout);\n    }\n  };\n  \n  // 当状态变化或stateTimeout变化时重置计时器\n  useEffect(() => {\n    resetStateTimeout();\n    \n    // 清除计时器\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, [state, stateTimeout, userState]);\n  \n  // 尺寸类映射\n  const sizeClassMap = {\n    'xs': 'text-xs',\n    'sm': 'text-sm',\n    'md': 'text-base',\n    'lg': 'text-lg',\n    'xl': 'text-xl',\n  };\n  const sizeClass = sizeClassMap[size] || sizeClassMap.md;\n  \n  // 样式类（依托 daisyUI badge 的 outline/dash/soft 外观，保证与主题联动）\n  const decorated = outline || dash || soft;\n  // 基础类：普通文本 label；带装饰时用 badge 充当“标签”容器\n  //（装饰态不叠加 text-${variant}/dark:text-white，避免与 badge 自身前景色冲突）\n  const baseClass = decorated ? 'badge' : 'label dark:text-white';\n  const variantClass = !decorated && variant ? `text-${variant}` : '';\n  const outlineClass = outline ? 'badge-outline' : '';\n  const dashClass = dash ? 'badge-dash' : '';\n  const softClass = soft ? 'badge-soft' : '';\n  // 为带装饰的标签补上色调变体（badge-${variant}），让边框/底色跟随 variant\n  const badgeVariantClass = decorated && variant && variant !== 'neutral' ? `badge-${variant}` : '';\n  const boldClass = bold ? 'font-bold' : '';\n  const italicClass = italic ? 'italic' : '';\n  const underlineClass = underline ? 'underline' : '';\n  const ellipsisClass = ellipsis ? 'truncate' : '';\n  \n  // 组合所有类名\n  const labelClasses = cn(\n    baseClass,\n    variantClass,\n    sizeClass,\n    outlineClass,\n    dashClass,\n    softClass,\n    badgeVariantClass,\n    boldClass,\n    italicClass,\n    underlineClass,\n    ellipsisClass,\n    className\n  );\n  \n  // 处理事件\n  const handleClick = (e: React.MouseEvent) => {\n    updateState('clicked');\n    onClick?.(e);\n  };\n  \n  const handleDoubleClick = (e: React.MouseEvent) => {\n    updateState('doubleClicked');\n    onDoubleClick?.(e);\n  };\n  \n  const handleMouseEnter = (e: React.MouseEvent) => {\n    updateState('hover');\n    onMouseEnter?.(e);\n  };\n  \n  const handleMouseLeave = (e: React.MouseEvent) => {\n    updateState('default');\n    onMouseLeave?.(e);\n  };\n  \n  const handleDragStart = (e: DragEvent<HTMLSpanElement>) => {\n    updateState('dragging');\n    onDragStart?.(e);\n  };\n  \n  const handleDragEnd = (e: DragEvent<HTMLSpanElement>) => {\n    updateState('default');\n    onDragEnd?.(e);\n  };\n  \n  // 获取当前状态的自定义样式和类\n  const stateStyle = styleConfig[state]?.style || {};\n  const stateClassName = styleConfig[state]?.className || '';\n  \n  // 合并样式\n  const combinedStyle = {\n    ...style,\n    ...stateStyle,\n    ...(maxWidth ? { maxWidth } : {}),\n    ...(ellipsis ? { display: 'inline-block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } : {})\n  };\n  \n  // 最终类名\n  const finalClassName = cn(labelClasses, stateClassName);\n  \n  return (\n    <span\n      className={finalClassName}\n      style={combinedStyle}\n      onClick={handleClick}\n      onDoubleClick={handleDoubleClick}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onDragStart={handleDragStart}\n      onDragEnd={handleDragEnd}\n      draggable={draggable}\n    >\n      {children}\n    </span>\n  );\n};\n\nexport default Label; "],"mappings":";;;;AA0CA,IAAM,KAAS,EACb,aACA,aAAU,WACV,UAAO,MACP,aAAU,IACV,UAAO,IACP,UAAO,IACP,UAAO,IACP,YAAS,IACT,eAAY,IACZ,cAAW,IACX,aACA,iBACA,iBAAc,CAAC,GAEf,OAAO,GACP,kBACA,YACA,kBACA,iBACA,iBACA,gBACA,cACA,eAAY,IACZ,eAAY,IACZ,WAAQ,CAAC,QACO;CAEhB,IAAM,CAAC,GAAe,KAAoB,EAAqB,SAAS,GAClE,IAAQ,MAAc,KAAA,IAAwB,IAAZ,GAElC,IAAa,EAA6C,IAAI,GAG9D,KAAe,MAAyB;EAK5C,AAJI,MAAc,KAAA,KAChB,EAAiB,CAAQ,GAE3B,IAAgB,CAAQ,GACxB,EAAkB,CAAQ;CAC5B,GAGM,KAAqB,IAA2B,MAAU;EAM9D,AALA,AAEE,EAAW,aADX,aAAa,EAAW,OAAO,GACV,OAGnB,KAAgB,MAAiB,aAAa,MAAc,KAAA,MAC9D,EAAW,UAAU,iBAAiB;GAEpC,AADA,EAAiB,SAAS,GAC1B,IAAgB,SAAS;EAC3B,GAAG,CAAY;CAEnB;CAGA,SACE,EAAkB,SAGL;EACX,AAAI,EAAW,WACb,aAAa,EAAW,OAAO;CAEnC,IACC;EAAC;EAAO;EAAc;CAAS,CAAC;CAGnC,IAAM,IAAe;EACnB,IAAM;EACN,IAAM;EACN,IAAM;EACN,IAAM;EACN,IAAM;CACR,GACM,KAAY,EAAa,MAAS,EAAa,IAG/C,IAAY,KAAW,KAAQ,GAG/B,IAAY,IAAY,UAAU,yBAClC,IAAe,CAAC,KAAa,IAAU,QAAQ,MAAY,IAC3D,IAAe,IAAU,kBAAkB,IAC3C,IAAY,IAAO,eAAe,IAClC,IAAY,IAAO,eAAe,IAElC,IAAoB,KAAa,KAAW,MAAY,YAAY,SAAS,MAAY,IAOzF,IAAe,EACnB,GACA,GACA,IACA,GACA,GACA,GACA,GAbgB,IAAO,cAAc,IACnB,IAAS,WAAW,IACjB,IAAY,cAAc,IAC3B,IAAW,aAAa,IAe5C,CACF,GAGM,KAAe,MAAwB;EAE3C,AADA,EAAY,SAAS,GACrB,IAAU,CAAC;CACb,GAEM,KAAqB,MAAwB;EAEjD,AADA,EAAY,eAAe,GAC3B,IAAgB,CAAC;CACnB,GAEM,KAAoB,MAAwB;EAEhD,AADA,EAAY,OAAO,GACnB,IAAe,CAAC;CAClB,GAEM,KAAoB,MAAwB;EAEhD,AADA,EAAY,SAAS,GACrB,IAAe,CAAC;CAClB,GAEM,KAAmB,MAAkC;EAEzD,AADA,EAAY,UAAU,GACtB,IAAc,CAAC;CACjB,GAEM,KAAiB,MAAkC;EAEvD,AADA,EAAY,SAAS,GACrB,IAAY,CAAC;CACf,GAGM,IAAa,EAAY,EAAM,EAAE,SAAS,CAAC,GAC3C,IAAiB,EAAY,EAAM,EAAE,aAAa,IAGlD,IAAgB;EACpB,GAAG;EACH,GAAG;EACH,GAAI,IAAW,EAAE,YAAS,IAAI,CAAC;EAC/B,GAAI,IAAW;GAAE,SAAS;GAAgB,UAAU;GAAU,cAAc;GAAY,YAAY;EAAS,IAAI,CAAC;CACpH,GAGM,IAAiB,EAAG,GAAc,CAAc;CAEtD,OACE,kBAAC,QAAD;EACE,WAAW;EACX,OAAO;EACP,SAAS;EACT,eAAe;EACf,cAAc;EACd,cAAc;EACd,aAAa;EACb,WAAW;EACA;EAEV;CACG,CAAA;AAEV"}

package/dist/components/Layout/index.js

@@ -1,142 +1,137 @@
-import { forwardRef as m } from "react";
-import { jsx as f } from "react/jsx-runtime";
-var j = {
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  xl: "1280px",
-  "2xl": "1536px",
-  full: "100%"
-}, y = (t) => typeof t == "number" ? `${t}px` : t, $ = (t) => typeof t == "string" ? j[t] ?? t : y(t), h = (t) => t === "start" || t === "end" ? `flex-${t}` : t, w = (t) => typeof t == "string" ? {
-  start: "flex-start",
-  end: "flex-end",
-  between: "space-between",
-  around: "space-around",
-  evenly: "space-evenly"
-}[t] ?? t : t, p = (t) => typeof t == "number" ? `${t}px` : t, g = (t, r) => {
-  if (!Number.isInteger(t) || t <= 0) throw new Error(`Layout.${r} must be a positive integer.`);
-  return t;
-}, L = (t, r) => {
-  if (!Number.isFinite(t) || t <= 0) throw new Error(`Layout.${r} must be a positive number.`);
-  return t;
-}, C = (t) => {
-  if (typeof t == "number") return `repeat(${g(t, "Grid columns")}, minmax(0, 1fr))`;
-  if (typeof t == "string") return t;
-  if (t.length === 0) throw new Error("Layout.Grid columns ratio must contain at least one value.");
-  return t.map((r) => `${L(r, "Grid ratio")}fr`).join(" ");
-}, v = (t) => typeof t == "number" ? `span ${g(t, "Grid.Item span")} / span ${t}` : t, G = (t, r) => typeof t == "number" ? g(t, r) : t, N = m(function({ maxWidth: r = 1280, padding: e = "1rem", centered: o = !0, fluid: n = !1, responsive: a = !1, className: s = "", style: d, ...i }, l) {
-  return /* @__PURE__ */ f("div", {
-    ref: l,
-    className: ["dishui-layout-container", s].filter(Boolean).join(" "),
-    style: {
-      width: "100%",
-      maxWidth: n ? void 0 : $(r),
-      marginInline: o && !n ? "auto" : void 0,
-      paddingInline: a ? `clamp(${y(e)}, 4vw, max(${y(e)}, 2rem))` : y(e),
-      ...d
-    },
-    ...i
-  });
-}), S = m(function({ span: r, start: e, offset: o, rowSpan: n, rowStart: a, className: s = "", style: d, ...i }, l) {
-  return /* @__PURE__ */ f("div", {
-    ref: l,
-    className: ["dishui-layout-grid-item", s].filter(Boolean).join(" "),
-    style: {
-      gridColumn: v(r),
-      gridColumnStart: G(e ?? (o !== void 0 ? g(o + 1, "Grid.Item offset") : void 0), "Grid.Item start"),
-      gridRow: v(n),
-      gridRowStart: G(a, "Grid.Item rowStart"),
-      minWidth: 0,
-      ...d
-    },
-    ...i
-  });
-}), W = m(function({ columns: r = 12, gap: e, space: o, rowGap: n, columnGap: a, align: s, justify: d, autoRows: i, dense: l = !1, className: u = "", style: c, ...x }, I) {
-  return /* @__PURE__ */ f("div", {
-    ref: I,
-    className: ["dishui-layout-grid", u].filter(Boolean).join(" "),
-    style: {
-      display: "grid",
-      gridTemplateColumns: C(r),
-      gap: p(e ?? o),
-      rowGap: p(n),
-      columnGap: p(a),
-      alignItems: h(s),
-      justifyContent: w(d),
-      gridAutoRows: i,
-      gridAutoFlow: l ? "row dense" : void 0,
-      ...c
-    },
-    ...x
-  });
-}), B = m(function({ direction: r = "row", wrap: e = "nowrap", align: o = "center", justify: n = "start", gap: a, fullWidth: s = !1, className: d = "", style: i, ...l }, u) {
-  return /* @__PURE__ */ f("div", {
-    ref: u,
-    className: ["dishui-layout-group", d].filter(Boolean).join(" "),
-    style: {
-      display: "flex",
-      width: s ? "100%" : void 0,
-      flexDirection: r,
-      flexWrap: e,
-      alignItems: h(o),
-      justifyContent: w(n),
-      gap: p(a),
-      ...i
-    },
-    ...l
-  });
-}), R = m(function({ direction: r = "horizontal", size: e = 16, flex: o, className: n = "", style: a, ...s }, d) {
-  const i = y(e);
-  return /* @__PURE__ */ f("span", {
-    ref: d,
-    "aria-hidden": "true",
-    className: ["dishui-layout-space", n].filter(Boolean).join(" "),
-    style: {
-      display: "block",
-      flex: o ?? "0 0 auto",
-      width: r === "horizontal" ? i : "100%",
-      minWidth: r === "horizontal" ? i : void 0,
-      height: r === "vertical" ? i : 1,
-      minHeight: r === "vertical" ? i : void 0,
-      pointerEvents: "none",
-      ...a
-    },
-    ...s
-  });
-}), z = m(function({ direction: r = "row", wrap: e = "nowrap", align: o, justify: n, gap: a, rowGap: s, columnGap: d, inline: i = !1, className: l = "", style: u, ...c }, x) {
-  return /* @__PURE__ */ f("div", {
-    ref: x,
-    className: ["dishui-layout-flex", l].filter(Boolean).join(" "),
-    style: {
-      display: i ? "inline-flex" : "flex",
-      flexDirection: r,
-      flexWrap: e,
-      alignItems: h(o),
-      justifyContent: w(n),
-      gap: p(a),
-      rowGap: p(s),
-      columnGap: p(d),
-      ...u
-    },
-    ...c
-  });
-}), b = W;
-b.Item = S;
-var D = {
-  Container: N,
-  Grid: b,
-  Flex: z,
-  Group: B,
-  Space: R
-};
-export {
-  N as Container,
-  z as Flex,
-  b as Grid,
-  S as GridItem,
-  B as Group,
-  R as Space,
-  D as default
+import { cn as e } from "../../utils/cn.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/Layout/index.tsx
+var r = {
+	sm: "640px",
+	md: "768px",
+	lg: "1024px",
+	xl: "1280px",
+	"2xl": "1536px",
+	full: "100%"
+}, i = (e) => typeof e == "number" ? `${e}px` : e, a = (e) => typeof e == "string" ? r[e] ?? e : i(e), o = (e) => e === "start" || e === "end" ? `flex-${e}` : e, s = (e) => typeof e == "string" ? {
+	start: "flex-start",
+	end: "flex-end",
+	between: "space-between",
+	around: "space-around",
+	evenly: "space-evenly"
+}[e] ?? e : e, c = (e) => typeof e == "number" ? `${e}px` : e, l = (e, t) => {
+	if (!Number.isInteger(e) || e <= 0) throw Error(`Layout.${t} must be a positive integer.`);
+	return e;
+}, u = (e, t) => {
+	if (!Number.isFinite(e) || e <= 0) throw Error(`Layout.${t} must be a positive number.`);
+	return e;
+}, d = (e) => {
+	if (typeof e == "number") return `repeat(${l(e, "Grid columns")}, minmax(0, 1fr))`;
+	if (typeof e == "string") return e;
+	if (e.length === 0) throw Error("Layout.Grid columns ratio must contain at least one value.");
+	return e.map((e) => `${u(e, "Grid ratio")}fr`).join(" ");
+}, f = (e) => typeof e == "number" ? `span ${l(e, "Grid.Item span")} / span ${e}` : e, p = (e, t) => typeof e == "number" ? l(e, t) : e, m = t(function({ maxWidth: t = 1280, padding: r = "1rem", centered: o = !0, fluid: s = !1, responsive: c = !1, className: l = "", style: u, ...d }, f) {
+	return /* @__PURE__ */ n("div", {
+		ref: f,
+		className: e("dishui-layout-container", l),
+		style: {
+			width: "100%",
+			maxWidth: s ? void 0 : a(t),
+			marginInline: o && !s ? "auto" : void 0,
+			paddingInline: c ? `clamp(${i(r)}, 4vw, max(${i(r)}, 2rem))` : i(r),
+			...u
+		},
+		...d
+	});
+}), h = t(function({ span: t, start: r, offset: i, rowSpan: a, rowStart: o, className: s = "", style: c, ...u }, d) {
+	return /* @__PURE__ */ n("div", {
+		ref: d,
+		className: e("dishui-layout-grid-item", s),
+		style: {
+			gridColumn: f(t),
+			gridColumnStart: p(r ?? (i === void 0 ? void 0 : l(i + 1, "Grid.Item offset")), "Grid.Item start"),
+			gridRow: f(a),
+			gridRowStart: p(o, "Grid.Item rowStart"),
+			minWidth: 0,
+			...c
+		},
+		...u
+	});
+}), g = t(function({ columns: t = 12, gap: r, space: i, rowGap: a, columnGap: l, align: u, justify: f, autoRows: p, dense: m = !1, className: h = "", style: g, ..._ }, v) {
+	return /* @__PURE__ */ n("div", {
+		ref: v,
+		className: e("dishui-layout-grid", h),
+		style: {
+			display: "grid",
+			gridTemplateColumns: d(t),
+			gap: c(r ?? i),
+			rowGap: c(a),
+			columnGap: c(l),
+			alignItems: o(u),
+			justifyContent: s(f),
+			gridAutoRows: p,
+			gridAutoFlow: m ? "row dense" : void 0,
+			...g
+		},
+		..._
+	});
+}), _ = t(function({ direction: t = "row", wrap: r = "nowrap", align: i = "center", justify: a = "start", gap: l, fullWidth: u = !1, className: d = "", style: f, ...p }, m) {
+	return /* @__PURE__ */ n("div", {
+		ref: m,
+		className: e("dishui-layout-group", d),
+		style: {
+			display: "flex",
+			width: u ? "100%" : void 0,
+			flexDirection: t,
+			flexWrap: r,
+			alignItems: o(i),
+			justifyContent: s(a),
+			gap: c(l),
+			...f
+		},
+		...p
+	});
+}), v = t(function({ direction: t = "horizontal", size: r = 16, flex: a, className: o = "", style: s, ...c }, l) {
+	let u = i(r);
+	return /* @__PURE__ */ n("span", {
+		ref: l,
+		"aria-hidden": "true",
+		className: e("dishui-layout-space", o),
+		style: {
+			display: "block",
+			flex: a ?? "0 0 auto",
+			width: t === "horizontal" ? u : "100%",
+			minWidth: t === "horizontal" ? u : void 0,
+			height: t === "vertical" ? u : 1,
+			minHeight: t === "vertical" ? u : void 0,
+			pointerEvents: "none",
+			...s
+		},
+		...c
+	});
+}), y = t(function({ direction: t = "row", wrap: r = "nowrap", align: i, justify: a, gap: l, rowGap: u, columnGap: d, inline: f = !1, className: p = "", style: m, ...h }, g) {
+	return /* @__PURE__ */ n("div", {
+		ref: g,
+		className: e("dishui-layout-flex", p),
+		style: {
+			display: f ? "inline-flex" : "flex",
+			flexDirection: t,
+			flexWrap: r,
+			alignItems: o(i),
+			justifyContent: s(a),
+			gap: c(l),
+			rowGap: c(u),
+			columnGap: c(d),
+			...m
+		},
+		...h
+	});
+}), b = g;
+b.Item = h;
+var x = {
+	Container: m,
+	Grid: b,
+	Flex: y,
+	Group: _,
+	Space: v
 };
+//#endregion
+export { m as Container, y as Flex, b as Grid, h as GridItem, _ as Group, v as Space, x as default };
 
 //# sourceMappingURL=index.js.map

package/dist/components/Layout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Layout/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nexport type LayoutGap = number | string;\nexport type GridColumns = number | readonly number[] | string;\nexport type GridPlacement = number | string;\nexport type LayoutMaxWidth = number | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | string;\nexport type LayoutAlign = React.CSSProperties['alignItems'] | 'start' | 'end';\nexport type LayoutJustify = React.CSSProperties['justifyContent'] | 'start' | 'end' | 'between' | 'around' | 'evenly';\n\nexport type LayoutContainerProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** Maximum content width. Numbers are interpreted as pixels. */\n  maxWidth?: LayoutMaxWidth;\n  /** Horizontal container padding. Numbers are interpreted as pixels. */\n  padding?: number | string;\n  /** Centers the container when a max width is applied. */\n  centered?: boolean;\n  /** Makes the container span the available width. */\n  fluid?: boolean;\n  /** Uses adaptive horizontal padding that grows with the viewport. */\n  responsive?: boolean;\n};\n\nexport type LayoutGridProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** Column count (12 by default) or a custom ratio such as [1, 2, 1] or \"1fr 2fr 1fr\". */\n  columns?: GridColumns;\n  gap?: LayoutGap;\n  /** Alias for gap. gap takes precedence when both are provided. */\n  space?: LayoutGap;\n  rowGap?: LayoutGap;\n  columnGap?: LayoutGap;\n  align?: LayoutAlign;\n  justify?: LayoutJustify;\n  autoRows?: React.CSSProperties['gridAutoRows'];\n  dense?: boolean;\n};\n\nexport type LayoutGridItemProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** Number of grid tracks to span, or a valid CSS grid-column value. */\n  span?: GridPlacement;\n  /** One-based grid column start, or a valid CSS grid-column-start value. */\n  start?: GridPlacement;\n  /** Number of empty tracks before the item. Ignored when start is set. */\n  offset?: number;\n  rowSpan?: GridPlacement;\n  rowStart?: GridPlacement;\n};\n\nexport type LayoutFlexProps = React.HTMLAttributes<HTMLDivElement> & {\n  direction?: React.CSSProperties['flexDirection'];\n  wrap?: React.CSSProperties['flexWrap'];\n  align?: LayoutAlign;\n  justify?: LayoutJustify;\n  gap?: LayoutGap;\n  rowGap?: LayoutGap;\n  columnGap?: LayoutGap;\n  inline?: boolean;\n};\n\nexport type LayoutGroupProps = React.HTMLAttributes<HTMLDivElement> & {\n  direction?: React.CSSProperties['flexDirection'];\n  wrap?: React.CSSProperties['flexWrap'];\n  align?: LayoutAlign;\n  justify?: LayoutJustify;\n  gap?: LayoutGap;\n  fullWidth?: boolean;\n};\n\nexport type LayoutSpaceProps = React.HTMLAttributes<HTMLSpanElement> & {\n  direction?: 'horizontal' | 'vertical';\n  /** Width for horizontal spaces and height for vertical spaces. */\n  size?: number | string;\n  /** Makes the spacer consume remaining flex space. */\n  flex?: number | string;\n};\n\nconst maxWidths: Record<string, string> = {\n  sm: '640px',\n  md: '768px',\n  lg: '1024px',\n  xl: '1280px',\n  '2xl': '1536px',\n  full: '100%',\n};\n\nconst cssSize = (value: number | string | undefined): string | undefined =>\n  typeof value === 'number' ? `${value}px` : value;\n\nconst cssMaxWidth = (value: LayoutMaxWidth | undefined): string | undefined =>\n  typeof value === 'string' ? maxWidths[value] ?? value : cssSize(value);\n\nconst cssAlign = (value: LayoutAlign | undefined): React.CSSProperties['alignItems'] =>\n  value === 'start' || value === 'end' ? `flex-${value}` : value;\n\nconst cssJustify = (value: LayoutJustify | undefined): React.CSSProperties['justifyContent'] => {\n  const aliases: Record<string, React.CSSProperties['justifyContent']> = {\n    start: 'flex-start',\n    end: 'flex-end',\n    between: 'space-between',\n    around: 'space-around',\n    evenly: 'space-evenly',\n  };\n  return typeof value === 'string' ? aliases[value] ?? value : value;\n};\n\nconst cssGap = (value: LayoutGap | undefined): string | undefined =>\n  typeof value === 'number' ? `${value}px` : value;\n\nconst positiveInteger = (value: number, name: string): number => {\n  if (!Number.isInteger(value) || value <= 0) {\n    throw new Error(`Layout.${name} must be a positive integer.`);\n  }\n  return value;\n};\n\nconst positiveNumber = (value: number, name: string): number => {\n  if (!Number.isFinite(value) || value <= 0) {\n    throw new Error(`Layout.${name} must be a positive number.`);\n  }\n  return value;\n};\n\nconst gridTemplateColumns = (columns: GridColumns): string => {\n  if (typeof columns === 'number') {\n    return `repeat(${positiveInteger(columns, 'Grid columns')}, minmax(0, 1fr))`;\n  }\n\n  if (typeof columns === 'string') {\n    return columns;\n  }\n\n  if (columns.length === 0) {\n    throw new Error('Layout.Grid columns ratio must contain at least one value.');\n  }\n\n  return columns\n    .map((ratio) => `${positiveNumber(ratio, 'Grid ratio')}fr`)\n    .join(' ');\n};\n\nconst gridSpan = (value: GridPlacement | undefined): string | number | undefined =>\n  typeof value === 'number'\n    ? `span ${positiveInteger(value, 'Grid.Item span')} / span ${value}`\n    : value;\n\nconst gridStart = (value: GridPlacement | undefined, name: string): string | number | undefined =>\n  typeof value === 'number' ? positiveInteger(value, name) : value;\n\nconst Container = forwardRef<HTMLDivElement, LayoutContainerProps>(function LayoutContainer(\n  {\n    maxWidth = 1280,\n    padding = '1rem',\n    centered = true,\n    fluid = false,\n    responsive = false,\n    className = '',\n    style,\n    ...props\n  },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={['dishui-layout-container', className].filter(Boolean).join(' ')}\n      style={{\n        width: '100%',\n        maxWidth: fluid ? undefined : cssMaxWidth(maxWidth),\n        marginInline: centered && !fluid ? 'auto' : undefined,\n        paddingInline: responsive\n          ? `clamp(${cssSize(padding)}, 4vw, max(${cssSize(padding)}, 2rem))`\n          : cssSize(padding),\n        ...style,\n      }}\n      {...props}\n    />\n  );\n});\n\nconst GridItem = forwardRef<HTMLDivElement, LayoutGridItemProps>(function LayoutGridItem(\n  { span, start, offset, rowSpan, rowStart, className = '', style, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={['dishui-layout-grid-item', className].filter(Boolean).join(' ')}\n      style={{\n        gridColumn: gridSpan(span),\n        gridColumnStart: gridStart(\n          start ?? (offset !== undefined ? positiveInteger(offset + 1, 'Grid.Item offset') : undefined),\n          'Grid.Item start',\n        ),\n        gridRow: gridSpan(rowSpan),\n        gridRowStart: gridStart(rowStart, 'Grid.Item rowStart'),\n        minWidth: 0,\n        ...style,\n      }}\n      {...props}\n    />\n  );\n});\n\nconst GridRoot = forwardRef<HTMLDivElement, LayoutGridProps>(function LayoutGrid(\n  {\n    columns = 12,\n    gap,\n    space,\n    rowGap,\n    columnGap,\n    align,\n    justify,\n    autoRows,\n    dense = false,\n    className = '',\n    style,\n    ...props\n  },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={['dishui-layout-grid', className].filter(Boolean).join(' ')}\n      style={{\n        display: 'grid',\n        gridTemplateColumns: gridTemplateColumns(columns),\n        gap: cssGap(gap ?? space),\n        rowGap: cssGap(rowGap),\n        columnGap: cssGap(columnGap),\n        alignItems: cssAlign(align),\n        justifyContent: cssJustify(justify),\n        gridAutoRows: autoRows,\n        gridAutoFlow: dense ? 'row dense' : undefined,\n        ...style,\n      }}\n      {...props}\n    />\n  );\n});\n\nconst Group = forwardRef<HTMLDivElement, LayoutGroupProps>(function LayoutGroup(\n  {\n    direction = 'row',\n    wrap = 'nowrap',\n    align = 'center',\n    justify = 'start',\n    gap,\n    fullWidth = false,\n    className = '',\n    style,\n    ...props\n  },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={['dishui-layout-group', className].filter(Boolean).join(' ')}\n      style={{\n        display: 'flex',\n        width: fullWidth ? '100%' : undefined,\n        flexDirection: direction,\n        flexWrap: wrap,\n        alignItems: cssAlign(align),\n        justifyContent: cssJustify(justify),\n        gap: cssGap(gap),\n        ...style,\n      }}\n      {...props}\n    />\n  );\n});\n\nconst Space = forwardRef<HTMLSpanElement, LayoutSpaceProps>(function LayoutSpace(\n  { direction = 'horizontal', size = 16, flex, className = '', style, ...props },\n  ref,\n) {\n  const dimension = cssSize(size);\n\n  return (\n    <span\n      ref={ref}\n      aria-hidden=\"true\"\n      className={['dishui-layout-space', className].filter(Boolean).join(' ')}\n      style={{\n        display: 'block',\n        flex: flex ?? '0 0 auto',\n        width: direction === 'horizontal' ? dimension : '100%',\n        minWidth: direction === 'horizontal' ? dimension : undefined,\n        height: direction === 'vertical' ? dimension : 1,\n        minHeight: direction === 'vertical' ? dimension : undefined,\n        pointerEvents: 'none',\n        ...style,\n      }}\n      {...props}\n    />\n  );\n});\n\nconst Flex = forwardRef<HTMLDivElement, LayoutFlexProps>(function LayoutFlex(\n  {\n    direction = 'row',\n    wrap = 'nowrap',\n    align,\n    justify,\n    gap,\n    rowGap,\n    columnGap,\n    inline = false,\n    className = '',\n    style,\n    ...props\n  },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={['dishui-layout-flex', className].filter(Boolean).join(' ')}\n      style={{\n        display: inline ? 'inline-flex' : 'flex',\n        flexDirection: direction,\n        flexWrap: wrap,\n        alignItems: cssAlign(align),\n        justifyContent: cssJustify(justify),\n        gap: cssGap(gap),\n        rowGap: cssGap(rowGap),\n        columnGap: cssGap(columnGap),\n        ...style,\n      }}\n      {...props}\n    />\n  );\n});\n\ninterface LayoutGridCompound extends React.ForwardRefExoticComponent<\n  LayoutGridProps & React.RefAttributes<HTMLDivElement>\n> {\n  Item: typeof GridItem;\n}\n\nconst Grid = GridRoot as LayoutGridCompound;\nGrid.Item = GridItem;\n\nexport interface LayoutCompound {\n  Container: typeof Container;\n  Grid: LayoutGridCompound;\n  Flex: typeof Flex;\n  Group: typeof Group;\n  Space: typeof Space;\n}\n\nconst Layout: LayoutCompound = {\n  Container,\n  Grid,\n  Flex,\n  Group,\n  Space,\n};\n\nexport { Container, Grid, GridItem, Flex, Group, Space };\nexport default Layout;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Layout/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport type LayoutGap = number | string;\nexport type GridColumns = number | readonly number[] | string;\nexport type GridPlacement = number | string;\nexport type LayoutMaxWidth = number | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | string;\nexport type LayoutAlign = React.CSSProperties['alignItems'] | 'start' | 'end';\nexport type LayoutJustify = React.CSSProperties['justifyContent'] | 'start' | 'end' | 'between' | 'around' | 'evenly';\n\nexport type LayoutContainerProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** Maximum content width. Numbers are interpreted as pixels. */\n  maxWidth?: LayoutMaxWidth;\n  /** Horizontal container padding. Numbers are interpreted as pixels. */\n  padding?: number | string;\n  /** Centers the container when a max width is applied. */\n  centered?: boolean;\n  /** Makes the container span the available width. */\n  fluid?: boolean;\n  /** Uses adaptive horizontal padding that grows with the viewport. */\n  responsive?: boolean;\n};\n\nexport type LayoutGridProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** Column count (12 by default) or a custom ratio such as [1, 2, 1] or \"1fr 2fr 1fr\". */\n  columns?: GridColumns;\n  gap?: LayoutGap;\n  /** Alias for gap. gap takes precedence when both are provided. */\n  space?: LayoutGap;\n  rowGap?: LayoutGap;\n  columnGap?: LayoutGap;\n  align?: LayoutAlign;\n  justify?: LayoutJustify;\n  autoRows?: React.CSSProperties['gridAutoRows'];\n  dense?: boolean;\n};\n\nexport type LayoutGridItemProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** Number of grid tracks to span, or a valid CSS grid-column value. */\n  span?: GridPlacement;\n  /** One-based grid column start, or a valid CSS grid-column-start value. */\n  start?: GridPlacement;\n  /** Number of empty tracks before the item. Ignored when start is set. */\n  offset?: number;\n  rowSpan?: GridPlacement;\n  rowStart?: GridPlacement;\n};\n\nexport type LayoutFlexProps = React.HTMLAttributes<HTMLDivElement> & {\n  direction?: React.CSSProperties['flexDirection'];\n  wrap?: React.CSSProperties['flexWrap'];\n  align?: LayoutAlign;\n  justify?: LayoutJustify;\n  gap?: LayoutGap;\n  rowGap?: LayoutGap;\n  columnGap?: LayoutGap;\n  inline?: boolean;\n};\n\nexport type LayoutGroupProps = React.HTMLAttributes<HTMLDivElement> & {\n  direction?: React.CSSProperties['flexDirection'];\n  wrap?: React.CSSProperties['flexWrap'];\n  align?: LayoutAlign;\n  justify?: LayoutJustify;\n  gap?: LayoutGap;\n  fullWidth?: boolean;\n};\n\nexport type LayoutSpaceProps = React.HTMLAttributes<HTMLSpanElement> & {\n  direction?: 'horizontal' | 'vertical';\n  /** Width for horizontal spaces and height for vertical spaces. */\n  size?: number | string;\n  /** Makes the spacer consume remaining flex space. */\n  flex?: number | string;\n};\n\nconst maxWidths: Record<string, string> = {\n  sm: '640px',\n  md: '768px',\n  lg: '1024px',\n  xl: '1280px',\n  '2xl': '1536px',\n  full: '100%',\n};\n\nconst cssSize = (value: number | string | undefined): string | undefined =>\n  typeof value === 'number' ? `${value}px` : value;\n\nconst cssMaxWidth = (value: LayoutMaxWidth | undefined): string | undefined =>\n  typeof value === 'string' ? maxWidths[value] ?? value : cssSize(value);\n\nconst cssAlign = (value: LayoutAlign | undefined): React.CSSProperties['alignItems'] =>\n  value === 'start' || value === 'end' ? `flex-${value}` : value;\n\nconst cssJustify = (value: LayoutJustify | undefined): React.CSSProperties['justifyContent'] => {\n  const aliases: Record<string, React.CSSProperties['justifyContent']> = {\n    start: 'flex-start',\n    end: 'flex-end',\n    between: 'space-between',\n    around: 'space-around',\n    evenly: 'space-evenly',\n  };\n  return typeof value === 'string' ? aliases[value] ?? value : value;\n};\n\nconst cssGap = (value: LayoutGap | undefined): string | undefined =>\n  typeof value === 'number' ? `${value}px` : value;\n\nconst positiveInteger = (value: number, name: string): number => {\n  if (!Number.isInteger(value) || value <= 0) {\n    throw new Error(`Layout.${name} must be a positive integer.`);\n  }\n  return value;\n};\n\nconst positiveNumber = (value: number, name: string): number => {\n  if (!Number.isFinite(value) || value <= 0) {\n    throw new Error(`Layout.${name} must be a positive number.`);\n  }\n  return value;\n};\n\nconst gridTemplateColumns = (columns: GridColumns): string => {\n  if (typeof columns === 'number') {\n    return `repeat(${positiveInteger(columns, 'Grid columns')}, minmax(0, 1fr))`;\n  }\n\n  if (typeof columns === 'string') {\n    return columns;\n  }\n\n  if (columns.length === 0) {\n    throw new Error('Layout.Grid columns ratio must contain at least one value.');\n  }\n\n  return columns\n    .map((ratio) => `${positiveNumber(ratio, 'Grid ratio')}fr`)\n    .join(' ');\n};\n\nconst gridSpan = (value: GridPlacement | undefined): string | number | undefined =>\n  typeof value === 'number'\n    ? `span ${positiveInteger(value, 'Grid.Item span')} / span ${value}`\n    : value;\n\nconst gridStart = (value: GridPlacement | undefined, name: string): string | number | undefined =>\n  typeof value === 'number' ? positiveInteger(value, name) : value;\n\nconst Container = forwardRef<HTMLDivElement, LayoutContainerProps>(function LayoutContainer(\n  {\n    maxWidth = 1280,\n    padding = '1rem',\n    centered = true,\n    fluid = false,\n    responsive = false,\n    className = '',\n    style,\n    ...props\n  },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn('dishui-layout-container', className)}\n      style={{\n        width: '100%',\n        maxWidth: fluid ? undefined : cssMaxWidth(maxWidth),\n        marginInline: centered && !fluid ? 'auto' : undefined,\n        paddingInline: responsive\n          ? `clamp(${cssSize(padding)}, 4vw, max(${cssSize(padding)}, 2rem))`\n          : cssSize(padding),\n        ...style,\n      }}\n      {...props}\n    />\n  );\n});\n\nconst GridItem = forwardRef<HTMLDivElement, LayoutGridItemProps>(function LayoutGridItem(\n  { span, start, offset, rowSpan, rowStart, className = '', style, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn('dishui-layout-grid-item', className)}\n      style={{\n        gridColumn: gridSpan(span),\n        gridColumnStart: gridStart(\n          start ?? (offset !== undefined ? positiveInteger(offset + 1, 'Grid.Item offset') : undefined),\n          'Grid.Item start',\n        ),\n        gridRow: gridSpan(rowSpan),\n        gridRowStart: gridStart(rowStart, 'Grid.Item rowStart'),\n        minWidth: 0,\n        ...style,\n      }}\n      {...props}\n    />\n  );\n});\n\nconst GridRoot = forwardRef<HTMLDivElement, LayoutGridProps>(function LayoutGrid(\n  {\n    columns = 12,\n    gap,\n    space,\n    rowGap,\n    columnGap,\n    align,\n    justify,\n    autoRows,\n    dense = false,\n    className = '',\n    style,\n    ...props\n  },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn('dishui-layout-grid', className)}\n      style={{\n        display: 'grid',\n        gridTemplateColumns: gridTemplateColumns(columns),\n        gap: cssGap(gap ?? space),\n        rowGap: cssGap(rowGap),\n        columnGap: cssGap(columnGap),\n        alignItems: cssAlign(align),\n        justifyContent: cssJustify(justify),\n        gridAutoRows: autoRows,\n        gridAutoFlow: dense ? 'row dense' : undefined,\n        ...style,\n      }}\n      {...props}\n    />\n  );\n});\n\nconst Group = forwardRef<HTMLDivElement, LayoutGroupProps>(function LayoutGroup(\n  {\n    direction = 'row',\n    wrap = 'nowrap',\n    align = 'center',\n    justify = 'start',\n    gap,\n    fullWidth = false,\n    className = '',\n    style,\n    ...props\n  },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn('dishui-layout-group', className)}\n      style={{\n        display: 'flex',\n        width: fullWidth ? '100%' : undefined,\n        flexDirection: direction,\n        flexWrap: wrap,\n        alignItems: cssAlign(align),\n        justifyContent: cssJustify(justify),\n        gap: cssGap(gap),\n        ...style,\n      }}\n      {...props}\n    />\n  );\n});\n\nconst Space = forwardRef<HTMLSpanElement, LayoutSpaceProps>(function LayoutSpace(\n  { direction = 'horizontal', size = 16, flex, className = '', style, ...props },\n  ref,\n) {\n  const dimension = cssSize(size);\n\n  return (\n    <span\n      ref={ref}\n      aria-hidden=\"true\"\n      className={cn('dishui-layout-space', className)}\n      style={{\n        display: 'block',\n        flex: flex ?? '0 0 auto',\n        width: direction === 'horizontal' ? dimension : '100%',\n        minWidth: direction === 'horizontal' ? dimension : undefined,\n        height: direction === 'vertical' ? dimension : 1,\n        minHeight: direction === 'vertical' ? dimension : undefined,\n        pointerEvents: 'none',\n        ...style,\n      }}\n      {...props}\n    />\n  );\n});\n\nconst Flex = forwardRef<HTMLDivElement, LayoutFlexProps>(function LayoutFlex(\n  {\n    direction = 'row',\n    wrap = 'nowrap',\n    align,\n    justify,\n    gap,\n    rowGap,\n    columnGap,\n    inline = false,\n    className = '',\n    style,\n    ...props\n  },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn('dishui-layout-flex', className)}\n      style={{\n        display: inline ? 'inline-flex' : 'flex',\n        flexDirection: direction,\n        flexWrap: wrap,\n        alignItems: cssAlign(align),\n        justifyContent: cssJustify(justify),\n        gap: cssGap(gap),\n        rowGap: cssGap(rowGap),\n        columnGap: cssGap(columnGap),\n        ...style,\n      }}\n      {...props}\n    />\n  );\n});\n\ninterface LayoutGridCompound extends React.ForwardRefExoticComponent<\n  LayoutGridProps & React.RefAttributes<HTMLDivElement>\n> {\n  Item: typeof GridItem;\n}\n\nconst Grid = GridRoot as LayoutGridCompound;\nGrid.Item = GridItem;\n\nexport interface LayoutCompound {\n  Container: typeof Container;\n  Grid: LayoutGridCompound;\n  Flex: typeof Flex;\n  Group: typeof Group;\n  Space: typeof Space;\n}\n\nconst Layout: LayoutCompound = {\n  Container,\n  Grid,\n  Flex,\n  Group,\n  Space,\n};\n\nexport { Container, Grid, GridItem, Flex, Group, Space };\nexport default Layout;\n"],"mappings":"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"}