@almadar/ui 5.5.3 → 5.5.4

package/dist/runtime/index.cjs

@@ -23239,7 +23239,8 @@ function DataGrid({
   reorderEvent,
   positionEvent,
   dndItemIdField,
-  dndRoot
+  dndRoot,
+  look = "dense"
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -23355,7 +23356,7 @@ function DataGrid({
       /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
-          className: cn("grid", gapStyles6[gap], colsClass, className),
+          className: cn("grid", gapStyles6[gap], colsClass, lookStyles5[look], className),
           style: gridTemplateColumns ? { gridTemplateColumns } : void 0,
           children: data.map((item, index) => {
             const itemData = item;
@@ -23532,7 +23533,7 @@ function DataGrid({
     ] })
   );
 }
-var dataGridLog, BADGE_VARIANTS, gapStyles6;
+var dataGridLog, BADGE_VARIANTS, gapStyles6, lookStyles5;
 var init_DataGrid = __esm({
   "components/molecules/DataGrid.tsx"() {
     "use client";
@@ -23567,6 +23568,13 @@ var init_DataGrid = __esm({
       lg: "gap-6",
       xl: "gap-8"
     };
+    lookStyles5 = {
+      dense: "gap-2 [&>*]:p-card-sm",
+      spacious: "gap-8 [&>*]:p-card-lg",
+      striped: "[&>*:nth-child(even)]:bg-muted/30",
+      borderless: "[&>*]:border-0 [&>*]:shadow-none",
+      "card-rows": "[&>*]:shadow-elevation-card [&>*]:rounded-container [&>*]:border [&>*]:border-border [&>*]:p-card-md"
+    };
     DataGrid.displayName = "DataGrid";
   }
 });
@@ -23650,7 +23658,8 @@ function DataList({
   reorderEvent: dndReorderEvent,
   positionEvent,
   dndItemIdField,
-  dndRoot
+  dndRoot,
+  look = "dense"
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -23915,6 +23924,7 @@ function DataList({
         className: cn(
           isCard && "bg-card rounded-xl border border-border shadow-elevation-dialog overflow-hidden",
           !isCard && gapClass,
+          listLookStyles[look],
           className
         ),
         children: [
@@ -23952,7 +23962,7 @@ function DataList({
     )
   );
 }
-var dataListLog;
+var dataListLog, listLookStyles;
 var init_DataList = __esm({
   "components/molecules/DataList.tsx"() {
     "use client";
@@ -23971,6 +23981,13 @@ var init_DataList = __esm({
     init_InfiniteScrollSentinel();
     init_useDataDnd();
     dataListLog = logger.createLogger("almadar:ui:data-list");
+    listLookStyles = {
+      dense: "[&_[data-entity-row]>div]:!py-1 [&_[data-entity-row]>div]:!px-3",
+      spacious: "[&_[data-entity-row]>div]:!py-5 [&_[data-entity-row]>div]:!px-8",
+      striped: "[&_[data-entity-row]:nth-child(even)>div]:bg-muted/30",
+      borderless: "[&_[data-entity-row]>div]:!border-0 [&_[data-entity-row]>div]:!hover:border-transparent",
+      "card-rows": "[&_[data-entity-row]>div]:shadow-elevation-card [&_[data-entity-row]>div]:rounded-container [&_[data-entity-row]>div]:!border [&_[data-entity-row]>div]:border-border [&_[data-entity-row]]:mb-2"
+    };
     DataList.displayName = "DataList";
   }
 });
@@ -24134,7 +24151,7 @@ var init_FormField = __esm({
     FormField.displayName = "FormField";
   }
 });
-var resolveFilterType, lookStyles5, FilterGroup;
+var resolveFilterType, lookStyles6, FilterGroup;
 var init_FilterGroup = __esm({
   "components/molecules/FilterGroup.tsx"() {
     "use client";
@@ -24148,7 +24165,7 @@ var init_FilterGroup = __esm({
     init_useEventBus();
     init_useQuerySingleton();
     resolveFilterType = (filter) => filter.filterType ?? filter.type;
-    lookStyles5 = {
+    lookStyles6 = {
       toolbar: "",
       chips: "gap-2 [&>*]:rounded-pill [&>*]:px-3 [&>*]:py-1",
       pills: "gap-2 [&>*]:rounded-pill",
@@ -24225,7 +24242,7 @@ var init_FilterGroup = __esm({
           {
             gap: "md",
             align: "center",
-            className: cn("flex-wrap", lookStyles5[look], className),
+            className: cn("flex-wrap", lookStyles6[look], className),
             children: [
               showIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "filter", className: "h-4 w-4 text-muted-foreground" }),
               filters.map((filter) => /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [
@@ -24284,7 +24301,7 @@ var init_FilterGroup = __esm({
         );
       }
       if (variant === "vertical") {
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-4", lookStyles5[look], className), children: [
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-4", lookStyles6[look], className), children: [
           showIcon && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "filter", className: "h-4 w-4" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold uppercase tracking-wide", children: "Filters" })
@@ -24372,7 +24389,7 @@ var init_FilterGroup = __esm({
           {
             gap: "sm",
             align: "center",
-            className: cn("flex-wrap", lookStyles5[look], className),
+            className: cn("flex-wrap", lookStyles6[look], className),
             children: [
               showIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "filter", className: "h-4 w-4 text-muted-foreground" }),
               filters.map((filter) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-[120px]", children: resolveFilterType(filter) === "date" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -24469,7 +24486,7 @@ var init_FilterGroup = __esm({
             "p-4 rounded-container",
             "bg-card",
             "border-[length:var(--border-width)] border-border",
-            lookStyles5[look],
+            lookStyles6[look],
             className
           ),
           children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", align: "center", className: "flex-wrap", children: [
@@ -28943,7 +28960,7 @@ function composeDisplayValue(value, format, max, prefix, suffix) {
   const withMax = max != null && max > 0 ? `${formatted} / ${max}` : formatted;
   return `${prefix ?? ""}${withMax}${suffix ?? ""}`;
 }
-var lookStyles6, variantColor, StatDisplay;
+var lookStyles7, variantColor, StatDisplay;
 var init_StatDisplay = __esm({
   "components/molecules/StatDisplay.tsx"() {
     "use client";
@@ -28955,7 +28972,7 @@ var init_StatDisplay = __esm({
     init_Sparkline();
     init_Icon();
     init_useEventBus();
-    lookStyles6 = {
+    lookStyles7 = {
       elevated: "",
       flat: "shadow-none border-[length:var(--border-width)] border-border",
       "progress-backed": "",
@@ -29042,7 +29059,7 @@ var init_StatDisplay = __esm({
       return /* @__PURE__ */ jsxRuntime.jsx(
         Card,
         {
-          className: cn(padSizes[size], lookStyles6[look], clickEvent && "cursor-pointer hover:shadow-md transition-shadow", className),
+          className: cn(padSizes[size], lookStyles7[look], clickEvent && "cursor-pointer hover:shadow-md transition-shadow", className),
           onClick: clickEvent ? handleClick : void 0,
           children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "start", justify: "between", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", className: "space-y-1 flex-1", children: [
@@ -34614,7 +34631,7 @@ function DataTable({
     {
       className: cn(
         "bg-card border-2 border-border rounded-none overflow-hidden",
-        lookStyles7[look],
+        lookStyles8[look],
         className
       ),
       children: [
@@ -34841,7 +34858,7 @@ function DataTable({
     }
   );
 }
-var lookStyles7;
+var lookStyles8;
 var init_DataTable = __esm({
   "components/organisms/DataTable.tsx"() {
     "use client";
@@ -34855,7 +34872,7 @@ var init_DataTable = __esm({
     init_useEventBus();
     init_useTranslate();
     init_types3();
-    lookStyles7 = {
+    lookStyles8 = {
       dense: "",
       spacious: "[&_tbody_tr_td]:py-5 [&_thead_tr_th]:py-4",
       striped: "[&_tbody_tr:nth-child(odd)]:bg-muted/30",
@@ -38020,7 +38037,7 @@ var init_GraphCanvas = __esm({
     GraphCanvas.displayName = "GraphCanvas";
   }
 });
-var lookStyles8, Header;
+var lookStyles9, Header;
 var init_Header = __esm({
   "components/organisms/Header.tsx"() {
     "use client";
@@ -38033,7 +38050,7 @@ var init_Header = __esm({
     init_Typography();
     init_cn();
     init_useTranslate();
-    lookStyles8 = {
+    lookStyles9 = {
       "compact-bar": "",
       hero: "py-section min-h-[200px] [&_h1]:text-display-1",
       breadcrumb: "py-2 text-sm [&_h1]:text-base [&_h1]:font-medium",
@@ -38073,7 +38090,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],
+            lookStyles9[look],
             className
           ),
           children: [
@@ -44769,7 +44786,7 @@ var init_TeamOrganism = __esm({
     TeamOrganism.displayName = "TeamOrganism";
   }
 });
-var lookStyles9, STATUS_STYLES3, Timeline;
+var lookStyles10, STATUS_STYLES3, Timeline;
 var init_Timeline = __esm({
   "components/organisms/Timeline.tsx"() {
     "use client";
@@ -44780,7 +44797,7 @@ var init_Timeline = __esm({
     init_ErrorState();
     init_EmptyState();
     init_useTranslate();
-    lookStyles9 = {
+    lookStyles10 = {
       "vertical-compact": "gap-1 [&>*]:py-1",
       "vertical-spacious": "",
       horizontal: "flex-row [&>*]:flex-row [&>*]:items-center",
@@ -44873,7 +44890,7 @@ var init_Timeline = __esm({
       }
       return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("p-6", className), children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "md", children: [
         title && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h5", weight: "semibold", children: title }),
-        /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "none", className: cn("relative", lookStyles9[look]), children: items.map((item, idx) => {
+        /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "none", className: cn("relative", lookStyles10[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;

package/dist/runtime/index.js

@@ -23190,7 +23190,8 @@ function DataGrid({
   reorderEvent,
   positionEvent,
   dndItemIdField,
-  dndRoot
+  dndRoot,
+  look = "dense"
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -23306,7 +23307,7 @@ function DataGrid({
       /* @__PURE__ */ jsx(
         Box,
         {
-          className: cn("grid", gapStyles6[gap], colsClass, className),
+          className: cn("grid", gapStyles6[gap], colsClass, lookStyles5[look], className),
           style: gridTemplateColumns ? { gridTemplateColumns } : void 0,
           children: data.map((item, index) => {
             const itemData = item;
@@ -23483,7 +23484,7 @@ function DataGrid({
     ] })
   );
 }
-var dataGridLog, BADGE_VARIANTS, gapStyles6;
+var dataGridLog, BADGE_VARIANTS, gapStyles6, lookStyles5;
 var init_DataGrid = __esm({
   "components/molecules/DataGrid.tsx"() {
     "use client";
@@ -23518,6 +23519,13 @@ var init_DataGrid = __esm({
       lg: "gap-6",
       xl: "gap-8"
     };
+    lookStyles5 = {
+      dense: "gap-2 [&>*]:p-card-sm",
+      spacious: "gap-8 [&>*]:p-card-lg",
+      striped: "[&>*:nth-child(even)]:bg-muted/30",
+      borderless: "[&>*]:border-0 [&>*]:shadow-none",
+      "card-rows": "[&>*]:shadow-elevation-card [&>*]:rounded-container [&>*]:border [&>*]:border-border [&>*]:p-card-md"
+    };
     DataGrid.displayName = "DataGrid";
   }
 });
@@ -23601,7 +23609,8 @@ function DataList({
   reorderEvent: dndReorderEvent,
   positionEvent,
   dndItemIdField,
-  dndRoot
+  dndRoot,
+  look = "dense"
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -23866,6 +23875,7 @@ function DataList({
         className: cn(
           isCard && "bg-card rounded-xl border border-border shadow-elevation-dialog overflow-hidden",
           !isCard && gapClass,
+          listLookStyles[look],
           className
         ),
         children: [
@@ -23903,7 +23913,7 @@ function DataList({
     )
   );
 }
-var dataListLog;
+var dataListLog, listLookStyles;
 var init_DataList = __esm({
   "components/molecules/DataList.tsx"() {
     "use client";
@@ -23922,6 +23932,13 @@ var init_DataList = __esm({
     init_InfiniteScrollSentinel();
     init_useDataDnd();
     dataListLog = createLogger("almadar:ui:data-list");
+    listLookStyles = {
+      dense: "[&_[data-entity-row]>div]:!py-1 [&_[data-entity-row]>div]:!px-3",
+      spacious: "[&_[data-entity-row]>div]:!py-5 [&_[data-entity-row]>div]:!px-8",
+      striped: "[&_[data-entity-row]:nth-child(even)>div]:bg-muted/30",
+      borderless: "[&_[data-entity-row]>div]:!border-0 [&_[data-entity-row]>div]:!hover:border-transparent",
+      "card-rows": "[&_[data-entity-row]>div]:shadow-elevation-card [&_[data-entity-row]>div]:rounded-container [&_[data-entity-row]>div]:!border [&_[data-entity-row]>div]:border-border [&_[data-entity-row]]:mb-2"
+    };
     DataList.displayName = "DataList";
   }
 });
@@ -24085,7 +24102,7 @@ var init_FormField = __esm({
     FormField.displayName = "FormField";
   }
 });
-var resolveFilterType, lookStyles5, FilterGroup;
+var resolveFilterType, lookStyles6, FilterGroup;
 var init_FilterGroup = __esm({
   "components/molecules/FilterGroup.tsx"() {
     "use client";
@@ -24099,7 +24116,7 @@ var init_FilterGroup = __esm({
     init_useEventBus();
     init_useQuerySingleton();
     resolveFilterType = (filter) => filter.filterType ?? filter.type;
-    lookStyles5 = {
+    lookStyles6 = {
       toolbar: "",
       chips: "gap-2 [&>*]:rounded-pill [&>*]:px-3 [&>*]:py-1",
       pills: "gap-2 [&>*]:rounded-pill",
@@ -24176,7 +24193,7 @@ var init_FilterGroup = __esm({
           {
             gap: "md",
             align: "center",
-            className: cn("flex-wrap", lookStyles5[look], className),
+            className: cn("flex-wrap", lookStyles6[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: [
@@ -24235,7 +24252,7 @@ var init_FilterGroup = __esm({
         );
       }
       if (variant === "vertical") {
-        return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4", lookStyles5[look], className), children: [
+        return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4", lookStyles6[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" })
@@ -24323,7 +24340,7 @@ var init_FilterGroup = __esm({
           {
             gap: "sm",
             align: "center",
-            className: cn("flex-wrap", lookStyles5[look], className),
+            className: cn("flex-wrap", lookStyles6[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(
@@ -24420,7 +24437,7 @@ var init_FilterGroup = __esm({
             "p-4 rounded-container",
             "bg-card",
             "border-[length:var(--border-width)] border-border",
-            lookStyles5[look],
+            lookStyles6[look],
             className
           ),
           children: /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "center", className: "flex-wrap", children: [
@@ -28894,7 +28911,7 @@ function composeDisplayValue(value, format, max, prefix, suffix) {
   const withMax = max != null && max > 0 ? `${formatted} / ${max}` : formatted;
   return `${prefix ?? ""}${withMax}${suffix ?? ""}`;
 }
-var lookStyles6, variantColor, StatDisplay;
+var lookStyles7, variantColor, StatDisplay;
 var init_StatDisplay = __esm({
   "components/molecules/StatDisplay.tsx"() {
     "use client";
@@ -28906,7 +28923,7 @@ var init_StatDisplay = __esm({
     init_Sparkline();
     init_Icon();
     init_useEventBus();
-    lookStyles6 = {
+    lookStyles7 = {
       elevated: "",
       flat: "shadow-none border-[length:var(--border-width)] border-border",
       "progress-backed": "",
@@ -28993,7 +29010,7 @@ var init_StatDisplay = __esm({
       return /* @__PURE__ */ jsx(
         Card,
         {
-          className: cn(padSizes[size], lookStyles6[look], clickEvent && "cursor-pointer hover:shadow-md transition-shadow", className),
+          className: cn(padSizes[size], lookStyles7[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: [
@@ -34565,7 +34582,7 @@ function DataTable({
     {
       className: cn(
         "bg-card border-2 border-border rounded-none overflow-hidden",
-        lookStyles7[look],
+        lookStyles8[look],
         className
       ),
       children: [
@@ -34792,7 +34809,7 @@ function DataTable({
     }
   );
 }
-var lookStyles7;
+var lookStyles8;
 var init_DataTable = __esm({
   "components/organisms/DataTable.tsx"() {
     "use client";
@@ -34806,7 +34823,7 @@ var init_DataTable = __esm({
     init_useEventBus();
     init_useTranslate();
     init_types3();
-    lookStyles7 = {
+    lookStyles8 = {
       dense: "",
       spacious: "[&_tbody_tr_td]:py-5 [&_thead_tr_th]:py-4",
       striped: "[&_tbody_tr:nth-child(odd)]:bg-muted/30",
@@ -37971,7 +37988,7 @@ var init_GraphCanvas = __esm({
     GraphCanvas.displayName = "GraphCanvas";
   }
 });
-var lookStyles8, Header;
+var lookStyles9, Header;
 var init_Header = __esm({
   "components/organisms/Header.tsx"() {
     "use client";
@@ -37984,7 +38001,7 @@ var init_Header = __esm({
     init_Typography();
     init_cn();
     init_useTranslate();
-    lookStyles8 = {
+    lookStyles9 = {
       "compact-bar": "",
       hero: "py-section min-h-[200px] [&_h1]:text-display-1",
       breadcrumb: "py-2 text-sm [&_h1]:text-base [&_h1]:font-medium",
@@ -38024,7 +38041,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],
+            lookStyles9[look],
             className
           ),
           children: [
@@ -44720,7 +44737,7 @@ var init_TeamOrganism = __esm({
     TeamOrganism.displayName = "TeamOrganism";
   }
 });
-var lookStyles9, STATUS_STYLES3, Timeline;
+var lookStyles10, STATUS_STYLES3, Timeline;
 var init_Timeline = __esm({
   "components/organisms/Timeline.tsx"() {
     "use client";
@@ -44731,7 +44748,7 @@ var init_Timeline = __esm({
     init_ErrorState();
     init_EmptyState();
     init_useTranslate();
-    lookStyles9 = {
+    lookStyles10 = {
       "vertical-compact": "gap-1 [&>*]:py-1",
       "vertical-spacious": "",
       horizontal: "flex-row [&>*]:flex-row [&>*]:items-center",
@@ -44824,7 +44841,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: cn("relative", lookStyles9[look]), children: items.map((item, idx) => {
+        /* @__PURE__ */ jsx(VStack, { gap: "none", className: cn("relative", lookStyles10[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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.5.3",
+  "version": "5.5.4",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [