@fluid-app/portal-widgets 0.1.17

package/dist/TableWidget-TfQfFHft.cjs

@@ -0,0 +1,455 @@
+const require_chunk = require("./chunk-CZWwpsFl.cjs");
+const require_MediaRenderer = require("./MediaRenderer-CcJvyOJ1.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let _fluid_app_ui_primitives = require("@fluid-app/ui-primitives");
+require("@fluid-app/portal-core/types");
+let _fluid_app_portal_core_registries = require("@fluid-app/portal-core/registries");
+//#region src/widgets/TableWidget.tsx
+var TableWidget_exports = /* @__PURE__ */ require_chunk.__exportAll({
+	TableWidget: () => TableWidget,
+	tableWidgetPropertySchema: () => tableWidgetPropertySchema
+});
+const DEFAULT_DATA = [];
+function ImageCellRenderer(_value, item) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "h-10 w-10 rounded object-cover",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MediaRenderer.MediaRenderer, { ...require_MediaRenderer.getMediaPropsFromShareable(item) })
+	});
+}
+function PriceCellRenderer(_value, item) {
+	return (item.display_price ?? item.price) || "-";
+}
+function StatusCellRenderer(value) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: `inline-flex rounded-full px-2 py-1 text-xs font-medium ${{
+			active: "bg-primary text-primary-foreground",
+			inactive: "bg-secondary text-secondary-foreground",
+			unknown: "bg-muted text-muted-foreground"
+		}[String(value || "unknown").toLowerCase()] || "bg-muted text-foreground"}`,
+		children: String(value || "Unknown")
+	});
+}
+const defaultColumns = [
+	{
+		key: "imageUrl",
+		label: "Image",
+		sortable: false,
+		render: ImageCellRenderer
+	},
+	{
+		key: "title",
+		label: "Title",
+		sortable: true
+	},
+	{
+		key: "price",
+		label: "Price",
+		sortable: true,
+		render: PriceCellRenderer
+	},
+	{
+		key: "status",
+		label: "Status",
+		sortable: true,
+		render: StatusCellRenderer
+	}
+];
+function TableWidget({ titleEnabled = true, titleText = "Products", titleFontSize = "xl", titleColor = "foreground", background = {
+	type: "solid",
+	color: "background"
+}, alternatingColorEnabled = true, textColor = "foreground", headerBackgroundColor = "muted", headerTextColor = "foreground", padding = 4, borderRadius = "md", data = DEFAULT_DATA, filterEnabled = true, sortingEnabled = true, paginationEnabled = true, maxRowsPerPage = 5, className, ...props }) {
+	const backgroundColor = background.color || "background";
+	const backgroundImage = (background.resource?.image_url || background.resource?.imageUrl) && background.type === "image" ? `url(${background.resource.image_url || background.resource.imageUrl})` : "none";
+	const pageSize = maxRowsPerPage;
+	const [globalFilter, setGlobalFilter] = (0, react.useState)("");
+	const [sortConfig, setSortConfig] = (0, react.useState)(null);
+	const [currentPage, setCurrentPage] = (0, react.useState)(1);
+	const columns = defaultColumns;
+	const filteredData = (0, react.useMemo)(() => {
+		let result = [...data];
+		if (globalFilter) {
+			const lowerFilter = globalFilter.toLowerCase();
+			result = result.filter((item) => columns.some((col) => {
+				const value = item[col.key];
+				return String(value ?? "").toLowerCase().includes(lowerFilter);
+			}));
+		}
+		return result;
+	}, [
+		data,
+		globalFilter,
+		columns
+	]);
+	const sortedData = (0, react.useMemo)(() => {
+		if (!sortConfig) return filteredData;
+		return [...filteredData].sort((a, b) => {
+			const aValue = a[sortConfig.key];
+			const bValue = b[sortConfig.key];
+			if (aValue == null && bValue == null) return 0;
+			if (aValue == null) return sortConfig.direction === "asc" ? 1 : -1;
+			if (bValue == null) return sortConfig.direction === "asc" ? -1 : 1;
+			let comparison = 0;
+			if (typeof aValue === "number" && typeof bValue === "number") comparison = aValue - bValue;
+			else comparison = String(aValue).localeCompare(String(bValue));
+			return sortConfig.direction === "asc" ? comparison : -comparison;
+		});
+	}, [filteredData, sortConfig]);
+	const paginatedData = (0, react.useMemo)(() => {
+		if (!paginationEnabled) return sortedData;
+		const startIndex = (currentPage - 1) * pageSize;
+		return sortedData.slice(startIndex, startIndex + pageSize);
+	}, [
+		sortedData,
+		currentPage,
+		pageSize,
+		paginationEnabled
+	]);
+	const totalPages = Math.ceil(sortedData.length / pageSize);
+	const handleGlobalFilterChange = (value) => {
+		setGlobalFilter(value);
+		setCurrentPage(1);
+	};
+	const handleSort = (key) => {
+		if (!sortingEnabled) return;
+		setSortConfig((prev) => {
+			if (prev?.key !== key) return {
+				key,
+				direction: "asc"
+			};
+			if (prev.direction === "asc") return {
+				key,
+				direction: "desc"
+			};
+			return null;
+		});
+	};
+	const getSortIndicator = (key) => {
+		if (sortConfig?.key !== key) return null;
+		return sortConfig.direction === "asc" ? " ↑" : " ↓";
+	};
+	if (data.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `@container rounded-${borderRadius} bg-${backgroundColor} p-${padding} ${className}`,
+		style: { backgroundImage },
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "text-muted-foreground flex min-h-[200px] flex-col items-center justify-center gap-2",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "text-4xl",
+					children: "📋"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-sm",
+					children: "No data available"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-muted-foreground/70 text-xs",
+					children: "Connect a data source to display table data"
+				})
+			]
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `@container overflow-hidden ${paginationEnabled ? "" : "overflow-y-auto"} rounded-${borderRadius} text-${textColor} ${className}`,
+		style: { backgroundImage },
+		...props,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `flex items-center justify-between p-${padding} bg-${backgroundColor}`,
+				children: [titleEnabled && titleText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+					className: `text-${titleFontSize === "md" ? "base" : titleFontSize} font-bold text-${titleColor}`,
+					children: titleText
+				}), filterEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fluid_app_ui_primitives.Input, {
+					type: "text",
+					placeholder: "Search all columns...",
+					value: globalFilter,
+					onChange: (e) => handleGlobalFilterChange(e.target.value),
+					className: `w-full rounded-md border border-${headerBackgroundColor}-600 bg-${headerBackgroundColor}-400 ring-offset-muted px-3 py-2 text-sm placeholder:text-${headerTextColor}-900 focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none md:w-64`
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "overflow-x-auto",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+					className: "w-full border-collapse",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+						className: `bg-${headerBackgroundColor}-400 border-${headerBackgroundColor}-600 border-y`,
+						children: columns.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+							className: `px-4 py-3 text-left text-sm font-semibold text-${headerTextColor} ${col.sortable && sortingEnabled ? "cursor-pointer select-none hover:opacity-80" : ""}`,
+							...col.sortable && sortingEnabled ? {
+								role: "button",
+								tabIndex: 0,
+								onClick: () => handleSort(col.key),
+								onKeyDown: (e) => {
+									if (e.key === "Enter" || e.key === " ") {
+										e.preventDefault();
+										handleSort(col.key);
+									}
+								}
+							} : {},
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "flex flex-col gap-1",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [col.label, col.sortable && sortingEnabled && getSortIndicator(col.key)] })
+							})
+						}, col.key))
+					}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tbody", { children: [paginatedData.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+						className: `h-17 border-b border-${backgroundColor}-600 last:border-none bg-${backgroundColor} ${alternatingColorEnabled ? `even:bg-${backgroundColor}-400` : ""}`,
+						children: columns.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+							className: "px-4 py-3 text-sm",
+							children: col.render ? col.render(item[col.key], item) : String(item[col.key] ?? "-")
+						}, col.key))
+					}, item.id ?? index)), paginationEnabled && paginatedData.length < pageSize && paginatedData.length > 0 && Array.from({ length: pageSize - paginatedData.length }).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+						className: `h-17 border-b border-${backgroundColor}-600 last:border-none bg-${backgroundColor} ${alternatingColorEnabled ? `even:bg-${backgroundColor}-400` : ""}`,
+						children: columns.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+							className: "px-4 py-3 text-sm",
+							children: "\xA0"
+						}, col.key))
+					}, `empty-${index}`))] })]
+				})
+			}),
+			paginatedData.length === 0 && data.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `py-8 text-center bg-${backgroundColor}`,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-sm",
+					children: "No results found"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-xs",
+					children: "Try adjusting your search"
+				})]
+			}),
+			paginationEnabled && totalPages > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `flex flex-col items-center justify-between gap-2 border-t border-${backgroundColor}-600 p-${padding} @md:flex-row bg-${backgroundColor}-400 text-${textColor}`,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+					className: "text-sm",
+					children: [
+						"Showing ",
+						(currentPage - 1) * pageSize + 1,
+						"-",
+						Math.min(currentPage * pageSize, sortedData.length),
+						" of",
+						" ",
+						sortedData.length,
+						" results"
+					]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							onClick: () => setCurrentPage((p) => Math.max(1, p - 1)),
+							disabled: currentPage === 1,
+							className: `rounded-md border border-${headerBackgroundColor}-600 bg-${headerBackgroundColor} ring-offset-muted placeholder:text-muted-foreground focus-visible:ring-primary px-3 py-1 text-sm transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50`,
+							children: "Previous"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "text-sm",
+							children: [
+								"Page ",
+								currentPage,
+								" of ",
+								totalPages
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							onClick: () => setCurrentPage((p) => Math.min(totalPages, p + 1)),
+							disabled: currentPage === totalPages,
+							className: `rounded-md border border-${headerBackgroundColor}-600 bg-${headerBackgroundColor} ring-offset-muted placeholder:text-muted-foreground focus-visible:ring-primary px-3 py-1 text-sm transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50`,
+							children: "Next"
+						})
+					]
+				})]
+			})
+		]
+	});
+}
+const tableWidgetPropertySchema = {
+	widgetType: "TableWidget",
+	displayName: "Table Widget",
+	tabsConfig: [
+		{
+			id: "styling",
+			label: "Styling"
+		},
+		{
+			id: "behavior",
+			label: "Behavior"
+		},
+		{
+			id: "data",
+			label: "Data"
+		}
+	],
+	dataSourceTargetProps: ["data"],
+	fields: [
+		{
+			key: "titleEnabled",
+			label: "Widget Title",
+			type: "boolean",
+			description: "Enable the title displayed above the table",
+			defaultValue: true,
+			tab: "styling",
+			group: "Title"
+		},
+		{
+			key: "titleText",
+			label: "Title",
+			type: "text",
+			description: "Title text displayed above the table",
+			defaultValue: "Products",
+			tab: "styling",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		},
+		(0, _fluid_app_portal_core_registries.getFontSizeField)({
+			label: "Title Font Size",
+			defaultValue: "xl",
+			key: "titleFontSize",
+			description: "Font size for the widget title",
+			tab: "styling",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		}),
+		(0, _fluid_app_portal_core_registries.getColorField)({
+			key: "titleColor",
+			label: "Title Color",
+			description: "Color for the widget title",
+			defaultValue: "foreground",
+			tab: "styling",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		}),
+		{
+			type: "background",
+			key: "background",
+			label: "Background",
+			description: "Background for the table container",
+			defaultValue: "background",
+			tab: "styling",
+			group: "Design"
+		},
+		{
+			key: "alternatingColorEnabled",
+			label: "Enable Alternating Colors",
+			type: "boolean",
+			description: "Enable alternating colors for table rows",
+			defaultValue: true,
+			tab: "styling",
+			group: "Design"
+		},
+		(0, _fluid_app_portal_core_registries.getColorField)({
+			key: "headerBackgroundColor",
+			label: "Header Background",
+			description: "Background color for the table header",
+			defaultValue: "muted",
+			tab: "styling",
+			group: "Design"
+		}),
+		(0, _fluid_app_portal_core_registries.getColorField)({
+			key: "textColor",
+			label: "Text Color",
+			description: "Default text color for table content",
+			defaultValue: "foreground",
+			tab: "styling",
+			group: "Design"
+		}),
+		(0, _fluid_app_portal_core_registries.getColorField)({
+			key: "headerTextColor",
+			label: "Header Text Color",
+			description: "Text color for the table header",
+			defaultValue: "foreground",
+			tab: "styling",
+			group: "Design"
+		}),
+		{
+			key: "separator",
+			type: "separator",
+			label: "Separator",
+			tab: "styling",
+			group: "Design"
+		},
+		(0, _fluid_app_portal_core_registries.getPaddingField)({
+			key: "padding",
+			label: "Padding",
+			description: "Padding around the table container",
+			defaultValue: 4,
+			tab: "styling",
+			group: "Design"
+		}),
+		(0, _fluid_app_portal_core_registries.getBorderRadiusField)({
+			key: "borderRadius",
+			label: "Border Radius",
+			description: "Border radius for the table container",
+			defaultValue: "md",
+			tab: "styling",
+			group: "Design"
+		}),
+		{
+			key: "filterEnabled",
+			label: "Enable Filters",
+			type: "boolean",
+			description: "Show global search and column filters",
+			defaultValue: true,
+			tab: "behavior",
+			group: "Features"
+		},
+		{
+			key: "sortingEnabled",
+			label: "Enable Sorting",
+			type: "boolean",
+			description: "Allow sorting by clicking column headers",
+			defaultValue: true,
+			tab: "behavior",
+			group: "Features"
+		},
+		{
+			key: "paginationEnabled",
+			label: "Enable Pagination",
+			type: "boolean",
+			description: "Split data into pages",
+			defaultValue: true,
+			tab: "behavior",
+			group: "Features"
+		},
+		{
+			key: "maxRowsPerPage",
+			label: "Max Rows Per Page",
+			type: "number",
+			description: "Maximum number of rows to display per page",
+			min: 1,
+			max: 50,
+			step: 1,
+			defaultValue: 5,
+			tab: "behavior",
+			group: "Features",
+			requiresKeyToBeTrue: "paginationEnabled"
+		},
+		{
+			key: "dataSource",
+			label: "Data Source",
+			type: "dataSource",
+			description: "Configure data source for the table",
+			tab: "data",
+			group: "Data Configuration"
+		}
+	]
+};
+//#endregion
+Object.defineProperty(exports, "TableWidget", {
+	enumerable: true,
+	get: function() {
+		return TableWidget;
+	}
+});
+Object.defineProperty(exports, "TableWidget_exports", {
+	enumerable: true,
+	get: function() {
+		return TableWidget_exports;
+	}
+});
+Object.defineProperty(exports, "tableWidgetPropertySchema", {
+	enumerable: true,
+	get: function() {
+		return tableWidgetPropertySchema;
+	}
+});
+
+//# sourceMappingURL=TableWidget-TfQfFHft.cjs.map

