@epicbagel/saas-kit 0.0.0-stage → 1.0.0

package/dist/primitives/filter-bar.d.cts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FilterDefinition } from '../lib/filter-types.cjs';
+
+interface OrderOption {
+    label: string;
+    value: string;
+    field: string;
+    direction: "ASC" | "DESC";
+}
+interface FilterBarProps {
+    filters: FilterDefinition[];
+    onFiltersChange: (_filters: Record<string, any>) => void;
+    activeFilters: Record<string, any>;
+    className?: string;
+    includeLabel?: boolean;
+    actions?: React.ReactNode;
+    sortOptions?: OrderOption[];
+    sortValue?: string;
+    onSortChange?: (_value: string) => void;
+    /** Size of the toolbar trigger. Use lg for roomier 48px control rows. */
+    triggerSize?: "default" | "lg";
+}
+declare function FilterBar({ filters, onFiltersChange, activeFilters, className, includeLabel, actions, sortOptions, sortValue, onSortChange, triggerSize, }: FilterBarProps): react_jsx_runtime.JSX.Element;
+
+export { FilterBar, type OrderOption };

package/dist/primitives/filter-bar.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FilterDefinition } from '../lib/filter-types.js';
+
+interface OrderOption {
+    label: string;
+    value: string;
+    field: string;
+    direction: "ASC" | "DESC";
+}
+interface FilterBarProps {
+    filters: FilterDefinition[];
+    onFiltersChange: (_filters: Record<string, any>) => void;
+    activeFilters: Record<string, any>;
+    className?: string;
+    includeLabel?: boolean;
+    actions?: React.ReactNode;
+    sortOptions?: OrderOption[];
+    sortValue?: string;
+    onSortChange?: (_value: string) => void;
+    /** Size of the toolbar trigger. Use lg for roomier 48px control rows. */
+    triggerSize?: "default" | "lg";
+}
+declare function FilterBar({ filters, onFiltersChange, activeFilters, className, includeLabel, actions, sortOptions, sortValue, onSortChange, triggerSize, }: FilterBarProps): react_jsx_runtime.JSX.Element;
+
+export { FilterBar, type OrderOption };

package/dist/primitives/filter-bar.js

@@ -0,0 +1,20 @@
+"use client";
+"use client";
+import {
+  FilterBar
+} from "../chunk-MLHNYRFX.js";
+import "../chunk-G76JANB4.js";
+import "../chunk-YG7FBJRM.js";
+import "../chunk-E2TQMDO7.js";
+import "../chunk-RRRD5EUI.js";
+import "../chunk-OICAYRVH.js";
+import "../chunk-J6NXDZR5.js";
+import "../chunk-QMA3WVB7.js";
+import "../chunk-H7TETFLB.js";
+import "../chunk-D4ZL2OEQ.js";
+import "../chunk-HQRWRRZJ.js";
+import "../chunk-PIU5SSUV.js";
+import "../chunk-G6SRSWXB.js";
+export {
+  FilterBar
+};

package/dist/primitives/flex-item.cjs

@@ -0,0 +1,34 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/flex-item.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var FlexItem = _react.forwardRef.call(void 0, 
+  function FlexItem2({ grow = false, minWidth = "auto", shrink = true, basis = "auto", overflow = "visible", minHeight = "auto", className, ...props }, ref) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ref,
+        className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+          grow && "flex-1",
+          minWidth === "zero" && "min-w-0",
+          !shrink && "shrink-0",
+          basis === "sm" && "basis-48",
+          basis === "md" && "basis-64",
+          basis === "lg" && "basis-80",
+          overflow === "hidden" && "overflow-hidden",
+          overflow === "y-auto" && "overflow-y-auto overflow-x-hidden",
+          minHeight === "zero" && "min-h-0",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+
+
+exports.FlexItem = FlexItem;

package/dist/primitives/flex-item.d.cts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { HTMLAttributes } from 'react';
+
+interface FlexItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Allow this item to consume the remaining space in a flex layout. */
+    grow?: boolean;
+    /** Prevent intrinsic content width from overflowing its flex container. */
+    minWidth?: "auto" | "zero";
+    /** Keep the item from shrinking when adjacent content grows. */
+    shrink?: boolean;
+    basis?: "auto" | "sm" | "md" | "lg";
+    overflow?: "visible" | "hidden" | "y-auto";
+    minHeight?: "auto" | "zero";
+}
+/** A flex child with explicit growth and intrinsic-width behaviour. */
+declare const FlexItem: React.ForwardRefExoticComponent<FlexItemProps & React.RefAttributes<HTMLDivElement>>;
+
+export { FlexItem, type FlexItemProps };

package/dist/primitives/flex-item.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { HTMLAttributes } from 'react';
+
+interface FlexItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Allow this item to consume the remaining space in a flex layout. */
+    grow?: boolean;
+    /** Prevent intrinsic content width from overflowing its flex container. */
+    minWidth?: "auto" | "zero";
+    /** Keep the item from shrinking when adjacent content grows. */
+    shrink?: boolean;
+    basis?: "auto" | "sm" | "md" | "lg";
+    overflow?: "visible" | "hidden" | "y-auto";
+    minHeight?: "auto" | "zero";
+}
+/** A flex child with explicit growth and intrinsic-width behaviour. */
+declare const FlexItem: React.ForwardRefExoticComponent<FlexItemProps & React.RefAttributes<HTMLDivElement>>;
+
+export { FlexItem, type FlexItemProps };

package/dist/primitives/flex-item.js

@@ -0,0 +1,34 @@
+"use client";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/flex-item.tsx
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var FlexItem = forwardRef(
+  function FlexItem2({ grow = false, minWidth = "auto", shrink = true, basis = "auto", overflow = "visible", minHeight = "auto", className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          grow && "flex-1",
+          minWidth === "zero" && "min-w-0",
+          !shrink && "shrink-0",
+          basis === "sm" && "basis-48",
+          basis === "md" && "basis-64",
+          basis === "lg" && "basis-80",
+          overflow === "hidden" && "overflow-hidden",
+          overflow === "y-auto" && "overflow-y-auto overflow-x-hidden",
+          minHeight === "zero" && "min-h-0",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+export {
+  FlexItem
+};

package/dist/primitives/grid.cjs

@@ -0,0 +1,47 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/grid.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var fixedColumns = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4"
+};
+var responsiveColumns = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+};
+var gaps = { sm: "gap-2", compact: "gap-3", md: "gap-4", lg: "gap-6" };
+var Grid = _react.forwardRef.call(void 0, function Grid2({ columns = 2, gap = "md", responsive = true, layout = "grid", maxWidth = "none", centered = false, template = "equal", as, className, ...props }, ref) {
+  const Component = _nullishCoalesce(as, () => ( "div"));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Component,
+    {
+      ref,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        layout === "grid" ? "grid" : "grid sm:flex sm:justify-end",
+        layout === "grid" && template === "equal" && columns !== null && (responsive ? responsiveColumns[columns] : fixedColumns[columns]),
+        layout === "responsive-actions" && columns !== null && fixedColumns[columns],
+        template === "compact-leading-three" && "grid-cols-[5rem_1fr_1fr]",
+        template === "responsive-form-row-six" && "grid-cols-1 items-center sm:grid-cols-[1fr_1.4fr_1fr_1fr_1fr_auto]",
+        template === "master-detail" && "grid-cols-1 lg:grid-cols-[360px_1fr]",
+        template === "gallery" && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+        gaps[gap],
+        maxWidth === "xl" && "max-w-2xl",
+        centered && "mx-auto",
+        className
+      ),
+      ...props
+    }
+  );
+});
+
+
+exports.Grid = Grid;

package/dist/primitives/grid.d.cts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { HTMLAttributes, ElementType } from 'react';
+
+interface GridProps extends HTMLAttributes<HTMLElement> {
+    /** Equal column count. Pass null when supplying a bespoke template via className. */
+    columns?: 1 | 2 | 3 | 4 | null;
+    gap?: "sm" | "compact" | "md" | "lg";
+    responsive?: boolean;
+    layout?: "grid" | "responsive-actions";
+    maxWidth?: "none" | "xl";
+    centered?: boolean;
+    template?: "equal" | "compact-leading-three" | "responsive-form-row-six" | "master-detail" | "gallery";
+    as?: ElementType;
+}
+/** Canonical equal-column grid with optional responsive collapse. */
+declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLElement>>;
+
+export { Grid, type GridProps };

package/dist/primitives/grid.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { HTMLAttributes, ElementType } from 'react';
+
+interface GridProps extends HTMLAttributes<HTMLElement> {
+    /** Equal column count. Pass null when supplying a bespoke template via className. */
+    columns?: 1 | 2 | 3 | 4 | null;
+    gap?: "sm" | "compact" | "md" | "lg";
+    responsive?: boolean;
+    layout?: "grid" | "responsive-actions";
+    maxWidth?: "none" | "xl";
+    centered?: boolean;
+    template?: "equal" | "compact-leading-three" | "responsive-form-row-six" | "master-detail" | "gallery";
+    as?: ElementType;
+}
+/** Canonical equal-column grid with optional responsive collapse. */
+declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLElement>>;
+
+export { Grid, type GridProps };

package/dist/primitives/grid.js

@@ -0,0 +1,47 @@
+"use client";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/grid.tsx
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var fixedColumns = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4"
+};
+var responsiveColumns = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+};
+var gaps = { sm: "gap-2", compact: "gap-3", md: "gap-4", lg: "gap-6" };
+var Grid = forwardRef(function Grid2({ columns = 2, gap = "md", responsive = true, layout = "grid", maxWidth = "none", centered = false, template = "equal", as, className, ...props }, ref) {
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: cn(
+        layout === "grid" ? "grid" : "grid sm:flex sm:justify-end",
+        layout === "grid" && template === "equal" && columns !== null && (responsive ? responsiveColumns[columns] : fixedColumns[columns]),
+        layout === "responsive-actions" && columns !== null && fixedColumns[columns],
+        template === "compact-leading-three" && "grid-cols-[5rem_1fr_1fr]",
+        template === "responsive-form-row-six" && "grid-cols-1 items-center sm:grid-cols-[1fr_1.4fr_1fr_1fr_1fr_auto]",
+        template === "master-detail" && "grid-cols-1 lg:grid-cols-[360px_1fr]",
+        template === "gallery" && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+        gaps[gap],
+        maxWidth === "xl" && "max-w-2xl",
+        centered && "mx-auto",
+        className
+      ),
+      ...props
+    }
+  );
+});
+export {
+  Grid
+};

package/dist/primitives/heading.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkLELBCBDTcjs = require('../chunk-LELBCBDT.cjs');
+require('../chunk-KWLSBTB2.cjs');
+
+
+exports.Heading = _chunkLELBCBDTcjs.Heading;

package/dist/primitives/heading.d.cts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { HTMLAttributes, ElementType } from 'react';
+
+/**
+ * Heading — semantic + visual page hierarchy primitive.
+ *
+ * One canonical scale for every page. Consumers render
+ * <Heading level={N}> instead of typing
+ * `<h1 className="text-3xl font-semibold tracking-tight">` ad hoc.
+ *
+ * `level` controls BOTH the rendered tag (h1..h6) and the visual
+ * style. The styles are deliberately fixed — divergence in
+ * "what does a section title look like" is what we're fixing.
+ * Override with the `as` prop if you need the visual style on a
+ * different tag (e.g. a card title that's a `<div>` semantically).
+ */
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    level?: HeadingLevel;
+    appearance?: "default" | "compact" | "compact-strong" | "eyebrow" | "section";
+    spacing?: "none" | "section" | "after-xs" | "after" | "after-lg";
+    truncate?: boolean;
+    /** Override the rendered tag while keeping the level's visual style. */
+    as?: ElementType;
+}
+declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+
+export { Heading, type HeadingLevel };

