@kushagradhawan/kookie-ui 0.1.29 → 0.1.30

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

@@ -2,6 +2,15 @@ import * as React from 'react';
 import { BaseButton } from './_internal/base-button.js';
 import type { BaseButtonProps } from './_internal/base-button.js';
 type IconButtonElement = React.ElementRef<typeof BaseButton>;
+/**
+ * Required accessibility props for icon buttons
+ * Icon buttons must have an accessible name to meet WCAG guidelines
+ *
+ * Three ways to provide accessibility:
+ * 1. aria-label: Direct descriptive text
+ * 2. aria-labelledby: Reference to a label element
+ * 3. children: Visible text content (fallback)
+ */
 type AccessibilityProps = {
     'aria-label': string;
     'aria-labelledby'?: never;
@@ -13,13 +22,82 @@ type AccessibilityProps = {
     'aria-labelledby'?: never;
     children: React.ReactNode;
 };
-type IconButtonOwnProps = Omit<BaseButtonProps, 'as'> & AccessibilityProps;
+/**
+ * Tooltip configuration props that can be passed to IconButton
+ * These props are forwarded to the underlying Tooltip component
+ */
+interface IconButtonTooltipProps {
+    /** Content to display in the tooltip on hover/focus */
+    tooltip?: React.ReactNode;
+    /** Side of the button where the tooltip should appear */
+    tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
+    /** Alignment of the tooltip relative to the button */
+    tooltipAlign?: 'start' | 'center' | 'end';
+    /** Delay before showing the tooltip (in milliseconds) */
+    tooltipDelayDuration?: number;
+    /** Whether to disable hoverable content behavior */
+    tooltipDisableHoverableContent?: boolean;
+}
+/**
+ * Core IconButton props excluding the 'as' prop for polymorphic behavior
+ * Combines BaseButton props with accessibility requirements and tooltip functionality
+ */
+type IconButtonOwnProps = Omit<BaseButtonProps, 'as'> & AccessibilityProps & IconButtonTooltipProps;
+/**
+ * Polymorphic IconButton props that support rendering as different HTML elements
+ * @template C - The element type to render as (defaults to 'button')
+ */
 type IconButtonProps<C extends React.ElementType = 'button'> = IconButtonOwnProps & {
+    /** Element type to render as (e.g., 'a', 'span', etc.) */
     as?: C;
 } & Omit<React.ComponentPropsWithoutRef<C>, keyof IconButtonOwnProps>;
+/**
+ * IconButton component type that supports polymorphic rendering
+ * @template C - The element type to render as
+ */
 type IconButtonComponent = <C extends React.ElementType = 'button'>(props: IconButtonProps<C> & {
     ref?: React.ForwardedRef<IconButtonElement>;
 }) => React.ReactElement | null;
+/**
+ * IconButton component for compact, accessible icon-only interactions
+ *
+ * The IconButton component extends Button with specialized behavior for visual symbols.
+ * It enforces accessibility requirements, provides automatic square sizing, and includes
+ * built-in tooltip integration. Icon buttons are essential for space-efficient interfaces
+ * while maintaining accessibility compliance.
+ *
+ * Key features:
+ * - Enforced accessibility requirements (aria-label, aria-labelledby, or children)
+ * - Automatic square aspect ratios for consistent visual alignment
+ * - Built-in tooltip support for context and guidance
+ * - Same variant and size system as Button for consistency
+ * - Runtime validation for accessibility compliance
+ *
+ * @example
+ * ```tsx
+ * // Basic icon button with aria-label
+ * <IconButton aria-label="Settings">
+ *   <Settings />
+ * </IconButton>
+ *
+ * // Icon button with tooltip
+ * <IconButton aria-label="Save" tooltip="Save your progress">
+ *   <Save />
+ * </IconButton>
+ *
+ * // Icon button with aria-labelledby
+ * <IconButton aria-labelledby="settings-label">
+ *   <Settings />
+ * </IconButton>
+ * <span id="settings-label">Open settings panel</span>
+ *
+ * // Icon button with visible text (fallback)
+ * <IconButton>
+ *   <Settings />
+ *   Settings
+ * </IconButton>
+ * ```
+ */
 declare const IconButton: IconButtonComponent & {
     displayName?: string;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,KAAK,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAG7D,KAAK,kBAAkB,GACnB;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAAE,GACnD;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,iBAAiB,EAAE,MAAM,CAAA;CAAE,GACnD;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AAGnF,KAAK,kBAAkB,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,GAAG,kBAAkB,CAAC;AAE3E,KAAK,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,kBAAkB,GAAG;IAClF,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,kBAAkB,CAAC,CAAC;AAEtE,KAAK,mBAAmB,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAChE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAAE,KACxE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,QAAA,MAAM,UAAU,EA6BX,mBAAmB,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAIpD,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,KAAK,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAE7D;;;;;;;;GAQG;AACH,KAAK,kBAAkB,GACnB;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAAE,GACnD;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,iBAAiB,EAAE,MAAM,CAAA;CAAE,GACnD;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AAEnF;;;GAGG;AACH,UAAU,sBAAsB;IAC9B,uDAAuD;IACvD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yDAAyD;IACzD,WAAW,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClD,sDAAsD;IACtD,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC1C,yDAAyD;IACzD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,oDAAoD;IACpD,8BAA8B,CAAC,EAAE,OAAO,CAAC;CAC1C;AAED;;;GAGG;AACH,KAAK,kBAAkB,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,GAAG,kBAAkB,GAAG,sBAAsB,CAAC;AAEpG;;;GAGG;AACH,KAAK,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,kBAAkB,GAAG;IAClF,0DAA0D;IAC1D,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,kBAAkB,CAAC,CAAC;AAEtE;;;GAGG;AACH,KAAK,mBAAmB,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAChE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAAE,KACxE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,QAAA,MAAM,UAAU,EAyDX,mBAAmB,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAIpD,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}

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

@@ -1,2 +1,5 @@
-"use strict";var m=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(e,t)=>{for(var n in t)a(e,n,{get:t[n],enumerable:!0})},s=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of d(t))!y.call(e,o)&&o!==n&&a(e,o,{get:()=>t[o],enumerable:!(r=u(t,o))||r.enumerable});return e};var i=(e,t,n)=>(n=e!=null?m(B(e)):{},s(t||!e||!e.__esModule?a(n,"default",{value:e,enumerable:!0}):n,e)),I=e=>s(a({},"__esModule",{value:!0}),e);var h={};f(h,{IconButton:()=>l});module.exports=I(h);var p=i(require("react")),c=i(require("classnames")),b=require("./_internal/base-button.js");const l=p.forwardRef(({className:e,...t},n)=>p.createElement(b.BaseButton,{...t,ref:n,className:(0,c.default)("rt-IconButton",e)}));l.displayName="IconButton";
+"use strict";var P=Object.create;var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var E=(t,e)=>{for(var o in e)l(t,o,{get:e[o],enumerable:!0})},p=(t,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of C(e))!w.call(t,n)&&n!==o&&l(t,n,{get:()=>e[n],enumerable:!(r=h(e,n))||r.enumerable});return t};var b=(t,e,o)=>(o=t!=null?P(v(t)):{},p(e||!t||!t.__esModule?l(o,"default",{value:t,enumerable:!0}):o,t)),g=t=>p(l({},"__esModule",{value:!0}),t);var x={};E(x,{IconButton:()=>c});module.exports=g(x);var i=b(require("react")),u=b(require("classnames")),m=require("./_internal/base-button.js"),d=require("./tooltip.js");const c=i.forwardRef(({className:t,tooltip:e,tooltipSide:o="top",tooltipAlign:r="center",tooltipDelayDuration:n,tooltipDisableHoverableContent:B,...a},y)=>{const f="aria-label"in a&&a["aria-label"],I="aria-labelledby"in a&&a["aria-labelledby"],R="children"in a&&a.children;if(!f&&!I&&!R)throw new Error(`IconButton: Icon buttons must have an accessible name. Please provide either:
+- aria-label prop with descriptive text
+- aria-labelledby prop referencing a label element
+- or visible text children`);const s=i.createElement(m.BaseButton,{...a,ref:y,className:(0,u.default)("rt-IconButton",t)});return e?i.createElement(d.Tooltip,{content:e,side:o,align:r,delayDuration:n,disableHoverableContent:B},s):s});c.displayName="IconButton";
 //# sourceMappingURL=icon-button.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/icon-button.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport { BaseButton } from './_internal/base-button.js';\nimport type { BaseButtonProps } from './_internal/base-button.js';\n\ntype IconButtonElement = React.ElementRef<typeof BaseButton>;\n\n// Required accessibility props for icon buttons\ntype AccessibilityProps =\n  | { 'aria-label': string; 'aria-labelledby'?: never }\n  | { 'aria-label'?: never; 'aria-labelledby': string }\n  | { 'aria-label'?: never; 'aria-labelledby'?: never; children: React.ReactNode };\n\n// Polymorphic IconButton props with required accessibility\ntype IconButtonOwnProps = Omit<BaseButtonProps, 'as'> & AccessibilityProps;\n\ntype IconButtonProps<C extends React.ElementType = 'button'> = IconButtonOwnProps & {\n  as?: C;\n} & Omit<React.ComponentPropsWithoutRef<C>, keyof IconButtonOwnProps>;\n\ntype IconButtonComponent = <C extends React.ElementType = 'button'>(\n  props: IconButtonProps<C> & { ref?: React.ForwardedRef<IconButtonElement> },\n) => React.ReactElement | null;\n\nconst IconButton = React.forwardRef(\n  (\n    { className, ...props }: IconButtonProps,\n    forwardedRef: React.ForwardedRef<IconButtonElement>,\n  ) => {\n    // Warn in development if no accessibility attributes are provided\n    if (process.env.NODE_ENV === 'development') {\n      const hasAriaLabel = 'aria-label' in props && props['aria-label'];\n      const hasAriaLabelledBy = 'aria-labelledby' in props && props['aria-labelledby'];\n      const hasChildren = 'children' in props && props.children;\n\n      if (!hasAriaLabel && !hasAriaLabelledBy && !hasChildren) {\n        console.warn(\n          'IconButton: Icon buttons must have an accessible name. Please provide either:' +\n            '\\n- aria-label prop with descriptive text' +\n            '\\n- aria-labelledby prop referencing a label element' +\n            '\\n- or visible text children',\n        );\n      }\n    }\n\n    return (\n      <BaseButton\n        {...props}\n        ref={forwardedRef}\n        className={classNames('rt-IconButton', className)}\n      />\n    );\n  },\n) as IconButtonComponent & { displayName?: string };\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton };\nexport type { IconButtonProps };\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBACvBC,EAAuB,yBAEvBC,EAA2B,sCAsB3B,MAAMJ,EAAaE,EAAM,WACvB,CACE,CAAE,UAAAG,EAAW,GAAGC,CAAM,EACtBC,IAmBEL,EAAA,cAAC,cACE,GAAGI,EACJ,IAAKC,EACL,aAAW,EAAAC,SAAW,gBAAiBH,CAAS,EAClD,CAGN,EAEAL,EAAW,YAAc",
