@optiaxiom/react 1.9.37 → 1.9.38

package/dist/esm/packages/react/src/card/Card.js

@@ -1,20 +1,34 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { useId } from '@radix-ui/react-id';
-import { forwardRef } from 'react';
-import '../actions/ActionsContent.js';
-import { ActionsRoot } from '../actions/ActionsRoot.js';
-import { Group } from '../group/Group.js';
-import { card } from './Card-css.js';
-import { CardProvider } from './CardContext.js';
-
-const Card = forwardRef(
-  ({ children, className, ...props }, ref) => {
-    const descriptionId = useId();
-    const labelId = useId();
-    return /* @__PURE__ */ jsx(CardProvider, { descriptionId, labelId, children: /* @__PURE__ */ jsx(ActionsRoot, { asChild: true, children: /* @__PURE__ */ jsx(Group, { ref, ...card({}, className), ...props, children }) }) });
-  }
-);
+import { Group } from "../group/Group.js";
+import { ActionsRoot } from "../actions/ActionsRoot.js";
+import { card } from "./Card-css.js";
+import { CardProvider } from "./CardContext.js";
+import { useId } from "@radix-ui/react-id";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/card/Card.tsx
+/**
+* Generic container for grouping related components together.
+*
+* @group Card
+* @since 1.6.0
+* @category container
+*/
+const Card = forwardRef(({ children, className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(CardProvider, {
+		descriptionId: useId(),
+		labelId: useId(),
+		children: /* @__PURE__ */ jsx(ActionsRoot, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Group, {
+				ref,
+				...card({}, className),
+				...props,
+				children
+			})
+		})
+	});
+});
 Card.displayName = "@optiaxiom/react/Card";
-
+//#endregion
 export { Card };

package/dist/esm/packages/react/src/card/CardAction.js

@@ -1,14 +1,19 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { ActionsContent } from '../actions/ActionsContent.js';
-import '../actions/ActionsRoot.js';
-
-const CardAction = forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(ActionsContent, { flex: "1", ref, ...props, children });
-  }
-);
+import { ActionsContent } from "../actions/ActionsContent.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/card/CardAction.tsx
+/**
+* @group Card
+*/
+const CardAction = forwardRef(({ children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(ActionsContent, {
+		flex: "1",
+		ref,
+		...props,
+		children
+	});
+});
 CardAction.displayName = "@optiaxiom/react/CardAction";
-
+//#endregion
 export { CardAction };

package/dist/esm/packages/react/src/card/CardCheckbox-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-vDw4DFSx.css';
-import './../../../../assets/src/card/CardCheckbox.css.ts.vanilla-B5dRW86I.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var checkbox = recipeRuntime({base:['_6crsht']});
-
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-D2KEETGI.css";
+import "./../../../../assets/src/card/CardCheckbox.css.ts.vanilla-yIkzexfh.css";
+//#region src/card/CardCheckbox.css.ts
+var checkbox = recipeRuntime({ base: ["pbxb6c"] });
+//#endregion
 export { checkbox };

package/dist/esm/packages/react/src/card/CardCheckbox.js

@@ -1,44 +1,40 @@
 "use client";
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useId } from '@radix-ui/react-id';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import clsx from 'clsx';
-import { forwardRef } from 'react';
-import { Checkbox } from '../checkbox/Checkbox.js';
-import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
-import { checkbox } from './CardCheckbox-css.js';
-import { useCardContext } from './CardContext.js';
-
-const CardCheckbox = forwardRef(
-  ({ className, onChange, ...props }, ref) => {
-    const labelPrefixId = useId();
-    const { labelId } = useCardContext("@optiaxiom/react/CardCheckbox");
-    const [checked, setChecked] = useControllableState({
-      caller: "@optiaxiom/react/CardCheckbox",
-      defaultProp: props.defaultChecked,
-      prop: props.checked
-    });
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(VisuallyHidden, { id: labelPrefixId, children: [
-        "Check to ",
-        checked ? "unselect" : "select"
-      ] }),
-      /* @__PURE__ */ jsx(
-        Checkbox,
-        {
-          "aria-labelledby": clsx(labelPrefixId, labelId),
-          onChange: (event) => {
-            onChange?.(event);
-            setChecked(event.target.checked);
-          },
-          ref,
-          ...checkbox({}, className),
-          ...props
-        }
-      )
-    ] });
-  }
-);
+import { VisuallyHidden } from "../visually-hidden/VisuallyHidden.js";
+import { Checkbox } from "../checkbox/Checkbox.js";
+import { useCardContext } from "./CardContext.js";
+import { checkbox } from "./CardCheckbox-css.js";
+import { useId } from "@radix-ui/react-id";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+//#region src/card/CardCheckbox.tsx
+/**
+* @extends Checkbox
+* @group Card
+*/
+const CardCheckbox = forwardRef(({ className, onChange, ...props }, ref) => {
+	const labelPrefixId = useId();
+	const { labelId } = useCardContext("@optiaxiom/react/CardCheckbox");
+	const [checked, setChecked] = useControllableState({
+		caller: "@optiaxiom/react/CardCheckbox",
+		defaultProp: props.defaultChecked,
+		prop: props.checked
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(VisuallyHidden, {
+		id: labelPrefixId,
+		children: ["Check to ", checked ? "unselect" : "select"]
+	}), /* @__PURE__ */ jsx(Checkbox, {
+		"aria-labelledby": clsx(labelPrefixId, labelId),
+		onChange: (event) => {
+			onChange?.(event);
+			setChecked(event.target.checked);
+		},
+		ref,
+		...checkbox({}, className),
+		...props
+	})] });
+});
 CardCheckbox.displayName = "@optiaxiom/react/CardCheckbox";
-
+//#endregion
 export { CardCheckbox };

package/dist/esm/packages/react/src/card/CardContext.js

@@ -1,6 +1,7 @@
 "use client";
-import { createContext } from '@radix-ui/react-context';
-
+"use client";
+import { createContext } from "@radix-ui/react-context";
+//#region src/card/CardContext.ts
 const [CardProvider, useCardContext] = createContext("@optiaxiom/react/Card");
-
+//#endregion
 export { CardProvider, useCardContext };

package/dist/esm/packages/react/src/card/CardFooter.js

@@ -1,15 +1,20 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-
-const CardFooter = forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Box, { alignSelf: "stretch", mt: "auto", ref, ...props, children });
-  }
-);
+import { Box } from "../box/Box.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/card/CardFooter.tsx
+/**
+* @group Card
+*/
+const CardFooter = forwardRef(({ children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Box, {
+		alignSelf: "stretch",
+		mt: "auto",
+		ref,
+		...props,
+		children
+	});
+});
 CardFooter.displayName = "@optiaxiom/react/CardFooter";
-
+//#endregion
 export { CardFooter };

package/dist/esm/packages/react/src/card/CardHeader-css.js

@@ -1,9 +1,22 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-vDw4DFSx.css';
-import './../../../../assets/src/card/CardHeader.css.ts.vanilla-BdyaaGFm.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var addon$2 = recipeRuntime({base:[{flex:'none',gap:'8'}],variants:{slot:{after:'cxcug8',before:'_1tafhnn'}}});
-var content$2 = recipeRuntime({base:[{flex:'1'},'_1n3gnvv']});
-var header = recipeRuntime({base:[{alignSelf:'stretch',gap:'12',justifyContent:'space-between'},'_1ks1d2b']});
-
-export { addon$2 as addon, content$2 as content, header };
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-D2KEETGI.css";
+import "./../../../../assets/src/card/CardHeader.css.ts.vanilla-BvtgzziL.css";
+//#region src/card/CardHeader.css.ts
+var addon = recipeRuntime({
+	base: [{
+		flex: "none",
+		gap: "8"
+	}],
+	variants: { slot: {
+		after: "kez7zt",
+		before: "uapjra"
+	} }
+});
+var content = recipeRuntime({ base: [{ flex: "1" }, "_1lp1gd9"] });
+var header = recipeRuntime({ base: [{
+	alignSelf: "stretch",
+	gap: "12",
+	justifyContent: "space-between"
+}, "_1hbag21"] });
+//#endregion
+export { addon, content, header };

package/dist/esm/packages/react/src/card/CardHeader.js