package/dist/TableWidget-TfQfFHft.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableWidget-TfQfFHft.cjs","names":["MediaRenderer","getMediaPropsFromShareable","Input"],"sources":["../src/widgets/TableWidget.tsx"],"sourcesContent":["import { useState, useMemo, type ComponentProps } from \"react\";\nimport type React from \"react\";\nimport type {\n  BackgroundValue,\n  BorderRadiusOptions,\n  ColorOptions,\n  FontSizeOptions,\n  PaddingOptions,\n} from \"@fluid-app/portal-core/types\";\nimport type { WidgetPropertySchema } from \"@fluid-app/portal-core/registries\";\nimport {\n  getBorderRadiusField,\n  getColorField,\n  getFontSizeField,\n  getPaddingField,\n} from \"../core/fields\";\nimport { Input } from \"@fluid-app/ui-primitives\";\nimport {\n  MediaRenderer,\n  getMediaPropsFromShareable,\n} from \"../components/MediaRenderer\";\nimport { type ShareableItem } from \"@fluid-app/portal-core/types\";\n\n// Column definition for the table\ntype ColumnDef = {\n  key: string;\n  label: string;\n  sortable: boolean;\n  render?: (value: unknown, item: ShareableItem) => React.ReactNode;\n};\n\nconst DEFAULT_DATA: ShareableItem[] = [];\n\n// ---------------------------------------------------------------------------\n// Column cell renderers\n// ---------------------------------------------------------------------------\n\nfunction ImageCellRenderer(_value: unknown, item: ShareableItem) {\n  return (\n    <div className=\"h-10 w-10 rounded object-cover\">\n      <MediaRenderer {...getMediaPropsFromShareable(item)} />\n    </div>\n  );\n}\n\nfunction PriceCellRenderer(_value: unknown, item: ShareableItem) {\n  return ((item.display_price as string) ?? item.price) || \"-\";\n}\n\nfunction StatusCellRenderer(value: unknown) {\n  const status = String(value || \"unknown\").toLowerCase();\n  const statusStyles: Record<string, string> = {\n    active: \"bg-primary text-primary-foreground\",\n    inactive: \"bg-secondary text-secondary-foreground\",\n    unknown: \"bg-muted text-muted-foreground\",\n  };\n  return (\n    <span\n      className={`inline-flex rounded-full px-2 py-1 text-xs font-medium ${statusStyles[status] || \"bg-muted text-foreground\"}`}\n    >\n      {String(value || \"Unknown\")}\n    </span>\n  );\n}\n\n// Default columns for product data\nconst defaultColumns: ColumnDef[] = [\n  {\n    key: \"imageUrl\",\n    label: \"Image\",\n    sortable: false,\n    render: ImageCellRenderer,\n  },\n  {\n    key: \"title\",\n    label: \"Title\",\n    sortable: true,\n  },\n  {\n    key: \"price\",\n    label: \"Price\",\n    sortable: true,\n    render: PriceCellRenderer,\n  },\n  {\n    key: \"status\",\n    label: \"Status\",\n    sortable: true,\n    render: StatusCellRenderer,\n  },\n];\n\ntype TableWidgetProps = ComponentProps<\"div\"> & {\n  // Title\n  titleEnabled?: boolean;\n  titleText?: string;\n  titleFontSize?: FontSizeOptions;\n  titleColor?: ColorOptions;\n\n  // Styling\n  background?: BackgroundValue;\n  alternatingColorEnabled?: boolean;\n  textColor?: ColorOptions;\n  headerBackgroundColor?: ColorOptions;\n  headerTextColor?: ColorOptions;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n\n  // Data\n  data?: ShareableItem[];\n\n  // Features\n  filterEnabled?: boolean;\n  sortingEnabled?: boolean;\n  paginationEnabled?: boolean;\n  maxRowsPerPage?: number;\n};\n\nexport function TableWidget({\n  // Title defaults\n  titleEnabled = true,\n  titleText = \"Products\",\n  titleFontSize = \"xl\",\n  titleColor = \"foreground\",\n\n  // Styling defaults\n  background = {\n    type: \"solid\",\n    color: \"background\",\n  },\n  alternatingColorEnabled = true,\n  textColor = \"foreground\",\n  headerBackgroundColor = \"muted\",\n  headerTextColor = \"foreground\",\n  padding = 4,\n  borderRadius = \"md\",\n\n  // Data\n  data = DEFAULT_DATA,\n\n  // Feature defaults\n  filterEnabled = true,\n  sortingEnabled = true,\n  paginationEnabled = true,\n  maxRowsPerPage = 5,\n\n  className,\n  ...props\n}: TableWidgetProps): React.JSX.Element {\n  const backgroundColor = background.color || \"background\";\n  const backgroundImage =\n    (background.resource?.image_url || background.resource?.imageUrl) &&\n    background.type === \"image\"\n      ? `url(${background.resource.image_url || background.resource.imageUrl})`\n      : \"none\";\n  const pageSize = maxRowsPerPage;\n\n  // State for filtering, sorting, and pagination\n  const [globalFilter, setGlobalFilter] = useState(\"\");\n  const [sortConfig, setSortConfig] = useState<{\n    key: string;\n    direction: \"asc\" | \"desc\";\n  } | null>(null);\n  const [currentPage, setCurrentPage] = useState(1);\n\n  const columns = defaultColumns;\n\n  // Filter data\n  const filteredData = useMemo(() => {\n    let result = [...data];\n\n    if (globalFilter) {\n      const lowerFilter = globalFilter.toLowerCase();\n      result = result.filter((item) =>\n        columns.some((col) => {\n          const value = item[col.key];\n          return String(value ?? \"\")\n            .toLowerCase()\n            .includes(lowerFilter);\n        }),\n      );\n    }\n\n    return result;\n  }, [data, globalFilter, columns]);\n\n  // Sort data\n  const sortedData = useMemo(() => {\n    if (!sortConfig) return filteredData;\n\n    return [...filteredData].sort((a, b) => {\n      const aValue = a[sortConfig.key];\n      const bValue = b[sortConfig.key];\n\n      // Handle null/undefined\n      if (aValue == null && bValue == null) return 0;\n      if (aValue == null) return sortConfig.direction === \"asc\" ? 1 : -1;\n      if (bValue == null) return sortConfig.direction === \"asc\" ? -1 : 1;\n\n      // Compare values\n      let comparison = 0;\n      if (typeof aValue === \"number\" && typeof bValue === \"number\") {\n        comparison = aValue - bValue;\n      } else {\n        comparison = String(aValue).localeCompare(String(bValue));\n      }\n\n      return sortConfig.direction === \"asc\" ? comparison : -comparison;\n    });\n  }, [filteredData, sortConfig]);\n\n  // Paginate data\n  const paginatedData = useMemo(() => {\n    if (!paginationEnabled) return sortedData;\n\n    const startIndex = (currentPage - 1) * pageSize;\n    return sortedData.slice(startIndex, startIndex + pageSize);\n  }, [sortedData, currentPage, pageSize, paginationEnabled]);\n\n  const totalPages = Math.ceil(sortedData.length / pageSize);\n\n  // Reset to page 1 when filters change\n  const handleGlobalFilterChange = (value: string) => {\n    setGlobalFilter(value);\n    setCurrentPage(1);\n  };\n\n  // Handle sort\n  const handleSort = (key: string) => {\n    if (!sortingEnabled) return;\n\n    setSortConfig((prev) => {\n      if (prev?.key !== key) return { key, direction: \"asc\" };\n      if (prev.direction === \"asc\") return { key, direction: \"desc\" };\n      return null;\n    });\n  };\n\n  // Get sort indicator\n  const getSortIndicator = (key: string) => {\n    if (sortConfig?.key !== key) return null;\n    return sortConfig.direction === \"asc\" ? \" ↑\" : \" ↓\";\n  };\n\n  // Empty state\n  if (data.length === 0) {\n    return (\n      <div\n        className={`@container rounded-${borderRadius} bg-${backgroundColor} p-${padding} ${className}`}\n        style={{ backgroundImage }}\n        {...props}\n      >\n        <div className=\"text-muted-foreground flex min-h-[200px] flex-col items-center justify-center gap-2\">\n          <div className=\"text-4xl\">📋</div>\n          <p className=\"text-sm\">No data available</p>\n          <p className=\"text-muted-foreground/70 text-xs\">\n            Connect a data source to display table data\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={`@container overflow-hidden ${paginationEnabled ? \"\" : \"overflow-y-auto\"} rounded-${borderRadius} text-${textColor} ${className}`}\n      style={{ backgroundImage }}\n      {...props}\n    >\n      <div\n        className={`flex items-center justify-between p-${padding} bg-${backgroundColor}`}\n      >\n        {/* Title */}\n        {titleEnabled && titleText && (\n          <h2\n            className={`text-${titleFontSize === \"md\" ? \"base\" : titleFontSize} font-bold text-${titleColor}`}\n          >\n            {titleText}\n          </h2>\n        )}\n\n        {/* Global Search */}\n        {filterEnabled && (\n          <Input\n            type=\"text\"\n            placeholder=\"Search all columns...\"\n            value={globalFilter}\n            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n              handleGlobalFilterChange(e.target.value)\n            }\n            className={`w-full rounded-md border border-${headerBackgroundColor}-600 bg-${headerBackgroundColor}-400 ring-offset-muted px-3 py-2 text-sm placeholder:text-${headerTextColor}-900 focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none md:w-64`}\n          />\n        )}\n      </div>\n\n      {/* Table */}\n      <div className=\"overflow-x-auto\">\n        <table className=\"w-full border-collapse\">\n          <thead>\n            <tr\n              className={`bg-${headerBackgroundColor}-400 border-${headerBackgroundColor}-600 border-y`}\n            >\n              {columns.map((col) => (\n                <th\n                  key={col.key}\n                  className={`px-4 py-3 text-left text-sm font-semibold text-${headerTextColor} ${col.sortable && sortingEnabled ? \"cursor-pointer select-none hover:opacity-80\" : \"\"}`}\n                  {...(col.sortable && sortingEnabled\n                    ? {\n                        role: \"button\" as const,\n                        tabIndex: 0,\n                        onClick: () => handleSort(col.key),\n                        onKeyDown: (e: React.KeyboardEvent) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault();\n                            handleSort(col.key);\n                          }\n                        },\n                      }\n                    : {})}\n                >\n                  <div className=\"flex flex-col gap-1\">\n                    <span>\n                      {col.label}\n                      {col.sortable &&\n                        sortingEnabled &&\n                        getSortIndicator(col.key)}\n                    </span>\n                  </div>\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {paginatedData.map((item, index) => (\n              <tr\n                key={item.id ?? index}\n                className={`h-17 border-b border-${backgroundColor}-600 last:border-none bg-${backgroundColor} ${alternatingColorEnabled ? `even:bg-${backgroundColor}-400` : \"\"}`}\n              >\n                {columns.map((col) => (\n                  <td key={col.key} className=\"px-4 py-3 text-sm\">\n                    {col.render\n                      ? col.render(item[col.key], item)\n                      : String(item[col.key] ?? \"-\")}\n                  </td>\n                ))}\n              </tr>\n            ))}\n            {/* Empty rows to fill the last page for consistent pagination position */}\n            {paginationEnabled &&\n              paginatedData.length < pageSize &&\n              paginatedData.length > 0 &&\n              Array.from({ length: pageSize - paginatedData.length }).map(\n                (_, index) => (\n                  <tr\n                    key={`empty-${index}`}\n                    className={`h-17 border-b border-${backgroundColor}-600 last:border-none bg-${backgroundColor} ${alternatingColorEnabled ? `even:bg-${backgroundColor}-400` : \"\"}`}\n                  >\n                    {columns.map((col) => (\n                      <td key={col.key} className=\"px-4 py-3 text-sm\">\n                        &nbsp;\n                      </td>\n                    ))}\n                  </tr>\n                ),\n              )}\n          </tbody>\n        </table>\n      </div>\n\n      {/* No results message */}\n      {paginatedData.length === 0 && data.length > 0 && (\n        <div className={`py-8 text-center bg-${backgroundColor}`}>\n          <p className=\"text-sm\">No results found</p>\n          <p className=\"text-xs\">Try adjusting your search</p>\n        </div>\n      )}\n\n      {/* Pagination */}\n      {paginationEnabled && totalPages > 1 && (\n        <div\n          className={`flex flex-col items-center justify-between gap-2 border-t border-${backgroundColor}-600 p-${padding} @md:flex-row bg-${backgroundColor}-400 text-${textColor}`}\n        >\n          <p className=\"text-sm\">\n            Showing {(currentPage - 1) * pageSize + 1}-\n            {Math.min(currentPage * pageSize, sortedData.length)} of{\" \"}\n            {sortedData.length} results\n          </p>\n          <div className=\"flex items-center gap-2\">\n            <button\n              onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}\n              disabled={currentPage === 1}\n              className={`rounded-md border border-${headerBackgroundColor}-600 bg-${headerBackgroundColor} ring-offset-muted placeholder:text-muted-foreground focus-visible:ring-primary px-3 py-1 text-sm transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50`}\n            >\n              Previous\n            </button>\n            <span className=\"text-sm\">\n              Page {currentPage} of {totalPages}\n            </span>\n            <button\n              onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}\n              disabled={currentPage === totalPages}\n              className={`rounded-md border border-${headerBackgroundColor}-600 bg-${headerBackgroundColor} ring-offset-muted placeholder:text-muted-foreground focus-visible:ring-primary px-3 py-1 text-sm transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50`}\n            >\n              Next\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const tableWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"TableWidget\",\n  displayName: \"Table Widget\",\n  tabsConfig: [\n    { id: \"styling\", label: \"Styling\" },\n    { id: \"behavior\", label: \"Behavior\" },\n    { id: \"data\", label: \"Data\" },\n  ],\n  dataSourceTargetProps: [\"data\"],\n  fields: [\n    // Content Tab - Title Group\n    {\n      key: \"titleEnabled\",\n      label: \"Widget Title\",\n      type: \"boolean\",\n      description: \"Enable the title displayed above the table\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Title\",\n    },\n    {\n      key: \"titleText\",\n      label: \"Title\",\n      type: \"text\",\n      description: \"Title text displayed above the table\",\n      defaultValue: \"Products\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    },\n    getFontSizeField({\n      label: \"Title Font Size\",\n      defaultValue: \"xl\",\n      key: \"titleFontSize\",\n      description: \"Font size for the widget title\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    getColorField({\n      key: \"titleColor\",\n      label: \"Title Color\",\n      description: \"Color for the widget title\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n\n    // Styling Tab - Design Group\n    {\n      type: \"background\",\n      key: \"background\",\n      label: \"Background\",\n      description: \"Background for the table container\",\n      defaultValue: \"background\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"alternatingColorEnabled\",\n      label: \"Enable Alternating Colors\",\n      type: \"boolean\",\n      description: \"Enable alternating colors for table rows\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getColorField({\n      key: \"headerBackgroundColor\",\n      label: \"Header Background\",\n      description: \"Background color for the table header\",\n      defaultValue: \"muted\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getColorField({\n      key: \"textColor\",\n      label: \"Text Color\",\n      description: \"Default text color for table content\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getColorField({\n      key: \"headerTextColor\",\n      label: \"Header Text Color\",\n      description: \"Text color for the table header\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    {\n      key: \"separator\",\n      type: \"separator\",\n      label: \"Separator\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getPaddingField({\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"Padding around the table container\",\n      defaultValue: 4,\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getBorderRadiusField({\n      key: \"borderRadius\",\n      label: \"Border Radius\",\n      description: \"Border radius for the table container\",\n      defaultValue: \"md\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n\n    // Behavior Tab - Features Group\n    {\n      key: \"filterEnabled\",\n      label: \"Enable Filters\",\n      type: \"boolean\",\n      description: \"Show global search and column filters\",\n      defaultValue: true,\n      tab: \"behavior\",\n      group: \"Features\",\n    },\n    {\n      key: \"sortingEnabled\",\n      label: \"Enable Sorting\",\n      type: \"boolean\",\n      description: \"Allow sorting by clicking column headers\",\n      defaultValue: true,\n      tab: \"behavior\",\n      group: \"Features\",\n    },\n    {\n      key: \"paginationEnabled\",\n      label: \"Enable Pagination\",\n      type: \"boolean\",\n      description: \"Split data into pages\",\n      defaultValue: true,\n      tab: \"behavior\",\n      group: \"Features\",\n    },\n    {\n      key: \"maxRowsPerPage\",\n      label: \"Max Rows Per Page\",\n      type: \"number\",\n      description: \"Maximum number of rows to display per page\",\n      min: 1,\n      max: 50,\n      step: 1,\n      defaultValue: 5,\n      tab: \"behavior\",\n      group: \"Features\",\n      requiresKeyToBeTrue: \"paginationEnabled\",\n    },\n\n    // Data Tab\n    {\n      key: \"dataSource\",\n      label: \"Data Source\",\n      type: \"dataSource\",\n      description: \"Configure data source for the table\",\n      tab: \"data\",\n      group: \"Data Configuration\",\n    },\n  ],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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AAO;GACP,qBAAqB;GACtB;0DACgB;GACf,OAAO;GACP,cAAc;GACd,KAAK;GACL,aAAa;GACb,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;uDACY;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;EAGF;GACE,MAAM;GACN,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;uDACa;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;uDACY;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;uDACY;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,MAAM;GACN,OAAO;GACP,KAAK;GACL,OAAO;GACR;yDACe;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;8DACmB;GACnB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EAGF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,KAAK;GACL,KAAK;GACL,MAAM;GACN,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;EAGD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,KAAK;GACL,OAAO;GACR;EACF;CACF"}

