@fragment-build/ui 3.2.3 → 4.0.0

package/fragments/sidebar/sidebar.css

@@ -4,27 +4,30 @@
   }
 
   .fragment-sidebar__collapsed {
-    @apply fixed top-0 left-0 border-r border-border flex flex-col h-screen gap-8 transition-all;
+    @apply fixed top-0 left-0 border-r border-border bg-sidebar text-sidebar-foreground
+           flex flex-col h-screen gap-4 transition-all z-40;
   }
 
   .fragment-sidebar__collapsed-body {
-    @apply w-20 items-center flex flex-col gap-8 px-3 pt-8 overflow-y-auto flex-1;
+    @apply w-16 items-center flex flex-col gap-6 px-2 pt-5 overflow-y-auto flex-1;
   }
 
   .fragment-sidebar__collapsed-footer {
-    @apply w-20 items-center flex flex-col gap-8 px-3 pb-8;
+    @apply w-16 items-center flex flex-col gap-3 px-2 pb-4;
   }
 
   .fragment-sidebar__expanded {
-    @apply fixed top-0 left-0 border-r border-border flex flex-col h-screen gap-8 overflow-hidden transition-all;
+    @apply fixed top-0 left-0 border-r border-border bg-sidebar text-sidebar-foreground
+           flex flex-col h-screen gap-4 overflow-hidden transition-all z-40;
   }
 
   .fragment-sidebar__expanded-body {
-    @apply w-72 flex flex-col gap-8 px-3 pt-8 overflow-y-auto flex-1;
+    @apply w-64 flex flex-col gap-6 px-3 pt-5 overflow-y-auto flex-1;
   }
 
