jaci-ui 0.6.2 → 0.7.0

package/dist/components/code/index.d.ts

@@ -0,0 +1,2 @@
+import { Code, CodeProps, CodeVariant } from "./code.js";
+export { Code, type CodeProps, type CodeVariant };

package/dist/components/feedback/badge.cjs

@@ -3,13 +3,16 @@ const require_badge = require("../../styled-system/recipes/badge.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/feedback/badge.tsx
-const Badge = (0, react.forwardRef)(function Badge({ className, tone = "neutral", ...props }, ref) {
+const Badge = (0, react.forwardRef)(function Badge({ className, tone = "neutral", variant = "solid", ...props }, ref) {
+	const appearance = `${tone}-${variant}`;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		...props,
 		ref,
-		className: require_cx.cx(require_badge.badge({ tone }), className),
+		className: require_cx.cx(require_badge.badge({ tone: appearance }), className),
 		"data-jaci-component": "badge",
-		"data-slot": "badge"
+		"data-jaci-tone": tone,
+		"data-slot": "badge",
+		"data-variant": variant
 	});
 });
 //#endregion

package/dist/components/feedback/badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"badge.cjs","names":["cx","badge"],"sources":["../../../src/components/feedback/badge.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { badge } from \"../../styled-system/recipes\";\n\nexport interface BadgeProps extends ComponentPropsWithoutRef<\"span\"> {\n  tone?: \"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\";\n}\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { className, tone = \"neutral\", ...props },\n  ref,\n) {\n  return (\n    <span\n      {...props}\n      ref={ref}\n      className={cx(badge({ tone }), className)}\n      data-jaci-component=\"badge\"\n      data-slot=\"badge\"\n    />\n  );\n});\n"],"mappings":";;;;;AAUA,MAAa,SAAA,GAAA,MAAA,WAAA,CAAgD,SAAS,MACpE,EAAE,WAAW,OAAO,WAAW,GAAG,SAClC,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,GAAI;EACC;EACL,WAAWA,WAAAA,GAAGC,cAAAA,MAAM,EAAE,KAAK,CAAC,GAAG,SAAS;EACxC,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC"}
+{"version":3,"file":"badge.cjs","names":["cx","badge"],"sources":["../../../src/components/feedback/badge.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { badge } from \"../../styled-system/recipes\";\n\nexport interface BadgeProps extends ComponentPropsWithoutRef<\"span\"> {\n  tone?: \"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\";\n  variant?: \"solid\" | \"soft\" | \"outline\";\n}\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { className, tone = \"neutral\", variant = \"solid\", ...props },\n  ref,\n) {\n  const appearance = `${tone}-${variant}` as\n    | \"neutral-solid\"\n    | \"accent-solid\"\n    | \"success-solid\"\n    | \"warning-solid\"\n    | \"danger-solid\"\n    | \"neutral-soft\"\n    | \"accent-soft\"\n    | \"success-soft\"\n    | \"warning-soft\"\n    | \"danger-soft\"\n    | \"neutral-outline\"\n    | \"accent-outline\"\n    | \"success-outline\"\n    | \"warning-outline\"\n    | \"danger-outline\";\n\n  return (\n    <span\n      {...props}\n      ref={ref}\n      className={cx(badge({ tone: appearance }), className)}\n      data-jaci-component=\"badge\"\n      data-jaci-tone={tone}\n      data-slot=\"badge\"\n      data-variant={variant}\n    />\n  );\n});\n"],"mappings":";;;;;AAWA,MAAa,SAAA,GAAA,MAAA,WAAA,CAAgD,SAAS,MACpE,EAAE,WAAW,OAAO,WAAW,UAAU,SAAS,GAAG,SACrD,KACA;CACA,MAAM,aAAa,GAAG,KAAK,GAAG;CAiB9B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,GAAI;EACC;EACL,WAAWA,WAAAA,GAAGC,cAAAA,MAAM,EAAE,MAAM,WAAW,CAAC,GAAG,SAAS;EACpD,uBAAoB;EACpB,kBAAgB;EAChB,aAAU;EACV,gBAAc;CACf,CAAA;AAEL,CAAC"}

package/dist/components/feedback/badge.d.cts

@@ -2,6 +2,7 @@ import { ComponentPropsWithoutRef } from "react";
 //#region src/components/feedback/badge.d.ts
 interface BadgeProps extends ComponentPropsWithoutRef<"span"> {
   tone?: "neutral" | "accent" | "success" | "warning" | "danger";
+  variant?: "solid" | "soft" | "outline";
 }
 declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
 //#endregion

package/dist/components/feedback/badge.d.ts

@@ -2,6 +2,7 @@ import { ComponentPropsWithoutRef } from "react";
 //#region src/components/feedback/badge.d.ts
 interface BadgeProps extends ComponentPropsWithoutRef<"span"> {
   tone?: "neutral" | "accent" | "success" | "warning" | "danger";
+  variant?: "solid" | "soft" | "outline";
 }
 declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
 //#endregion

package/dist/components/feedback/badge.js

@@ -3,13 +3,16 @@ import { badge } from "../../styled-system/recipes/badge.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/feedback/badge.tsx
-const Badge = forwardRef(function Badge({ className, tone = "neutral", ...props }, ref) {
+const Badge = forwardRef(function Badge({ className, tone = "neutral", variant = "solid", ...props }, ref) {
+	const appearance = `${tone}-${variant}`;
 	return /* @__PURE__ */ jsx("span", {
 		...props,
 		ref,
-		className: cx(badge({ tone }), className),
+		className: cx(badge({ tone: appearance }), className),
 		"data-jaci-component": "badge",
-		"data-slot": "badge"
+		"data-jaci-tone": tone,
+		"data-slot": "badge",
+		"data-variant": variant
 	});
 });
 //#endregion

package/dist/components/feedback/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":[],"sources":["../../../src/components/feedback/badge.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { badge } from \"../../styled-system/recipes\";\n\nexport interface BadgeProps extends ComponentPropsWithoutRef<\"span\"> {\n  tone?: \"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\";\n}\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { className, tone = \"neutral\", ...props },\n  ref,\n) {\n  return (\n    <span\n      {...props}\n      ref={ref}\n      className={cx(badge({ tone }), className)}\n      data-jaci-component=\"badge\"\n      data-slot=\"badge\"\n    />\n  );\n});\n"],"mappings":";;;;;AAUA,MAAa,QAAQ,WAAwC,SAAS,MACpE,EAAE,WAAW,OAAO,WAAW,GAAG,SAClC,KACA;CACA,OACE,oBAAC,QAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,MAAM,EAAE,KAAK,CAAC,GAAG,SAAS;EACxC,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC"}
+{"version":3,"file":"badge.js","names":[],"sources":["../../../src/components/feedback/badge.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { badge } from \"../../styled-system/recipes\";\n\nexport interface BadgeProps extends ComponentPropsWithoutRef<\"span\"> {\n  tone?: \"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\";\n  variant?: \"solid\" | \"soft\" | \"outline\";\n}\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { className, tone = \"neutral\", variant = \"solid\", ...props },\n  ref,\n) {\n  const appearance = `${tone}-${variant}` as\n    | \"neutral-solid\"\n    | \"accent-solid\"\n    | \"success-solid\"\n    | \"warning-solid\"\n    | \"danger-solid\"\n    | \"neutral-soft\"\n    | \"accent-soft\"\n    | \"success-soft\"\n    | \"warning-soft\"\n    | \"danger-soft\"\n    | \"neutral-outline\"\n    | \"accent-outline\"\n    | \"success-outline\"\n    | \"warning-outline\"\n    | \"danger-outline\";\n\n  return (\n    <span\n      {...props}\n      ref={ref}\n      className={cx(badge({ tone: appearance }), className)}\n      data-jaci-component=\"badge\"\n      data-jaci-tone={tone}\n      data-slot=\"badge\"\n      data-variant={variant}\n    />\n  );\n});\n"],"mappings":";;;;;AAWA,MAAa,QAAQ,WAAwC,SAAS,MACpE,EAAE,WAAW,OAAO,WAAW,UAAU,SAAS,GAAG,SACrD,KACA;CACA,MAAM,aAAa,GAAG,KAAK,GAAG;CAiB9B,OACE,oBAAC,QAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,MAAM,EAAE,MAAM,WAAW,CAAC,GAAG,SAAS;EACpD,uBAAoB;EACpB,kBAAgB;EAChB,aAAU;EACV,gBAAc;CACf,CAAA;AAEL,CAAC"}

package/dist/components/figure/figure.cjs

@@ -0,0 +1,125 @@
+"use client";
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_figure = require("../../styled-system/recipes/figure.cjs");
+const require_image = require("../image/image.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_dialog = require("@base-ui/react/dialog");
+//#region src/components/figure/figure.tsx
+const FigureContext = (0, react.createContext)(null);
+function useFigureContext() {
+	const value = (0, react.useContext)(FigureContext);
+	if (!value) throw new Error("Figure parts must be rendered inside Figure.Root.");
+	return value;
+}
+const FigureImage = (0, react.forwardRef)(function FigureImage({ className, lightbox: _lightbox, ...props }, ref) {
+	const { lightbox, styles } = useFigureContext();
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_image.Image, {
+		...props,
+		ref,
+		className: require_cx.cx(styles.image, className),
+		"data-slot": "figure-image",
+		lightbox: false
+	});
+	if (!lightbox) return content;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Trigger, {
+		"aria-label": "Open image",
+		className: styles.trigger,
+		"data-jaci-component": "figure-trigger",
+		"data-slot": "figure-trigger",
+		children: content
+	});
+});
+const FigureCaption = (0, react.forwardRef)(function FigureCaption({ className, ...props }, ref) {
+	const { styles } = useFigureContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("figcaption", {
+		...props,
+		ref,
+		className: require_cx.cx(styles.caption, className),
+		"data-slot": "figure-caption"
+	});
+});
+function findChild(children, component) {
+	return react.Children.toArray(children).find((item) => (0, react.isValidElement)(item) && item.type === component) ?? null;
+}
+const FigureRoot = (0, react.forwardRef)(function FigureRoot({ children, className, closeLabel = "Close image", defaultOpen, lightbox = false, onOpenChange, open, ...props }, ref) {
+	const styles = require_figure.figure();
+	const media = findChild(children, FigureImage);
+	const caption = findChild(children, FigureCaption);
+	const canOpen = Boolean(lightbox && media?.props.src);
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("figure", {
+		...props,
+		ref,
+		className: require_cx.cx(styles.root, className),
+		"data-jaci-component": "figure",
+		"data-lightbox": canOpen || void 0,
+		"data-slot": "figure",
+		children
+	});
+	const value = {
+		lightbox: canOpen,
+		styles
+	};
+	if (!canOpen || !media) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FigureContext.Provider, {
+		value,
+		children: content
+	});
+	const alt = media.props.alt;
+	const src = media.props.src;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FigureContext.Provider, {
+		value,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_dialog.Dialog.Root, {
+			defaultOpen,
+			onOpenChange: (nextOpen) => onOpenChange?.(nextOpen),
+			open,
+			children: [content, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_dialog.Dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Backdrop, {
+				className: styles.backdrop,
+				"data-slot": "figure-lightbox-backdrop"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Viewport, {
+				className: styles.viewport,
+				"data-slot": "figure-lightbox-viewport",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_dialog.Dialog.Popup, {
+					"aria-label": alt || "Image preview",
+					className: styles.popup,
+					"data-jaci-component": "figure-lightbox",
+					"data-slot": "figure-lightbox-popup",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Title, {
+							className: styles.title,
+							children: alt || "Image preview"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Close, {
+							"aria-label": closeLabel,
+							className: styles.close,
+							"data-slot": "figure-lightbox-close",
+							children: "×"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+							alt,
+							className: styles.lightboxImage,
+							"data-slot": "figure-lightbox-image",
+							src
+						}),
+						caption ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("figcaption", {
+							className: styles.lightboxCaption,
+							"data-slot": "figure-lightbox-caption",
+							children: caption.props.children
+						}) : null
+					]
+				})
+			})] })]
+		})
+	});
+});
+const Figure = {
+	Root: FigureRoot,
+	Image: FigureImage,
+	Caption: FigureCaption
+};
+//#endregion
+exports.Figure = Figure;
+exports.FigureCaption = FigureCaption;
+exports.FigureImage = FigureImage;
+exports.FigureRoot = FigureRoot;
+
+//# sourceMappingURL=figure.cjs.map

package/dist/components/figure/figure.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"figure.cjs","names":["Image","cx","BaseDialog","Children","figureStyles"],"sources":["../../../src/components/figure/figure.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { Children, createContext, forwardRef, isValidElement, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementType, ReactElement, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { figure as figureStyles } from \"../../styled-system/recipes\";\nimport { Image } from \"../image\";\nimport type { ImageProps } from \"../image\";\n\ninterface FigureContextValue {\n  lightbox: boolean;\n  styles: ReturnType<typeof figureStyles>;\n}\n\nconst FigureContext = createContext<FigureContextValue | null>(null);\n\nfunction useFigureContext() {\n  const value = useContext(FigureContext);\n  if (!value) {\n    throw new Error(\"Figure parts must be rendered inside Figure.Root.\");\n  }\n  return value;\n}\n\nexport type FigureImageProps = ImageProps;\n\nexport const FigureImage = forwardRef<HTMLImageElement, FigureImageProps>(function FigureImage(\n  { className, lightbox: _lightbox, ...props },\n  ref,\n) {\n  const { lightbox, styles } = useFigureContext();\n  const content = (\n    <Image\n      {...props}\n      ref={ref}\n      className={cx(styles.image, className)}\n      data-slot=\"figure-image\"\n      lightbox={false}\n    />\n  );\n\n  if (!lightbox) {\n    return content;\n  }\n\n  return (\n    <BaseDialog.Trigger\n      aria-label=\"Open image\"\n      className={styles.trigger}\n      data-jaci-component=\"figure-trigger\"\n      data-slot=\"figure-trigger\"\n    >\n      {content}\n    </BaseDialog.Trigger>\n  );\n});\n\nexport type FigureCaptionProps = ComponentPropsWithoutRef<\"figcaption\">;\n\nexport const FigureCaption = forwardRef<HTMLElement, FigureCaptionProps>(function FigureCaption(\n  { className, ...props },\n  ref,\n) {\n  const { styles } = useFigureContext();\n  return (\n    <figcaption\n      {...props}\n      ref={ref}\n      className={cx(styles.caption, className)}\n      data-slot=\"figure-caption\"\n    />\n  );\n});\n\nexport interface FigureRootProps extends ComponentPropsWithoutRef<\"figure\"> {\n  lightbox?: boolean;\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  closeLabel?: string;\n}\n\nfunction findChild<T>(children: ReactNode, component: ElementType): ReactElement<T> | null {\n  const child = Children.toArray(children).find(\n    (item) => isValidElement(item) && item.type === component,\n  );\n  return (child as ReactElement<T> | undefined) ?? null;\n}\n\nexport const FigureRoot = forwardRef<HTMLElement, FigureRootProps>(function FigureRoot(\n  {\n    children,\n    className,\n    closeLabel = \"Close image\",\n    defaultOpen,\n    lightbox = false,\n    onOpenChange,\n    open,\n    ...props\n  },\n  ref,\n) {\n  const styles = figureStyles();\n  const media = findChild<FigureImageProps>(children, FigureImage);\n  const caption = findChild<FigureCaptionProps>(children, FigureCaption);\n  const canOpen = Boolean(lightbox && media?.props.src);\n  const content = (\n    <figure\n      {...props}\n      ref={ref}\n      className={cx(styles.root, className)}\n      data-jaci-component=\"figure\"\n      data-lightbox={canOpen || undefined}\n      data-slot=\"figure\"\n    >\n      {children}\n    </figure>\n  );\n\n  const value = { lightbox: canOpen, styles };\n\n  if (!canOpen || !media) {\n    return <FigureContext.Provider value={value}>{content}</FigureContext.Provider>;\n  }\n\n  const alt = media.props.alt;\n  const src = media.props.src;\n\n  return (\n    <FigureContext.Provider value={value}>\n      <BaseDialog.Root\n        defaultOpen={defaultOpen}\n        onOpenChange={(nextOpen) => onOpenChange?.(nextOpen)}\n        open={open}\n      >\n        {content}\n        <BaseDialog.Portal>\n          <BaseDialog.Backdrop className={styles.backdrop} data-slot=\"figure-lightbox-backdrop\" />\n          <BaseDialog.Viewport className={styles.viewport} data-slot=\"figure-lightbox-viewport\">\n            <BaseDialog.Popup\n              aria-label={alt || \"Image preview\"}\n              className={styles.popup}\n              data-jaci-component=\"figure-lightbox\"\n              data-slot=\"figure-lightbox-popup\"\n            >\n              <BaseDialog.Title className={styles.title}>{alt || \"Image preview\"}</BaseDialog.Title>\n              <BaseDialog.Close\n                aria-label={closeLabel}\n                className={styles.close}\n                data-slot=\"figure-lightbox-close\"\n              >\n                ×\n              </BaseDialog.Close>\n              <img\n                alt={alt}\n                className={styles.lightboxImage}\n                data-slot=\"figure-lightbox-image\"\n                src={src}\n              />\n              {caption ? (\n                <figcaption className={styles.lightboxCaption} data-slot=\"figure-lightbox-caption\">\n                  {caption.props.children}\n                </figcaption>\n              ) : null}\n            </BaseDialog.Popup>\n          </BaseDialog.Viewport>\n        </BaseDialog.Portal>\n      </BaseDialog.Root>\n    </FigureContext.Provider>\n  );\n});\n\nexport const Figure = {\n  Root: FigureRoot,\n  Image: FigureImage,\n  Caption: FigureCaption,\n};\n"],"mappings":"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"}

package/dist/components/figure/figure.d.cts

@@ -0,0 +1,24 @@
+import { ImageProps } from "../image/image.cjs";
+import "../image/index.cjs";
+import { ComponentPropsWithoutRef } from "react";
+//#region src/components/figure/figure.d.ts
+type FigureImageProps = ImageProps;
+declare const FigureImage: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLImageElement>>;
+type FigureCaptionProps = ComponentPropsWithoutRef<"figcaption">;
+declare const FigureCaption: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+interface FigureRootProps extends ComponentPropsWithoutRef<"figure"> {
+  lightbox?: boolean;
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  closeLabel?: string;
+}
+declare const FigureRoot: import("react").ForwardRefExoticComponent<FigureRootProps & import("react").RefAttributes<HTMLElement>>;
+declare const Figure: {
+  Root: import("react").ForwardRefExoticComponent<FigureRootProps & import("react").RefAttributes<HTMLElement>>;
+  Image: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLImageElement>>;
+  Caption: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+};
+//#endregion
+export { Figure, FigureCaption, FigureCaptionProps, FigureImage, FigureImageProps, FigureRoot, FigureRootProps };
+//# sourceMappingURL=figure.d.cts.map

package/dist/components/figure/figure.d.ts

@@ -0,0 +1,24 @@
+import { ImageProps } from "../image/image.js";
+import "../image/index.js";
+import { ComponentPropsWithoutRef } from "react";
+//#region src/components/figure/figure.d.ts
+type FigureImageProps = ImageProps;
+declare const FigureImage: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLImageElement>>;
+type FigureCaptionProps = ComponentPropsWithoutRef<"figcaption">;
+declare const FigureCaption: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+interface FigureRootProps extends ComponentPropsWithoutRef<"figure"> {
+  lightbox?: boolean;
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  closeLabel?: string;
+}
+declare const FigureRoot: import("react").ForwardRefExoticComponent<FigureRootProps & import("react").RefAttributes<HTMLElement>>;
+declare const Figure: {
+  Root: import("react").ForwardRefExoticComponent<FigureRootProps & import("react").RefAttributes<HTMLElement>>;
+  Image: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLImageElement>>;
+  Caption: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+};
+//#endregion
+export { Figure, FigureCaption, FigureCaptionProps, FigureImage, FigureImageProps, FigureRoot, FigureRootProps };
+//# sourceMappingURL=figure.d.ts.map

package/dist/components/figure/figure.js

@@ -0,0 +1,122 @@
+"use client";
+import { cx } from "../../styled-system/css/cx.js";
+import { figure } from "../../styled-system/recipes/figure.js";
+import { Image } from "../image/image.js";
+import { Children, createContext, forwardRef, isValidElement, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/figure/figure.tsx
+const FigureContext = createContext(null);
+function useFigureContext() {
+	const value = useContext(FigureContext);
+	if (!value) throw new Error("Figure parts must be rendered inside Figure.Root.");
+	return value;
+}
+const FigureImage = forwardRef(function FigureImage({ className, lightbox: _lightbox, ...props }, ref) {
+	const { lightbox, styles } = useFigureContext();
+	const content = /* @__PURE__ */ jsx(Image, {
+		...props,
+		ref,
+		className: cx(styles.image, className),
+		"data-slot": "figure-image",
+		lightbox: false
+	});
+	if (!lightbox) return content;
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"aria-label": "Open image",
+		className: styles.trigger,
+		"data-jaci-component": "figure-trigger",
+		"data-slot": "figure-trigger",
+		children: content
+	});
+});
+const FigureCaption = forwardRef(function FigureCaption({ className, ...props }, ref) {
+	const { styles } = useFigureContext();
+	return /* @__PURE__ */ jsx("figcaption", {
+		...props,
+		ref,
+		className: cx(styles.caption, className),
+		"data-slot": "figure-caption"
+	});
+});
+function findChild(children, component) {
+	return Children.toArray(children).find((item) => isValidElement(item) && item.type === component) ?? null;
+}
+const FigureRoot = forwardRef(function FigureRoot({ children, className, closeLabel = "Close image", defaultOpen, lightbox = false, onOpenChange, open, ...props }, ref) {
+	const styles = figure();
+	const media = findChild(children, FigureImage);
+	const caption = findChild(children, FigureCaption);
+	const canOpen = Boolean(lightbox && media?.props.src);
+	const content = /* @__PURE__ */ jsx("figure", {
+		...props,
+		ref,
+		className: cx(styles.root, className),
+		"data-jaci-component": "figure",
+		"data-lightbox": canOpen || void 0,
+		"data-slot": "figure",
+		children
+	});
+	const value = {
+		lightbox: canOpen,
+		styles
+	};
+	if (!canOpen || !media) return /* @__PURE__ */ jsx(FigureContext.Provider, {
+		value,
+		children: content
+	});
+	const alt = media.props.alt;
+	const src = media.props.src;
+	return /* @__PURE__ */ jsx(FigureContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsxs(Dialog.Root, {
+			defaultOpen,
+			onOpenChange: (nextOpen) => onOpenChange?.(nextOpen),
+			open,
+			children: [content, /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
+				className: styles.backdrop,
+				"data-slot": "figure-lightbox-backdrop"
+			}), /* @__PURE__ */ jsx(Dialog.Viewport, {
+				className: styles.viewport,
+				"data-slot": "figure-lightbox-viewport",
+				children: /* @__PURE__ */ jsxs(Dialog.Popup, {
+					"aria-label": alt || "Image preview",
+					className: styles.popup,
+					"data-jaci-component": "figure-lightbox",
+					"data-slot": "figure-lightbox-popup",
+					children: [
+						/* @__PURE__ */ jsx(Dialog.Title, {
+							className: styles.title,
+							children: alt || "Image preview"
+						}),
+						/* @__PURE__ */ jsx(Dialog.Close, {
+							"aria-label": closeLabel,
+							className: styles.close,
+							"data-slot": "figure-lightbox-close",
+							children: "×"
+						}),
+						/* @__PURE__ */ jsx("img", {
+							alt,
+							className: styles.lightboxImage,
+							"data-slot": "figure-lightbox-image",
+							src
+						}),
+						caption ? /* @__PURE__ */ jsx("figcaption", {
+							className: styles.lightboxCaption,
+							"data-slot": "figure-lightbox-caption",
+							children: caption.props.children
+						}) : null
+					]
+				})
+			})] })]
+		})
+	});
+});
+const Figure = {
+	Root: FigureRoot,
+	Image: FigureImage,
+	Caption: FigureCaption
+};
+//#endregion
+export { Figure, FigureCaption, FigureImage, FigureRoot };
+
+//# sourceMappingURL=figure.js.map

package/dist/components/figure/figure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"figure.js","names":["BaseDialog","figureStyles"],"sources":["../../../src/components/figure/figure.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { Children, createContext, forwardRef, isValidElement, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementType, ReactElement, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { figure as figureStyles } from \"../../styled-system/recipes\";\nimport { Image } from \"../image\";\nimport type { ImageProps } from \"../image\";\n\ninterface FigureContextValue {\n  lightbox: boolean;\n  styles: ReturnType<typeof figureStyles>;\n}\n\nconst FigureContext = createContext<FigureContextValue | null>(null);\n\nfunction useFigureContext() {\n  const value = useContext(FigureContext);\n  if (!value) {\n    throw new Error(\"Figure parts must be rendered inside Figure.Root.\");\n  }\n  return value;\n}\n\nexport type FigureImageProps = ImageProps;\n\nexport const FigureImage = forwardRef<HTMLImageElement, FigureImageProps>(function FigureImage(\n  { className, lightbox: _lightbox, ...props },\n  ref,\n) {\n  const { lightbox, styles } = useFigureContext();\n  const content = (\n    <Image\n      {...props}\n      ref={ref}\n      className={cx(styles.image, className)}\n      data-slot=\"figure-image\"\n      lightbox={false}\n    />\n  );\n\n  if (!lightbox) {\n    return content;\n  }\n\n  return (\n    <BaseDialog.Trigger\n      aria-label=\"Open image\"\n      className={styles.trigger}\n      data-jaci-component=\"figure-trigger\"\n      data-slot=\"figure-trigger\"\n    >\n      {content}\n    </BaseDialog.Trigger>\n  );\n});\n\nexport type FigureCaptionProps = ComponentPropsWithoutRef<\"figcaption\">;\n\nexport const FigureCaption = forwardRef<HTMLElement, FigureCaptionProps>(function FigureCaption(\n  { className, ...props },\n  ref,\n) {\n  const { styles } = useFigureContext();\n  return (\n    <figcaption\n      {...props}\n      ref={ref}\n      className={cx(styles.caption, className)}\n      data-slot=\"figure-caption\"\n    />\n  );\n});\n\nexport interface FigureRootProps extends ComponentPropsWithoutRef<\"figure\"> {\n  lightbox?: boolean;\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  closeLabel?: string;\n}\n\nfunction findChild<T>(children: ReactNode, component: ElementType): ReactElement<T> | null {\n  const child = Children.toArray(children).find(\n    (item) => isValidElement(item) && item.type === component,\n  );\n  return (child as ReactElement<T> | undefined) ?? null;\n}\n\nexport const FigureRoot = forwardRef<HTMLElement, FigureRootProps>(function FigureRoot(\n  {\n    children,\n    className,\n    closeLabel = \"Close image\",\n    defaultOpen,\n    lightbox = false,\n    onOpenChange,\n    open,\n    ...props\n  },\n  ref,\n) {\n  const styles = figureStyles();\n  const media = findChild<FigureImageProps>(children, FigureImage);\n  const caption = findChild<FigureCaptionProps>(children, FigureCaption);\n  const canOpen = Boolean(lightbox && media?.props.src);\n  const content = (\n    <figure\n      {...props}\n      ref={ref}\n      className={cx(styles.root, className)}\n      data-jaci-component=\"figure\"\n      data-lightbox={canOpen || undefined}\n      data-slot=\"figure\"\n    >\n      {children}\n    </figure>\n  );\n\n  const value = { lightbox: canOpen, styles };\n\n  if (!canOpen || !media) {\n    return <FigureContext.Provider value={value}>{content}</FigureContext.Provider>;\n  }\n\n  const alt = media.props.alt;\n  const src = media.props.src;\n\n  return (\n    <FigureContext.Provider value={value}>\n      <BaseDialog.Root\n        defaultOpen={defaultOpen}\n        onOpenChange={(nextOpen) => onOpenChange?.(nextOpen)}\n        open={open}\n      >\n        {content}\n        <BaseDialog.Portal>\n          <BaseDialog.Backdrop className={styles.backdrop} data-slot=\"figure-lightbox-backdrop\" />\n          <BaseDialog.Viewport className={styles.viewport} data-slot=\"figure-lightbox-viewport\">\n            <BaseDialog.Popup\n              aria-label={alt || \"Image preview\"}\n              className={styles.popup}\n              data-jaci-component=\"figure-lightbox\"\n              data-slot=\"figure-lightbox-popup\"\n            >\n              <BaseDialog.Title className={styles.title}>{alt || \"Image preview\"}</BaseDialog.Title>\n              <BaseDialog.Close\n                aria-label={closeLabel}\n                className={styles.close}\n                data-slot=\"figure-lightbox-close\"\n              >\n                ×\n              </BaseDialog.Close>\n              <img\n                alt={alt}\n                className={styles.lightboxImage}\n                data-slot=\"figure-lightbox-image\"\n                src={src}\n              />\n              {caption ? (\n                <figcaption className={styles.lightboxCaption} data-slot=\"figure-lightbox-caption\">\n                  {caption.props.children}\n                </figcaption>\n              ) : null}\n            </BaseDialog.Popup>\n          </BaseDialog.Viewport>\n        </BaseDialog.Portal>\n      </BaseDialog.Root>\n    </FigureContext.Provider>\n  );\n});\n\nexport const Figure = {\n  Root: FigureRoot,\n  Image: FigureImage,\n  Caption: FigureCaption,\n};\n"],"mappings":"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"}