package/dist/TextWidget-CL2H3vei.mjs

@@ -0,0 +1,129 @@
+import { t as __exportAll } from "./rolldown-runtime-wcPFST8Q.mjs";
+import { a as getFontSizeField, c as getPaddingField, i as getColorField, n as getBorderRadiusField } from "./fields-wPOk-SmZ.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/widgets/TextWidget.tsx
+var TextWidget_exports = /* @__PURE__ */ __exportAll({
+	TextWidget: () => TextWidget,
+	textWidgetPropertySchema: () => textWidgetPropertySchema
+});
+function TextWidget({ titleEnabled = true, title = "Text Widget", titleFontSize = "xl", titleColor = "foreground", description = "This is a text widget", descriptionFontSize = "md", descriptionColor = "foreground", background = {
+	type: "solid",
+	color: "background"
+}, padding = 4, borderRadius = "md", className, ...props }) {
+	const backgroundColor = background.color || "background";
+	const backgroundImage = (background.resource?.image_url || background.resource?.imageUrl) && background.type === "image" ? `url(${background.resource.image_url || background.resource.imageUrl})` : "none";
+	return /* @__PURE__ */ jsxs("div", {
+		className: `bg-${backgroundColor} p-${padding} rounded-${borderRadius} ${className ?? ""}`,
+		style: { backgroundImage },
+		...props,
+		children: [titleEnabled && /* @__PURE__ */ jsx("h2", {
+			className: `text-${titleFontSize} text-${titleColor} font-bold`,
+			children: title
+		}), /* @__PURE__ */ jsx("p", {
+			className: `text-${descriptionFontSize} text-${descriptionColor}`,
+			children: description
+		})]
+	});
+}
+const textWidgetPropertySchema = {
+	widgetType: "TextWidget",
+	displayName: "Text Widget",
+	tabsConfig: [{
+		id: "content",
+		label: "Content"
+	}],
+	dataSourceTargetProps: ["title", "description"],
+	fields: [
+		{
+			key: "titleEnabled",
+			label: "Widget Title",
+			type: "boolean",
+			description: "Enable the title displayed above the text",
+			defaultValue: true,
+			tab: "content",
+			group: "Title"
+		},
+		{
+			key: "title",
+			label: "Title",
+			type: "text",
+			description: "The title",
+			defaultValue: "Heads up!",
+			tab: "content",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		},
+		getFontSizeField({
+			key: "titleFontSize",
+			label: "Title Font Size",
+			description: "Font size for the title",
+			defaultValue: "xl",
+			tab: "content",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		}),
+		getColorField({
+			key: "titleColor",
+			label: "Title Color",
+			description: "The color of the title",
+			defaultValue: "foreground",
+			tab: "content",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		}),
+		{
+			key: "description",
+			label: "Description",
+			type: "textarea",
+			description: "The text message",
+			rows: 3,
+			defaultValue: "You can add components and dependencies to your app using the cli.",
+			tab: "content",
+			group: "Description"
+		},
+		getFontSizeField({
+			key: "descriptionFontSize",
+			label: "Description Font Size",
+			description: "Font size for the text",
+			defaultValue: "md",
+			tab: "content",
+			group: "Description"
+		}),
+		getColorField({
+			key: "descriptionColor",
+			label: "Description Color",
+			description: "The color of the text",
+			defaultValue: "foreground",
+			tab: "content",
+			group: "Description"
+		}),
+		{
+			type: "background",
+			key: "background",
+			label: "Background",
+			description: "Background for the text container",
+			defaultValue: "background",
+			tab: "content",
+			group: "Style"
+		},
+		getPaddingField({
+			key: "padding",
+			label: "Padding",
+			description: "The padding of the text container",
+			defaultValue: 4,
+			tab: "content",
+			group: "Style"
+		}),
+		getBorderRadiusField({
+			key: "borderRadius",
+			description: "The border radius of the text container",
+			label: "Border Radius",
+			tab: "content",
+			group: "Style"
+		})
+	]
+};
+//#endregion
+export { TextWidget_exports as n, textWidgetPropertySchema as r, TextWidget as t };
+
+//# sourceMappingURL=TextWidget-CL2H3vei.mjs.map

