@almadar/ui 5.5.3 → 5.5.5

package/dist/avl/index.cjs

@@ -27058,7 +27058,8 @@ function DataGrid({
   reorderEvent,
   positionEvent,
   dndItemIdField,
-  dndRoot
+  dndRoot,
+  look = "dense"
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -27174,7 +27175,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;
@@ -27351,7 +27352,7 @@ function DataGrid({
     ] })
   );
 }
-var dataGridLog, BADGE_VARIANTS, gapStyles6;
+var dataGridLog, BADGE_VARIANTS, gapStyles6, lookStyles5;
 var init_DataGrid = __esm({
   "components/molecules/DataGrid.tsx"() {
     "use client";
@@ -27386,6 +27387,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";
   }
 });
@@ -27469,7 +27477,8 @@ function DataList({
   reorderEvent: dndReorderEvent,
   positionEvent,
   dndItemIdField,
-  dndRoot
+  dndRoot,
+  look = "dense"
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -27734,6 +27743,7 @@ function DataList({
         className: cn(
           isCard && "bg-card rounded-xl border border-border shadow-elevation-dialog overflow-hidden",
           !isCard && gapClass,
+          listLookStyles[look],
           className
         ),
         children: [
@@ -27771,7 +27781,7 @@ function DataList({
     )
   );
 }
-var dataListLog;
+var dataListLog, listLookStyles;
 var init_DataList = __esm({
   "components/molecules/DataList.tsx"() {
     "use client";
@@ -27790,6 +27800,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";
   }
 });
@@ -28017,7 +28034,7 @@ var init_useQuerySingleton = __esm({
     queryStores = /* @__PURE__ */ new Map();
   }
 });
-var resolveFilterType, lookStyles5, FilterGroup;
+var resolveFilterType, lookStyles6, FilterGroup;
 var init_FilterGroup = __esm({
   "components/molecules/FilterGroup.tsx"() {
     "use client";
@@ -28031,7 +28048,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",
@@ -28108,7 +28125,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: [
@@ -28167,7 +28184,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" })
@@ -28255,7 +28272,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(
@@ -28352,7 +28369,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: [
@@ -32826,7 +32843,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";
@@ -32838,7 +32855,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": "",
@@ -32925,7 +32942,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: [
@@ -38232,7 +38249,7 @@ function DataTable({
     {
       className: cn(
         "bg-card border-2 border-border rounded-none overflow-hidden",
-        lookStyles7[look],
+        lookStyles8[look],
         className
       ),
       children: [
@@ -38459,7 +38476,7 @@ function DataTable({
     }
   );
 }
-var lookStyles7;
+var lookStyles8;
 var init_DataTable = __esm({
   "components/organisms/DataTable.tsx"() {
     "use client";
@@ -38473,7 +38490,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",
@@ -41638,7 +41655,7 @@ var init_GraphCanvas = __esm({
     GraphCanvas.displayName = "GraphCanvas";
   }
 });
-var lookStyles8, Header;
+var lookStyles9, Header;
 var init_Header = __esm({
   "components/organisms/Header.tsx"() {
     "use client";
@@ -41651,7 +41668,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",
@@ -41691,7 +41708,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: [
@@ -48387,7 +48404,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";
@@ -48398,7 +48415,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",
@@ -48491,7 +48508,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/avl/index.js

@@ -27009,7 +27009,8 @@ function DataGrid({
   reorderEvent,
   positionEvent,
   dndItemIdField,
-  dndRoot
+  dndRoot,
+  look = "dense"
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -27125,7 +27126,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;
@@ -27302,7 +27303,7 @@ function DataGrid({
     ] })
   );
 }
-var dataGridLog, BADGE_VARIANTS, gapStyles6;
+var dataGridLog, BADGE_VARIANTS, gapStyles6, lookStyles5;
 var init_DataGrid = __esm({
   "components/molecules/DataGrid.tsx"() {
     "use client";
@@ -27337,6 +27338,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";
   }
 });
@@ -27420,7 +27428,8 @@ function DataList({
   reorderEvent: dndReorderEvent,
   positionEvent,
   dndItemIdField,
-  dndRoot
+  dndRoot,
+  look = "dense"
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -27685,6 +27694,7 @@ function DataList({
         className: cn(
           isCard && "bg-card rounded-xl border border-border shadow-elevation-dialog overflow-hidden",
           !isCard && gapClass,
+          listLookStyles[look],
           className
         ),
         children: [
@@ -27722,7 +27732,7 @@ function DataList({
     )
   );
 }
-var dataListLog;
+var dataListLog, listLookStyles;
 var init_DataList = __esm({
   "components/molecules/DataList.tsx"() {
     "use client";
@@ -27741,6 +27751,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";
   }
 });
@@ -27968,7 +27985,7 @@ var init_useQuerySingleton = __esm({
     queryStores = /* @__PURE__ */ new Map();
   }
 });
-var resolveFilterType, lookStyles5, FilterGroup;
+var resolveFilterType, lookStyles6, FilterGroup;
 var init_FilterGroup = __esm({
   "components/molecules/FilterGroup.tsx"() {
     "use client";
@@ -27982,7 +27999,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",
@@ -28059,7 +28076,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: [
@@ -28118,7 +28135,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" })
@@ -28206,7 +28223,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(
@@ -28303,7 +28320,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: [
@@ -32777,7 +32794,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";
@@ -32789,7 +32806,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": "",
@@ -32876,7 +32893,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: [
@@ -38183,7 +38200,7 @@ function DataTable({
     {
       className: cn(
         "bg-card border-2 border-border rounded-none overflow-hidden",
-        lookStyles7[look],
+        lookStyles8[look],
         className
       ),
       children: [
@@ -38410,7 +38427,7 @@ function DataTable({
     }
   );
 }
-var lookStyles7;
+var lookStyles8;
 var init_DataTable = __esm({
   "components/organisms/DataTable.tsx"() {
     "use client";
@@ -38424,7 +38441,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",
@@ -41589,7 +41606,7 @@ var init_GraphCanvas = __esm({
     GraphCanvas.displayName = "GraphCanvas";
   }
 });
-var lookStyles8, Header;
+var lookStyles9, Header;
 var init_Header = __esm({
   "components/organisms/Header.tsx"() {
     "use client";
@@ -41602,7 +41619,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",
@@ -41642,7 +41659,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: [
@@ -48338,7 +48355,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";
@@ -48349,7 +48366,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",
@@ -48442,7 +48459,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;