package/dist/components/figure/index.d.cts

@@ -0,0 +1,2 @@
+import { Figure, FigureCaption, FigureCaptionProps, FigureImage, FigureImageProps, FigureRoot, FigureRootProps } from "./figure.cjs";
+export { Figure, FigureCaption, type FigureCaptionProps, FigureImage, type FigureImageProps, FigureRoot, type FigureRootProps };

package/dist/components/figure/index.d.ts

@@ -0,0 +1,2 @@
+import { Figure, FigureCaption, FigureCaptionProps, FigureImage, FigureImageProps, FigureRoot, FigureRootProps } from "./figure.js";
+export { Figure, FigureCaption, type FigureCaptionProps, FigureImage, type FigureImageProps, FigureRoot, type FigureRootProps };

package/dist/components/image/image.cjs

@@ -0,0 +1,103 @@
+"use client";
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_image = require("../../styled-system/recipes/image.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_dialog = require("@base-ui/react/dialog");
+//#region src/components/image/image.tsx
+const Image = (0, react.forwardRef)(function Image({ alt, aspectRatio, className, defaultOpen, fallback, fit = "cover", lightbox = false, lightboxLabel = "Open image", onError, onLoad, onOpenChange, onStatusChange, open, position, src, style, ...props }, ref) {
+	const [status, setStatus] = (0, react.useState)("loading");
+	(0, react.useEffect)(() => {
+		setStatus("loading");
+	}, [src]);
+	(0, react.useEffect)(() => {
+		onStatusChange?.(status);
+	}, [onStatusChange, status]);
+	const styles = require_image.image({
+		fit,
+		status
+	});
+	const rootStyle = {
+		...aspectRatio && Number.isFinite(aspectRatio) && aspectRatio > 0 ? { aspectRatio } : void 0,
+		...style
+	};
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		"aria-busy": status === "loading" || void 0,
+		className: styles.root,
+		"data-fit": fit,
+		"data-jaci-component": "image",
+		"data-slot": "image",
+		"data-status": status,
+		style: rootStyle,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			...props,
+			ref,
+			alt,
+			className: require_cx.cx(styles.image, className),
+			"data-slot": "image-content",
+			onError: (event) => {
+				setStatus("error");
+				onError?.(event);
+			},
+			onLoad: (event) => {
+				setStatus("loaded");
+				onLoad?.(event);
+			},
+			src,
+			style: { objectPosition: position }
+		}), status === "error" && fallback ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-live": "polite",
+			className: styles.fallback,
+			"data-slot": "image-fallback",
+			children: fallback
+		}) : null]
+	});
+	if (!lightbox) return content;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_dialog.Dialog.Root, {
+		defaultOpen,
+		onOpenChange: (nextOpen) => onOpenChange?.(nextOpen),
+		open,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Trigger, {
+			"aria-label": lightboxLabel,
+			className: styles.trigger,
+			"data-jaci-component": "image-trigger",
+			"data-slot": "image-trigger",
+			children: content
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_dialog.Dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Backdrop, {
+			className: styles.backdrop,
+			"data-slot": "image-lightbox-backdrop"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Viewport, {
+			className: styles.viewport,
+			"data-slot": "image-lightbox-viewport",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_dialog.Dialog.Popup, {
+				"aria-label": alt || lightboxLabel,
+				className: styles.popup,
+				"data-jaci-component": "image-lightbox",
+				"data-slot": "image-lightbox-popup",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Title, {
+						className: styles.title,
+						children: alt || lightboxLabel
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Close, {
+						"aria-label": "Close image",
+						className: styles.close,
+						"data-slot": "image-lightbox-close",
+						children: "×"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+						alt,
+						className: styles.lightboxImage,
+						"data-slot": "image-lightbox-content",
+						src,
+						style: { objectPosition: position }
+					})
+				]
+			})
+		})] })]
+	});
+});
+//#endregion
+exports.Image = Image;
+
+//# sourceMappingURL=image.cjs.map