+  /* The footer is chrome (account, workspace), so it is tucked behind a hairline. */
   .fragment-sidebar__expanded-footer {
-    @apply w-72 flex flex-col gap-8 px-3 pb-8;
+    @apply w-64 flex flex-col gap-2 px-3 pt-3 pb-4 border-t border-border;
   }
 
   .fragment-sidebar__placeholder {
@@ -32,15 +35,18 @@
   }
 
   .fragment-sidebar__layout-button-wrapper {
-    @apply fixed top-6 transition-all;
+    @apply fixed top-6 transition-all z-50;
   }
 
   .fragment-sidebar__layout-button {
-    @apply h-6! w-6!;
+    @apply h-6! w-6! min-w-6! bg-surface! border border-border shadow-sm text-muted;
+    & svg {
+      @apply size-3.5;
+    }
   }
 
   .fragment-sidebar__bottom-nav {
-    @apply fixed md:hidden z-50 bottom-0 bg-background flex w-full gap-2 px-2 py-1 border-t border-border;
+    @apply fixed md:hidden z-50 bottom-0 bg-sidebar text-sidebar-foreground flex w-full gap-2 px-2 py-1 border-t border-border;
     & > *:nth-child(n+5):not(:last-child) {
       @apply hidden;
     }
@@ -67,7 +73,7 @@
   .fragment-sidebar__collapsed-nav {
     @apply flex flex-col gap-1;
     & svg {
-      @apply size-5! shrink-0 self-center;
+      @apply size-[18px]! shrink-0 self-center;
     }
   }
 
@@ -104,26 +110,40 @@
   }
 
   .fragment-sidebar__custom-item {
-    @apply px-2;
+    @apply px-1;
   }
 
   .fragment-sidebar__nav {
-    @apply text-sm;
+    @apply text-sm flex flex-col gap-0.5;
+
+    /* Group label: quiet, so it organises the list without competing with it. */
+    & > .header {
+      @apply px-3 pb-1 text-xs font-medium text-muted;
+    }
+
+    .list-box {
+      @apply gap-0.5;
+    }
 
     .list-box-item {
-      @apply px-3! pr-1! py-1! h-10!;
+      @apply px-3! pr-1! py-1! h-9! gap-3! rounded-lg! font-normal text-sidebar-foreground/80;
+      &:hover, &[data-hovered="true"] {
+        background-color: var(--sidebar-default, var(--default)) !important;
+        @apply text-sidebar-foreground;
+      }
     }
 
     & svg {
-      @apply size-5 shrink-0 self-center;
+      @apply size-[18px] shrink-0 self-center;
     }
   }
 
   .fragment-sidebar__accordion-trigger {
-    @apply w-full flex items-center gap-3 h-10 px-3 pr-1 py-1 rounded-2xl text-sm font-normal cursor-pointer
-           text-foreground transition-colors;
+    @apply w-full flex items-center gap-3 h-9 px-3 pr-1 py-1 rounded-lg text-sm font-normal cursor-pointer
+           text-sidebar-foreground transition-colors;
     &:hover, &[data-hovered="true"] {
-      @apply bg-default!;
+      /* `--default` is a page-level palette colour; opt out per-rail with `--sidebar-default`. */
+      background-color: var(--sidebar-default, var(--default)) !important;
     }
     & > .fragment-sidebar__accordion-label {
       @apply flex-1 text-left;
@@ -131,7 +151,7 @@
   }
 
   .fragment-sidebar__accordion-trigger--active {
-    @apply text-accent-soft-foreground;
+    color: var(--sidebar-accent-soft-foreground, var(--accent-soft-foreground));
   }
 
   .fragment-sidebar__accordion-trigger .accordion__indicator {
@@ -149,7 +169,7 @@
     @apply relative pl-7;
     &::before {
       content: '';
-      @apply absolute top-0 bottom-0 w-px bg-foreground opacity-15 rounded-full left-5;
+      @apply absolute top-0 bottom-0 w-px bg-sidebar-foreground opacity-15 rounded-full left-5;
     }
     .list-box {
       @apply overflow-visible;
@@ -157,14 +177,16 @@
   }
 
   .fragment-sidebar__nav-item--active {
-    @apply bg-accent-soft! text-accent-soft-foreground!;
+    /* `--accent-soft` is translucent, so it composites over the rail, not the page. */
+    @apply bg-accent-soft! font-medium!;
+    color: var(--sidebar-accent-soft-foreground, var(--accent-soft-foreground)) !important;
   }
 
   .fragment-sidebar__sub-item {
     @apply pl-8! relative;
     &::before {
       content: '';
-      @apply absolute -left-3 ml-px top-1/2 -translate-y-1/2 w-3 h-px bg-foreground opacity-15;
+      @apply absolute -left-3 ml-px top-1/2 -translate-y-1/2 w-3 h-px bg-sidebar-foreground opacity-15;
     }
   }
 
@@ -175,13 +197,13 @@
   /* Layout modifier variants */
   .fragment-sidebar--auto {
     .fragment-sidebar__expanded {
-      @apply w-20 opacity-0 pointer-events-none xl:w-72 xl:opacity-100 xl:pointer-events-auto;
+      @apply w-16 opacity-0 pointer-events-none xl:w-64 xl:opacity-100 xl:pointer-events-auto;
     }
     .fragment-sidebar__placeholder {
-      @apply w-20 opacity-0 pointer-events-none xl:w-72 xl:opacity-100 xl:pointer-events-auto;
+      @apply w-16 opacity-0 pointer-events-none xl:w-64 xl:opacity-100 xl:pointer-events-auto;
     }
     .fragment-sidebar__layout-button-wrapper {
-      @apply left-20 translate-x-1/2 rotate-180 xl:left-72 xl:-translate-x-1/2 xl:rotate-0;
+      @apply left-16 translate-x-1/2 rotate-180 xl:left-64 xl:-translate-x-1/2 xl:rotate-0;
     }
     .fragment-sidebar__collapsed {
       @apply xl:opacity-0;
@@ -190,13 +212,13 @@
 
   .fragment-sidebar--collapsed {
     .fragment-sidebar__expanded {
-      @apply w-20 opacity-0 pointer-events-none;
+      @apply w-16 opacity-0 pointer-events-none;
     }
     .fragment-sidebar__placeholder {
-      @apply w-20 opacity-0 pointer-events-none;
+      @apply w-16 opacity-0 pointer-events-none;
     }
     .fragment-sidebar__layout-button-wrapper {
-      @apply left-20 translate-x-1/2 rotate-180;
+      @apply left-16 translate-x-1/2 rotate-180;
     }
   }
 
@@ -205,13 +227,13 @@
       @apply opacity-0;
     }
     .fragment-sidebar__expanded {
-      @apply w-72;
+      @apply w-64;
     }
     .fragment-sidebar__placeholder {
-      @apply w-72;
+      @apply w-64;
     }
     .fragment-sidebar__layout-button-wrapper {
-      @apply left-72 -translate-x-1/2;
+      @apply left-64 -translate-x-1/2;
     }
   }
 }

package/fragments/stat/StatCard.d.ts

@@ -0,0 +1,29 @@
+export interface StatCardDelta {
+    /** Already formatted and signed, e.g. "+12%". */
+    value: React.ReactNode;
+    direction: 'up' | 'down' | 'flat';
+    /**
+     * Whether this direction is good news. Defaults to "up is good"; pass it explicitly for a
+     * number where down is the win (a bounce rate, a cost).
+     */
+    sentiment?: 'positive' | 'negative' | 'neutral';
+    /** The period the change is measured against, e.g. "vs. previous 30 days". */
+    label?: React.ReactNode;
+}
+export interface StatCardProps {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    icon?: React.ReactNode;
+    delta?: StatCardDelta;
+    /** One quiet line under the value. */
+    hint?: React.ReactNode;
+    /** Shown behind an info icon beside the label. */
+    help?: React.ReactNode;
+    /** Accessible name of the info icon. */
+    helpLabel?: string;
+    isLoading?: boolean;
+    /** Marks the card as the one the view is about: a lifted surface and a larger value. */
+    emphasis?: boolean;
+    className?: string;
+}
+export declare const StatCard: React.FC<StatCardProps>;

package/fragments/stat/StatCard.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A single headline number: label, value, an optional change against a named period and a hint.
+ */
+import { Card, Skeleton, Tooltip } from '@heroui/react';
+import { IconArrowDownRight, IconArrowUpRight, IconInfoCircle, IconMinus } from '@tabler/icons-react';
+import { statCard } from './StatCard.styles';
+const deltaIcon = {
+    up: IconArrowUpRight,
+    down: IconArrowDownRight,
+    flat: IconMinus,
+};
+export const StatCard = ({ label, value, icon, delta, hint, help, helpLabel = 'More information', isLoading, emphasis, className, }) => {
+    const sentiment = delta?.sentiment ?? (delta?.direction === 'up' ? 'positive' : delta?.direction === 'down' ? 'negative' : 'neutral');
+    const v = statCard({ emphasis, sentiment });
+    const DeltaIcon = delta ? deltaIcon[delta.direction] : null;
+    return (_jsxs(Card, { className: v.base({ className }), children: [_jsxs("div", { className: v.top(), children: [_jsxs("span", { className: v.label(), children: [label, help && (_jsxs(Tooltip, { delay: 0, children: [_jsx(Tooltip.Trigger, { className: v.help(), "aria-label": helpLabel, tabIndex: 0, children: _jsx(IconInfoCircle, { size: 14, stroke: 1.75 }) }), _jsx(Tooltip.Content, { className: "max-w-xs", children: help })] }))] }), icon && _jsx("span", { className: v.icon(), children: icon })] }), isLoading ? (_jsx(Skeleton, { className: v.skeleton() })) : (_jsxs("div", { className: v.valueRow(), children: [_jsx("span", { className: v.value(), children: value }), delta && DeltaIcon && (_jsxs("span", { className: v.delta(), children: [_jsx(DeltaIcon, { size: 14, stroke: 2 }), delta.value] }))] })), (hint || delta?.label) && !isLoading && (_jsx("p", { className: v.hint(), children: hint ?? delta?.label }))] }));
+};
+//# sourceMappingURL=StatCard.js.map

package/fragments/stat/StatCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatCard.js","sourceRoot":"","sources":["../../src/fragments/stat/StatCard.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb;;GAEG;AAEH,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACtG,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAgC7C,MAAM,SAAS,GAAG;IAChB,EAAE,EAAE,gBAAgB;IACpB,IAAI,EAAE,kBAAkB;IACxB,IAAI,EAAE,SAAS;CACP,CAAC;AAEX,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,GAAG,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,GACtG,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,KAAK,EAAE,SAAS,IAAI,CACpC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAC9F,CAAC;IACF,MAAM,CAAC,GAAG,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC;IAC5C,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAE5D,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC,aACpC,eAAK,SAAS,EAAE,CAAC,CAAC,GAAG,EAAE,aACrB,gBAAM,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,aACvB,KAAK,EACL,IAAI,IAAI,CACP,MAAC,OAAO,IAAC,KAAK,EAAE,CAAC,aACf,KAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,gBAAc,SAAS,EAAE,QAAQ,EAAE,CAAC,YACtE,KAAC,cAAc,IAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,GAAI,GAC1B,EAClB,KAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,UAAU,YAAE,IAAI,GAAmB,IACtD,CACX,IACI,EACN,IAAI,IAAI,eAAM,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,YAAG,IAAI,GAAQ,IAC7C,EACL,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,QAAQ,IAAC,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,GAAI,CACtC,CAAC,CAAC,CAAC,CACF,eAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,aAC1B,eAAM,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,YAAG,KAAK,GAAQ,EACzC,KAAK,IAAI,SAAS,IAAI,CACrB,gBAAM,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,aACxB,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,GAAI,EACjC,KAAK,CAAC,KAAK,IACP,CACR,IACG,CACP,EACA,CAAC,IAAI,IAAI,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CACvC,YAAG,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,YAAG,IAAI,IAAI,KAAK,EAAE,KAAK,GAAK,CACnD,IACI,CACR,CAAC;AACJ,CAAC,CAAC"}

package/fragments/stat/StatCard.styles.d.ts

@@ -0,0 +1,85 @@
+export declare const statCard: import("tailwind-variants").TVReturnType<{
+    emphasis: {
+        true: {
+            base: string;
+        };
+    };
+    sentiment: {
+        positive: {
+            delta: string;
+        };
+        negative: {
+            delta: string;
+        };
+        neutral: {
+            delta: string;
+        };
+    };
+}, {
+    base: string;
+    top: string;
+    label: string;
+    help: string;
+    icon: string;
+    valueRow: string;
+    value: string;
+    delta: string;
+    hint: string;
+    skeleton: string;
+}, undefined, {
+    emphasis: {
+        true: {
+            base: string;
+        };
+    };
+    sentiment: {
+        positive: {
+            delta: string;
+        };
+        negative: {
+            delta: string;
+        };
+        neutral: {
+            delta: string;
+        };
+    };
+}, {
+    base: string;
+    top: string;
+    label: string;
+    help: string;
+    icon: string;
+    valueRow: string;
+    value: string;
+    delta: string;
+    hint: string;
+    skeleton: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    emphasis: {
+        true: {
+            base: string;
+        };
+    };
+    sentiment: {
+        positive: {
+            delta: string;
+        };
+        negative: {
+            delta: string;
+        };
+        neutral: {
+            delta: string;
+        };
+    };
+}, {
+    base: string;
+    top: string;
+    label: string;
+    help: string;
+    icon: string;
+    valueRow: string;
+    value: string;
+    delta: string;
+    hint: string;
+    skeleton: string;
+}>>;

package/fragments/stat/StatCard.styles.js

@@ -0,0 +1,26 @@
+import { tv } from 'tailwind-variants';
+export const statCard = tv({
+    slots: {
+        base: 'fragment-stat-card',
+        top: 'fragment-stat-card__top',
+        label: 'fragment-stat-card__label',
+        help: 'fragment-stat-card__help',
+        icon: 'fragment-stat-card__icon',
+        valueRow: 'fragment-stat-card__value-row',
+        value: 'fragment-stat-card__value',
+        delta: 'fragment-stat-card__delta',
+        hint: 'fragment-stat-card__hint',
+        skeleton: 'fragment-stat-card__skeleton',
+    },
+    variants: {
+        emphasis: {
+            true: { base: 'fragment-stat-card--emphasis' },
+        },
+        sentiment: {
+            positive: { delta: 'fragment-stat-card__delta--positive' },
+            negative: { delta: 'fragment-stat-card__delta--negative' },
+            neutral: { delta: 'fragment-stat-card__delta--neutral' },
+        },
+    },
+});
+//# sourceMappingURL=StatCard.styles.js.map

package/fragments/stat/StatCard.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatCard.styles.js","sourceRoot":"","sources":["../../src/fragments/stat/StatCard.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,QAAQ,GAAG,EAAE,CAAC;IACzB,KAAK,EAAE;QACL,IAAI,EAAE,oBAAoB;QAC1B,GAAG,EAAE,yBAAyB;QAC9B,KAAK,EAAE,2BAA2B;QAClC,IAAI,EAAE,0BAA0B;QAChC,IAAI,EAAE,0BAA0B;QAChC,QAAQ,EAAE,+BAA+B;QACzC,KAAK,EAAE,2BAA2B;QAClC,KAAK,EAAE,2BAA2B;QAClC,IAAI,EAAE,0BAA0B;QAChC,QAAQ,EAAE,8BAA8B;KACzC;IACD,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,IAAI,EAAE,EAAE,IAAI,EAAE,8BAA8B,EAAE;SAC/C;QACD,SAAS,EAAE;YACT,QAAQ,EAAE,EAAE,KAAK,EAAE,qCAAqC,EAAE;YAC1D,QAAQ,EAAE,EAAE,KAAK,EAAE,qCAAqC,EAAE;YAC1D,OAAO,EAAE,EAAE,KAAK,EAAE,oCAAoC,EAAE;SACzD;KACF;CACF,CAAC,CAAC"}

package/fragments/stat/stat-card.css

@@ -0,0 +1,64 @@
+@layer components {
+  .fragment-stat-card {
+    @apply p-4 gap-2 min-w-0;
+  }
+
+  .fragment-stat-card__top {
+    @apply flex items-center justify-between gap-2;
+  }
+
+  .fragment-stat-card__label {
+    @apply flex items-center gap-1 text-xs font-medium text-muted min-w-0;
+  }
+
+  .fragment-stat-card__help {
+    @apply inline-flex text-muted/70 hover:text-foreground cursor-help rounded-full outline-none
+           focus-visible:ring-2 focus-visible:ring-focus;
+  }
+
+  .fragment-stat-card__icon {
+    @apply flex size-8 shrink-0 items-center justify-center rounded-lg bg-default text-muted;
+    & svg {
+      @apply size-4;
+    }
+  }
+
+  .fragment-stat-card__value-row {
+    @apply flex flex-wrap items-baseline gap-x-2 gap-y-1;
+  }
+
+  /* Proportional figures: a standalone number with tabular digits looks loosely set. */
+  .fragment-stat-card__value {
+    @apply text-2xl font-semibold tracking-tight text-foreground truncate;
+  }
+
+  .fragment-stat-card__delta {
+    @apply inline-flex items-center gap-0.5 rounded-md px-1.5 py-0.5 text-xs font-medium;
+  }
+
+  .fragment-stat-card__delta--positive {
+    @apply bg-success-soft text-success-soft-foreground;
+  }
+
+  .fragment-stat-card__delta--negative {
+    @apply bg-danger-soft text-danger-soft-foreground;
+  }
+
+  .fragment-stat-card__delta--neutral {
+    @apply bg-default text-muted;
+  }
+
+  .fragment-stat-card__hint {
+    @apply text-xs text-muted;
+  }
+
+  .fragment-stat-card__skeleton {
+    @apply h-8 w-24 rounded-lg;
+  }
+
+  .fragment-stat-card--emphasis {
+    .fragment-stat-card__value {
+      @apply text-3xl;
+    }
+  }
+}

package/fragments/widget/Widget.d.ts

@@ -8,8 +8,15 @@ export interface WidgetProps {
         startContent?: React.ReactNode;
         endContent?: React.ReactNode;
     };
-    title?: string;
-    size?: 'sm' | 'md' | 'lg';
+    title?: React.ReactNode;
+    /** One line under the title saying what the widget measures. */
+    description?: React.ReactNode;
+    /** Pinned to the bottom of the card, behind a hairline: a "view all" link, a timestamp. */
+    footer?: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg' | 'full';
+    /** `none` lets a table or a list run edge to edge inside the card. */
+    padding?: 'none' | 'sm' | 'md';
     variant?: CardProps['variant'];
+    className?: string;
 }
 export declare const Widget: React.FC<WidgetProps>;