-  "names": ["icon_button_exports", "__export", "IconButton", "__toCommonJS", "React", "import_classnames", "import_base_button", "className", "props", "forwardedRef", "classNames"]
+  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport { BaseButton } from './_internal/base-button.js';\nimport { Tooltip } from './tooltip.js';\nimport type { BaseButtonProps } from './_internal/base-button.js';\n\ntype IconButtonElement = React.ElementRef<typeof BaseButton>;\n\n/**\n * Required accessibility props for icon buttons\n * Icon buttons must have an accessible name to meet WCAG guidelines\n *\n * Three ways to provide accessibility:\n * 1. aria-label: Direct descriptive text\n * 2. aria-labelledby: Reference to a label element\n * 3. children: Visible text content (fallback)\n */\ntype AccessibilityProps =\n  | { 'aria-label': string; 'aria-labelledby'?: never }\n  | { 'aria-label'?: never; 'aria-labelledby': string }\n  | { 'aria-label'?: never; 'aria-labelledby'?: never; children: React.ReactNode };\n\n/**\n * Tooltip configuration props that can be passed to IconButton\n * These props are forwarded to the underlying Tooltip component\n */\ninterface IconButtonTooltipProps {\n  /** Content to display in the tooltip on hover/focus */\n  tooltip?: React.ReactNode;\n  /** Side of the button where the tooltip should appear */\n  tooltipSide?: 'top' | 'right' | 'bottom' | 'left';\n  /** Alignment of the tooltip relative to the button */\n  tooltipAlign?: 'start' | 'center' | 'end';\n  /** Delay before showing the tooltip (in milliseconds) */\n  tooltipDelayDuration?: number;\n  /** Whether to disable hoverable content behavior */\n  tooltipDisableHoverableContent?: boolean;\n}\n\n/**\n * Core IconButton props excluding the 'as' prop for polymorphic behavior\n * Combines BaseButton props with accessibility requirements and tooltip functionality\n */\ntype IconButtonOwnProps = Omit<BaseButtonProps, 'as'> & AccessibilityProps & IconButtonTooltipProps;\n\n/**\n * Polymorphic IconButton props that support rendering as different HTML elements\n * @template C - The element type to render as (defaults to 'button')\n */\ntype IconButtonProps<C extends React.ElementType = 'button'> = IconButtonOwnProps & {\n  /** Element type to render as (e.g., 'a', 'span', etc.) */\n  as?: C;\n} & Omit<React.ComponentPropsWithoutRef<C>, keyof IconButtonOwnProps>;\n\n/**\n * IconButton component type that supports polymorphic rendering\n * @template C - The element type to render as\n */\ntype IconButtonComponent = <C extends React.ElementType = 'button'>(\n  props: IconButtonProps<C> & { ref?: React.ForwardedRef<IconButtonElement> },\n) => React.ReactElement | null;\n\n/**\n * IconButton component for compact, accessible icon-only interactions\n *\n * The IconButton component extends Button with specialized behavior for visual symbols.\n * It enforces accessibility requirements, provides automatic square sizing, and includes\n * built-in tooltip integration. Icon buttons are essential for space-efficient interfaces\n * while maintaining accessibility compliance.\n *\n * Key features:\n * - Enforced accessibility requirements (aria-label, aria-labelledby, or children)\n * - Automatic square aspect ratios for consistent visual alignment\n * - Built-in tooltip support for context and guidance\n * - Same variant and size system as Button for consistency\n * - Runtime validation for accessibility compliance\n *\n * @example\n * ```tsx\n * // Basic icon button with aria-label\n * <IconButton aria-label=\"Settings\">\n *   <Settings />\n * </IconButton>\n *\n * // Icon button with tooltip\n * <IconButton aria-label=\"Save\" tooltip=\"Save your progress\">\n *   <Save />\n * </IconButton>\n *\n * // Icon button with aria-labelledby\n * <IconButton aria-labelledby=\"settings-label\">\n *   <Settings />\n * </IconButton>\n * <span id=\"settings-label\">Open settings panel</span>\n *\n * // Icon button with visible text (fallback)\n * <IconButton>\n *   <Settings />\n *   Settings\n * </IconButton>\n * ```\n */\nconst IconButton = React.forwardRef(\n  (\n    {\n      className,\n      tooltip,\n      tooltipSide = 'top',\n      tooltipAlign = 'center',\n      tooltipDelayDuration,\n      tooltipDisableHoverableContent,\n      ...props\n    }: IconButtonProps,\n    forwardedRef: React.ForwardedRef<IconButtonElement>,\n  ) => {\n    // Runtime accessibility validation to ensure WCAG compliance\n    // This helps catch accessibility issues during development\n    const hasAriaLabel = 'aria-label' in props && props['aria-label'];\n    const hasAriaLabelledBy = 'aria-labelledby' in props && props['aria-labelledby'];\n    const hasChildren = 'children' in props && props.children;\n\n    // Throw descriptive error if no accessible name is provided\n    if (!hasAriaLabel && !hasAriaLabelledBy && !hasChildren) {\n      throw new Error(\n        'IconButton: Icon buttons must have an accessible name. Please provide either:' +\n          '\\n- aria-label prop with descriptive text' +\n          '\\n- aria-labelledby prop referencing a label element' +\n          '\\n- or visible text children',\n      );\n    }\n\n    // Create the base icon button element with accessibility props\n    const iconButton = (\n      <BaseButton\n        {...props}\n        ref={forwardedRef}\n        className={classNames('rt-IconButton', className)}\n      />\n    );\n\n    // If no tooltip is provided, return the icon button as-is for better performance\n    if (!tooltip) {\n      return iconButton;\n    }\n\n    // Wrap with Tooltip when tooltip content is provided\n    // This creates a compound component that handles both button and tooltip functionality\n    return (\n      <Tooltip\n        content={tooltip}\n        side={tooltipSide}\n        align={tooltipAlign}\n        delayDuration={tooltipDelayDuration}\n        disableHoverableContent={tooltipDisableHoverableContent}\n      >\n        {iconButton}\n      </Tooltip>\n    );\n  },\n) as IconButtonComponent & { displayName?: string };\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton };\nexport type { IconButtonProps };\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBACvBC,EAAuB,yBAEvBC,EAA2B,sCAC3BC,EAAwB,wBAmGxB,MAAML,EAAaE,EAAM,WACvB,CACE,CACE,UAAAI,EACA,QAAAC,EACA,YAAAC,EAAc,MACd,aAAAC,EAAe,SACf,qBAAAC,EACA,+BAAAC,EACA,GAAGC,CACL,EACAC,IACG,CAGH,MAAMC,EAAe,eAAgBF,GAASA,EAAM,YAAY,EAC1DG,EAAoB,oBAAqBH,GAASA,EAAM,iBAAiB,EACzEI,EAAc,aAAcJ,GAASA,EAAM,SAGjD,GAAI,CAACE,GAAgB,CAACC,GAAqB,CAACC,EAC1C,MAAM,IAAI,MACR;AAAA;AAAA;AAAA,2BAIF,EAIF,MAAMC,EACJf,EAAA,cAAC,cACE,GAAGU,EACJ,IAAKC,EACL,aAAW,EAAAK,SAAW,gBAAiBZ,CAAS,EAClD,EAIF,OAAKC,EAOHL,EAAA,cAAC,WACC,QAASK,EACT,KAAMC,EACN,MAAOC,EACP,cAAeC,EACf,wBAAyBC,GAExBM,CACH,EAdOA,CAgBX,CACF,EAEAjB,EAAW,YAAc",
+  "names": ["icon_button_exports", "__export", "IconButton", "__toCommonJS", "React", "import_classnames", "import_base_button", "import_tooltip", "className", "tooltip", "tooltipSide", "tooltipAlign", "tooltipDelayDuration", "tooltipDisableHoverableContent", "props", "forwardedRef", "hasAriaLabel", "hasAriaLabelledBy", "hasChildren", "iconButton", "classNames"]
 }

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

@@ -6,41 +6,160 @@ import type { WidthProps } from '../props/width.props.js';
 import type { HeightProps } from '../props/height.props.js';
 import type { LayoutProps } from '../props/layout.props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
+/**
+ * Core Image props that extend the base image prop definitions
+ * These props provide enhanced functionality beyond standard HTML img attributes
+ */
 type ImageOwnProps = GetPropDefTypes<typeof imagePropDefs> & {
+    /**
+     * Native loading behavior for the image
+     * 'lazy' defers loading until the image is near the viewport
+     * 'eager' loads the image immediately
+     */
     loading?: 'eager' | 'lazy';
     /**
-     * Placeholder image URL to show while the main image is loading.
-     * Can be a low-quality/blurred version of the main image.
+     * Placeholder image URL to show while the main image is loading
+     *
+     * Best practices:
+     * - Use a low-quality/blurred version of the main image
+     * - Keep file size small (under 10KB recommended)
+     * - Use same aspect ratio as main image
+     * - Consider using base64 data URLs for inline placeholders
+     *
+     * @example
+     * ```tsx
+     * <Image
+     *   src="/high-res-image.jpg"
+     *   placeholder="/low-res-placeholder.jpg"
+     *   alt="Product photo"
+     * />
+     * ```
      */
     placeholder?: string;
     /**
-     * Shows a skeleton placeholder while loading instead of a blank space.
+     * Shows a skeleton placeholder while loading instead of a blank space
+     *
+     * Use this when:
+     * - You don't have a placeholder image
+     * - You want consistent loading states across your interface
+     * - The image is part of a content layout that needs stable dimensions
      */
     showSkeleton?: boolean;
     /**
-     * Whether the image should fade in when loaded. Set to false for background images or when you want immediate visibility.
+     * Whether the image should fade in when loaded
+     *
+     * Set to false for:
+     * - Background images where immediate visibility is important
+     * - Images that need to appear instantly for UX reasons
+     * - When you're implementing custom loading animations
      */
     fadeIn?: boolean;
     /**
-     * Callback fired when the image successfully loads.
+     * Callback fired when the image successfully loads
+     *
+     * Use this to:
+     * - Track image loading performance
+     * - Trigger layout adjustments after load
+     * - Implement custom loading state management
      */
     onLoad?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
     /**
-     * Callback fired when the image fails to load.
+     * Callback fired when the image fails to load
+     *
+     * Use this to:
+     * - Log errors for monitoring
+     * - Show fallback content
+     * - Implement retry logic
      */
     onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
-    /**
-     * Style object to apply to the wrapper container. Useful for overriding display, width, height, etc.
-     */
-    wrapperStyle?: React.CSSProperties;
 };
+/**
+ * Complete Image component props interface
+ *
+ * Combines HTML img attributes with design system props and enhanced functionality.
+ * Excludes conflicting props like 'color', 'width', 'height' that are handled by the design system.
+ */
 interface ImageProps extends ComponentPropsWithout<'img', RemovedProps | 'color' | 'width' | 'height' | 'alt'>, MarginProps, WidthProps, HeightProps, LayoutProps, ImageOwnProps {
     /**
-     * The alt attribute provides alternative information for an image if a user for some reason cannot view it.
-     * Required for accessibility when not using asChild. Use empty string for decorative images.
+     * Alternative text for the image
+     *
+     * Required for accessibility when not using asChild pattern.
+     * Describes the image content for screen readers and when images fail to load.
+     *
+     * Guidelines:
+     * - Be descriptive but concise
+     * - Don't include "image of" or "picture of"
+     * - Use empty string ("") for purely decorative images
+     * - Describe the content and context, not just what you see
+     *
+     * @example
+     * ```tsx
+     * // Good alt text
+     * <Image src="/chart.png" alt="Sales increased 25% from Q1 to Q2" />
+     *
+     * // Decorative image
+     * <Image src="/decoration.png" alt="" />
+     *
+     * // Avoid generic descriptions
+     * <Image src="/photo.jpg" alt="A photo" /> // ❌ Too generic
+     * <Image src="/photo.jpg" alt="Team celebrating project launch" /> // ✅ Descriptive
+     * ```
      */
     alt: string;
 }
+/**
+ * Image component for displaying images with enhanced loading states and accessibility
+ *
+ * The Image component extends the standard HTML img element with advanced features
+ * including placeholder images, skeleton loading states, fade-in animations, and
+ * comprehensive accessibility support. It integrates seamlessly with the design
+ * system's layout, spacing, and theming capabilities.
+ *
+ * Key features:
+ * - Progressive loading with placeholder and skeleton states
+ * - Fade-in animations with reduced motion support
+ * - Comprehensive accessibility with ARIA attributes
+ * - Object-fit control for responsive image scaling
+ * - Caption support for additional context
+ * - AsChild pattern for flexible composition
+ * - Error handling with fallback states
+ * - Performance optimizations for cached images
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Image src="/photo.jpg" alt="Team photo" />
+ *
+ * // With placeholder and skeleton
+ * <Image
+ *   src="/high-res.jpg"
+ *   placeholder="/low-res.jpg"
+ *   showSkeleton
+ *   alt="Product showcase"
+ * />
+ *
+ * // With caption and custom fit
+ * <Image
+ *   src="/chart.png"
+ *   alt="Sales data visualization"
+ *   caption="Q3 2024 Sales Performance"
+ *   fit="contain"
+ *   width="400px"
+ *   height="300px"
+ * />
+ *
+ * // As clickable element
+ * <Image
+ *   asChild
+ *   src="/thumbnail.jpg"
+ *   alt="View full gallery"
+ * >
+ *   <a href="/gallery">
+ *     View Gallery
+ *   </a>
+ * </Image>
+ * ```
+ */
 declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
 export { Image };
 export type { ImageProps };

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

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/components/image.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AASjD,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5D,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,GAAG;IAC3D,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACjE;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAClE;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACpC,CAAC;AAEF,UAAU,UACR,SAAQ,qBAAqB,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC,EACvF,WAAW,EACX,UAAU,EACV,WAAW,EACX,WAAW,EACX,aAAa;IACf;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;CACb;AAED,QAAA,MAAM,KAAK,qFA0TT,CAAC;AAIH,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/components/image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AASjD,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAI5D;;;GAGG;AACH,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,GAAG;IAC3D;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;;;;;;;;;;;;;;;;OAiBG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACjE;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACnE,CAAC;AAEF;;;;;GAKG;AACH,UAAU,UACR,SAAQ,qBAAqB,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC,EACvF,WAAW,EACX,UAAU,EACV,WAAW,EACX,WAAW,EACX,aAAa;IACf;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;IACH,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,QAAA,MAAM,KAAK,qFA+OT,CAAC;AAIH,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}