package/dist/components/image/image.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.cjs","names":["image","cx","BaseDialog"],"sources":["../../../src/components/image/image.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { forwardRef, useEffect, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { image } from \"../../styled-system/recipes\";\n\nexport type ImageFit = \"contain\" | \"cover\" | \"fill\" | \"none\";\nexport type ImageStatus = \"loading\" | \"loaded\" | \"error\";\n\nexport interface ImageProps extends Omit<ComponentPropsWithoutRef<\"img\">, \"children\"> {\n  alt: string;\n  aspectRatio?: number;\n  defaultOpen?: boolean;\n  fallback?: ReactNode;\n  fit?: ImageFit;\n  lightbox?: boolean;\n  lightboxLabel?: string;\n  onOpenChange?: (open: boolean) => void;\n  onStatusChange?: (status: ImageStatus) => void;\n  open?: boolean;\n  position?: string;\n}\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(\n  {\n    alt,\n    aspectRatio,\n    className,\n    defaultOpen,\n    fallback,\n    fit = \"cover\",\n    lightbox = false,\n    lightboxLabel = \"Open image\",\n    onError,\n    onLoad,\n    onOpenChange,\n    onStatusChange,\n    open,\n    position,\n    src,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const [status, setStatus] = useState<ImageStatus>(\"loading\");\n\n  // The source is intentionally the reset key for the native image lifecycle.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: changing src starts a new lifecycle.\n  useEffect(() => {\n    setStatus(\"loading\");\n  }, [src]);\n\n  useEffect(() => {\n    onStatusChange?.(status);\n  }, [onStatusChange, status]);\n\n  const styles = image({ fit, status });\n  const rootStyle = {\n    ...(aspectRatio && Number.isFinite(aspectRatio) && aspectRatio > 0\n      ? { aspectRatio }\n      : undefined),\n    ...style,\n  };\n\n  const content = (\n    <span\n      aria-busy={status === \"loading\" || undefined}\n      className={styles.root}\n      data-fit={fit}\n      data-jaci-component=\"image\"\n      data-slot=\"image\"\n      data-status={status}\n      style={rootStyle}\n    >\n      <img\n        {...props}\n        ref={ref}\n        alt={alt}\n        className={cx(styles.image, className)}\n        data-slot=\"image-content\"\n        onError={(event) => {\n          setStatus(\"error\");\n          onError?.(event);\n        }}\n        onLoad={(event) => {\n          setStatus(\"loaded\");\n          onLoad?.(event);\n        }}\n        src={src}\n        style={{ objectPosition: position }}\n      />\n      {status === \"error\" && fallback ? (\n        <span aria-live=\"polite\" className={styles.fallback} data-slot=\"image-fallback\">\n          {fallback}\n        </span>\n      ) : null}\n    </span>\n  );\n\n  if (!lightbox) {\n    return content;\n  }\n\n  return (\n    <BaseDialog.Root\n      defaultOpen={defaultOpen}\n      onOpenChange={(nextOpen) => onOpenChange?.(nextOpen)}\n      open={open}\n    >\n      <BaseDialog.Trigger\n        aria-label={lightboxLabel}\n        className={styles.trigger}\n        data-jaci-component=\"image-trigger\"\n        data-slot=\"image-trigger\"\n      >\n        {content}\n      </BaseDialog.Trigger>\n      <BaseDialog.Portal>\n        <BaseDialog.Backdrop className={styles.backdrop} data-slot=\"image-lightbox-backdrop\" />\n        <BaseDialog.Viewport className={styles.viewport} data-slot=\"image-lightbox-viewport\">\n          <BaseDialog.Popup\n            aria-label={alt || lightboxLabel}\n            className={styles.popup}\n            data-jaci-component=\"image-lightbox\"\n            data-slot=\"image-lightbox-popup\"\n          >\n            <BaseDialog.Title className={styles.title}>{alt || lightboxLabel}</BaseDialog.Title>\n            <BaseDialog.Close\n              aria-label=\"Close image\"\n              className={styles.close}\n              data-slot=\"image-lightbox-close\"\n            >\n              ×\n            </BaseDialog.Close>\n            <img\n              alt={alt}\n              className={styles.lightboxImage}\n              data-slot=\"image-lightbox-content\"\n              src={src}\n              style={{ objectPosition: position }}\n            />\n          </BaseDialog.Popup>\n        </BaseDialog.Viewport>\n      </BaseDialog.Portal>\n    </BaseDialog.Root>\n  );\n});\n"],"mappings":";;;;;;;AA0BA,MAAa,SAAA,GAAA,MAAA,WAAA,CAAiD,SAAS,MACrE,EACE,KACA,aACA,WACA,aACA,UACA,MAAM,SACN,WAAW,OACX,gBAAgB,cAChB,SACA,QACA,cACA,gBACA,MACA,UACA,KACA,OACA,GAAG,SAEL,KACA;CACA,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,SAAA,CAAmC,SAAS;CAI3D,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,UAAU,SAAS;CACrB,GAAG,CAAC,GAAG,CAAC;CAER,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,iBAAiB,MAAM;CACzB,GAAG,CAAC,gBAAgB,MAAM,CAAC;CAE3B,MAAM,SAASA,cAAAA,MAAM;EAAE;EAAK;CAAO,CAAC;CACpC,MAAM,YAAY;EAChB,GAAI,eAAe,OAAO,SAAS,WAAW,KAAK,cAAc,IAC7D,EAAE,YAAY,IACd,KAAA;EACJ,GAAG;CACL;CAEA,MAAM,UACJ,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;EACE,aAAW,WAAW,aAAa,KAAA;EACnC,WAAW,OAAO;EAClB,YAAU;EACV,uBAAoB;EACpB,aAAU;EACV,eAAa;EACb,OAAO;YAPT,CASE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,GAAI;GACC;GACA;GACL,WAAWC,WAAAA,GAAG,OAAO,OAAO,SAAS;GACrC,aAAU;GACV,UAAU,UAAU;IAClB,UAAU,OAAO;IACjB,UAAU,KAAK;GACjB;GACA,SAAS,UAAU;IACjB,UAAU,QAAQ;IAClB,SAAS,KAAK;GAChB;GACK;GACL,OAAO,EAAE,gBAAgB,SAAS;EACnC,CAAA,GACA,WAAW,WAAW,WACrB,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,aAAU;GAAS,WAAW,OAAO;GAAU,aAAU;aAC5D;EACG,CAAA,IACJ,IACA;;CAGR,IAAI,CAAC,UACH,OAAO;CAGT,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,sBAAAA,OAAW,MAAZ;EACe;EACb,eAAe,aAAa,eAAe,QAAQ;EAC7C;YAHR,CAKE,iBAAA,GAAA,kBAAA,IAAA,CAACA,sBAAAA,OAAW,SAAZ;GACE,cAAY;GACZ,WAAW,OAAO;GAClB,uBAAoB;GACpB,aAAU;aAET;EACiB,CAAA,GACpB,iBAAA,GAAA,kBAAA,KAAA,CAACA,sBAAAA,OAAW,QAAZ,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,sBAAAA,OAAW,UAAZ;GAAqB,WAAW,OAAO;GAAU,aAAU;EAA2B,CAAA,GACtF,iBAAA,GAAA,kBAAA,IAAA,CAACA,sBAAAA,OAAW,UAAZ;GAAqB,WAAW,OAAO;GAAU,aAAU;aACzD,iBAAA,GAAA,kBAAA,KAAA,CAACA,sBAAAA,OAAW,OAAZ;IACE,cAAY,OAAO;IACnB,WAAW,OAAO;IAClB,uBAAoB;IACpB,aAAU;cAJZ;KAME,iBAAA,GAAA,kBAAA,IAAA,CAACA,sBAAAA,OAAW,OAAZ;MAAkB,WAAW,OAAO;gBAAQ,OAAO;KAAgC,CAAA;KACnF,iBAAA,GAAA,kBAAA,IAAA,CAACA,sBAAAA,OAAW,OAAZ;MACE,cAAW;MACX,WAAW,OAAO;MAClB,aAAU;gBACX;KAEiB,CAAA;KAClB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;MACO;MACL,WAAW,OAAO;MAClB,aAAU;MACL;MACL,OAAO,EAAE,gBAAgB,SAAS;KACnC,CAAA;IACe;;EACC,CAAA,CACJ,EAAA,CAAA,CACJ;;AAErB,CAAC"}

