@almadar/ui 5.3.0 → 5.4.0

package/dist/avl/index.cjs

@@ -5208,6 +5208,24 @@ var init_ThemeContext = __esm({
         displayName: "Kiosk",
         hasLightMode: true,
         hasDarkMode: true
+      },
+      {
+        name: "linear-clean",
+        displayName: "Linear Clean",
+        hasLightMode: true,
+        hasDarkMode: true
+      },
+      {
+        name: "notion-editorial",
+        displayName: "Notion Editorial",
+        hasLightMode: true,
+        hasDarkMode: true
+      },
+      {
+        name: "bloomberg-dense",
+        displayName: "Bloomberg Dense",
+        hasLightMode: true,
+        hasDarkMode: true
       }
     ];
     ThemeContext = React98.createContext(void 0);
@@ -8449,7 +8467,7 @@ var init_Checkbox = __esm({
     Checkbox.displayName = "Checkbox";
   }
 });
-var variantStyles4, paddingStyles2, shadowStyles2, Card, CardHeader, CardTitle, CardContent, CardBody, CardFooter;
+var variantStyles4, paddingStyles2, shadowStyles2, lookStyles, Card, CardHeader, CardTitle, CardContent, CardBody, CardFooter;
 var init_Card = __esm({
   "components/atoms/Card.tsx"() {
     init_cn();
@@ -8497,6 +8515,15 @@ var init_Card = __esm({
       md: "shadow",
       lg: "shadow-elevation-dialog"
     };
+    lookStyles = {
+      elevated: "",
+      "flat-bordered": "shadow-none border-[length:var(--border-width)] border-border",
+      "borderless-divider": "shadow-none border-0 border-b border-border rounded-none",
+      ticket: "shadow-none border-dashed border-[length:var(--border-width)] border-border",
+      invoice: "shadow-none border-[length:var(--border-width-thick)] border-border rounded-sm",
+      chip: "shadow-none rounded-pill border-[length:var(--border-width)] border-border",
+      "tile-image-first": "p-0 overflow-hidden"
+    };
     Card = React98__namespace.default.forwardRef(
       ({
         className,
@@ -8505,6 +8532,7 @@ var init_Card = __esm({
         title,
         subtitle,
         shadow,
+        look = "elevated",
         children,
         ...props
       }, ref) => {
@@ -8517,6 +8545,7 @@ var init_Card = __esm({
               "transition-all duration-[var(--transition-normal)]",
               variantStyles4[variant],
               paddingStyles2[padding],
+              lookStyles[look],
               shadow && shadowStyles2[shadow],
               className
             ),

package/dist/avl/index.js

@@ -5159,6 +5159,24 @@ var init_ThemeContext = __esm({
         displayName: "Kiosk",
         hasLightMode: true,
         hasDarkMode: true
+      },
+      {
+        name: "linear-clean",
+        displayName: "Linear Clean",
+        hasLightMode: true,
+        hasDarkMode: true
+      },
+      {
+        name: "notion-editorial",
+        displayName: "Notion Editorial",
+        hasLightMode: true,
+        hasDarkMode: true
+      },
+      {
+        name: "bloomberg-dense",
+        displayName: "Bloomberg Dense",
+        hasLightMode: true,
+        hasDarkMode: true
       }
     ];
     ThemeContext = createContext(void 0);
@@ -8400,7 +8418,7 @@ var init_Checkbox = __esm({
     Checkbox.displayName = "Checkbox";
   }
 });
-var variantStyles4, paddingStyles2, shadowStyles2, Card, CardHeader, CardTitle, CardContent, CardBody, CardFooter;
+var variantStyles4, paddingStyles2, shadowStyles2, lookStyles, Card, CardHeader, CardTitle, CardContent, CardBody, CardFooter;
 var init_Card = __esm({
   "components/atoms/Card.tsx"() {
     init_cn();
@@ -8448,6 +8466,15 @@ var init_Card = __esm({
       md: "shadow",
       lg: "shadow-elevation-dialog"
     };
+    lookStyles = {
+      elevated: "",
+      "flat-bordered": "shadow-none border-[length:var(--border-width)] border-border",
+      "borderless-divider": "shadow-none border-0 border-b border-border rounded-none",
+      ticket: "shadow-none border-dashed border-[length:var(--border-width)] border-border",
+      invoice: "shadow-none border-[length:var(--border-width-thick)] border-border rounded-sm",
+      chip: "shadow-none rounded-pill border-[length:var(--border-width)] border-border",
+      "tile-image-first": "p-0 overflow-hidden"
+    };
     Card = React98__default.forwardRef(
       ({
         className,
@@ -8456,6 +8483,7 @@ var init_Card = __esm({
         title,
         subtitle,
         shadow,
+        look = "elevated",
         children,
         ...props
       }, ref) => {
@@ -8468,6 +8496,7 @@ var init_Card = __esm({
               "transition-all duration-[var(--transition-normal)]",
               variantStyles4[variant],
               paddingStyles2[padding],
+              lookStyles[look],
               shadow && shadowStyles2[shadow],
               className
             ),

package/dist/components/atoms/Card.d.ts

@@ -1,5 +1,10 @@
 import React from "react";
 export type CardShadow = "none" | "sm" | "md" | "lg";
+/**
+ * Layer 2 visual treatment for the card pattern — orthogonal to the semantic
+ * `variant` (which conveys role / state).
+ */
+export type CardLook = "elevated" | "flat-bordered" | "borderless-divider" | "ticket" | "invoice" | "chip" | "tile-image-first";
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     variant?: "default" | "bordered" | "elevated" | "interactive";
     padding?: "none" | "sm" | "md" | "lg";
@@ -9,6 +14,8 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     subtitle?: string;
     /** Shadow size override */
     shadow?: CardShadow;
+    /** Layer 2 visual treatment — orthogonal to the semantic variant. */
+    look?: CardLook;
     /** Card content */
     children?: React.ReactNode;
 }

package/dist/components/index.cjs

@@ -2332,7 +2332,7 @@ var init_Checkbox = __esm({
     exports.Checkbox.displayName = "Checkbox";
   }
 });
-var variantStyles2, paddingStyles, shadowStyles; exports.Card = void 0; exports.CardHeader = void 0; exports.CardTitle = void 0; exports.CardContent = void 0; exports.CardBody = void 0; exports.CardFooter = void 0;
+var variantStyles2, paddingStyles, shadowStyles, lookStyles; exports.Card = void 0; exports.CardHeader = void 0; exports.CardTitle = void 0; exports.CardContent = void 0; exports.CardBody = void 0; exports.CardFooter = void 0;
 var init_Card = __esm({
   "components/atoms/Card.tsx"() {
     init_cn();
@@ -2380,6 +2380,15 @@ var init_Card = __esm({
       md: "shadow",
       lg: "shadow-elevation-dialog"
     };
+    lookStyles = {
+      elevated: "",
+      "flat-bordered": "shadow-none border-[length:var(--border-width)] border-border",
+      "borderless-divider": "shadow-none border-0 border-b border-border rounded-none",
+      ticket: "shadow-none border-dashed border-[length:var(--border-width)] border-border",
+      invoice: "shadow-none border-[length:var(--border-width-thick)] border-border rounded-sm",
+      chip: "shadow-none rounded-pill border-[length:var(--border-width)] border-border",
+      "tile-image-first": "p-0 overflow-hidden"
+    };
     exports.Card = React80__namespace.default.forwardRef(
       ({
         className,
@@ -2388,6 +2397,7 @@ var init_Card = __esm({
         title,
         subtitle,
         shadow,
+        look = "elevated",
         children,
         ...props
       }, ref) => {
@@ -2400,6 +2410,7 @@ var init_Card = __esm({
               "transition-all duration-[var(--transition-normal)]",
               variantStyles2[variant],
               paddingStyles[padding],
+              lookStyles[look],
               shadow && shadowStyles[shadow],
               className
             ),
@@ -4055,6 +4066,24 @@ var init_ThemeContext = __esm({
         displayName: "Kiosk",
         hasLightMode: true,
         hasDarkMode: true
+      },
+      {
+        name: "linear-clean",
+        displayName: "Linear Clean",
+        hasLightMode: true,
+        hasDarkMode: true
+      },
+      {
+        name: "notion-editorial",
+        displayName: "Notion Editorial",
+        hasLightMode: true,
+        hasDarkMode: true
+      },
+      {
+        name: "bloomberg-dense",
+        displayName: "Bloomberg Dense",
+        hasLightMode: true,
+        hasDarkMode: true
       }
     ];
     ThemeContext = React80.createContext(void 0);

package/dist/components/index.js

@@ -2283,7 +2283,7 @@ var init_Checkbox = __esm({
     Checkbox.displayName = "Checkbox";
   }
 });
-var variantStyles2, paddingStyles, shadowStyles, Card, CardHeader, CardTitle, CardContent, CardBody, CardFooter;
+var variantStyles2, paddingStyles, shadowStyles, lookStyles, Card, CardHeader, CardTitle, CardContent, CardBody, CardFooter;
 var init_Card = __esm({
   "components/atoms/Card.tsx"() {
     init_cn();
@@ -2331,6 +2331,15 @@ var init_Card = __esm({
       md: "shadow",
       lg: "shadow-elevation-dialog"
     };
+    lookStyles = {
+      elevated: "",
+      "flat-bordered": "shadow-none border-[length:var(--border-width)] border-border",
+      "borderless-divider": "shadow-none border-0 border-b border-border rounded-none",
+      ticket: "shadow-none border-dashed border-[length:var(--border-width)] border-border",
+      invoice: "shadow-none border-[length:var(--border-width-thick)] border-border rounded-sm",
+      chip: "shadow-none rounded-pill border-[length:var(--border-width)] border-border",
+      "tile-image-first": "p-0 overflow-hidden"
+    };
     Card = React80__default.forwardRef(
       ({
         className,
@@ -2339,6 +2348,7 @@ var init_Card = __esm({
         title,
         subtitle,
         shadow,
+        look = "elevated",
         children,
         ...props
       }, ref) => {
@@ -2351,6 +2361,7 @@ var init_Card = __esm({
               "transition-all duration-[var(--transition-normal)]",
               variantStyles2[variant],
               paddingStyles[padding],
+              lookStyles[look],
               shadow && shadowStyles[shadow],
               className
             ),
@@ -4006,6 +4017,24 @@ var init_ThemeContext = __esm({
         displayName: "Kiosk",
         hasLightMode: true,
         hasDarkMode: true
+      },
+      {
+        name: "linear-clean",
+        displayName: "Linear Clean",
+        hasLightMode: true,
+        hasDarkMode: true
+      },
+      {
+        name: "notion-editorial",
+        displayName: "Notion Editorial",
+        hasLightMode: true,
+        hasDarkMode: true
+      },
+      {
+        name: "bloomberg-dense",
+        displayName: "Bloomberg Dense",
+        hasLightMode: true,
+        hasDarkMode: true
       }
     ];
     ThemeContext = createContext(void 0);

package/dist/context/index.cjs

@@ -498,6 +498,24 @@ var BUILT_IN_THEMES = [
     displayName: "Kiosk",
     hasLightMode: true,
     hasDarkMode: true
+  },
+  {
+    name: "linear-clean",
+    displayName: "Linear Clean",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "notion-editorial",
+    displayName: "Notion Editorial",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "bloomberg-dense",
+    displayName: "Bloomberg Dense",
+    hasLightMode: true,
+    hasDarkMode: true
   }
 ];
 var ThemeContext = react.createContext(void 0);

package/dist/context/index.js

@@ -496,6 +496,24 @@ var BUILT_IN_THEMES = [
     displayName: "Kiosk",
     hasLightMode: true,
     hasDarkMode: true
+  },
+  {
+    name: "linear-clean",
+    displayName: "Linear Clean",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "notion-editorial",
+    displayName: "Notion Editorial",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "bloomberg-dense",
+    displayName: "Bloomberg Dense",
+    hasLightMode: true,
+    hasDarkMode: true
   }
 ];
 var ThemeContext = createContext(void 0);

package/dist/docs/index.cjs

@@ -3930,6 +3930,15 @@ var shadowStyles2 = {
   md: "shadow",
   lg: "shadow-elevation-dialog"
 };
+var lookStyles = {
+  elevated: "",
+  "flat-bordered": "shadow-none border-[length:var(--border-width)] border-border",
+  "borderless-divider": "shadow-none border-0 border-b border-border rounded-none",
+  ticket: "shadow-none border-dashed border-[length:var(--border-width)] border-border",
+  invoice: "shadow-none border-[length:var(--border-width-thick)] border-border rounded-sm",
+  chip: "shadow-none rounded-pill border-[length:var(--border-width)] border-border",
+  "tile-image-first": "p-0 overflow-hidden"
+};
 var Card = React7__default.default.forwardRef(
   ({
     className,
@@ -3938,6 +3947,7 @@ var Card = React7__default.default.forwardRef(
     title,
     subtitle,
     shadow,
+    look = "elevated",
     children,
     ...props
   }, ref) => {
@@ -3950,6 +3960,7 @@ var Card = React7__default.default.forwardRef(
           "transition-all duration-[var(--transition-normal)]",
           variantStyles3[variant],
           paddingStyles2[padding],
+          lookStyles[look],
           shadow && shadowStyles2[shadow],
           className
         ),

package/dist/docs/index.d.cts

@@ -228,6 +228,11 @@ interface IconProps {
 declare const Icon: React.FC<IconProps>;
 
 type CardShadow = "none" | "sm" | "md" | "lg";
+/**
+ * Layer 2 visual treatment for the card pattern — orthogonal to the semantic
+ * `variant` (which conveys role / state).
+ */
+type CardLook = "elevated" | "flat-bordered" | "borderless-divider" | "ticket" | "invoice" | "chip" | "tile-image-first";
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     variant?: "default" | "bordered" | "elevated" | "interactive";
     padding?: "none" | "sm" | "md" | "lg";
@@ -237,6 +242,8 @@ interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     subtitle?: string;
     /** Shadow size override */
     shadow?: CardShadow;
+    /** Layer 2 visual treatment — orthogonal to the semantic variant. */
+    look?: CardLook;
     /** Card content */
     children?: React.ReactNode;
 }

package/dist/docs/index.js

@@ -3903,6 +3903,15 @@ var shadowStyles2 = {
   md: "shadow",
   lg: "shadow-elevation-dialog"
 };
+var lookStyles = {
+  elevated: "",
+  "flat-bordered": "shadow-none border-[length:var(--border-width)] border-border",
+  "borderless-divider": "shadow-none border-0 border-b border-border rounded-none",
+  ticket: "shadow-none border-dashed border-[length:var(--border-width)] border-border",
+  invoice: "shadow-none border-[length:var(--border-width-thick)] border-border rounded-sm",
+  chip: "shadow-none rounded-pill border-[length:var(--border-width)] border-border",
+  "tile-image-first": "p-0 overflow-hidden"
+};
 var Card = React7.forwardRef(
   ({
     className,
@@ -3911,6 +3920,7 @@ var Card = React7.forwardRef(
     title,
     subtitle,
     shadow,
+    look = "elevated",
     children,
     ...props
   }, ref) => {
@@ -3923,6 +3933,7 @@ var Card = React7.forwardRef(
           "transition-all duration-[var(--transition-normal)]",
           variantStyles3[variant],
           paddingStyles2[padding],
+          lookStyles[look],
           shadow && shadowStyles2[shadow],
           className
         ),

package/dist/marketing/index.cjs

@@ -4014,6 +4014,15 @@ var shadowStyles2 = {
   md: "shadow",
   lg: "shadow-elevation-dialog"
 };
+var lookStyles = {
+  elevated: "",
+  "flat-bordered": "shadow-none border-[length:var(--border-width)] border-border",
+  "borderless-divider": "shadow-none border-0 border-b border-border rounded-none",
+  ticket: "shadow-none border-dashed border-[length:var(--border-width)] border-border",
+  invoice: "shadow-none border-[length:var(--border-width-thick)] border-border rounded-sm",
+  chip: "shadow-none rounded-pill border-[length:var(--border-width)] border-border",
+  "tile-image-first": "p-0 overflow-hidden"
+};
 var Card = React8__default.default.forwardRef(
   ({
     className,
@@ -4022,6 +4031,7 @@ var Card = React8__default.default.forwardRef(
     title,
     subtitle,
     shadow,
+    look = "elevated",
     children,
     ...props
   }, ref) => {
@@ -4034,6 +4044,7 @@ var Card = React8__default.default.forwardRef(
           "transition-all duration-[var(--transition-normal)]",
           variantStyles4[variant],
           paddingStyles2[padding],
+          lookStyles[look],
           shadow && shadowStyles2[shadow],
           className
         ),

package/dist/marketing/index.d.cts

@@ -250,6 +250,11 @@ interface IconProps {
 declare const Icon: React.FC<IconProps>;
 
 type CardShadow = "none" | "sm" | "md" | "lg";
+/**
+ * Layer 2 visual treatment for the card pattern — orthogonal to the semantic
+ * `variant` (which conveys role / state).
+ */
+type CardLook = "elevated" | "flat-bordered" | "borderless-divider" | "ticket" | "invoice" | "chip" | "tile-image-first";
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     variant?: "default" | "bordered" | "elevated" | "interactive";
     padding?: "none" | "sm" | "md" | "lg";
@@ -259,6 +264,8 @@ interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     subtitle?: string;
     /** Shadow size override */
     shadow?: CardShadow;
+    /** Layer 2 visual treatment — orthogonal to the semantic variant. */
+    look?: CardLook;
     /** Card content */
     children?: React.ReactNode;
 }

package/dist/marketing/index.js

@@ -3987,6 +3987,15 @@ var shadowStyles2 = {
   md: "shadow",
   lg: "shadow-elevation-dialog"
 };
+var lookStyles = {
+  elevated: "",
+  "flat-bordered": "shadow-none border-[length:var(--border-width)] border-border",
+  "borderless-divider": "shadow-none border-0 border-b border-border rounded-none",
+  ticket: "shadow-none border-dashed border-[length:var(--border-width)] border-border",
+  invoice: "shadow-none border-[length:var(--border-width-thick)] border-border rounded-sm",
+  chip: "shadow-none rounded-pill border-[length:var(--border-width)] border-border",
+  "tile-image-first": "p-0 overflow-hidden"
+};
 var Card = React8.forwardRef(
   ({
     className,
@@ -3995,6 +4004,7 @@ var Card = React8.forwardRef(
     title,
     subtitle,
     shadow,
+    look = "elevated",
     children,
     ...props
   }, ref) => {
@@ -4007,6 +4017,7 @@ var Card = React8.forwardRef(
           "transition-all duration-[var(--transition-normal)]",
           variantStyles4[variant],
           paddingStyles2[padding],
+          lookStyles[look],
           shadow && shadowStyles2[shadow],
           className
         ),

package/dist/providers/index.cjs

@@ -278,6 +278,24 @@ var init_ThemeContext = __esm({
         displayName: "Kiosk",
         hasLightMode: true,
         hasDarkMode: true
+      },
+      {
+        name: "linear-clean",
+        displayName: "Linear Clean",
+        hasLightMode: true,
+        hasDarkMode: true
+      },
+      {
+        name: "notion-editorial",
+        displayName: "Notion Editorial",
+        hasLightMode: true,
+        hasDarkMode: true
+      },
+      {
+        name: "bloomberg-dense",
+        displayName: "Bloomberg Dense",
+        hasLightMode: true,
+        hasDarkMode: true
       }
     ];
     ThemeContext = React86.createContext(void 0);
@@ -3634,7 +3652,7 @@ var init_Checkbox = __esm({
     Checkbox.displayName = "Checkbox";
   }
 });
-var variantStyles4, paddingStyles2, shadowStyles2, Card, CardHeader, CardTitle, CardContent, CardBody, CardFooter;
+var variantStyles4, paddingStyles2, shadowStyles2, lookStyles, Card, CardHeader, CardTitle, CardContent, CardBody, CardFooter;
 var init_Card = __esm({
   "components/atoms/Card.tsx"() {
     init_cn();
@@ -3682,6 +3700,15 @@ var init_Card = __esm({
       md: "shadow",
       lg: "shadow-elevation-dialog"
     };
+    lookStyles = {
+      elevated: "",
+      "flat-bordered": "shadow-none border-[length:var(--border-width)] border-border",
+      "borderless-divider": "shadow-none border-0 border-b border-border rounded-none",
+      ticket: "shadow-none border-dashed border-[length:var(--border-width)] border-border",
+      invoice: "shadow-none border-[length:var(--border-width-thick)] border-border rounded-sm",
+      chip: "shadow-none rounded-pill border-[length:var(--border-width)] border-border",
+      "tile-image-first": "p-0 overflow-hidden"
+    };
     Card = React86__namespace.default.forwardRef(
       ({
         className,
@@ -3690,6 +3717,7 @@ var init_Card = __esm({
         title,
         subtitle,
         shadow,
+        look = "elevated",
         children,
         ...props
       }, ref) => {
@@ -3702,6 +3730,7 @@ var init_Card = __esm({
               "transition-all duration-[var(--transition-normal)]",
               variantStyles4[variant],
               paddingStyles2[padding],
+              lookStyles[look],
               shadow && shadowStyles2[shadow],
               className
             ),

package/dist/providers/index.js

@@ -229,6 +229,24 @@ var init_ThemeContext = __esm({
         displayName: "Kiosk",
         hasLightMode: true,
         hasDarkMode: true
+      },
+      {
+        name: "linear-clean",
+        displayName: "Linear Clean",
+        hasLightMode: true,
+        hasDarkMode: true
+      },
+      {
+        name: "notion-editorial",
+        displayName: "Notion Editorial",
+        hasLightMode: true,
+        hasDarkMode: true
+      },
+      {
+        name: "bloomberg-dense",
+        displayName: "Bloomberg Dense",
+        hasLightMode: true,
+        hasDarkMode: true
       }
     ];
     ThemeContext = createContext(void 0);
@@ -3585,7 +3603,7 @@ var init_Checkbox = __esm({
     Checkbox.displayName = "Checkbox";
   }
 });
-var variantStyles4, paddingStyles2, shadowStyles2, Card, CardHeader, CardTitle, CardContent, CardBody, CardFooter;
+var variantStyles4, paddingStyles2, shadowStyles2, lookStyles, Card, CardHeader, CardTitle, CardContent, CardBody, CardFooter;
 var init_Card = __esm({
   "components/atoms/Card.tsx"() {
     init_cn();
@@ -3633,6 +3651,15 @@ var init_Card = __esm({
       md: "shadow",
       lg: "shadow-elevation-dialog"
     };
+    lookStyles = {
+      elevated: "",
+      "flat-bordered": "shadow-none border-[length:var(--border-width)] border-border",
+      "borderless-divider": "shadow-none border-0 border-b border-border rounded-none",
+      ticket: "shadow-none border-dashed border-[length:var(--border-width)] border-border",
+      invoice: "shadow-none border-[length:var(--border-width-thick)] border-border rounded-sm",
+      chip: "shadow-none rounded-pill border-[length:var(--border-width)] border-border",
+      "tile-image-first": "p-0 overflow-hidden"
+    };
     Card = React86__default.forwardRef(
       ({
         className,
@@ -3641,6 +3668,7 @@ var init_Card = __esm({
         title,
         subtitle,
         shadow,
+        look = "elevated",
         children,
         ...props
       }, ref) => {
@@ -3653,6 +3681,7 @@ var init_Card = __esm({
               "transition-all duration-[var(--transition-normal)]",
               variantStyles4[variant],
               paddingStyles2[padding],
+              lookStyles[look],
               shadow && shadowStyles2[shadow],
               className
             ),

package/dist/runtime/index.cjs

@@ -3887,7 +3887,7 @@ var init_Checkbox = __esm({
     Checkbox.displayName = "Checkbox";
   }
 });
-var variantStyles4, paddingStyles2, shadowStyles2, Card, CardHeader, CardTitle, CardContent, CardBody, CardFooter;
+var variantStyles4, paddingStyles2, shadowStyles2, lookStyles, Card, CardHeader, CardTitle, CardContent, CardBody, CardFooter;
 var init_Card = __esm({
   "components/atoms/Card.tsx"() {
     init_cn();
@@ -3935,6 +3935,15 @@ var init_Card = __esm({
       md: "shadow",
       lg: "shadow-elevation-dialog"
     };
+    lookStyles = {
+      elevated: "",
+      "flat-bordered": "shadow-none border-[length:var(--border-width)] border-border",
+      "borderless-divider": "shadow-none border-0 border-b border-border rounded-none",
+      ticket: "shadow-none border-dashed border-[length:var(--border-width)] border-border",
+      invoice: "shadow-none border-[length:var(--border-width-thick)] border-border rounded-sm",
+      chip: "shadow-none rounded-pill border-[length:var(--border-width)] border-border",
+      "tile-image-first": "p-0 overflow-hidden"
+    };
     Card = React85__namespace.default.forwardRef(
       ({
         className,
@@ -3943,6 +3952,7 @@ var init_Card = __esm({
         title,
         subtitle,
         shadow,
+        look = "elevated",
         children,
         ...props
       }, ref) => {
@@ -3955,6 +3965,7 @@ var init_Card = __esm({
               "transition-all duration-[var(--transition-normal)]",
               variantStyles4[variant],
               paddingStyles2[padding],
+              lookStyles[look],
               shadow && shadowStyles2[shadow],
               className
             ),
@@ -5164,6 +5175,24 @@ var init_ThemeContext = __esm({
         displayName: "Kiosk",
         hasLightMode: true,
         hasDarkMode: true
+      },
+      {
+        name: "linear-clean",
+        displayName: "Linear Clean",
+        hasLightMode: true,
+        hasDarkMode: true
+      },
+      {
+        name: "notion-editorial",
+        displayName: "Notion Editorial",
+        hasLightMode: true,
+        hasDarkMode: true
+      },
+      {
+        name: "bloomberg-dense",
+        displayName: "Bloomberg Dense",
+        hasLightMode: true,
+        hasDarkMode: true
       }
     ];
     ThemeContext = React85.createContext(void 0);

package/dist/runtime/index.js

@@ -3838,7 +3838,7 @@ var init_Checkbox = __esm({
     Checkbox.displayName = "Checkbox";
   }
 });
-var variantStyles4, paddingStyles2, shadowStyles2, Card, CardHeader, CardTitle, CardContent, CardBody, CardFooter;
+var variantStyles4, paddingStyles2, shadowStyles2, lookStyles, Card, CardHeader, CardTitle, CardContent, CardBody, CardFooter;
 var init_Card = __esm({
   "components/atoms/Card.tsx"() {
     init_cn();
@@ -3886,6 +3886,15 @@ var init_Card = __esm({
       md: "shadow",
       lg: "shadow-elevation-dialog"
     };
+    lookStyles = {
+      elevated: "",
+      "flat-bordered": "shadow-none border-[length:var(--border-width)] border-border",
+      "borderless-divider": "shadow-none border-0 border-b border-border rounded-none",
+      ticket: "shadow-none border-dashed border-[length:var(--border-width)] border-border",
+      invoice: "shadow-none border-[length:var(--border-width-thick)] border-border rounded-sm",
+      chip: "shadow-none rounded-pill border-[length:var(--border-width)] border-border",
+      "tile-image-first": "p-0 overflow-hidden"
+    };
     Card = React85__default.forwardRef(
       ({
         className,
@@ -3894,6 +3903,7 @@ var init_Card = __esm({
         title,
         subtitle,
         shadow,
+        look = "elevated",
         children,
         ...props
       }, ref) => {
@@ -3906,6 +3916,7 @@ var init_Card = __esm({
               "transition-all duration-[var(--transition-normal)]",
               variantStyles4[variant],
               paddingStyles2[padding],
+              lookStyles[look],
               shadow && shadowStyles2[shadow],
               className
             ),
@@ -5115,6 +5126,24 @@ var init_ThemeContext = __esm({
         displayName: "Kiosk",
         hasLightMode: true,
         hasDarkMode: true
+      },
+      {
+        name: "linear-clean",
+        displayName: "Linear Clean",
+        hasLightMode: true,
+        hasDarkMode: true
+      },
+      {
+        name: "notion-editorial",
+        displayName: "Notion Editorial",
+        hasLightMode: true,
+        hasDarkMode: true
+      },
+      {
+        name: "bloomberg-dense",
+        displayName: "Bloomberg Dense",
+        hasLightMode: true,
+        hasDarkMode: true
       }
     ];
     ThemeContext = createContext(void 0);

package/package.json

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