package/dist/TextWidget-CL2H3vei.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextWidget-CL2H3vei.mjs","names":[],"sources":["../src/widgets/TextWidget.tsx"],"sourcesContent":["import type { WidgetPropertySchema } from \"@fluid-app/portal-core/registries\";\nimport type { ComponentProps } from \"react\";\nimport type React from \"react\";\nimport {\n  getBorderRadiusField,\n  getColorField,\n  getFontSizeField,\n  getPaddingField,\n} from \"../core/fields\";\nimport type {\n  BackgroundValue,\n  BorderRadiusOptions,\n  ColorOptions,\n  FontSizeOptions,\n  PaddingOptions,\n} from \"@fluid-app/portal-core/types\";\n\ntype TextWidgetProps = ComponentProps<\"div\"> & {\n  // Title\n  titleEnabled?: boolean;\n  title?: string;\n  titleFontSize?: FontSizeOptions;\n  titleColor?: ColorOptions;\n\n  // Description\n  description?: string;\n  descriptionFontSize?: FontSizeOptions;\n  descriptionColor?: ColorOptions;\n\n  // Styling\n  background?: BackgroundValue;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n};\n\nexport function TextWidget({\n  titleEnabled = true,\n  title = \"Text Widget\",\n  titleFontSize = \"xl\",\n  titleColor = \"foreground\",\n  description = \"This is a text widget\",\n  descriptionFontSize = \"md\",\n  descriptionColor = \"foreground\",\n  background = {\n    type: \"solid\",\n    color: \"background\",\n  },\n  padding = 4,\n  borderRadius = \"md\",\n  className,\n  ...props\n}: TextWidgetProps): React.JSX.Element {\n  const backgroundColor = background.color || \"background\";\n  const backgroundImage =\n    (background.resource?.image_url || background.resource?.imageUrl) &&\n    background.type === \"image\"\n      ? `url(${background.resource.image_url || background.resource.imageUrl})`\n      : \"none\";\n  return (\n    <div\n      className={`bg-${backgroundColor} p-${padding} rounded-${borderRadius} ${className ?? \"\"}`}\n      style={{ backgroundImage }}\n      {...props}\n    >\n      {titleEnabled && (\n        <h2 className={`text-${titleFontSize} text-${titleColor} font-bold`}>\n          {title}\n        </h2>\n      )}\n      <p className={`text-${descriptionFontSize} text-${descriptionColor}`}>\n        {description}\n      </p>\n    </div>\n  );\n}\n\nexport const textWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"TextWidget\",\n  displayName: \"Text Widget\",\n  tabsConfig: [{ id: \"content\", label: \"Content\" }],\n  dataSourceTargetProps: [\"title\", \"description\"],\n  fields: [\n    // Content Tab - Title Group\n    {\n      key: \"titleEnabled\",\n      label: \"Widget Title\",\n      type: \"boolean\",\n      description: \"Enable the title displayed above the text\",\n      defaultValue: true,\n      tab: \"content\",\n      group: \"Title\",\n    },\n    {\n      key: \"title\",\n      label: \"Title\",\n      type: \"text\",\n      description: \"The title\",\n      defaultValue: \"Heads up!\",\n      tab: \"content\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    },\n    getFontSizeField({\n      key: \"titleFontSize\",\n      label: \"Title Font Size\",\n      description: \"Font size for the title\",\n      defaultValue: \"xl\",\n      tab: \"content\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    getColorField({\n      key: \"titleColor\",\n      label: \"Title Color\",\n      description: \"The color of the title\",\n      defaultValue: \"foreground\",\n      tab: \"content\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    // Content Tab - Description Group\n    {\n      key: \"description\",\n      label: \"Description\",\n      type: \"textarea\",\n      description: \"The text message\",\n      rows: 3,\n      defaultValue:\n        \"You can add components and dependencies to your app using the cli.\",\n      tab: \"content\",\n      group: \"Description\",\n    },\n    getFontSizeField({\n      key: \"descriptionFontSize\",\n      label: \"Description Font Size\",\n      description: \"Font size for the text\",\n      defaultValue: \"md\",\n      tab: \"content\",\n      group: \"Description\",\n    }),\n    getColorField({\n      key: \"descriptionColor\",\n      label: \"Description Color\",\n      description: \"The color of the text\",\n      defaultValue: \"foreground\",\n      tab: \"content\",\n      group: \"Description\",\n    }),\n    // Content Tab - Style Group\n    {\n      type: \"background\",\n      key: \"background\",\n      label: \"Background\",\n      description: \"Background for the text container\",\n      defaultValue: \"background\",\n      tab: \"content\",\n      group: \"Style\",\n    },\n    getPaddingField({\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"The padding of the text container\",\n      defaultValue: 4,\n      tab: \"content\",\n      group: \"Style\",\n    }),\n    getBorderRadiusField({\n      key: \"borderRadius\",\n      description: \"The border radius of the text container\",\n      label: \"Border Radius\",\n      tab: \"content\",\n      group: \"Style\",\n    }),\n  ],\n};\n"],"mappings":";;;;;;;;AAmCA,SAAgB,WAAW,EACzB,eAAe,MACf,QAAQ,eACR,gBAAgB,MAChB,aAAa,cACb,cAAc,yBACd,sBAAsB,MACtB,mBAAmB,cACnB,aAAa;CACX,MAAM;CACN,OAAO;CACR,EACD,UAAU,GACV,eAAe,MACf,WACA,GAAG,SACkC;CACrC,MAAM,kBAAkB,WAAW,SAAS;CAC5C,MAAM,mBACH,WAAW,UAAU,aAAa,WAAW,UAAU,aACxD,WAAW,SAAS,UAChB,OAAO,WAAW,SAAS,aAAa,WAAW,SAAS,SAAS,KACrE;AACN,QACE,qBAAC,OAAD;EACE,WAAW,MAAM,gBAAgB,KAAK,QAAQ,WAAW,aAAa,GAAG,aAAa;EACtF,OAAO,EAAE,iBAAiB;EAC1B,GAAI;YAHN,CAKG,gBACC,oBAAC,MAAD;GAAI,WAAW,QAAQ,cAAc,QAAQ,WAAW;aACrD;GACE,CAAA,EAEP,oBAAC,KAAD;GAAG,WAAW,QAAQ,oBAAoB,QAAQ;aAC/C;GACC,CAAA,CACA;;;AAIV,MAAa,2BAAiD;CAC5D,YAAY;CACZ,aAAa;CACb,YAAY,CAAC;EAAE,IAAI;EAAW,OAAO;EAAW,CAAC;CACjD,uBAAuB,CAAC,SAAS,cAAc;CAC/C,QAAQ;EAEN;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;EACD,iBAAiB;GACf,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;EACF,cAAc;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;EAEF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,MAAM;GACN,cACE;GACF,KAAK;GACL,OAAO;GACR;EACD,iBAAiB;GACf,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACF,cAAc;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EAEF;GACE,MAAM;GACN,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD,gBAAgB;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACF,qBAAqB;GACnB,KAAK;GACL,aAAa;GACb,OAAO;GACP,KAAK;GACL,OAAO;GACR,CAAC;EACH;CACF"}