@@ -1,49 +1,50 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { Group } from '../group/Group.js';
-import { Heading } from '../heading/Heading.js';
-import { useCardContext } from './CardContext.js';
-import { content, addon, header } from './CardHeader-css.js';
-
-const CardHeader = forwardRef(
-  ({
-    addonAfter,
-    addonBefore,
-    children,
-    className,
-    description,
-    lineClamp,
-    truncate,
-    ...props
-  }, ref) => {
-    const { descriptionId, labelId } = useCardContext(
-      "@optiaxiom/react/CardHeader"
-    );
-    return /* @__PURE__ */ jsxs(Group, { ref, ...header({}, className), ...props, children: [
-      /* @__PURE__ */ jsxs(Box, { ...content(), children: [
-        /* @__PURE__ */ jsx(
-          Heading,
-          {
-            fontSize: "md",
-            fontWeight: "500",
-            id: labelId,
-            level: "2",
-            lineClamp,
-            truncate,
-            children
-          }
-        ),
-        description && /* @__PURE__ */ jsx(Box, { color: "fg.tertiary", fontSize: "sm", id: descriptionId, children: description })
-      ] }),
-      addonBefore && /* @__PURE__ */ jsx(Group, { ...addon({ slot: "before" }), children: addonBefore }),
-      addonAfter && /* @__PURE__ */ jsx(Group, { ...addon({ slot: "after" }), children: addonAfter })
-    ] });
-  }
-);
+import { Box } from "../box/Box.js";
+import { Group } from "../group/Group.js";
+import { Heading } from "../heading/Heading.js";
+import { useCardContext } from "./CardContext.js";
+import { addon, content, header } from "./CardHeader-css.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/card/CardHeader.tsx
+/**
+* @group Card
+*/
+const CardHeader = forwardRef(({ addonAfter, addonBefore, children, className, description, lineClamp, truncate, ...props }, ref) => {
+	const { descriptionId, labelId } = useCardContext("@optiaxiom/react/CardHeader");
+	return /* @__PURE__ */ jsxs(Group, {
+		ref,
+		...header({}, className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs(Box, {
+				...content(),
+				children: [/* @__PURE__ */ jsx(Heading, {
+					fontSize: "md",
+					fontWeight: "500",
+					id: labelId,
+					level: "2",
+					lineClamp,
+					truncate,
+					children
+				}), description && /* @__PURE__ */ jsx(Box, {
+					color: "fg.tertiary",
+					fontSize: "sm",
+					id: descriptionId,
+					children: description
+				})]
+			}),
+			addonBefore && /* @__PURE__ */ jsx(Group, {
+				...addon({ slot: "before" }),
+				children: addonBefore
+			}),
+			addonAfter && /* @__PURE__ */ jsx(Group, {
+				...addon({ slot: "after" }),
+				children: addonAfter
+			})
+		]
+	});
+});
 CardHeader.displayName = "@optiaxiom/react/CardHeader";
-
+//#endregion
 export { CardHeader };

package/dist/esm/packages/react/src/card/CardImage-css.js

@@ -1,6 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-vDw4DFSx.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var image = recipeRuntime({base:{objectFit:'cover',rounded:'inherit',size:'full'}});
-
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-D2KEETGI.css";
+//#region src/card/CardImage.css.ts
+var image = recipeRuntime({ base: {
+	objectFit: "cover",
+	rounded: "inherit",
+	size: "full"
+} });
+//#endregion
 export { image };

package/dist/esm/packages/react/src/card/CardImage.js

@@ -1,16 +1,24 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { image } from './CardImage-css.js';
-
-const CardImage = forwardRef(
-  ({ alt = "", asChild, children, className, src, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...image({}, className), ...props, children: asChild ? children : /* @__PURE__ */ jsx("img", { alt, src }) });
-  }
-);
+import { Box } from "../box/Box.js";
+import { image } from "./CardImage-css.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/card/CardImage.tsx
+/**
+* @group Card
+*/
+const CardImage = forwardRef(({ alt = "", asChild, children, className, src, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Box, {
+		asChild: true,
+		ref,
+		...image({}, className),
+		...props,
+		children: asChild ? children : /* @__PURE__ */ jsx("img", {
+			alt,
+			src
+		})
+	});
+});
 CardImage.displayName = "@optiaxiom/react/CardImage";
-
+//#endregion
 export { CardImage };

package/dist/esm/packages/react/src/card/CardLink.js

