@lobehub/ui 5.48.2 → 5.49.0

package/es/dashboard/FilterSidebar/FilterSidebar.mjs

@@ -0,0 +1,151 @@
+"use client";
+import Button from "../../base-ui/Button/Button.mjs";
+import DraggablePanel from "../../base-ui/DraggablePanel/DraggablePanel.mjs";
+import Drawer from "../../base-ui/Drawer/Drawer.mjs";
+import { styles } from "../Surface/style.mjs";
+import { useIsCompact, useLocalStorage } from "../hooks.mjs";
+import { FilterSplitProvider } from "./context.mjs";
+import { styles as styles$1 } from "./style.mjs";
+import { clampSidebarWidth, sidebarWidth } from "./width.mjs";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Filter } from "lucide-react";
+//#region src/dashboard/FilterSidebar/FilterSidebar.tsx
+function usePageSidebar(wide, storageKey) {
+	const fallback = wide ? sidebarWidth.wide : sidebarWidth.narrow;
+	const [prefs, setPrefs] = useLocalStorage(storageKey, {
+		expand: true,
+		width: fallback
+	});
+	return {
+		expand: prefs.expand !== false,
+		onExpandChange: (expand) => setPrefs((current) => ({
+			...current,
+			expand
+		})),
+		onSizeChange: (size) => {
+			const next = typeof size.width === "number" ? size.width : fallback;
+			setPrefs((current) => ({
+				...current,
+				width: clampSidebarWidth(next, fallback)
+			}));
+		},
+		width: clampSidebarWidth(Number(prefs.width), fallback)
+	};
+}
+function FilterSidebar({ body, children, flush, head, header, label, storageKey, summary, wide }) {
+	const isCompact = useIsCompact();
+	const [drawerOpen, setDrawerOpen] = useState(false);
+	const sidebar = usePageSidebar(wide, storageKey);
+	const close = () => setDrawerOpen(false);
+	if (isCompact) return /* @__PURE__ */ jsx(FilterSplitProvider, {
+		active: !flush,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: styles$1.layout,
+			children: [
+				header,
+				/* @__PURE__ */ jsx(Button, {
+					block: true,
+					icon: Filter,
+					onClick: () => setDrawerOpen(true),
+					children: summary
+				}),
+				/* @__PURE__ */ jsx(Drawer, {
+					open: drawerOpen,
+					placement: "left",
+					title: label,
+					width: 300,
+					onClose: close,
+					children: /* @__PURE__ */ jsxs("div", {
+						className: styles$1.drawerPanel,
+						children: [head?.(close), body(close)]
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: styles$1.content,
+					children
+				})
+			]
+		})
+	});
+	return /* @__PURE__ */ jsx(FilterSplitProvider, {
+		active: !flush,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: flush ? styles$1.layout : `${styles$1.layout} ${styles.card}`,
+			"data-flush": flush ? true : void 0,
+			"data-page-layout": flush ? "flush" : void 0,
+			"data-split-card": flush ? void 0 : true,
+			children: [/* @__PURE__ */ jsxs(DraggablePanel, {
+				expandable: true,
+				showHandleWhenCollapsed: true,
+				"aria-label": label,
+				className: styles$1.sidebar,
+				classNames: { content: styles$1.panel },
+				collapseThreshold: sidebarWidth.collapse,
+				"data-flush": flush ? true : void 0,
+				defaultSize: { width: wide ? sidebarWidth.wide : sidebarWidth.narrow },
+				expand: sidebar.expand,
+				maxWidth: sidebarWidth.max,
+				minWidth: sidebarWidth.min,
+				mode: "fixed",
+				placement: "left",
+				showBorder: false,
+				size: { width: sidebar.width },
+				onExpandChange: sidebar.onExpandChange,
+				onSizeChange: (_delta, size) => sidebar.onSizeChange(size),
+				children: [head ? /* @__PURE__ */ jsx("div", {
+					className: styles$1.head,
+					children: head(close)
+				}) : null, /* @__PURE__ */ jsx("div", {
+					className: styles$1.body,
+					"data-flush": flush ? true : void 0,
+					children: body(close)
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: styles$1.content,
+				"data-flush": flush ? true : void 0,
+				children: [header, children]
+			})]
+		})
+	});
+}
+FilterSidebar.displayName = "FilterSidebar";
+function FilterRow({ count, name }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: styles$1.row,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: styles$1.name,
+			children: name
+		}), count !== void 0 ? /* @__PURE__ */ jsx("span", {
+			className: styles$1.count,
+			children: count
+		}) : null]
+	});
+}
+FilterRow.displayName = "FilterRow";
+function FilterOption({ count, icon, label, name, onClick, selected, title }) {
+	return /* @__PURE__ */ jsxs("button", {
+		"aria-label": label,
+		"aria-pressed": selected,
+		className: styles$1.option,
+		title,
+		type: "button",
+		onClick,
+		children: [
+			icon,
+			/* @__PURE__ */ jsx("span", {
+				className: styles$1.name,
+				children: name
+			}),
+			count !== void 0 ? /* @__PURE__ */ jsx("span", {
+				className: styles$1.count,
+				children: count
+			}) : null
+		]
+	});
+}
+FilterOption.displayName = "FilterOption";
+//#endregion
+export { FilterOption, FilterRow, FilterSidebar as default };
+
+//# sourceMappingURL=FilterSidebar.mjs.map