package/dist/primitives/heading.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { HTMLAttributes, ElementType } from 'react';
+
+/**
+ * Heading — semantic + visual page hierarchy primitive.
+ *
+ * One canonical scale for every page. Consumers render
+ * <Heading level={N}> instead of typing
+ * `<h1 className="text-3xl font-semibold tracking-tight">` ad hoc.
+ *
+ * `level` controls BOTH the rendered tag (h1..h6) and the visual
+ * style. The styles are deliberately fixed — divergence in
+ * "what does a section title look like" is what we're fixing.
+ * Override with the `as` prop if you need the visual style on a
+ * different tag (e.g. a card title that's a `<div>` semantically).
+ */
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    level?: HeadingLevel;
+    appearance?: "default" | "compact" | "compact-strong" | "eyebrow" | "section";
+    spacing?: "none" | "section" | "after-xs" | "after" | "after-lg";
+    truncate?: boolean;
+    /** Override the rendered tag while keeping the level's visual style. */
+    as?: ElementType;
+}
+declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+
+export { Heading, type HeadingLevel };

package/dist/primitives/heading.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  Heading
+} from "../chunk-H2O6NMLZ.js";
+import "../chunk-G6SRSWXB.js";
+export {
+  Heading
+};

package/dist/primitives/hidden-control.cjs

@@ -0,0 +1,13 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/hidden-control.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function HiddenControl({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "pointer-events-none absolute h-0 w-0 overflow-hidden opacity-0 [&_*]:pointer-events-auto", className), ...props });
+}
+
+
+exports.HiddenControl = HiddenControl;

package/dist/primitives/hidden-control.d.cts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes } from 'react';
+
+/** Visually collapsed wrapper for programmatically-triggered controls. */
+declare function HiddenControl({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+
+export { HiddenControl };

package/dist/primitives/hidden-control.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes } from 'react';
+
+/** Visually collapsed wrapper for programmatically-triggered controls. */
+declare function HiddenControl({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+
+export { HiddenControl };

package/dist/primitives/hidden-control.js

@@ -0,0 +1,13 @@
+"use client";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/hidden-control.tsx
+import { jsx } from "react/jsx-runtime";
+function HiddenControl({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("pointer-events-none absolute h-0 w-0 overflow-hidden opacity-0 [&_*]:pointer-events-auto", className), ...props });
+}
+export {
+  HiddenControl
+};

package/dist/primitives/icon.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkT2ZFSPE4cjs = require('../chunk-T2ZFSPE4.cjs');
+require('../chunk-KWLSBTB2.cjs');
+
+
+exports.Icon = _chunkT2ZFSPE4cjs.Icon;

package/dist/primitives/icon.d.cts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { HTMLAttributes, ElementType } from 'react';
+
+interface IconProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    icon: ElementType;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | number;
+    tone?: "inherit" | "muted" | "primary" | "info" | "success" | "warning" | "destructive" | "disabled";
+    spin?: boolean;
+    strokeWidth?: number;
+    align?: "center" | "start";
+    filled?: boolean;
+    visibility?: "visible" | "hidden" | "parent-hover";
+    marginEnd?: "none" | "md";
+    marginStart?: "none" | "sm";
+    motion?: "none" | "parent-nudge";
+    rotation?: "none" | "half";
+    marginBottom?: "none" | "sm" | "md";
+}
+/** Canonically sized and coloured decorative icon. */
+declare function Icon({ icon, size, tone, spin, align, filled, visibility, marginEnd, marginStart, motion, rotation, marginBottom, className, ...props }: IconProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+
+export { Icon, type IconProps };

package/dist/primitives/icon.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { HTMLAttributes, ElementType } from 'react';
+
+interface IconProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    icon: ElementType;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | number;
+    tone?: "inherit" | "muted" | "primary" | "info" | "success" | "warning" | "destructive" | "disabled";
+    spin?: boolean;
+    strokeWidth?: number;
+    align?: "center" | "start";
+    filled?: boolean;
+    visibility?: "visible" | "hidden" | "parent-hover";
+    marginEnd?: "none" | "md";
+    marginStart?: "none" | "sm";
+    motion?: "none" | "parent-nudge";
+    rotation?: "none" | "half";
+    marginBottom?: "none" | "sm" | "md";
+}
+/** Canonically sized and coloured decorative icon. */
+declare function Icon({ icon, size, tone, spin, align, filled, visibility, marginEnd, marginStart, motion, rotation, marginBottom, className, ...props }: IconProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+
+export { Icon, type IconProps };

package/dist/primitives/icon.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  Icon
+} from "../chunk-KN4RPX35.js";
+import "../chunk-G6SRSWXB.js";
+export {
+  Icon
+};

package/dist/primitives/image.cjs

@@ -0,0 +1,52 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/image.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var fitStyles = { cover: "object-cover", contain: "object-contain" };
+var radiusStyles = { none: "", sm: "rounded-sm", md: "rounded-md", xl: "rounded-xl", full: "rounded-full" };
+var Image = _react.forwardRef.call(void 0, function Image2({ fit = "cover", frameHeight, radius = "none", width = "auto", align = "start", border = false, shadow = "none", emphasis = "full", loadingIndicator = "none", className, onLoad, onError, src, ...props }, ref) {
+  const [loaded, setLoaded] = _react.useState.call(void 0, loadingIndicator === "none" || !src);
+  _react.useEffect.call(void 0, () => {
+    setLoaded(loadingIndicator === "none" || !src);
+  }, [loadingIndicator, src]);
+  const loading = loadingIndicator === "pulse" && !loaded;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "img",
+    {
+      ref,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        fitStyles[fit],
+        radiusStyles[radius],
+        frameHeight === "sm" && "h-16",
+        frameHeight === "md" && "h-28",
+        width === "full" && "w-full",
+        width === "preview" && "w-full max-w-[380px]",
+        width === "preview-lg" && "w-full max-w-[440px]",
+        align === "center" && "mx-auto",
+        border && "border",
+        shadow === "subtle" && "shadow-xs",
+        loading && "animate-pulse bg-muted",
+        emphasis === "soft-until-parent-hover" && "transition-opacity duration-200 md:opacity-70 md:group-hover:opacity-100",
+        className
+      ),
+      src,
+      ...props,
+      "aria-busy": loading || void 0,
+      onLoad: (event) => {
+        setLoaded(true);
+        _optionalChain([onLoad, 'optionalCall', _ => _(event)]);
+      },
+      onError: (event) => {
+        setLoaded(true);
+        _optionalChain([onError, 'optionalCall', _2 => _2(event)]);
+      }
+    }
+  );
+});
+
+
+exports.Image = Image;