package/fragments/widget/Widget.js

@@ -5,8 +5,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { Card } from '@heroui/react';
 import { widget } from './Widget.styles';
-export const Widget = ({ children, title, header, variant, ...props }) => {
-    const { base, content, header: headerClasses, headerEndContent } = widget(props);
-    return (_jsxs(Card, { className: base(), variant: variant, children: [(title || header?.endContent) && (_jsxs(Card.Header, { className: headerClasses(), children: [title && _jsx("h3", { children: title }), _jsx("div", { className: headerEndContent(), children: header?.endContent })] })), _jsx(Card.Content, { className: content(), children: children })] }));
+export const Widget = ({ children, title, description, header, footer, variant, className, ...props }) => {
+    const v = widget(props);
+    const hasHeader = !!(title || description || header?.startContent || header?.endContent);
+    return (_jsxs(Card, { className: v.base({ className }), variant: variant, children: [hasHeader && (_jsxs(Card.Header, { className: v.header(), children: [header?.startContent && _jsx("div", { className: v.headerStartContent(), children: header.startContent }), _jsxs("div", { className: v.heading(), children: [title && _jsx("h3", { className: v.title(), children: title }), description && _jsx("p", { className: v.description(), children: description })] }), header?.endContent && _jsx("div", { className: v.headerEndContent(), children: header.endContent })] })), _jsx(Card.Content, { className: v.content(), children: children }), footer && _jsx(Card.Footer, { className: v.footer(), children: footer })] }));
 };
 //# sourceMappingURL=Widget.js.map

package/fragments/widget/Widget.js.map

@@ -1 +1 @@
-{"version":3,"file":"Widget.js","sourceRoot":"","sources":["../../src/fragments/widget/Widget.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb;;GAEG;AAEH,OAAO,EAAE,IAAI,EAAa,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAczC,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC9F,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,gBAAgB,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEjF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,aACtC,CAAC,KAAK,IAAI,MAAM,EAAE,UAAU,CAAC,IAAI,CAChC,MAAC,IAAI,CAAC,MAAM,IAAC,SAAS,EAAE,aAAa,EAAE,aACpC,KAAK,IAAI,uBAAK,KAAK,GAAM,EAC1B,cAAK,SAAS,EAAE,gBAAgB,EAAE,YAAG,MAAM,EAAE,UAAU,GAAO,IAClD,CACf,EACD,KAAC,IAAI,CAAC,OAAO,IAAC,SAAS,EAAE,OAAO,EAAE,YAC/B,QAAQ,GACI,IACV,CACR,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Widget.js","sourceRoot":"","sources":["../../src/fragments/widget/Widget.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb;;GAEG;AAEH,OAAO,EAAE,IAAI,EAAa,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAoBzC,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC5C,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,EAC3E,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACxB,MAAM,SAAS,GAAG,CAAC,CAAC,CAAC,KAAK,IAAI,WAAW,IAAI,MAAM,EAAE,YAAY,IAAI,MAAM,EAAE,UAAU,CAAC,CAAC;IAEzF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,aACrD,SAAS,IAAI,CACZ,MAAC,IAAI,CAAC,MAAM,IAAC,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,aAC/B,MAAM,EAAE,YAAY,IAAI,cAAK,SAAS,EAAE,CAAC,CAAC,kBAAkB,EAAE,YAAG,MAAM,CAAC,YAAY,GAAO,EAC5F,eAAK,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,aACxB,KAAK,IAAI,aAAI,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,YAAG,KAAK,GAAM,EAC/C,WAAW,IAAI,YAAG,SAAS,EAAE,CAAC,CAAC,WAAW,EAAE,YAAG,WAAW,GAAK,IAC5D,EACL,MAAM,EAAE,UAAU,IAAI,cAAK,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAAE,YAAG,MAAM,CAAC,UAAU,GAAO,IAC1E,CACf,EACD,KAAC,IAAI,CAAC,OAAO,IAAC,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,YACjC,QAAQ,GACI,EACd,MAAM,IAAI,KAAC,IAAI,CAAC,MAAM,IAAC,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,YAAG,MAAM,GAAe,IAChE,CACR,CAAC;AACJ,CAAC,CAAC"}

package/fragments/widget/Widget.styles.d.ts

@@ -9,12 +9,29 @@ export declare const widget: import("tailwind-variants").TVReturnType<{
         lg: {
             base: string;
         };
+        full: {
+            base: string;
+        };
+    };
+    padding: {
+        none: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {};
     };
 }, {
     base: string;
     header: string;
+    headerStartContent: string;
+    heading: string;
+    title: string;
+    description: string;
     headerEndContent: string;
     content: string;
+    footer: string;
 }, undefined, {
     size: {
         sm: {
@@ -26,12 +43,29 @@ export declare const widget: import("tailwind-variants").TVReturnType<{
         lg: {
             base: string;
         };
+        full: {
+            base: string;
+        };
+    };
+    padding: {
+        none: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {};
     };
 }, {
     base: string;
     header: string;
+    headerStartContent: string;
+    heading: string;
+    title: string;
+    description: string;
     headerEndContent: string;
     content: string;
+    footer: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
     size: {
         sm: {
@@ -43,10 +77,27 @@ export declare const widget: import("tailwind-variants").TVReturnType<{
         lg: {
             base: string;
         };
+        full: {
+            base: string;
+        };
+    };
+    padding: {
+        none: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {};
     };
 }, {
     base: string;
     header: string;
+    headerStartContent: string;
+    heading: string;
+    title: string;
+    description: string;
     headerEndContent: string;
     content: string;
+    footer: string;
 }>>;

package/fragments/widget/Widget.styles.js

@@ -3,18 +3,30 @@ export const widget = tv({
     slots: {
         base: 'fragment-widget',
         header: 'fragment-widget__header',
+        headerStartContent: 'fragment-widget__header-start',
+        heading: 'fragment-widget__heading',
+        title: 'fragment-widget__title',
+        description: 'fragment-widget__description',
         headerEndContent: 'fragment-widget__header-end',
         content: 'fragment-widget__content',
+        footer: 'fragment-widget__footer',
     },
     variants: {
         size: {
             sm: { base: 'fragment-widget--sm' },
             md: { base: 'fragment-widget--md' },
             lg: { base: 'fragment-widget--lg' },
+            full: { base: 'fragment-widget--full' },
+        },
+        padding: {
+            none: { base: 'fragment-widget--flush' },
+            sm: { base: 'fragment-widget--padding-sm' },
+            md: {},
         },
     },
     defaultVariants: {
         size: 'sm',
+        padding: 'md',
     },
 });
 //# sourceMappingURL=Widget.styles.js.map

package/fragments/widget/Widget.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Widget.styles.js","sourceRoot":"","sources":["../../src/fragments/widget/Widget.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,MAAM,GAAG,EAAE,CAAC;IACvB,KAAK,EAAE;QACL,IAAI,EAAE,iBAAiB;QACvB,MAAM,EAAE,yBAAyB;QACjC,gBAAgB,EAAE,6BAA6B;QAC/C,OAAO,EAAE,0BAA0B;KACpC;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,EAAE,IAAI,EAAE,qBAAqB,EAAE;YACnC,EAAE,EAAE,EAAE,IAAI,EAAE,qBAAqB,EAAE;YACnC,EAAE,EAAE,EAAE,IAAI,EAAE,qBAAqB,EAAE;SACpC;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,IAAI;KACX;CACF,CAAC,CAAC"}
+{"version":3,"file":"Widget.styles.js","sourceRoot":"","sources":["../../src/fragments/widget/Widget.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,MAAM,GAAG,EAAE,CAAC;IACvB,KAAK,EAAE;QACL,IAAI,EAAE,iBAAiB;QACvB,MAAM,EAAE,yBAAyB;QACjC,kBAAkB,EAAE,+BAA+B;QACnD,OAAO,EAAE,0BAA0B;QACnC,KAAK,EAAE,wBAAwB;QAC/B,WAAW,EAAE,8BAA8B;QAC3C,gBAAgB,EAAE,6BAA6B;QAC/C,OAAO,EAAE,0BAA0B;QACnC,MAAM,EAAE,yBAAyB;KAClC;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,EAAE,IAAI,EAAE,qBAAqB,EAAE;YACnC,EAAE,EAAE,EAAE,IAAI,EAAE,qBAAqB,EAAE;YACnC,EAAE,EAAE,EAAE,IAAI,EAAE,qBAAqB,EAAE;YACnC,IAAI,EAAE,EAAE,IAAI,EAAE,uBAAuB,EAAE;SACxC;QACD,OAAO,EAAE;YACP,IAAI,EAAE,EAAE,IAAI,EAAE,wBAAwB,EAAE;YACxC,EAAE,EAAE,EAAE,IAAI,EAAE,6BAA6B,EAAE;YAC3C,EAAE,EAAE,EAAE;SACP;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,IAAI;KACd;CACF,CAAC,CAAC"}