package/dist/cjs/components/image.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var V=Object.create;var b=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var R=(o,e)=>{for(var s in e)b(o,s,{get:e[s],enumerable:!0})},z=(o,e,s,y)=>{if(e&&typeof e=="object"||typeof e=="function")for(let p of Y(e))!_.call(o,p)&&p!==s&&b(o,p,{get:()=>e[p],enumerable:!(y=X(e,p))||y.enumerable});return o};var O=(o,e,s)=>(s=o!=null?V(Z(o)):{},z(e||!o||!o.__esModule?b(s,"default",{value:o,enumerable:!0}):s,o)),ee=o=>z(b({},"__esModule",{value:!0}),o);var te={};R(te,{Image:()=>x});module.exports=ee(te);var t=O(require("react")),a=O(require("classnames")),B=require("./image.props.js"),q=require("../helpers/extract-props.js"),A=require("../props/margin.props.js"),G=require("../props/width.props.js"),F=require("../props/height.props.js"),$=require("../props/layout.props.js"),J=require("./skeleton.js"),v=require("./box.js");const x=t.forwardRef((o,e)=>{const{variant:s="surface",wrapperStyle:y,...p}=o,{asChild:D,className:n,radius:l,style:d,loading:c="lazy",alt:u,src:i,placeholder:E,showSkeleton:K=!1,fadeIn:k=!0,onLoad:C,onError:w,children:H,...M}=(0,q.extractProps)(p,B.imagePropDefs,A.marginPropDefs,G.widthPropDefs,F.heightPropDefs,$.layoutPropDefs),[T,S]=t.useState(!1),[Q,L]=t.useState(!1),[U,N]=t.useState(!!E),g=t.useRef(null),f=t.useCallback(r=>{S(!0),L(!1),N(!1),C?.(r)},[C]),I=t.useCallback(r=>{S(!1),L(!0),N(!1),w?.(r)},[w]);if(t.useEffect(()=>{const r=g.current;r&&r.complete&&r.naturalWidth>0&&(S(!0),L(!1),N(!1))},[i]),!i)return console.warn("Image component: src prop is required"),null;!D&&u===void 0&&console.warn("Image component: alt prop is required for accessibility when not using asChild");const h={width:"100%",height:"100%",display:"block",opacity:k?T?1:0:1,transition:k?"opacity 0.3s ease-out":"none",...d},P={position:"relative",display:"block",...y},j=K&&!T&&!Q?t.createElement(J.Skeleton,{width:"100%",height:"100px",style:{borderRadius:l?`var(--radius-${l})`:void 0},className:n}):null,W=E&&U?t.createElement("img",{"data-radius":l,style:{...h,filter:"blur(4px)",opacity:.7,transition:"opacity 0.3s ease-out"},className:(0,a.default)("rt-reset","rt-Image","rt-Image--placeholder",n),alt:"",src:E}):null;if(D&&H){const r=t.Children.only(H);return s==="blur"?t.cloneElement(r,{className:(0,a.default)(r.props?.className,"rt-variant-blur"),style:{textDecoration:"none",color:"inherit",border:"none",background:"none",padding:0,font:"inherit",cursor:"pointer",...P,...d,...r.props?.style},children:t.createElement(t.Fragment,null,t.createElement("img",{"data-radius":l,loading:c,style:{position:"absolute",top:"0",left:"0",width:"105%",height:"105%",transform:"translate(-2.5%, -2.5%)",filter:"blur(16px) saturate(1.5)",opacity:.5,zIndex:-1},className:(0,a.default)("rt-reset","rt-Image","rt-Image--blur-bg",n),alt:"",src:i}),t.createElement("img",{"data-radius":l,loading:c,style:h,className:(0,a.default)("rt-reset","rt-Image","rt-Image--blur",n),alt:u,src:i,onLoad:f,onError:I,ref:m=>{g.current=m,typeof e=="function"?e(m):e&&(e.current=m)}}))}):t.cloneElement(r,{className:(0,a.default)(r.props?.className),style:{textDecoration:"none",color:"inherit",border:"none",background:"none",padding:0,font:"inherit",cursor:"pointer",...P,...r.props?.style},children:t.createElement(t.Fragment,null,j,W,t.createElement("img",{"data-radius":l,loading:c,style:h,className:(0,a.default)("rt-reset","rt-Image",n),alt:u,src:i,onLoad:f,onError:I,ref:m=>{g.current=m,typeof e=="function"?e(m):e&&(e.current=m)}}))})}return s==="blur"?t.createElement(v.Box,{className:(0,a.default)("rt-variant-blur",n),style:{...d,...P},...M},t.createElement("img",{"data-radius":l,loading:c,style:{position:"absolute",top:"0",left:"0",width:"105%",height:"105%",transform:"translate(-2.5%, -2.5%)",filter:"blur(16px) saturate(1.5)",opacity:.5,zIndex:-1},className:(0,a.default)("rt-reset","rt-Image","rt-Image--blur-bg",n),alt:"",src:i}),t.createElement("img",{"data-radius":l,loading:c,style:h,className:(0,a.default)("rt-reset","rt-Image","rt-Image--blur",n),alt:u,src:i,onLoad:f,onError:I,ref:r=>{g.current=r,typeof e=="function"?e(r):e&&(e.current=r)}})):t.createElement(v.Box,{className:n,style:{...d,...P},...M},j,W,t.createElement("img",{"data-radius":l,loading:c,style:h,className:(0,a.default)("rt-reset","rt-Image",n),alt:u,src:i,onLoad:f,onError:I,ref:r=>{g.current=r,typeof e=="function"?e(r):e&&(e.current=r)}}))});x.displayName="Image";
+"use strict";var U=Object.create;var l=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty;var _=(o,t)=>{for(var r in t)l(o,r,{get:t[r],enumerable:!0})},D=(o,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of X(t))!Z.call(o,i)&&i!==r&&l(o,i,{get:()=>t[i],enumerable:!(s=V(t,i))||s.enumerable});return o};var C=(o,t,r)=>(r=o!=null?U(Y(o)):{},D(t||!o||!o.__esModule?l(r,"default",{value:o,enumerable:!0}):r,o)),$=o=>D(l({},"__esModule",{value:!0}),o);var ee={};_(ee,{Image:()=>y});module.exports=$(ee);var e=C(require("react")),h=C(require("classnames")),N=require("./image.props.js"),H=require("../helpers/extract-props.js"),k=require("../props/margin.props.js"),M=require("../props/width.props.js"),T=require("../props/height.props.js"),j=require("../props/layout.props.js"),W=require("./skeleton.js"),z=require("./slot.js");const y=e.forwardRef((o,t)=>{const{asChild:r,className:s,style:i,loading:O="lazy",alt:u,src:p,placeholder:m,showSkeleton:R=!1,fadeIn:P=!0,errorAriaLabel:q="Failed to load image",radius:G,caption:n,onLoad:I,onError:v,children:A,...E}=(0,H.extractProps)(o,N.imagePropDefs,k.marginPropDefs,M.widthPropDefs,T.heightPropDefs,j.layoutPropDefs),[d,c]=e.useState("loading"),[F,g]=e.useState(!!m),S=e.useRef(null),B=e.useCallback(a=>{c("loaded"),g(!1),I?.(a)},[I]),J=e.useCallback(a=>{c("error"),g(!1),v?.(a)},[v]);if(e.useEffect(()=>{const a=S.current;a&&a.complete&&a.naturalWidth>0&&(c("loaded"),g(!1))},[p]),!p)return console.warn("Image component: src prop is required"),null;!r&&u===void 0&&console.warn("Image component: alt prop is required for accessibility when not using asChild");const L=d==="loading",f=d==="error",K=d==="loaded",Q={"aria-busy":L,"aria-invalid":f,"aria-describedby":f?"image-error":void 0},b={width:"100%",height:"100%",display:"block",opacity:P?K?1:0:1,transition:P?"opacity 0.3s ease-out":"none"},w=e.createElement(e.Fragment,null,e.createElement("div",{style:{position:"relative",flex:n?"1 1 0%":void 0,height:n?void 0:"100%",minHeight:0}},f&&e.createElement("div",{id:"image-error",className:"rt-sr-only","aria-live":"polite"},q),R&&L&&e.createElement(W.Skeleton,{width:"100%",height:"100%",style:{position:"absolute",inset:0}}),m&&F&&e.createElement("img",{style:{...b,position:"absolute",inset:0,filter:"blur(4px)",opacity:.7,zIndex:0},className:(0,h.default)("rt-reset","rt-Image","rt-Image--placeholder"),alt:"",src:m}),e.createElement("img",{ref:a=>{S.current=a,typeof t=="function"?t(a):t&&(t.current=a)},loading:O,style:{...b,position:"relative",zIndex:1},className:(0,h.default)("rt-reset","rt-Image",s),alt:u,src:p,"data-radius":G,onLoad:B,onError:J,...Q})),n&&e.createElement("div",{className:"rt-Image-caption",style:{flex:"0 0 auto"}},n)),x={display:n?"flex":"block",flexDirection:n?"column":void 0,...i};return r?e.createElement(z.Slot,{className:s,style:x,...E},e.cloneElement(A,{},w)):e.createElement("div",{className:s,style:x,...E},w)});y.displayName="Image";
 //# sourceMappingURL=image.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/image.tsx"],
