@almadar/ui 5.4.0 → 5.5.0

package/dist/avl/index.js

@@ -6721,7 +6721,7 @@ var init_Overlay = __esm({
     };
   }
 });
-var sizeClasses2, minWidthClasses, Modal;
+var sizeClasses2, minWidthClasses, lookStyles, Modal;
 var init_Modal = __esm({
   "components/molecules/Modal.tsx"() {
     "use client";
@@ -6746,6 +6746,12 @@ var init_Modal = __esm({
       xl: "min-w-[700px] max-sm:min-w-0",
       full: "min-w-0"
     };
+    lookStyles = {
+      "centered-card": "",
+      "top-sheet": "top-0 rounded-t-none rounded-b-container max-w-full w-full",
+      "side-drawer": "right-0 top-0 bottom-0 h-full rounded-l-container rounded-r-none w-[400px] max-w-full",
+      "full-screen": "inset-0 rounded-none w-full h-full max-w-full"
+    };
     Modal = ({
       isOpen = true,
       onClose = () => {
@@ -6759,7 +6765,8 @@ var init_Modal = __esm({
       closeOnEscape = true,
       className,
       closeEvent,
-      swipeDownToClose = true
+      swipeDownToClose = true,
+      look = "centered-card"
     }) => {
       const eventBus = useEventBus();
       const modalRef = useRef(null);
@@ -6844,6 +6851,7 @@ var init_Modal = __esm({
                   // Mobile: take the entire screen. Override desktop max-w cap,
                   // full height, no rounded corners, no min-width.
                   "max-sm:max-w-none max-sm:max-h-none max-sm:w-full max-sm:h-full max-sm:rounded-none",
+                  lookStyles[look],
                   className
                 ),
                 style: dragY > 0 ? {
@@ -8418,7 +8426,7 @@ var init_Checkbox = __esm({
     Checkbox.displayName = "Checkbox";
   }
 });
-var variantStyles4, paddingStyles2, shadowStyles2, lookStyles, Card, CardHeader, CardTitle, CardContent, CardBody, CardFooter;
+var variantStyles4, paddingStyles2, shadowStyles2, lookStyles2, Card, CardHeader, CardTitle, CardContent, CardBody, CardFooter;
 var init_Card = __esm({
   "components/atoms/Card.tsx"() {
     init_cn();
@@ -8466,7 +8474,7 @@ var init_Card = __esm({
       md: "shadow",
       lg: "shadow-elevation-dialog"
     };
-    lookStyles = {
+    lookStyles2 = {
       elevated: "",
       "flat-bordered": "shadow-none border-[length:var(--border-width)] border-border",
       "borderless-divider": "shadow-none border-0 border-b border-border rounded-none",
@@ -8496,7 +8504,7 @@ var init_Card = __esm({
               "transition-all duration-[var(--transition-normal)]",
               variantStyles4[variant],
               paddingStyles2[padding],
-              lookStyles[look],
+              lookStyles2[look],
               shadow && shadowStyles2[shadow],
               className
             ),
@@ -19882,7 +19890,7 @@ var init_BookTableOfContents = __esm({
     BookTableOfContents.displayName = "BookTableOfContents";
   }
 });
-var ICON_NAME_ALIASES, EmptyState;
+var ICON_NAME_ALIASES, lookStyles3, EmptyState;
 var init_EmptyState = __esm({
   "components/molecules/EmptyState.tsx"() {
     "use client";
@@ -19899,6 +19907,12 @@ var init_EmptyState = __esm({
       error: "x-circle",
       warning: "alert-circle"
     };
+    lookStyles3 = {
+      "icon-only": "",
+      illustrated: "[&_svg]:w-32 [&_svg]:h-32",
+      "text-only": "[&_svg]:hidden",
+      mascot: "[&_svg]:w-24 [&_svg]:h-24 [&_svg]:rounded-pill"
+    };
     EmptyState = ({
       icon,
       title,
@@ -19909,7 +19923,8 @@ var init_EmptyState = __esm({
       className,
       destructive,
       variant,
-      actionEvent
+      actionEvent,
+      look = "icon-only"
     }) => {
       const eventBus = useEventBus();
       const { t } = useTranslate();
@@ -19929,6 +19944,7 @@ var init_EmptyState = __esm({
           align: "center",
           className: cn(
             "justify-center py-12 text-center",
+            lookStyles3[look],
             className
           ),
           children: [
@@ -21169,7 +21185,7 @@ function useSafeEventBus2() {
     } };
   }
 }
-var log9, ButtonGroup;
+var log9, lookStyles4, ButtonGroup;
 var init_ButtonGroup = __esm({
   "components/molecules/ButtonGroup.tsx"() {
     "use client";
@@ -21177,6 +21193,13 @@ var init_ButtonGroup = __esm({
     init_atoms();
     init_useEventBus();
     log9 = createLogger("almadar:ui:button-group");
+    lookStyles4 = {
+      "right-aligned-buttons": "",
+      "floating-bar": "fixed bottom-section left-1/2 -translate-x-1/2 shadow-elevation-toast bg-card p-card-sm rounded-container",
+      "inline-row": "gap-2 inline-flex",
+      "dropdown-menu": "[&>button:not(:first-child)]:hidden",
+      "command-palette-trigger": "[&>button:not(:first-child)]:hidden"
+    };
     ButtonGroup = ({
       children,
       primary,
@@ -21186,7 +21209,8 @@ var init_ButtonGroup = __esm({
       className,
       // Filter-group pattern props (entity and filters are used for schema-driven filtering)
       entity: _entity,
-      filters
+      filters,
+      look = "right-aligned-buttons"
     }) => {
       const eventBus = useSafeEventBus2();
       const variantClasses2 = {
@@ -21263,6 +21287,7 @@ var init_ButtonGroup = __esm({
             "inline-flex gap-2",
             variantClasses2[variant],
             orientationClasses[orientation],
+            lookStyles4[look],
             className
           ),
           role: "group",
@@ -23794,7 +23819,7 @@ var init_CastleTemplate = __esm({
     CastleTemplate.displayName = "CastleTemplate";
   }
 });
-var CHART_COLORS, seriesColor, monthFormatter, formatTimeLabel, BarChart, PieChart, LineChart, ScatterChart, Chart;
+var CHART_COLORS, seriesColor, monthFormatter, formatTimeLabel, BarChart, PieChart, LineChart, ScatterChart, LOOK_FROM_CHART_TYPE, Chart;
 var init_Chart = __esm({
   "components/organisms/Chart.tsx"() {
     "use client";
@@ -23824,7 +23849,7 @@ var init_Chart = __esm({
       if (Number.isNaN(parsed.getTime())) return raw;
       return monthFormatter.format(parsed);
     };
-    BarChart = ({ series, height, showValues, stack, timeAxis, histogram = false, onPointClick }) => {
+    BarChart = ({ series, height, showValues, stack, timeAxis, histogram = false, horizontal = false, onPointClick }) => {
       const categories = useMemo(() => {
         const set = [];
         const seen = /* @__PURE__ */ new Set();
@@ -23862,6 +23887,64 @@ var init_Chart = __esm({
         }
         return m;
       }, [series, stack, columnTotals]);
+      if (horizontal) {
+        return /* @__PURE__ */ jsx(VStack, { gap: "xs", align: "stretch", className: "w-full", style: { minHeight: height }, children: categories.map((label, catIdx) => {
+          const displayLabel = timeAxis ? formatTimeLabel(label) : label;
+          const total = columnTotals?.[catIdx] ?? 1;
+          return /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", className: "w-full", children: [
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "caption",
+                color: "secondary",
+                className: "truncate text-right",
+                style: { width: 80, flexShrink: 0 },
+                children: displayLabel
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              HStack,
+              {
+                gap: stack === "none" ? "xs" : "none",
+                align: "center",
+                className: "flex-1 min-w-0",
+                style: { height: 24 },
+                children: series.map((s, sIdx) => {
+                  const value = valueAt(s, label);
+                  const ratio = stack === "normalize" ? total === 0 ? 0 : value / total * 100 : value / maxValue * 100;
+                  const color = seriesColor(s, sIdx);
+                  return /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      className: "h-full rounded-r-sm transition-all duration-500 ease-out min-w-[2px] cursor-pointer hover:opacity-80",
+                      style: {
+                        width: `${ratio}%`,
+                        backgroundColor: color
+                      },
+                      onClick: () => onPointClick?.(
+                        { label, value, color },
+                        s.name
+                      ),
+                      title: `${s.name}: ${value}`
+                    },
+                    s.name
+                  );
+                })
+              }
+            ),
+            showValues && series.length === 1 && /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "caption",
+                color: "secondary",
+                className: "tabular-nums",
+                style: { width: 40, flexShrink: 0 },
+                children: valueAt(series[0], label)
+              }
+            )
+          ] }, label);
+        }) });
+      }
       return /* @__PURE__ */ jsx(
         HStack,
         {
@@ -24289,10 +24372,20 @@ var init_Chart = __esm({
         }
       );
     };
+    LOOK_FROM_CHART_TYPE = {
+      bar: "bar-vertical",
+      line: "line",
+      pie: "pie",
+      area: "area",
+      donut: "donut",
+      scatter: "scatter",
+      histogram: "histogram"
+    };
     Chart = ({
       title,
       subtitle,
-      chartType = "bar",
+      chartType,
+      look,
       series,
       data: simpleData,
       scatterData,
@@ -24308,6 +24401,7 @@ var init_Chart = __esm({
       error,
       className
     }) => {
+      const resolvedLook = look ?? (chartType ? LOOK_FROM_CHART_TYPE[chartType] : "bar-vertical");
       const eventBus = useEventBus();
       const { t } = useTranslate();
       const handleAction = useCallback(
@@ -24336,7 +24430,7 @@ var init_Chart = __esm({
         return [];
       }, [simpleData, series]);
       const firstSeriesData = normalizedSeries[0]?.data ?? [];
-      const hasContent = chartType === "scatter" ? (scatterData?.length ?? 0) > 0 : normalizedSeries.some((s) => s.data.length > 0);
+      const hasContent = resolvedLook === "scatter" ? (scatterData?.length ?? 0) > 0 : normalizedSeries.some((s) => s.data.length > 0);
       if (isLoading) {
         return /* @__PURE__ */ jsx(LoadingState, { message: "Loading chart...", className });
       }
@@ -24371,7 +24465,18 @@ var init_Chart = __esm({
           )) })
         ] }),
         /* @__PURE__ */ jsxs(Box, { className: "w-full", children: [
-          chartType === "bar" && /* @__PURE__ */ jsx(
+          resolvedLook === "bar-vertical" && /* @__PURE__ */ jsx(
+            BarChart,
+            {
+              series: normalizedSeries,
+              height,
+              showValues,
+              stack,
+              timeAxis,
+              onPointClick: handlePointClick
+            }
+          ),
+          resolvedLook === "bar-horizontal" && /* @__PURE__ */ jsx(
             BarChart,
             {
               series: normalizedSeries,
@@ -24379,10 +24484,11 @@ var init_Chart = __esm({
               showValues,
               stack,
               timeAxis,
+              horizontal: true,
               onPointClick: handlePointClick
             }
           ),
-          chartType === "histogram" && /* @__PURE__ */ jsx(
+          resolvedLook === "histogram" && /* @__PURE__ */ jsx(
             BarChart,
             {
               series: normalizedSeries,
@@ -24394,7 +24500,7 @@ var init_Chart = __esm({
               onPointClick: handlePointClick
             }
           ),
-          chartType === "line" && /* @__PURE__ */ jsx(
+          resolvedLook === "line" && /* @__PURE__ */ jsx(
             LineChart,
             {
               series: normalizedSeries,
@@ -24404,7 +24510,7 @@ var init_Chart = __esm({
               onPointClick: handlePointClick
             }
           ),
-          chartType === "area" && /* @__PURE__ */ jsx(
+          resolvedLook === "area" && /* @__PURE__ */ jsx(
             LineChart,
             {
               series: normalizedSeries,
@@ -24415,7 +24521,7 @@ var init_Chart = __esm({
               onPointClick: handlePointClick
             }
           ),
-          chartType === "pie" && /* @__PURE__ */ jsx(
+          resolvedLook === "pie" && /* @__PURE__ */ jsx(
             PieChart,
             {
               data: firstSeriesData,
@@ -24424,7 +24530,7 @@ var init_Chart = __esm({
               onPointClick: handlePointClick
             }
           ),
-          chartType === "donut" && /* @__PURE__ */ jsx(
+          resolvedLook === "donut" && /* @__PURE__ */ jsx(
             PieChart,
             {
               data: firstSeriesData,
@@ -24434,7 +24540,7 @@ var init_Chart = __esm({
               onPointClick: handlePointClick
             }
           ),
-          chartType === "scatter" && /* @__PURE__ */ jsx(
+          resolvedLook === "scatter" && /* @__PURE__ */ jsx(
             ScatterChart,
             {
               data: scatterData ?? [],
@@ -27857,7 +27963,7 @@ var init_useQuerySingleton = __esm({
     queryStores = /* @__PURE__ */ new Map();
   }
 });
-var resolveFilterType, FilterGroup;
+var resolveFilterType, lookStyles5, FilterGroup;
 var init_FilterGroup = __esm({
   "components/molecules/FilterGroup.tsx"() {
     "use client";
@@ -27871,6 +27977,13 @@ var init_FilterGroup = __esm({
     init_useEventBus();
     init_useQuerySingleton();
     resolveFilterType = (filter) => filter.filterType ?? filter.type;
+    lookStyles5 = {
+      toolbar: "",
+      chips: "gap-2 [&>*]:rounded-pill [&>*]:px-3 [&>*]:py-1",
+      pills: "gap-2 [&>*]:rounded-pill",
+      "popover-trigger": "[&>*:not(:first-child)]:hidden",
+      "inline-column-header": "hidden"
+    };
     FilterGroup = ({
       entity,
       filters,
@@ -27880,7 +27993,8 @@ var init_FilterGroup = __esm({
       variant = "default",
       showIcon = true,
       query,
-      isLoading
+      isLoading,
+      look = "toolbar"
     }) => {
       const eventBus = useEventBus();
       const queryState = useQuerySingleton(query);
@@ -27935,63 +28049,71 @@ var init_FilterGroup = __esm({
       }, [onClearAll, queryState, eventBus, entity, query]);
       const activeFilterCount = Object.keys(selectedValues).length;
       if (variant === "pills") {
-        return /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "center", className: cn("flex-wrap", className), children: [
-          showIcon && /* @__PURE__ */ jsx(Icon, { name: "filter", className: "h-4 w-4 text-muted-foreground" }),
-          filters.map((filter) => /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
-            /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-muted-foreground", children: [
-              filter.label,
-              ":"
-            ] }),
-            /* @__PURE__ */ jsxs(
-              HStack,
-              {
-                gap: "none",
-                className: "rounded-sm overflow-hidden border-[length:var(--border-width)] border-border",
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => handleFilterSelect(filter.field, null),
-                      className: cn(
-                        "px-3 py-1.5 text-sm font-medium transition-all duration-[var(--transition-fast)]",
-                        !selectedValues[filter.field] ? "bg-primary text-primary-foreground" : "bg-card text-muted-foreground hover:bg-muted"
-                      ),
-                      children: "All"
-                    }
-                  ),
-                  filter.options?.map((option) => /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => handleFilterSelect(filter.field, option),
-                      className: cn(
-                        "px-3 py-1.5 text-sm font-medium transition-all duration-[var(--transition-fast)]",
-                        "border-l-[length:var(--border-width)] border-border",
-                        selectedValues[filter.field] === option ? "bg-primary text-primary-foreground" : "bg-card text-muted-foreground hover:bg-muted"
+        return /* @__PURE__ */ jsxs(
+          HStack,
+          {
+            gap: "md",
+            align: "center",
+            className: cn("flex-wrap", lookStyles5[look], className),
+            children: [
+              showIcon && /* @__PURE__ */ jsx(Icon, { name: "filter", className: "h-4 w-4 text-muted-foreground" }),
+              filters.map((filter) => /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-muted-foreground", children: [
+                  filter.label,
+                  ":"
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  HStack,
+                  {
+                    gap: "none",
+                    className: "rounded-sm overflow-hidden border-[length:var(--border-width)] border-border",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => handleFilterSelect(filter.field, null),
+                          className: cn(
+                            "px-3 py-1.5 text-sm font-medium transition-all duration-[var(--transition-fast)]",
+                            !selectedValues[filter.field] ? "bg-primary text-primary-foreground" : "bg-card text-muted-foreground hover:bg-muted"
+                          ),
+                          children: "All"
+                        }
                       ),
-                      children: option
-                    },
-                    option
-                  ))
-                ]
-              }
-            )
-          ] }, filter.field)),
-          activeFilterCount > 0 && /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "sm",
-              onClick: handleClearAll,
-              leftIcon: /* @__PURE__ */ jsx(Icon, { name: "x", className: "h-3.5 w-3.5" }),
-              children: "Clear"
-            }
-          )
-        ] });
+                      filter.options?.map((option) => /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => handleFilterSelect(filter.field, option),
+                          className: cn(
+                            "px-3 py-1.5 text-sm font-medium transition-all duration-[var(--transition-fast)]",
+                            "border-l-[length:var(--border-width)] border-border",
+                            selectedValues[filter.field] === option ? "bg-primary text-primary-foreground" : "bg-card text-muted-foreground hover:bg-muted"
+                          ),
+                          children: option
+                        },
+                        option
+                      ))
+                    ]
+                  }
+                )
+              ] }, filter.field)),
+              activeFilterCount > 0 && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: handleClearAll,
+                  leftIcon: /* @__PURE__ */ jsx(Icon, { name: "x", className: "h-3.5 w-3.5" }),
+                  children: "Clear"
+                }
+              )
+            ]
+          }
+        );
       }
       if (variant === "vertical") {
-        return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4", className), children: [
+        return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4", lookStyles5[look], className), children: [
           showIcon && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
             /* @__PURE__ */ jsx(Icon, { name: "filter", className: "h-4 w-4" }),
             /* @__PURE__ */ jsx("span", { className: "text-sm font-bold uppercase tracking-wide", children: "Filters" })
@@ -28074,92 +28196,100 @@ var init_FilterGroup = __esm({
         ] });
       }
       if (variant === "compact") {
-        return /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", className: cn("flex-wrap", className), children: [
-          showIcon && /* @__PURE__ */ jsx(Icon, { name: "filter", className: "h-4 w-4 text-muted-foreground" }),
-          filters.map((filter) => /* @__PURE__ */ jsx("div", { className: "min-w-[120px]", children: resolveFilterType(filter) === "date" ? /* @__PURE__ */ jsx(
-            Input,
-            {
-              type: "date",
-              value: selectedValues[filter.field] || "",
-              onChange: (e) => handleFilterSelect(filter.field, e.target.value || null),
-              clearable: true,
-              onClear: () => handleFilterSelect(filter.field, null),
-              className: "text-sm"
-            }
-          ) : resolveFilterType(filter) === "daterange" || resolveFilterType(filter) === "date-range" ? /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                type: "date",
-                value: selectedValues[`${filter.field}_from`] || "",
-                onChange: (e) => handleFilterSelect(
-                  `${filter.field}_from`,
-                  e.target.value || null
-                ),
-                className: "text-sm min-w-[100px]"
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "-" }),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                type: "date",
-                value: selectedValues[`${filter.field}_to`] || "",
-                onChange: (e) => handleFilterSelect(
-                  `${filter.field}_to`,
-                  e.target.value || null
+        return /* @__PURE__ */ jsxs(
+          HStack,
+          {
+            gap: "sm",
+            align: "center",
+            className: cn("flex-wrap", lookStyles5[look], className),
+            children: [
+              showIcon && /* @__PURE__ */ jsx(Icon, { name: "filter", className: "h-4 w-4 text-muted-foreground" }),
+              filters.map((filter) => /* @__PURE__ */ jsx("div", { className: "min-w-[120px]", children: resolveFilterType(filter) === "date" ? /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "date",
+                  value: selectedValues[filter.field] || "",
+                  onChange: (e) => handleFilterSelect(filter.field, e.target.value || null),
+                  clearable: true,
+                  onClear: () => handleFilterSelect(filter.field, null),
+                  className: "text-sm"
+                }
+              ) : resolveFilterType(filter) === "daterange" || resolveFilterType(filter) === "date-range" ? /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "date",
+                    value: selectedValues[`${filter.field}_from`] || "",
+                    onChange: (e) => handleFilterSelect(
+                      `${filter.field}_from`,
+                      e.target.value || null
+                    ),
+                    className: "text-sm min-w-[100px]"
+                  }
                 ),
-                className: "text-sm min-w-[100px]"
-              }
-            )
-          ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsx(
-            Input,
-            {
-              value: selectedValues[filter.field] || "",
-              onChange: (e) => handleFilterSelect(filter.field, e.target.value || null),
-              placeholder: filter.label,
-              clearable: true,
-              onClear: () => handleFilterSelect(filter.field, null),
-              className: "text-sm"
-            }
-          ) : /* @__PURE__ */ jsx(
-            Select,
-            {
-              value: selectedValues[filter.field] || "all",
-              onChange: (e) => handleFilterSelect(filter.field, e.target.value),
-              options: [
-                { value: "all", label: `All ${filter.label}` },
-                ...filter.options?.map((opt) => ({
-                  value: opt,
-                  label: opt
-                })) || []
-              ],
-              className: "text-sm"
-            }
-          ) }, filter.field)),
-          activeFilterCount > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-            Object.entries(selectedValues).map(([field, value]) => {
-              const filterDef = filters.find((f3) => f3.field === field);
-              return /* @__PURE__ */ jsxs(
-                Badge,
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "-" }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "date",
+                    value: selectedValues[`${filter.field}_to`] || "",
+                    onChange: (e) => handleFilterSelect(
+                      `${filter.field}_to`,
+                      e.target.value || null
+                    ),
+                    className: "text-sm min-w-[100px]"
+                  }
+                )
+              ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsx(
+                Input,
                 {
-                  variant: "primary",
-                  size: "md",
-                  className: "cursor-pointer",
-                  onClick: () => handleFilterSelect(field, null),
-                  children: [
-                    filterDef?.label,
-                    ": ",
-                    value,
-                    /* @__PURE__ */ jsx(Icon, { name: "x", className: "ml-1 h-3 w-3" })
-                  ]
-                },
-                field
-              );
-            }),
-            /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: handleClearAll, children: "Clear all" })
-          ] })
-        ] });
+                  value: selectedValues[filter.field] || "",
+                  onChange: (e) => handleFilterSelect(filter.field, e.target.value || null),
+                  placeholder: filter.label,
+                  clearable: true,
+                  onClear: () => handleFilterSelect(filter.field, null),
+                  className: "text-sm"
+                }
+              ) : /* @__PURE__ */ jsx(
+                Select,
+                {
+                  value: selectedValues[filter.field] || "all",
+                  onChange: (e) => handleFilterSelect(filter.field, e.target.value),
+                  options: [
+                    { value: "all", label: `All ${filter.label}` },
+                    ...filter.options?.map((opt) => ({
+                      value: opt,
+                      label: opt
+                    })) || []
+                  ],
+                  className: "text-sm"
+                }
+              ) }, filter.field)),
+              activeFilterCount > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                Object.entries(selectedValues).map(([field, value]) => {
+                  const filterDef = filters.find((f3) => f3.field === field);
+                  return /* @__PURE__ */ jsxs(
+                    Badge,
+                    {
+                      variant: "primary",
+                      size: "md",
+                      className: "cursor-pointer",
+                      onClick: () => handleFilterSelect(field, null),
+                      children: [
+                        filterDef?.label,
+                        ": ",
+                        value,
+                        /* @__PURE__ */ jsx(Icon, { name: "x", className: "ml-1 h-3 w-3" })
+                      ]
+                    },
+                    field
+                  );
+                }),
+                /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: handleClearAll, children: "Clear all" })
+              ] })
+            ]
+          }
+        );
       }
       return /* @__PURE__ */ jsx(
         "div",
@@ -28168,6 +28298,7 @@ var init_FilterGroup = __esm({
             "p-4 rounded-container",
             "bg-card",
             "border-[length:var(--border-width)] border-border",
+            lookStyles5[look],
             className
           ),
           children: /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "center", className: "flex-wrap", children: [
@@ -32641,7 +32772,7 @@ function composeDisplayValue(value, format, max, prefix, suffix) {
   const withMax = max != null && max > 0 ? `${formatted} / ${max}` : formatted;
   return `${prefix ?? ""}${withMax}${suffix ?? ""}`;
 }
-var variantColor, StatDisplay;
+var lookStyles6, variantColor, StatDisplay;
 var init_StatDisplay = __esm({
   "components/molecules/StatDisplay.tsx"() {
     "use client";
@@ -32653,6 +32784,13 @@ var init_StatDisplay = __esm({
     init_Sparkline();
     init_Icon();
     init_useEventBus();
+    lookStyles6 = {
+      elevated: "",
+      flat: "shadow-none border-[length:var(--border-width)] border-border",
+      "progress-backed": "",
+      gauge: "",
+      sparkline: ""
+    };
     variantColor = {
       default: "text-foreground",
       primary: "text-primary",
@@ -32680,6 +32818,7 @@ var init_StatDisplay = __esm({
       size = "md",
       variant = "default",
       compact = false,
+      look = "elevated",
       className,
       isLoading = false,
       error = null
@@ -32732,7 +32871,7 @@ var init_StatDisplay = __esm({
       return /* @__PURE__ */ jsx(
         Card,
         {
-          className: cn(padSizes[size], clickEvent && "cursor-pointer hover:shadow-md transition-shadow", className),
+          className: cn(padSizes[size], lookStyles6[look], clickEvent && "cursor-pointer hover:shadow-md transition-shadow", className),
           onClick: clickEvent ? handleClick : void 0,
           children: /* @__PURE__ */ jsxs(HStack, { align: "start", justify: "between", children: [
             /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "space-y-1 flex-1", children: [
@@ -37911,7 +38050,8 @@ function DataTable({
   bulkActions,
   headerActions,
   showTotal = true,
-  className
+  className,
+  look = "dense"
 }) {
   const [openActionMenu, setOpenActionMenu] = useState(
     null
@@ -38038,6 +38178,7 @@ function DataTable({
     {
       className: cn(
         "bg-card border-2 border-border rounded-none overflow-hidden",
+        lookStyles7[look],
         className
       ),
       children: [
@@ -38264,6 +38405,7 @@ function DataTable({
     }
   );
 }
+var lookStyles7;
 var init_DataTable = __esm({
   "components/organisms/DataTable.tsx"() {
     "use client";
@@ -38277,6 +38419,13 @@ var init_DataTable = __esm({
     init_useEventBus();
     init_useTranslate();
     init_types3();
+    lookStyles7 = {
+      dense: "",
+      spacious: "[&_tbody_tr_td]:py-5 [&_thead_tr_th]:py-4",
+      striped: "[&_tbody_tr:nth-child(odd)]:bg-muted/30",
+      borderless: "border-0 [&_thead]:border-b-0 [&_tbody_tr]:border-b-0 [&_tbody]:divide-y-0",
+      "card-rows": "border-0 [&_tbody]:divide-y-0 [&_tbody_tr]:border-b-0 [&_tbody_tr]:shadow-elevation-card [&_tbody_tr]:rounded-container [&_tbody_tr]:bg-card [&_tbody]:[&_tr]:my-2"
+    };
     DataTable.displayName = "DataTable";
   }
 });
@@ -41435,7 +41584,7 @@ var init_GraphCanvas = __esm({
     GraphCanvas.displayName = "GraphCanvas";
   }
 });
-var Header;
+var lookStyles8, Header;
 var init_Header = __esm({
   "components/organisms/Header.tsx"() {
     "use client";
@@ -41448,6 +41597,13 @@ var init_Header = __esm({
     init_Typography();
     init_cn();
     init_useTranslate();
+    lookStyles8 = {
+      "compact-bar": "",
+      hero: "py-section min-h-[200px] [&_h1]:text-display-1",
+      breadcrumb: "py-2 text-sm [&_h1]:text-base [&_h1]:font-medium",
+      contextual: "py-3 [&_h1]:text-lg",
+      "editorial-banner": "py-12 [&_h1]:text-display-2 [&_h1]:font-display-bold border-b border-border"
+    };
     Header = ({
       logo,
       logoSrc,
@@ -41465,6 +41621,7 @@ var init_Header = __esm({
       actions,
       sticky = true,
       variant = "mobile",
+      look = "compact-bar",
       onLogoClick,
       className
     }) => {
@@ -41480,6 +41637,7 @@ var init_Header = __esm({
             "flex items-center px-4 justify-between bg-card",
             sticky && "sticky top-0 z-50",
             variant === "mobile" && "lg:hidden",
+            lookStyles8[look],
             className
           ),
           children: [
@@ -48175,7 +48333,7 @@ var init_TeamOrganism = __esm({
     TeamOrganism.displayName = "TeamOrganism";
   }
 });
-var STATUS_STYLES3, Timeline;
+var lookStyles9, STATUS_STYLES3, Timeline;
 var init_Timeline = __esm({
   "components/organisms/Timeline.tsx"() {
     "use client";
@@ -48186,6 +48344,12 @@ var init_Timeline = __esm({
     init_ErrorState();
     init_EmptyState();
     init_useTranslate();
+    lookStyles9 = {
+      "vertical-compact": "gap-1 [&>*]:py-1",
+      "vertical-spacious": "",
+      horizontal: "flex-row [&>*]:flex-row [&>*]:items-center",
+      swimlane: "flex-row gap-6 [&>*]:flex-row [&>*]:items-center"
+    };
     STATUS_STYLES3 = {
       complete: {
         dotColor: "text-success",
@@ -48216,7 +48380,8 @@ var init_Timeline = __esm({
       entity,
       isLoading = false,
       error,
-      className
+      className,
+      look = "vertical-spacious"
     }) => {
       const { t } = useTranslate();
       const entityData = Array.isArray(entity) ? entity : [];
@@ -48272,7 +48437,7 @@ var init_Timeline = __esm({
       }
       return /* @__PURE__ */ jsx(Card, { className: cn("p-6", className), children: /* @__PURE__ */ jsxs(VStack, { gap: "md", children: [
         title && /* @__PURE__ */ jsx(Typography, { variant: "h5", weight: "semibold", children: title }),
-        /* @__PURE__ */ jsx(VStack, { gap: "none", className: "relative", children: items.map((item, idx) => {
+        /* @__PURE__ */ jsx(VStack, { gap: "none", className: cn("relative", lookStyles9[look]), children: items.map((item, idx) => {
           const status = item.status || "pending";
           const style = STATUS_STYLES3[status] || STATUS_STYLES3.pending;
           const ItemIcon = item.icon || style.icon;