@marwes-ui/react 0.0.3 → 0.0.4

package/README.md

@@ -18,14 +18,14 @@ pnpm add @marwes-ui/core @marwes-ui/react @marwes-ui/presets
 
 ## Quick Start
 ```tsx
-import { MarwesProvider, Button, Input, Checkbox } from "@marwes-ui/react";
+import { MarwesProvider, Button, ButtonVariant, Input, Checkbox } from "@marwes-ui/react";
 import { firstEdition } from "@marwes-ui/presets";
 import "@marwes-ui/presets/firstEdition/styles.css";
 
 export function App() {
   return (
     <MarwesProvider preset={firstEdition} theme={{ color: { primary: "#5B8CFF" } }}>
-      <Button tone="primary">Save</Button>
+      <Button variant={ButtonVariant.primary}>Save</Button>
       <Input placeholder="Email" onValueChange={(v) => console.log(v)} />
       <Checkbox ariaLabel="Subscribe" />
     </MarwesProvider>
@@ -33,6 +33,37 @@ export function App() {
 }
 ```
 
+## Button Philosophy
+
+Marwes buttons follow a **semantic-first** approach:
+
+### Recommended: Semantic Components
+```tsx
+import { CancelButton, SubmitButton, CreateButton, DangerButton } from "@marwes-ui/react";
+
+// These auto-set AI-friendly action metadata
+<CancelButton onClick={handleCancel}>Cancel</CancelButton>
+<SubmitButton>Save</SubmitButton>
+<CreateButton onClick={handleCreate}>New Item</CreateButton>
+<DangerButton onClick={handleDelete}>Delete</DangerButton>
+```
+
+### Advanced: Raw Props with Type-Safe Enums
+```tsx
+import { Button, ButtonVariant, ButtonSize, ButtonAction } from "@marwes-ui/react";
+
+// For dynamic or custom scenarios
+<Button
+  variant={ButtonVariant.primary}
+  size={ButtonSize.md}
+  action={ButtonAction.submit}
+>
+  Submit
+</Button>
+```
+
+Semantic components are preferred for guaranteed AI context and consistent UX.
+
 ## Current Exports
 Provider and hooks:
 - `MarwesProvider`
@@ -40,13 +71,19 @@ Provider and hooks:
 - `useSystem`
 
 Atoms:
-- `Button`
+- `Button`, `PrimaryButton`, `SecondaryButton`, `TextButton`
+- `CancelButton`, `SubmitButton`, `CreateButton`, `DangerButton`, `LinkButton`
 - `Input`
 - `Icon`
 - `Checkbox`
 - `H1`, `H2`, `H3`
 - `Paragraph`
 