@@ -1,13 +1,20 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Link } from '../link/Link.js';
-
-const CardLink = forwardRef(
-  ({ ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Link, { appearance: "subtle", cover: true, ref, ...props });
-  }
-);
+import { Link } from "../link/Link.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/card/CardLink.tsx
+/**
+* @extends Link
+* @group Card
+*/
+const CardLink = forwardRef(({ ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Link, {
+		appearance: "subtle",
+		cover: true,
+		ref,
+		...props
+	});
+});
 CardLink.displayName = "@optiaxiom/react/CardLink";
-
+//#endregion
 export { CardLink };

package/dist/esm/packages/react/src/card/CardPreview-css.js

@@ -1,8 +1,15 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-vDw4DFSx.css';
-import './../../../../assets/src/card/CardPreview.css.ts.vanilla-B3lBpMAR.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var overlay = recipeRuntime({base:[{display:'flex',flexWrap:'wrap'},'_1c7r952']});
-var preview = recipeRuntime({base:[{alignSelf:'stretch',display:'grid',placeItems:'center'},'_1kb8xh8']});
-
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-D2KEETGI.css";
+import "./../../../../assets/src/card/CardPreview.css.ts.vanilla-SrK1qh3G.css";
+//#region src/card/CardPreview.css.ts
+var overlay = recipeRuntime({ base: [{
+	display: "flex",
+	flexWrap: "wrap"
+}, "ig7a5s"] });
+var preview = recipeRuntime({ base: [{
+	alignSelf: "stretch",
+	display: "grid",
+	placeItems: "center"
+}, "_17tbul0"] });
+//#endregion
 export { overlay, preview };

package/dist/esm/packages/react/src/card/CardPreview.js

@@ -1,69 +1,53 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { overlay, preview } from './CardPreview-css.js';
-
-const CardPreview = forwardRef(
-  ({
-    addonBottomLeft,
-    addonBottomRight,
-    addonTopLeft,
-    addonTopRight,
-    children,
-    className,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsxs(Box, { ref, ...preview({}, className), ...props, children: [
-      children,
-      (addonTopLeft || addonTopRight) && /* @__PURE__ */ jsxs(Box, { ...overlay(), children: [
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            alignItems: "center",
-            alignSelf: "start",
-            display: "flex",
-            justifyContent: "space-between",
-            children: addonTopLeft
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            alignItems: "center",
-            alignSelf: "start",
-            display: "flex",
-            justifyContent: "space-between",
-            children: addonTopRight
-          }
-        ),
-        /* @__PURE__ */ jsx(Box, { w: "full" }),
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            alignItems: "center",
-            alignSelf: "end",
-            display: "flex",
-            justifyContent: "space-between",
-            children: addonBottomLeft
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            alignItems: "center",
-            alignSelf: "end",
-            display: "flex",
-            justifyContent: "space-between",
-            children: addonBottomRight
-          }
-        )
-      ] })
-    ] });
-  }
-);
+import { Box } from "../box/Box.js";
+import { overlay, preview } from "./CardPreview-css.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/card/CardPreview.tsx
+/**
+* @group Card
+*/
+const CardPreview = forwardRef(({ addonBottomLeft, addonBottomRight, addonTopLeft, addonTopRight, children, className, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs(Box, {
+		ref,
+		...preview({}, className),
+		...props,
+		children: [children, (addonTopLeft || addonTopRight) && /* @__PURE__ */ jsxs(Box, {
+			...overlay(),
+			children: [
+				/* @__PURE__ */ jsx(Box, {
+					alignItems: "center",
+					alignSelf: "start",
+					display: "flex",
+					justifyContent: "space-between",
+					children: addonTopLeft
+				}),
+				/* @__PURE__ */ jsx(Box, {
+					alignItems: "center",
+					alignSelf: "start",
+					display: "flex",
+					justifyContent: "space-between",
+					children: addonTopRight
+				}),
+				/* @__PURE__ */ jsx(Box, { w: "full" }),
+				/* @__PURE__ */ jsx(Box, {
+					alignItems: "center",
+					alignSelf: "end",
+					display: "flex",
+					justifyContent: "space-between",
+					children: addonBottomLeft
+				}),
+				/* @__PURE__ */ jsx(Box, {
+					alignItems: "center",
+					alignSelf: "end",
+					display: "flex",
+					justifyContent: "space-between",
+					children: addonBottomRight
+				})
+			]
+		})]
+	});
+});
 CardPreview.displayName = "@optiaxiom/react/CardPreview";
-
+//#endregion
 export { CardPreview };