package/dist/primitives/image.d.cts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ImgHTMLAttributes } from 'react';
+
+interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+    fit?: "cover" | "contain";
+    /** Fixed media-frame height. Use when an image must reserve a stable layout slot. */
+    frameHeight?: "sm" | "md";
+    radius?: "none" | "sm" | "md" | "xl" | "full";
+    width?: "auto" | "full" | "preview" | "preview-lg";
+    align?: "start" | "center";
+    border?: boolean;
+    shadow?: "none" | "subtle";
+    /** Soften supporting media until its parent interactive surface is hovered. Desktop only. */
+    emphasis?: "full" | "soft-until-parent-hover";
+    /** Show a subtle reserved-frame pulse while a remote image is loading. */
+    loadingIndicator?: "none" | "pulse";
+}
+/** Design-system image with controlled fit and radius behavior. */
+declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
+
+export { Image, type ImageProps };

package/dist/primitives/image.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ImgHTMLAttributes } from 'react';
+
+interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+    fit?: "cover" | "contain";
+    /** Fixed media-frame height. Use when an image must reserve a stable layout slot. */
+    frameHeight?: "sm" | "md";
+    radius?: "none" | "sm" | "md" | "xl" | "full";
+    width?: "auto" | "full" | "preview" | "preview-lg";
+    align?: "start" | "center";
+    border?: boolean;
+    shadow?: "none" | "subtle";
+    /** Soften supporting media until its parent interactive surface is hovered. Desktop only. */
+    emphasis?: "full" | "soft-until-parent-hover";
+    /** Show a subtle reserved-frame pulse while a remote image is loading. */
+    loadingIndicator?: "none" | "pulse";
+}
+/** Design-system image with controlled fit and radius behavior. */
+declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
+
+export { Image, type ImageProps };