+Enums (const objects):
+- `ButtonVariant` - `primary`, `secondary`, `text`
+- `ButtonSize` - `xs`, `sm`, `md`, `lg`
+- `ButtonAction` - `submit`, `cancel`, `create`, `delete`, `navigate`, `edit`, `reset`, `button`
+
 Molecules:
 - `CheckboxField`
 

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Preset, ThemeOverrides, ThemeMode, System, Theme, ButtonOptions, InputOptions, iconRegistry, IconSize, IconStrokeWidth, CheckboxProps as CheckboxProps$1, DividerOptions, DividerSize, DividerOrientation, HeadingOptions, HeadingSize, ParagraphOptions, ParagraphSize } from '@marwes-ui/core';
-export { Preset, System, Theme, ThemeOverrides } from '@marwes-ui/core';
+export { ButtonAction, ButtonSize, ButtonVariant, IconName, Preset, System, Theme, ThemeOverrides } from '@marwes-ui/core';
 import * as React from 'react';
 
 type MarwesProviderProps = {
@@ -52,7 +52,7 @@ declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
  * metadata, making it easier for both developers and AI tools to understand
  * the purpose and behavior of each button.
  */
-type DangerButtonProps = Omit<ButtonProps, "tone" | "action"> & {
+type DangerButtonProps = Omit<ButtonProps, "variant" | "action"> & {
     /**
      * Override automatic confirmation requirement.
      * Defaults to `true` for destructive actions.
@@ -63,7 +63,7 @@ type DangerButtonProps = Omit<ButtonProps, "tone" | "action"> & {
  * DangerButton - For destructive actions like delete, remove, or irreversible operations.
  *
  * **AI Context:**
- * - Sets `tone="danger"` for visual warning
+ * - Sets `variant="primary"` with error state for visual warning
  * - Sets `action="delete"` to indicate destructive behavior
  * - Enables confirmation by default
  * - Adds `data-destructive="true"` for AI parsing
@@ -110,13 +110,13 @@ type SubmitButtonProps = Omit<ButtonProps, "action" | "as">;
  * ```
  */
 declare function SubmitButton(props: SubmitButtonProps): react_jsx_runtime.JSX.Element;
-type CancelButtonProps = Omit<ButtonProps, "action" | "variant">;
+type CancelButtonProps = Omit<ButtonProps, "action">;
 /**
  * CancelButton - For cancel or reset actions.
  *
  * **AI Context:**
  * - Sets `action="cancel"` to indicate cancellation
- * - Uses ghost variant and secondary tone by default
+ * - Uses secondary variant by default
  * - Adds `data-cancel="true"` for AI parsing
  *
  * @example
@@ -149,7 +149,7 @@ type LinkButtonProps = Omit<ButtonProps, "action" | "as"> & {
  * ```
  */
 declare function LinkButton(props: LinkButtonProps): react_jsx_runtime.JSX.Element;
-type PrimaryButtonProps = Omit<ButtonProps, "tone" | "as"> & {};
+type PrimaryButtonProps = Omit<ButtonProps, "variant" | "as"> & {};
 /**
  * PrimaryButton - For general use when no specific semantic variant fits.
  *
@@ -161,7 +161,7 @@ type PrimaryButtonProps = Omit<ButtonProps, "tone" | "as"> & {};
  * ```
  */
 declare function PrimaryButton(props: PrimaryButtonProps): react_jsx_runtime.JSX.Element;
-type SecondaryButtonProps = Omit<ButtonProps, "tone" | "as"> & {};
+type SecondaryButtonProps = Omit<ButtonProps, "variant" | "as"> & {};
 /**
  * SecondaryButton - For general use when no specific semantic variant fits.
  *
@@ -173,7 +173,7 @@ type SecondaryButtonProps = Omit<ButtonProps, "tone" | "as"> & {};
  * ```
  */
 declare function SecondaryButton(props: SecondaryButtonProps): react_jsx_runtime.JSX.Element;
-type TextButtonProps = Omit<ButtonProps, "tone" | "as"> & {};
+type TextButtonProps = Omit<ButtonProps, "variant" | "as"> & {};
 /**
  * TextButton - For general use when no specific semantic variant fits.
  *
@@ -675,11 +675,11 @@ type InputFieldProps = {
     /** Optional: if omitted, we generate one via useId(). */
     id?: string;
     /** Field label (required for accessibility). */
-    label: React.ReactNode;
+    label: string;
     /** Optional helper text shown below the input. */
-    helperText?: React.ReactNode;
+    helperText?: string;
     /** Optional error message. When present, input is marked invalid. */
-    error?: React.ReactNode;
+    error?: string;
     /** Props forwarded to the Input atom. */
     input: InputProps;
     /** Additional aria-describedby IDs to merge with internal helper/error IDs. */
@@ -776,4 +776,234 @@ type InputFieldProps = {
  */
 declare function InputField(props: InputFieldProps): React.ReactElement;
 
-export { Button, type ButtonProps, CancelButton, type CancelButtonProps, Checkbox, CheckboxField, type CheckboxFieldProps, type CheckboxProps, CreateButton, type CreateButtonProps, DangerButton, type DangerButtonProps, Divider, type DividerProps, H1, type H1Props, H2, type H2Props, H3, type H3Props, Icon, type IconProps, Input, InputField, type InputFieldProps, type InputProps, LinkButton, type LinkButtonProps, MarwesProvider, type MarwesProviderProps, Paragraph, type ParagraphProps, PrimaryButton, type PrimaryButtonProps, SecondaryButton, type SecondaryButtonProps, SubmitButton, type SubmitButtonProps, TextButton, type TextButtonProps, useRenderKitDebug, useSystem, useTheme };
+/**
+ * Field Variants - AI-Friendly Components
+ *
+ * These variants encode best practices and automatically set AI-friendly
+ * metadata, making it easier for both developers and AI tools to understand
+ * the purpose and behavior of each field.
+ *
+ * Each variant manages its own purpose-specific logic (password toggle,
+ * search clear, etc.) and sets appropriate semantic attributes.
+ */
+type SearchFieldProps = Omit<InputFieldProps, "input"> & {
+    /**
+     * Input-specific props (type is auto-set to "search")
+     */
+    input?: Omit<InputProps, "type">;
+};
+/**
+ * SearchField - For search inputs with automatic clear button functionality.
+ *
+ * **AI Context:**
+ * - Sets `type="search"` automatically
+ * - Sets `inputMode="search"` for mobile keyboards
+ * - Shows clear button (X icon) when field has content
+ * - Adds `data-purpose="search"` for AI parsing
+ *
+ * **Features:**
+ * - Automatic clear button that appears when typing
+ * - Native search input behavior
+ * - Optimized mobile keyboard
+ * - Controlled and uncontrolled modes supported
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { SearchField } from "@marwes-ui/react";
+ *
+ * export function Example() {
+ *   const [query, setQuery] = React.useState("");
+ *   return (
+ *     <SearchField
+ *       label="Search products"
+ *       input={{ value: query, onValueChange: setQuery }}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function SearchField(props: SearchFieldProps): React.ReactElement;
+type PasswordFieldProps = Omit<InputFieldProps, "input"> & {
+    /**
+     * Input-specific props (type is auto-set to "password")
+     */
+    input?: Omit<InputProps, "type">;
+    /**
+     * Autocomplete hint: "current-password" or "new-password"
+     * Defaults to "current-password"
+     */
+    autoComplete?: "current-password" | "new-password";
+};
+/**
+ * PasswordField - For password inputs with automatic show/hide toggle.
+ *
+ * **AI Context:**
+ * - Sets `type="password"` automatically (toggles to "text" when shown)
+ * - Shows eye/eyeOff icon toggle button
+ * - Sets appropriate `autoComplete` attribute
+ * - Adds `data-purpose="password"` for AI parsing
+ *
+ * **Features:**
+ * - Automatic show/hide toggle with eye icon
+ * - Proper autocomplete for password managers
+ * - Accessible toggle button with clear labels
+ * - Controlled and uncontrolled modes supported
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { PasswordField } from "@marwes-ui/react";
+ *
+ * export function Example() {
+ *   const [password, setPassword] = React.useState("");
+ *   return (
+ *     <PasswordField
+ *       label="Password"
+ *       input={{ value: password, onValueChange: setPassword }}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example New password (signup/reset)
+ * ```tsx
+ * <PasswordField
+ *   label="New Password"
+ *   autoComplete="new-password"
+ *   helperText="Must be at least 8 characters"
+ * />
+ * ```
+ */
+declare function PasswordField(props: PasswordFieldProps): React.ReactElement;
+type EmailFieldProps = Omit<InputFieldProps, "input"> & {
+    /**
+     * Input-specific props (type, inputMode, autoComplete auto-set)
+     */
+    input?: Omit<InputProps, "type" | "inputMode" | "autoComplete">;
+};
+/**
+ * EmailField - For email address inputs with proper semantic attributes.
+ *
+ * **AI Context:**
+ * - Sets `type="email"` for validation
+ * - Sets `inputMode="email"` for optimized mobile keyboard
+ * - Sets `autoComplete="email"` for autofill
+ * - Adds `data-purpose="email"` for AI parsing
+ *
+ * **Features:**
+ * - Browser email validation
+ * - Email-optimized mobile keyboard
+ * - Autofill support for email addresses
+ *
+ * @example
+ * ```tsx
+ * import { EmailField } from "@marwes-ui/react";
+ *
+ * <EmailField
+ *   label="Email address"
+ *   input={{ placeholder: "you@example.com" }}
+ * />
+ * ```
+ */
+declare function EmailField(props: EmailFieldProps): React.ReactElement;
+type PhoneFieldProps = Omit<InputFieldProps, "input"> & {
+    /**
+     * Input-specific props (type, inputMode, autoComplete auto-set)
+     */
+    input?: Omit<InputProps, "type" | "inputMode" | "autoComplete">;
+};
+/**
+ * PhoneField - For phone number inputs with proper semantic attributes.
+ *
+ * **AI Context:**
+ * - Sets `type="tel"` for telephone input
+ * - Sets `inputMode="tel"` for phone keyboard
+ * - Sets `autoComplete="tel"` for autofill
+ * - Adds `data-purpose="phone"` for AI parsing
+ *
+ * **Features:**
+ * - Phone-optimized mobile keyboard
+ * - Autofill support for phone numbers
+ * - Accepts any phone format (formatting should be done externally)
+ *
+ * @example
+ * ```tsx
+ * import { PhoneField } from "@marwes-ui/react";
+ *
+ * <PhoneField
+ *   label="Phone number"
+ *   input={{ placeholder: "+1 (555) 000-0000" }}
+ * />
+ * ```
+ */
+declare function PhoneField(props: PhoneFieldProps): React.ReactElement;
+type URLFieldProps = Omit<InputFieldProps, "input"> & {
+    /**
+     * Input-specific props (type, inputMode, autoComplete auto-set)
+     */
+    input?: Omit<InputProps, "type" | "inputMode" | "autoComplete">;
+};
+/**
+ * URLField - For URL inputs with proper semantic attributes.
+ *
+ * **AI Context:**
+ * - Sets `type="url"` for URL validation
+ * - Sets `inputMode="url"` for URL keyboard
+ * - Sets `autoComplete="url"` for autofill
+ * - Adds `data-purpose="url"` for AI parsing
+ *
+ * **Features:**
+ * - Browser URL validation
+ * - URL-optimized mobile keyboard
+ * - Autofill support for URLs
+ *
+ * @example
+ * ```tsx
+ * import { URLField } from "@marwes-ui/react";
+ *
+ * <URLField
+ *   label="Website"
+ *   input={{ placeholder: "https://example.com" }}
+ * />
+ * ```
+ */
+declare function URLField(props: URLFieldProps): React.ReactElement;
+type CurrencyFieldProps = Omit<InputFieldProps, "input"> & {
+    /**
+     * Input-specific props (type, inputMode auto-set)
+     */
+    input?: Omit<InputProps, "type" | "inputMode">;
+    /**
+     * Currency code (e.g., "USD", "EUR", "GBP")
+     * Used for helper text and context
+     */
+    currency?: string;
+};
+/**
+ * CurrencyField - For monetary amount inputs with currency context.
+ *
+ * **AI Context:**
+ * - Sets `type="text"` (better browser support than "number")
+ * - Sets `inputMode="decimal"` for numeric keyboard with decimal
+ * - Adds currency code to helper text if provided
+ * - Adds `data-purpose="currency"` and `data-currency` for AI parsing
+ *
+ * **Features:**
+ * - Decimal keyboard on mobile
+ * - Currency code display in helper text
+ * - Better input control than type="number"
+ * - Note: Formatting should be handled by parent component
+ *
+ * @example
+ * ```tsx
+ * import { CurrencyField } from "@marwes-ui/react";
+ *
+ * <CurrencyField
+ *   label="Amount"
+ *   currency="USD"
+ *   input={{ placeholder: "0.00" }}
+ * />
+ * ```
+ */
+declare function CurrencyField(props: CurrencyFieldProps): React.ReactElement;
+
+export { Button, type ButtonProps, CancelButton, type CancelButtonProps, Checkbox, CheckboxField, type CheckboxFieldProps, type CheckboxProps, CreateButton, type CreateButtonProps, CurrencyField, type CurrencyFieldProps, DangerButton, type DangerButtonProps, Divider, type DividerProps, EmailField, type EmailFieldProps, H1, type H1Props, H2, type H2Props, H3, type H3Props, Icon, type IconProps, Input, InputField, type InputFieldProps, type InputProps, LinkButton, type LinkButtonProps, MarwesProvider, type MarwesProviderProps, Paragraph, type ParagraphProps, PasswordField, type PasswordFieldProps, PhoneField, type PhoneFieldProps, PrimaryButton, type PrimaryButtonProps, SearchField, type SearchFieldProps, SecondaryButton, type SecondaryButtonProps, SubmitButton, type SubmitButtonProps, TextButton, type TextButtonProps, URLField, type URLFieldProps, useRenderKitDebug, useSystem, useTheme };

package/dist/index.js

@@ -1,11 +1,12 @@
-import { createDividerRecipe, createSystem, switchMode, resolveIconSize, resolveIconStrokeWidth, iconRegistry, createButtonRecipe, createInputRecipe, checkboxRecipe, headingRecipe, paragraphRecipe } from '@marwes-ui/core';
+import { createDividerRecipe, createSystem, switchMode, resolveIconSize, resolveIconStrokeWidth, iconRegistry, createButtonRecipe, IconName, ButtonAction, ButtonVariant, createInputRecipe, checkboxRecipe, headingRecipe, paragraphRecipe } from '@marwes-ui/core';
+export { ButtonAction, ButtonSize, ButtonVariant, IconName } from '@marwes-ui/core';
 import { firstEdition } from '@marwes-ui/presets';
-import * as React2 from 'react';
+import * as React7 from 'react';
 import { useEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/provider/marwes-provider.tsx
-var MarwesContext = React2.createContext(null);
+var MarwesContext = React7.createContext(null);
 function MarwesProvider({
   preset = firstEdition,
   theme,
@@ -13,13 +14,13 @@ function MarwesProvider({
   onModeChange,
   children
 }) {
-  const initialSystem = React2.useMemo(() => {
+  const initialSystem = React7.useMemo(() => {
     return createSystem({
       preset,
       theme: theme ? { ...theme, mode } : { mode }
     });
   }, [preset, theme, mode]);
-  const system = React2.useMemo(() => {
+  const system = React7.useMemo(() => {
     if (mode === initialSystem.theme.mode) {
       return initialSystem;
     }
@@ -29,7 +30,7 @@ function MarwesProvider({
   return /* @__PURE__ */ jsx(MarwesContext.Provider, { value: { system, onModeChange }, children: /* @__PURE__ */ jsx("div", { className: themeClass, children }) });
 }
 function useSystem() {
-  const ctx = React2.useContext(MarwesContext);
+  const ctx = React7.useContext(MarwesContext);
   if (!ctx) {
     throw new Error("MarwesProvider is missing. Wrap your app in <MarwesProvider />.");
   }
@@ -40,21 +41,6 @@ function useSystem() {
 function useTheme() {
   return useSystem().theme;
 }
-var RENDERKIT_EVENT = "marwes/renderkit/renderkit-update";
-function useRenderKitDebug(renderKit, componentName) {
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      console.log(`[RenderKit Debug] ${componentName}:`, renderKit);
-      const event = new CustomEvent(RENDERKIT_EVENT, {
-        detail: {
-          ...renderKit,
-          _meta: { component: componentName }
-        }
-      });
-      window.dispatchEvent(event);
-    }
-  }, [renderKit, componentName]);
-}
 function Icon({
   name,
   size,
@@ -95,7 +81,6 @@ function Icon({
 function Button(props) {
   const theme = useTheme();
   const kit = createButtonRecipe(theme, props);
-  useRenderKitDebug(kit, "Button");
   const style = kit.vars;
   const className = props.className ? `${kit.className} ${props.className}` : kit.className;
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -157,8 +142,9 @@ function DangerButton(props) {
     Button,
     {
       ...restProps,
-      tone: "primary",
-      action: "delete",
+      variant: ButtonVariant.primary,
+      action: ButtonAction.delete,
+      iconRight: IconName.Minus,
       confirmation,
       dataAttributes: {
         ...props.dataAttributes,
@@ -174,7 +160,7 @@ function CreateButton(props) {
     {
       ...props,
       action: "create",
-      tone: props.tone ?? "primary",
+      variant: props.variant ?? "primary",
       dataAttributes: {
         ...props.dataAttributes,
         "data-creative": "true"
@@ -202,7 +188,7 @@ function CancelButton(props) {
     {
       ...props,
       action: "cancel",
-      tone: props.tone ?? "secondary",
+      variant: props.variant ?? "secondary",
       dataAttributes: {
         ...props.dataAttributes,
         "data-cancel": "true"
@@ -225,13 +211,28 @@ function LinkButton(props) {
   );
 }
 function PrimaryButton(props) {
-  return /* @__PURE__ */ jsx(Button, { ...props, tone: "primary", as: "button" });
+  return /* @__PURE__ */ jsx(Button, { ...props, variant: "primary", as: "button" });
 }
 function SecondaryButton(props) {
-  return /* @__PURE__ */ jsx(Button, { ...props, tone: "secondary", as: "button" });
+  return /* @__PURE__ */ jsx(Button, { ...props, variant: "secondary", as: "button" });
 }
 function TextButton(props) {
-  return /* @__PURE__ */ jsx(Button, { ...props, tone: "text", as: "button" });
+  return /* @__PURE__ */ jsx(Button, { ...props, variant: "text", as: "button" });
+}
+var RENDERKIT_EVENT = "marwes/renderkit/renderkit-update";
+function useRenderKitDebug(renderKit, componentName) {
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      console.log(`[RenderKit Debug] ${componentName}:`, renderKit);
+      const event = new CustomEvent(RENDERKIT_EVENT, {
+        detail: {
+          ...renderKit,
+          _meta: { component: componentName }
+        }
+      });
+      window.dispatchEvent(event);
+    }
+  }, [renderKit, componentName]);
 }
 function Input(props) {
   const theme = useTheme();
@@ -269,8 +270,8 @@ function Checkbox(props) {
   const { onCheckedChange, onChange, ...coreProps } = props;
   const theme = useTheme();
   const kit = checkboxRecipe({ ...coreProps, theme });
-  const inputRef = React2.useRef(null);
-  React2.useLayoutEffect(() => {
+  const inputRef = React7.useRef(null);
+  React7.useLayoutEffect(() => {
     const el = inputRef.current;
     if (!el) return;
     el.indeterminate = kit.indeterminate;
@@ -303,7 +304,7 @@ function Checkbox(props) {
     }
   );
 }
-var Divider = React2.forwardRef((props, ref) => {
+var Divider = React7.forwardRef((props, ref) => {
   const { className: customClassName, style: customStyle, ...opts } = props;
   const theme = useTheme();
   const kit = createDividerRecipe(theme, opts);
@@ -348,7 +349,7 @@ function cx(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function CheckboxField(props) {
-  const reactId = React2.useId();
+  const reactId = React7.useId();
   const id = props.id ?? `mw-checkbox-${reactId}`;
   const hasDescription = props.description !== void 0;
   const hasError = props.error !== void 0;
@@ -384,8 +385,15 @@ function cx2(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function InputField(props) {
-  const reactId = React2.useId();
+  const reactId = React7.useId();
   const id = props.id ?? `mw-input-${reactId}`;
+  const isPasswordField = props.input.type === "password";
+  const [showPassword, setShowPassword] = React7.useState(false);
+  const isSearchField = props.input.type === "search";
+  const [searchValue, setSearchValue] = React7.useState(
+    props.input.value || props.input.defaultValue || ""
+  );
+  const hasSearchValue = isSearchField && (props.input.value !== void 0 ? String(props.input.value).length > 0 : String(searchValue).length > 0);
   const hasHelperText = props.helperText !== void 0;
   const hasError = props.error !== void 0;
   const helperTextId = hasHelperText ? `${id}-helper` : void 0;
@@ -406,17 +414,115 @@ function InputField(props) {
     id,
     invalid
   };
+  if (isPasswordField && showPassword) {
+    inputProps.type = "text";
+  }
+  if (isSearchField) {
+    const originalOnValueChange = props.input.onValueChange;
+    if (props.input.value === void 0) {
+      inputProps.value = searchValue;
+    }
+    inputProps.onValueChange = (value) => {
+      setSearchValue(value);
+      originalOnValueChange?.(value);
+    };
+  }
   if (mergedDescribedBy) {
     inputProps.describedBy = mergedDescribedBy;
   }
+  const handleTogglePassword = () => {
+    setShowPassword((prev) => !prev);
+  };
+  const handleClearSearch = () => {
+    setSearchValue("");
+    props.input.onValueChange?.("");
+  };
   return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
     /* @__PURE__ */ jsx("label", { className: "mw-input-field__label", htmlFor: id, children: /* @__PURE__ */ jsx(Paragraph, { size: "md", children: props.label }) }),
-    /* @__PURE__ */ jsx(Input, { ...inputProps }),
+    /* @__PURE__ */ jsxs("div", { className: "mw-input-field__input-wrapper", children: [
+      /* @__PURE__ */ jsx(Input, { ...inputProps }),
+      isPasswordField && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "mw-input-field__toggle-password",
+          onClick: handleTogglePassword,
+          "aria-label": showPassword ? "Hide password" : "Show password",
+          tabIndex: 0,
+          children: /* @__PURE__ */ jsx(Icon, { name: showPassword ? "eyeOff" : "eye", size: "xs", decorative: true })
+        }
+      ),
+      hasSearchValue && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "mw-input-field__clear-search",
+          onClick: handleClearSearch,
+          "aria-label": "Clear search",
+          tabIndex: 0,
+          children: /* @__PURE__ */ jsx(Icon, { name: "x", size: "xs", decorative: true })
+        }
+      )
+    ] }),
     hasHelperText && !hasError && /* @__PURE__ */ jsx("div", { className: "mw-input-field__helper", id: helperTextId, children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.helperText }) }),
     hasError && /* @__PURE__ */ jsx("div", { className: "mw-input-field__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.error }) })
   ] });
 }
+function SearchField(props) {
+  const enhancedInput = {
+    ...props.input,
+    type: "search",
+    inputMode: "search"
+  };
+  return /* @__PURE__ */ jsx("div", { "data-purpose": "search", children: /* @__PURE__ */ jsx(InputField, { ...props, input: enhancedInput }) });
+}
+function PasswordField(props) {
+  const { autoComplete = "current-password", ...restProps } = props;
+  const enhancedInput = {
+    ...props.input,
+    type: "password",
+    autoComplete
+  };
+  return /* @__PURE__ */ jsx("div", { "data-purpose": "password", children: /* @__PURE__ */ jsx(InputField, { ...restProps, input: enhancedInput }) });
+}
+function EmailField(props) {
+  const enhancedInput = {
+    ...props.input,
+    type: "email",
+    inputMode: "email",
+    autoComplete: "email"
+  };
+  return /* @__PURE__ */ jsx("div", { "data-purpose": "email", children: /* @__PURE__ */ jsx(InputField, { ...props, input: enhancedInput }) });
+}
+function PhoneField(props) {
+  const enhancedInput = {
+    ...props.input,
+    type: "tel",
+    inputMode: "tel",
+    autoComplete: "tel"
+  };
+  return /* @__PURE__ */ jsx("div", { "data-purpose": "phone", children: /* @__PURE__ */ jsx(InputField, { ...props, input: enhancedInput }) });
+}
+function URLField(props) {
+  const enhancedInput = {
+    ...props.input,
+    type: "url",
+    inputMode: "url",
+    autoComplete: "url"
+  };
+  return /* @__PURE__ */ jsx("div", { "data-purpose": "url", children: /* @__PURE__ */ jsx(InputField, { ...props, input: enhancedInput }) });
+}
+function CurrencyField(props) {
+  const { currency, ...restProps } = props;
+  const enhancedInput = {
+    ...props.input,
+    type: "text",
+    inputMode: "decimal"
+  };
+  const helperText = currency ? props.helperText ? `${props.helperText} (${currency})` : `Amount in ${currency}` : props.helperText;
+  return /* @__PURE__ */ jsx("div", { "data-purpose": "currency", "data-currency": currency, children: /* @__PURE__ */ jsx(InputField, { ...restProps, input: enhancedInput, helperText: helperText || "" }) });
+}
 
-export { Button, CancelButton, Checkbox, CheckboxField, CreateButton, DangerButton, Divider, H1, H2, H3, Icon, Input, InputField, LinkButton, MarwesProvider, Paragraph, PrimaryButton, SecondaryButton, SubmitButton, TextButton, useRenderKitDebug, useSystem, useTheme };
+export { Button, CancelButton, Checkbox, CheckboxField, CreateButton, CurrencyField, DangerButton, Divider, EmailField, H1, H2, H3, Icon, Input, InputField, LinkButton, MarwesProvider, Paragraph, PasswordField, PhoneField, PrimaryButton, SearchField, SecondaryButton, SubmitButton, TextButton, URLField, useRenderKitDebug, useSystem, useTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/provider/marwes-context.ts","../src/provider/marwes-provider.tsx","../src/provider/use-system.ts","../src/provider/use-theme.ts","../src/hooks/use-renderkit-debug.ts","../src/components/icon/icon.tsx","../src/components/button.tsx","../src/components/button-variants.tsx","../src/components/input.tsx","../src/components/checkbox/checkbox.tsx","../src/components/divider.tsx","../src/components/heading/h1.tsx","../src/components/heading/h2.tsx","../src/components/heading/h3.tsx","../src/components/paragraph/paragraph.tsx","../src/components/checkbox/checkbox-field.tsx","../src/components/input-field.tsx"],"names":["React","React3","jsx","React4","React5","headingRecipe","React6","jsxs","cx","React7"],"mappings":";;;;;;;AAQO,IAAM,aAAA,GAAsBA,qBAAyC,IAAI,CAAA;AC4BzE,SAAS,cAAA,CAAe;AAAA,EAC7B,MAAA,GAAS,YAAA;AAAA,EACT,KAAA;AAAA,EACA,IAAA,GAAO,OAAA;AAAA,EACP,YAAA;AAAA,EACA;AACF,CAAA,EAAwB;AAEtB,EAAA,MAAM,aAAA,GAAsB,eAAQ,MAAM;AACxC,IAAA,OAAO,YAAA,CAAa;AAAA,MAClB,MAAA;AAAA,MACA,KAAA,EAAO,QAAQ,EAAE,GAAG,OAAO,IAAA,EAAK,GAAI,EAAE,IAAA;AAAK,KAC5C,CAAA;AAAA,EACH,CAAA,EAAG,CAAC,MAAA,EAAQ,KAAA,EAAO,IAAI,CAAC,CAAA;AAGxB,EAAA,MAAM,MAAA,GAAuB,eAAQ,MAAM;AACzC,IAAA,IAAI,IAAA,KAAS,aAAA,CAAc,KAAA,CAAM,IAAA,EAAM;AACrC,MAAA,OAAO,aAAA;AAAA,IACT;AACA,IAAA,OAAO,UAAA,CAAW,eAAe,IAAI,CAAA;AAAA,EACvC,CAAA,EAAG,CAAC,aAAA,EAAe,IAAI,CAAC,CAAA;AAGxB,EAAA,MAAM,UAAA,GAAa,CAAA,UAAA,EAAa,MAAA,CAAO,KAAA,CAAM,IAAI,CAAA,CAAA;AAEjD,EAAA,uBACE,GAAA,CAAC,aAAA,CAAc,QAAA,EAAd,EAAuB,OAAO,EAAE,MAAA,EAAQ,YAAA,EAAa,EACpD,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,EAAa,UAAS,CAAA,EACxC,CAAA;AAEJ;AC/DO,SAAS,SAAA,GAAoB;AAClC,EAAA,MAAM,GAAA,GAAYC,kBAAW,aAAa,CAAA;AAC1C,EAAA,IAAI,CAAC,GAAA,EAAK;AACR,IAAA,MAAM,IAAI,MAAM,iEAAiE,CAAA;AAAA,EACnF;AACA,EAAA,OAAO,GAAA,CAAI,MAAA;AACb;;;ACPO,SAAS,QAAA,GAAkB;AAChC,EAAA,OAAO,WAAU,CAAE,KAAA;AACrB;ACHA,IAAM,eAAA,GAAkB,mCAAA;AAEjB,SAAS,iBAAA,CAAkB,WAAoB,aAAA,EAAuB;AAC3E,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AACjC,MAAA,OAAA,CAAQ,GAAA,CAAI,CAAA,kBAAA,EAAqB,aAAa,CAAA,CAAA,CAAA,EAAK,SAAS,CAAA;AAC5D,MAAA,MAAM,KAAA,GAAQ,IAAI,WAAA,CAAY,eAAA,EAAiB;AAAA,QAC7C,MAAA,EAAQ;AAAA,UACN,GAAI,SAAA;AAAA,UACJ,KAAA,EAAO,EAAE,SAAA,EAAW,aAAA;AAAc;AACpC,OACD,CAAA;AACD,MAAA,MAAA,CAAO,cAAc,KAAK,CAAA;AAAA,IAC5B;AAAA,EACF,CAAA,EAAG,CAAC,SAAA,EAAW,aAAa,CAAC,CAAA;AAC/B;ACkBO,SAAS,IAAA,CAAK;AAAA,EACnB,IAAA;AAAA,EACA,IAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,EAAc,SAAA;AAAA,EACd;AACF,CAAA,EAAc;AACZ,EAAA,MAAM,QAAQ,QAAA,EAAS;AACvB,EAAA,MAAM,YAAY,KAAA,CAAM,IAAA;AAExB,EAAA,MAAM,EAAA,GAAK,eAAA,CAAgB,IAAA,IAAQ,SAAA,CAAU,IAAI,CAAA;AACjD,EAAA,MAAM,EAAA,GAAK,sBAAA,CAAuB,WAAA,IAAe,SAAA,CAAU,WAAW,CAAA;AAEtE,EAAA,MAAM,GAAA,GAAM,aAAa,IAAI,CAAA;AAG7B,EAAA,MAAM,YAAA,GAAe,cAAc,CAAC,SAAA;AAEpC,EAAA,uBACEC,GAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAA;AAAA,MACP,MAAA,EAAQ,EAAA;AAAA,MACR,SAAS,GAAA,CAAI,OAAA;AAAA,MACb,IAAA,EAAK,MAAA;AAAA,MACL,MAAA,EAAO,cAAA;AAAA,MACP,WAAA,EAAa,EAAA;AAAA,MACb,aAAA,EAAc,OAAA;AAAA,MACd,cAAA,EAAe,OAAA;AAAA,MACf,SAAA;AAAA,MACA,aAAA,EAAa,eAAe,MAAA,GAAS,MAAA;AAAA,MACrC,YAAA,EAAY,SAAA;AAAA,MACZ,IAAA,EAAM,eAAe,MAAA,GAAY,KAAA;AAAA,MACjC,SAAA,EAAU,OAAA;AAAA,MAET,QAAA,EAAA,GAAA,CAAI,KAAA,CAAM,GAAA,CAAI,CAAC,UAAU,SAAA,KAAc;AACtC,QAAA,MAAM,UAAU,QAAA,CAAS,GAAA;AAEzB,QAAA,uBAAOA,GAAAA,CAAC,OAAA,EAAA,EAAyB,GAAI,QAAA,CAAS,SAAzB,SAAoE,CAAA;AAAA,MAC3F,CAAC;AAAA;AAAA,GACH;AAEJ;AC9DO,SAAS,OAAO,KAAA,EAAoB;AACzC,EAAA,MAAM,QAAQ,QAAA,EAAS;AACvB,EAAA,MAAM,GAAA,GAAM,kBAAA,CAAmB,KAAA,EAAO,KAAK,CAAA;AAG3C,EAAA,iBAAA,CAAkB,KAAK,QAAQ,CAAA;AAE/B,EAAA,MAAM,QAAQ,GAAA,CAAI,IAAA;AAClB,EAAA,MAAM,SAAA,GAAY,KAAA,CAAM,SAAA,GAAY,CAAA,EAAG,GAAA,CAAI,SAAS,CAAA,CAAA,EAAI,KAAA,CAAM,SAAS,CAAA,CAAA,GAAK,GAAA,CAAI,SAAA;AAEhF,EAAA,MAAM,0BACJ,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,KAAA,CAAM,QAAA,oBAAYA,GAAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAM,MAAM,QAAA,EAAU,IAAA,EAAK,IAAA,EAAK,UAAA,EAAU,IAAA,EAAC,CAAA;AAAA,IACnE,KAAA,CAAM,QAAA;AAAA,IACN,KAAA,CAAM,SAAA,oBAAaA,GAAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAM,KAAA,CAAM,SAAA,EAAW,IAAA,EAAK,IAAA,EAAK,UAAA,EAAU,IAAA,EAAC;AAAA,GAAA,EACxE,CAAA;AAGF,EAAA,IAAI,GAAA,CAAI,QAAQ,QAAA,EAAU;AACxB,IAAA,uBACEA,GAAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,IAAI,IAAA,CAAK,IAAA;AAAA,QACf,QAAA,EAAU,IAAI,IAAA,CAAK,QAAA;AAAA,QACnB,YAAA,EAAY,IAAI,IAAA,CAAK,SAAA;AAAA,QACrB,WAAA,EAAW,IAAI,IAAA,CAAK,QAAA;AAAA,QACpB,eAAA,EAAe,IAAI,IAAA,CAAK,YAAA;AAAA,QACxB,cAAA,EAAc,IAAI,IAAA,CAAK,WAAA;AAAA,QACvB,eAAA,EAAe,IAAI,IAAA,CAAK,YAAA;AAAA,QACxB,eAAA,EAAe,IAAI,IAAA,CAAK,YAAA;AAAA,QACxB,KAAA,EAAO,IAAI,IAAA,CAAK,KAAA;AAAA,QAChB,SAAA;AAAA,QACA,KAAA;AAAA,QACA,OAAA,EAAS,CAAC,CAAA,KAAM,KAAA,CAAM,UAAU,CAAC,CAAA;AAAA,QAChC,GAAG,GAAA,CAAI,cAAA;AAAA,QAEP,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AAEA,EAAA,uBACEA,GAAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,IAAI,IAAA,CAAK,IAAA;AAAA,MACf,IAAA,EAAM,IAAI,IAAA,CAAK,IAAA;AAAA,MACf,QAAA,EAAU,IAAI,IAAA,CAAK,QAAA;AAAA,MACnB,YAAA,EAAY,IAAI,IAAA,CAAK,SAAA;AAAA,MACrB,WAAA,EAAW,IAAI,IAAA,CAAK,QAAA;AAAA,MACpB,eAAA,EAAe,IAAI,IAAA,CAAK,YAAA;AAAA,MACxB,cAAA,EAAc,IAAI,IAAA,CAAK,WAAA;AAAA,MACvB,eAAA,EAAe,IAAI,IAAA,CAAK,YAAA;AAAA,MACxB,eAAA,EAAe,IAAI,IAAA,CAAK,YAAA;AAAA,MACxB,KAAA,EAAO,IAAI,IAAA,CAAK,KAAA;AAAA,MAChB,SAAA;AAAA,MACA,KAAA;AAAA,MACA,OAAA,EAAS,CAAC,CAAA,KAAM;AACd,QAAA,IAAI,IAAI,UAAA,EAAY;AAClB,UAAA,CAAA,CAAE,cAAA,EAAe;AACjB,UAAA;AAAA,QACF;AACA,QAAA,KAAA,CAAM,UAAU,CAAC,CAAA;AAAA,MACnB,CAAA;AAAA,MACC,GAAG,GAAA,CAAI,cAAA;AAAA,MAEP,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ;ACzCO,SAAS,aAAa,KAAA,EAA0B;AACrD,EAAA,MAAM,EAAE,YAAA,GAAe,IAAA,EAAM,GAAG,WAAU,GAAI,KAAA;AAE9C,EAAA,uBACEA,GAAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,IAAA,EAAK,SAAA;AAAA,MACL,MAAA,EAAO,QAAA;AAAA,MACP,YAAA;AAAA,MACA,cAAA,EAAgB;AAAA,QACd,GAAG,KAAA,CAAM,cAAA;AAAA,QACT,kBAAA,EAAoB,MAAA;AAAA,QACpB,4BAAA,EAA8B,eAAe,MAAA,GAAS;AAAA;AACxD;AAAA,GACF;AAEJ;AAuBO,SAAS,aAAa,KAAA,EAA0B;AACrD,EAAA,uBACEA,GAAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,MAAA,EAAO,QAAA;AAAA,MACP,IAAA,EAAM,MAAM,IAAA,IAAQ,SAAA;AAAA,MACpB,cAAA,EAAgB;AAAA,QACd,GAAG,KAAA,CAAM,cAAA;AAAA,QACT,eAAA,EAAiB;AAAA;AACnB;AAAA,GACF;AAEJ;AAqBO,SAAS,aAAa,KAAA,EAA0B;AACrD,EAAA,uBACEA,GAAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,EAAA,EAAG,QAAA;AAAA,MACH,MAAA,EAAO,QAAA;AAAA,MACP,cAAA,EAAgB;AAAA,QACd,cAAA,EAAgB,aAAA;AAAA,QAChB,GAAG,KAAA,CAAM;AAAA;AACX;AAAA,GACF;AAEJ;AAuBO,SAAS,aAAa,KAAA,EAA0B;AACrD,EAAA,uBACEA,GAAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,MAAA,EAAO,QAAA;AAAA,MACP,IAAA,EAAM,MAAM,IAAA,IAAQ,WAAA;AAAA,MACpB,cAAA,EAAgB;AAAA,QACd,GAAG,KAAA,CAAM,cAAA;AAAA,QACT,aAAA,EAAe;AAAA;AACjB;AAAA,GACF;AAEJ;AA4BO,SAAS,WAAW,KAAA,EAAwB;AACjD,EAAA,uBACEA,GAAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,EAAA,EAAG,GAAA;AAAA,MACH,MAAA,EAAO,UAAA;AAAA,MACP,cAAA,EAAgB;AAAA,QACd,GAAG,KAAA,CAAM,cAAA;AAAA,QACT,iBAAA,EAAmB;AAAA;AACrB;AAAA,GACF;AAEJ;AAkBO,SAAS,cAAc,KAAA,EAA2B;AACvD,EAAA,uBAAOA,IAAC,MAAA,EAAA,EAAQ,GAAG,OAAO,IAAA,EAAK,SAAA,EAAU,IAAG,QAAA,EAAS,CAAA;AACvD;AAkBO,SAAS,gBAAgB,KAAA,EAA6B;AAC3D,EAAA,uBAAOA,IAAC,MAAA,EAAA,EAAQ,GAAG,OAAO,IAAA,EAAK,WAAA,EAAY,IAAG,QAAA,EAAS,CAAA;AACzD;AAkBO,SAAS,WAAW,KAAA,EAAwB;AACjD,EAAA,uBAAOA,IAAC,MAAA,EAAA,EAAQ,GAAG,OAAO,IAAA,EAAK,MAAA,EAAO,IAAG,QAAA,EAAS,CAAA;AACpD;ACtPO,SAAS,MAAM,KAAA,EAAmB;AACvC,EAAA,MAAM,QAAQ,QAAA,EAAS;AACvB,EAAA,MAAM,GAAA,GAAM,iBAAA,CAAkB,KAAA,EAAO,KAAK,CAAA;AAG1C,EAAA,iBAAA,CAAkB,KAAK,OAAO,CAAA;AAE9B,EAAA,MAAM,QAAQ,GAAA,CAAI,IAAA;AAClB,EAAA,MAAM,SAAA,GAAY,KAAA,CAAM,SAAA,GAAY,CAAA,EAAG,GAAA,CAAI,SAAS,CAAA,CAAA,EAAI,KAAA,CAAM,SAAS,CAAA,CAAA,GAAK,GAAA,CAAI,SAAA;AAEhF,EAAA,MAAM,YAAA,GAAe,CAAC,CAAA,KAA2C;AAC/D,IAAA,KAAA,CAAM,aAAA,GAAgB,CAAA,CAAE,MAAA,CAAO,KAAK,CAAA;AAAA,EACtC,CAAA;AAEA,EAAA,uBACEA,GAAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,KAAA;AAAA,MACA,EAAA,EAAI,IAAI,IAAA,CAAK,EAAA;AAAA,MACb,IAAA,EAAM,IAAI,IAAA,CAAK,IAAA;AAAA,MACf,IAAA,EAAM,IAAI,IAAA,CAAK,IAAA;AAAA,MACf,SAAA,EAAW,IAAI,IAAA,CAAK,SAAA;AAAA,MACpB,YAAA,EAAc,IAAI,IAAA,CAAK,YAAA;AAAA,MACvB,WAAA,EAAa,IAAI,IAAA,CAAK,WAAA;AAAA,MACtB,QAAA,EAAU,IAAI,IAAA,CAAK,QAAA;AAAA,MACnB,QAAA,EAAU,IAAI,IAAA,CAAK,QAAA;AAAA,MACnB,QAAA,EAAU,IAAI,IAAA,CAAK,QAAA;AAAA,MACnB,YAAA,EAAY,IAAI,IAAA,CAAK,SAAA;AAAA,MACrB,cAAA,EAAc,IAAI,IAAA,CAAK,WAAA;AAAA,MACvB,kBAAA,EAAkB,IAAI,IAAA,CAAK,eAAA;AAAA,MAC3B,OAAO,KAAA,CAAM,KAAA;AAAA,MACb,cAAc,KAAA,CAAM,YAAA;AAAA,MACpB,QAAA,EAAU;AAAA;AAAA,GACZ;AAEJ;ACyCO,SAAS,SAAS,KAAA,EAA0C;AACjE,EAAA,MAAM,EAAE,eAAA,EAAiB,QAAA,EAAU,GAAG,WAAU,GAAI,KAAA;AAEpD,EAAA,MAAM,QAAQ,QAAA,EAAS;AAEvB,EAAA,MAAM,MAAM,cAAA,CAAe,EAAE,GAAG,SAAA,EAAW,OAAO,CAAA;AAElD,EAAA,MAAM,QAAA,GAAiBC,cAAgC,IAAI,CAAA;AAG3D,EAAMA,uBAAgB,MAAM;AAC1B,IAAA,MAAM,KAAK,QAAA,CAAS,OAAA;AACpB,IAAA,IAAI,CAAC,EAAA,EAAI;AACT,IAAA,EAAA,CAAG,gBAAgB,GAAA,CAAI,aAAA;AAAA,EACzB,CAAA,EAAG,CAAC,GAAA,CAAI,aAAa,CAAC,CAAA;AAEtB,EAAA,MAAM,YAAA,GAA2D,CAAC,CAAA,KAAM;AACtE,IAAA,QAAA,GAAW,CAAC,CAAA;AACZ,IAAA,eAAA,GAAkB,CAAA,CAAE,cAAc,OAAO,CAAA;AAAA,EAC3C,CAAA;AAEA,EAAA,MAAM,EAAE,MAAK,GAAI,GAAA;AAEjB,EAAA,uBACED,GAAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,QAAA;AAAA,MACL,IAAA,EAAK,UAAA;AAAA,MACL,WAAW,GAAA,CAAI,SAAA;AAAA,MACf,OAAO,GAAA,CAAI,IAAA;AAAA,MACX,IAAI,IAAA,CAAK,EAAA;AAAA,MACT,MAAM,IAAA,CAAK,IAAA;AAAA,MACX,OAAO,IAAA,CAAK,KAAA;AAAA,MACZ,QAAA,EAAU,KAAK,QAAA,KAAa,IAAA;AAAA,MAC5B,QAAA,EAAU,KAAK,QAAA,KAAa,IAAA;AAAA,MAC5B,cAAY,IAAA,CAAK,SAAA;AAAA,MACjB,mBAAiB,IAAA,CAAK,cAAA;AAAA,MACtB,oBAAkB,IAAA,CAAK,eAAA;AAAA,MACvB,gBAAc,IAAA,CAAK,WAAA;AAAA,MACnB,cAAA,EAAc,IAAA,CAAK,WAAA,KAAgB,IAAA,GAAO,IAAA,GAAO,MAAA;AAAA,MACjD,SAAS,GAAA,CAAI,OAAA;AAAA,MACb,gBAAgB,GAAA,CAAI,cAAA;AAAA,MACpB,QAAA,EAAU;AAAA;AAAA,GACZ;AAEJ;AC1DO,IAAM,OAAA,GAAgBE,MAAA,CAAA,UAAA,CAAwC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACnF,EAAA,MAAM,EAAE,SAAA,EAAW,eAAA,EAAiB,OAAO,WAAA,EAAa,GAAG,MAAK,GAAI,KAAA;AAEpE,EAAA,MAAM,QAAQ,QAAA,EAAS;AAEvB,EAAA,MAAM,GAAA,GAAM,mBAAA,CAAoB,KAAA,EAAO,IAAI,CAAA;AAE3C,EAAA,MAAM,QAAQ,EAAE,GAAI,GAAA,CAAI,IAAA,EAAwB,GAAG,WAAA,EAAY;AAC/D,EAAA,MAAM,SAAA,GAAY,kBAAkB,CAAA,EAAG,GAAA,CAAI,SAAS,CAAA,CAAA,EAAI,eAAe,KAAK,GAAA,CAAI,SAAA;AAEhF,EAAA,uBAAOF,GAAAA,CAAC,IAAA,EAAA,EAAG,GAAA,EAAW,GAAG,GAAA,CAAI,IAAA,EAAO,GAAG,GAAA,CAAI,cAAA,EAAgB,SAAA,EAAsB,KAAA,EAAc,CAAA;AACjG,CAAC;AAED,OAAA,CAAQ,WAAA,GAAc,SAAA;AC7Bf,SAAS,GAAG,KAAA,EAAoC;AACrD,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,eAAA,EAAiB,OAAO,WAAA,EAAa,GAAG,MAAK,GAAI,KAAA;AAC9E,EAAA,MAAM,QAAQ,QAAA,EAAS;AAEvB,EAAA,MAAM,GAAA,GAAM,cAAc,EAAE,GAAG,MAAM,KAAA,EAAO,CAAA,IAAK,KAAK,CAAA;AAEtD,EAAA,MAAM,QAAQ,EAAE,GAAI,GAAA,CAAI,IAAA,EAAwB,GAAG,WAAA,EAAY;AAC/D,EAAA,MAAM,SAAA,GAAY,kBAAkB,CAAA,EAAG,GAAA,CAAI,SAAS,CAAA,CAAA,EAAI,eAAe,KAAK,GAAA,CAAI,SAAA;AAEhF,EAAA,uBACEA,GAAAA,CAAC,IAAA,EAAA,EAAG,EAAA,EAAI,GAAA,CAAI,IAAA,CAAK,EAAA,EAAI,YAAA,EAAY,GAAA,CAAI,IAAA,CAAK,SAAA,EAAW,SAAA,EAAsB,OACxE,QAAA,EACH,CAAA;AAEJ;ACnBO,SAAS,GAAG,KAAA,EAAoC;AACrD,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,eAAA,EAAiB,OAAO,WAAA,EAAa,GAAG,MAAK,GAAI,KAAA;AAC9E,EAAA,MAAM,QAAQ,QAAA,EAAS;AAEvB,EAAA,MAAM,GAAA,GAAMG,cAAc,EAAE,GAAG,MAAM,KAAA,EAAO,CAAA,IAAK,KAAK,CAAA;AAEtD,EAAA,MAAM,QAAQ,EAAE,GAAI,GAAA,CAAI,IAAA,EAAwB,GAAG,WAAA,EAAY;AAC/D,EAAA,MAAM,SAAA,GAAY,kBAAkB,CAAA,EAAG,GAAA,CAAI,SAAS,CAAA,CAAA,EAAI,eAAe,KAAK,GAAA,CAAI,SAAA;AAEhF,EAAA,uBACEH,GAAAA,CAAC,IAAA,EAAA,EAAG,EAAA,EAAI,GAAA,CAAI,IAAA,CAAK,EAAA,EAAI,YAAA,EAAY,GAAA,CAAI,IAAA,CAAK,SAAA,EAAW,SAAA,EAAsB,OACxE,QAAA,EACH,CAAA;AAEJ;ACdO,SAAS,GAAG,KAAA,EAAoC;AACrD,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,eAAA,EAAiB,OAAO,WAAA,EAAa,GAAG,MAAK,GAAI,KAAA;AAC9E,EAAA,MAAM,QAAQ,QAAA,EAAS;AAEvB,EAAA,MAAM,GAAA,GAAMG,cAAc,EAAE,GAAG,MAAM,KAAA,EAAO,CAAA,IAAK,KAAK,CAAA;AAEtD,EAAA,MAAM,QAAQ,EAAE,GAAI,GAAA,CAAI,IAAA,EAAwB,GAAG,WAAA,EAAY;AAC/D,EAAA,MAAM,SAAA,GAAY,kBAAkB,CAAA,EAAG,GAAA,CAAI,SAAS,CAAA,CAAA,EAAI,eAAe,KAAK,GAAA,CAAI,SAAA;AAEhF,EAAA,uBACEH,GAAAA,CAAC,IAAA,EAAA,EAAG,EAAA,EAAI,GAAA,CAAI,IAAA,CAAK,EAAA,EAAI,YAAA,EAAY,GAAA,CAAI,IAAA,CAAK,SAAA,EAAW,SAAA,EAAsB,OACxE,QAAA,EACH,CAAA;AAEJ;ACTO,SAAS,UAAU,KAAA,EAA2C;AACnE,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,eAAA,EAAiB,OAAO,WAAA,EAAa,GAAG,MAAK,GAAI,KAAA;AAC9E,EAAA,MAAM,QAAQ,QAAA,EAAS;AAEvB,EAAA,MAAM,GAAA,GAAM,eAAA,CAAgB,IAAA,EAAM,KAAK,CAAA;AAEvC,EAAA,MAAM,QAAQ,EAAE,GAAI,GAAA,CAAI,IAAA,EAAwB,GAAG,WAAA,EAAY;AAC/D,EAAA,MAAM,SAAA,GAAY,kBAAkB,CAAA,EAAG,GAAA,CAAI,SAAS,CAAA,CAAA,EAAI,eAAe,KAAK,GAAA,CAAI,SAAA;AAEhF,EAAA,uBACEA,IAAC,GAAA,EAAA,EAAE,EAAA,EAAI,IAAI,IAAA,CAAK,EAAA,EAAI,SAAA,EAAsB,KAAA,EACvC,QAAA,EACH,CAAA;AAEJ;ACpDA,SAAS,MAAM,KAAA,EAAsC;AACnD,EAAA,OAAO,KAAA,CAAM,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CAAA;AACvC;AA4FO,SAAS,cAAc,KAAA,EAA+C;AAC3E,EAAA,MAAM,UAAgBI,MAAA,CAAA,KAAA,EAAM;AAC5B,EAAA,MAAM,EAAA,GAAK,KAAA,CAAM,EAAA,IAAM,CAAA,YAAA,EAAe,OAAO,CAAA,CAAA;AAE7C,EAAA,MAAM,cAAA,GAAiB,MAAM,WAAA,KAAgB,MAAA;AAC7C,EAAA,MAAM,QAAA,GAAW,MAAM,KAAA,KAAU,MAAA;AAEjC,EAAA,MAAM,MAAA,GAAS,cAAA,GAAiB,CAAA,EAAG,EAAE,CAAA,KAAA,CAAA,GAAU,MAAA;AAC/C,EAAA,MAAM,OAAA,GAAU,QAAA,GAAW,CAAA,EAAG,EAAE,CAAA,MAAA,CAAA,GAAW,MAAA;AAG3C,EAAA,MAAM,gBAAA,GAAmB,CAAC,KAAA,CAAM,eAAA,EAAiB,QAAQ,OAAO,CAAA,CAAE,OAAO,OAAO,CAAA;AAChF,EAAA,MAAM,oBAAoB,gBAAA,CAAiB,MAAA,GAAS,IAAI,gBAAA,CAAiB,IAAA,CAAK,GAAG,CAAA,GAAI,MAAA;AAErF,EAAA,MAAM,QAAA,GAAW,KAAA,CAAM,QAAA,CAAS,QAAA,IAAY,KAAA;AAC5C,EAAA,MAAM,OAAA,GAAU,QAAA,IAAY,KAAA,CAAM,QAAA,CAAS,OAAA,IAAW,KAAA;AAEtD,EAAA,MAAM,YAAA,GAAe,EAAA;AAAA,IACnB,mBAAA;AAAA,IACA,QAAA,IAAY,6BAAA;AAAA,IACZ,OAAA,IAAW;AAAA,GACb;AAGA,EAAA,MAAM,aAAA,GAA+B;AAAA,IACnC,GAAG,KAAA,CAAM,QAAA;AAAA,IACT,EAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,IAAI,iBAAA,EAAmB;AACrB,IAAA,aAAA,CAAc,eAAA,GAAkB,iBAAA;AAAA,EAClC;AAEA,EAAA,uBACEC,IAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,EACd,QAAA,EAAA;AAAA,oBAAAA,IAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wBAAA,EACb,QAAA,EAAA;AAAA,sBAAAL,GAAAA,CAAC,QAAA,EAAA,EAAU,GAAG,aAAA,EAAe,CAAA;AAAA,sBAE7BA,GAAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,4BAA2B,OAAA,EAAS,EAAA,EACnD,QAAA,kBAAAA,GAAAA,CAAC,SAAA,EAAA,EAAU,IAAA,EAAK,IAAA,EAAM,QAAA,EAAA,KAAA,CAAM,OAAM,CAAA,EACpC;AAAA,KAAA,EACF,CAAA;AAAA,IAEC,cAAA,oBACCA,GAAAA,CAAC,KAAA,EAAA,EAAI,WAAU,gCAAA,EAAiC,EAAA,EAAI,MAAA,EAClD,QAAA,kBAAAA,IAAC,SAAA,EAAA,EAAU,IAAA,EAAK,IAAA,EAAM,QAAA,EAAA,KAAA,CAAM,aAAY,CAAA,EAC1C,CAAA;AAAA,IAGD,4BACCA,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4BAA2B,EAAA,EAAI,OAAA,EAAS,WAAA,EAAU,QAAA,EAC/D,0BAAAA,GAAAA,CAAC,SAAA,EAAA,EAAU,MAAK,IAAA,EAAM,QAAA,EAAA,KAAA,CAAM,OAAM,CAAA,EACpC;AAAA,GAAA,EAEJ,CAAA;AAEJ;ACnJA,SAASM,OAAM,KAAA,EAAsC;AACnD,EAAA,OAAO,KAAA,CAAM,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CAAA;AACvC;AA2FO,SAAS,WAAW,KAAA,EAA4C;AACrE,EAAA,MAAM,UAAgBC,MAAA,CAAA,KAAA,EAAM;AAC5B,EAAA,MAAM,EAAA,GAAK,KAAA,CAAM,EAAA,IAAM,CAAA,SAAA,EAAY,OAAO,CAAA,CAAA;AAE1C,EAAA,MAAM,aAAA,GAAgB,MAAM,UAAA,KAAe,MAAA;AAC3C,EAAA,MAAM,QAAA,GAAW,MAAM,KAAA,KAAU,MAAA;AAEjC,EAAA,MAAM,YAAA,GAAe,aAAA,GAAgB,CAAA,EAAG,EAAE,CAAA,OAAA,CAAA,GAAY,MAAA;AACtD,EAAA,MAAM,OAAA,GAAU,QAAA,GAAW,CAAA,EAAG,EAAE,CAAA,MAAA,CAAA,GAAW,MAAA;AAG3C,EAAA,MAAM,gBAAA,GAAmB,CAAC,KAAA,CAAM,eAAA,EAAiB,cAAc,OAAO,CAAA,CAAE,OAAO,OAAO,CAAA;AACtF,EAAA,MAAM,oBAAoB,gBAAA,CAAiB,MAAA,GAAS,IAAI,gBAAA,CAAiB,IAAA,CAAK,GAAG,CAAA,GAAI,MAAA;AAErF,EAAA,MAAM,QAAA,GAAW,KAAA,CAAM,KAAA,CAAM,QAAA,IAAY,KAAA;AACzC,EAAA,MAAM,QAAA,GAAW,KAAA,CAAM,KAAA,CAAM,QAAA,IAAY,KAAA;AACzC,EAAA,MAAM,OAAA,GAAU,QAAA,IAAY,KAAA,CAAM,KAAA,CAAM,OAAA,IAAW,KAAA;AAEnD,EAAA,MAAM,YAAA,GAAeD,GAAAA;AAAA,IACnB,gBAAA;AAAA,IACA,QAAA,IAAY,0BAAA;AAAA,IACZ,OAAA,IAAW,yBAAA;AAAA,IACX,QAAA,IAAY;AAAA,GACd;AAGA,EAAA,MAAM,UAAA,GAAyB;AAAA,IAC7B,GAAG,KAAA,CAAM,KAAA;AAAA,IACT,EAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,IAAI,iBAAA,EAAmB;AACrB,IAAA,UAAA,CAAW,WAAA,GAAc,iBAAA;AAAA,EAC3B;AAEA,EAAA,uBACED,IAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,EACd,QAAA,EAAA;AAAA,oBAAAL,GAAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,uBAAA,EAAwB,OAAA,EAAS,EAAA,EAChD,QAAA,kBAAAA,GAAAA,CAAC,SAAA,EAAA,EAAU,IAAA,EAAK,IAAA,EAAM,QAAA,EAAA,KAAA,CAAM,OAAM,CAAA,EACpC,CAAA;AAAA,oBAEAA,GAAAA,CAAC,KAAA,EAAA,EAAO,GAAG,UAAA,EAAY,CAAA;AAAA,IAEtB,iBAAiB,CAAC,QAAA,oBACjBA,GAAAA,CAAC,SAAI,SAAA,EAAU,wBAAA,EAAyB,EAAA,EAAI,YAAA,EAC1C,0BAAAA,GAAAA,CAAC,SAAA,EAAA,EAAU,MAAK,IAAA,EAAM,QAAA,EAAA,KAAA,CAAM,YAAW,CAAA,EACzC,CAAA;AAAA,IAGD,4BACCA,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAwB,EAAA,EAAI,OAAA,EAAS,WAAA,EAAU,QAAA,EAC5D,0BAAAA,GAAAA,CAAC,SAAA,EAAA,EAAU,MAAK,IAAA,EAAM,QAAA,EAAA,KAAA,CAAM,OAAM,CAAA,EACpC;AAAA,GAAA,EAEJ,CAAA;AAEJ","file":"index.js","sourcesContent":["import type { System, ThemeMode } from \"@marwes-ui/core\"\nimport * as React from \"react\"\n\nexport type MarwesContextValue = {\n  system: System\n  onModeChange: ((mode: ThemeMode) => void) | undefined\n}\n\nexport const MarwesContext = React.createContext<MarwesContextValue | null>(null)\n","import type { Preset, System, ThemeMode, ThemeOverrides } from \"@marwes-ui/core\"\nimport { createSystem, switchMode } from \"@marwes-ui/core\"\nimport { firstEdition } from \"@marwes-ui/presets\"\nimport * as React from \"react\"\nimport { MarwesContext } from \"./marwes-context\"\n\nexport type MarwesProviderProps = {\n  preset?: Preset\n  theme?: ThemeOverrides\n  /**\n   * Current theme mode. Determines light or dark color palette.\n   * When changed, efficiently switches theme colors without recreating the entire system.\n   */\n  mode?: ThemeMode\n  /**\n   * Callback fired when mode should change.\n   * Users are responsible for managing mode state and persistence (e.g., localStorage).\n   *\n   * Example with persistence:\n   * ```tsx\n   * const [mode, setMode] = useState<ThemeMode>(\n   *   () => (localStorage.getItem('theme-mode') as ThemeMode) ?? 'light'\n   * );\n   *\n   * const handleModeChange = (newMode: ThemeMode) => {\n   *   setMode(newMode);\n   *   localStorage.setItem('theme-mode', newMode);\n   * };\n   *\n   * <MarwesProvider mode={mode} onModeChange={handleModeChange}>\n   * ```\n   */\n  onModeChange?: (mode: ThemeMode) => void\n  children: React.ReactNode\n}\n\nexport function MarwesProvider({\n  preset = firstEdition,\n  theme,\n  mode = \"light\",\n  onModeChange,\n  children,\n}: MarwesProviderProps) {\n  // Create initial system\n  const initialSystem = React.useMemo(() => {\n    return createSystem({\n      preset,\n      theme: theme ? { ...theme, mode } : { mode },\n    })\n  }, [preset, theme, mode])\n\n  // Optimize mode switching using switchMode() instead of recreating system\n  const system: System = React.useMemo(() => {\n    if (mode === initialSystem.theme.mode) {\n      return initialSystem\n    }\n    return switchMode(initialSystem, mode)\n  }, [initialSystem, mode])\n\n  // Apply theme class to container for CSS-based dark mode overrides\n  const themeClass = `mw-theme--${system.theme.mode}`\n\n  return (\n    <MarwesContext.Provider value={{ system, onModeChange }}>\n      <div className={themeClass}>{children}</div>\n    </MarwesContext.Provider>\n  )\n}\n","import type { System } from \"@marwes-ui/core\"\nimport * as React from \"react\"\nimport { MarwesContext } from \"./marwes-context\"\n\nexport function useSystem(): System {\n  const ctx = React.useContext(MarwesContext)\n  if (!ctx) {\n    throw new Error(\"MarwesProvider is missing. Wrap your app in <MarwesProvider />.\")\n  }\n  return ctx.system\n}\n","import type { Theme } from \"@marwes-ui/core\"\nimport { useSystem } from \"./use-system\"\n\nexport function useTheme(): Theme {\n  return useSystem().theme\n}\n","import { useEffect } from \"react\"\n\nconst RENDERKIT_EVENT = \"marwes/renderkit/renderkit-update\"\n\nexport function useRenderKitDebug(renderKit: unknown, componentName: string) {\n  useEffect(() => {\n    if (typeof window !== \"undefined\") {\n      console.log(`[RenderKit Debug] ${componentName}:`, renderKit)\n      const event = new CustomEvent(RENDERKIT_EVENT, {\n        detail: {\n          ...(renderKit as Record<string, unknown>),\n          _meta: { component: componentName },\n        },\n      })\n      window.dispatchEvent(event)\n    }\n  }, [renderKit, componentName])\n}\n","import {\n  type IconSize,\n  type IconStrokeWidth,\n  iconRegistry,\n  resolveIconSize,\n  resolveIconStrokeWidth,\n} from \"@marwes-ui/core\"\nimport type * as React from \"react\"\nimport { useTheme } from \"../../provider/use-theme\"\n\ntype IconName = keyof typeof iconRegistry\n\nexport type IconProps = {\n  name: IconName\n\n  /**\n   * Token (\"xs\"|\"sm\"|\"md\"|\"lg\") or a raw px number.\n   * Defaults to system.theme.icon.size\n   */\n  size?: IconSize | number\n\n  /**\n   * Token (\"xs\"|\"sm\"|\"md\"|\"lg\") or a raw number.\n   * Defaults to system.theme.icon.strokeWidth\n   */\n  strokeWidth?: IconStrokeWidth | number\n\n  /**\n   * Common props\n   */\n  className?: string\n  \"aria-label\"?: string\n  decorative?: boolean\n}\n\nexport function Icon({\n  name,\n  size,\n  strokeWidth,\n  className,\n  \"aria-label\": ariaLabel,\n  decorative,\n}: IconProps) {\n  const theme = useTheme()\n  const themeIcon = theme.icon\n\n  const px = resolveIconSize(size ?? themeIcon.size)\n  const sw = resolveIconStrokeWidth(strokeWidth ?? themeIcon.strokeWidth)\n\n  const def = iconRegistry[name]\n\n  // If no aria-label => decorative\n  const isDecorative = decorative || !ariaLabel\n\n  return (\n    <svg\n      width={px}\n      height={px}\n      viewBox={def.viewBox}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={sw}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={className}\n      aria-hidden={isDecorative ? \"true\" : undefined}\n      aria-label={ariaLabel}\n      role={isDecorative ? undefined : \"img\"}\n      focusable=\"false\"\n    >\n      {def.nodes.map((iconNode, nodeIndex) => {\n        const TagName = iconNode.tag\n        // biome-ignore lint/suspicious/noArrayIndexKey: Icon nodes are static and never reordered\n        return <TagName key={nodeIndex} {...(iconNode.attrs as React.SVGAttributes<SVGElement>)} />\n      })}\n    </svg>\n  )\n}\n","import type { ButtonOptions, CssVars } from \"@marwes-ui/core\"\nimport { createButtonRecipe } from \"@marwes-ui/core\"\nimport type * as React from \"react\"\nimport { useRenderKitDebug } from \"../hooks/use-renderkit-debug\"\nimport { useTheme } from \"../provider/use-theme\"\nimport { Icon } from \"./icon\"\n\ntype StyleWithVars = React.CSSProperties & CssVars\n\nexport type ButtonProps = ButtonOptions & {\n  children?: React.ReactNode\n  onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void\n  className?: string\n}\n\nexport function Button(props: ButtonProps) {\n  const theme = useTheme()\n  const kit = createButtonRecipe(theme, props)\n\n  // Debug hook for Storybook RenderKit addon\n  useRenderKitDebug(kit, \"Button\")\n\n  const style = kit.vars as StyleWithVars\n  const className = props.className ? `${kit.className} ${props.className}` : kit.className\n\n  const content = (\n    <>\n      {props.iconLeft && <Icon name={props.iconLeft} size=\"xs\" decorative />}\n      {props.children}\n      {props.iconRight && <Icon name={props.iconRight} size=\"xs\" decorative />}\n    </>\n  )\n\n  if (kit.tag === \"button\") {\n    return (\n      <button\n        type={kit.a11y.type}\n        disabled={kit.a11y.disabled}\n        aria-label={kit.a11y.ariaLabel}\n        aria-busy={kit.a11y.ariaBusy}\n        aria-disabled={kit.a11y.ariaDisabled}\n        aria-pressed={kit.a11y.ariaPressed}\n        aria-expanded={kit.a11y.ariaExpanded}\n        aria-controls={kit.a11y.ariaControls}\n        title={kit.a11y.title}\n        className={className}\n        style={style}\n        onClick={(e) => props.onClick?.(e)}\n        {...kit.dataAttributes}\n      >\n        {content}\n      </button>\n    )\n  }\n\n  return (\n    <a\n      href={kit.a11y.href}\n      role={kit.a11y.role}\n      tabIndex={kit.a11y.tabIndex}\n      aria-label={kit.a11y.ariaLabel}\n      aria-busy={kit.a11y.ariaBusy}\n      aria-disabled={kit.a11y.ariaDisabled}\n      aria-pressed={kit.a11y.ariaPressed}\n      aria-expanded={kit.a11y.ariaExpanded}\n      aria-controls={kit.a11y.ariaControls}\n      title={kit.a11y.title}\n      className={className}\n      style={style}\n      onClick={(e) => {\n        if (kit.blockClick) {\n          e.preventDefault()\n          return\n        }\n        props.onClick?.(e)\n      }}\n      {...kit.dataAttributes}\n    >\n      {content}\n    </a>\n  )\n}\n","import { Button, type ButtonProps } from \"./button\"\n\n/**\n * Semantic Button Variants - AI-Friendly Components\n *\n * These variants encode best practices and automatically set AI-friendly\n * metadata, making it easier for both developers and AI tools to understand\n * the purpose and behavior of each button.\n */\n\n// ============================================================================\n// DANGER BUTTON - Destructive Actions\n// ============================================================================\n\nexport type DangerButtonProps = Omit<ButtonProps, \"tone\" | \"action\"> & {\n  /**\n   * Override automatic confirmation requirement.\n   * Defaults to `true` for destructive actions.\n   */\n  confirmation?: boolean\n}\n\n/**\n * DangerButton - For destructive actions like delete, remove, or irreversible operations.\n *\n * **AI Context:**\n * - Sets `tone=\"danger\"` for visual warning\n * - Sets `action=\"delete\"` to indicate destructive behavior\n * - Enables confirmation by default\n * - Adds `data-destructive=\"true\"` for AI parsing\n *\n * @example\n * ```tsx\n * import { DangerButton } from \"@marwes-ui/react\";\n *\n * export function Example() {\n *   return <DangerButton onClick={deleteProject}>Delete Project</DangerButton>;\n * }\n * ```\n */\nexport function DangerButton(props: DangerButtonProps) {\n  const { confirmation = true, ...restProps } = props\n\n  return (\n    <Button\n      {...restProps}\n      tone=\"primary\"\n      action=\"delete\"\n      confirmation={confirmation}\n      dataAttributes={{\n        ...props.dataAttributes,\n        \"data-destructive\": \"true\",\n        \"data-confirmation-required\": confirmation ? \"true\" : \"false\",\n      }}\n    />\n  )\n}\n\n// ============================================================================\n// CREATE BUTTON - Creation Actions\n// ============================================================================\n\nexport type CreateButtonProps = Omit<ButtonProps, \"action\">\n\n/**\n * CreateButton - For creation actions like adding new items or entities.\n *\n * **AI Context:**\n * - Sets `action=\"create\"` to indicate creation behavior\n * - Uses primary tone by default\n * - Adds `data-creative=\"true\"` for AI parsing\n *\n * @example\n * ```tsx\n * <CreateButton onClick={createProject}>\n *   New Project\n * </CreateButton>\n * ```\n */\nexport function CreateButton(props: CreateButtonProps) {\n  return (\n    <Button\n      {...props}\n      action=\"create\"\n      tone={props.tone ?? \"primary\"}\n      dataAttributes={{\n        ...props.dataAttributes,\n        \"data-creative\": \"true\",\n      }}\n    />\n  )\n}\n\n// ============================================================================\n// SUBMIT BUTTON - Form Submissions\n// ============================================================================\n\nexport type SubmitButtonProps = Omit<ButtonProps, \"action\" | \"as\">\n\n/**\n * SubmitButton - For form submissions.\n *\n * **AI Context:**\n * - Sets `action=\"submit\"` and `type=\"submit\"`\n * - Adds `data-context=\"form-submit\"` for AI parsing\n * - Automatically uses button element (not anchor)\n *\n * @example\n * ```tsx\n * <SubmitButton>Submit</SubmitButton>\n * ```\n */\nexport function SubmitButton(props: SubmitButtonProps) {\n  return (\n    <Button\n      {...props}\n      as=\"button\"\n      action=\"submit\"\n      dataAttributes={{\n        \"data-context\": \"form-submit\",\n        ...props.dataAttributes,\n      }}\n    />\n  )\n}\n\n// ============================================================================\n// CANCEL BUTTON - Cancel/Reset Actions\n// ============================================================================\n\nexport type CancelButtonProps = Omit<ButtonProps, \"action\" | \"variant\">\n\n/**\n * CancelButton - For cancel or reset actions.\n *\n * **AI Context:**\n * - Sets `action=\"cancel\"` to indicate cancellation\n * - Uses ghost variant and secondary tone by default\n * - Adds `data-cancel=\"true\"` for AI parsing\n *\n * @example\n * ```tsx\n * <CancelButton onClick={handleCancel}>\n *   Cancel\n * </CancelButton>\n * ```\n */\nexport function CancelButton(props: CancelButtonProps) {\n  return (\n    <Button\n      {...props}\n      action=\"cancel\"\n      tone={props.tone ?? \"secondary\"}\n      dataAttributes={{\n        ...props.dataAttributes,\n        \"data-cancel\": \"true\",\n      }}\n    />\n  )\n}\n\n// ============================================================================\n// LINK BUTTON - Navigation Actions\n// ============================================================================\n\nexport type LinkButtonProps = Omit<ButtonProps, \"action\" | \"as\"> & {\n  /**\n   * The URL to navigate to. Required for LinkButton.\n   */\n  href: string\n}\n\n/**\n * LinkButton - For navigation actions that look like buttons.\n *\n * **AI Context:**\n * - Sets `action=\"navigate\"` to indicate navigation\n * - Uses anchor element with button styling\n * - Adds `data-navigation=\"true\"` for AI parsing\n *\n * @example\n * ```tsx\n * <LinkButton href=\"/dashboard\">\n *   Go to Dashboard\n * </LinkButton>\n * ```\n */\nexport function LinkButton(props: LinkButtonProps) {\n  return (\n    <Button\n      {...props}\n      as=\"a\"\n      action=\"navigate\"\n      dataAttributes={{\n        ...props.dataAttributes,\n        \"data-navigation\": \"true\",\n      }}\n    />\n  )\n}\n\n// ============================================================================\n// PRIMARY BUTTON - General Actions\n// ============================================================================\n\nexport type PrimaryButtonProps = Omit<ButtonProps, \"tone\" | \"as\"> & {}\n\n/**\n * PrimaryButton - For general use when no specific semantic variant fits.\n *\n * @example\n * ```tsx\n * <PrimaryButton onClick={handlePrimaryAction}>\n *   Do something important\n * </PrimaryButton>\n * ```\n */\nexport function PrimaryButton(props: PrimaryButtonProps) {\n  return <Button {...props} tone=\"primary\" as=\"button\" />\n}\n\n// ============================================================================\n// SECONDARY BUTTON - General Actions\n// ============================================================================\n\nexport type SecondaryButtonProps = Omit<ButtonProps, \"tone\" | \"as\"> & {}\n\n/**\n * SecondaryButton - For general use when no specific semantic variant fits.\n *\n * @example\n * ```tsx\n * <SecondaryButton onClick={handleSecondaryAction}>\n *   Do something important\n * </SecondaryButton>\n * ```\n */\nexport function SecondaryButton(props: SecondaryButtonProps) {\n  return <Button {...props} tone=\"secondary\" as=\"button\" />\n}\n\n// ============================================================================\n// TEXT BUTTON - General Actions\n// ============================================================================\n\nexport type TextButtonProps = Omit<ButtonProps, \"tone\" | \"as\"> & {}\n\n/**\n * TextButton - For general use when no specific semantic variant fits.\n *\n * @example\n * ```tsx\n * <TextButton onClick={handleTextAction}>\n *   Do something important\n * </TextButton>\n * ```\n */\nexport function TextButton(props: TextButtonProps) {\n  return <Button {...props} tone=\"text\" as=\"button\" />\n}\n","import type { CssVars, InputOptions } from \"@marwes-ui/core\"\nimport { createInputRecipe } from \"@marwes-ui/core\"\nimport type * as React from \"react\"\nimport { useRenderKitDebug } from \"../hooks/use-renderkit-debug\"\nimport { useTheme } from \"../provider/use-theme\"\n\ntype StyleWithVars = React.CSSProperties & CssVars\n\nexport type InputProps = InputOptions & {\n  onValueChange?: (value: string) => void\n  className?: string\n}\n\nexport function Input(props: InputProps) {\n  const theme = useTheme()\n  const kit = createInputRecipe(theme, props)\n\n  // Debug hook for Storybook RenderKit addon\n  useRenderKitDebug(kit, \"Input\")\n\n  const style = kit.vars as StyleWithVars\n  const className = props.className ? `${kit.className} ${props.className}` : kit.className\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    props.onValueChange?.(e.target.value)\n  }\n\n  return (\n    <input\n      className={className}\n      style={style}\n      id={kit.a11y.id}\n      name={kit.a11y.name}\n      type={kit.a11y.type}\n      inputMode={kit.a11y.inputMode}\n      autoComplete={kit.a11y.autoComplete}\n      placeholder={kit.a11y.placeholder}\n      disabled={kit.a11y.disabled}\n      readOnly={kit.a11y.readOnly}\n      required={kit.a11y.required}\n      aria-label={kit.a11y.ariaLabel}\n      aria-invalid={kit.a11y.ariaInvalid}\n      aria-describedby={kit.a11y.ariaDescribedBy}\n      value={props.value}\n      defaultValue={props.defaultValue}\n      onChange={handleChange}\n    />\n  )\n}\n","/**\n * React adapter for Marwes Checkbox.\n * - Renders a native <input type=\"checkbox\"> using the core render kit.\n * - Applies strict a11y fields and CSS vars.\n * - Sets `indeterminate` via DOM property (not an HTML attribute).\n */\n\nimport { checkboxRecipe } from \"@marwes-ui/core\"\nimport type { CheckboxProps as CoreCheckboxProps } from \"@marwes-ui/core\"\nimport * as React from \"react\"\nimport { useTheme } from \"../../provider/use-theme\"\n\nexport type CheckboxProps = CoreCheckboxProps & {\n  /**\n   * Called with the next checked value when the user toggles the checkbox.\n   * For indeterminate state: browser toggling typically results in `checked=true` and `indeterminate=false`\n   * unless you keep controlling it.\n   */\n  onCheckedChange?: (checked: boolean) => void\n\n  /**\n   * Escape hatch for consumers that want raw event access.\n   * (Optional – keep if you want parity with other components.)\n   */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>\n}\n\n/**\n * Checkbox (Atom)\n *\n * Low-level checkbox control built on a native `<input type=\"checkbox\">`.\n * Use this when you need custom layout or when the label/description is handled\n * elsewhere (e.g. inside a list item, table row, or custom field wrapper).\n *\n * For most forms, prefer `CheckboxField`, which composes `Checkbox` with\n * label/description/error wiring and consistent spacing.\n *\n * Accessibility\n * - Provide **either** `ariaLabel` **or** `ariaLabelledBy` (or use `CheckboxField` which wires a `<label>`).\n * - Use `ariaDescribedBy` to connect supporting text (help/error).\n * - `indeterminate` is applied via a DOM property, not an HTML attribute.\n *\n * @example Basic (uncontrolled)\n * ```tsx\n * <Checkbox ariaLabel=\"Subscribe to updates\" defaultChecked />\n * ```\n *\n * @example Controlled\n * ```tsx\n * const [checked, setChecked] = React.useState(false);\n *\n * <Checkbox\n *   ariaLabel=\"Accept terms\"\n *   checked={checked}\n *   onCheckedChange={setChecked}\n * />\n * ```\n *\n * @example Indeterminate (mixed)\n * ```tsx\n * const [checked, setChecked] = React.useState(false);\n * const [mixed, setMixed] = React.useState(true);\n *\n * <Checkbox\n *   ariaLabel=\"Select all\"\n *   checked={checked}\n *   indeterminate={mixed}\n *   onCheckedChange={(next) => {\n *     setMixed(false);   // first interaction clears mixed state\n *     setChecked(next);\n *   }}\n * />\n * ```\n *\n * @example With external label + description\n * ```tsx\n * const id = \"terms\";\n * const descId = \"terms-desc\";\n *\n * <>\n *   <div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}>\n *     <Checkbox id={id} ariaDescribedBy={descId} />\n *     <label htmlFor={id}>I accept the terms</label>\n *   </div>\n *   <div id={descId}>Required to continue.</div>\n * </>\n * ```\n */\n\nexport function Checkbox(props: CheckboxProps): React.ReactElement {\n  const { onCheckedChange, onChange, ...coreProps } = props\n\n  const theme = useTheme()\n\n  const kit = checkboxRecipe({ ...coreProps, theme })\n\n  const inputRef = React.useRef<HTMLInputElement | null>(null)\n\n  // Keep DOM property in sync.\n  React.useLayoutEffect(() => {\n    const el = inputRef.current\n    if (!el) return\n    el.indeterminate = kit.indeterminate\n  }, [kit.indeterminate])\n\n  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n    onChange?.(e)\n    onCheckedChange?.(e.currentTarget.checked)\n  }\n\n  const { a11y } = kit\n\n  return (\n    <input\n      ref={inputRef}\n      type=\"checkbox\"\n      className={kit.className}\n      style={kit.vars}\n      id={a11y.id}\n      name={a11y.name}\n      value={a11y.value}\n      disabled={a11y.disabled === true}\n      required={a11y.required === true}\n      aria-label={a11y.ariaLabel}\n      aria-labelledby={a11y.ariaLabelledBy}\n      aria-describedby={a11y.ariaDescribedBy}\n      aria-checked={a11y.ariaChecked}\n      aria-invalid={a11y.ariaInvalid === true ? true : undefined}\n      checked={kit.checked}\n      defaultChecked={kit.defaultChecked}\n      onChange={handleChange}\n    />\n  )\n}\n","/**\n * React adapter for Marwes Divider component.\n * - Renders semantic <hr> using the core divider recipe.\n * - Supports 7 size variants: xxs/xs/sm/md/lg/xl/xxl.\n * - Supports horizontal and vertical orientation.\n * - Figma reference: node-id=1-932\n */\n\nimport { createDividerRecipe } from \"@marwes-ui/core\"\nimport type { DividerOptions, DividerOrientation, DividerSize } from \"@marwes-ui/core\"\nimport type { CssVars } from \"@marwes-ui/core\"\nimport * as React from \"react\"\nimport { useTheme } from \"../provider/use-theme\"\n\ntype StyleWithVars = React.CSSProperties & CssVars\n\nexport type DividerProps = DividerOptions &\n  Omit<React.HTMLAttributes<HTMLHRElement>, \"children\"> & {\n    /**\n     * Size variant for the divider.\n     * Maps to pixel values: xxs=1px, xs=8px, sm=16px, md=32px, lg=48px, xl=64px, xxl=80px\n     * @default \"md\"\n     */\n    size?: DividerSize\n\n    /**\n     * Orientation of the divider.\n     * @default \"horizontal\"\n     */\n    orientation?: DividerOrientation\n\n    /**\n     * Additional CSS class names.\n     */\n    className?: string\n\n    /**\n     * Inline styles.\n     */\n    style?: React.CSSProperties\n  }\n\n/**\n * Divider\n *\n * Semantic separator rendered as `<hr>`.\n * Supports size variants and both horizontal and vertical orientations.\n *\n * @example Basic usage (horizontal, medium size)\n * ```tsx\n * <Divider />\n * ```\n *\n * @example Different sizes\n * ```tsx\n * <Divider size=\"xxs\" /> //  1px hairline\n * <Divider size=\"sm\" />  // 16px\n * <Divider size=\"lg\" />  // 48px\n * ```\n *\n * @example Vertical divider\n * ```tsx\n * <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>\n *   <span>Left content</span>\n *   <Divider orientation=\"vertical\" size=\"sm\" />\n *   <span>Right content</span>\n * </div>\n * ```\n *\n * @example With custom ID\n * ```tsx\n * <Divider id=\"section-break\" />\n * ```\n */\n\nexport const Divider = React.forwardRef<HTMLHRElement, DividerProps>((props, ref) => {\n  const { className: customClassName, style: customStyle, ...opts } = props\n\n  const theme = useTheme()\n\n  const kit = createDividerRecipe(theme, opts)\n\n  const style = { ...(kit.vars as StyleWithVars), ...customStyle }\n  const className = customClassName ? `${kit.className} ${customClassName}` : kit.className\n\n  return <hr ref={ref} {...kit.a11y} {...kit.dataAttributes} className={className} style={style} />\n})\n\nDivider.displayName = \"Divider\"\n","/**\n * React adapter for Marwes H1 component.\n * - Renders semantic <h1> using the core heading recipe.\n * - Supports size override for visual/semantic mismatch.\n */\n\nimport { headingRecipe } from \"@marwes-ui/core\"\nimport type { HeadingOptions, HeadingSize } from \"@marwes-ui/core\"\nimport type { CssVars } from \"@marwes-ui/core\"\nimport type * as React from \"react\"\nimport { useTheme } from \"../../provider/use-theme\"\n\ntype StyleWithVars = React.CSSProperties & CssVars\n\nexport type H1Props = Omit<HeadingOptions, \"level\"> & {\n  /**\n   * Visual size override.\n   * Allows using h1 semantics with different visual styling.\n   * @default \"h1\"\n   */\n  size?: HeadingSize\n\n  /**\n   * Content of the heading.\n   */\n  children?: React.ReactNode\n\n  /**\n   * Additional CSS class names.\n   */\n  className?: string\n\n  /**\n   * Inline styles.\n   */\n  style?: React.CSSProperties\n}\n\n/**\n * H1 (Heading Level 1)\n *\n * Semantic top-level heading rendered as `<h1>`.\n * Supports visual size override for cases where semantic and visual hierarchy differ.\n *\n * @example Basic usage\n * ```tsx\n * <H1>Page Title</H1>\n * ```\n *\n * @example With size override\n * ```tsx\n * <H1 size=\"h2\">Visually smaller but semantically h1</H1>\n * ```\n *\n * @example With ID for anchor linking\n * ```tsx\n * <H1 id=\"introduction\">Introduction</H1>\n * ```\n */\nexport function H1(props: H1Props): React.ReactElement {\n  const { children, className: customClassName, style: customStyle, ...opts } = props\n  const theme = useTheme()\n\n  const kit = headingRecipe({ ...opts, level: 1 }, theme)\n\n  const style = { ...(kit.vars as StyleWithVars), ...customStyle }\n  const className = customClassName ? `${kit.className} ${customClassName}` : kit.className\n\n  return (\n    <h1 id={kit.a11y.id} aria-label={kit.a11y.ariaLabel} className={className} style={style}>\n      {children}\n    </h1>\n  )\n}\n","/**\n * React adapter for Marwes H2 component.\n * - Renders semantic <h2> using the core heading recipe.\n * - Supports size override for visual/semantic mismatch.\n */\n\nimport { headingRecipe } from \"@marwes-ui/core\"\nimport type { HeadingOptions, HeadingSize } from \"@marwes-ui/core\"\nimport type { CssVars } from \"@marwes-ui/core\"\nimport type * as React from \"react\"\nimport { useTheme } from \"../../provider/use-theme\"\n\ntype StyleWithVars = React.CSSProperties & CssVars\n\nexport type H2Props = Omit<HeadingOptions, \"level\"> & {\n  /**\n   * Visual size override.\n   * Allows using h2 semantics with different visual styling.\n   * @default \"h2\"\n   */\n  size?: HeadingSize\n\n  /**\n   * Content of the heading.\n   */\n  children?: React.ReactNode\n\n  /**\n   * Additional CSS class names.\n   */\n  className?: string\n\n  /**\n   * Inline styles.\n   */\n  style?: React.CSSProperties\n}\n\n/**\n * H2 (Heading Level 2)\n *\n * Semantic section heading rendered as `<h2>`.\n * Supports visual size override for cases where semantic and visual hierarchy differ.\n *\n * @example Basic usage\n * ```tsx\n * <H2>Section Title</H2>\n * ```\n *\n * @example With size override\n * ```tsx\n * <H2 size=\"h1\">Visually larger but semantically h2</H2>\n * ```\n */\nexport function H2(props: H2Props): React.ReactElement {\n  const { children, className: customClassName, style: customStyle, ...opts } = props\n  const theme = useTheme()\n\n  const kit = headingRecipe({ ...opts, level: 2 }, theme)\n\n  const style = { ...(kit.vars as StyleWithVars), ...customStyle }\n  const className = customClassName ? `${kit.className} ${customClassName}` : kit.className\n\n  return (\n    <h2 id={kit.a11y.id} aria-label={kit.a11y.ariaLabel} className={className} style={style}>\n      {children}\n    </h2>\n  )\n}\n","/**\n * React adapter for Marwes H3 component.\n * - Renders semantic <h3> using the core heading recipe.\n * - Supports size override for visual/semantic mismatch.\n */\n\nimport { headingRecipe } from \"@marwes-ui/core\"\nimport type { HeadingOptions, HeadingSize } from \"@marwes-ui/core\"\nimport type { CssVars } from \"@marwes-ui/core\"\nimport type * as React from \"react\"\nimport { useTheme } from \"../../provider/use-theme\"\n\ntype StyleWithVars = React.CSSProperties & CssVars\n\nexport type H3Props = Omit<HeadingOptions, \"level\"> & {\n  /**\n   * Visual size override.\n   * Allows using h3 semantics with different visual styling.\n   * @default \"h3\"\n   */\n  size?: HeadingSize\n\n  /**\n   * Content of the heading.\n   */\n  children?: React.ReactNode\n\n  /**\n   * Additional CSS class names.\n   */\n  className?: string\n\n  /**\n   * Inline styles.\n   */\n  style?: React.CSSProperties\n}\n\n/**\n * H3 (Heading Level 3)\n *\n * Semantic subsection heading rendered as `<h3>`.\n * Supports visual size override for cases where semantic and visual hierarchy differ.\n *\n * @example Basic usage\n * ```tsx\n * <H3>Subsection Title</H3>\n * ```\n *\n * @example With size override\n * ```tsx\n * <H3 size=\"h2\">Visually larger but semantically h3</H3>\n * ```\n */\nexport function H3(props: H3Props): React.ReactElement {\n  const { children, className: customClassName, style: customStyle, ...opts } = props\n  const theme = useTheme()\n\n  const kit = headingRecipe({ ...opts, level: 3 }, theme)\n\n  const style = { ...(kit.vars as StyleWithVars), ...customStyle }\n  const className = customClassName ? `${kit.className} ${customClassName}` : kit.className\n\n  return (\n    <h3 id={kit.a11y.id} aria-label={kit.a11y.ariaLabel} className={className} style={style}>\n      {children}\n    </h3>\n  )\n}\n","/**\n * React adapter for Marwes Paragraph component.\n * - Renders semantic <p> using the core paragraph recipe.\n * - Supports size variants: sm/md/lg.\n */\n\nimport { paragraphRecipe } from \"@marwes-ui/core\"\nimport type { ParagraphOptions, ParagraphSize } from \"@marwes-ui/core\"\nimport type { CssVars } from \"@marwes-ui/core\"\nimport type * as React from \"react\"\nimport { useTheme } from \"../../provider/use-theme\"\n\ntype StyleWithVars = React.CSSProperties & CssVars\n\nexport type ParagraphProps = ParagraphOptions & {\n  /**\n   * Size variant.\n   * @default \"md\"\n   */\n  size?: ParagraphSize\n\n  /**\n   * Content of the paragraph.\n   */\n  children?: React.ReactNode\n\n  /**\n   * Additional CSS class names.\n   */\n  className?: string\n\n  /**\n   * Inline styles.\n   */\n  style?: React.CSSProperties\n}\n\n/**\n * Paragraph\n *\n * Semantic text block rendered as `<p>`.\n * Supports size variants for different text contexts.\n *\n * @example Basic usage\n * ```tsx\n * <Paragraph>This is a standard paragraph.</Paragraph>\n * ```\n *\n * @example With size variant\n * ```tsx\n * <Paragraph size=\"sm\">Small text for disclaimers.</Paragraph>\n * <Paragraph size=\"lg\">Emphasized lead paragraph.</Paragraph>\n * ```\n *\n * @example With ID\n * ```tsx\n * <Paragraph id=\"intro\">Introduction text.</Paragraph>\n * ```\n */\nexport function Paragraph(props: ParagraphProps): React.ReactElement {\n  const { children, className: customClassName, style: customStyle, ...opts } = props\n  const theme = useTheme()\n\n  const kit = paragraphRecipe(opts, theme)\n\n  const style = { ...(kit.vars as StyleWithVars), ...customStyle }\n  const className = customClassName ? `${kit.className} ${customClassName}` : kit.className\n\n  return (\n    <p id={kit.a11y.id} className={className} style={style}>\n      {children}\n    </p>\n  )\n}\n","import * as React from \"react\"\nimport { Checkbox } from \".\"\nimport type { CheckboxProps } from \".\"\nimport { Paragraph } from \"../paragraph\"\n\nexport type CheckboxFieldProps = {\n  /** Optional: if omitted, we generate one via useId(). */\n  id?: string\n\n  /** Field content (rendered by adapter). */\n  label: React.ReactNode\n  description?: React.ReactNode\n  error?: React.ReactNode\n\n  /** Props forwarded to the Checkbox atom. */\n  checkbox: CheckboxProps\n\n  /** Additional aria-describedby IDs to merge with internal description/error IDs. */\n  ariaDescribedBy?: string\n}\n\nfunction cx(...parts: Array<string | false>): string {\n  return parts.filter(Boolean).join(\" \")\n}\n\n/**\n * CheckboxField (Molecule) — Recommended\n *\n * A convenient, accessible wrapper around `Checkbox` that provides:\n * - a clickable `<label>` wired via `htmlFor`/`id`\n * - optional `description` and `error` regions\n * - automatic `aria-describedby` wiring (description + error + any external ids)\n * - automatic invalid state when `error` is present\n *\n * Use `CheckboxField` for most forms. Use `Checkbox` directly only when you need\n * a highly custom layout (tables, list rows, compound list items, etc.).\n *\n * Accessibility\n * - Generates a stable `id` via `useId()` when `id` is not provided.\n * - Always renders a real `<label>` element connected to the checkbox control.\n * - When `description` and/or `error` are present, it sets `aria-describedby`\n *   on the checkbox to reference their ids.\n * - When `error` is present, the checkbox is marked invalid (aria-invalid via core).\n *\n * @example Minimal (recommended)\n * ```tsx\n * <CheckboxField\n *   label=\"Subscribe to updates\"\n *   checkbox={{ defaultChecked: true }}\n * />\n * ```\n *\n * @example With description\n * ```tsx\n * <CheckboxField\n *   label=\"Subscribe to updates\"\n *   description=\"We'll only email you about important product changes.\"\n *   checkbox={{}}\n * />\n * ```\n *\n * @example With error (invalid state)\n * ```tsx\n * <CheckboxField\n *   label=\"Accept terms\"\n *   error=\"You must accept the terms to continue.\"\n *   checkbox={{ required: true }}\n * />\n * ```\n *\n * @example Controlled\n * ```tsx\n * const [checked, setChecked] = React.useState(false);\n *\n * <CheckboxField\n *   label=\"Accept terms\"\n *   checkbox={{\n *     checked,\n *     onCheckedChange: setChecked,\n *   }}\n * />\n * ```\n *\n * @example Indeterminate (mixed)\n * ```tsx\n * const [checked, setChecked] = React.useState(false);\n * const [mixed, setMixed] = React.useState(true);\n *\n * <CheckboxField\n *   label=\"Select all\"\n *   description=\"Applies to all items in the current view.\"\n *   checkbox={{\n *     checked,\n *     indeterminate: mixed,\n *     onCheckedChange: (next) => {\n *       setMixed(false);\n *       setChecked(next);\n *     },\n *   }}\n * />\n * ```\n *\n * @example Custom describedBy (merge with internal description/error)\n * ```tsx\n * <CheckboxField\n *   ariaDescribedBy=\"my-extra-help\"\n *   label=\"Enable telemetry\"\n *   description=\"Helps us improve the product.\"\n *   checkbox={{}}\n * />\n *\n * <div id=\"my-extra-help\">This setting can be changed later.</div>\n * ```\n */\n\nexport function CheckboxField(props: CheckboxFieldProps): React.ReactElement {\n  const reactId = React.useId()\n  const id = props.id ?? `mw-checkbox-${reactId}`\n\n  const hasDescription = props.description !== undefined\n  const hasError = props.error !== undefined\n\n  const descId = hasDescription ? `${id}-desc` : undefined\n  const errorId = hasError ? `${id}-error` : undefined\n\n  // Merge aria-describedby from multiple sources\n  const describedByParts = [props.ariaDescribedBy, descId, errorId].filter(Boolean)\n  const mergedDescribedBy = describedByParts.length > 0 ? describedByParts.join(\" \") : undefined\n\n  const disabled = props.checkbox.disabled || false\n  const invalid = hasError || props.checkbox.invalid || false\n\n  const wrapperClass = cx(\n    \"mw-checkbox-field\",\n    disabled && \"mw-checkbox-field--disabled\",\n    invalid && \"mw-checkbox-field--invalid\",\n  )\n\n  // Prepare checkbox props with proper ariaDescribedBy merging\n  const checkboxProps: CheckboxProps = {\n    ...props.checkbox,\n    id,\n    invalid,\n  }\n\n  if (mergedDescribedBy) {\n    checkboxProps.ariaDescribedBy = mergedDescribedBy\n  }\n\n  return (\n    <div className={wrapperClass}>\n      <div className=\"mw-checkbox-field__row\">\n        <Checkbox {...checkboxProps} />\n\n        <label className=\"mw-checkbox-field__label\" htmlFor={id}>\n          <Paragraph size=\"md\">{props.label}</Paragraph>\n        </label>\n      </div>\n\n      {hasDescription && (\n        <div className=\"mw-checkbox-field__description\" id={descId}>\n          <Paragraph size=\"sm\">{props.description}</Paragraph>\n        </div>\n      )}\n\n      {hasError && (\n        <div className=\"mw-checkbox-field__error\" id={errorId} aria-live=\"polite\">\n          <Paragraph size=\"sm\">{props.error}</Paragraph>\n        </div>\n      )}\n    </div>\n  )\n}\n","import * as React from \"react\"\nimport { Input } from \"./input\"\nimport type { InputProps } from \"./input\"\nimport { Paragraph } from \"./paragraph\"\n\nexport type InputFieldProps = {\n  /** Optional: if omitted, we generate one via useId(). */\n  id?: string\n\n  /** Field label (required for accessibility). */\n  label: React.ReactNode\n\n  /** Optional helper text shown below the input. */\n  helperText?: React.ReactNode\n\n  /** Optional error message. When present, input is marked invalid. */\n  error?: React.ReactNode\n\n  /** Props forwarded to the Input atom. */\n  input: InputProps\n\n  /** Additional aria-describedby IDs to merge with internal helper/error IDs. */\n  ariaDescribedBy?: string\n}\n\nfunction cx(...parts: Array<string | false>): string {\n  return parts.filter(Boolean).join(\" \")\n}\n\n/**\n * InputField (Molecule) — Recommended\n *\n * A convenient, accessible wrapper around `Input` that provides:\n * - a visible `<label>` wired via `htmlFor`/`id`\n * - optional `helperText` and `error` regions\n * - automatic `aria-describedby` wiring (helperText + error + any external ids)\n * - automatic invalid state when `error` is present\n *\n * Use `InputField` for most forms. Use `Input` directly only when you need\n * a highly custom layout or composite inputs.\n *\n * Accessibility\n * - Generates a stable `id` via `useId()` when `id` is not provided.\n * - Always renders a visible `<label>` element connected to the input control.\n * - When `helperText` and/or `error` are present, it sets `aria-describedby`\n *   on the input to reference their ids.\n * - When `error` is present, the input is marked invalid (aria-invalid).\n * - Error region has `aria-live=\"polite\"` for screen reader announcements.\n *\n * @example Minimal (recommended)\n * ```tsx\n * <InputField\n *   label=\"Email address\"\n *   input={{ type: \"email\", placeholder: \"you@example.com\" }}\n * />\n * ```\n *\n * @example With helper text\n * ```tsx\n * <InputField\n *   label=\"Username\"\n *   helperText=\"Choose a unique username between 3-20 characters.\"\n *   input={{ type: \"text\", placeholder: \"johnsmith\" }}\n * />\n * ```\n *\n * @example With error (invalid state)\n * ```tsx\n * <InputField\n *   label=\"Password\"\n *   error=\"Password must be at least 8 characters.\"\n *   input={{ type: \"password\", required: true }}\n * />\n * ```\n *\n * @example Controlled\n * ```tsx\n * const [email, setEmail] = React.useState(\"\");\n *\n * <InputField\n *   label=\"Email\"\n *   input={{\n *     type: \"email\",\n *     value: email,\n *     onValueChange: setEmail,\n *   }}\n * />\n * ```\n *\n * @example Disabled\n * ```tsx\n * <InputField\n *   label=\"Account ID\"\n *   helperText=\"This value cannot be changed.\"\n *   input={{ value: \"ACC-12345\", disabled: true }}\n * />\n * ```\n *\n * @example Read-only\n * ```tsx\n * <InputField\n *   label=\"Account created\"\n *   input={{ value: \"January 15, 2026\", readOnly: true }}\n * />\n * ```\n *\n * @example Custom describedBy (merge with internal helper/error)\n * ```tsx\n * <InputField\n *   ariaDescribedBy=\"my-extra-help\"\n *   label=\"API Key\"\n *   helperText=\"Your key is stored securely.\"\n *   input={{ type: \"password\" }}\n * />\n *\n * <div id=\"my-extra-help\">This can be regenerated from your settings.</div>\n * ```\n */\nexport function InputField(props: InputFieldProps): React.ReactElement {\n  const reactId = React.useId()\n  const id = props.id ?? `mw-input-${reactId}`\n\n  const hasHelperText = props.helperText !== undefined\n  const hasError = props.error !== undefined\n\n  const helperTextId = hasHelperText ? `${id}-helper` : undefined\n  const errorId = hasError ? `${id}-error` : undefined\n\n  // Merge aria-describedby from multiple sources\n  const describedByParts = [props.ariaDescribedBy, helperTextId, errorId].filter(Boolean)\n  const mergedDescribedBy = describedByParts.length > 0 ? describedByParts.join(\" \") : undefined\n\n  const disabled = props.input.disabled || false\n  const readOnly = props.input.readOnly || false\n  const invalid = hasError || props.input.invalid || false\n\n  const wrapperClass = cx(\n    \"mw-input-field\",\n    disabled && \"mw-input-field--disabled\",\n    invalid && \"mw-input-field--invalid\",\n    readOnly && \"mw-input-field--readonly\",\n  )\n\n  // Prepare input props with proper describedBy merging\n  const inputProps: InputProps = {\n    ...props.input,\n    id,\n    invalid,\n  }\n\n  if (mergedDescribedBy) {\n    inputProps.describedBy = mergedDescribedBy\n  }\n\n  return (\n    <div className={wrapperClass}>\n      <label className=\"mw-input-field__label\" htmlFor={id}>\n        <Paragraph size=\"md\">{props.label}</Paragraph>\n      </label>\n\n      <Input {...inputProps} />\n\n      {hasHelperText && !hasError && (\n        <div className=\"mw-input-field__helper\" id={helperTextId}>\n          <Paragraph size=\"sm\">{props.helperText}</Paragraph>\n        </div>\n      )}\n\n      {hasError && (\n        <div className=\"mw-input-field__error\" id={errorId} aria-live=\"polite\">\n          <Paragraph size=\"sm\">{props.error}</Paragraph>\n        </div>\n      )}\n    </div>\n  )\n}\n"]}
+{"version":3,"sources":["../src/provider/marwes-context.ts","../src/provider/marwes-provider.tsx","../src/provider/use-system.ts","../src/provider/use-theme.ts","../src/components/icon/icon.tsx","../src/components/button.tsx","../src/components/button-variants.tsx","../src/hooks/use-renderkit-debug.ts","../src/components/input.tsx","../src/components/checkbox/checkbox.tsx","../src/components/divider.tsx","../src/components/heading/h1.tsx","../src/components/heading/h2.tsx","../src/components/heading/h3.tsx","../src/components/paragraph/paragraph.tsx","../src/components/checkbox/checkbox-field.tsx","../src/components/input-field.tsx","../src/components/field-variants.tsx"],"names":["React","React2","React3","jsx","React4","React5","headingRecipe","React6","jsxs","cx"],"mappings":"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","file":"index.js","sourcesContent":["import type { System, ThemeMode } from \"@marwes-ui/core\"\nimport * as React from \"react\"\n\nexport type MarwesContextValue = {\n  system: System\n  onModeChange: ((mode: ThemeMode) => void) | undefined\n}\n\nexport const MarwesContext = React.createContext<MarwesContextValue | null>(null)\n","import type { Preset, System, ThemeMode, ThemeOverrides } from \"@marwes-ui/core\"\nimport { createSystem, switchMode } from \"@marwes-ui/core\"\nimport { firstEdition } from \"@marwes-ui/presets\"\nimport * as React from \"react\"\nimport { MarwesContext } from \"./marwes-context\"\n\nexport type MarwesProviderProps = {\n  preset?: Preset\n  theme?: ThemeOverrides\n  /**\n   * Current theme mode. Determines light or dark color palette.\n   * When changed, efficiently switches theme colors without recreating the entire system.\n   */\n  mode?: ThemeMode\n  /**\n   * Callback fired when mode should change.\n   * Users are responsible for managing mode state and persistence (e.g., localStorage).\n   *\n   * Example with persistence:\n   * ```tsx\n   * const [mode, setMode] = useState<ThemeMode>(\n   *   () => (localStorage.getItem('theme-mode') as ThemeMode) ?? 'light'\n   * );\n   *\n   * const handleModeChange = (newMode: ThemeMode) => {\n   *   setMode(newMode);\n   *   localStorage.setItem('theme-mode', newMode);\n   * };\n   *\n   * <MarwesProvider mode={mode} onModeChange={handleModeChange}>\n   * ```\n   */\n  onModeChange?: (mode: ThemeMode) => void\n  children: React.ReactNode\n}\n\nexport function MarwesProvider({\n  preset = firstEdition,\n  theme,\n  mode = \"light\",\n  onModeChange,\n  children,\n}: MarwesProviderProps) {\n  // Create initial system\n  const initialSystem = React.useMemo(() => {\n    return createSystem({\n      preset,\n      theme: theme ? { ...theme, mode } : { mode },\n    })\n  }, [preset, theme, mode])\n\n  // Optimize mode switching using switchMode() instead of recreating system\n  const system: System = React.useMemo(() => {\n    if (mode === initialSystem.theme.mode) {\n      return initialSystem\n    }\n    return switchMode(initialSystem, mode)\n  }, [initialSystem, mode])\n\n  // Apply theme class to container for CSS-based dark mode overrides\n  const themeClass = `mw-theme--${system.theme.mode}`\n\n  return (\n    <MarwesContext.Provider value={{ system, onModeChange }}>\n      <div className={themeClass}>{children}</div>\n    </MarwesContext.Provider>\n  )\n}\n","import type { System } from \"@marwes-ui/core\"\nimport * as React from \"react\"\nimport { MarwesContext } from \"./marwes-context\"\n\nexport function useSystem(): System {\n  const ctx = React.useContext(MarwesContext)\n  if (!ctx) {\n    throw new Error(\"MarwesProvider is missing. Wrap your app in <MarwesProvider />.\")\n  }\n  return ctx.system\n}\n","import type { Theme } from \"@marwes-ui/core\"\nimport { useSystem } from \"./use-system\"\n\nexport function useTheme(): Theme {\n  return useSystem().theme\n}\n","import {\n  type IconSize,\n  type IconStrokeWidth,\n  iconRegistry,\n  resolveIconSize,\n  resolveIconStrokeWidth,\n} from \"@marwes-ui/core\"\nimport type * as React from \"react\"\nimport { useTheme } from \"../../provider/use-theme\"\n\ntype IconName = keyof typeof iconRegistry\n\nexport type IconProps = {\n  name: IconName\n\n  /**\n   * Token (\"xs\"|\"sm\"|\"md\"|\"lg\") or a raw px number.\n   * Defaults to system.theme.icon.size\n   */\n  size?: IconSize | number\n\n  /**\n   * Token (\"xs\"|\"sm\"|\"md\"|\"lg\") or a raw number.\n   * Defaults to system.theme.icon.strokeWidth\n   */\n  strokeWidth?: IconStrokeWidth | number\n\n  /**\n   * Common props\n   */\n  className?: string\n  \"aria-label\"?: string\n  decorative?: boolean\n}\n\nexport function Icon({\n  name,\n  size,\n  strokeWidth,\n  className,\n  \"aria-label\": ariaLabel,\n  decorative,\n}: IconProps) {\n  const theme = useTheme()\n  const themeIcon = theme.icon\n\n  const px = resolveIconSize(size ?? themeIcon.size)\n  const sw = resolveIconStrokeWidth(strokeWidth ?? themeIcon.strokeWidth)\n\n  const def = iconRegistry[name]\n\n  // If no aria-label => decorative\n  const isDecorative = decorative || !ariaLabel\n\n  return (\n    <svg\n      width={px}\n      height={px}\n      viewBox={def.viewBox}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={sw}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={className}\n      aria-hidden={isDecorative ? \"true\" : undefined}\n      aria-label={ariaLabel}\n      role={isDecorative ? undefined : \"img\"}\n      focusable=\"false\"\n    >\n      {def.nodes.map((iconNode, nodeIndex) => {\n        const TagName = iconNode.tag\n        // biome-ignore lint/suspicious/noArrayIndexKey: Icon nodes are static and never reordered\n        return <TagName key={nodeIndex} {...(iconNode.attrs as React.SVGAttributes<SVGElement>)} />\n      })}\n    </svg>\n  )\n}\n","import type { ButtonOptions, CssVars } from \"@marwes-ui/core\"\nimport { createButtonRecipe } from \"@marwes-ui/core\"\nimport type * as React from \"react\"\nimport { useTheme } from \"../provider/use-theme\"\nimport { Icon } from \"./icon\"\n\ntype StyleWithVars = React.CSSProperties & CssVars\n\nexport type ButtonProps = ButtonOptions & {\n  children?: React.ReactNode\n  onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void\n  className?: string\n}\n\nexport function Button(props: ButtonProps) {\n  const theme = useTheme()\n  const kit = createButtonRecipe(theme, props)\n\n  const style = kit.vars as StyleWithVars\n  const className = props.className ? `${kit.className} ${props.className}` : kit.className\n\n  const content = (\n    <>\n      {props.iconLeft && <Icon name={props.iconLeft} size=\"xs\" decorative />}\n      {props.children}\n      {props.iconRight && <Icon name={props.iconRight} size=\"xs\" decorative />}\n    </>\n  )\n\n  if (kit.tag === \"button\") {\n    return (\n      <button\n        type={kit.a11y.type}\n        disabled={kit.a11y.disabled}\n        aria-label={kit.a11y.ariaLabel}\n        aria-busy={kit.a11y.ariaBusy}\n        aria-disabled={kit.a11y.ariaDisabled}\n        aria-pressed={kit.a11y.ariaPressed}\n        aria-expanded={kit.a11y.ariaExpanded}\n        aria-controls={kit.a11y.ariaControls}\n        title={kit.a11y.title}\n        className={className}\n        style={style}\n        onClick={(e) => props.onClick?.(e)}\n        {...kit.dataAttributes}\n      >\n        {content}\n      </button>\n    )\n  }\n\n  return (\n    <a\n      href={kit.a11y.href}\n      role={kit.a11y.role}\n      tabIndex={kit.a11y.tabIndex}\n      aria-label={kit.a11y.ariaLabel}\n      aria-busy={kit.a11y.ariaBusy}\n      aria-disabled={kit.a11y.ariaDisabled}\n      aria-pressed={kit.a11y.ariaPressed}\n      aria-expanded={kit.a11y.ariaExpanded}\n      aria-controls={kit.a11y.ariaControls}\n      title={kit.a11y.title}\n      className={className}\n      style={style}\n      onClick={(e) => {\n        if (kit.blockClick) {\n          e.preventDefault()\n          return\n        }\n        props.onClick?.(e)\n      }}\n      {...kit.dataAttributes}\n    >\n      {content}\n    </a>\n  )\n}\n","import { ButtonAction, ButtonVariant, IconName } from \"@marwes-ui/core\"\nimport { Button, type ButtonProps } from \"./button\"\n\n/**\n * Semantic Button Variants - AI-Friendly Components\n *\n * These variants encode best practices and automatically set AI-friendly\n * metadata, making it easier for both developers and AI tools to understand\n * the purpose and behavior of each button.\n */\n\n// ============================================================================\n// DANGER BUTTON - Destructive Actions\n// ============================================================================\n\nexport type DangerButtonProps = Omit<ButtonProps, \"variant\" | \"action\"> & {\n  /**\n   * Override automatic confirmation requirement.\n   * Defaults to `true` for destructive actions.\n   */\n  confirmation?: boolean\n}\n\n/**\n * DangerButton - For destructive actions like delete, remove, or irreversible operations.\n *\n * **AI Context:**\n * - Sets `variant=\"primary\"` with error state for visual warning\n * - Sets `action=\"delete\"` to indicate destructive behavior\n * - Enables confirmation by default\n * - Adds `data-destructive=\"true\"` for AI parsing\n *\n * @example\n * ```tsx\n * import { DangerButton } from \"@marwes-ui/react\";\n *\n * export function Example() {\n *   return <DangerButton onClick={deleteProject}>Delete Project</DangerButton>;\n * }\n * ```\n */\nexport function DangerButton(props: DangerButtonProps) {\n  const { confirmation = true, ...restProps } = props\n\n  return (\n    <Button\n      {...restProps}\n      variant={ButtonVariant.primary}\n      action={ButtonAction.delete}\n      iconRight={IconName.Minus}\n      confirmation={confirmation}\n      dataAttributes={{\n        ...props.dataAttributes,\n        \"data-destructive\": \"true\",\n        \"data-confirmation-required\": confirmation ? \"true\" : \"false\",\n      }}\n    />\n  )\n}\n\n// ============================================================================\n// CREATE BUTTON - Creation Actions\n// ============================================================================\n\nexport type CreateButtonProps = Omit<ButtonProps, \"action\">\n\n/**\n * CreateButton - For creation actions like adding new items or entities.\n *\n * **AI Context:**\n * - Sets `action=\"create\"` to indicate creation behavior\n * - Uses primary tone by default\n * - Adds `data-creative=\"true\"` for AI parsing\n *\n * @example\n * ```tsx\n * <CreateButton onClick={createProject}>\n *   New Project\n * </CreateButton>\n * ```\n */\nexport function CreateButton(props: CreateButtonProps) {\n  return (\n    <Button\n      {...props}\n      action=\"create\"\n      variant={props.variant ?? \"primary\"}\n      dataAttributes={{\n        ...props.dataAttributes,\n        \"data-creative\": \"true\",\n      }}\n    />\n  )\n}\n\n// ============================================================================\n// SUBMIT BUTTON - Form Submissions\n// ============================================================================\n\nexport type SubmitButtonProps = Omit<ButtonProps, \"action\" | \"as\">\n\n/**\n * SubmitButton - For form submissions.\n *\n * **AI Context:**\n * - Sets `action=\"submit\"` and `type=\"submit\"`\n * - Adds `data-context=\"form-submit\"` for AI parsing\n * - Automatically uses button element (not anchor)\n *\n * @example\n * ```tsx\n * <SubmitButton>Submit</SubmitButton>\n * ```\n */\nexport function SubmitButton(props: SubmitButtonProps) {\n  return (\n    <Button\n      {...props}\n      as=\"button\"\n      action=\"submit\"\n      dataAttributes={{\n        \"data-context\": \"form-submit\",\n        ...props.dataAttributes,\n      }}\n    />\n  )\n}\n\n// ============================================================================\n// CANCEL BUTTON - Cancel/Reset Actions\n// ============================================================================\n\nexport type CancelButtonProps = Omit<ButtonProps, \"action\">\n\n/**\n * CancelButton - For cancel or reset actions.\n *\n * **AI Context:**\n * - Sets `action=\"cancel\"` to indicate cancellation\n * - Uses secondary variant by default\n * - Adds `data-cancel=\"true\"` for AI parsing\n *\n * @example\n * ```tsx\n * <CancelButton onClick={handleCancel}>\n *   Cancel\n * </CancelButton>\n * ```\n */\nexport function CancelButton(props: CancelButtonProps) {\n  return (\n    <Button\n      {...props}\n      action=\"cancel\"\n      variant={props.variant ?? \"secondary\"}\n      dataAttributes={{\n        ...props.dataAttributes,\n        \"data-cancel\": \"true\",\n      }}\n    />\n  )\n}\n\n// ============================================================================\n// LINK BUTTON - Navigation Actions\n// ============================================================================\n\nexport type LinkButtonProps = Omit<ButtonProps, \"action\" | \"as\"> & {\n  /**\n   * The URL to navigate to. Required for LinkButton.\n   */\n  href: string\n}\n\n/**\n * LinkButton - For navigation actions that look like buttons.\n *\n * **AI Context:**\n * - Sets `action=\"navigate\"` to indicate navigation\n * - Uses anchor element with button styling\n * - Adds `data-navigation=\"true\"` for AI parsing\n *\n * @example\n * ```tsx\n * <LinkButton href=\"/dashboard\">\n *   Go to Dashboard\n * </LinkButton>\n * ```\n */\nexport function LinkButton(props: LinkButtonProps) {\n  return (\n    <Button\n      {...props}\n      as=\"a\"\n      action=\"navigate\"\n      dataAttributes={{\n        ...props.dataAttributes,\n        \"data-navigation\": \"true\",\n      }}\n    />\n  )\n}\n\n// ============================================================================\n// PRIMARY BUTTON - General Actions\n// ============================================================================\n\nexport type PrimaryButtonProps = Omit<ButtonProps, \"variant\" | \"as\"> & {}\n\n/**\n * PrimaryButton - For general use when no specific semantic variant fits.\n *\n * @example\n * ```tsx\n * <PrimaryButton onClick={handlePrimaryAction}>\n *   Do something important\n * </PrimaryButton>\n * ```\n */\nexport function PrimaryButton(props: PrimaryButtonProps) {\n  return <Button {...props} variant=\"primary\" as=\"button\" />\n}\n\n// ============================================================================\n// SECONDARY BUTTON - General Actions\n// ============================================================================\n\nexport type SecondaryButtonProps = Omit<ButtonProps, \"variant\" | \"as\"> & {}\n\n/**\n * SecondaryButton - For general use when no specific semantic variant fits.\n *\n * @example\n * ```tsx\n * <SecondaryButton onClick={handleSecondaryAction}>\n *   Do something important\n * </SecondaryButton>\n * ```\n */\nexport function SecondaryButton(props: SecondaryButtonProps) {\n  return <Button {...props} variant=\"secondary\" as=\"button\" />\n}\n\n// ============================================================================\n// TEXT BUTTON - General Actions\n// ============================================================================\n\nexport type TextButtonProps = Omit<ButtonProps, \"variant\" | \"as\"> & {}\n\n/**\n * TextButton - For general use when no specific semantic variant fits.\n *\n * @example\n * ```tsx\n * <TextButton onClick={handleTextAction}>\n *   Do something important\n * </TextButton>\n * ```\n */\nexport function TextButton(props: TextButtonProps) {\n  return <Button {...props} variant=\"text\" as=\"button\" />\n}\n","import { useEffect } from \"react\"\n\nconst RENDERKIT_EVENT = \"marwes/renderkit/renderkit-update\"\n\nexport function useRenderKitDebug(renderKit: unknown, componentName: string) {\n  useEffect(() => {\n    if (typeof window !== \"undefined\") {\n      console.log(`[RenderKit Debug] ${componentName}:`, renderKit)\n      const event = new CustomEvent(RENDERKIT_EVENT, {\n        detail: {\n          ...(renderKit as Record<string, unknown>),\n          _meta: { component: componentName },\n        },\n      })\n      window.dispatchEvent(event)\n    }\n  }, [renderKit, componentName])\n}\n","import type { CssVars, InputOptions } from \"@marwes-ui/core\"\nimport { createInputRecipe } from \"@marwes-ui/core\"\nimport type * as React from \"react\"\nimport { useRenderKitDebug } from \"../hooks/use-renderkit-debug\"\nimport { useTheme } from \"../provider/use-theme\"\n\ntype StyleWithVars = React.CSSProperties & CssVars\n\nexport type InputProps = InputOptions & {\n  onValueChange?: (value: string) => void\n  className?: string\n}\n\nexport function Input(props: InputProps) {\n  const theme = useTheme()\n  const kit = createInputRecipe(theme, props)\n\n  // Debug hook for Storybook RenderKit addon\n  useRenderKitDebug(kit, \"Input\")\n\n  const style = kit.vars as StyleWithVars\n  const className = props.className ? `${kit.className} ${props.className}` : kit.className\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    props.onValueChange?.(e.target.value)\n  }\n\n  return (\n    <input\n      className={className}\n      style={style}\n      id={kit.a11y.id}\n      name={kit.a11y.name}\n      type={kit.a11y.type}\n      inputMode={kit.a11y.inputMode}\n      autoComplete={kit.a11y.autoComplete}\n      placeholder={kit.a11y.placeholder}\n      disabled={kit.a11y.disabled}\n      readOnly={kit.a11y.readOnly}\n      required={kit.a11y.required}\n      aria-label={kit.a11y.ariaLabel}\n      aria-invalid={kit.a11y.ariaInvalid}\n      aria-describedby={kit.a11y.ariaDescribedBy}\n      value={props.value}\n      defaultValue={props.defaultValue}\n      onChange={handleChange}\n    />\n  )\n}\n","/**\n * React adapter for Marwes Checkbox.\n * - Renders a native <input type=\"checkbox\"> using the core render kit.\n * - Applies strict a11y fields and CSS vars.\n * - Sets `indeterminate` via DOM property (not an HTML attribute).\n */\n\nimport { checkboxRecipe } from \"@marwes-ui/core\"\nimport type { CheckboxProps as CoreCheckboxProps } from \"@marwes-ui/core\"\nimport * as React from \"react\"\nimport { useTheme } from \"../../provider/use-theme\"\n\nexport type CheckboxProps = CoreCheckboxProps & {\n  /**\n   * Called with the next checked value when the user toggles the checkbox.\n   * For indeterminate state: browser toggling typically results in `checked=true` and `indeterminate=false`\n   * unless you keep controlling it.\n   */\n  onCheckedChange?: (checked: boolean) => void\n\n  /**\n   * Escape hatch for consumers that want raw event access.\n   * (Optional – keep if you want parity with other components.)\n   */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>\n}\n\n/**\n * Checkbox (Atom)\n *\n * Low-level checkbox control built on a native `<input type=\"checkbox\">`.\n * Use this when you need custom layout or when the label/description is handled\n * elsewhere (e.g. inside a list item, table row, or custom field wrapper).\n *\n * For most forms, prefer `CheckboxField`, which composes `Checkbox` with\n * label/description/error wiring and consistent spacing.\n *\n * Accessibility\n * - Provide **either** `ariaLabel` **or** `ariaLabelledBy` (or use `CheckboxField` which wires a `<label>`).\n * - Use `ariaDescribedBy` to connect supporting text (help/error).\n * - `indeterminate` is applied via a DOM property, not an HTML attribute.\n *\n * @example Basic (uncontrolled)\n * ```tsx\n * <Checkbox ariaLabel=\"Subscribe to updates\" defaultChecked />\n * ```\n *\n * @example Controlled\n * ```tsx\n * const [checked, setChecked] = React.useState(false);\n *\n * <Checkbox\n *   ariaLabel=\"Accept terms\"\n *   checked={checked}\n *   onCheckedChange={setChecked}\n * />\n * ```\n *\n * @example Indeterminate (mixed)\n * ```tsx\n * const [checked, setChecked] = React.useState(false);\n * const [mixed, setMixed] = React.useState(true);\n *\n * <Checkbox\n *   ariaLabel=\"Select all\"\n *   checked={checked}\n *   indeterminate={mixed}\n *   onCheckedChange={(next) => {\n *     setMixed(false);   // first interaction clears mixed state\n *     setChecked(next);\n *   }}\n * />\n * ```\n *\n * @example With external label + description\n * ```tsx\n * const id = \"terms\";\n * const descId = \"terms-desc\";\n *\n * <>\n *   <div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}>\n *     <Checkbox id={id} ariaDescribedBy={descId} />\n *     <label htmlFor={id}>I accept the terms</label>\n *   </div>\n *   <div id={descId}>Required to continue.</div>\n * </>\n * ```\n */\n\nexport function Checkbox(props: CheckboxProps): React.ReactElement {\n  const { onCheckedChange, onChange, ...coreProps } = props\n\n  const theme = useTheme()\n\n  const kit = checkboxRecipe({ ...coreProps, theme })\n\n  const inputRef = React.useRef<HTMLInputElement | null>(null)\n\n  // Keep DOM property in sync.\n  React.useLayoutEffect(() => {\n    const el = inputRef.current\n    if (!el) return\n    el.indeterminate = kit.indeterminate\n  }, [kit.indeterminate])\n\n  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n    onChange?.(e)\n    onCheckedChange?.(e.currentTarget.checked)\n  }\n\n  const { a11y } = kit\n\n  return (\n    <input\n      ref={inputRef}\n      type=\"checkbox\"\n      className={kit.className}\n      style={kit.vars}\n      id={a11y.id}\n      name={a11y.name}\n      value={a11y.value}\n      disabled={a11y.disabled === true}\n      required={a11y.required === true}\n      aria-label={a11y.ariaLabel}\n      aria-labelledby={a11y.ariaLabelledBy}\n      aria-describedby={a11y.ariaDescribedBy}\n      aria-checked={a11y.ariaChecked}\n      aria-invalid={a11y.ariaInvalid === true ? true : undefined}\n      checked={kit.checked}\n      defaultChecked={kit.defaultChecked}\n      onChange={handleChange}\n    />\n  )\n}\n","/**\n * React adapter for Marwes Divider component.\n * - Renders semantic <hr> using the core divider recipe.\n * - Supports 7 size variants: xxs/xs/sm/md/lg/xl/xxl.\n * - Supports horizontal and vertical orientation.\n * - Figma reference: node-id=1-932\n */\n\nimport { createDividerRecipe } from \"@marwes-ui/core\"\nimport type { DividerOptions, DividerOrientation, DividerSize } from \"@marwes-ui/core\"\nimport type { CssVars } from \"@marwes-ui/core\"\nimport * as React from \"react\"\nimport { useTheme } from \"../provider/use-theme\"\n\ntype StyleWithVars = React.CSSProperties & CssVars\n\nexport type DividerProps = DividerOptions &\n  Omit<React.HTMLAttributes<HTMLHRElement>, \"children\"> & {\n    /**\n     * Size variant for the divider.\n     * Maps to pixel values: xxs=1px, xs=8px, sm=16px, md=32px, lg=48px, xl=64px, xxl=80px\n     * @default \"md\"\n     */\n    size?: DividerSize\n\n    /**\n     * Orientation of the divider.\n     * @default \"horizontal\"\n     */\n    orientation?: DividerOrientation\n\n    /**\n     * Additional CSS class names.\n     */\n    className?: string\n\n    /**\n     * Inline styles.\n     */\n    style?: React.CSSProperties\n  }\n\n/**\n * Divider\n *\n * Semantic separator rendered as `<hr>`.\n * Supports size variants and both horizontal and vertical orientations.\n *\n * @example Basic usage (horizontal, medium size)\n * ```tsx\n * <Divider />\n * ```\n *\n * @example Different sizes\n * ```tsx\n * <Divider size=\"xxs\" /> //  1px hairline\n * <Divider size=\"sm\" />  // 16px\n * <Divider size=\"lg\" />  // 48px\n * ```\n *\n * @example Vertical divider\n * ```tsx\n * <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>\n *   <span>Left content</span>\n *   <Divider orientation=\"vertical\" size=\"sm\" />\n *   <span>Right content</span>\n * </div>\n * ```\n *\n * @example With custom ID\n * ```tsx\n * <Divider id=\"section-break\" />\n * ```\n */\n\nexport const Divider = React.forwardRef<HTMLHRElement, DividerProps>((props, ref) => {\n  const { className: customClassName, style: customStyle, ...opts } = props\n\n  const theme = useTheme()\n\n  const kit = createDividerRecipe(theme, opts)\n\n  const style = { ...(kit.vars as StyleWithVars), ...customStyle }\n  const className = customClassName ? `${kit.className} ${customClassName}` : kit.className\n\n  return <hr ref={ref} {...kit.a11y} {...kit.dataAttributes} className={className} style={style} />\n})\n\nDivider.displayName = \"Divider\"\n","/**\n * React adapter for Marwes H1 component.\n * - Renders semantic <h1> using the core heading recipe.\n * - Supports size override for visual/semantic mismatch.\n */\n\nimport { headingRecipe } from \"@marwes-ui/core\"\nimport type { HeadingOptions, HeadingSize } from \"@marwes-ui/core\"\nimport type { CssVars } from \"@marwes-ui/core\"\nimport type * as React from \"react\"\nimport { useTheme } from \"../../provider/use-theme\"\n\ntype StyleWithVars = React.CSSProperties & CssVars\n\nexport type H1Props = Omit<HeadingOptions, \"level\"> & {\n  /**\n   * Visual size override.\n   * Allows using h1 semantics with different visual styling.\n   * @default \"h1\"\n   */\n  size?: HeadingSize\n\n  /**\n   * Content of the heading.\n   */\n  children?: React.ReactNode\n\n  /**\n   * Additional CSS class names.\n   */\n  className?: string\n\n  /**\n   * Inline styles.\n   */\n  style?: React.CSSProperties\n}\n\n/**\n * H1 (Heading Level 1)\n *\n * Semantic top-level heading rendered as `<h1>`.\n * Supports visual size override for cases where semantic and visual hierarchy differ.\n *\n * @example Basic usage\n * ```tsx\n * <H1>Page Title</H1>\n * ```\n *\n * @example With size override\n * ```tsx\n * <H1 size=\"h2\">Visually smaller but semantically h1</H1>\n * ```\n *\n * @example With ID for anchor linking\n * ```tsx\n * <H1 id=\"introduction\">Introduction</H1>\n * ```\n */\nexport function H1(props: H1Props): React.ReactElement {\n  const { children, className: customClassName, style: customStyle, ...opts } = props\n  const theme = useTheme()\n\n  const kit = headingRecipe({ ...opts, level: 1 }, theme)\n\n  const style = { ...(kit.vars as StyleWithVars), ...customStyle }\n  const className = customClassName ? `${kit.className} ${customClassName}` : kit.className\n\n  return (\n    <h1 id={kit.a11y.id} aria-label={kit.a11y.ariaLabel} className={className} style={style}>\n      {children}\n    </h1>\n  )\n}\n","/**\n * React adapter for Marwes H2 component.\n * - Renders semantic <h2> using the core heading recipe.\n * - Supports size override for visual/semantic mismatch.\n */\n\nimport { headingRecipe } from \"@marwes-ui/core\"\nimport type { HeadingOptions, HeadingSize } from \"@marwes-ui/core\"\nimport type { CssVars } from \"@marwes-ui/core\"\nimport type * as React from \"react\"\nimport { useTheme } from \"../../provider/use-theme\"\n\ntype StyleWithVars = React.CSSProperties & CssVars\n\nexport type H2Props = Omit<HeadingOptions, \"level\"> & {\n  /**\n   * Visual size override.\n   * Allows using h2 semantics with different visual styling.\n   * @default \"h2\"\n   */\n  size?: HeadingSize\n\n  /**\n   * Content of the heading.\n   */\n  children?: React.ReactNode\n\n  /**\n   * Additional CSS class names.\n   */\n  className?: string\n\n  /**\n   * Inline styles.\n   */\n  style?: React.CSSProperties\n}\n\n/**\n * H2 (Heading Level 2)\n *\n * Semantic section heading rendered as `<h2>`.\n * Supports visual size override for cases where semantic and visual hierarchy differ.\n *\n * @example Basic usage\n * ```tsx\n * <H2>Section Title</H2>\n * ```\n *\n * @example With size override\n * ```tsx\n * <H2 size=\"h1\">Visually larger but semantically h2</H2>\n * ```\n */\nexport function H2(props: H2Props): React.ReactElement {\n  const { children, className: customClassName, style: customStyle, ...opts } = props\n  const theme = useTheme()\n\n  const kit = headingRecipe({ ...opts, level: 2 }, theme)\n\n  const style = { ...(kit.vars as StyleWithVars), ...customStyle }\n  const className = customClassName ? `${kit.className} ${customClassName}` : kit.className\n\n  return (\n    <h2 id={kit.a11y.id} aria-label={kit.a11y.ariaLabel} className={className} style={style}>\n      {children}\n    </h2>\n  )\n}\n","/**\n * React adapter for Marwes H3 component.\n * - Renders semantic <h3> using the core heading recipe.\n * - Supports size override for visual/semantic mismatch.\n */\n\nimport { headingRecipe } from \"@marwes-ui/core\"\nimport type { HeadingOptions, HeadingSize } from \"@marwes-ui/core\"\nimport type { CssVars } from \"@marwes-ui/core\"\nimport type * as React from \"react\"\nimport { useTheme } from \"../../provider/use-theme\"\n\ntype StyleWithVars = React.CSSProperties & CssVars\n\nexport type H3Props = Omit<HeadingOptions, \"level\"> & {\n  /**\n   * Visual size override.\n   * Allows using h3 semantics with different visual styling.\n   * @default \"h3\"\n   */\n  size?: HeadingSize\n\n  /**\n   * Content of the heading.\n   */\n  children?: React.ReactNode\n\n  /**\n   * Additional CSS class names.\n   */\n  className?: string\n\n  /**\n   * Inline styles.\n   */\n  style?: React.CSSProperties\n}\n\n/**\n * H3 (Heading Level 3)\n *\n * Semantic subsection heading rendered as `<h3>`.\n * Supports visual size override for cases where semantic and visual hierarchy differ.\n *\n * @example Basic usage\n * ```tsx\n * <H3>Subsection Title</H3>\n * ```\n *\n * @example With size override\n * ```tsx\n * <H3 size=\"h2\">Visually larger but semantically h3</H3>\n * ```\n */\nexport function H3(props: H3Props): React.ReactElement {\n  const { children, className: customClassName, style: customStyle, ...opts } = props\n  const theme = useTheme()\n\n  const kit = headingRecipe({ ...opts, level: 3 }, theme)\n\n  const style = { ...(kit.vars as StyleWithVars), ...customStyle }\n  const className = customClassName ? `${kit.className} ${customClassName}` : kit.className\n\n  return (\n    <h3 id={kit.a11y.id} aria-label={kit.a11y.ariaLabel} className={className} style={style}>\n      {children}\n    </h3>\n  )\n}\n","/**\n * React adapter for Marwes Paragraph component.\n * - Renders semantic <p> using the core paragraph recipe.\n * - Supports size variants: sm/md/lg.\n */\n\nimport { paragraphRecipe } from \"@marwes-ui/core\"\nimport type { ParagraphOptions, ParagraphSize } from \"@marwes-ui/core\"\nimport type { CssVars } from \"@marwes-ui/core\"\nimport type * as React from \"react\"\nimport { useTheme } from \"../../provider/use-theme\"\n\ntype StyleWithVars = React.CSSProperties & CssVars\n\nexport type ParagraphProps = ParagraphOptions & {\n  /**\n   * Size variant.\n   * @default \"md\"\n   */\n  size?: ParagraphSize\n\n  /**\n   * Content of the paragraph.\n   */\n  children?: React.ReactNode\n\n  /**\n   * Additional CSS class names.\n   */\n  className?: string\n\n  /**\n   * Inline styles.\n   */\n  style?: React.CSSProperties\n}\n\n/**\n * Paragraph\n *\n * Semantic text block rendered as `<p>`.\n * Supports size variants for different text contexts.\n *\n * @example Basic usage\n * ```tsx\n * <Paragraph>This is a standard paragraph.</Paragraph>\n * ```\n *\n * @example With size variant\n * ```tsx\n * <Paragraph size=\"sm\">Small text for disclaimers.</Paragraph>\n * <Paragraph size=\"lg\">Emphasized lead paragraph.</Paragraph>\n * ```\n *\n * @example With ID\n * ```tsx\n * <Paragraph id=\"intro\">Introduction text.</Paragraph>\n * ```\n */\nexport function Paragraph(props: ParagraphProps): React.ReactElement {\n  const { children, className: customClassName, style: customStyle, ...opts } = props\n  const theme = useTheme()\n\n  const kit = paragraphRecipe(opts, theme)\n\n  const style = { ...(kit.vars as StyleWithVars), ...customStyle }\n  const className = customClassName ? `${kit.className} ${customClassName}` : kit.className\n\n  return (\n    <p id={kit.a11y.id} className={className} style={style}>\n      {children}\n    </p>\n  )\n}\n","import * as React from \"react\"\nimport { Checkbox } from \".\"\nimport type { CheckboxProps } from \".\"\nimport { Paragraph } from \"../paragraph\"\n\nexport type CheckboxFieldProps = {\n  /** Optional: if omitted, we generate one via useId(). */\n  id?: string\n\n  /** Field content (rendered by adapter). */\n  label: React.ReactNode\n  description?: React.ReactNode\n  error?: React.ReactNode\n\n  /** Props forwarded to the Checkbox atom. */\n  checkbox: CheckboxProps\n\n  /** Additional aria-describedby IDs to merge with internal description/error IDs. */\n  ariaDescribedBy?: string\n}\n\nfunction cx(...parts: Array<string | false>): string {\n  return parts.filter(Boolean).join(\" \")\n}\n\n/**\n * CheckboxField (Molecule) — Recommended\n *\n * A convenient, accessible wrapper around `Checkbox` that provides:\n * - a clickable `<label>` wired via `htmlFor`/`id`\n * - optional `description` and `error` regions\n * - automatic `aria-describedby` wiring (description + error + any external ids)\n * - automatic invalid state when `error` is present\n *\n * Use `CheckboxField` for most forms. Use `Checkbox` directly only when you need\n * a highly custom layout (tables, list rows, compound list items, etc.).\n *\n * Accessibility\n * - Generates a stable `id` via `useId()` when `id` is not provided.\n * - Always renders a real `<label>` element connected to the checkbox control.\n * - When `description` and/or `error` are present, it sets `aria-describedby`\n *   on the checkbox to reference their ids.\n * - When `error` is present, the checkbox is marked invalid (aria-invalid via core).\n *\n * @example Minimal (recommended)\n * ```tsx\n * <CheckboxField\n *   label=\"Subscribe to updates\"\n *   checkbox={{ defaultChecked: true }}\n * />\n * ```\n *\n * @example With description\n * ```tsx\n * <CheckboxField\n *   label=\"Subscribe to updates\"\n *   description=\"We'll only email you about important product changes.\"\n *   checkbox={{}}\n * />\n * ```\n *\n * @example With error (invalid state)\n * ```tsx\n * <CheckboxField\n *   label=\"Accept terms\"\n *   error=\"You must accept the terms to continue.\"\n *   checkbox={{ required: true }}\n * />\n * ```\n *\n * @example Controlled\n * ```tsx\n * const [checked, setChecked] = React.useState(false);\n *\n * <CheckboxField\n *   label=\"Accept terms\"\n *   checkbox={{\n *     checked,\n *     onCheckedChange: setChecked,\n *   }}\n * />\n * ```\n *\n * @example Indeterminate (mixed)\n * ```tsx\n * const [checked, setChecked] = React.useState(false);\n * const [mixed, setMixed] = React.useState(true);\n *\n * <CheckboxField\n *   label=\"Select all\"\n *   description=\"Applies to all items in the current view.\"\n *   checkbox={{\n *     checked,\n *     indeterminate: mixed,\n *     onCheckedChange: (next) => {\n *       setMixed(false);\n *       setChecked(next);\n *     },\n *   }}\n * />\n * ```\n *\n * @example Custom describedBy (merge with internal description/error)\n * ```tsx\n * <CheckboxField\n *   ariaDescribedBy=\"my-extra-help\"\n *   label=\"Enable telemetry\"\n *   description=\"Helps us improve the product.\"\n *   checkbox={{}}\n * />\n *\n * <div id=\"my-extra-help\">This setting can be changed later.</div>\n * ```\n */\n\nexport function CheckboxField(props: CheckboxFieldProps): React.ReactElement {\n  const reactId = React.useId()\n  const id = props.id ?? `mw-checkbox-${reactId}`\n\n  const hasDescription = props.description !== undefined\n  const hasError = props.error !== undefined\n\n  const descId = hasDescription ? `${id}-desc` : undefined\n  const errorId = hasError ? `${id}-error` : undefined\n\n  // Merge aria-describedby from multiple sources\n  const describedByParts = [props.ariaDescribedBy, descId, errorId].filter(Boolean)\n  const mergedDescribedBy = describedByParts.length > 0 ? describedByParts.join(\" \") : undefined\n\n  const disabled = props.checkbox.disabled || false\n  const invalid = hasError || props.checkbox.invalid || false\n\n  const wrapperClass = cx(\n    \"mw-checkbox-field\",\n    disabled && \"mw-checkbox-field--disabled\",\n    invalid && \"mw-checkbox-field--invalid\",\n  )\n\n  // Prepare checkbox props with proper ariaDescribedBy merging\n  const checkboxProps: CheckboxProps = {\n    ...props.checkbox,\n    id,\n    invalid,\n  }\n\n  if (mergedDescribedBy) {\n    checkboxProps.ariaDescribedBy = mergedDescribedBy\n  }\n\n  return (\n    <div className={wrapperClass}>\n      <div className=\"mw-checkbox-field__row\">\n        <Checkbox {...checkboxProps} />\n\n        <label className=\"mw-checkbox-field__label\" htmlFor={id}>\n          <Paragraph size=\"md\">{props.label}</Paragraph>\n        </label>\n      </div>\n\n      {hasDescription && (\n        <div className=\"mw-checkbox-field__description\" id={descId}>\n          <Paragraph size=\"sm\">{props.description}</Paragraph>\n        </div>\n      )}\n\n      {hasError && (\n        <div className=\"mw-checkbox-field__error\" id={errorId} aria-live=\"polite\">\n          <Paragraph size=\"sm\">{props.error}</Paragraph>\n        </div>\n      )}\n    </div>\n  )\n}\n","import * as React from \"react\"\nimport { Icon } from \"./icon\"\nimport { Input } from \"./input\"\nimport type { InputProps } from \"./input\"\nimport { Paragraph } from \"./paragraph\"\n\nexport type InputFieldProps = {\n  /** Optional: if omitted, we generate one via useId(). */\n  id?: string\n\n  /** Field label (required for accessibility). */\n  label: string\n\n  /** Optional helper text shown below the input. */\n  helperText?: string\n\n  /** Optional error message. When present, input is marked invalid. */\n  error?: string\n\n  /** Props forwarded to the Input atom. */\n  input: InputProps\n\n  /** Additional aria-describedby IDs to merge with internal helper/error IDs. */\n  ariaDescribedBy?: string\n}\n\nfunction cx(...parts: Array<string | false>): string {\n  return parts.filter(Boolean).join(\" \")\n}\n\n/**\n * InputField (Molecule) — Recommended\n *\n * A convenient, accessible wrapper around `Input` that provides:\n * - a visible `<label>` wired via `htmlFor`/`id`\n * - optional `helperText` and `error` regions\n * - automatic `aria-describedby` wiring (helperText + error + any external ids)\n * - automatic invalid state when `error` is present\n *\n * Use `InputField` for most forms. Use `Input` directly only when you need\n * a highly custom layout or composite inputs.\n *\n * Accessibility\n * - Generates a stable `id` via `useId()` when `id` is not provided.\n * - Always renders a visible `<label>` element connected to the input control.\n * - When `helperText` and/or `error` are present, it sets `aria-describedby`\n *   on the input to reference their ids.\n * - When `error` is present, the input is marked invalid (aria-invalid).\n * - Error region has `aria-live=\"polite\"` for screen reader announcements.\n *\n * @example Minimal (recommended)\n * ```tsx\n * <InputField\n *   label=\"Email address\"\n *   input={{ type: \"email\", placeholder: \"you@example.com\" }}\n * />\n * ```\n *\n * @example With helper text\n * ```tsx\n * <InputField\n *   label=\"Username\"\n *   helperText=\"Choose a unique username between 3-20 characters.\"\n *   input={{ type: \"text\", placeholder: \"johnsmith\" }}\n * />\n * ```\n *\n * @example With error (invalid state)\n * ```tsx\n * <InputField\n *   label=\"Password\"\n *   error=\"Password must be at least 8 characters.\"\n *   input={{ type: \"password\", required: true }}\n * />\n * ```\n *\n * @example Controlled\n * ```tsx\n * const [email, setEmail] = React.useState(\"\");\n *\n * <InputField\n *   label=\"Email\"\n *   input={{\n *     type: \"email\",\n *     value: email,\n *     onValueChange: setEmail,\n *   }}\n * />\n * ```\n *\n * @example Disabled\n * ```tsx\n * <InputField\n *   label=\"Account ID\"\n *   helperText=\"This value cannot be changed.\"\n *   input={{ value: \"ACC-12345\", disabled: true }}\n * />\n * ```\n *\n * @example Read-only\n * ```tsx\n * <InputField\n *   label=\"Account created\"\n *   input={{ value: \"January 15, 2026\", readOnly: true }}\n * />\n * ```\n *\n * @example Custom describedBy (merge with internal helper/error)\n * ```tsx\n * <InputField\n *   ariaDescribedBy=\"my-extra-help\"\n *   label=\"API Key\"\n *   helperText=\"Your key is stored securely.\"\n *   input={{ type: \"password\" }}\n * />\n *\n * <div id=\"my-extra-help\">This can be regenerated from your settings.</div>\n * ```\n */\nexport function InputField(props: InputFieldProps): React.ReactElement {\n  const reactId = React.useId()\n  const id = props.id ?? `mw-input-${reactId}`\n\n  // Password visibility toggle\n  const isPasswordField = props.input.type === \"password\"\n  const [showPassword, setShowPassword] = React.useState(false)\n\n  // Search clear button - track if search has value\n  const isSearchField = props.input.type === \"search\"\n  const [searchValue, setSearchValue] = React.useState(\n    props.input.value || props.input.defaultValue || \"\",\n  )\n\n  // Determine if clear button should show based on controlled vs uncontrolled\n  const hasSearchValue =\n    isSearchField &&\n    (props.input.value !== undefined\n      ? String(props.input.value).length > 0\n      : String(searchValue).length > 0)\n\n  const hasHelperText = props.helperText !== undefined\n  const hasError = props.error !== undefined\n\n  const helperTextId = hasHelperText ? `${id}-helper` : undefined\n  const errorId = hasError ? `${id}-error` : undefined\n\n  // Merge aria-describedby from multiple sources\n  const describedByParts = [props.ariaDescribedBy, helperTextId, errorId].filter(Boolean)\n  const mergedDescribedBy = describedByParts.length > 0 ? describedByParts.join(\" \") : undefined\n\n  const disabled = props.input.disabled || false\n  const readOnly = props.input.readOnly || false\n  const invalid = hasError || props.input.invalid || false\n\n  const wrapperClass = cx(\n    \"mw-input-field\",\n    disabled && \"mw-input-field--disabled\",\n    invalid && \"mw-input-field--invalid\",\n    readOnly && \"mw-input-field--readonly\",\n  )\n\n  // Prepare input props with proper describedBy merging\n  const inputProps: InputProps = {\n    ...props.input,\n    id,\n    invalid,\n  }\n\n  // Override type when showing password\n  if (isPasswordField && showPassword) {\n    inputProps.type = \"text\"\n  }\n\n  // Track search value changes and make search inputs controlled\n  if (isSearchField) {\n    const originalOnValueChange = props.input.onValueChange\n\n    // Use parent's value if controlled, otherwise use local state\n    if (props.input.value === undefined) {\n      inputProps.value = searchValue\n    }\n\n    inputProps.onValueChange = (value: string) => {\n      setSearchValue(value)\n      originalOnValueChange?.(value)\n    }\n  }\n\n  if (mergedDescribedBy) {\n    inputProps.describedBy = mergedDescribedBy\n  }\n\n  const handleTogglePassword = () => {\n    setShowPassword((prev) => !prev)\n  }\n\n  const handleClearSearch = () => {\n    // For controlled inputs: notify parent to update state\n    // For uncontrolled: update local state\n    setSearchValue(\"\")\n    props.input.onValueChange?.(\"\")\n  }\n\n  return (\n    <div className={wrapperClass}>\n      <label className=\"mw-input-field__label\" htmlFor={id}>\n        <Paragraph size=\"md\">{props.label}</Paragraph>\n      </label>\n\n      <div className=\"mw-input-field__input-wrapper\">\n        <Input {...inputProps} />\n\n        {isPasswordField && (\n          <button\n            type=\"button\"\n            className=\"mw-input-field__toggle-password\"\n            onClick={handleTogglePassword}\n            aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n            tabIndex={0}\n          >\n            <Icon name={showPassword ? \"eyeOff\" : \"eye\"} size=\"xs\" decorative />\n          </button>\n        )}\n\n        {hasSearchValue && (\n          <button\n            type=\"button\"\n            className=\"mw-input-field__clear-search\"\n            onClick={handleClearSearch}\n            aria-label=\"Clear search\"\n            tabIndex={0}\n          >\n            <Icon name=\"x\" size=\"xs\" decorative />\n          </button>\n        )}\n      </div>\n\n      {hasHelperText && !hasError && (\n        <div className=\"mw-input-field__helper\" id={helperTextId}>\n          <Paragraph size=\"sm\">{props.helperText}</Paragraph>\n        </div>\n      )}\n\n      {hasError && (\n        <div className=\"mw-input-field__error\" id={errorId} aria-live=\"polite\">\n          <Paragraph size=\"sm\">{props.error}</Paragraph>\n        </div>\n      )}\n    </div>\n  )\n}\n","import type * as React from \"react\"\nimport type { InputProps } from \"./input\"\nimport { InputField, type InputFieldProps } from \"./input-field\"\n\n/**\n * Field Variants - AI-Friendly Components\n *\n * These variants encode best practices and automatically set AI-friendly\n * metadata, making it easier for both developers and AI tools to understand\n * the purpose and behavior of each field.\n *\n * Each variant manages its own purpose-specific logic (password toggle,\n * search clear, etc.) and sets appropriate semantic attributes.\n */\n\n// ============================================================================\n// SEARCH FIELD - Search inputs with clear button\n// ============================================================================\n\nexport type SearchFieldProps = Omit<InputFieldProps, \"input\"> & {\n  /**\n   * Input-specific props (type is auto-set to \"search\")\n   */\n  input?: Omit<InputProps, \"type\">\n}\n\n/**\n * SearchField - For search inputs with automatic clear button functionality.\n *\n * **AI Context:**\n * - Sets `type=\"search\"` automatically\n * - Sets `inputMode=\"search\"` for mobile keyboards\n * - Shows clear button (X icon) when field has content\n * - Adds `data-purpose=\"search\"` for AI parsing\n *\n * **Features:**\n * - Automatic clear button that appears when typing\n * - Native search input behavior\n * - Optimized mobile keyboard\n * - Controlled and uncontrolled modes supported\n *\n * @example Basic usage\n * ```tsx\n * import { SearchField } from \"@marwes-ui/react\";\n *\n * export function Example() {\n *   const [query, setQuery] = React.useState(\"\");\n *   return (\n *     <SearchField\n *       label=\"Search products\"\n *       input={{ value: query, onValueChange: setQuery }}\n *     />\n *   );\n * }\n * ```\n */\nexport function SearchField(props: SearchFieldProps): React.ReactElement {\n  // Enhanced input props with search-specific settings\n  const enhancedInput: InputProps = {\n    ...props.input,\n    type: \"search\",\n    inputMode: \"search\",\n  }\n\n  return (\n    <div data-purpose=\"search\">\n      <InputField {...props} input={enhancedInput} />\n    </div>\n  )\n}\n\n// ============================================================================\n// PASSWORD FIELD - Password inputs with show/hide toggle\n// ============================================================================\n\nexport type PasswordFieldProps = Omit<InputFieldProps, \"input\"> & {\n  /**\n   * Input-specific props (type is auto-set to \"password\")\n   */\n  input?: Omit<InputProps, \"type\">\n\n  /**\n   * Autocomplete hint: \"current-password\" or \"new-password\"\n   * Defaults to \"current-password\"\n   */\n  autoComplete?: \"current-password\" | \"new-password\"\n}\n\n/**\n * PasswordField - For password inputs with automatic show/hide toggle.\n *\n * **AI Context:**\n * - Sets `type=\"password\"` automatically (toggles to \"text\" when shown)\n * - Shows eye/eyeOff icon toggle button\n * - Sets appropriate `autoComplete` attribute\n * - Adds `data-purpose=\"password\"` for AI parsing\n *\n * **Features:**\n * - Automatic show/hide toggle with eye icon\n * - Proper autocomplete for password managers\n * - Accessible toggle button with clear labels\n * - Controlled and uncontrolled modes supported\n *\n * @example Basic usage\n * ```tsx\n * import { PasswordField } from \"@marwes-ui/react\";\n *\n * export function Example() {\n *   const [password, setPassword] = React.useState(\"\");\n *   return (\n *     <PasswordField\n *       label=\"Password\"\n *       input={{ value: password, onValueChange: setPassword }}\n *     />\n *   );\n * }\n * ```\n *\n * @example New password (signup/reset)\n * ```tsx\n * <PasswordField\n *   label=\"New Password\"\n *   autoComplete=\"new-password\"\n *   helperText=\"Must be at least 8 characters\"\n * />\n * ```\n */\nexport function PasswordField(props: PasswordFieldProps): React.ReactElement {\n  const { autoComplete = \"current-password\", ...restProps } = props\n\n  // Enhanced input props with password-specific settings\n  const enhancedInput: InputProps = {\n    ...props.input,\n    type: \"password\",\n    autoComplete,\n  }\n\n  return (\n    <div data-purpose=\"password\">\n      <InputField {...restProps} input={enhancedInput} />\n    </div>\n  )\n}\n\n// ============================================================================\n// EMAIL FIELD - Email inputs with proper semantic attributes\n// ============================================================================\n\nexport type EmailFieldProps = Omit<InputFieldProps, \"input\"> & {\n  /**\n   * Input-specific props (type, inputMode, autoComplete auto-set)\n   */\n  input?: Omit<InputProps, \"type\" | \"inputMode\" | \"autoComplete\">\n}\n\n/**\n * EmailField - For email address inputs with proper semantic attributes.\n *\n * **AI Context:**\n * - Sets `type=\"email\"` for validation\n * - Sets `inputMode=\"email\"` for optimized mobile keyboard\n * - Sets `autoComplete=\"email\"` for autofill\n * - Adds `data-purpose=\"email\"` for AI parsing\n *\n * **Features:**\n * - Browser email validation\n * - Email-optimized mobile keyboard\n * - Autofill support for email addresses\n *\n * @example\n * ```tsx\n * import { EmailField } from \"@marwes-ui/react\";\n *\n * <EmailField\n *   label=\"Email address\"\n *   input={{ placeholder: \"you@example.com\" }}\n * />\n * ```\n */\nexport function EmailField(props: EmailFieldProps): React.ReactElement {\n  const enhancedInput: InputProps = {\n    ...props.input,\n    type: \"email\",\n    inputMode: \"email\",\n    autoComplete: \"email\",\n  }\n\n  return (\n    <div data-purpose=\"email\">\n      <InputField {...props} input={enhancedInput} />\n    </div>\n  )\n}\n\n// ============================================================================\n// PHONE FIELD - Phone number inputs with proper semantic attributes\n// ============================================================================\n\nexport type PhoneFieldProps = Omit<InputFieldProps, \"input\"> & {\n  /**\n   * Input-specific props (type, inputMode, autoComplete auto-set)\n   */\n  input?: Omit<InputProps, \"type\" | \"inputMode\" | \"autoComplete\">\n}\n\n/**\n * PhoneField - For phone number inputs with proper semantic attributes.\n *\n * **AI Context:**\n * - Sets `type=\"tel\"` for telephone input\n * - Sets `inputMode=\"tel\"` for phone keyboard\n * - Sets `autoComplete=\"tel\"` for autofill\n * - Adds `data-purpose=\"phone\"` for AI parsing\n *\n * **Features:**\n * - Phone-optimized mobile keyboard\n * - Autofill support for phone numbers\n * - Accepts any phone format (formatting should be done externally)\n *\n * @example\n * ```tsx\n * import { PhoneField } from \"@marwes-ui/react\";\n *\n * <PhoneField\n *   label=\"Phone number\"\n *   input={{ placeholder: \"+1 (555) 000-0000\" }}\n * />\n * ```\n */\nexport function PhoneField(props: PhoneFieldProps): React.ReactElement {\n  const enhancedInput: InputProps = {\n    ...props.input,\n    type: \"tel\",\n    inputMode: \"tel\",\n    autoComplete: \"tel\",\n  }\n\n  return (\n    <div data-purpose=\"phone\">\n      <InputField {...props} input={enhancedInput} />\n    </div>\n  )\n}\n\n// ============================================================================\n// URL FIELD - URL inputs with proper semantic attributes\n// ============================================================================\n\nexport type URLFieldProps = Omit<InputFieldProps, \"input\"> & {\n  /**\n   * Input-specific props (type, inputMode, autoComplete auto-set)\n   */\n  input?: Omit<InputProps, \"type\" | \"inputMode\" | \"autoComplete\">\n}\n\n/**\n * URLField - For URL inputs with proper semantic attributes.\n *\n * **AI Context:**\n * - Sets `type=\"url\"` for URL validation\n * - Sets `inputMode=\"url\"` for URL keyboard\n * - Sets `autoComplete=\"url\"` for autofill\n * - Adds `data-purpose=\"url\"` for AI parsing\n *\n * **Features:**\n * - Browser URL validation\n * - URL-optimized mobile keyboard\n * - Autofill support for URLs\n *\n * @example\n * ```tsx\n * import { URLField } from \"@marwes-ui/react\";\n *\n * <URLField\n *   label=\"Website\"\n *   input={{ placeholder: \"https://example.com\" }}\n * />\n * ```\n */\nexport function URLField(props: URLFieldProps): React.ReactElement {\n  const enhancedInput: InputProps = {\n    ...props.input,\n    type: \"url\",\n    inputMode: \"url\",\n    autoComplete: \"url\",\n  }\n\n  return (\n    <div data-purpose=\"url\">\n      <InputField {...props} input={enhancedInput} />\n    </div>\n  )\n}\n\n// ============================================================================\n// CURRENCY FIELD - Currency/monetary inputs with formatting hints\n// ============================================================================\n\nexport type CurrencyFieldProps = Omit<InputFieldProps, \"input\"> & {\n  /**\n   * Input-specific props (type, inputMode auto-set)\n   */\n  input?: Omit<InputProps, \"type\" | \"inputMode\">\n\n  /**\n   * Currency code (e.g., \"USD\", \"EUR\", \"GBP\")\n   * Used for helper text and context\n   */\n  currency?: string\n}\n\n/**\n * CurrencyField - For monetary amount inputs with currency context.\n *\n * **AI Context:**\n * - Sets `type=\"text\"` (better browser support than \"number\")\n * - Sets `inputMode=\"decimal\"` for numeric keyboard with decimal\n * - Adds currency code to helper text if provided\n * - Adds `data-purpose=\"currency\"` and `data-currency` for AI parsing\n *\n * **Features:**\n * - Decimal keyboard on mobile\n * - Currency code display in helper text\n * - Better input control than type=\"number\"\n * - Note: Formatting should be handled by parent component\n *\n * @example\n * ```tsx\n * import { CurrencyField } from \"@marwes-ui/react\";\n *\n * <CurrencyField\n *   label=\"Amount\"\n *   currency=\"USD\"\n *   input={{ placeholder: \"0.00\" }}\n * />\n * ```\n */\nexport function CurrencyField(props: CurrencyFieldProps): React.ReactElement {\n  const { currency, ...restProps } = props\n\n  const enhancedInput: InputProps = {\n    ...props.input,\n    type: \"text\",\n    inputMode: \"decimal\",\n  }\n\n  // Add currency to helper text if provided\n  const helperText = currency\n    ? props.helperText\n      ? `${props.helperText} (${currency})`\n      : `Amount in ${currency}`\n    : props.helperText\n\n  return (\n    <div data-purpose=\"currency\" data-currency={currency}>\n      <InputField {...restProps} input={enhancedInput} helperText={helperText || \"\"} />\n    </div>\n  )\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marwes-ui/react",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "publishConfig": {
     "access": "public"
   },
@@ -19,8 +19,8 @@
     "dist"
   ],
   "dependencies": {
-    "@marwes-ui/core": "0.0.3",
-    "@marwes-ui/presets": "0.0.3"
+    "@marwes-ui/presets": "0.0.4",
+    "@marwes-ui/core": "0.0.4"
   },
   "peerDependencies": {
     "react": ">=18",