-  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\n\nimport { imagePropDefs } from './image.props.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\nimport { widthPropDefs } from '../props/width.props.js';\nimport { heightPropDefs } from '../props/height.props.js';\nimport { layoutPropDefs } from '../props/layout.props.js';\nimport { Skeleton } from './skeleton.js';\nimport { Box } from './box.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { WidthProps } from '../props/width.props.js';\nimport type { HeightProps } from '../props/height.props.js';\nimport type { LayoutProps } from '../props/layout.props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype ImageElement = React.ElementRef<'img'>;\ntype ImageOwnProps = GetPropDefTypes<typeof imagePropDefs> & {\n  loading?: 'eager' | 'lazy';\n  /**\n   * Placeholder image URL to show while the main image is loading.\n   * Can be a low-quality/blurred version of the main image.\n   */\n  placeholder?: string;\n  /**\n   * Shows a skeleton placeholder while loading instead of a blank space.\n   */\n  showSkeleton?: boolean;\n  /**\n   * Whether the image should fade in when loaded. Set to false for background images or when you want immediate visibility.\n   */\n  fadeIn?: boolean;\n  /**\n   * Callback fired when the image successfully loads.\n   */\n  onLoad?: (event: React.SyntheticEvent<HTMLImageElement>) => void;\n  /**\n   * Callback fired when the image fails to load.\n   */\n  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;\n  /**\n   * Style object to apply to the wrapper container. Useful for overriding display, width, height, etc.\n   */\n  wrapperStyle?: React.CSSProperties;\n};\n\ninterface ImageProps\n  extends ComponentPropsWithout<'img', RemovedProps | 'color' | 'width' | 'height' | 'alt'>,\n    MarginProps,\n    WidthProps,\n    HeightProps,\n    LayoutProps,\n    ImageOwnProps {\n  /**\n   * The alt attribute provides alternative information for an image if a user for some reason cannot view it.\n   * Required for accessibility when not using asChild. Use empty string for decorative images.\n   */\n  alt: string;\n}\n\nconst Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) => {\n  const { variant = 'surface', wrapperStyle, ...restProps } = props;\n  const {\n    asChild,\n    className,\n    radius,\n    style,\n    loading = 'lazy',\n    alt,\n    src,\n    placeholder,\n    showSkeleton = false,\n    fadeIn = true,\n    onLoad: userOnLoad,\n    onError: userOnError,\n    children,\n    ...wrapperProps\n  } = extractProps(\n    restProps,\n    imagePropDefs,\n    marginPropDefs,\n    widthPropDefs,\n    heightPropDefs,\n    layoutPropDefs,\n  );\n\n  // Loading state management\n  const [imageLoaded, setImageLoaded] = React.useState(false);\n  const [imageError, setImageError] = React.useState(false);\n  const [showPlaceholder, setShowPlaceholder] = React.useState(!!placeholder);\n\n  // Ref to check if image is already loaded (for cached images)\n  const imgRef = React.useRef<HTMLImageElement>(null);\n\n  // Handle image load\n  const handleLoad = React.useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement>) => {\n      setImageLoaded(true);\n      setImageError(false);\n      setShowPlaceholder(false);\n      userOnLoad?.(event);\n    },\n    [userOnLoad],\n  );\n\n  // Handle image error\n  const handleError = React.useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement>) => {\n      setImageLoaded(false);\n      setImageError(true);\n      setShowPlaceholder(false);\n      userOnError?.(event);\n    },\n    [userOnError],\n  );\n\n  // Check if image is already loaded (for cached images)\n  React.useEffect(() => {\n    const img = imgRef.current;\n    if (img && img.complete && img.naturalWidth > 0) {\n      setImageLoaded(true);\n      setImageError(false);\n      setShowPlaceholder(false);\n    }\n  }, [src]);\n\n  // Validate required props\n  if (!src) {\n    console.warn('Image component: src prop is required');\n    return null;\n  }\n\n  if (!asChild && alt === undefined) {\n    console.warn('Image component: alt prop is required for accessibility when not using asChild');\n  }\n\n  // Common image styles that apply to the actual img element\n  const imgStyle: React.CSSProperties = {\n    width: '100%',\n    height: '100%',\n    display: 'block',\n    opacity: fadeIn ? (imageLoaded ? 1 : 0) : 1,\n    transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',\n    ...style, // Allow style overrides for the image\n  };\n\n  // Wrapper styles that get all the sizing and positioning\n  const wrapperStyleFinal: React.CSSProperties = {\n    position: 'relative',\n    display: 'block', // Use block instead of inline-block to work better with AspectRatio\n    ...wrapperStyle,\n  };\n\n  // Create skeleton placeholder\n  const skeletonElement =\n    showSkeleton && !imageLoaded && !imageError ? (\n      <Skeleton\n        width=\"100%\"\n        height=\"100px\" // Default height, can be overridden by wrapper\n        style={{\n          borderRadius: radius ? `var(--radius-${radius})` : undefined,\n        }}\n        className={className}\n      />\n    ) : null;\n\n  // Create placeholder image element\n  const placeholderElement =\n    placeholder && showPlaceholder ? (\n      <img\n        data-radius={radius}\n        style={{\n          ...imgStyle,\n          filter: 'blur(4px)',\n          opacity: 0.7,\n          transition: 'opacity 0.3s ease-out',\n        }}\n        className={classNames('rt-reset', 'rt-Image', 'rt-Image--placeholder', className)}\n        alt=\"\"\n        src={placeholder}\n      />\n    ) : null;\n\n  // Handle asChild - inject content into the child element\n  if (asChild && children) {\n    const child = React.Children.only(children) as React.ReactElement<any>;\n\n    if (variant === 'blur') {\n      // For blur variant with asChild\n      return React.cloneElement(child, {\n        className: classNames(child.props?.className, 'rt-variant-blur'),\n        style: {\n          textDecoration: 'none',\n          color: 'inherit',\n          border: 'none',\n          background: 'none',\n          padding: 0,\n          font: 'inherit',\n          cursor: 'pointer',\n          ...wrapperStyleFinal,\n          ...style, // Apply sizing to the child element\n          ...child.props?.style,\n        },\n        children: (\n          <>\n            {/* Background blurred image */}\n            <img\n              data-radius={radius}\n              loading={loading}\n              style={{\n                position: 'absolute',\n                top: '0',\n                left: '0',\n                width: '105%',\n                height: '105%',\n                transform: 'translate(-2.5%, -2.5%)',\n                filter: 'blur(16px) saturate(1.5)',\n                opacity: 0.5,\n                zIndex: -1,\n              }}\n              className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur-bg', className)}\n              alt=\"\"\n              src={src}\n            />\n            {/* Foreground image */}\n            <img\n              data-radius={radius}\n              loading={loading}\n              style={imgStyle}\n              className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}\n              alt={alt}\n              src={src}\n              onLoad={handleLoad}\n              onError={handleError}\n              ref={(node) => {\n                imgRef.current = node;\n                if (typeof forwardedRef === 'function') {\n                  forwardedRef(node);\n                } else if (forwardedRef) {\n                  forwardedRef.current = node;\n                }\n              }}\n            />\n          </>\n        ),\n      });\n    } else {\n      // For surface variant with asChild\n      return React.cloneElement(child, {\n        className: classNames(child.props?.className),\n        style: {\n          textDecoration: 'none',\n          color: 'inherit',\n          border: 'none',\n          background: 'none',\n          padding: 0,\n          font: 'inherit',\n          cursor: 'pointer',\n          ...wrapperStyleFinal,\n          ...child.props?.style,\n        },\n        children: (\n          <>\n            {skeletonElement}\n            {placeholderElement}\n            <img\n              data-radius={radius}\n              loading={loading}\n              style={imgStyle}\n              className={classNames('rt-reset', 'rt-Image', className)}\n              alt={alt}\n              src={src}\n              onLoad={handleLoad}\n              onError={handleError}\n              ref={(node) => {\n                imgRef.current = node;\n                if (typeof forwardedRef === 'function') {\n                  forwardedRef(node);\n                } else if (forwardedRef) {\n                  forwardedRef.current = node;\n                }\n              }}\n            />\n          </>\n        ),\n      });\n    }\n  }\n\n  // Regular rendering without asChild - both variants use Box wrapper\n  if (variant === 'blur') {\n    return (\n      <Box\n        className={classNames('rt-variant-blur', className)}\n        style={{\n          ...style, // Include the width/height styles from extractProps\n          ...wrapperStyleFinal,\n        }}\n        {...wrapperProps} // Apply other props to wrapper\n      >\n        {/* Background blurred image */}\n        <img\n          data-radius={radius}\n          loading={loading}\n          style={{\n            position: 'absolute',\n            top: '0',\n            left: '0',\n            width: '105%',\n            height: '105%',\n            transform: 'translate(-2.5%, -2.5%)',\n            filter: 'blur(16px) saturate(1.5)',\n            opacity: 0.5,\n            zIndex: -1,\n          }}\n          className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur-bg', className)}\n          alt=\"\"\n          src={src}\n        />\n        {/* Foreground image */}\n        <img\n          data-radius={radius}\n          loading={loading}\n          style={imgStyle}\n          className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}\n          alt={alt}\n          src={src}\n          onLoad={handleLoad}\n          onError={handleError}\n          ref={(node) => {\n            imgRef.current = node;\n            if (typeof forwardedRef === 'function') {\n              forwardedRef(node);\n            } else if (forwardedRef) {\n              forwardedRef.current = node;\n            }\n          }}\n        />\n      </Box>\n    );\n  }\n\n  // Surface variant - also use Box wrapper for consistency\n  return (\n    <Box\n      className={className}\n      style={{\n        ...style, // Include the width/height styles from extractProps\n        ...wrapperStyleFinal,\n      }}\n      {...wrapperProps} // Apply other props to wrapper\n    >\n      {skeletonElement}\n      {placeholderElement}\n      <img\n        data-radius={radius}\n        loading={loading}\n        style={imgStyle}\n        className={classNames('rt-reset', 'rt-Image', className)}\n        alt={alt}\n        src={src}\n        onLoad={handleLoad}\n        onError={handleError}\n        ref={(node) => {\n          imgRef.current = node;\n          if (typeof forwardedRef === 'function') {\n            forwardedRef(node);\n          } else if (forwardedRef) {\n            forwardedRef.current = node;\n          }\n        }}\n      />\n    </Box>\n  );\n});\n\nImage.displayName = 'Image';\n\nexport { Image };\nexport type { ImageProps };\n"],
-  "mappings": "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",
-  "names": ["image_exports", "__export", "Image", "__toCommonJS", "React", "import_classnames", "import_image_props", "import_extract_props", "import_margin_props", "import_width_props", "import_height_props", "import_layout_props", "import_skeleton", "import_box", "props", "forwardedRef", "variant", "wrapperStyle", "restProps", "asChild", "className", "radius", "style", "loading", "alt", "src", "placeholder", "showSkeleton", "fadeIn", "userOnLoad", "userOnError", "children", "wrapperProps", "imageLoaded", "setImageLoaded", "imageError", "setImageError", "showPlaceholder", "setShowPlaceholder", "imgRef", "handleLoad", "event", "handleError", "img", "imgStyle", "wrapperStyleFinal", "skeletonElement", "placeholderElement", "classNames", "child", "node"]
+  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport { imagePropDefs } from './image.props.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\nimport { widthPropDefs } from '../props/width.props.js';\nimport { heightPropDefs } from '../props/height.props.js';\nimport { layoutPropDefs } from '../props/layout.props.js';\nimport { Skeleton } from './skeleton.js';\nimport { Slot } from './slot.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { WidthProps } from '../props/width.props.js';\nimport type { HeightProps } from '../props/height.props.js';\nimport type { LayoutProps } from '../props/layout.props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype ImageElement = React.ElementRef<'img'>;\n\n/**\n * Core Image props that extend the base image prop definitions\n * These props provide enhanced functionality beyond standard HTML img attributes\n */\ntype ImageOwnProps = GetPropDefTypes<typeof imagePropDefs> & {\n  /**\n   * Native loading behavior for the image\n   * 'lazy' defers loading until the image is near the viewport\n   * 'eager' loads the image immediately\n   */\n  loading?: 'eager' | 'lazy';\n  /**\n   * Placeholder image URL to show while the main image is loading\n   *\n   * Best practices:\n   * - Use a low-quality/blurred version of the main image\n   * - Keep file size small (under 10KB recommended)\n   * - Use same aspect ratio as main image\n   * - Consider using base64 data URLs for inline placeholders\n   *\n   * @example\n   * ```tsx\n   * <Image\n   *   src=\"/high-res-image.jpg\"\n   *   placeholder=\"/low-res-placeholder.jpg\"\n   *   alt=\"Product photo\"\n   * />\n   * ```\n   */\n  placeholder?: string;\n  /**\n   * Shows a skeleton placeholder while loading instead of a blank space\n   *\n   * Use this when:\n   * - You don't have a placeholder image\n   * - You want consistent loading states across your interface\n   * - The image is part of a content layout that needs stable dimensions\n   */\n  showSkeleton?: boolean;\n  /**\n   * Whether the image should fade in when loaded\n   *\n   * Set to false for:\n   * - Background images where immediate visibility is important\n   * - Images that need to appear instantly for UX reasons\n   * - When you're implementing custom loading animations\n   */\n  fadeIn?: boolean;\n  /**\n   * Callback fired when the image successfully loads\n   *\n   * Use this to:\n   * - Track image loading performance\n   * - Trigger layout adjustments after load\n   * - Implement custom loading state management\n   */\n  onLoad?: (event: React.SyntheticEvent<HTMLImageElement>) => void;\n  /**\n   * Callback fired when the image fails to load\n   *\n   * Use this to:\n   * - Log errors for monitoring\n   * - Show fallback content\n   * - Implement retry logic\n   */\n  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;\n};\n\n/**\n * Complete Image component props interface\n *\n * Combines HTML img attributes with design system props and enhanced functionality.\n * Excludes conflicting props like 'color', 'width', 'height' that are handled by the design system.\n */\ninterface ImageProps\n  extends ComponentPropsWithout<'img', RemovedProps | 'color' | 'width' | 'height' | 'alt'>,\n    MarginProps,\n    WidthProps,\n    HeightProps,\n    LayoutProps,\n    ImageOwnProps {\n  /**\n   * Alternative text for the image\n   *\n   * Required for accessibility when not using asChild pattern.\n   * Describes the image content for screen readers and when images fail to load.\n   *\n   * Guidelines:\n   * - Be descriptive but concise\n   * - Don't include \"image of\" or \"picture of\"\n   * - Use empty string (\"\") for purely decorative images\n   * - Describe the content and context, not just what you see\n   *\n   * @example\n   * ```tsx\n   * // Good alt text\n   * <Image src=\"/chart.png\" alt=\"Sales increased 25% from Q1 to Q2\" />\n   *\n   * // Decorative image\n   * <Image src=\"/decoration.png\" alt=\"\" />\n   *\n   * // Avoid generic descriptions\n   * <Image src=\"/photo.jpg\" alt=\"A photo\" /> // \u274C Too generic\n   * <Image src=\"/photo.jpg\" alt=\"Team celebrating project launch\" /> // \u2705 Descriptive\n   * ```\n   */\n  alt: string;\n}\n\n/**\n * Image component for displaying images with enhanced loading states and accessibility\n *\n * The Image component extends the standard HTML img element with advanced features\n * including placeholder images, skeleton loading states, fade-in animations, and\n * comprehensive accessibility support. It integrates seamlessly with the design\n * system's layout, spacing, and theming capabilities.\n *\n * Key features:\n * - Progressive loading with placeholder and skeleton states\n * - Fade-in animations with reduced motion support\n * - Comprehensive accessibility with ARIA attributes\n * - Object-fit control for responsive image scaling\n * - Caption support for additional context\n * - AsChild pattern for flexible composition\n * - Error handling with fallback states\n * - Performance optimizations for cached images\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Image src=\"/photo.jpg\" alt=\"Team photo\" />\n *\n * // With placeholder and skeleton\n * <Image\n *   src=\"/high-res.jpg\"\n *   placeholder=\"/low-res.jpg\"\n *   showSkeleton\n *   alt=\"Product showcase\"\n * />\n *\n * // With caption and custom fit\n * <Image\n *   src=\"/chart.png\"\n *   alt=\"Sales data visualization\"\n *   caption=\"Q3 2024 Sales Performance\"\n *   fit=\"contain\"\n *   width=\"400px\"\n *   height=\"300px\"\n * />\n *\n * // As clickable element\n * <Image\n *   asChild\n *   src=\"/thumbnail.jpg\"\n *   alt=\"View full gallery\"\n * >\n *   <a href=\"/gallery\">\n *     View Gallery\n *   </a>\n * </Image>\n * ```\n */\nconst Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) => {\n  // Extract and organize props for different purposes\n  const {\n    asChild,\n    className,\n    style,\n    loading = 'lazy', // Default to lazy loading for performance\n    alt,\n    src,\n    placeholder,\n    showSkeleton = false, // Default to no skeleton for simpler UX\n    fadeIn = true, // Default to fade-in for smooth loading experience\n\n    errorAriaLabel = 'Failed to load image',\n    radius,\n    caption,\n    onLoad: userOnLoad,\n    onError: userOnError,\n    children,\n    ...wrapperProps\n  } = extractProps(\n    props,\n    imagePropDefs,\n    marginPropDefs,\n    widthPropDefs,\n    heightPropDefs,\n    layoutPropDefs,\n  );\n\n  // State management for loading, error, and placeholder states\n  const [loadingState, setLoadingState] = React.useState<'loading' | 'loaded' | 'error'>('loading');\n  const [showPlaceholder, setShowPlaceholder] = React.useState(!!placeholder);\n  const imgRef = React.useRef<HTMLImageElement>(null);\n\n  /**\n   * Handle successful image load\n   * Updates state and triggers user callback for load event\n   */\n  const handleLoad = React.useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement>) => {\n      setLoadingState('loaded');\n      setShowPlaceholder(false);\n      // Call user's onLoad handler if provided\n      userOnLoad?.(event);\n    },\n    [userOnLoad],\n  );\n\n  /**\n   * Handle image load error\n   * Updates state and triggers user callback for error event\n   */\n  const handleError = React.useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement>) => {\n      setLoadingState('error');\n      setShowPlaceholder(false);\n      // Call user's onError handler if provided\n      userOnError?.(event);\n    },\n    [userOnError],\n  );\n\n  /**\n   * Check if image is already loaded (optimization for cached images)\n   * This prevents unnecessary loading states for images that are already available\n   */\n  React.useEffect(() => {\n    const img = imgRef.current;\n    if (img && img.complete && img.naturalWidth > 0) {\n      setLoadingState('loaded');\n      setShowPlaceholder(false);\n    }\n  }, [src]);\n\n  // Validate required props and provide helpful development warnings\n  if (!src) {\n    console.warn('Image component: src prop is required');\n    return null;\n  }\n\n  if (!asChild && alt === undefined) {\n    console.warn('Image component: alt prop is required for accessibility when not using asChild');\n  }\n\n  // Derive loading state flags for cleaner conditional rendering\n  const isLoading = loadingState === 'loading';\n  const isError = loadingState === 'error';\n  const isLoaded = loadingState === 'loaded';\n\n  /**\n   * ARIA attributes for comprehensive accessibility support\n   * These attributes help screen readers understand the image state\n   */\n  const ariaProps = {\n    'aria-busy': isLoading,\n    'aria-invalid': isError,\n    'aria-describedby': isError ? 'image-error' : undefined,\n  };\n\n  /**\n   * Image styling that handles fade-in animation and responsive behavior\n   * Respects user's motion preferences through CSS media queries\n   */\n  const imgStyle: React.CSSProperties = {\n    width: '100%',\n    height: '100%',\n    display: 'block',\n    // Conditional opacity for fade-in effect\n    opacity: fadeIn ? (isLoaded ? 1 : 0) : 1,\n    // Smooth transition for fade-in, respects reduced motion preferences\n    transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',\n  };\n\n  /**\n   * Create the complete image content structure\n   * This includes the main image, placeholder, skeleton, caption, and error states\n   */\n  const imageContent = (\n    <>\n      {/*\n       * Image container - handles layout and positioning\n       * Uses flex layout when caption is present for proper space distribution\n       */}\n      <div\n        style={{\n          position: 'relative',\n          flex: caption ? '1 1 0%' : undefined,\n          height: caption ? undefined : '100%',\n          minHeight: 0, // Important for flex shrinking in constrained layouts\n        }}\n      >\n        {/*\n         * Error message for screen readers\n         * Hidden visually but announced by assistive technology\n         */}\n        {isError && (\n          <div id=\"image-error\" className=\"rt-sr-only\" aria-live=\"polite\">\n            {errorAriaLabel}\n          </div>\n        )}\n\n        {/*\n         * Skeleton placeholder during loading\n         * Provides visual feedback and prevents layout shift\n         */}\n        {showSkeleton && isLoading && (\n          <Skeleton width=\"100%\" height=\"100%\" style={{ position: 'absolute', inset: 0 }} />\n        )}\n\n        {/*\n         * Placeholder image with blur effect\n         * Shows a low-quality version while the main image loads\n         */}\n        {placeholder && showPlaceholder && (\n          <img\n            style={{\n              ...imgStyle,\n              position: 'absolute',\n              inset: 0,\n              filter: 'blur(4px)', // Creates the blur effect for LQIP (Low Quality Image Placeholder)\n              opacity: 0.7, // Subtle opacity to indicate it's a placeholder\n              zIndex: 0, // Behind the main image\n            }}\n            className={classNames('rt-reset', 'rt-Image', 'rt-Image--placeholder')}\n            alt=\"\" // Decorative placeholder, no alt text needed\n            src={placeholder}\n          />\n        )}\n\n        {/*\n         * Main image element\n         * Handles all the core functionality and user interactions\n         */}\n        <img\n          ref={(node) => {\n            // Handle both internal ref and forwarded ref\n            imgRef.current = node;\n            if (typeof forwardedRef === 'function') {\n              forwardedRef(node);\n            } else if (forwardedRef) {\n              forwardedRef.current = node;\n            }\n          }}\n          loading={loading}\n          style={{ ...imgStyle, position: 'relative', zIndex: 1 }}\n          className={classNames('rt-reset', 'rt-Image', className)}\n          alt={alt}\n          src={src}\n          data-radius={radius}\n          onLoad={handleLoad}\n          onError={handleError}\n          {...ariaProps}\n        />\n      </div>\n\n      {/*\n       * Caption element - positioned below the image\n       * Takes only the space it needs, doesn't interfere with image sizing\n       */}\n      {caption && (\n        <div className=\"rt-Image-caption\" style={{ flex: '0 0 auto' }}>\n          {caption}\n        </div>\n      )}\n    </>\n  );\n\n  /**\n   * Container styling that adapts based on caption presence\n   * Uses flexbox when caption is present for proper layout control\n   */\n  const containerStyle: React.CSSProperties = {\n    display: caption ? 'flex' : 'block',\n    flexDirection: caption ? 'column' : undefined,\n    ...style, // Allow user styles to override defaults\n  };\n\n  /**\n   * Render with asChild pattern for composition\n   * This allows the Image to be rendered as a child of another element\n   * while maintaining all its functionality and styling\n   */\n  if (asChild) {\n    return (\n      <Slot className={className} style={containerStyle} {...wrapperProps}>\n        {React.cloneElement(children as React.ReactElement, {}, imageContent)}\n      </Slot>\n    );\n  }\n\n  /**\n   * Regular rendering as a standalone div container\n   * This is the default rendering mode for most use cases\n   */\n  return (\n    <div className={className} style={containerStyle} {...wrapperProps}>\n      {imageContent}\n    </div>\n  );\n});\n\nImage.displayName = 'Image';\n\nexport { Image };\nexport type { ImageProps };\n"],
+  "mappings": "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",
+  "names": ["image_exports", "__export", "Image", "__toCommonJS", "React", "import_classnames", "import_image_props", "import_extract_props", "import_margin_props", "import_width_props", "import_height_props", "import_layout_props", "import_skeleton", "import_slot", "props", "forwardedRef", "asChild", "className", "style", "loading", "alt", "src", "placeholder", "showSkeleton", "fadeIn", "errorAriaLabel", "radius", "caption", "userOnLoad", "userOnError", "children", "wrapperProps", "loadingState", "setLoadingState", "showPlaceholder", "setShowPlaceholder", "imgRef", "handleLoad", "event", "handleError", "img", "isLoading", "isError", "isLoaded", "ariaProps", "imgStyle", "imageContent", "classNames", "node", "containerStyle"]
 }