package/es/dashboard/FilterSidebar/FilterSidebar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterSidebar.mjs","names":["styles","surfaceStyles"],"sources":["../../../src/dashboard/FilterSidebar/FilterSidebar.tsx"],"sourcesContent":["'use client';\n\nimport { Filter } from 'lucide-react';\nimport { useState } from 'react';\n\nimport Button from '@/base-ui/Button';\nimport { DraggablePanel } from '@/base-ui/DraggablePanel';\nimport { Drawer } from '@/base-ui/Drawer';\n\nimport { useIsCompact, useLocalStorage } from '../hooks';\nimport { styles as surfaceStyles } from '../Surface/style';\nimport { FilterSplitProvider } from './context';\nimport { styles } from './style';\nimport type { FilterOptionProps, FilterRowProps, FilterSidebarProps } from './type';\nimport { clampSidebarWidth, sidebarWidth } from './width';\n\nfunction usePageSidebar(wide: boolean | undefined, storageKey: string | undefined) {\n  const fallback = wide ? sidebarWidth.wide : sidebarWidth.narrow;\n  const [prefs, setPrefs] = useLocalStorage<{ expand?: boolean; width?: number }>(storageKey, {\n    expand: true,\n    width: fallback,\n  });\n  return {\n    expand: prefs.expand !== false,\n    onExpandChange: (expand: boolean) => setPrefs((current) => ({ ...current, expand })),\n    onSizeChange: (size: { width?: number | string }) => {\n      const next = typeof size.width === 'number' ? size.width : fallback;\n      setPrefs((current) => ({ ...current, width: clampSidebarWidth(next, fallback) }));\n    },\n    width: clampSidebarWidth(Number(prefs.width), fallback),\n  };\n}\n\nfunction FilterSidebar({\n  body,\n  children,\n  flush,\n  head,\n  header,\n  label,\n  storageKey,\n  summary,\n  wide,\n}: FilterSidebarProps) {\n  const isCompact = useIsCompact();\n  const [drawerOpen, setDrawerOpen] = useState(false);\n  const sidebar = usePageSidebar(wide, storageKey);\n  const close = () => setDrawerOpen(false);\n\n  if (isCompact) {\n    return (\n      <FilterSplitProvider active={!flush}>\n        <div className={styles.layout}>\n          {header}\n          <Button block icon={Filter} onClick={() => setDrawerOpen(true)}>\n            {summary}\n          </Button>\n          <Drawer open={drawerOpen} placement=\"left\" title={label} width={300} onClose={close}>\n            <div className={styles.drawerPanel}>\n              {head?.(close)}\n              {body(close)}\n            </div>\n          </Drawer>\n          <div className={styles.content}>{children}</div>\n        </div>\n      </FilterSplitProvider>\n    );\n  }\n\n  return (\n    <FilterSplitProvider active={!flush}>\n      <div\n        className={flush ? styles.layout : `${styles.layout} ${surfaceStyles.card}`}\n        data-flush={flush ? true : undefined}\n        data-page-layout={flush ? 'flush' : undefined}\n        data-split-card={flush ? undefined : true}\n      >\n        <DraggablePanel\n          expandable\n          showHandleWhenCollapsed\n          aria-label={label}\n          className={styles.sidebar}\n          classNames={{ content: styles.panel }}\n          collapseThreshold={sidebarWidth.collapse}\n          data-flush={flush ? true : undefined}\n          defaultSize={{ width: wide ? sidebarWidth.wide : sidebarWidth.narrow }}\n          expand={sidebar.expand}\n          maxWidth={sidebarWidth.max}\n          minWidth={sidebarWidth.min}\n          mode=\"fixed\"\n          placement=\"left\"\n          showBorder={false}\n          size={{ width: sidebar.width }}\n          onExpandChange={sidebar.onExpandChange}\n          onSizeChange={(_delta, size) => sidebar.onSizeChange(size)}\n        >\n          {head ? <div className={styles.head}>{head(close)}</div> : null}\n          <div className={styles.body} data-flush={flush ? true : undefined}>\n            {body(close)}\n          </div>\n        </DraggablePanel>\n        <div className={styles.content} data-flush={flush ? true : undefined}>\n          {header}\n          {children}\n        </div>\n      </div>\n    </FilterSplitProvider>\n  );\n}\n\nFilterSidebar.displayName = 'FilterSidebar';\n\nfunction FilterRow({ count, name }: FilterRowProps) {\n  return (\n    <span className={styles.row}>\n      <span className={styles.name}>{name}</span>\n      {count !== undefined ? <span className={styles.count}>{count}</span> : null}\n    </span>\n  );\n}\n\nFilterRow.displayName = 'FilterRow';\n\nfunction FilterOption({ count, icon, label, name, onClick, selected, title }: FilterOptionProps) {\n  return (\n    <button\n      aria-label={label}\n      aria-pressed={selected}\n      className={styles.option}\n      title={title}\n      type=\"button\"\n      onClick={onClick}\n    >\n      {icon}\n      <span className={styles.name}>{name}</span>\n      {count !== undefined ? <span className={styles.count}>{count}</span> : null}\n    </button>\n  );\n}\n\nFilterOption.displayName = 'FilterOption';\n\nexport { FilterOption, FilterRow };\nexport default FilterSidebar;\n"],"mappings":"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"}

package/es/dashboard/FilterSidebar/context.d.mts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+//#region src/dashboard/FilterSidebar/context.d.ts
+/** True when this content sits in a filter split that is itself the card. */
+declare function useInFilterSplit(): boolean;
+//#endregion
+export { useInFilterSplit };
+//# sourceMappingURL=context.d.mts.map

package/es/dashboard/FilterSidebar/context.mjs

@@ -0,0 +1,19 @@
+"use client";
+import { createContext, use } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/dashboard/FilterSidebar/context.tsx
+const FilterSplitContext = createContext(false);
+function FilterSplitProvider({ active, children }) {
+	return /* @__PURE__ */ jsx(FilterSplitContext, {
+		value: active,
+		children
+	});
+}
+/** True when this content sits in a filter split that is itself the card. */
+function useInFilterSplit() {
+	return use(FilterSplitContext);
+}
+//#endregion
+export { FilterSplitProvider, useInFilterSplit };
+
+//# sourceMappingURL=context.mjs.map

package/es/dashboard/FilterSidebar/context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.mjs","names":[],"sources":["../../../src/dashboard/FilterSidebar/context.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { createContext, use } from 'react';\n\nconst FilterSplitContext = createContext(false);\n\nexport function FilterSplitProvider({\n  active,\n  children,\n}: {\n  active: boolean;\n  children: ReactNode;\n}) {\n  return <FilterSplitContext value={active}>{children}</FilterSplitContext>;\n}\n\n/** True when this content sits in a filter split that is itself the card. */\nexport function useInFilterSplit() {\n  return use(FilterSplitContext);\n}\n"],"mappings":";;;;AAKA,MAAM,qBAAqB,cAAc,KAAK;AAE9C,SAAgB,oBAAoB,EAClC,QACA,YAIC;CACD,OAAO,oBAAC,oBAAD;EAAoB,OAAO;EAAS;CAA6B,CAAA;AAC1E;;AAGA,SAAgB,mBAAmB;CACjC,OAAO,IAAI,kBAAkB;AAC/B"}

package/es/dashboard/FilterSidebar/index.d.mts

@@ -0,0 +1,4 @@
+import { useInFilterSplit } from "./context.mjs";
+import { FilterOptionProps, FilterRowProps, FilterSidebarProps } from "./type.mjs";
+import FilterSidebar, { FilterOption, FilterRow } from "./FilterSidebar.mjs";
+export { FilterOption, type FilterOptionProps, FilterRow, type FilterRowProps, type FilterSidebarProps, FilterSidebar as default, useInFilterSplit };

package/es/dashboard/FilterSidebar/style.mjs

@@ -0,0 +1,155 @@
+import { createStaticStyles } from "antd-style";
+//#region src/dashboard/FilterSidebar/style.ts
+const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
+	body: css`
+    overflow-y: auto;
+    max-block-size: 360px;
+    padding-block-end: 16px;
+    padding-inline: 12px;
+
+    &[data-flush='true'] {
+      flex: 1;
+      min-block-size: 0;
+      max-block-size: none;
+    }
+  `,
+	content: css`
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 16px;
+
+    min-inline-size: 0;
+    padding-inline-start: 20px;
+
+    &[data-flush='true'] {
+      overflow-y: auto;
+      padding: 24px;
+    }
+
+    [data-split-card='true'] & {
+      padding-block: 16px 0;
+      padding-inline: 16px;
+
+      > :last-child {
+        margin-inline: -16px;
+      }
+    }
+
+    ${responsive.laptop} {
+      overflow: visible;
+      padding: 0;
+
+      > :last-child {
+        margin-inline: 0;
+      }
+    }
+  `,
+	count: css`
+    flex: none;
+    font-size: ${cssVar.fontSizeSM};
+    font-variant-numeric: tabular-nums;
+    color: ${cssVar.colorTextTertiary};
+  `,
+	drawerPanel: css`
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  `,
+	head: css`
+    display: flex;
+    flex: none;
+    flex-direction: column;
+    gap: 8px;
+
+    padding: 12px;
+  `,
+	layout: css`
+    display: flex;
+
+    &[data-flush='true'] {
+      flex: 1;
+      min-block-size: 0;
+    }
+
+    &[data-split-card='true'] {
+      overflow: hidden;
+      align-items: stretch;
+    }
+
+    ${responsive.laptop} {
+      flex-direction: column;
+      gap: 12px;
+    }
+  `,
+	name: css`
+    overflow: hidden;
+    flex: 1;
+
+    min-inline-size: 0;
+
+    text-align: start;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+	option: css`
+    cursor: pointer;
+
+    display: flex;
+    gap: 6px;
+    align-items: center;
+
+    inline-size: 100%;
+    min-block-size: 36px;
+    padding-inline: 8px;
+    border: none;
+    border-radius: ${cssVar.borderRadius};
+
+    font: inherit;
+    color: ${cssVar.colorText};
+
+    background: none;
+
+    &:hover {
+      background: ${cssVar.colorFillTertiary};
+    }
+
+    &[aria-pressed='true'] {
+      font-weight: 500;
+      background: ${cssVar.controlItemBgActive};
+    }
+  `,
+	row: css`
+    display: flex;
+    flex: 1;
+    gap: 6px;
+    align-items: center;
+
+    min-inline-size: 0;
+  `,
+	panel: css`
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    min-block-size: 0;
+    border-inline-end: 1px solid ${cssVar.colorBorderSecondary};
+
+    [data-split-card='true'] & {
+      block-size: 100%;
+      border-inline-end-color: ${cssVar.colorBorder};
+    }
+  `,
+	sidebar: css`
+    align-self: stretch;
+    min-block-size: 0;
+
+    &[data-flush='true'] {
+      block-size: 100%;
+    }
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/dashboard/FilterSidebar/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/FilterSidebar/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  body: css`\n    overflow-y: auto;\n    max-block-size: 360px;\n    padding-block-end: 16px;\n    padding-inline: 12px;\n\n    &[data-flush='true'] {\n      flex: 1;\n      min-block-size: 0;\n      max-block-size: none;\n    }\n  `,\n  content: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 16px;\n\n    min-inline-size: 0;\n    padding-inline-start: 20px;\n\n    &[data-flush='true'] {\n      overflow-y: auto;\n      padding: 24px;\n    }\n\n    [data-split-card='true'] & {\n      padding-block: 16px 0;\n      padding-inline: 16px;\n\n      > :last-child {\n        margin-inline: -16px;\n      }\n    }\n\n    ${responsive.laptop} {\n      overflow: visible;\n      padding: 0;\n\n      > :last-child {\n        margin-inline: 0;\n      }\n    }\n  `,\n  count: css`\n    flex: none;\n    font-size: ${cssVar.fontSizeSM};\n    font-variant-numeric: tabular-nums;\n    color: ${cssVar.colorTextTertiary};\n  `,\n  drawerPanel: css`\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  `,\n  head: css`\n    display: flex;\n    flex: none;\n    flex-direction: column;\n    gap: 8px;\n\n    padding: 12px;\n  `,\n  layout: css`\n    display: flex;\n\n    &[data-flush='true'] {\n      flex: 1;\n      min-block-size: 0;\n    }\n\n    &[data-split-card='true'] {\n      overflow: hidden;\n      align-items: stretch;\n    }\n\n    ${responsive.laptop} {\n      flex-direction: column;\n      gap: 12px;\n    }\n  `,\n  name: css`\n    overflow: hidden;\n    flex: 1;\n\n    min-inline-size: 0;\n\n    text-align: start;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  option: css`\n    cursor: pointer;\n\n    display: flex;\n    gap: 6px;\n    align-items: center;\n\n    inline-size: 100%;\n    min-block-size: 36px;\n    padding-inline: 8px;\n    border: none;\n    border-radius: ${cssVar.borderRadius};\n\n    font: inherit;\n    color: ${cssVar.colorText};\n\n    background: none;\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &[aria-pressed='true'] {\n      font-weight: 500;\n      background: ${cssVar.controlItemBgActive};\n    }\n  `,\n  row: css`\n    display: flex;\n    flex: 1;\n    gap: 6px;\n    align-items: center;\n\n    min-inline-size: 0;\n  `,\n  panel: css`\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n\n    min-block-size: 0;\n    border-inline-end: 1px solid ${cssVar.colorBorderSecondary};\n\n    [data-split-card='true'] & {\n      block-size: 100%;\n      border-inline-end-color: ${cssVar.colorBorder};\n    }\n  `,\n  sidebar: css`\n    align-self: stretch;\n    min-block-size: 0;\n\n    &[data-flush='true'] {\n      block-size: 100%;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,MAAM,GAAG;;;;;;;;;;;;CAYT,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;MAuBR,WAAW,OAAO;;;;;;;;;CAStB,OAAO,GAAG;;iBAEK,OAAO,WAAW;;aAEtB,OAAO,kBAAkB;;CAEpC,aAAa,GAAG;;;;;CAKhB,MAAM,GAAG;;;;;;;;CAQT,QAAQ,GAAG;;;;;;;;;;;;;MAaP,WAAW,OAAO;;;;;CAKtB,MAAM,GAAG;;;;;;;;;;CAUT,QAAQ,GAAG;;;;;;;;;;;qBAWQ,OAAO,aAAa;;;aAG5B,OAAO,UAAU;;;;;oBAKV,OAAO,kBAAkB;;;;;oBAKzB,OAAO,oBAAoB;;;CAG7C,KAAK,GAAG;;;;;;;;CAQR,OAAO,GAAG;;;;;;mCAMuB,OAAO,qBAAqB;;;;iCAI9B,OAAO,YAAY;;;CAGlD,SAAS,GAAG;;;;;;;;AAQd,EAAE"}

package/es/dashboard/FilterSidebar/type.d.mts

@@ -0,0 +1,44 @@
+import { ReactNode } from "react";
+//#region src/dashboard/FilterSidebar/type.d.ts
+interface FilterSidebarProps {
+  /** Scrolling choices. `dismiss` closes the compact drawer. */
+  body: (dismiss: () => void) => ReactNode;
+  children: ReactNode;
+  /**
+   * Fill the parent and scroll the two panes separately.
+   * Leave this off when a header or tabs sit above the split.
+   */
+  flush?: boolean;
+  /**
+   * Fixed controls, such as search. They stay put while `body` scrolls.
+   * `dismiss` closes the compact drawer.
+   */
+  head?: (dismiss: () => void) => ReactNode;
+  /** Title block rendered in the content pane, above the compact trigger. */
+  header?: ReactNode;
+  /** Names the sidebar, and titles the drawer on compact screens. */
+  label: string;
+  /** Persists width and collapsed state. */
+  storageKey?: string;
+  /** Current filter, shown on the compact trigger. */
+  summary: string;
+  /** Wider rail. Default width is 264px; wide is 300px. */
+  wide?: boolean;
+}
+interface FilterRowProps {
+  count?: ReactNode;
+  name: ReactNode;
+}
+interface FilterOptionProps {
+  count?: ReactNode;
+  icon?: ReactNode;
+  /** Overrides the accessible name when the visible one lacks context. */
+  label?: string;
+  name: ReactNode;
+  onClick: () => void;
+  selected: boolean;
+  title?: string;
+}
+//#endregion
+export { FilterOptionProps, FilterRowProps, FilterSidebarProps };
+//# sourceMappingURL=type.d.mts.map

package/es/dashboard/FilterSidebar/width.mjs

@@ -0,0 +1,18 @@
+//#region src/dashboard/FilterSidebar/width.ts
+const MIN_WIDTH = 200;
+const MAX_WIDTH = 480;
+function clampSidebarWidth(width, fallback) {
+	if (!Number.isFinite(width)) return fallback;
+	return Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, Math.round(width)));
+}
+const sidebarWidth = {
+	collapse: 80,
+	max: MAX_WIDTH,
+	min: MIN_WIDTH,
+	narrow: 264,
+	wide: 300
+};
+//#endregion
+export { clampSidebarWidth, sidebarWidth };
+
+//# sourceMappingURL=width.mjs.map

package/es/dashboard/FilterSidebar/width.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"width.mjs","names":[],"sources":["../../../src/dashboard/FilterSidebar/width.ts"],"sourcesContent":["const MIN_WIDTH = 200;\nconst MAX_WIDTH = 480;\n\nexport function clampSidebarWidth(width: number, fallback: number) {\n  if (!Number.isFinite(width)) return fallback;\n  return Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, Math.round(width)));\n}\n\nexport const sidebarWidth = {\n  collapse: 80,\n  max: MAX_WIDTH,\n  min: MIN_WIDTH,\n  narrow: 264,\n  wide: 300,\n};\n"],"mappings":";AAAA,MAAM,YAAY;AAClB,MAAM,YAAY;AAElB,SAAgB,kBAAkB,OAAe,UAAkB;CACjE,IAAI,CAAC,OAAO,SAAS,KAAK,GAAG,OAAO;CACpC,OAAO,KAAK,IAAI,WAAW,KAAK,IAAI,WAAW,KAAK,MAAM,KAAK,CAAC,CAAC;AACnE;AAEA,MAAa,eAAe;CAC1B,UAAU;CACV,KAAK;CACL,KAAK;CACL,QAAQ;CACR,MAAM;AACR"}

package/es/dashboard/PageHeader/PageHeader.d.mts

@@ -0,0 +1,9 @@
+import { PageHeaderProps } from "./type.mjs";
+//#region src/dashboard/PageHeader/PageHeader.d.ts
+declare function PageHeader({ action, children, description, mark, title }: PageHeaderProps): import("react").JSX.Element;
+declare namespace PageHeader {
+  var displayName: string;
+}
+//#endregion
+export { PageHeader as default };
+//# sourceMappingURL=PageHeader.d.mts.map

package/es/dashboard/PageHeader/PageHeader.mjs

@@ -0,0 +1,37 @@
+"use client";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import Text from "../../base-ui/Text/Text.mjs";
+import { styles } from "./style.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/dashboard/PageHeader/PageHeader.tsx
+function PageHeader({ action, children, description, mark, title }) {
+	const extra = action ?? children;
+	return /* @__PURE__ */ jsxs("div", {
+		className: styles.root,
+		children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
+			align: mark ? "flex-start" : void 0,
+			gap: 12,
+			horizontal: Boolean(mark),
+			children: [mark, /* @__PURE__ */ jsxs(FlexBasic_default, {
+				gap: 8,
+				children: [/* @__PURE__ */ jsx(Text, {
+					as: "h1",
+					className: styles.title,
+					weight: "bold",
+					children: title
+				}), description ? /* @__PURE__ */ jsx(Text, {
+					className: styles.description,
+					children: description
+				}) : null]
+			})]
+		}), extra ? /* @__PURE__ */ jsx("div", {
+			className: styles.actions,
+			children: extra
+		}) : null]
+	});
+}
+PageHeader.displayName = "PageHeader";
+//#endregion
+export { PageHeader as default };
+
+//# sourceMappingURL=PageHeader.mjs.map

package/es/dashboard/PageHeader/PageHeader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.mjs","names":["Flexbox"],"sources":["../../../src/dashboard/PageHeader/PageHeader.tsx"],"sourcesContent":["'use client';\n\nimport Text from '@/base-ui/Text';\nimport { Flexbox } from '@/Flex';\n\nimport { styles } from './style';\nimport type { PageHeaderProps } from './type';\n\nfunction PageHeader({ action, children, description, mark, title }: PageHeaderProps) {\n  const extra = action ?? children;\n  return (\n    <div className={styles.root}>\n      <Flexbox align={mark ? 'flex-start' : undefined} gap={12} horizontal={Boolean(mark)}>\n        {mark}\n        <Flexbox gap={8}>\n          <Text as=\"h1\" className={styles.title} weight=\"bold\">\n            {title}\n          </Text>\n          {description ? <Text className={styles.description}>{description}</Text> : null}\n        </Flexbox>\n      </Flexbox>\n      {extra ? <div className={styles.actions}>{extra}</div> : null}\n    </div>\n  );\n}\n\nPageHeader.displayName = 'PageHeader';\n\nexport default PageHeader;\n"],"mappings":";;;;;;AAQA,SAAS,WAAW,EAAE,QAAQ,UAAU,aAAa,MAAM,SAA0B;CACnF,MAAM,QAAQ,UAAU;CACxB,OACE,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA,CACE,qBAACA,mBAAD;GAAS,OAAO,OAAO,eAAe,KAAA;GAAW,KAAK;GAAI,YAAY,QAAQ,IAAI;GAAlF,UAAA,CACG,MACD,qBAACA,mBAAD;IAAS,KAAK;IAAd,UAAA,CACE,oBAAC,MAAD;KAAM,IAAG;KAAK,WAAW,OAAO;KAAO,QAAO;KAC3C,UAAA;IACG,CAAA,GACL,cAAc,oBAAC,MAAD;KAAM,WAAW,OAAO;KAAc,UAAA;IAAkB,CAAA,IAAI,IACpE;GACF,CAAA,CAAA;EACR,CAAA,GAAA,QAAQ,oBAAC,OAAD;GAAK,WAAW,OAAO;GAAU,UAAA;EAAW,CAAA,IAAI,IACtD;;AAET;AAEA,WAAW,cAAc"}

package/es/dashboard/PageHeader/index.d.mts

@@ -0,0 +1,3 @@
+import { PageHeaderProps } from "./type.mjs";
+import PageHeader from "./PageHeader.mjs";
+export { type PageHeaderProps, PageHeader as default };

package/es/dashboard/PageHeader/style.mjs

@@ -0,0 +1,47 @@
+import { createStaticStyles } from "antd-style";
+//#region src/dashboard/PageHeader/style.ts
+const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
+	actions: css`
+    display: flex;
+    flex: none;
+    gap: 8px;
+    align-items: center;
+
+    ${responsive.mobile} {
+      inline-size: 100%;
+
+      button,
+      a {
+        min-block-size: 44px;
+      }
+    }
+  `,
+	description: css`
+    max-inline-size: 68ch;
+    line-height: 1.6;
+    color: ${cssVar.colorTextSecondary};
+  `,
+	root: css`
+    display: flex;
+    gap: 16px;
+    align-items: flex-start;
+    justify-content: space-between;
+
+    inline-size: 100%;
+    min-inline-size: 0;
+
+    ${responsive.mobile} {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  `,
+	title: css`
+    margin: 0;
+    font-size: ${cssVar.fontSizeHeading3};
+    line-height: ${cssVar.lineHeightHeading3};
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/dashboard/PageHeader/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/PageHeader/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  actions: css`\n    display: flex;\n    flex: none;\n    gap: 8px;\n    align-items: center;\n\n    ${responsive.mobile} {\n      inline-size: 100%;\n\n      button,\n      a {\n        min-block-size: 44px;\n      }\n    }\n  `,\n  description: css`\n    max-inline-size: 68ch;\n    line-height: 1.6;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  root: css`\n    display: flex;\n    gap: 16px;\n    align-items: flex-start;\n    justify-content: space-between;\n\n    inline-size: 100%;\n    min-inline-size: 0;\n\n    ${responsive.mobile} {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  `,\n  title: css`\n    margin: 0;\n    font-size: ${cssVar.fontSizeHeading3};\n    line-height: ${cssVar.lineHeightHeading3};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,SAAS,GAAG;;;;;;MAMR,WAAW,OAAO;;;;;;;;;CAStB,aAAa,GAAG;;;aAGL,OAAO,mBAAmB;;CAErC,MAAM,GAAG;;;;;;;;;MASL,WAAW,OAAO;;;;;CAKtB,OAAO,GAAG;;iBAEK,OAAO,iBAAiB;mBACtB,OAAO,mBAAmB;;AAE7C,EAAE"}

package/es/dashboard/PageHeader/type.d.mts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+//#region src/dashboard/PageHeader/type.d.ts
+interface PageHeaderProps {
+  /** Actions at the end of the header. Falls back to `children`. */
+  action?: ReactNode;
+  children?: ReactNode;
+  description?: ReactNode;
+  /** Mark beside the title, such as an avatar. */
+  mark?: ReactNode;
+  title: ReactNode;
+}
+//#endregion
+export { PageHeaderProps };
+//# sourceMappingURL=type.d.mts.map

package/es/dashboard/PageSkeleton/PageSkeleton.d.mts

@@ -0,0 +1,25 @@
+import { LoadingAnnouncerProps, PageHeaderSkeletonProps, PageLoadingProps, TableSkeletonProps } from "./type.mjs";
+//#region src/dashboard/PageSkeleton/PageSkeleton.d.ts
+declare function LoadingAnnouncer({ label }: LoadingAnnouncerProps): import("react").JSX.Element;
+declare namespace LoadingAnnouncer {
+  var displayName: string;
+}
+declare function PageHeaderSkeleton({ action }: PageHeaderSkeletonProps): import("react").JSX.Element;
+declare namespace PageHeaderSkeleton {
+  var displayName: string;
+}
+declare function TableSkeleton({ framed, leading, rows }: TableSkeletonProps): import("react").JSX.Element;
+declare namespace TableSkeleton {
+  var displayName: string;
+}
+declare function StatCardSkeleton(): import("react").JSX.Element;
+declare namespace StatCardSkeleton {
+  var displayName: string;
+}
+declare function PageLoading({ header, label, stats }: PageLoadingProps): import("react").JSX.Element;
+declare namespace PageLoading {
+  var displayName: string;
+}
+//#endregion
+export { LoadingAnnouncer, PageHeaderSkeleton, StatCardSkeleton, TableSkeleton, PageLoading as default };
+//# sourceMappingURL=PageSkeleton.d.mts.map