jaci-ui 0.6.3 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.7.0
+
+### Minor Changes
+
+- fb498f5: Add Code, Kbd, AspectRatio, Image, Figure and Stat/StatGroup, with configurable image lightboxes and expanded content, feedback, card and typography APIs.
+
 ## 0.6.3
 
 ### Patch Changes

package/README.md

@@ -54,6 +54,37 @@ export function Example() {
 }
 ```
 
+Content and visual utilities are framework-agnostic and server-safe where possible:
+
+```tsx
+import { AspectRatio, Code, Figure, Image, Kbd, Quote, Stat, StatGroup } from "jaci-ui";
+
+<Code variant="block" language="tsx">const value = 42;</Code>;
+<Kbd>⌘K</Kbd>;
+<Quote author="Alan Kay" source="Alan Kay">The best way to predict the future is to invent it.</Quote>;
+<AspectRatio ratio={16 / 9}><Image src="/cover.jpg" alt="Cover" fit="cover" /></AspectRatio>;
+<Figure.Root lightbox>
+  <Figure.Image src="/cover.jpg" alt="Cover" />
+  <Figure.Caption>Project cover</Figure.Caption>
+</Figure.Root>;
+<StatGroup.Root columns={3}>
+  <Stat.Root tone="success">
+    <Stat.Label>Revenue</Stat.Label>
+    <Stat.Value>$12.4k</Stat.Value>
+    <Stat.Trend direction="up">+18%</Stat.Trend>
+  </Stat.Root>
+</StatGroup.Root>;
+```
+
+`AspectRatio` fills the available inline size of its parent. In shrink-to-fit or flex
+layouts, give the parent an explicit `width`/`max-width` so the ratio has a measurable
+size.
+
+`Code` is intentionally presentation-only; compose it with `Copyable` when users should be able
+to copy a command. `Image` uses the native `<img>` element, accepts a React fallback and can opt
+into a focusable blurred lightbox with `lightbox`. `Figure` adds a semantic caption that remains
+visible in the expanded image preview, without requiring a framework-specific image optimizer.
+
 Interactive components support controlled and uncontrolled state where appropriate. For example,
 `value`/`onValueChange` can be paired with `defaultValue` when the application does not need to
 own the state. `ColorPicker.Palette` supports pointer dragging, keyboard arrows and a visible

package/dist/components/alert/alert.cjs

@@ -60,14 +60,24 @@ const AlertDescription = (0, react.forwardRef)(function AlertDescription({ class
 		"data-slot": "alert-description"
 	});
 });
+const AlertActions = (0, react.forwardRef)(function AlertActions({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		ref,
+		className: require_cx.cx(useAlertStyles().actions, className),
+		"data-slot": "alert-actions"
+	});
+});
 const Alert = {
 	Root: AlertRoot,
 	Icon: AlertIcon,
 	Title: AlertTitle,
-	Description: AlertDescription
+	Description: AlertDescription,
+	Actions: AlertActions
 };
 //#endregion
 exports.Alert = Alert;
+exports.AlertActions = AlertActions;
 exports.AlertDescription = AlertDescription;
 exports.AlertIcon = AlertIcon;
 exports.AlertRoot = AlertRoot;

package/dist/components/alert/alert.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"alert.cjs","names":["alert","cx"],"sources":["../../../src/components/alert/alert.tsx"],"sourcesContent":["import { createContext, forwardRef, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { alert } from \"../../styled-system/recipes\";\n\nexport type AlertTone = \"info\" | \"success\" | \"warning\" | \"danger\";\n\nconst AlertToneContext = createContext<AlertTone>(\"info\");\n\nfunction useAlertStyles() {\n  return alert({ tone: useContext(AlertToneContext) });\n}\n\nconst iconByTone: Record<AlertTone, string> = {\n  danger: \"!\",\n  info: \"i\",\n  success: \"✓\",\n  warning: \"!\",\n};\n\nexport interface AlertRootProps extends ComponentPropsWithoutRef<\"div\"> {\n  tone?: AlertTone;\n}\n\n/**\n * An SSR-safe status message. Informational alerts use a polite live region;\n * warnings and errors default to the assertive `alert` role.\n */\nexport const AlertRoot = forwardRef<HTMLDivElement, AlertRootProps>(function AlertRoot(\n  { className, role, tone = \"info\", ...props },\n  ref,\n) {\n  const styles = alert({ tone });\n  const defaultRole = tone === \"danger\" || tone === \"warning\" ? \"alert\" : \"status\";\n\n  return (\n    <AlertToneContext.Provider value={tone}>\n      <div\n        {...props}\n        ref={ref}\n        className={cx(styles.root, className)}\n        data-jaci-component=\"alert\"\n        data-jaci-tone={tone}\n        data-slot=\"alert\"\n        role={role ?? defaultRole}\n      />\n    </AlertToneContext.Provider>\n  );\n});\n\nexport type AlertIconProps = ComponentPropsWithoutRef<\"span\">;\n\nexport const AlertIcon = forwardRef<HTMLSpanElement, AlertIconProps>(function AlertIcon(\n  { children, className, ...props },\n  ref,\n) {\n  const tone = useContext(AlertToneContext);\n\n  return (\n    <span\n      {...props}\n      aria-hidden=\"true\"\n      ref={ref}\n      className={cx(useAlertStyles().icon, className)}\n      data-slot=\"alert-icon\"\n    >\n      {children ?? iconByTone[tone]}\n    </span>\n  );\n});\n\nexport type AlertTitleProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const AlertTitle = forwardRef<HTMLDivElement, AlertTitleProps>(function AlertTitle(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cx(useAlertStyles().title, className)}\n      data-slot=\"alert-title\"\n    />\n  );\n});\n\nexport type AlertDescriptionProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const AlertDescription = forwardRef<HTMLDivElement, AlertDescriptionProps>(\n  function AlertDescription({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(useAlertStyles().description, className)}\n        data-slot=\"alert-description\"\n      />\n    );\n  },\n);\n\nexport const Alert = {\n  Root: AlertRoot,\n  Icon: AlertIcon,\n  Title: AlertTitle,\n  Description: AlertDescription,\n};\n"],"mappings":";;;;;AAQA,MAAM,oBAAA,GAAA,MAAA,cAAA,CAA4C,MAAM;AAExD,SAAS,iBAAiB;CACxB,OAAOA,cAAAA,MAAM,EAAE,OAAA,GAAA,MAAA,WAAA,CAAiB,gBAAgB,EAAE,CAAC;AACrD;AAEA,MAAM,aAAwC;CAC5C,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;AACX;;;;;AAUA,MAAa,aAAA,GAAA,MAAA,WAAA,CAAuD,SAAS,UAC3E,EAAE,WAAW,MAAM,OAAO,QAAQ,GAAG,SACrC,KACA;CACA,MAAM,SAASA,cAAAA,MAAM,EAAE,KAAK,CAAC;CAC7B,MAAM,cAAc,SAAS,YAAY,SAAS,YAAY,UAAU;CAExE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,iBAAiB,UAAlB;EAA2B,OAAO;YAChC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,GAAI;GACC;GACL,WAAWC,WAAAA,GAAG,OAAO,MAAM,SAAS;GACpC,uBAAoB;GACpB,kBAAgB;GAChB,aAAU;GACV,MAAM,QAAQ;EACf,CAAA;CACwB,CAAA;AAE/B,CAAC;AAID,MAAa,aAAA,GAAA,MAAA,WAAA,CAAwD,SAAS,UAC5E,EAAE,UAAU,WAAW,GAAG,SAC1B,KACA;CACA,MAAM,QAAA,GAAA,MAAA,WAAA,CAAkB,gBAAgB;CAExC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,GAAI;EACJ,eAAY;EACP;EACL,WAAWA,WAAAA,GAAG,eAAe,CAAC,CAAC,MAAM,SAAS;EAC9C,aAAU;YAET,YAAY,WAAW;CACpB,CAAA;AAEV,CAAC;AAID,MAAa,cAAA,GAAA,MAAA,WAAA,CAAyD,SAAS,WAC7E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACC;EACL,WAAWA,WAAAA,GAAG,eAAe,CAAC,CAAC,OAAO,SAAS;EAC/C,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,oBAAA,GAAA,MAAA,WAAA,CACX,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAS,KAAK;CACtD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACC;EACL,WAAWA,WAAAA,GAAG,eAAe,CAAC,CAAC,aAAa,SAAS;EACrD,aAAU;CACX,CAAA;AAEL,CACF;AAEA,MAAa,QAAQ;CACnB,MAAM;CACN,MAAM;CACN,OAAO;CACP,aAAa;AACf"}
+{"version":3,"file":"alert.cjs","names":["alert","cx"],"sources":["../../../src/components/alert/alert.tsx"],"sourcesContent":["import { createContext, forwardRef, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { alert } from \"../../styled-system/recipes\";\n\nexport type AlertTone = \"info\" | \"success\" | \"warning\" | \"danger\";\n\nconst AlertToneContext = createContext<AlertTone>(\"info\");\n\nfunction useAlertStyles() {\n  return alert({ tone: useContext(AlertToneContext) });\n}\n\nconst iconByTone: Record<AlertTone, string> = {\n  danger: \"!\",\n  info: \"i\",\n  success: \"✓\",\n  warning: \"!\",\n};\n\nexport interface AlertRootProps extends ComponentPropsWithoutRef<\"div\"> {\n  tone?: AlertTone;\n}\n\n/**\n * An SSR-safe status message. Informational alerts use a polite live region;\n * warnings and errors default to the assertive `alert` role.\n */\nexport const AlertRoot = forwardRef<HTMLDivElement, AlertRootProps>(function AlertRoot(\n  { className, role, tone = \"info\", ...props },\n  ref,\n) {\n  const styles = alert({ tone });\n  const defaultRole = tone === \"danger\" || tone === \"warning\" ? \"alert\" : \"status\";\n\n  return (\n    <AlertToneContext.Provider value={tone}>\n      <div\n        {...props}\n        ref={ref}\n        className={cx(styles.root, className)}\n        data-jaci-component=\"alert\"\n        data-jaci-tone={tone}\n        data-slot=\"alert\"\n        role={role ?? defaultRole}\n      />\n    </AlertToneContext.Provider>\n  );\n});\n\nexport type AlertIconProps = ComponentPropsWithoutRef<\"span\">;\n\nexport const AlertIcon = forwardRef<HTMLSpanElement, AlertIconProps>(function AlertIcon(\n  { children, className, ...props },\n  ref,\n) {\n  const tone = useContext(AlertToneContext);\n\n  return (\n    <span\n      {...props}\n      aria-hidden=\"true\"\n      ref={ref}\n      className={cx(useAlertStyles().icon, className)}\n      data-slot=\"alert-icon\"\n    >\n      {children ?? iconByTone[tone]}\n    </span>\n  );\n});\n\nexport type AlertTitleProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const AlertTitle = forwardRef<HTMLDivElement, AlertTitleProps>(function AlertTitle(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cx(useAlertStyles().title, className)}\n      data-slot=\"alert-title\"\n    />\n  );\n});\n\nexport type AlertDescriptionProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const AlertDescription = forwardRef<HTMLDivElement, AlertDescriptionProps>(\n  function AlertDescription({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(useAlertStyles().description, className)}\n        data-slot=\"alert-description\"\n      />\n    );\n  },\n);\n\nexport type AlertActionsProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const AlertActions = forwardRef<HTMLDivElement, AlertActionsProps>(function AlertActions(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cx(useAlertStyles().actions, className)}\n      data-slot=\"alert-actions\"\n    />\n  );\n});\n\nexport const Alert = {\n  Root: AlertRoot,\n  Icon: AlertIcon,\n  Title: AlertTitle,\n  Description: AlertDescription,\n  Actions: AlertActions,\n};\n"],"mappings":";;;;;AAQA,MAAM,oBAAA,GAAA,MAAA,cAAA,CAA4C,MAAM;AAExD,SAAS,iBAAiB;CACxB,OAAOA,cAAAA,MAAM,EAAE,OAAA,GAAA,MAAA,WAAA,CAAiB,gBAAgB,EAAE,CAAC;AACrD;AAEA,MAAM,aAAwC;CAC5C,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;AACX;;;;;AAUA,MAAa,aAAA,GAAA,MAAA,WAAA,CAAuD,SAAS,UAC3E,EAAE,WAAW,MAAM,OAAO,QAAQ,GAAG,SACrC,KACA;CACA,MAAM,SAASA,cAAAA,MAAM,EAAE,KAAK,CAAC;CAC7B,MAAM,cAAc,SAAS,YAAY,SAAS,YAAY,UAAU;CAExE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,iBAAiB,UAAlB;EAA2B,OAAO;YAChC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,GAAI;GACC;GACL,WAAWC,WAAAA,GAAG,OAAO,MAAM,SAAS;GACpC,uBAAoB;GACpB,kBAAgB;GAChB,aAAU;GACV,MAAM,QAAQ;EACf,CAAA;CACwB,CAAA;AAE/B,CAAC;AAID,MAAa,aAAA,GAAA,MAAA,WAAA,CAAwD,SAAS,UAC5E,EAAE,UAAU,WAAW,GAAG,SAC1B,KACA;CACA,MAAM,QAAA,GAAA,MAAA,WAAA,CAAkB,gBAAgB;CAExC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,GAAI;EACJ,eAAY;EACP;EACL,WAAWA,WAAAA,GAAG,eAAe,CAAC,CAAC,MAAM,SAAS;EAC9C,aAAU;YAET,YAAY,WAAW;CACpB,CAAA;AAEV,CAAC;AAID,MAAa,cAAA,GAAA,MAAA,WAAA,CAAyD,SAAS,WAC7E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACC;EACL,WAAWA,WAAAA,GAAG,eAAe,CAAC,CAAC,OAAO,SAAS;EAC/C,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,oBAAA,GAAA,MAAA,WAAA,CACX,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAS,KAAK;CACtD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACC;EACL,WAAWA,WAAAA,GAAG,eAAe,CAAC,CAAC,aAAa,SAAS;EACrD,aAAU;CACX,CAAA;AAEL,CACF;AAIA,MAAa,gBAAA,GAAA,MAAA,WAAA,CAA6D,SAAS,aACjF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACC;EACL,WAAWA,WAAAA,GAAG,eAAe,CAAC,CAAC,SAAS,SAAS;EACjD,aAAU;CACX,CAAA;AAEL,CAAC;AAED,MAAa,QAAQ;CACnB,MAAM;CACN,MAAM;CACN,OAAO;CACP,aAAa;CACb,SAAS;AACX"}

package/dist/components/alert/alert.d.cts

@@ -15,12 +15,15 @@ type AlertTitleProps = ComponentPropsWithoutRef<"div">;
 declare const AlertTitle: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 type AlertDescriptionProps = ComponentPropsWithoutRef<"div">;
 declare const AlertDescription: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type AlertActionsProps = ComponentPropsWithoutRef<"div">;
+declare const AlertActions: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare const Alert: {
   Root: import("react").ForwardRefExoticComponent<AlertRootProps & import("react").RefAttributes<HTMLDivElement>>;
   Icon: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
   Title: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Description: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Actions: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
 //#endregion
-export { Alert, AlertDescription, AlertDescriptionProps, AlertIcon, AlertIconProps, AlertRoot, AlertRootProps, AlertTitle, AlertTitleProps, AlertTone };
+export { Alert, AlertActions, AlertActionsProps, AlertDescription, AlertDescriptionProps, AlertIcon, AlertIconProps, AlertRoot, AlertRootProps, AlertTitle, AlertTitleProps, AlertTone };
 //# sourceMappingURL=alert.d.cts.map

package/dist/components/alert/alert.d.ts

@@ -15,12 +15,15 @@ type AlertTitleProps = ComponentPropsWithoutRef<"div">;
 declare const AlertTitle: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 type AlertDescriptionProps = ComponentPropsWithoutRef<"div">;
 declare const AlertDescription: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type AlertActionsProps = ComponentPropsWithoutRef<"div">;
+declare const AlertActions: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare const Alert: {
   Root: import("react").ForwardRefExoticComponent<AlertRootProps & import("react").RefAttributes<HTMLDivElement>>;
   Icon: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
   Title: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Description: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Actions: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
 //#endregion
-export { Alert, AlertDescription, AlertDescriptionProps, AlertIcon, AlertIconProps, AlertRoot, AlertRootProps, AlertTitle, AlertTitleProps, AlertTone };
+export { Alert, AlertActions, AlertActionsProps, AlertDescription, AlertDescriptionProps, AlertIcon, AlertIconProps, AlertRoot, AlertRootProps, AlertTitle, AlertTitleProps, AlertTone };
 //# sourceMappingURL=alert.d.ts.map

package/dist/components/alert/alert.js

@@ -60,13 +60,22 @@ const AlertDescription = forwardRef(function AlertDescription({ className, ...pr
 		"data-slot": "alert-description"
 	});
 });
+const AlertActions = forwardRef(function AlertActions({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		className: cx(useAlertStyles().actions, className),
+		"data-slot": "alert-actions"
+	});
+});
 const Alert = {
 	Root: AlertRoot,
 	Icon: AlertIcon,
 	Title: AlertTitle,
-	Description: AlertDescription
+	Description: AlertDescription,
+	Actions: AlertActions
 };
 //#endregion
-export { Alert, AlertDescription, AlertIcon, AlertRoot, AlertTitle };
+export { Alert, AlertActions, AlertDescription, AlertIcon, AlertRoot, AlertTitle };
 
 //# sourceMappingURL=alert.js.map

package/dist/components/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","names":[],"sources":["../../../src/components/alert/alert.tsx"],"sourcesContent":["import { createContext, forwardRef, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { alert } from \"../../styled-system/recipes\";\n\nexport type AlertTone = \"info\" | \"success\" | \"warning\" | \"danger\";\n\nconst AlertToneContext = createContext<AlertTone>(\"info\");\n\nfunction useAlertStyles() {\n  return alert({ tone: useContext(AlertToneContext) });\n}\n\nconst iconByTone: Record<AlertTone, string> = {\n  danger: \"!\",\n  info: \"i\",\n  success: \"✓\",\n  warning: \"!\",\n};\n\nexport interface AlertRootProps extends ComponentPropsWithoutRef<\"div\"> {\n  tone?: AlertTone;\n}\n\n/**\n * An SSR-safe status message. Informational alerts use a polite live region;\n * warnings and errors default to the assertive `alert` role.\n */\nexport const AlertRoot = forwardRef<HTMLDivElement, AlertRootProps>(function AlertRoot(\n  { className, role, tone = \"info\", ...props },\n  ref,\n) {\n  const styles = alert({ tone });\n  const defaultRole = tone === \"danger\" || tone === \"warning\" ? \"alert\" : \"status\";\n\n  return (\n    <AlertToneContext.Provider value={tone}>\n      <div\n        {...props}\n        ref={ref}\n        className={cx(styles.root, className)}\n        data-jaci-component=\"alert\"\n        data-jaci-tone={tone}\n        data-slot=\"alert\"\n        role={role ?? defaultRole}\n      />\n    </AlertToneContext.Provider>\n  );\n});\n\nexport type AlertIconProps = ComponentPropsWithoutRef<\"span\">;\n\nexport const AlertIcon = forwardRef<HTMLSpanElement, AlertIconProps>(function AlertIcon(\n  { children, className, ...props },\n  ref,\n) {\n  const tone = useContext(AlertToneContext);\n\n  return (\n    <span\n      {...props}\n      aria-hidden=\"true\"\n      ref={ref}\n      className={cx(useAlertStyles().icon, className)}\n      data-slot=\"alert-icon\"\n    >\n      {children ?? iconByTone[tone]}\n    </span>\n  );\n});\n\nexport type AlertTitleProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const AlertTitle = forwardRef<HTMLDivElement, AlertTitleProps>(function AlertTitle(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cx(useAlertStyles().title, className)}\n      data-slot=\"alert-title\"\n    />\n  );\n});\n\nexport type AlertDescriptionProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const AlertDescription = forwardRef<HTMLDivElement, AlertDescriptionProps>(\n  function AlertDescription({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(useAlertStyles().description, className)}\n        data-slot=\"alert-description\"\n      />\n    );\n  },\n);\n\nexport const Alert = {\n  Root: AlertRoot,\n  Icon: AlertIcon,\n  Title: AlertTitle,\n  Description: AlertDescription,\n};\n"],"mappings":";;;;;AAQA,MAAM,mBAAmB,cAAyB,MAAM;AAExD,SAAS,iBAAiB;CACxB,OAAO,MAAM,EAAE,MAAM,WAAW,gBAAgB,EAAE,CAAC;AACrD;AAEA,MAAM,aAAwC;CAC5C,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;AACX;;;;;AAUA,MAAa,YAAY,WAA2C,SAAS,UAC3E,EAAE,WAAW,MAAM,OAAO,QAAQ,GAAG,SACrC,KACA;CACA,MAAM,SAAS,MAAM,EAAE,KAAK,CAAC;CAC7B,MAAM,cAAc,SAAS,YAAY,SAAS,YAAY,UAAU;CAExE,OACE,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO;YAChC,oBAAC,OAAD;GACE,GAAI;GACC;GACL,WAAW,GAAG,OAAO,MAAM,SAAS;GACpC,uBAAoB;GACpB,kBAAgB;GAChB,aAAU;GACV,MAAM,QAAQ;EACf,CAAA;CACwB,CAAA;AAE/B,CAAC;AAID,MAAa,YAAY,WAA4C,SAAS,UAC5E,EAAE,UAAU,WAAW,GAAG,SAC1B,KACA;CACA,MAAM,OAAO,WAAW,gBAAgB;CAExC,OACE,oBAAC,QAAD;EACE,GAAI;EACJ,eAAY;EACP;EACL,WAAW,GAAG,eAAe,CAAC,CAAC,MAAM,SAAS;EAC9C,aAAU;YAET,YAAY,WAAW;CACpB,CAAA;AAEV,CAAC;AAID,MAAa,aAAa,WAA4C,SAAS,WAC7E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,eAAe,CAAC,CAAC,OAAO,SAAS;EAC/C,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAS,KAAK;CACtD,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,eAAe,CAAC,CAAC,aAAa,SAAS;EACrD,aAAU;CACX,CAAA;AAEL,CACF;AAEA,MAAa,QAAQ;CACnB,MAAM;CACN,MAAM;CACN,OAAO;CACP,aAAa;AACf"}
+{"version":3,"file":"alert.js","names":[],"sources":["../../../src/components/alert/alert.tsx"],"sourcesContent":["import { createContext, forwardRef, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { alert } from \"../../styled-system/recipes\";\n\nexport type AlertTone = \"info\" | \"success\" | \"warning\" | \"danger\";\n\nconst AlertToneContext = createContext<AlertTone>(\"info\");\n\nfunction useAlertStyles() {\n  return alert({ tone: useContext(AlertToneContext) });\n}\n\nconst iconByTone: Record<AlertTone, string> = {\n  danger: \"!\",\n  info: \"i\",\n  success: \"✓\",\n  warning: \"!\",\n};\n\nexport interface AlertRootProps extends ComponentPropsWithoutRef<\"div\"> {\n  tone?: AlertTone;\n}\n\n/**\n * An SSR-safe status message. Informational alerts use a polite live region;\n * warnings and errors default to the assertive `alert` role.\n */\nexport const AlertRoot = forwardRef<HTMLDivElement, AlertRootProps>(function AlertRoot(\n  { className, role, tone = \"info\", ...props },\n  ref,\n) {\n  const styles = alert({ tone });\n  const defaultRole = tone === \"danger\" || tone === \"warning\" ? \"alert\" : \"status\";\n\n  return (\n    <AlertToneContext.Provider value={tone}>\n      <div\n        {...props}\n        ref={ref}\n        className={cx(styles.root, className)}\n        data-jaci-component=\"alert\"\n        data-jaci-tone={tone}\n        data-slot=\"alert\"\n        role={role ?? defaultRole}\n      />\n    </AlertToneContext.Provider>\n  );\n});\n\nexport type AlertIconProps = ComponentPropsWithoutRef<\"span\">;\n\nexport const AlertIcon = forwardRef<HTMLSpanElement, AlertIconProps>(function AlertIcon(\n  { children, className, ...props },\n  ref,\n) {\n  const tone = useContext(AlertToneContext);\n\n  return (\n    <span\n      {...props}\n      aria-hidden=\"true\"\n      ref={ref}\n      className={cx(useAlertStyles().icon, className)}\n      data-slot=\"alert-icon\"\n    >\n      {children ?? iconByTone[tone]}\n    </span>\n  );\n});\n\nexport type AlertTitleProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const AlertTitle = forwardRef<HTMLDivElement, AlertTitleProps>(function AlertTitle(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cx(useAlertStyles().title, className)}\n      data-slot=\"alert-title\"\n    />\n  );\n});\n\nexport type AlertDescriptionProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const AlertDescription = forwardRef<HTMLDivElement, AlertDescriptionProps>(\n  function AlertDescription({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(useAlertStyles().description, className)}\n        data-slot=\"alert-description\"\n      />\n    );\n  },\n);\n\nexport type AlertActionsProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const AlertActions = forwardRef<HTMLDivElement, AlertActionsProps>(function AlertActions(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cx(useAlertStyles().actions, className)}\n      data-slot=\"alert-actions\"\n    />\n  );\n});\n\nexport const Alert = {\n  Root: AlertRoot,\n  Icon: AlertIcon,\n  Title: AlertTitle,\n  Description: AlertDescription,\n  Actions: AlertActions,\n};\n"],"mappings":";;;;;AAQA,MAAM,mBAAmB,cAAyB,MAAM;AAExD,SAAS,iBAAiB;CACxB,OAAO,MAAM,EAAE,MAAM,WAAW,gBAAgB,EAAE,CAAC;AACrD;AAEA,MAAM,aAAwC;CAC5C,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;AACX;;;;;AAUA,MAAa,YAAY,WAA2C,SAAS,UAC3E,EAAE,WAAW,MAAM,OAAO,QAAQ,GAAG,SACrC,KACA;CACA,MAAM,SAAS,MAAM,EAAE,KAAK,CAAC;CAC7B,MAAM,cAAc,SAAS,YAAY,SAAS,YAAY,UAAU;CAExE,OACE,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO;YAChC,oBAAC,OAAD;GACE,GAAI;GACC;GACL,WAAW,GAAG,OAAO,MAAM,SAAS;GACpC,uBAAoB;GACpB,kBAAgB;GAChB,aAAU;GACV,MAAM,QAAQ;EACf,CAAA;CACwB,CAAA;AAE/B,CAAC;AAID,MAAa,YAAY,WAA4C,SAAS,UAC5E,EAAE,UAAU,WAAW,GAAG,SAC1B,KACA;CACA,MAAM,OAAO,WAAW,gBAAgB;CAExC,OACE,oBAAC,QAAD;EACE,GAAI;EACJ,eAAY;EACP;EACL,WAAW,GAAG,eAAe,CAAC,CAAC,MAAM,SAAS;EAC9C,aAAU;YAET,YAAY,WAAW;CACpB,CAAA;AAEV,CAAC;AAID,MAAa,aAAa,WAA4C,SAAS,WAC7E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,eAAe,CAAC,CAAC,OAAO,SAAS;EAC/C,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAS,KAAK;CACtD,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,eAAe,CAAC,CAAC,aAAa,SAAS;EACrD,aAAU;CACX,CAAA;AAEL,CACF;AAIA,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,eAAe,CAAC,CAAC,SAAS,SAAS;EACjD,aAAU;CACX,CAAA;AAEL,CAAC;AAED,MAAa,QAAQ;CACnB,MAAM;CACN,MAAM;CACN,OAAO;CACP,aAAa;CACb,SAAS;AACX"}

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

@@ -1,2 +1,2 @@
-import { Alert, AlertDescription, AlertDescriptionProps, AlertIcon, AlertIconProps, AlertRoot, AlertRootProps, AlertTitle, AlertTitleProps, AlertTone } from "./alert.cjs";
-export { Alert, AlertDescription, type AlertDescriptionProps, AlertIcon, type AlertIconProps, AlertRoot, type AlertRootProps, AlertTitle, type AlertTitleProps, type AlertTone };
+import { Alert, AlertActions, AlertActionsProps, AlertDescription, AlertDescriptionProps, AlertIcon, AlertIconProps, AlertRoot, AlertRootProps, AlertTitle, AlertTitleProps, AlertTone } from "./alert.cjs";
+export { Alert, AlertActions, type AlertActionsProps, AlertDescription, type AlertDescriptionProps, AlertIcon, type AlertIconProps, AlertRoot, type AlertRootProps, AlertTitle, type AlertTitleProps, type AlertTone };

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

@@ -1,2 +1,2 @@
-import { Alert, AlertDescription, AlertDescriptionProps, AlertIcon, AlertIconProps, AlertRoot, AlertRootProps, AlertTitle, AlertTitleProps, AlertTone } from "./alert.js";
-export { Alert, AlertDescription, type AlertDescriptionProps, AlertIcon, type AlertIconProps, AlertRoot, type AlertRootProps, AlertTitle, type AlertTitleProps, type AlertTone };
+import { Alert, AlertActions, AlertActionsProps, AlertDescription, AlertDescriptionProps, AlertIcon, AlertIconProps, AlertRoot, AlertRootProps, AlertTitle, AlertTitleProps, AlertTone } from "./alert.js";
+export { Alert, AlertActions, type AlertActionsProps, AlertDescription, type AlertDescriptionProps, AlertIcon, type AlertIconProps, AlertRoot, type AlertRootProps, AlertTitle, type AlertTitleProps, type AlertTone };

package/dist/components/aspect-ratio/aspect-ratio.cjs

@@ -0,0 +1,23 @@
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_aspect_ratio_box = require("../../styled-system/recipes/aspect-ratio-box.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/aspect-ratio/aspect-ratio.tsx
+const AspectRatio = (0, react.forwardRef)(function AspectRatio({ className, ratio = 1, style, ...props }, ref) {
+	const safeRatio = Number.isFinite(ratio) && ratio > 0 ? ratio : 1;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		ref,
+		className: require_cx.cx(require_aspect_ratio_box.aspectRatioBox(), className),
+		"data-jaci-component": "aspect-ratio",
+		"data-slot": "aspect-ratio",
+		style: {
+			aspectRatio: safeRatio,
+			...style
+		}
+	});
+});
+//#endregion
+exports.AspectRatio = AspectRatio;
+
+//# sourceMappingURL=aspect-ratio.cjs.map

package/dist/components/aspect-ratio/aspect-ratio.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio.cjs","names":["cx","aspectRatioBox"],"sources":["../../../src/components/aspect-ratio/aspect-ratio.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { aspectRatioBox } from \"../../styled-system/recipes\";\n\nexport interface AspectRatioProps extends ComponentPropsWithoutRef<\"div\"> {\n  ratio?: number;\n}\n\nexport const AspectRatio = forwardRef<HTMLDivElement, AspectRatioProps>(function AspectRatio(\n  { className, ratio = 1, style, ...props },\n  ref,\n) {\n  const safeRatio = Number.isFinite(ratio) && ratio > 0 ? ratio : 1;\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cx(aspectRatioBox(), className)}\n      data-jaci-component=\"aspect-ratio\"\n      data-slot=\"aspect-ratio\"\n      style={{ aspectRatio: safeRatio, ...style }}\n    />\n  );\n});\n"],"mappings":";;;;;AAUA,MAAa,eAAA,GAAA,MAAA,WAAA,CAA2D,SAAS,YAC/E,EAAE,WAAW,QAAQ,GAAG,OAAO,GAAG,SAClC,KACA;CACA,MAAM,YAAY,OAAO,SAAS,KAAK,KAAK,QAAQ,IAAI,QAAQ;CAEhE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACC;EACL,WAAWA,WAAAA,GAAGC,yBAAAA,eAAe,GAAG,SAAS;EACzC,uBAAoB;EACpB,aAAU;EACV,OAAO;GAAE,aAAa;GAAW,GAAG;EAAM;CAC3C,CAAA;AAEL,CAAC"}

package/dist/components/aspect-ratio/aspect-ratio.d.cts

@@ -0,0 +1,9 @@
+import { ComponentPropsWithoutRef } from "react";
+//#region src/components/aspect-ratio/aspect-ratio.d.ts
+interface AspectRatioProps extends ComponentPropsWithoutRef<"div"> {
+  ratio?: number;
+}
+declare const AspectRatio: import("react").ForwardRefExoticComponent<AspectRatioProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { AspectRatio, AspectRatioProps };
+//# sourceMappingURL=aspect-ratio.d.cts.map

package/dist/components/aspect-ratio/aspect-ratio.d.ts

@@ -0,0 +1,9 @@
+import { ComponentPropsWithoutRef } from "react";
+//#region src/components/aspect-ratio/aspect-ratio.d.ts
+interface AspectRatioProps extends ComponentPropsWithoutRef<"div"> {
+  ratio?: number;
+}
+declare const AspectRatio: import("react").ForwardRefExoticComponent<AspectRatioProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { AspectRatio, AspectRatioProps };
+//# sourceMappingURL=aspect-ratio.d.ts.map

package/dist/components/aspect-ratio/aspect-ratio.js

@@ -0,0 +1,23 @@
+import { cx } from "../../styled-system/css/cx.js";
+import { aspectRatioBox } from "../../styled-system/recipes/aspect-ratio-box.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/aspect-ratio/aspect-ratio.tsx
+const AspectRatio = forwardRef(function AspectRatio({ className, ratio = 1, style, ...props }, ref) {
+	const safeRatio = Number.isFinite(ratio) && ratio > 0 ? ratio : 1;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		className: cx(aspectRatioBox(), className),
+		"data-jaci-component": "aspect-ratio",
+		"data-slot": "aspect-ratio",
+		style: {
+			aspectRatio: safeRatio,
+			...style
+		}
+	});
+});
+//#endregion
+export { AspectRatio };
+
+//# sourceMappingURL=aspect-ratio.js.map

package/dist/components/aspect-ratio/aspect-ratio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio.js","names":[],"sources":["../../../src/components/aspect-ratio/aspect-ratio.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { aspectRatioBox } from \"../../styled-system/recipes\";\n\nexport interface AspectRatioProps extends ComponentPropsWithoutRef<\"div\"> {\n  ratio?: number;\n}\n\nexport const AspectRatio = forwardRef<HTMLDivElement, AspectRatioProps>(function AspectRatio(\n  { className, ratio = 1, style, ...props },\n  ref,\n) {\n  const safeRatio = Number.isFinite(ratio) && ratio > 0 ? ratio : 1;\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cx(aspectRatioBox(), className)}\n      data-jaci-component=\"aspect-ratio\"\n      data-slot=\"aspect-ratio\"\n      style={{ aspectRatio: safeRatio, ...style }}\n    />\n  );\n});\n"],"mappings":";;;;;AAUA,MAAa,cAAc,WAA6C,SAAS,YAC/E,EAAE,WAAW,QAAQ,GAAG,OAAO,GAAG,SAClC,KACA;CACA,MAAM,YAAY,OAAO,SAAS,KAAK,KAAK,QAAQ,IAAI,QAAQ;CAEhE,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,eAAe,GAAG,SAAS;EACzC,uBAAoB;EACpB,aAAU;EACV,OAAO;GAAE,aAAa;GAAW,GAAG;EAAM;CAC3C,CAAA;AAEL,CAAC"}

package/dist/components/aspect-ratio/index.d.cts

@@ -0,0 +1,2 @@
+import { AspectRatio, AspectRatioProps } from "./aspect-ratio.cjs";
+export { AspectRatio, type AspectRatioProps };

package/dist/components/aspect-ratio/index.d.ts

@@ -0,0 +1,2 @@
+import { AspectRatio, AspectRatioProps } from "./aspect-ratio.js";
+export { AspectRatio, type AspectRatioProps };

package/dist/components/card/card.cjs

@@ -3,7 +3,7 @@ const require_card = require("../../styled-system/recipes/card.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/card/card.tsx
-const Card = (0, react.forwardRef)(function Card({ className, variant = "outline", ...props }, ref) {
+const CardBase = (0, react.forwardRef)(function Card({ className, variant = "outline", ...props }, ref) {
 	const styles = require_card.card({ variant });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("article", {
 		...props,
@@ -45,11 +45,20 @@ const CardFooter = (0, react.forwardRef)(function CardFooter({ className, ...pro
 		"data-slot": "card-footer"
 	});
 });
+const Card = Object.assign(CardBase, {
+	Root: CardBase,
+	Header: CardHeader,
+	Title: CardTitle,
+	Content: CardContent,
+	Footer: CardFooter
+});
+const CardNamespace = Card;
 //#endregion
 exports.Card = Card;
 exports.CardContent = CardContent;
 exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
+exports.CardNamespace = CardNamespace;
 exports.CardTitle = CardTitle;
 
 //# sourceMappingURL=card.cjs.map

package/dist/components/card/card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"card.cjs","names":["card","cx"],"sources":["../../../src/components/card/card.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { card } from \"../../styled-system/recipes\";\n\nexport interface CardProps extends ComponentPropsWithoutRef<\"article\"> {\n  variant?: \"outline\" | \"elevated\" | \"subtle\";\n}\n\nexport const Card = forwardRef<HTMLElement, CardProps>(function Card(\n  { className, variant = \"outline\", ...props },\n  ref,\n) {\n  const styles = card({ variant });\n\n  return (\n    <article\n      {...props}\n      ref={ref}\n      className={cx(styles.root, className)}\n      data-jaci-component=\"card\"\n      data-slot=\"card\"\n    />\n  );\n});\n\nexport const CardHeader = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<\"div\">>(\n  function CardHeader({ className, ...props }, ref) {\n    return (\n      <div {...props} ref={ref} className={cx(card().header, className)} data-slot=\"card-header\" />\n    );\n  },\n);\n\nexport const CardTitle = forwardRef<HTMLHeadingElement, ComponentPropsWithoutRef<\"h3\">>(\n  function CardTitle({ className, ...props }, ref) {\n    return (\n      <h3 {...props} ref={ref} className={cx(card().title, className)} data-slot=\"card-title\" />\n    );\n  },\n);\n\nexport const CardContent = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<\"div\">>(\n  function CardContent({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(card().content, className)}\n        data-slot=\"card-content\"\n      />\n    );\n  },\n);\n\nexport const CardFooter = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<\"div\">>(\n  function CardFooter({ className, ...props }, ref) {\n    return (\n      <div {...props} ref={ref} className={cx(card().footer, className)} data-slot=\"card-footer\" />\n    );\n  },\n);\n"],"mappings":";;;;;AAUA,MAAa,QAAA,GAAA,MAAA,WAAA,CAA0C,SAAS,KAC9D,EAAE,WAAW,UAAU,WAAW,GAAG,SACrC,KACA;CACA,MAAM,SAASA,aAAAA,KAAK,EAAE,QAAQ,CAAC;CAE/B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACE,GAAI;EACC;EACL,WAAWC,WAAAA,GAAG,OAAO,MAAM,SAAS;EACpC,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC;AAED,MAAa,cAAA,GAAA,MAAA,WAAA,CACX,SAAS,WAAW,EAAE,WAAW,GAAG,SAAS,KAAK;CAChD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,GAAI;EAAY;EAAK,WAAWA,WAAAA,GAAGD,aAAAA,KAAK,CAAC,CAAC,QAAQ,SAAS;EAAG,aAAU;CAAe,CAAA;AAEhG,CACF;AAEA,MAAa,aAAA,GAAA,MAAA,WAAA,CACX,SAAS,UAAU,EAAE,WAAW,GAAG,SAAS,KAAK;CAC/C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;EAAI,GAAI;EAAY;EAAK,WAAWC,WAAAA,GAAGD,aAAAA,KAAK,CAAC,CAAC,OAAO,SAAS;EAAG,aAAU;CAAc,CAAA;AAE7F,CACF;AAEA,MAAa,eAAA,GAAA,MAAA,WAAA,CACX,SAAS,YAAY,EAAE,WAAW,GAAG,SAAS,KAAK;CACjD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACC;EACL,WAAWC,WAAAA,GAAGD,aAAAA,KAAK,CAAC,CAAC,SAAS,SAAS;EACvC,aAAU;CACX,CAAA;AAEL,CACF;AAEA,MAAa,cAAA,GAAA,MAAA,WAAA,CACX,SAAS,WAAW,EAAE,WAAW,GAAG,SAAS,KAAK;CAChD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,GAAI;EAAY;EAAK,WAAWC,WAAAA,GAAGD,aAAAA,KAAK,CAAC,CAAC,QAAQ,SAAS;EAAG,aAAU;CAAe,CAAA;AAEhG,CACF"}
+{"version":3,"file":"card.cjs","names":["card","cx"],"sources":["../../../src/components/card/card.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { card } from \"../../styled-system/recipes\";\n\nexport interface CardProps extends ComponentPropsWithoutRef<\"article\"> {\n  variant?: \"outline\" | \"elevated\" | \"subtle\";\n}\n\nconst CardBase = forwardRef<HTMLElement, CardProps>(function Card(\n  { className, variant = \"outline\", ...props },\n  ref,\n) {\n  const styles = card({ variant });\n\n  return (\n    <article\n      {...props}\n      ref={ref}\n      className={cx(styles.root, className)}\n      data-jaci-component=\"card\"\n      data-slot=\"card\"\n    />\n  );\n});\n\nexport const CardHeader = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<\"div\">>(\n  function CardHeader({ className, ...props }, ref) {\n    return (\n      <div {...props} ref={ref} className={cx(card().header, className)} data-slot=\"card-header\" />\n    );\n  },\n);\n\nexport const CardTitle = forwardRef<HTMLHeadingElement, ComponentPropsWithoutRef<\"h3\">>(\n  function CardTitle({ className, ...props }, ref) {\n    return (\n      <h3 {...props} ref={ref} className={cx(card().title, className)} data-slot=\"card-title\" />\n    );\n  },\n);\n\nexport const CardContent = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<\"div\">>(\n  function CardContent({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(card().content, className)}\n        data-slot=\"card-content\"\n      />\n    );\n  },\n);\n\nexport const CardFooter = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<\"div\">>(\n  function CardFooter({ className, ...props }, ref) {\n    return (\n      <div {...props} ref={ref} className={cx(card().footer, className)} data-slot=\"card-footer\" />\n    );\n  },\n);\n\nexport const Card = Object.assign(CardBase, {\n  Root: CardBase,\n  Header: CardHeader,\n  Title: CardTitle,\n  Content: CardContent,\n  Footer: CardFooter,\n});\n\nexport const CardNamespace = Card;\n"],"mappings":";;;;;AAUA,MAAM,YAAA,GAAA,MAAA,WAAA,CAA8C,SAAS,KAC3D,EAAE,WAAW,UAAU,WAAW,GAAG,SACrC,KACA;CACA,MAAM,SAASA,aAAAA,KAAK,EAAE,QAAQ,CAAC;CAE/B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACE,GAAI;EACC;EACL,WAAWC,WAAAA,GAAG,OAAO,MAAM,SAAS;EACpC,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC;AAED,MAAa,cAAA,GAAA,MAAA,WAAA,CACX,SAAS,WAAW,EAAE,WAAW,GAAG,SAAS,KAAK;CAChD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,GAAI;EAAY;EAAK,WAAWA,WAAAA,GAAGD,aAAAA,KAAK,CAAC,CAAC,QAAQ,SAAS;EAAG,aAAU;CAAe,CAAA;AAEhG,CACF;AAEA,MAAa,aAAA,GAAA,MAAA,WAAA,CACX,SAAS,UAAU,EAAE,WAAW,GAAG,SAAS,KAAK;CAC/C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;EAAI,GAAI;EAAY;EAAK,WAAWC,WAAAA,GAAGD,aAAAA,KAAK,CAAC,CAAC,OAAO,SAAS;EAAG,aAAU;CAAc,CAAA;AAE7F,CACF;AAEA,MAAa,eAAA,GAAA,MAAA,WAAA,CACX,SAAS,YAAY,EAAE,WAAW,GAAG,SAAS,KAAK;CACjD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACC;EACL,WAAWC,WAAAA,GAAGD,aAAAA,KAAK,CAAC,CAAC,SAAS,SAAS;EACvC,aAAU;CACX,CAAA;AAEL,CACF;AAEA,MAAa,cAAA,GAAA,MAAA,WAAA,CACX,SAAS,WAAW,EAAE,WAAW,GAAG,SAAS,KAAK;CAChD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,GAAI;EAAY;EAAK,WAAWC,WAAAA,GAAGD,aAAAA,KAAK,CAAC,CAAC,QAAQ,SAAS;EAAG,aAAU;CAAe,CAAA;AAEhG,CACF;AAEA,MAAa,OAAO,OAAO,OAAO,UAAU;CAC1C,MAAM;CACN,QAAQ;CACR,OAAO;CACP,SAAS;CACT,QAAQ;AACV,CAAC;AAED,MAAa,gBAAgB"}

package/dist/components/card/card.d.cts

@@ -3,11 +3,24 @@ import { ComponentPropsWithoutRef } from "react";
 interface CardProps extends ComponentPropsWithoutRef<"article"> {
   variant?: "outline" | "elevated" | "subtle";
 }
-declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLElement>>;
 declare const CardHeader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare const CardTitle: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
 declare const CardContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare const CardFooter: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLElement>> & {
+  Root: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLElement>>;
+  Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Title: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+  Content: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+declare const CardNamespace: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLElement>> & {
+  Root: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLElement>>;
+  Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Title: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+  Content: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
 //#endregion
-export { Card, CardContent, CardFooter, CardHeader, CardProps, CardTitle };
+export { Card, CardContent, CardFooter, CardHeader, CardNamespace, CardProps, CardTitle };
 //# sourceMappingURL=card.d.cts.map

package/dist/components/card/card.d.ts

@@ -3,11 +3,24 @@ import { ComponentPropsWithoutRef } from "react";
 interface CardProps extends ComponentPropsWithoutRef<"article"> {
   variant?: "outline" | "elevated" | "subtle";
 }
-declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLElement>>;
 declare const CardHeader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare const CardTitle: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
 declare const CardContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare const CardFooter: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLElement>> & {
+  Root: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLElement>>;
+  Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Title: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+  Content: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+declare const CardNamespace: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLElement>> & {
+  Root: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLElement>>;
+  Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Title: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+  Content: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
 //#endregion
-export { Card, CardContent, CardFooter, CardHeader, CardProps, CardTitle };
+export { Card, CardContent, CardFooter, CardHeader, CardNamespace, CardProps, CardTitle };
 //# sourceMappingURL=card.d.ts.map

package/dist/components/card/card.js

@@ -3,7 +3,7 @@ import { card } from "../../styled-system/recipes/card.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/card/card.tsx
-const Card = forwardRef(function Card({ className, variant = "outline", ...props }, ref) {
+const CardBase = forwardRef(function Card({ className, variant = "outline", ...props }, ref) {
 	const styles = card({ variant });
 	return /* @__PURE__ */ jsx("article", {
 		...props,
@@ -45,7 +45,15 @@ const CardFooter = forwardRef(function CardFooter({ className, ...props }, ref)
 		"data-slot": "card-footer"
 	});
 });
+const Card = Object.assign(CardBase, {
+	Root: CardBase,
+	Header: CardHeader,
+	Title: CardTitle,
+	Content: CardContent,
+	Footer: CardFooter
+});
+const CardNamespace = Card;
 //#endregion
-export { Card, CardContent, CardFooter, CardHeader, CardTitle };
+export { Card, CardContent, CardFooter, CardHeader, CardNamespace, CardTitle };
 
 //# sourceMappingURL=card.js.map

package/dist/components/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../../../src/components/card/card.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { card } from \"../../styled-system/recipes\";\n\nexport interface CardProps extends ComponentPropsWithoutRef<\"article\"> {\n  variant?: \"outline\" | \"elevated\" | \"subtle\";\n}\n\nexport const Card = forwardRef<HTMLElement, CardProps>(function Card(\n  { className, variant = \"outline\", ...props },\n  ref,\n) {\n  const styles = card({ variant });\n\n  return (\n    <article\n      {...props}\n      ref={ref}\n      className={cx(styles.root, className)}\n      data-jaci-component=\"card\"\n      data-slot=\"card\"\n    />\n  );\n});\n\nexport const CardHeader = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<\"div\">>(\n  function CardHeader({ className, ...props }, ref) {\n    return (\n      <div {...props} ref={ref} className={cx(card().header, className)} data-slot=\"card-header\" />\n    );\n  },\n);\n\nexport const CardTitle = forwardRef<HTMLHeadingElement, ComponentPropsWithoutRef<\"h3\">>(\n  function CardTitle({ className, ...props }, ref) {\n    return (\n      <h3 {...props} ref={ref} className={cx(card().title, className)} data-slot=\"card-title\" />\n    );\n  },\n);\n\nexport const CardContent = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<\"div\">>(\n  function CardContent({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(card().content, className)}\n        data-slot=\"card-content\"\n      />\n    );\n  },\n);\n\nexport const CardFooter = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<\"div\">>(\n  function CardFooter({ className, ...props }, ref) {\n    return (\n      <div {...props} ref={ref} className={cx(card().footer, className)} data-slot=\"card-footer\" />\n    );\n  },\n);\n"],"mappings":";;;;;AAUA,MAAa,OAAO,WAAmC,SAAS,KAC9D,EAAE,WAAW,UAAU,WAAW,GAAG,SACrC,KACA;CACA,MAAM,SAAS,KAAK,EAAE,QAAQ,CAAC;CAE/B,OACE,oBAAC,WAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,OAAO,MAAM,SAAS;EACpC,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC;AAED,MAAa,aAAa,WACxB,SAAS,WAAW,EAAE,WAAW,GAAG,SAAS,KAAK;CAChD,OACE,oBAAC,OAAD;EAAK,GAAI;EAAY;EAAK,WAAW,GAAG,KAAK,CAAC,CAAC,QAAQ,SAAS;EAAG,aAAU;CAAe,CAAA;AAEhG,CACF;AAEA,MAAa,YAAY,WACvB,SAAS,UAAU,EAAE,WAAW,GAAG,SAAS,KAAK;CAC/C,OACE,oBAAC,MAAD;EAAI,GAAI;EAAY;EAAK,WAAW,GAAG,KAAK,CAAC,CAAC,OAAO,SAAS;EAAG,aAAU;CAAc,CAAA;AAE7F,CACF;AAEA,MAAa,cAAc,WACzB,SAAS,YAAY,EAAE,WAAW,GAAG,SAAS,KAAK;CACjD,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,KAAK,CAAC,CAAC,SAAS,SAAS;EACvC,aAAU;CACX,CAAA;AAEL,CACF;AAEA,MAAa,aAAa,WACxB,SAAS,WAAW,EAAE,WAAW,GAAG,SAAS,KAAK;CAChD,OACE,oBAAC,OAAD;EAAK,GAAI;EAAY;EAAK,WAAW,GAAG,KAAK,CAAC,CAAC,QAAQ,SAAS;EAAG,aAAU;CAAe,CAAA;AAEhG,CACF"}
+{"version":3,"file":"card.js","names":[],"sources":["../../../src/components/card/card.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { card } from \"../../styled-system/recipes\";\n\nexport interface CardProps extends ComponentPropsWithoutRef<\"article\"> {\n  variant?: \"outline\" | \"elevated\" | \"subtle\";\n}\n\nconst CardBase = forwardRef<HTMLElement, CardProps>(function Card(\n  { className, variant = \"outline\", ...props },\n  ref,\n) {\n  const styles = card({ variant });\n\n  return (\n    <article\n      {...props}\n      ref={ref}\n      className={cx(styles.root, className)}\n      data-jaci-component=\"card\"\n      data-slot=\"card\"\n    />\n  );\n});\n\nexport const CardHeader = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<\"div\">>(\n  function CardHeader({ className, ...props }, ref) {\n    return (\n      <div {...props} ref={ref} className={cx(card().header, className)} data-slot=\"card-header\" />\n    );\n  },\n);\n\nexport const CardTitle = forwardRef<HTMLHeadingElement, ComponentPropsWithoutRef<\"h3\">>(\n  function CardTitle({ className, ...props }, ref) {\n    return (\n      <h3 {...props} ref={ref} className={cx(card().title, className)} data-slot=\"card-title\" />\n    );\n  },\n);\n\nexport const CardContent = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<\"div\">>(\n  function CardContent({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(card().content, className)}\n        data-slot=\"card-content\"\n      />\n    );\n  },\n);\n\nexport const CardFooter = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<\"div\">>(\n  function CardFooter({ className, ...props }, ref) {\n    return (\n      <div {...props} ref={ref} className={cx(card().footer, className)} data-slot=\"card-footer\" />\n    );\n  },\n);\n\nexport const Card = Object.assign(CardBase, {\n  Root: CardBase,\n  Header: CardHeader,\n  Title: CardTitle,\n  Content: CardContent,\n  Footer: CardFooter,\n});\n\nexport const CardNamespace = Card;\n"],"mappings":";;;;;AAUA,MAAM,WAAW,WAAmC,SAAS,KAC3D,EAAE,WAAW,UAAU,WAAW,GAAG,SACrC,KACA;CACA,MAAM,SAAS,KAAK,EAAE,QAAQ,CAAC;CAE/B,OACE,oBAAC,WAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,OAAO,MAAM,SAAS;EACpC,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC;AAED,MAAa,aAAa,WACxB,SAAS,WAAW,EAAE,WAAW,GAAG,SAAS,KAAK;CAChD,OACE,oBAAC,OAAD;EAAK,GAAI;EAAY;EAAK,WAAW,GAAG,KAAK,CAAC,CAAC,QAAQ,SAAS;EAAG,aAAU;CAAe,CAAA;AAEhG,CACF;AAEA,MAAa,YAAY,WACvB,SAAS,UAAU,EAAE,WAAW,GAAG,SAAS,KAAK;CAC/C,OACE,oBAAC,MAAD;EAAI,GAAI;EAAY;EAAK,WAAW,GAAG,KAAK,CAAC,CAAC,OAAO,SAAS;EAAG,aAAU;CAAc,CAAA;AAE7F,CACF;AAEA,MAAa,cAAc,WACzB,SAAS,YAAY,EAAE,WAAW,GAAG,SAAS,KAAK;CACjD,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,KAAK,CAAC,CAAC,SAAS,SAAS;EACvC,aAAU;CACX,CAAA;AAEL,CACF;AAEA,MAAa,aAAa,WACxB,SAAS,WAAW,EAAE,WAAW,GAAG,SAAS,KAAK;CAChD,OACE,oBAAC,OAAD;EAAK,GAAI;EAAY;EAAK,WAAW,GAAG,KAAK,CAAC,CAAC,QAAQ,SAAS;EAAG,aAAU;CAAe,CAAA;AAEhG,CACF;AAEA,MAAa,OAAO,OAAO,OAAO,UAAU;CAC1C,MAAM;CACN,QAAQ;CACR,OAAO;CACP,SAAS;CACT,QAAQ;AACV,CAAC;AAED,MAAa,gBAAgB"}

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

@@ -1,2 +1,2 @@
-import { Card, CardContent, CardFooter, CardHeader, CardProps, CardTitle } from "./card.cjs";
-export { Card, CardContent, CardFooter, CardHeader, type CardProps, CardTitle };
+import { Card, CardContent, CardFooter, CardHeader, CardNamespace, CardProps, CardTitle } from "./card.cjs";
+export { Card, CardContent, CardFooter, CardHeader, CardNamespace, type CardProps, CardTitle };

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

@@ -1,2 +1,2 @@
-import { Card, CardContent, CardFooter, CardHeader, CardProps, CardTitle } from "./card.js";
-export { Card, CardContent, CardFooter, CardHeader, type CardProps, CardTitle };
+import { Card, CardContent, CardFooter, CardHeader, CardNamespace, CardProps, CardTitle } from "./card.js";
+export { Card, CardContent, CardFooter, CardHeader, CardNamespace, type CardProps, CardTitle };

package/dist/components/code/code.cjs

@@ -0,0 +1,39 @@
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_code = require("../../styled-system/recipes/code.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/code/code.tsx
+const Code = (0, react.forwardRef)(function Code({ children, className, language, truncate = false, variant = "inline", wrap = false, ...props }, ref) {
+	const classNames = require_cx.cx(require_code.code({
+		truncate,
+		variant,
+		wrap
+	}), className);
+	if (variant === "block") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+		...props,
+		ref,
+		className: classNames,
+		"data-jaci-component": "code",
+		"data-language": language || void 0,
+		"data-slot": "code",
+		"data-variant": variant,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+			"data-slot": "code-content",
+			children
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+		...props,
+		ref,
+		className: classNames,
+		"data-jaci-component": "code",
+		"data-language": language || void 0,
+		"data-slot": "code",
+		"data-variant": variant,
+		children
+	});
+});
+//#endregion
+exports.Code = Code;
+
+//# sourceMappingURL=code.cjs.map

package/dist/components/code/code.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.cjs","names":["cx","code"],"sources":["../../../src/components/code/code.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { code } from \"../../styled-system/recipes\";\n\nexport type CodeVariant = \"inline\" | \"block\";\n\nexport interface CodeProps extends Omit<ComponentPropsWithoutRef<\"code\">, \"children\"> {\n  children?: ReactNode;\n  variant?: CodeVariant;\n  language?: string;\n  wrap?: boolean;\n  truncate?: boolean;\n}\n\nexport const Code = forwardRef<HTMLElement, CodeProps>(function Code(\n  { children, className, language, truncate = false, variant = \"inline\", wrap = false, ...props },\n  ref,\n) {\n  const classNames = cx(code({ truncate, variant, wrap }), className);\n\n  if (variant === \"block\") {\n    return (\n      <pre\n        {...props}\n        ref={ref as React.Ref<HTMLPreElement>}\n        className={classNames}\n        data-jaci-component=\"code\"\n        data-language={language || undefined}\n        data-slot=\"code\"\n        data-variant={variant}\n      >\n        <code data-slot=\"code-content\">{children}</code>\n      </pre>\n    );\n  }\n\n  return (\n    <code\n      {...props}\n      ref={ref as React.Ref<HTMLElement>}\n      className={classNames}\n      data-jaci-component=\"code\"\n      data-language={language || undefined}\n      data-slot=\"code\"\n      data-variant={variant}\n    >\n      {children}\n    </code>\n  );\n});\n"],"mappings":";;;;;AAgBA,MAAa,QAAA,GAAA,MAAA,WAAA,CAA0C,SAAS,KAC9D,EAAE,UAAU,WAAW,UAAU,WAAW,OAAO,UAAU,UAAU,OAAO,OAAO,GAAG,SACxF,KACA;CACA,MAAM,aAAaA,WAAAA,GAAGC,aAAAA,KAAK;EAAE;EAAU;EAAS;CAAK,CAAC,GAAG,SAAS;CAElE,IAAI,YAAY,SACd,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW;EACX,uBAAoB;EACpB,iBAAe,YAAY,KAAA;EAC3B,aAAU;EACV,gBAAc;YAEd,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,aAAU;GAAgB;EAAe,CAAA;CAC5C,CAAA;CAIT,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,GAAI;EACC;EACL,WAAW;EACX,uBAAoB;EACpB,iBAAe,YAAY,KAAA;EAC3B,aAAU;EACV,gBAAc;EAEb;CACG,CAAA;AAEV,CAAC"}

package/dist/components/code/code.d.cts

@@ -0,0 +1,14 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/code/code.d.ts
+type CodeVariant = "inline" | "block";
+interface CodeProps extends Omit<ComponentPropsWithoutRef<"code">, "children"> {
+  children?: ReactNode;
+  variant?: CodeVariant;
+  language?: string;
+  wrap?: boolean;
+  truncate?: boolean;
+}
+declare const Code: import("react").ForwardRefExoticComponent<CodeProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+export { Code, CodeProps, CodeVariant };
+//# sourceMappingURL=code.d.cts.map

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

@@ -0,0 +1,14 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/code/code.d.ts
+type CodeVariant = "inline" | "block";
+interface CodeProps extends Omit<ComponentPropsWithoutRef<"code">, "children"> {
+  children?: ReactNode;
+  variant?: CodeVariant;
+  language?: string;
+  wrap?: boolean;
+  truncate?: boolean;
+}
+declare const Code: import("react").ForwardRefExoticComponent<CodeProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+export { Code, CodeProps, CodeVariant };
+//# sourceMappingURL=code.d.ts.map

package/dist/components/code/code.js

@@ -0,0 +1,39 @@
+import { cx } from "../../styled-system/css/cx.js";
+import { code } from "../../styled-system/recipes/code.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/code/code.tsx
+const Code = forwardRef(function Code({ children, className, language, truncate = false, variant = "inline", wrap = false, ...props }, ref) {
+	const classNames = cx(code({
+		truncate,
+		variant,
+		wrap
+	}), className);
+	if (variant === "block") return /* @__PURE__ */ jsx("pre", {
+		...props,
+		ref,
+		className: classNames,
+		"data-jaci-component": "code",
+		"data-language": language || void 0,
+		"data-slot": "code",
+		"data-variant": variant,
+		children: /* @__PURE__ */ jsx("code", {
+			"data-slot": "code-content",
+			children
+		})
+	});
+	return /* @__PURE__ */ jsx("code", {
+		...props,
+		ref,
+		className: classNames,
+		"data-jaci-component": "code",
+		"data-language": language || void 0,
+		"data-slot": "code",
+		"data-variant": variant,
+		children
+	});
+});
+//#endregion
+export { Code };
+
+//# sourceMappingURL=code.js.map

package/dist/components/code/code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.js","names":[],"sources":["../../../src/components/code/code.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { code } from \"../../styled-system/recipes\";\n\nexport type CodeVariant = \"inline\" | \"block\";\n\nexport interface CodeProps extends Omit<ComponentPropsWithoutRef<\"code\">, \"children\"> {\n  children?: ReactNode;\n  variant?: CodeVariant;\n  language?: string;\n  wrap?: boolean;\n  truncate?: boolean;\n}\n\nexport const Code = forwardRef<HTMLElement, CodeProps>(function Code(\n  { children, className, language, truncate = false, variant = \"inline\", wrap = false, ...props },\n  ref,\n) {\n  const classNames = cx(code({ truncate, variant, wrap }), className);\n\n  if (variant === \"block\") {\n    return (\n      <pre\n        {...props}\n        ref={ref as React.Ref<HTMLPreElement>}\n        className={classNames}\n        data-jaci-component=\"code\"\n        data-language={language || undefined}\n        data-slot=\"code\"\n        data-variant={variant}\n      >\n        <code data-slot=\"code-content\">{children}</code>\n      </pre>\n    );\n  }\n\n  return (\n    <code\n      {...props}\n      ref={ref as React.Ref<HTMLElement>}\n      className={classNames}\n      data-jaci-component=\"code\"\n      data-language={language || undefined}\n      data-slot=\"code\"\n      data-variant={variant}\n    >\n      {children}\n    </code>\n  );\n});\n"],"mappings":";;;;;AAgBA,MAAa,OAAO,WAAmC,SAAS,KAC9D,EAAE,UAAU,WAAW,UAAU,WAAW,OAAO,UAAU,UAAU,OAAO,OAAO,GAAG,SACxF,KACA;CACA,MAAM,aAAa,GAAG,KAAK;EAAE;EAAU;EAAS;CAAK,CAAC,GAAG,SAAS;CAElE,IAAI,YAAY,SACd,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW;EACX,uBAAoB;EACpB,iBAAe,YAAY,KAAA;EAC3B,aAAU;EACV,gBAAc;YAEd,oBAAC,QAAD;GAAM,aAAU;GAAgB;EAAe,CAAA;CAC5C,CAAA;CAIT,OACE,oBAAC,QAAD;EACE,GAAI;EACC;EACL,WAAW;EACX,uBAAoB;EACpB,iBAAe,YAAY,KAAA;EAC3B,aAAU;EACV,gBAAc;EAEb;CACG,CAAA;AAEV,CAAC"}

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

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

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

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