package/dist/components/image/image.d.cts

@@ -0,0 +1,21 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/image/image.d.ts
+type ImageFit = "contain" | "cover" | "fill" | "none";
+type ImageStatus = "loading" | "loaded" | "error";
+interface ImageProps extends Omit<ComponentPropsWithoutRef<"img">, "children"> {
+  alt: string;
+  aspectRatio?: number;
+  defaultOpen?: boolean;
+  fallback?: ReactNode;
+  fit?: ImageFit;
+  lightbox?: boolean;
+  lightboxLabel?: string;
+  onOpenChange?: (open: boolean) => void;
+  onStatusChange?: (status: ImageStatus) => void;
+  open?: boolean;
+  position?: string;
+}
+declare const Image: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLImageElement>>;
+//#endregion
+export { Image, ImageFit, ImageProps, ImageStatus };
+//# sourceMappingURL=image.d.cts.map

package/dist/components/image/image.d.ts

@@ -0,0 +1,21 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/image/image.d.ts
+type ImageFit = "contain" | "cover" | "fill" | "none";
+type ImageStatus = "loading" | "loaded" | "error";
+interface ImageProps extends Omit<ComponentPropsWithoutRef<"img">, "children"> {
+  alt: string;
+  aspectRatio?: number;
+  defaultOpen?: boolean;
+  fallback?: ReactNode;
+  fit?: ImageFit;
+  lightbox?: boolean;
+  lightboxLabel?: string;
+  onOpenChange?: (open: boolean) => void;
+  onStatusChange?: (status: ImageStatus) => void;
+  open?: boolean;
+  position?: string;
+}
+declare const Image: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLImageElement>>;
+//#endregion
+export { Image, ImageFit, ImageProps, ImageStatus };
+//# sourceMappingURL=image.d.ts.map