jaci-ui 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.3.0
+
+### Minor Changes
+
+- 60fe9f1: Add the optional ThemeProvider and reusable IconButton, ButtonGroup, InputGroup, and EmptyState components.
+
 ## 0.2.0
 
 ### Minor Changes

package/README.md

@@ -87,6 +87,20 @@ DatePicker supports day, month and date-time values while keeping the public val
 Use `granularity="month"` to select a month normalized to its first day. Date-time popups stay
 open until `DatePicker.Close` is activated; day and month modes close after selection by default.
 
+Small composition helpers keep common layouts consistent:
+
+```tsx
+import { Button, ButtonGroup, EmptyState, IconButton, Input, InputGroup } from "jaci-ui";
+
+<IconButton aria-label="Close">×</IconButton>;
+<ButtonGroup><Button>Save</Button><Button>Cancel</Button></ButtonGroup>;
+<InputGroup><InputGroup.Addon>https://</InputGroup.Addon><Input aria-label="URL" /></InputGroup>;
+<EmptyState.Root><EmptyState.Title>No results</EmptyState.Title></EmptyState.Root>;
+```
+
+`IconButton` requires an accessible label for icon-only content. `ButtonGroup` and `InputGroup`
+also expose `.Root` aliases for compound composition.
+
 ## Server rendering and frameworks
 
 Static components are server-safe and interactive modules preserve their `"use client"` boundary.
@@ -128,6 +142,39 @@ the public CSS variables without a provider:
 }
 ```
 
+For applications that prefer a React API, `ThemeProvider` is optional. It can control the mode
+and apply token overrides to only its subtree:
+
+```tsx
+import { ThemeProvider, useTheme } from "jaci-ui";
+
+function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme();
+  return <button onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}>Toggle</button>;
+}
+
+export function App() {
+  return (
+    <ThemeProvider
+      defaultTheme="system"
+      ssrTheme="light"
+      tokens={{
+        colors: {
+          accent: { default: "#7c3aed", hover: "#6d28d9" },
+          fg: { onAccent: "#ffffff" },
+        },
+      }}
+    >
+      <ThemeToggle />
+    </ThemeProvider>
+  );
+}
+```
+
+`system` uses `ssrTheme` during server rendering and reads `prefers-color-scheme` only after
+mounting. The provider is a client module, so Next.js App Router applications should place it
+inside a client boundary. Direct `data-jaci-theme` and `--jaci-*` variables remain supported.
+
 The package exposes semantic surface, foreground, border, status, spacing, radius, shadow and
 transition tokens. See the Theming guide in Storybook for the complete token vocabulary.
 

package/dist/components/button-group/button-group.cjs

@@ -0,0 +1,22 @@
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_button_group = require("../../styled-system/recipes/button-group.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/button-group/button-group.tsx
+const ButtonGroupRoot = (0, react.forwardRef)(function ButtonGroup({ className, orientation = "horizontal", ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		ref,
+		className: require_cx.cx(require_button_group.buttonGroup({ orientation }).root, className),
+		"data-jaci-component": "button-group",
+		"data-orientation": orientation,
+		"data-slot": "button-group",
+		role: props.role ?? "group"
+	});
+});
+const ButtonGroup = Object.assign(ButtonGroupRoot, { Root: ButtonGroupRoot });
+//#endregion
+exports.ButtonGroup = ButtonGroup;
+exports.ButtonGroupRoot = ButtonGroupRoot;
+
+//# sourceMappingURL=button-group.cjs.map

package/dist/components/button-group/button-group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.cjs","names":["cx","buttonGroup"],"sources":["../../../src/components/button-group/button-group.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { buttonGroup } from \"../../styled-system/recipes\";\n\nexport interface ButtonGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const ButtonGroupRoot = forwardRef<HTMLDivElement, ButtonGroupProps>(function ButtonGroup(\n  { className, orientation = \"horizontal\", ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cx(buttonGroup({ orientation }).root, className)}\n      data-jaci-component=\"button-group\"\n      data-orientation={orientation}\n      data-slot=\"button-group\"\n      role={props.role ?? \"group\"}\n    />\n  );\n});\n\nexport const ButtonGroup = Object.assign(ButtonGroupRoot, { Root: ButtonGroupRoot });\n"],"mappings":";;;;;AAUA,MAAa,mBAAA,GAAA,MAAA,WAAA,CAA+D,SAAS,YACnF,EAAE,WAAW,cAAc,cAAc,GAAG,SAC5C,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACC;EACL,WAAWA,WAAAA,GAAGC,qBAAAA,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,MAAM,SAAS;EAC1D,uBAAoB;EACpB,oBAAkB;EAClB,aAAU;EACV,MAAM,MAAM,QAAQ;CACrB,CAAA;AAEL,CAAC;AAED,MAAa,cAAc,OAAO,OAAO,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/button-group/button-group.d.cts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef } from "react";
+//#region src/components/button-group/button-group.d.ts
+interface ButtonGroupProps extends ComponentPropsWithoutRef<"div"> {
+  orientation?: "horizontal" | "vertical";
+}
+declare const ButtonGroupRoot: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const ButtonGroup: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { ButtonGroup, ButtonGroupProps, ButtonGroupRoot };
+//# sourceMappingURL=button-group.d.cts.map

package/dist/components/button-group/button-group.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef } from "react";
+//#region src/components/button-group/button-group.d.ts
+interface ButtonGroupProps extends ComponentPropsWithoutRef<"div"> {
+  orientation?: "horizontal" | "vertical";
+}
+declare const ButtonGroupRoot: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const ButtonGroup: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { ButtonGroup, ButtonGroupProps, ButtonGroupRoot };
+//# sourceMappingURL=button-group.d.ts.map

package/dist/components/button-group/button-group.js

@@ -0,0 +1,21 @@
+import { cx } from "../../styled-system/css/cx.js";
+import { buttonGroup } from "../../styled-system/recipes/button-group.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/button-group/button-group.tsx
+const ButtonGroupRoot = forwardRef(function ButtonGroup({ className, orientation = "horizontal", ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		className: cx(buttonGroup({ orientation }).root, className),
+		"data-jaci-component": "button-group",
+		"data-orientation": orientation,
+		"data-slot": "button-group",
+		role: props.role ?? "group"
+	});
+});
+const ButtonGroup = Object.assign(ButtonGroupRoot, { Root: ButtonGroupRoot });
+//#endregion
+export { ButtonGroup, ButtonGroupRoot };
+
+//# sourceMappingURL=button-group.js.map

package/dist/components/button-group/button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.js","names":[],"sources":["../../../src/components/button-group/button-group.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { buttonGroup } from \"../../styled-system/recipes\";\n\nexport interface ButtonGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const ButtonGroupRoot = forwardRef<HTMLDivElement, ButtonGroupProps>(function ButtonGroup(\n  { className, orientation = \"horizontal\", ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cx(buttonGroup({ orientation }).root, className)}\n      data-jaci-component=\"button-group\"\n      data-orientation={orientation}\n      data-slot=\"button-group\"\n      role={props.role ?? \"group\"}\n    />\n  );\n});\n\nexport const ButtonGroup = Object.assign(ButtonGroupRoot, { Root: ButtonGroupRoot });\n"],"mappings":";;;;;AAUA,MAAa,kBAAkB,WAA6C,SAAS,YACnF,EAAE,WAAW,cAAc,cAAc,GAAG,SAC5C,KACA;CACA,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,MAAM,SAAS;EAC1D,uBAAoB;EACpB,oBAAkB;EAClB,aAAU;EACV,MAAM,MAAM,QAAQ;CACrB,CAAA;AAEL,CAAC;AAED,MAAa,cAAc,OAAO,OAAO,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/button-group/index.d.cts

@@ -0,0 +1,2 @@
+import { ButtonGroup, ButtonGroupProps, ButtonGroupRoot } from "./button-group.cjs";
+export { ButtonGroup, type ButtonGroupProps, ButtonGroupRoot };

package/dist/components/button-group/index.d.ts

@@ -0,0 +1,2 @@
+import { ButtonGroup, ButtonGroupProps, ButtonGroupRoot } from "./button-group.js";
+export { ButtonGroup, type ButtonGroupProps, ButtonGroupRoot };

package/dist/components/empty-state/empty-state.cjs

@@ -0,0 +1,62 @@
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_empty_state = require("../../styled-system/recipes/empty-state.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/empty-state/empty-state.tsx
+const EmptyStateRoot = (0, react.forwardRef)(function EmptyStateRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+		...props,
+		ref,
+		className: require_cx.cx(require_empty_state.emptyState().root, className),
+		"data-jaci-component": "empty-state",
+		"data-slot": "empty-state"
+	});
+});
+const EmptyStateIcon = (0, react.forwardRef)(function EmptyStateIcon({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		ref,
+		className: require_cx.cx(require_empty_state.emptyState().icon, className),
+		"data-slot": "empty-state-icon"
+	});
+});
+const EmptyStateTitle = (0, react.forwardRef)(function EmptyStateTitle({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+		...props,
+		ref,
+		className: require_cx.cx(require_empty_state.emptyState().title, className),
+		"data-slot": "empty-state-title"
+	});
+});
+const EmptyStateDescription = (0, react.forwardRef)(function EmptyStateDescription({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		...props,
+		ref,
+		className: require_cx.cx(require_empty_state.emptyState().description, className),
+		"data-slot": "empty-state-description"
+	});
+});
+const EmptyStateAction = (0, react.forwardRef)(function EmptyStateAction({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		ref,
+		className: require_cx.cx(require_empty_state.emptyState().action, className),
+		"data-slot": "empty-state-action"
+	});
+});
+const EmptyState = Object.assign(EmptyStateRoot, {
+	Root: EmptyStateRoot,
+	Icon: EmptyStateIcon,
+	Title: EmptyStateTitle,
+	Description: EmptyStateDescription,
+	Action: EmptyStateAction
+});
+//#endregion
+exports.EmptyState = EmptyState;
+exports.EmptyStateAction = EmptyStateAction;
+exports.EmptyStateDescription = EmptyStateDescription;
+exports.EmptyStateIcon = EmptyStateIcon;
+exports.EmptyStateRoot = EmptyStateRoot;
+exports.EmptyStateTitle = EmptyStateTitle;
+
+//# sourceMappingURL=empty-state.cjs.map

package/dist/components/empty-state/empty-state.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.cjs","names":["cx","emptyState"],"sources":["../../../src/components/empty-state/empty-state.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { emptyState } from \"../../styled-system/recipes\";\n\nexport type EmptyStateRootProps = ComponentPropsWithoutRef<\"section\">;\n\nexport const EmptyStateRoot = forwardRef<HTMLElement, EmptyStateRootProps>(function EmptyStateRoot(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <section\n      {...props}\n      ref={ref}\n      className={cx(emptyState().root, className)}\n      data-jaci-component=\"empty-state\"\n      data-slot=\"empty-state\"\n    />\n  );\n});\n\nexport const EmptyStateIcon = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<\"div\">>(\n  function EmptyStateIcon({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(emptyState().icon, className)}\n        data-slot=\"empty-state-icon\"\n      />\n    );\n  },\n);\n\nexport const EmptyStateTitle = forwardRef<HTMLHeadingElement, ComponentPropsWithoutRef<\"h3\">>(\n  function EmptyStateTitle({ className, ...props }, ref) {\n    return (\n      <h3\n        {...props}\n        ref={ref}\n        className={cx(emptyState().title, className)}\n        data-slot=\"empty-state-title\"\n      />\n    );\n  },\n);\n\nexport const EmptyStateDescription = forwardRef<\n  HTMLParagraphElement,\n  ComponentPropsWithoutRef<\"p\">\n>(function EmptyStateDescription({ className, ...props }, ref) {\n  return (\n    <p\n      {...props}\n      ref={ref}\n      className={cx(emptyState().description, className)}\n      data-slot=\"empty-state-description\"\n    />\n  );\n});\n\nexport const EmptyStateAction = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<\"div\">>(\n  function EmptyStateAction({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(emptyState().action, className)}\n        data-slot=\"empty-state-action\"\n      />\n    );\n  },\n);\n\nexport const EmptyState = Object.assign(EmptyStateRoot, {\n  Root: EmptyStateRoot,\n  Icon: EmptyStateIcon,\n  Title: EmptyStateTitle,\n  Description: EmptyStateDescription,\n  Action: EmptyStateAction,\n});\n"],"mappings":";;;;;AAQA,MAAa,kBAAA,GAAA,MAAA,WAAA,CAA8D,SAAS,eAClF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACE,GAAI;EACC;EACL,WAAWA,WAAAA,GAAGC,oBAAAA,WAAW,CAAC,CAAC,MAAM,SAAS;EAC1C,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC;AAED,MAAa,kBAAA,GAAA,MAAA,WAAA,CACX,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACC;EACL,WAAWD,WAAAA,GAAGC,oBAAAA,WAAW,CAAC,CAAC,MAAM,SAAS;EAC1C,aAAU;CACX,CAAA;AAEL,CACF;AAEA,MAAa,mBAAA,GAAA,MAAA,WAAA,CACX,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;EACE,GAAI;EACC;EACL,WAAWD,WAAAA,GAAGC,oBAAAA,WAAW,CAAC,CAAC,OAAO,SAAS;EAC3C,aAAU;CACX,CAAA;AAEL,CACF;AAEA,MAAa,yBAAA,GAAA,MAAA,WAAA,CAGX,SAAS,sBAAsB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC7D,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;EACE,GAAI;EACC;EACL,WAAWD,WAAAA,GAAGC,oBAAAA,WAAW,CAAC,CAAC,aAAa,SAAS;EACjD,aAAU;CACX,CAAA;AAEL,CAAC;AAED,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,WAAWD,WAAAA,GAAGC,oBAAAA,WAAW,CAAC,CAAC,QAAQ,SAAS;EAC5C,aAAU;CACX,CAAA;AAEL,CACF;AAEA,MAAa,aAAa,OAAO,OAAO,gBAAgB;CACtD,MAAM;CACN,MAAM;CACN,OAAO;CACP,aAAa;CACb,QAAQ;AACV,CAAC"}

package/dist/components/empty-state/empty-state.d.cts

@@ -0,0 +1,18 @@
+import { ComponentPropsWithoutRef } from "react";
+//#region src/components/empty-state/empty-state.d.ts
+type EmptyStateRootProps = ComponentPropsWithoutRef<"section">;
+declare const EmptyStateRoot: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+declare const EmptyStateIcon: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const EmptyStateTitle: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+declare const EmptyStateDescription: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+declare const EmptyStateAction: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const EmptyState: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+  Icon: 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>>;
+  Description: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+  Action: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { EmptyState, EmptyStateAction, EmptyStateDescription, EmptyStateIcon, EmptyStateRoot, EmptyStateRootProps, EmptyStateTitle };
+//# sourceMappingURL=empty-state.d.cts.map

package/dist/components/empty-state/empty-state.d.ts

@@ -0,0 +1,18 @@
+import { ComponentPropsWithoutRef } from "react";
+//#region src/components/empty-state/empty-state.d.ts
+type EmptyStateRootProps = ComponentPropsWithoutRef<"section">;
+declare const EmptyStateRoot: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+declare const EmptyStateIcon: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const EmptyStateTitle: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+declare const EmptyStateDescription: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+declare const EmptyStateAction: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const EmptyState: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+  Icon: 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>>;
+  Description: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+  Action: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { EmptyState, EmptyStateAction, EmptyStateDescription, EmptyStateIcon, EmptyStateRoot, EmptyStateRootProps, EmptyStateTitle };
+//# sourceMappingURL=empty-state.d.ts.map

package/dist/components/empty-state/empty-state.js

@@ -0,0 +1,57 @@
+import { cx } from "../../styled-system/css/cx.js";
+import { emptyState } from "../../styled-system/recipes/empty-state.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/empty-state/empty-state.tsx
+const EmptyStateRoot = forwardRef(function EmptyStateRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("section", {
+		...props,
+		ref,
+		className: cx(emptyState().root, className),
+		"data-jaci-component": "empty-state",
+		"data-slot": "empty-state"
+	});
+});
+const EmptyStateIcon = forwardRef(function EmptyStateIcon({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		className: cx(emptyState().icon, className),
+		"data-slot": "empty-state-icon"
+	});
+});
+const EmptyStateTitle = forwardRef(function EmptyStateTitle({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("h3", {
+		...props,
+		ref,
+		className: cx(emptyState().title, className),
+		"data-slot": "empty-state-title"
+	});
+});
+const EmptyStateDescription = forwardRef(function EmptyStateDescription({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("p", {
+		...props,
+		ref,
+		className: cx(emptyState().description, className),
+		"data-slot": "empty-state-description"
+	});
+});
+const EmptyStateAction = forwardRef(function EmptyStateAction({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		className: cx(emptyState().action, className),
+		"data-slot": "empty-state-action"
+	});
+});
+const EmptyState = Object.assign(EmptyStateRoot, {
+	Root: EmptyStateRoot,
+	Icon: EmptyStateIcon,
+	Title: EmptyStateTitle,
+	Description: EmptyStateDescription,
+	Action: EmptyStateAction
+});
+//#endregion
+export { EmptyState, EmptyStateAction, EmptyStateDescription, EmptyStateIcon, EmptyStateRoot, EmptyStateTitle };
+
+//# sourceMappingURL=empty-state.js.map

package/dist/components/empty-state/empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.js","names":[],"sources":["../../../src/components/empty-state/empty-state.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { emptyState } from \"../../styled-system/recipes\";\n\nexport type EmptyStateRootProps = ComponentPropsWithoutRef<\"section\">;\n\nexport const EmptyStateRoot = forwardRef<HTMLElement, EmptyStateRootProps>(function EmptyStateRoot(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <section\n      {...props}\n      ref={ref}\n      className={cx(emptyState().root, className)}\n      data-jaci-component=\"empty-state\"\n      data-slot=\"empty-state\"\n    />\n  );\n});\n\nexport const EmptyStateIcon = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<\"div\">>(\n  function EmptyStateIcon({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(emptyState().icon, className)}\n        data-slot=\"empty-state-icon\"\n      />\n    );\n  },\n);\n\nexport const EmptyStateTitle = forwardRef<HTMLHeadingElement, ComponentPropsWithoutRef<\"h3\">>(\n  function EmptyStateTitle({ className, ...props }, ref) {\n    return (\n      <h3\n        {...props}\n        ref={ref}\n        className={cx(emptyState().title, className)}\n        data-slot=\"empty-state-title\"\n      />\n    );\n  },\n);\n\nexport const EmptyStateDescription = forwardRef<\n  HTMLParagraphElement,\n  ComponentPropsWithoutRef<\"p\">\n>(function EmptyStateDescription({ className, ...props }, ref) {\n  return (\n    <p\n      {...props}\n      ref={ref}\n      className={cx(emptyState().description, className)}\n      data-slot=\"empty-state-description\"\n    />\n  );\n});\n\nexport const EmptyStateAction = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<\"div\">>(\n  function EmptyStateAction({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(emptyState().action, className)}\n        data-slot=\"empty-state-action\"\n      />\n    );\n  },\n);\n\nexport const EmptyState = Object.assign(EmptyStateRoot, {\n  Root: EmptyStateRoot,\n  Icon: EmptyStateIcon,\n  Title: EmptyStateTitle,\n  Description: EmptyStateDescription,\n  Action: EmptyStateAction,\n});\n"],"mappings":";;;;;AAQA,MAAa,iBAAiB,WAA6C,SAAS,eAClF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,WAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,WAAW,CAAC,CAAC,MAAM,SAAS;EAC1C,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC;AAED,MAAa,iBAAiB,WAC5B,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,WAAW,CAAC,CAAC,MAAM,SAAS;EAC1C,aAAU;CACX,CAAA;AAEL,CACF;AAEA,MAAa,kBAAkB,WAC7B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,oBAAC,MAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,WAAW,CAAC,CAAC,OAAO,SAAS;EAC3C,aAAU;CACX,CAAA;AAEL,CACF;AAEA,MAAa,wBAAwB,WAGnC,SAAS,sBAAsB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC7D,OACE,oBAAC,KAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,WAAW,CAAC,CAAC,aAAa,SAAS;EACjD,aAAU;CACX,CAAA;AAEL,CAAC;AAED,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAS,KAAK;CACtD,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,WAAW,CAAC,CAAC,QAAQ,SAAS;EAC5C,aAAU;CACX,CAAA;AAEL,CACF;AAEA,MAAa,aAAa,OAAO,OAAO,gBAAgB;CACtD,MAAM;CACN,MAAM;CACN,OAAO;CACP,aAAa;CACb,QAAQ;AACV,CAAC"}

package/dist/components/empty-state/index.d.cts

@@ -0,0 +1,2 @@
+import { EmptyState, EmptyStateAction, EmptyStateDescription, EmptyStateIcon, EmptyStateRoot, EmptyStateRootProps, EmptyStateTitle } from "./empty-state.cjs";
+export { EmptyState, EmptyStateAction, EmptyStateDescription, EmptyStateIcon, EmptyStateRoot, type EmptyStateRootProps, EmptyStateTitle };

package/dist/components/empty-state/index.d.ts

@@ -0,0 +1,2 @@
+import { EmptyState, EmptyStateAction, EmptyStateDescription, EmptyStateIcon, EmptyStateRoot, EmptyStateRootProps, EmptyStateTitle } from "./empty-state.js";
+export { EmptyState, EmptyStateAction, EmptyStateDescription, EmptyStateIcon, EmptyStateRoot, type EmptyStateRootProps, EmptyStateTitle };

package/dist/components/icon-button/icon-button.cjs

@@ -0,0 +1,40 @@
+"use client";
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_icon_button = require("../../styled-system/recipes/icon-button.cjs");
+const require_index = require("../layout/index.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/icon-button/icon-button.tsx
+function hasTextualContent(children) {
+	if (typeof children === "string" || typeof children === "number") return String(children).trim().length > 0;
+	return react.Children.toArray(children).some((child) => {
+		if (!(0, react.isValidElement)(child)) return false;
+		return hasTextualContent(child.props.children);
+	});
+}
+const IconButton = (0, react.forwardRef)(function IconButton({ children, className, disabled, loading = false, size = "md", variant = "outline", ...props }, ref) {
+	if (!hasTextualContent(children) && !props["aria-label"] && !props["aria-labelledby"]) throw new Error("IconButton requires an aria-label when it has no textual content.");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		...props,
+		ref,
+		"aria-busy": loading || void 0,
+		className: require_cx.cx(require_icon_button.iconButton({
+			size,
+			variant
+		}), className),
+		"data-jaci-component": "icon-button",
+		"data-loading": loading || void 0,
+		"data-slot": "icon-button",
+		disabled: disabled || loading,
+		type: props.type ?? "button",
+		children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Spinner, {
+			"aria-hidden": "true",
+			label: "",
+			size: "sm"
+		}) : children
+	});
+});
+//#endregion
+exports.IconButton = IconButton;
+
+//# sourceMappingURL=icon-button.cjs.map

package/dist/components/icon-button/icon-button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.cjs","names":["Children","cx","iconButton","Spinner"],"sources":["../../../src/components/icon-button/icon-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Children, forwardRef, isValidElement } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { iconButton } from \"../../styled-system/recipes\";\nimport { Spinner } from \"../layout\";\n\nexport interface IconButtonProps\n  extends Omit<ComponentPropsWithoutRef<\"button\">, \"children\" | \"color\"> {\n  children?: ReactNode;\n  variant?: \"solid\" | \"outline\" | \"ghost\" | \"danger\";\n  size?: \"sm\" | \"md\" | \"lg\";\n  loading?: boolean;\n}\n\nfunction hasTextualContent(children: ReactNode): boolean {\n  if (typeof children === \"string\" || typeof children === \"number\") {\n    return String(children).trim().length > 0;\n  }\n\n  return Children.toArray(children).some((child) => {\n    if (!isValidElement(child)) return false;\n    return hasTextualContent((child.props as { children?: ReactNode }).children);\n  });\n}\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  { children, className, disabled, loading = false, size = \"md\", variant = \"outline\", ...props },\n  ref,\n) {\n  if (!hasTextualContent(children) && !props[\"aria-label\"] && !props[\"aria-labelledby\"]) {\n    throw new Error(\"IconButton requires an aria-label when it has no textual content.\");\n  }\n\n  return (\n    <button\n      {...props}\n      ref={ref}\n      aria-busy={loading || undefined}\n      className={cx(iconButton({ size, variant }), className)}\n      data-jaci-component=\"icon-button\"\n      data-loading={loading || undefined}\n      data-slot=\"icon-button\"\n      disabled={disabled || loading}\n      type={props.type ?? \"button\"}\n    >\n      {loading ? <Spinner aria-hidden=\"true\" label=\"\" size=\"sm\" /> : children}\n    </button>\n  );\n});\n"],"mappings":";;;;;;;AAiBA,SAAS,kBAAkB,UAA8B;CACvD,IAAI,OAAO,aAAa,YAAY,OAAO,aAAa,UACtD,OAAO,OAAO,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS;CAG1C,OAAOA,MAAAA,SAAS,QAAQ,QAAQ,CAAC,CAAC,MAAM,UAAU;EAChD,IAAI,EAAA,GAAA,MAAA,eAAA,CAAgB,KAAK,GAAG,OAAO;EACnC,OAAO,kBAAmB,MAAM,MAAmC,QAAQ;CAC7E,CAAC;AACH;AAEA,MAAa,cAAA,GAAA,MAAA,WAAA,CAA4D,SAAS,WAChF,EAAE,UAAU,WAAW,UAAU,UAAU,OAAO,OAAO,MAAM,UAAU,WAAW,GAAG,SACvF,KACA;CACA,IAAI,CAAC,kBAAkB,QAAQ,KAAK,CAAC,MAAM,iBAAiB,CAAC,MAAM,oBACjE,MAAM,IAAI,MAAM,mEAAmE;CAGrF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACE,GAAI;EACC;EACL,aAAW,WAAW,KAAA;EACtB,WAAWC,WAAAA,GAAGC,oBAAAA,WAAW;GAAE;GAAM;EAAQ,CAAC,GAAG,SAAS;EACtD,uBAAoB;EACpB,gBAAc,WAAW,KAAA;EACzB,aAAU;EACV,UAAU,YAAY;EACtB,MAAM,MAAM,QAAQ;YAEnB,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,SAAD;GAAS,eAAY;GAAO,OAAM;GAAG,MAAK;EAAM,CAAA,IAAI;CACzD,CAAA;AAEZ,CAAC"}

package/dist/components/icon-button/icon-button.d.cts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/icon-button/icon-button.d.ts
+interface IconButtonProps extends Omit<ComponentPropsWithoutRef<"button">, "children" | "color"> {
+  children?: ReactNode;
+  variant?: "solid" | "outline" | "ghost" | "danger";
+  size?: "sm" | "md" | "lg";
+  loading?: boolean;
+}
+declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { IconButton, IconButtonProps };
+//# sourceMappingURL=icon-button.d.cts.map

package/dist/components/icon-button/icon-button.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/icon-button/icon-button.d.ts
+interface IconButtonProps extends Omit<ComponentPropsWithoutRef<"button">, "children" | "color"> {
+  children?: ReactNode;
+  variant?: "solid" | "outline" | "ghost" | "danger";
+  size?: "sm" | "md" | "lg";
+  loading?: boolean;
+}
+declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { IconButton, IconButtonProps };
+//# sourceMappingURL=icon-button.d.ts.map

package/dist/components/icon-button/icon-button.js

@@ -0,0 +1,40 @@
+"use client";
+import { cx } from "../../styled-system/css/cx.js";
+import { iconButton } from "../../styled-system/recipes/icon-button.js";
+import { Spinner } from "../layout/index.js";
+import { Children, forwardRef, isValidElement } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/icon-button/icon-button.tsx
+function hasTextualContent(children) {
+	if (typeof children === "string" || typeof children === "number") return String(children).trim().length > 0;
+	return Children.toArray(children).some((child) => {
+		if (!isValidElement(child)) return false;
+		return hasTextualContent(child.props.children);
+	});
+}
+const IconButton = forwardRef(function IconButton({ children, className, disabled, loading = false, size = "md", variant = "outline", ...props }, ref) {
+	if (!hasTextualContent(children) && !props["aria-label"] && !props["aria-labelledby"]) throw new Error("IconButton requires an aria-label when it has no textual content.");
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		ref,
+		"aria-busy": loading || void 0,
+		className: cx(iconButton({
+			size,
+			variant
+		}), className),
+		"data-jaci-component": "icon-button",
+		"data-loading": loading || void 0,
+		"data-slot": "icon-button",
+		disabled: disabled || loading,
+		type: props.type ?? "button",
+		children: loading ? /* @__PURE__ */ jsx(Spinner, {
+			"aria-hidden": "true",
+			label: "",
+			size: "sm"
+		}) : children
+	});
+});
+//#endregion
+export { IconButton };
+
+//# sourceMappingURL=icon-button.js.map

package/dist/components/icon-button/icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.js","names":[],"sources":["../../../src/components/icon-button/icon-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Children, forwardRef, isValidElement } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { iconButton } from \"../../styled-system/recipes\";\nimport { Spinner } from \"../layout\";\n\nexport interface IconButtonProps\n  extends Omit<ComponentPropsWithoutRef<\"button\">, \"children\" | \"color\"> {\n  children?: ReactNode;\n  variant?: \"solid\" | \"outline\" | \"ghost\" | \"danger\";\n  size?: \"sm\" | \"md\" | \"lg\";\n  loading?: boolean;\n}\n\nfunction hasTextualContent(children: ReactNode): boolean {\n  if (typeof children === \"string\" || typeof children === \"number\") {\n    return String(children).trim().length > 0;\n  }\n\n  return Children.toArray(children).some((child) => {\n    if (!isValidElement(child)) return false;\n    return hasTextualContent((child.props as { children?: ReactNode }).children);\n  });\n}\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  { children, className, disabled, loading = false, size = \"md\", variant = \"outline\", ...props },\n  ref,\n) {\n  if (!hasTextualContent(children) && !props[\"aria-label\"] && !props[\"aria-labelledby\"]) {\n    throw new Error(\"IconButton requires an aria-label when it has no textual content.\");\n  }\n\n  return (\n    <button\n      {...props}\n      ref={ref}\n      aria-busy={loading || undefined}\n      className={cx(iconButton({ size, variant }), className)}\n      data-jaci-component=\"icon-button\"\n      data-loading={loading || undefined}\n      data-slot=\"icon-button\"\n      disabled={disabled || loading}\n      type={props.type ?? \"button\"}\n    >\n      {loading ? <Spinner aria-hidden=\"true\" label=\"\" size=\"sm\" /> : children}\n    </button>\n  );\n});\n"],"mappings":";;;;;;;AAiBA,SAAS,kBAAkB,UAA8B;CACvD,IAAI,OAAO,aAAa,YAAY,OAAO,aAAa,UACtD,OAAO,OAAO,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS;CAG1C,OAAO,SAAS,QAAQ,QAAQ,CAAC,CAAC,MAAM,UAAU;EAChD,IAAI,CAAC,eAAe,KAAK,GAAG,OAAO;EACnC,OAAO,kBAAmB,MAAM,MAAmC,QAAQ;CAC7E,CAAC;AACH;AAEA,MAAa,aAAa,WAA+C,SAAS,WAChF,EAAE,UAAU,WAAW,UAAU,UAAU,OAAO,OAAO,MAAM,UAAU,WAAW,GAAG,SACvF,KACA;CACA,IAAI,CAAC,kBAAkB,QAAQ,KAAK,CAAC,MAAM,iBAAiB,CAAC,MAAM,oBACjE,MAAM,IAAI,MAAM,mEAAmE;CAGrF,OACE,oBAAC,UAAD;EACE,GAAI;EACC;EACL,aAAW,WAAW,KAAA;EACtB,WAAW,GAAG,WAAW;GAAE;GAAM;EAAQ,CAAC,GAAG,SAAS;EACtD,uBAAoB;EACpB,gBAAc,WAAW,KAAA;EACzB,aAAU;EACV,UAAU,YAAY;EACtB,MAAM,MAAM,QAAQ;YAEnB,UAAU,oBAAC,SAAD;GAAS,eAAY;GAAO,OAAM;GAAG,MAAK;EAAM,CAAA,IAAI;CACzD,CAAA;AAEZ,CAAC"}

package/dist/components/icon-button/index.d.cts

@@ -0,0 +1,2 @@
+import { IconButton, IconButtonProps } from "./icon-button.cjs";
+export { IconButton, type IconButtonProps };

package/dist/components/icon-button/index.d.ts

@@ -0,0 +1,2 @@
+import { IconButton, IconButtonProps } from "./icon-button.js";
+export { IconButton, type IconButtonProps };

package/dist/components/input-group/index.d.cts

@@ -0,0 +1,2 @@
+import { InputGroup, InputGroupAddon, InputGroupAddonProps, InputGroupRoot, InputGroupRootProps } from "./input-group.cjs";
+export { InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupRoot, type InputGroupRootProps };

package/dist/components/input-group/index.d.ts

@@ -0,0 +1,2 @@
+import { InputGroup, InputGroupAddon, InputGroupAddonProps, InputGroupRoot, InputGroupRootProps } from "./input-group.js";
+export { InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupRoot, type InputGroupRootProps };

package/dist/components/input-group/input-group.cjs

@@ -0,0 +1,32 @@
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_input_group = require("../../styled-system/recipes/input-group.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/input-group/input-group.tsx
+const InputGroupRoot = (0, react.forwardRef)(function InputGroupRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		ref,
+		className: require_cx.cx(require_input_group.inputGroup().root, className),
+		"data-jaci-component": "input-group",
+		"data-slot": "input-group"
+	});
+});
+const InputGroupAddon = (0, react.forwardRef)(function InputGroupAddon({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		...props,
+		ref,
+		className: require_cx.cx(require_input_group.inputGroup().addon, className),
+		"data-slot": "input-group-addon"
+	});
+});
+const InputGroup = Object.assign(InputGroupRoot, {
+	Root: InputGroupRoot,
+	Addon: InputGroupAddon
+});
+//#endregion
+exports.InputGroup = InputGroup;
+exports.InputGroupAddon = InputGroupAddon;
+exports.InputGroupRoot = InputGroupRoot;
+
+//# sourceMappingURL=input-group.cjs.map

package/dist/components/input-group/input-group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.cjs","names":["cx","inputGroup"],"sources":["../../../src/components/input-group/input-group.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { inputGroup } from \"../../styled-system/recipes\";\n\nexport interface InputGroupRootProps extends ComponentPropsWithoutRef<\"div\"> {\n  children?: ReactNode;\n}\n\nexport const InputGroupRoot = forwardRef<HTMLDivElement, InputGroupRootProps>(\n  function InputGroupRoot({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(inputGroup().root, className)}\n        data-jaci-component=\"input-group\"\n        data-slot=\"input-group\"\n      />\n    );\n  },\n);\n\nexport type InputGroupAddonProps = ComponentPropsWithoutRef<\"span\">;\nexport const InputGroupAddon = forwardRef<HTMLSpanElement, InputGroupAddonProps>(\n  function InputGroupAddon({ className, ...props }, ref) {\n    return (\n      <span\n        {...props}\n        ref={ref}\n        className={cx(inputGroup().addon, className)}\n        data-slot=\"input-group-addon\"\n      />\n    );\n  },\n);\n\nexport const InputGroup = Object.assign(InputGroupRoot, {\n  Root: InputGroupRoot,\n  Addon: InputGroupAddon,\n});\n"],"mappings":";;;;;AAUA,MAAa,kBAAA,GAAA,MAAA,WAAA,CACX,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACC;EACL,WAAWA,WAAAA,GAAGC,oBAAAA,WAAW,CAAC,CAAC,MAAM,SAAS;EAC1C,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CACF;AAGA,MAAa,mBAAA,GAAA,MAAA,WAAA,CACX,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,GAAI;EACC;EACL,WAAWD,WAAAA,GAAGC,oBAAAA,WAAW,CAAC,CAAC,OAAO,SAAS;EAC3C,aAAU;CACX,CAAA;AAEL,CACF;AAEA,MAAa,aAAa,OAAO,OAAO,gBAAgB;CACtD,MAAM;CACN,OAAO;AACT,CAAC"}

package/dist/components/input-group/input-group.d.cts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/input-group/input-group.d.ts
+interface InputGroupRootProps extends ComponentPropsWithoutRef<"div"> {
+  children?: ReactNode;
+}
+declare const InputGroupRoot: import("react").ForwardRefExoticComponent<InputGroupRootProps & import("react").RefAttributes<HTMLDivElement>>;
+type InputGroupAddonProps = ComponentPropsWithoutRef<"span">;
+declare const InputGroupAddon: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare const InputGroup: import("react").ForwardRefExoticComponent<InputGroupRootProps & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<InputGroupRootProps & import("react").RefAttributes<HTMLDivElement>>;
+  Addon: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupAddonProps, InputGroupRoot, InputGroupRootProps };
+//# sourceMappingURL=input-group.d.cts.map

package/dist/components/input-group/input-group.d.ts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/input-group/input-group.d.ts
+interface InputGroupRootProps extends ComponentPropsWithoutRef<"div"> {
+  children?: ReactNode;
+}
+declare const InputGroupRoot: import("react").ForwardRefExoticComponent<InputGroupRootProps & import("react").RefAttributes<HTMLDivElement>>;
+type InputGroupAddonProps = ComponentPropsWithoutRef<"span">;
+declare const InputGroupAddon: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare const InputGroup: import("react").ForwardRefExoticComponent<InputGroupRootProps & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<InputGroupRootProps & import("react").RefAttributes<HTMLDivElement>>;
+  Addon: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupAddonProps, InputGroupRoot, InputGroupRootProps };
+//# sourceMappingURL=input-group.d.ts.map

package/dist/components/input-group/input-group.js

@@ -0,0 +1,30 @@
+import { cx } from "../../styled-system/css/cx.js";
+import { inputGroup } from "../../styled-system/recipes/input-group.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/input-group/input-group.tsx
+const InputGroupRoot = forwardRef(function InputGroupRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		className: cx(inputGroup().root, className),
+		"data-jaci-component": "input-group",
+		"data-slot": "input-group"
+	});
+});
+const InputGroupAddon = forwardRef(function InputGroupAddon({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		ref,
+		className: cx(inputGroup().addon, className),
+		"data-slot": "input-group-addon"
+	});
+});
+const InputGroup = Object.assign(InputGroupRoot, {
+	Root: InputGroupRoot,
+	Addon: InputGroupAddon
+});
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupRoot };
+
+//# sourceMappingURL=input-group.js.map

package/dist/components/input-group/input-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.js","names":[],"sources":["../../../src/components/input-group/input-group.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { inputGroup } from \"../../styled-system/recipes\";\n\nexport interface InputGroupRootProps extends ComponentPropsWithoutRef<\"div\"> {\n  children?: ReactNode;\n}\n\nexport const InputGroupRoot = forwardRef<HTMLDivElement, InputGroupRootProps>(\n  function InputGroupRoot({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(inputGroup().root, className)}\n        data-jaci-component=\"input-group\"\n        data-slot=\"input-group\"\n      />\n    );\n  },\n);\n\nexport type InputGroupAddonProps = ComponentPropsWithoutRef<\"span\">;\nexport const InputGroupAddon = forwardRef<HTMLSpanElement, InputGroupAddonProps>(\n  function InputGroupAddon({ className, ...props }, ref) {\n    return (\n      <span\n        {...props}\n        ref={ref}\n        className={cx(inputGroup().addon, className)}\n        data-slot=\"input-group-addon\"\n      />\n    );\n  },\n);\n\nexport const InputGroup = Object.assign(InputGroupRoot, {\n  Root: InputGroupRoot,\n  Addon: InputGroupAddon,\n});\n"],"mappings":";;;;;AAUA,MAAa,iBAAiB,WAC5B,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,WAAW,CAAC,CAAC,MAAM,SAAS;EAC1C,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CACF;AAGA,MAAa,kBAAkB,WAC7B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,oBAAC,QAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,WAAW,CAAC,CAAC,OAAO,SAAS;EAC3C,aAAU;CACX,CAAA;AAEL,CACF;AAEA,MAAa,aAAa,OAAO,OAAO,gBAAgB;CACtD,MAAM;CACN,OAAO;AACT,CAAC"}