@kushagradhawan/kookie-ui 0.1.23 → 0.1.25

package/dist/esm/components/sidebar.js

@@ -1,2 +1,2 @@
-"use client";import*as e from"react";import n from"classnames";import{Slot as R}from"./slot.js";import{Accordion as x}from"radix-ui";import{sidebarPropDefs as P}from"./sidebar.props.js";import{Theme as H,useThemeContext as J}from"./theme.js";import{IconButton as Q}from"./icon-button.js";import{ScrollArea as X}from"./scroll-area.js";import{Separator as Y}from"./separator.js";import{ChevronDownIcon as Z,ThickChevronRightIcon as ee}from"./icons.js";import{extractProps as oe}from"../helpers/extract-props.js";import{Kbd as re}from"./kbd.js";import{Badge as L}from"./badge.js";const h=e.createContext(null);function w(){const o=e.useContext(h);if(!o)throw new Error("useSidebar must be used within a SidebarProvider.");return o}function te(){const[o,t]=e.useState(!1);return e.useEffect(()=>{const r=()=>{t(window.innerWidth<768)};return r(),window.addEventListener("resize",r),()=>window.removeEventListener("resize",r)},[]),o}const z=e.forwardRef(({defaultOpen:o=!0,open:t,onOpenChange:r,side:a="left",className:i,children:s,...l},u)=>{const d=te(),[S,c]=e.useState(!1),[b,v]=e.useState(o),p=t??b,g=e.useCallback(f=>{const T=typeof f=="function"?f(p):f;r?r(T):v(T)},[r,p]),m=e.useCallback(()=>d?c(f=>!f):g(f=>!f),[d,g,c]),N=p?"expanded":"collapsed",y=e.useMemo(()=>({state:N,open:p,setOpen:g,isMobile:d,openMobile:S,setOpenMobile:c,toggleSidebar:m,side:a}),[N,p,g,d,S,c,m,a]);return e.createElement("div",{...l,ref:u,className:n("rt-SidebarProvider",i),"data-state":N,"data-side":a},e.createElement(h.Provider,{value:y},s))});z.displayName="Sidebar.Provider";const I=e.forwardRef((o,t)=>{const r=J(),{isMobile:a,state:i,openMobile:s,setOpenMobile:l}=w(),{size:u=P.size.default,variant:d=P.variant.default,menuVariant:S=P.menuVariant.default,type:c=P.type.default,side:b=P.side.default,collapsible:v=P.collapsible.default,panelBackground:p,color:g,highContrast:m=P.highContrast.default,asChild:N}=o,{className:y,children:f,...T}=oe(o,P),{asChild:ae,panelBackground:ne,...B}=T,M=g||r.accentColor,q=typeof u=="object"?u.initial||"2":u,C=e.useContext(h);return C&&(C.side=b,C.type=c,C.variant=d,C.menuVariant=S,C.collapsible=v,C.size=q),v==="none"?e.createElement("div",{...B,ref:t,"data-accent-color":M,"data-state":i,"data-side":b,"data-type":c,"data-collapsible":v,className:n("rt-SidebarRoot",`rt-r-size-${u}`,y)},e.createElement(H,null,e.createElement("div",{className:n("rt-SidebarContainer",`rt-variant-${d}`),"data-accent-color":M,"data-high-contrast":m||void 0,"data-side":b,"data-panel-background":p},f))):a?e.createElement("div",{...B,ref:t,"data-accent-color":M,"data-state":s?"open":"closed","data-side":b,"data-type":c,"data-collapsible":v,className:n("rt-SidebarRoot","rt-SidebarRoot--mobile",y)},e.createElement(H,null,e.createElement("div",{className:n("rt-SidebarContainer",`rt-variant-${d}`,`rt-r-size-${u}`),"data-accent-color":M,"data-high-contrast":m||void 0,"data-side":b,"data-panel-background":p},f))):e.createElement("div",{...B,ref:t,"data-accent-color":M,"data-state":i,"data-side":b,"data-type":c,"data-collapsible":v,className:n("rt-SidebarRoot",y)},e.createElement(H,null,e.createElement("div",{className:n("rt-SidebarContainer",`rt-variant-${d}`,`rt-r-size-${u}`),"data-accent-color":M,"data-high-contrast":m||void 0,"data-side":b,"data-panel-background":p},f)))});I.displayName="Sidebar.Root";const E=e.forwardRef(({className:o,children:t,...r},a)=>{const i=e.useContext(h),{size:s="2",menuVariant:l="soft"}=i||{};return e.createElement(X,{type:"auto"},e.createElement("div",{...r,ref:a,className:n("rt-SidebarContent",`rt-r-size-${s}`,`rt-menu-variant-${l}`,o)},t))});E.displayName="Sidebar.Content";const G=e.forwardRef(({className:o,asContainer:t=!0,...r},a)=>{const i=e.useContext(h),{size:s="2",menuVariant:l="soft"}=i||{};return e.createElement("div",{...r,ref:a,className:n("rt-SidebarHeader",`rt-r-size-${s}`,`rt-menu-variant-${l}`,{"rt-SidebarHeader--container":t},o)})});G.displayName="Sidebar.Header";const W=e.forwardRef(({className:o,asContainer:t=!0,...r},a)=>{const i=e.useContext(h),{size:s="2",menuVariant:l="soft"}=i||{};return e.createElement("div",{...r,ref:a,className:n("rt-SidebarFooter",`rt-r-size-${s}`,`rt-menu-variant-${l}`,{"rt-SidebarFooter--container":t},o)})});W.displayName="Sidebar.Footer";const D=e.forwardRef(({onClick:o,children:t,...r},a)=>{const{toggleSidebar:i}=w();return e.createElement(Q,{...r,ref:a,variant:"ghost",onClick:s=>{o?.(s),i()}},t||e.createElement(Z,null))});D.displayName="Sidebar.Trigger";const A=e.forwardRef(({className:o,...t},r)=>e.createElement(Y,{...t,ref:r,className:n("rt-SidebarSeparator",o)}));A.displayName="Sidebar.Separator";const $=e.forwardRef(({className:o,...t},r)=>e.createElement("ul",{...t,ref:r,className:n("rt-SidebarMenu",o)}));$.displayName="Sidebar.Menu";const O=e.forwardRef(({className:o,...t},r)=>e.createElement("li",{...t,ref:r,className:n("rt-SidebarMenuItem",o)}));O.displayName="Sidebar.MenuItem";const k=e.forwardRef(({asChild:o=!1,isActive:t=!1,shortcut:r,badge:a,className:i,children:s,onMouseEnter:l,onMouseLeave:u,...d},S)=>{const[c,b]=e.useState(!1),v=e.useContext(h),{size:p="2"}=v||{};return e.createElement(o?R:"button",{...d,ref:S,className:n("rt-reset","rt-SidebarMenuButton",i),"data-active":t||void 0,"data-highlighted":c||void 0,onMouseEnter:m=>{b(!0),l?.(m)},onMouseLeave:m=>{b(!1),u?.(m)}},o?s:e.createElement(e.Fragment,null,s,a&&e.createElement("div",{className:"rt-SidebarMenuBadge"},typeof a=="string"?e.createElement(L,{size:p,variant:"soft"},a):e.createElement(L,{size:a.size||p,variant:a.variant||"soft",color:a.color,highContrast:a.highContrast,radius:a.radius},a.content)),r&&e.createElement("div",{className:"rt-BaseMenuShortcut rt-SidebarMenuShortcut"},e.createElement(re,{size:p},r))))});k.displayName="Sidebar.MenuButton";const F=e.forwardRef(({defaultOpen:o=!1,children:t,...r},a)=>e.createElement("div",{...r,ref:a},e.createElement(x.Root,{type:"single",collapsible:!0,defaultValue:o?"item":void 0},e.createElement(x.Item,{value:"item"},t))));F.displayName="Sidebar.MenuSub";const V=e.forwardRef(({asChild:o=!1,className:t,children:r,onMouseEnter:a,onMouseLeave:i,...s},l)=>{const[u,d]=e.useState(!1);return e.createElement(x.Header,{asChild:!0},e.createElement("div",null,e.createElement(x.Trigger,{...s,ref:l,asChild:o,className:n("rt-reset","rt-SidebarMenuButton","rt-SidebarMenuSubTrigger",t),"data-highlighted":u||void 0,onMouseEnter:S=>{d(!0),a?.(S)},onMouseLeave:S=>{d(!1),i?.(S)}},o?r:e.createElement(e.Fragment,null,r,e.createElement(ee,{className:n("rt-BaseMenuSubTriggerIcon","rt-SidebarMenuSubTriggerIcon")})))))});V.displayName="Sidebar.MenuSubTrigger";const j=e.forwardRef(({className:o,children:t,...r},a)=>e.createElement(x.Content,{...r,ref:a,className:n("rt-SidebarMenuSubContent",o)},e.createElement("div",{className:"rt-SidebarMenuSubList"},t)));j.displayName="Sidebar.MenuSubContent";const _=e.forwardRef(({className:o,...t},r)=>e.createElement("div",{...t,ref:r,className:n("rt-SidebarGroup",o)}));_.displayName="Sidebar.Group";const K=e.forwardRef(({asChild:o=!1,className:t,...r},a)=>e.createElement(o?R:"div",{...r,ref:a,className:n("rt-SidebarGroupLabel",t)}));K.displayName="Sidebar.GroupLabel";const U=e.forwardRef(({className:o,...t},r)=>e.createElement("div",{...t,ref:r,className:n("rt-SidebarGroupContent",o)}));U.displayName="Sidebar.GroupContent";export{E as Content,W as Footer,_ as Group,U as GroupContent,K as GroupLabel,G as Header,$ as Menu,k as MenuButton,O as MenuItem,F as MenuSub,j as MenuSubContent,V as MenuSubTrigger,z as Provider,I as Root,A as Separator,D as Trigger,w as useSidebar};
+"use client";import*as e from"react";import n from"classnames";import{Slot as L}from"./slot.js";import{Accordion as x}from"radix-ui";import{sidebarPropDefs as P}from"./sidebar.props.js";import{Theme as w,useThemeContext as J}from"./theme.js";import{IconButton as Q}from"./icon-button.js";import{ScrollArea as X}from"./scroll-area.js";import{Separator as Y}from"./separator.js";import{ChevronDownIcon as Z,ThickChevronRightIcon as ee}from"./icons.js";import{extractProps as te}from"../helpers/extract-props.js";import{Kbd as oe}from"./kbd.js";import{Badge as R}from"./badge.js";const M=e.createContext(null);function H(){const t=e.useContext(M);if(!t)throw new Error("useSidebar must be used within a SidebarProvider.");return t}function re(){const[t,r]=e.useState(!1);return e.useEffect(()=>{const o=()=>{r(window.innerWidth<768)};return o(),window.addEventListener("resize",o),()=>window.removeEventListener("resize",o)},[]),t}const I=e.forwardRef(({defaultOpen:t=!0,open:r,onOpenChange:o,side:a="left",className:i,children:s,...b},p)=>{const d=re(),[m,l]=e.useState(!1),[c,f]=e.useState(t),u=r??c,g=e.useCallback(S=>{const T=typeof S=="function"?S(u):S;o?o(T):f(T)},[o,u]),v=e.useCallback(()=>d?l(S=>!S):g(S=>!S),[d,g,l]),N=u?"expanded":"collapsed",y=e.useMemo(()=>({state:N,open:u,setOpen:g,isMobile:d,openMobile:m,setOpenMobile:l,toggleSidebar:v,side:a}),[N,u,g,d,m,l,v,a]);return e.createElement("div",{...b,ref:p,className:n("rt-SidebarProvider",i),"data-state":N,"data-side":a},e.createElement(M.Provider,{value:y},s))});I.displayName="Sidebar.Provider";const z=e.forwardRef((t,r)=>{const o=J(),{isMobile:a,state:i,openMobile:s,setOpenMobile:b}=H(),{size:p=P.size.default,variant:d=P.variant.default,menuVariant:m=P.menuVariant.default,type:l=P.type.default,side:c=P.side.default,collapsible:f=P.collapsible.default,panelBackground:u,color:g,highContrast:v=P.highContrast.default,asChild:N}=t,{className:y,children:S,...T}=te(t,P),{asChild:ae,panelBackground:ne,...B}=T,h=g||o.accentColor,q=typeof p=="object"?p.initial||"2":p,C=e.useContext(M);return C&&(C.side=c,C.type=l,C.variant=d,C.menuVariant=m,C.collapsible=f,C.size=q),f==="none"?e.createElement("div",{...B,ref:r,"data-accent-color":h,"data-state":i,"data-side":c,"data-type":l,"data-collapsible":f,className:n("rt-SidebarRoot",`rt-r-size-${p}`,y)},e.createElement(w,null,e.createElement("div",{className:n("rt-SidebarContainer",`rt-variant-${d}`),"data-accent-color":h,"data-high-contrast":v||void 0,"data-side":c,"data-panel-background":u},S))):a?e.createElement("div",{...B,ref:r,"data-accent-color":h,"data-state":s?"open":"closed","data-side":c,"data-type":l,"data-collapsible":f,className:n("rt-SidebarRoot","rt-SidebarRoot--mobile",y)},e.createElement(w,null,e.createElement("div",{className:n("rt-SidebarContainer",`rt-variant-${d}`,`rt-r-size-${p}`),"data-accent-color":h,"data-high-contrast":v||void 0,"data-side":c,"data-type":l,"data-collapsible":f,"data-panel-background":u},S))):e.createElement("div",{...B,ref:r,"data-accent-color":h,"data-state":i,"data-side":c,"data-type":l,"data-collapsible":f,className:n("rt-SidebarRoot",y)},e.createElement(w,null,e.createElement("div",{className:n("rt-SidebarContainer",`rt-variant-${d}`,`rt-r-size-${p}`),"data-accent-color":h,"data-high-contrast":v||void 0,"data-side":c,"data-type":l,"data-collapsible":f,"data-panel-background":u},S)))});z.displayName="Sidebar.Root";const E=e.forwardRef(({className:t,children:r,...o},a)=>{const i=e.useContext(M),{size:s="2",menuVariant:b="soft",type:p="sidebar",collapsible:d="none"}=i||{};return e.createElement(X,{type:"auto"},e.createElement("div",{...o,ref:a,className:n("rt-BaseMenuContent","rt-SidebarContent",`rt-r-size-${s}`,`rt-menu-variant-${b}`,t),"data-type":p,"data-collapsible":d},r))});E.displayName="Sidebar.Content";const G=e.forwardRef(({className:t,asContainer:r=!0,...o},a)=>{const i=e.useContext(M),{size:s="2",menuVariant:b="soft"}=i||{};return e.createElement("div",{...o,ref:a,className:n("rt-SidebarHeader",`rt-r-size-${s}`,`rt-menu-variant-${b}`,{"rt-SidebarHeader--container":r},t)})});G.displayName="Sidebar.Header";const W=e.forwardRef(({className:t,asContainer:r=!0,...o},a)=>{const i=e.useContext(M),{size:s="2",menuVariant:b="soft"}=i||{};return e.createElement("div",{...o,ref:a,className:n("rt-SidebarFooter",`rt-r-size-${s}`,`rt-menu-variant-${b}`,{"rt-SidebarFooter--container":r},t)})});W.displayName="Sidebar.Footer";const D=e.forwardRef(({onClick:t,children:r,...o},a)=>{const{toggleSidebar:i}=H();return e.createElement(Q,{...o,ref:a,variant:"ghost",onClick:s=>{t?.(s),i()}},r||e.createElement(Z,null))});D.displayName="Sidebar.Trigger";const A=e.forwardRef(({className:t,...r},o)=>e.createElement(Y,{...r,ref:o,className:n("rt-SidebarSeparator",t)}));A.displayName="Sidebar.Separator";const $=e.forwardRef(({className:t,...r},o)=>e.createElement("ul",{...r,ref:o,className:n("rt-BaseMenuViewport","rt-SidebarMenu",t)}));$.displayName="Sidebar.Menu";const O=e.forwardRef(({className:t,...r},o)=>e.createElement("li",{...r,ref:o,className:n("rt-SidebarMenuItem",t)}));O.displayName="Sidebar.MenuItem";const k=e.forwardRef(({asChild:t=!1,isActive:r=!1,shortcut:o,badge:a,className:i,children:s,onMouseEnter:b,onMouseLeave:p,...d},m)=>{const[l,c]=e.useState(!1),f=e.useContext(M),{size:u="2"}=f||{};return e.createElement(t?L:"button",{...d,ref:m,className:n("rt-reset","rt-BaseMenuItem","rt-SidebarMenuButton",i),"data-active":r||void 0,"data-highlighted":l||void 0,onMouseEnter:v=>{c(!0),b?.(v)},onMouseLeave:v=>{c(!1),p?.(v)}},t?s:e.createElement(e.Fragment,null,s,a&&e.createElement("div",{className:"rt-SidebarMenuBadge"},typeof a=="string"?e.createElement(R,{size:u,variant:"soft"},a):e.createElement(R,{size:a.size||u,variant:a.variant||"soft",color:a.color,highContrast:a.highContrast,radius:a.radius},a.content)),o&&e.createElement("div",{className:"rt-BaseMenuShortcut rt-SidebarMenuShortcut"},e.createElement(oe,{size:u},o))))});k.displayName="Sidebar.MenuButton";const V=e.forwardRef(({defaultOpen:t=!1,children:r,...o},a)=>e.createElement("div",{...o,ref:a},e.createElement(x.Root,{type:"single",collapsible:!0,defaultValue:t?"item":void 0},e.createElement(x.Item,{value:"item"},r))));V.displayName="Sidebar.MenuSub";const F=e.forwardRef(({asChild:t=!1,className:r,children:o,onMouseEnter:a,onMouseLeave:i,...s},b)=>{const[p,d]=e.useState(!1);return e.createElement(x.Header,{asChild:!0},e.createElement("div",null,e.createElement(x.Trigger,{...s,ref:b,asChild:t,className:n("rt-reset","rt-BaseMenuItem","rt-SidebarMenuButton","rt-SidebarMenuSubTrigger",r),"data-highlighted":p||void 0,onMouseEnter:m=>{d(!0),a?.(m)},onMouseLeave:m=>{d(!1),i?.(m)}},t?o:e.createElement(e.Fragment,null,o,e.createElement(ee,{className:n("rt-BaseMenuSubTriggerIcon","rt-SidebarMenuSubTriggerIcon")})))))});F.displayName="Sidebar.MenuSubTrigger";const j=e.forwardRef(({className:t,children:r,...o},a)=>e.createElement(x.Content,{...o,ref:a,className:n("rt-SidebarMenuSubContent",t)},e.createElement("div",{className:"rt-SidebarMenuSubList"},r)));j.displayName="Sidebar.MenuSubContent";const _=e.forwardRef(({className:t,...r},o)=>e.createElement("div",{...r,ref:o,className:n("rt-BaseMenuGroup","rt-SidebarGroup",t)}));_.displayName="Sidebar.Group";const K=e.forwardRef(({asChild:t=!1,className:r,...o},a)=>e.createElement(t?L:"div",{...o,ref:a,className:n("rt-BaseMenuLabel","rt-SidebarGroupLabel",r)}));K.displayName="Sidebar.GroupLabel";const U=e.forwardRef(({className:t,...r},o)=>e.createElement("div",{...r,ref:o,className:n("rt-SidebarGroupContent",t)}));U.displayName="Sidebar.GroupContent";export{E as Content,W as Footer,_ as Group,U as GroupContent,K as GroupLabel,G as Header,$ as Menu,k as MenuButton,O as MenuItem,V as MenuSub,j as MenuSubContent,F as MenuSubTrigger,I as Provider,z as Root,A as Separator,D as Trigger,H as useSidebar};
 //# sourceMappingURL=sidebar.js.map

package/dist/esm/components/sidebar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/sidebar.tsx"],
-  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from './slot.js';\nimport { Accordion } from 'radix-ui';\n\nimport { sidebarPropDefs } from './sidebar.props.js';\nimport { Theme, useThemeContext } from './theme.js';\nimport { IconButton } from './icon-button.js';\nimport { ScrollArea } from './scroll-area.js';\nimport { Separator } from './separator.js';\nimport { ChevronDownIcon, ThickChevronRightIcon } from './icons.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { Kbd } from './kbd.js';\nimport { Badge } from './badge.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\nimport type { BadgeProps } from './badge.js';\n\n// Badge configuration type for sidebar menu buttons\ntype BadgeConfig = {\n  content: React.ReactNode;\n  variant?: BadgeProps['variant'];\n  size?: BadgeProps['size'];\n  color?: BadgeProps['color'];\n  highContrast?: BadgeProps['highContrast'];\n  radius?: BadgeProps['radius'];\n};\n\n// Sidebar context for state management\ntype SidebarContextProps = {\n  state: 'expanded' | 'collapsed';\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  openMobile: boolean;\n  setOpenMobile: (open: boolean) => void;\n  isMobile: boolean;\n  toggleSidebar: () => void;\n  side: 'left' | 'right';\n  type: 'sidebar' | 'floating';\n  variant: 'soft' | 'surface' | 'ghost';\n  menuVariant: 'solid' | 'soft';\n  collapsible: 'offcanvas' | 'icon' | 'none';\n  size: '1' | '2';\n};\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext);\n  if (!context) {\n    throw new Error('useSidebar must be used within a SidebarProvider.');\n  }\n  return context;\n}\n\n// Hook to detect mobile (simplified version)\nfunction useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState(false);\n\n  React.useEffect(() => {\n    const checkIsMobile = () => {\n      setIsMobile(window.innerWidth < 768);\n    };\n\n    checkIsMobile();\n    window.addEventListener('resize', checkIsMobile);\n    return () => window.removeEventListener('resize', checkIsMobile);\n  }, []);\n\n  return isMobile;\n}\n\n// Provider component\ninterface SidebarProviderProps extends React.ComponentPropsWithoutRef<'div'> {\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  side?: 'left' | 'right';\n}\n\nconst SidebarProvider = React.forwardRef<HTMLDivElement, SidebarProviderProps>(\n  (\n    {\n      defaultOpen = true,\n      open: openProp,\n      onOpenChange: setOpenProp,\n      side = 'left',\n      className,\n      children,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const isMobile = useIsMobile();\n    const [openMobile, setOpenMobile] = React.useState(false);\n\n    // Internal state for uncontrolled mode\n    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n\n    // Use controlled state if provided, otherwise internal state\n    const open = openProp ?? internalOpen;\n\n    const setOpen = React.useCallback(\n      (value: boolean | ((value: boolean) => boolean)) => {\n        const openState = typeof value === 'function' ? value(open) : value;\n        if (setOpenProp) {\n          setOpenProp(openState);\n        } else {\n          setInternalOpen(openState);\n        }\n      },\n      [setOpenProp, open],\n    );\n\n    // Helper to toggle the sidebar\n    const toggleSidebar = React.useCallback(() => {\n      return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\n    }, [isMobile, setOpen, setOpenMobile]);\n\n    // State for data attributes\n    const state = open ? 'expanded' : 'collapsed';\n\n    const contextValue = React.useMemo<Partial<SidebarContextProps>>(\n      () => ({\n        state,\n        open,\n        setOpen,\n        isMobile,\n        openMobile,\n        setOpenMobile,\n        toggleSidebar,\n        side,\n      }),\n      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, side],\n    );\n\n    return (\n      <div\n        {...props}\n        ref={forwardedRef}\n        className={classNames('rt-SidebarProvider', className)}\n        data-state={state}\n        data-side={side}\n      >\n        <SidebarContext.Provider value={contextValue as SidebarContextProps}>\n          {children}\n        </SidebarContext.Provider>\n      </div>\n    );\n  },\n);\nSidebarProvider.displayName = 'Sidebar.Provider';\n\n// Main Sidebar component\ntype SidebarOwnProps = GetPropDefTypes<typeof sidebarPropDefs>;\ninterface SidebarProps extends ComponentPropsWithout<'div', RemovedProps>, SidebarOwnProps {}\n\nconst Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>((props, forwardedRef) => {\n  const themeContext = useThemeContext();\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n  const {\n    size = sidebarPropDefs.size.default,\n    variant = sidebarPropDefs.variant.default,\n    menuVariant = sidebarPropDefs.menuVariant.default,\n    type = sidebarPropDefs.type.default,\n    side = sidebarPropDefs.side.default,\n    collapsible = sidebarPropDefs.collapsible.default,\n    panelBackground,\n    color,\n    highContrast = sidebarPropDefs.highContrast.default,\n    asChild,\n  } = props;\n\n  const { className, children, ...rootProps } = extractProps(props, sidebarPropDefs);\n  const { asChild: _, panelBackground: __, ...safeRootProps } = rootProps; // Remove asChild and panelBackground from DOM props\n  const resolvedColor = color || themeContext.accentColor;\n\n  // Update context with current props - we'll pass the resolved values\n  const resolvedSize = typeof size === 'object' ? size.initial || '2' : size;\n  const context = React.useContext(SidebarContext);\n  if (context) {\n    context.side = side;\n    context.type = type;\n    context.variant = variant;\n    context.menuVariant = menuVariant;\n    context.collapsible = collapsible;\n    context.size = resolvedSize;\n  }\n\n  if (collapsible === 'none') {\n    return (\n      <div\n        {...safeRootProps}\n        ref={forwardedRef}\n        data-accent-color={resolvedColor}\n        data-state={state}\n        data-side={side}\n        data-type={type}\n        data-collapsible={collapsible}\n        className={classNames('rt-SidebarRoot', `rt-r-size-${size}`, className)}\n      >\n        <Theme>\n          <div\n            className={classNames('rt-SidebarContainer', `rt-variant-${variant}`)}\n            data-accent-color={resolvedColor}\n            data-high-contrast={highContrast || undefined}\n            data-side={side}\n            data-panel-background={panelBackground}\n          >\n            {children}\n          </div>\n        </Theme>\n      </div>\n    );\n  }\n\n  if (isMobile) {\n    return (\n      <div\n        {...safeRootProps}\n        ref={forwardedRef}\n        data-accent-color={resolvedColor}\n        data-state={openMobile ? 'open' : 'closed'}\n        data-side={side}\n        data-type={type}\n        data-collapsible={collapsible}\n        className={classNames('rt-SidebarRoot', 'rt-SidebarRoot--mobile', className)}\n      >\n        <Theme>\n          <div\n            className={classNames(\n              'rt-SidebarContainer',\n              `rt-variant-${variant}`,\n              `rt-r-size-${size}`,\n            )}\n            data-accent-color={resolvedColor}\n            data-high-contrast={highContrast || undefined}\n            data-side={side}\n            data-panel-background={panelBackground}\n          >\n            {children}\n          </div>\n        </Theme>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      {...safeRootProps}\n      ref={forwardedRef}\n      data-accent-color={resolvedColor}\n      data-state={state}\n      data-side={side}\n      data-type={type}\n      data-collapsible={collapsible}\n      className={classNames('rt-SidebarRoot', className)}\n    >\n      <Theme>\n        <div\n          className={classNames(\n            'rt-SidebarContainer',\n            `rt-variant-${variant}`,\n            `rt-r-size-${size}`,\n          )}\n          data-accent-color={resolvedColor}\n          data-high-contrast={highContrast || undefined}\n          data-side={side}\n          data-panel-background={panelBackground}\n        >\n          {children}\n        </div>\n      </Theme>\n    </div>\n  );\n});\nSidebar.displayName = 'Sidebar.Root';\n\n// Sidebar content area\ninterface SidebarContentProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarContent = React.forwardRef<HTMLDivElement, SidebarContentProps>(\n  ({ className, children, ...props }, forwardedRef) => {\n    const context = React.useContext(SidebarContext);\n    const { size = '2', menuVariant = 'soft' } = context || {};\n\n    return (\n      <ScrollArea type=\"auto\">\n        <div\n          {...props}\n          ref={forwardedRef}\n          className={classNames(\n            'rt-SidebarContent',\n            `rt-r-size-${size}`,\n            `rt-menu-variant-${menuVariant}`,\n            className,\n          )}\n        >\n          {children}\n        </div>\n      </ScrollArea>\n    );\n  },\n);\nSidebarContent.displayName = 'Sidebar.Content';\n\n// Sidebar header\ninterface SidebarHeaderProps extends React.ComponentPropsWithoutRef<'div'> {\n  /**\n   * Whether to use the default flex container layout.\n   * @default true\n   */\n  asContainer?: boolean;\n}\n\nconst SidebarHeader = React.forwardRef<HTMLDivElement, SidebarHeaderProps>(\n  ({ className, asContainer = true, ...props }, forwardedRef) => {\n    const context = React.useContext(SidebarContext);\n    const { size = '2', menuVariant = 'soft' } = context || {};\n\n    return (\n      <div\n        {...props}\n        ref={forwardedRef}\n        className={classNames(\n          'rt-SidebarHeader',\n          `rt-r-size-${size}`,\n          `rt-menu-variant-${menuVariant}`,\n          {\n            'rt-SidebarHeader--container': asContainer,\n          },\n          className,\n        )}\n      />\n    );\n  },\n);\nSidebarHeader.displayName = 'Sidebar.Header';\n\n// Sidebar footer\ninterface SidebarFooterProps extends React.ComponentPropsWithoutRef<'div'> {\n  /**\n   * Whether to use the default flex container layout.\n   * @default true\n   */\n  asContainer?: boolean;\n}\n\nconst SidebarFooter = React.forwardRef<HTMLDivElement, SidebarFooterProps>(\n  ({ className, asContainer = true, ...props }, forwardedRef) => {\n    const context = React.useContext(SidebarContext);\n    const { size = '2', menuVariant = 'soft' } = context || {};\n\n    return (\n      <div\n        {...props}\n        ref={forwardedRef}\n        className={classNames(\n          'rt-SidebarFooter',\n          `rt-r-size-${size}`,\n          `rt-menu-variant-${menuVariant}`,\n          {\n            'rt-SidebarFooter--container': asContainer,\n          },\n          className,\n        )}\n      />\n    );\n  },\n);\nSidebarFooter.displayName = 'Sidebar.Footer';\n\n// Sidebar trigger button\ninterface SidebarTriggerProps extends ComponentPropsWithout<typeof IconButton, RemovedProps> {}\n\nconst SidebarTrigger = React.forwardRef<React.ElementRef<typeof IconButton>, SidebarTriggerProps>(\n  ({ onClick, children, ...props }, forwardedRef) => {\n    const { toggleSidebar } = useSidebar();\n\n    return (\n      <IconButton\n        {...props}\n        ref={forwardedRef}\n        variant=\"ghost\"\n        onClick={(event) => {\n          onClick?.(event);\n          toggleSidebar();\n        }}\n      >\n        {children || <ChevronDownIcon />}\n      </IconButton>\n    );\n  },\n);\nSidebarTrigger.displayName = 'Sidebar.Trigger';\n\n// Removed SidebarInset - not needed\n\n// Sidebar separator\ninterface SidebarSeparatorProps extends ComponentPropsWithout<typeof Separator, RemovedProps> {}\n\nconst SidebarSeparator = React.forwardRef<\n  React.ComponentRef<typeof Separator>,\n  SidebarSeparatorProps\n>(({ className, ...props }, forwardedRef) => (\n  <Separator\n    {...props}\n    ref={forwardedRef}\n    className={classNames('rt-SidebarSeparator', className)}\n  />\n));\nSidebarSeparator.displayName = 'Sidebar.Separator';\n\n// Menu components - reusing dropdown menu structure\ninterface SidebarMenuProps extends React.ComponentPropsWithoutRef<'ul'> {}\n\nconst SidebarMenu = React.forwardRef<HTMLUListElement, SidebarMenuProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <ul {...props} ref={forwardedRef} className={classNames('rt-SidebarMenu', className)} />\n  ),\n);\nSidebarMenu.displayName = 'Sidebar.Menu';\n\ninterface SidebarMenuItemProps extends React.ComponentPropsWithoutRef<'li'> {}\n\nconst SidebarMenuItem = React.forwardRef<HTMLLIElement, SidebarMenuItemProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <li {...props} ref={forwardedRef} className={classNames('rt-SidebarMenuItem', className)} />\n  ),\n);\nSidebarMenuItem.displayName = 'Sidebar.MenuItem';\n\ninterface SidebarMenuButtonProps extends React.ComponentPropsWithoutRef<'button'> {\n  asChild?: boolean;\n  isActive?: boolean;\n  shortcut?: React.ReactNode;\n  badge?: string | BadgeConfig;\n}\n\nconst SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(\n  (\n    {\n      asChild = false,\n      isActive = false,\n      shortcut,\n      badge,\n      className,\n      children,\n      onMouseEnter,\n      onMouseLeave,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const [isHighlighted, setIsHighlighted] = React.useState(false);\n    const context = React.useContext(SidebarContext);\n    const { size: sidebarSize = '2' } = context || {};\n\n    const Comp = asChild ? Slot : 'button';\n\n    return (\n      <Comp\n        {...props}\n        ref={forwardedRef}\n        className={classNames('rt-reset', 'rt-SidebarMenuButton', className)}\n        data-active={isActive || undefined}\n        data-highlighted={isHighlighted || undefined}\n        onMouseEnter={(event) => {\n          setIsHighlighted(true);\n          onMouseEnter?.(event);\n        }}\n        onMouseLeave={(event) => {\n          setIsHighlighted(false);\n          onMouseLeave?.(event);\n        }}\n      >\n        {asChild ? (\n          children\n        ) : (\n          <>\n            {children}\n            {/* Badge with soft variant default and size mapping to sidebar size */}\n            {badge && (\n              <div className=\"rt-SidebarMenuBadge\">\n                {typeof badge === 'string' ? (\n                  <Badge size={sidebarSize} variant=\"soft\">\n                    {badge}\n                  </Badge>\n                ) : (\n                  <Badge\n                    size={badge.size || sidebarSize}\n                    variant={badge.variant || 'soft'}\n                    color={badge.color}\n                    highContrast={badge.highContrast}\n                    radius={badge.radius}\n                  >\n                    {badge.content}\n                  </Badge>\n                )}\n              </div>\n            )}\n            {shortcut && (\n              <div className=\"rt-BaseMenuShortcut rt-SidebarMenuShortcut\">\n                <Kbd size={sidebarSize}>{shortcut}</Kbd>\n              </div>\n            )}\n          </>\n        )}\n      </Comp>\n    );\n  },\n);\nSidebarMenuButton.displayName = 'Sidebar.MenuButton';\n\n// Sub-menu components using Radix Accordion\ninterface SidebarMenuSubProps extends React.ComponentPropsWithoutRef<'div'> {\n  defaultOpen?: boolean;\n}\n\nconst SidebarMenuSub = React.forwardRef<HTMLDivElement, SidebarMenuSubProps>(\n  ({ defaultOpen = false, children, ...props }, forwardedRef) => {\n    return (\n      <div {...props} ref={forwardedRef}>\n        <Accordion.Root type=\"single\" collapsible defaultValue={defaultOpen ? 'item' : undefined}>\n          <Accordion.Item value=\"item\">{children}</Accordion.Item>\n        </Accordion.Root>\n      </div>\n    );\n  },\n);\nSidebarMenuSub.displayName = 'Sidebar.MenuSub';\n\ninterface SidebarMenuSubTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof Accordion.Trigger> {\n  asChild?: boolean;\n}\n\nconst SidebarMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof Accordion.Trigger>,\n  SidebarMenuSubTriggerProps\n>(\n  (\n    { asChild = false, className, children, onMouseEnter, onMouseLeave, ...props },\n    forwardedRef,\n  ) => {\n    const [isHighlighted, setIsHighlighted] = React.useState(false);\n\n    return (\n      <Accordion.Header asChild>\n        <div>\n          <Accordion.Trigger\n            {...props}\n            ref={forwardedRef}\n            asChild={asChild}\n            className={classNames(\n              'rt-reset',\n              'rt-SidebarMenuButton',\n              'rt-SidebarMenuSubTrigger',\n              className,\n            )}\n            data-highlighted={isHighlighted || undefined}\n            onMouseEnter={(event) => {\n              setIsHighlighted(true);\n              onMouseEnter?.(event);\n            }}\n            onMouseLeave={(event) => {\n              setIsHighlighted(false);\n              onMouseLeave?.(event);\n            }}\n          >\n            {asChild ? (\n              children\n            ) : (\n              <>\n                {children}\n                <ThickChevronRightIcon\n                  className={classNames(\n                    'rt-BaseMenuSubTriggerIcon',\n                    'rt-SidebarMenuSubTriggerIcon',\n                  )}\n                />\n              </>\n            )}\n          </Accordion.Trigger>\n        </div>\n      </Accordion.Header>\n    );\n  },\n);\nSidebarMenuSubTrigger.displayName = 'Sidebar.MenuSubTrigger';\n\ninterface SidebarMenuSubContentProps\n  extends React.ComponentPropsWithoutRef<typeof Accordion.Content> {}\n\nconst SidebarMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof Accordion.Content>,\n  SidebarMenuSubContentProps\n>(({ className, children, ...props }, forwardedRef) => {\n  return (\n    <Accordion.Content\n      {...props}\n      ref={forwardedRef}\n      className={classNames('rt-SidebarMenuSubContent', className)}\n    >\n      <div className=\"rt-SidebarMenuSubList\">{children}</div>\n    </Accordion.Content>\n  );\n});\nSidebarMenuSubContent.displayName = 'Sidebar.MenuSubContent';\n\n// Group components\ninterface SidebarGroupProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarGroup = React.forwardRef<HTMLDivElement, SidebarGroupProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <div {...props} ref={forwardedRef} className={classNames('rt-SidebarGroup', className)} />\n  ),\n);\nSidebarGroup.displayName = 'Sidebar.Group';\n\ninterface SidebarGroupLabelProps extends React.ComponentPropsWithoutRef<'div'> {\n  asChild?: boolean;\n}\n\nconst SidebarGroupLabel = React.forwardRef<HTMLDivElement, SidebarGroupLabelProps>(\n  ({ asChild = false, className, ...props }, forwardedRef) => {\n    const Comp = asChild ? Slot : 'div';\n\n    return (\n      <Comp\n        {...props}\n        ref={forwardedRef}\n        className={classNames('rt-SidebarGroupLabel', className)}\n      />\n    );\n  },\n);\nSidebarGroupLabel.displayName = 'Sidebar.GroupLabel';\n\ninterface SidebarGroupContentProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarGroupContent = React.forwardRef<HTMLDivElement, SidebarGroupContentProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <div\n      {...props}\n      ref={forwardedRef}\n      className={classNames('rt-SidebarGroupContent', className)}\n    />\n  ),\n);\nSidebarGroupContent.displayName = 'Sidebar.GroupContent';\n\n// Export all components following shadcn's pattern\nexport {\n  SidebarProvider as Provider,\n  Sidebar as Root,\n  SidebarContent as Content,\n  SidebarHeader as Header,\n  SidebarFooter as Footer,\n  SidebarTrigger as Trigger,\n  SidebarSeparator as Separator,\n  SidebarMenu as Menu,\n  SidebarMenuItem as MenuItem,\n  SidebarMenuButton as MenuButton,\n  SidebarMenuSub as MenuSub,\n  SidebarMenuSubTrigger as MenuSubTrigger,\n  SidebarMenuSubContent as MenuSubContent,\n  SidebarGroup as Group,\n  SidebarGroupLabel as GroupLabel,\n  SidebarGroupContent as GroupContent,\n  // Export hook\n  useSidebar,\n};\n\n/**\n * Enhanced Sidebar Header and Footer Usage Examples:\n *\n * 1. Simple default container (backwards compatible):\n * <Sidebar.Header>\n *   <Logo />\n *   <span>App Name</span>\n * </Sidebar.Header>\n *\n * 2. Custom flex layout:\n * <Sidebar.Header className=\"rt-justify-between rt-gap-3\">\n *   <Logo />\n *   <Sidebar.MenuButton>\n *     <SettingsIcon />\n *   </Sidebar.MenuButton>\n * </Sidebar.Header>\n *\n * 3. Column layout for multiple rows:\n * <Sidebar.Header className=\"rt-flex-col rt-gap-2\" asContainer={false}>\n *   <div className=\"rt-flex rt-items-center rt-gap-2\">\n *     <Logo />\n *     <span>App Name</span>\n *   </div>\n *   <Sidebar.MenuButton>\n *     <UserAvatar />\n *     <span>John Doe</span>\n *   </Sidebar.MenuButton>\n * </Sidebar.Header>\n *\n * 4. Interactive footer with menu button:\n * <Sidebar.Footer>\n *   <Sidebar.MenuButton>\n *     <UserIcon />\n *     <span>Settings</span>\n *     <ChevronUpIcon />\n *   </Sidebar.MenuButton>\n * </Sidebar.Footer>\n *\n * 5. Custom footer layout:\n * <Sidebar.Footer className=\"rt-justify-between\">\n *   <span>v1.0.0</span>\n *   <Sidebar.MenuButton>\n *     <HelpIcon />\n *   </Sidebar.MenuButton>\n * </Sidebar.Footer>\n *\n * Available utility classes:\n * - Layout: rt-flex-row, rt-flex-col\n * - Alignment: rt-items-center, rt-items-start, rt-items-end\n * - Justification: rt-justify-between, rt-justify-center, rt-justify-start, rt-justify-end\n * - Gap: rt-gap-1, rt-gap-2, rt-gap-3, rt-gap-4\n */\n\nexport type {\n  SidebarProviderProps as ProviderProps,\n  SidebarProps as RootProps,\n  SidebarContentProps as ContentProps,\n  SidebarHeaderProps as HeaderProps,\n  SidebarFooterProps as FooterProps,\n  SidebarTriggerProps as TriggerProps,\n  BadgeConfig,\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from './slot.js';\nimport { Accordion } from 'radix-ui';\n\nimport { sidebarPropDefs } from './sidebar.props.js';\nimport { Theme, useThemeContext } from './theme.js';\nimport { IconButton } from './icon-button.js';\nimport { ScrollArea } from './scroll-area.js';\nimport { Separator } from './separator.js';\nimport { ChevronDownIcon, ThickChevronRightIcon } from './icons.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { Kbd } from './kbd.js';\nimport { Badge } from './badge.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\nimport type { BadgeProps } from './badge.js';\n\n// Badge configuration type for sidebar menu buttons\ntype BadgeConfig = {\n  content: React.ReactNode;\n  variant?: BadgeProps['variant'];\n  size?: BadgeProps['size'];\n  color?: BadgeProps['color'];\n  highContrast?: BadgeProps['highContrast'];\n  radius?: BadgeProps['radius'];\n};\n\n// Sidebar context for state management\ntype SidebarContextProps = {\n  state: 'expanded' | 'collapsed';\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  openMobile: boolean;\n  setOpenMobile: (open: boolean) => void;\n  isMobile: boolean;\n  toggleSidebar: () => void;\n  side: 'left' | 'right';\n  type: 'sidebar' | 'floating';\n  variant: 'soft' | 'surface' | 'ghost';\n  menuVariant: 'solid' | 'soft';\n  collapsible: 'offcanvas' | 'icon' | 'none';\n  size: '1' | '2';\n};\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext);\n  if (!context) {\n    throw new Error('useSidebar must be used within a SidebarProvider.');\n  }\n  return context;\n}\n\n// Hook to detect mobile (simplified version)\nfunction useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState(false);\n\n  React.useEffect(() => {\n    const checkIsMobile = () => {\n      setIsMobile(window.innerWidth < 768);\n    };\n\n    checkIsMobile();\n    window.addEventListener('resize', checkIsMobile);\n    return () => window.removeEventListener('resize', checkIsMobile);\n  }, []);\n\n  return isMobile;\n}\n\n// Provider component\ninterface SidebarProviderProps extends React.ComponentPropsWithoutRef<'div'> {\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  side?: 'left' | 'right';\n}\n\nconst SidebarProvider = React.forwardRef<HTMLDivElement, SidebarProviderProps>(\n  (\n    {\n      defaultOpen = true,\n      open: openProp,\n      onOpenChange: setOpenProp,\n      side = 'left',\n      className,\n      children,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const isMobile = useIsMobile();\n    const [openMobile, setOpenMobile] = React.useState(false);\n\n    // Internal state for uncontrolled mode\n    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n\n    // Use controlled state if provided, otherwise internal state\n    const open = openProp ?? internalOpen;\n\n    const setOpen = React.useCallback(\n      (value: boolean | ((value: boolean) => boolean)) => {\n        const openState = typeof value === 'function' ? value(open) : value;\n        if (setOpenProp) {\n          setOpenProp(openState);\n        } else {\n          setInternalOpen(openState);\n        }\n      },\n      [setOpenProp, open],\n    );\n\n    // Helper to toggle the sidebar\n    const toggleSidebar = React.useCallback(() => {\n      return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\n    }, [isMobile, setOpen, setOpenMobile]);\n\n    // State for data attributes\n    const state = open ? 'expanded' : 'collapsed';\n\n    const contextValue = React.useMemo<Partial<SidebarContextProps>>(\n      () => ({\n        state,\n        open,\n        setOpen,\n        isMobile,\n        openMobile,\n        setOpenMobile,\n        toggleSidebar,\n        side,\n      }),\n      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, side],\n    );\n\n    return (\n      <div\n        {...props}\n        ref={forwardedRef}\n        className={classNames('rt-SidebarProvider', className)}\n        data-state={state}\n        data-side={side}\n      >\n        <SidebarContext.Provider value={contextValue as SidebarContextProps}>\n          {children}\n        </SidebarContext.Provider>\n      </div>\n    );\n  },\n);\nSidebarProvider.displayName = 'Sidebar.Provider';\n\n// Main Sidebar component\ntype SidebarOwnProps = GetPropDefTypes<typeof sidebarPropDefs>;\ninterface SidebarProps extends ComponentPropsWithout<'div', RemovedProps>, SidebarOwnProps {}\n\nconst Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>((props, forwardedRef) => {\n  const themeContext = useThemeContext();\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n  const {\n    size = sidebarPropDefs.size.default,\n    variant = sidebarPropDefs.variant.default,\n    menuVariant = sidebarPropDefs.menuVariant.default,\n    type = sidebarPropDefs.type.default,\n    side = sidebarPropDefs.side.default,\n    collapsible = sidebarPropDefs.collapsible.default,\n    panelBackground,\n    color,\n    highContrast = sidebarPropDefs.highContrast.default,\n    asChild,\n  } = props;\n\n  const { className, children, ...rootProps } = extractProps(props, sidebarPropDefs);\n  const { asChild: _, panelBackground: __, ...safeRootProps } = rootProps; // Remove asChild and panelBackground from DOM props\n  const resolvedColor = color || themeContext.accentColor;\n\n  // Update context with current props - we'll pass the resolved values\n  const resolvedSize = typeof size === 'object' ? size.initial || '2' : size;\n  const context = React.useContext(SidebarContext);\n  if (context) {\n    context.side = side;\n    context.type = type;\n    context.variant = variant;\n    context.menuVariant = menuVariant;\n    context.collapsible = collapsible;\n    context.size = resolvedSize;\n  }\n\n  if (collapsible === 'none') {\n    return (\n      <div\n        {...safeRootProps}\n        ref={forwardedRef}\n        data-accent-color={resolvedColor}\n        data-state={state}\n        data-side={side}\n        data-type={type}\n        data-collapsible={collapsible}\n        className={classNames('rt-SidebarRoot', `rt-r-size-${size}`, className)}\n      >\n        <Theme>\n          <div\n            className={classNames('rt-SidebarContainer', `rt-variant-${variant}`)}\n            data-accent-color={resolvedColor}\n            data-high-contrast={highContrast || undefined}\n            data-side={side}\n            data-panel-background={panelBackground}\n          >\n            {children}\n          </div>\n        </Theme>\n      </div>\n    );\n  }\n\n  if (isMobile) {\n    return (\n      <div\n        {...safeRootProps}\n        ref={forwardedRef}\n        data-accent-color={resolvedColor}\n        data-state={openMobile ? 'open' : 'closed'}\n        data-side={side}\n        data-type={type}\n        data-collapsible={collapsible}\n        className={classNames('rt-SidebarRoot', 'rt-SidebarRoot--mobile', className)}\n      >\n        <Theme>\n          <div\n            className={classNames(\n              'rt-SidebarContainer',\n              `rt-variant-${variant}`,\n              `rt-r-size-${size}`,\n            )}\n            data-accent-color={resolvedColor}\n            data-high-contrast={highContrast || undefined}\n            data-side={side}\n            data-type={type}\n            data-collapsible={collapsible}\n            data-panel-background={panelBackground}\n          >\n            {children}\n          </div>\n        </Theme>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      {...safeRootProps}\n      ref={forwardedRef}\n      data-accent-color={resolvedColor}\n      data-state={state}\n      data-side={side}\n      data-type={type}\n      data-collapsible={collapsible}\n      className={classNames('rt-SidebarRoot', className)}\n    >\n      <Theme>\n        <div\n          className={classNames(\n            'rt-SidebarContainer',\n            `rt-variant-${variant}`,\n            `rt-r-size-${size}`,\n          )}\n          data-accent-color={resolvedColor}\n          data-high-contrast={highContrast || undefined}\n          data-side={side}\n          data-type={type}\n          data-collapsible={collapsible}\n          data-panel-background={panelBackground}\n        >\n          {children}\n        </div>\n      </Theme>\n    </div>\n  );\n});\nSidebar.displayName = 'Sidebar.Root';\n\n// Sidebar content area\ninterface SidebarContentProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarContent = React.forwardRef<HTMLDivElement, SidebarContentProps>(\n  ({ className, children, ...props }, forwardedRef) => {\n    const context = React.useContext(SidebarContext);\n    const {\n      size = '2',\n      menuVariant = 'soft',\n      type = 'sidebar',\n      collapsible = 'none',\n    } = context || {};\n\n    return (\n      <ScrollArea type=\"auto\">\n        <div\n          {...props}\n          ref={forwardedRef}\n          className={classNames(\n            'rt-BaseMenuContent',\n            'rt-SidebarContent',\n            `rt-r-size-${size}`,\n            `rt-menu-variant-${menuVariant}`,\n            className,\n          )}\n          data-type={type}\n          data-collapsible={collapsible}\n        >\n          {children}\n        </div>\n      </ScrollArea>\n    );\n  },\n);\nSidebarContent.displayName = 'Sidebar.Content';\n\n// Sidebar header\ninterface SidebarHeaderProps extends React.ComponentPropsWithoutRef<'div'> {\n  /**\n   * Whether to use the default flex container layout.\n   * @default true\n   */\n  asContainer?: boolean;\n}\n\nconst SidebarHeader = React.forwardRef<HTMLDivElement, SidebarHeaderProps>(\n  ({ className, asContainer = true, ...props }, forwardedRef) => {\n    const context = React.useContext(SidebarContext);\n    const { size = '2', menuVariant = 'soft' } = context || {};\n\n    return (\n      <div\n        {...props}\n        ref={forwardedRef}\n        className={classNames(\n          'rt-SidebarHeader',\n          `rt-r-size-${size}`,\n          `rt-menu-variant-${menuVariant}`,\n          {\n            'rt-SidebarHeader--container': asContainer,\n          },\n          className,\n        )}\n      />\n    );\n  },\n);\nSidebarHeader.displayName = 'Sidebar.Header';\n\n// Sidebar footer\ninterface SidebarFooterProps extends React.ComponentPropsWithoutRef<'div'> {\n  /**\n   * Whether to use the default flex container layout.\n   * @default true\n   */\n  asContainer?: boolean;\n}\n\nconst SidebarFooter = React.forwardRef<HTMLDivElement, SidebarFooterProps>(\n  ({ className, asContainer = true, ...props }, forwardedRef) => {\n    const context = React.useContext(SidebarContext);\n    const { size = '2', menuVariant = 'soft' } = context || {};\n\n    return (\n      <div\n        {...props}\n        ref={forwardedRef}\n        className={classNames(\n          'rt-SidebarFooter',\n          `rt-r-size-${size}`,\n          `rt-menu-variant-${menuVariant}`,\n          {\n            'rt-SidebarFooter--container': asContainer,\n          },\n          className,\n        )}\n      />\n    );\n  },\n);\nSidebarFooter.displayName = 'Sidebar.Footer';\n\n// Sidebar trigger button\ninterface SidebarTriggerProps extends ComponentPropsWithout<typeof IconButton, RemovedProps> {}\n\nconst SidebarTrigger = React.forwardRef<React.ElementRef<typeof IconButton>, SidebarTriggerProps>(\n  ({ onClick, children, ...props }, forwardedRef) => {\n    const { toggleSidebar } = useSidebar();\n\n    return (\n      <IconButton\n        {...props}\n        ref={forwardedRef}\n        variant=\"ghost\"\n        onClick={(event) => {\n          onClick?.(event);\n          toggleSidebar();\n        }}\n      >\n        {children || <ChevronDownIcon />}\n      </IconButton>\n    );\n  },\n);\nSidebarTrigger.displayName = 'Sidebar.Trigger';\n\n// Removed SidebarInset - not needed\n\n// Sidebar separator\ninterface SidebarSeparatorProps extends ComponentPropsWithout<typeof Separator, RemovedProps> {}\n\nconst SidebarSeparator = React.forwardRef<\n  React.ComponentRef<typeof Separator>,\n  SidebarSeparatorProps\n>(({ className, ...props }, forwardedRef) => (\n  <Separator\n    {...props}\n    ref={forwardedRef}\n    className={classNames('rt-SidebarSeparator', className)}\n  />\n));\nSidebarSeparator.displayName = 'Sidebar.Separator';\n\n// Menu components - reusing dropdown menu structure\ninterface SidebarMenuProps extends React.ComponentPropsWithoutRef<'ul'> {}\n\nconst SidebarMenu = React.forwardRef<HTMLUListElement, SidebarMenuProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <ul\n      {...props}\n      ref={forwardedRef}\n      className={classNames('rt-BaseMenuViewport', 'rt-SidebarMenu', className)}\n    />\n  ),\n);\nSidebarMenu.displayName = 'Sidebar.Menu';\n\ninterface SidebarMenuItemProps extends React.ComponentPropsWithoutRef<'li'> {}\n\nconst SidebarMenuItem = React.forwardRef<HTMLLIElement, SidebarMenuItemProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <li {...props} ref={forwardedRef} className={classNames('rt-SidebarMenuItem', className)} />\n  ),\n);\nSidebarMenuItem.displayName = 'Sidebar.MenuItem';\n\ninterface SidebarMenuButtonProps extends React.ComponentPropsWithoutRef<'button'> {\n  asChild?: boolean;\n  isActive?: boolean;\n  shortcut?: React.ReactNode;\n  badge?: string | BadgeConfig;\n}\n\nconst SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(\n  (\n    {\n      asChild = false,\n      isActive = false,\n      shortcut,\n      badge,\n      className,\n      children,\n      onMouseEnter,\n      onMouseLeave,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const [isHighlighted, setIsHighlighted] = React.useState(false);\n    const context = React.useContext(SidebarContext);\n    const { size: sidebarSize = '2' } = context || {};\n\n    const Comp = asChild ? Slot : 'button';\n\n    return (\n      <Comp\n        {...props}\n        ref={forwardedRef}\n        className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-SidebarMenuButton', className)}\n        data-active={isActive || undefined}\n        data-highlighted={isHighlighted || undefined}\n        onMouseEnter={(event) => {\n          setIsHighlighted(true);\n          onMouseEnter?.(event);\n        }}\n        onMouseLeave={(event) => {\n          setIsHighlighted(false);\n          onMouseLeave?.(event);\n        }}\n      >\n        {asChild ? (\n          children\n        ) : (\n          <>\n            {children}\n            {/* Badge with soft variant default and size mapping to sidebar size */}\n            {badge && (\n              <div className=\"rt-SidebarMenuBadge\">\n                {typeof badge === 'string' ? (\n                  <Badge size={sidebarSize} variant=\"soft\">\n                    {badge}\n                  </Badge>\n                ) : (\n                  <Badge\n                    size={badge.size || sidebarSize}\n                    variant={badge.variant || 'soft'}\n                    color={badge.color}\n                    highContrast={badge.highContrast}\n                    radius={badge.radius}\n                  >\n                    {badge.content}\n                  </Badge>\n                )}\n              </div>\n            )}\n            {shortcut && (\n              <div className=\"rt-BaseMenuShortcut rt-SidebarMenuShortcut\">\n                <Kbd size={sidebarSize}>{shortcut}</Kbd>\n              </div>\n            )}\n          </>\n        )}\n      </Comp>\n    );\n  },\n);\nSidebarMenuButton.displayName = 'Sidebar.MenuButton';\n\n// Sub-menu components using Radix Accordion\ninterface SidebarMenuSubProps extends React.ComponentPropsWithoutRef<'div'> {\n  defaultOpen?: boolean;\n}\n\nconst SidebarMenuSub = React.forwardRef<HTMLDivElement, SidebarMenuSubProps>(\n  ({ defaultOpen = false, children, ...props }, forwardedRef) => {\n    return (\n      <div {...props} ref={forwardedRef}>\n        <Accordion.Root type=\"single\" collapsible defaultValue={defaultOpen ? 'item' : undefined}>\n          <Accordion.Item value=\"item\">{children}</Accordion.Item>\n        </Accordion.Root>\n      </div>\n    );\n  },\n);\nSidebarMenuSub.displayName = 'Sidebar.MenuSub';\n\ninterface SidebarMenuSubTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof Accordion.Trigger> {\n  asChild?: boolean;\n}\n\nconst SidebarMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof Accordion.Trigger>,\n  SidebarMenuSubTriggerProps\n>(\n  (\n    { asChild = false, className, children, onMouseEnter, onMouseLeave, ...props },\n    forwardedRef,\n  ) => {\n    const [isHighlighted, setIsHighlighted] = React.useState(false);\n\n    return (\n      <Accordion.Header asChild>\n        <div>\n          <Accordion.Trigger\n            {...props}\n            ref={forwardedRef}\n            asChild={asChild}\n            className={classNames(\n              'rt-reset',\n              'rt-BaseMenuItem',\n              'rt-SidebarMenuButton',\n              'rt-SidebarMenuSubTrigger',\n              className,\n            )}\n            data-highlighted={isHighlighted || undefined}\n            onMouseEnter={(event) => {\n              setIsHighlighted(true);\n              onMouseEnter?.(event);\n            }}\n            onMouseLeave={(event) => {\n              setIsHighlighted(false);\n              onMouseLeave?.(event);\n            }}\n          >\n            {asChild ? (\n              children\n            ) : (\n              <>\n                {children}\n                <ThickChevronRightIcon\n                  className={classNames(\n                    'rt-BaseMenuSubTriggerIcon',\n                    'rt-SidebarMenuSubTriggerIcon',\n                  )}\n                />\n              </>\n            )}\n          </Accordion.Trigger>\n        </div>\n      </Accordion.Header>\n    );\n  },\n);\nSidebarMenuSubTrigger.displayName = 'Sidebar.MenuSubTrigger';\n\ninterface SidebarMenuSubContentProps\n  extends React.ComponentPropsWithoutRef<typeof Accordion.Content> {}\n\nconst SidebarMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof Accordion.Content>,\n  SidebarMenuSubContentProps\n>(({ className, children, ...props }, forwardedRef) => {\n  return (\n    <Accordion.Content\n      {...props}\n      ref={forwardedRef}\n      className={classNames('rt-SidebarMenuSubContent', className)}\n    >\n      <div className=\"rt-SidebarMenuSubList\">{children}</div>\n    </Accordion.Content>\n  );\n});\nSidebarMenuSubContent.displayName = 'Sidebar.MenuSubContent';\n\n// Group components\ninterface SidebarGroupProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarGroup = React.forwardRef<HTMLDivElement, SidebarGroupProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <div\n      {...props}\n      ref={forwardedRef}\n      className={classNames('rt-BaseMenuGroup', 'rt-SidebarGroup', className)}\n    />\n  ),\n);\nSidebarGroup.displayName = 'Sidebar.Group';\n\ninterface SidebarGroupLabelProps extends React.ComponentPropsWithoutRef<'div'> {\n  asChild?: boolean;\n}\n\nconst SidebarGroupLabel = React.forwardRef<HTMLDivElement, SidebarGroupLabelProps>(\n  ({ asChild = false, className, ...props }, forwardedRef) => {\n    const Comp = asChild ? Slot : 'div';\n\n    return (\n      <Comp\n        {...props}\n        ref={forwardedRef}\n        className={classNames('rt-BaseMenuLabel', 'rt-SidebarGroupLabel', className)}\n      />\n    );\n  },\n);\nSidebarGroupLabel.displayName = 'Sidebar.GroupLabel';\n\ninterface SidebarGroupContentProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarGroupContent = React.forwardRef<HTMLDivElement, SidebarGroupContentProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <div\n      {...props}\n      ref={forwardedRef}\n      className={classNames('rt-SidebarGroupContent', className)}\n    />\n  ),\n);\nSidebarGroupContent.displayName = 'Sidebar.GroupContent';\n\n// Export all components following shadcn's pattern\nexport {\n  SidebarProvider as Provider,\n  Sidebar as Root,\n  SidebarContent as Content,\n  SidebarHeader as Header,\n  SidebarFooter as Footer,\n  SidebarTrigger as Trigger,\n  SidebarSeparator as Separator,\n  SidebarMenu as Menu,\n  SidebarMenuItem as MenuItem,\n  SidebarMenuButton as MenuButton,\n  SidebarMenuSub as MenuSub,\n  SidebarMenuSubTrigger as MenuSubTrigger,\n  SidebarMenuSubContent as MenuSubContent,\n  SidebarGroup as Group,\n  SidebarGroupLabel as GroupLabel,\n  SidebarGroupContent as GroupContent,\n  // Export hook\n  useSidebar,\n};\n\n/**\n * Enhanced Sidebar Header and Footer Usage Examples:\n *\n * 1. Simple default container (backwards compatible):\n * <Sidebar.Header>\n *   <Logo />\n *   <span>App Name</span>\n * </Sidebar.Header>\n *\n * 2. Custom flex layout:\n * <Sidebar.Header className=\"rt-justify-between rt-gap-3\">\n *   <Logo />\n *   <Sidebar.MenuButton>\n *     <SettingsIcon />\n *   </Sidebar.MenuButton>\n * </Sidebar.Header>\n *\n * 3. Column layout for multiple rows:\n * <Sidebar.Header className=\"rt-flex-col rt-gap-2\" asContainer={false}>\n *   <div className=\"rt-flex rt-items-center rt-gap-2\">\n *     <Logo />\n *     <span>App Name</span>\n *   </div>\n *   <Sidebar.MenuButton>\n *     <UserAvatar />\n *     <span>John Doe</span>\n *   </Sidebar.MenuButton>\n * </Sidebar.Header>\n *\n * 4. Interactive footer with menu button:\n * <Sidebar.Footer>\n *   <Sidebar.MenuButton>\n *     <UserIcon />\n *     <span>Settings</span>\n *     <ChevronUpIcon />\n *   </Sidebar.MenuButton>\n * </Sidebar.Footer>\n *\n * 5. Custom footer layout:\n * <Sidebar.Footer className=\"rt-justify-between\">\n *   <span>v1.0.0</span>\n *   <Sidebar.MenuButton>\n *     <HelpIcon />\n *   </Sidebar.MenuButton>\n * </Sidebar.Footer>\n *\n * Available utility classes:\n * - Layout: rt-flex-row, rt-flex-col\n * - Alignment: rt-items-center, rt-items-start, rt-items-end\n * - Justification: rt-justify-between, rt-justify-center, rt-justify-start, rt-justify-end\n * - Gap: rt-gap-1, rt-gap-2, rt-gap-3, rt-gap-4\n */\n\nexport type {\n  SidebarProviderProps as ProviderProps,\n  SidebarProps as RootProps,\n  SidebarContentProps as ContentProps,\n  SidebarHeaderProps as HeaderProps,\n  SidebarFooterProps as FooterProps,\n  SidebarTriggerProps as TriggerProps,\n  BadgeConfig,\n};\n"],
+  "mappings": "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",
   "names": ["React", "classNames", "Slot", "Accordion", "sidebarPropDefs", "Theme", "useThemeContext", "IconButton", "ScrollArea", "Separator", "ChevronDownIcon", "ThickChevronRightIcon", "extractProps", "Kbd", "Badge", "SidebarContext", "useSidebar", "context", "useIsMobile", "isMobile", "setIsMobile", "checkIsMobile", "SidebarProvider", "defaultOpen", "openProp", "setOpenProp", "side", "className", "children", "props", "forwardedRef", "openMobile", "setOpenMobile", "internalOpen", "setInternalOpen", "open", "setOpen", "value", "openState", "toggleSidebar", "state", "contextValue", "Sidebar", "themeContext", "size", "variant", "menuVariant", "type", "collapsible", "panelBackground", "color", "highContrast", "asChild", "rootProps", "_", "__", "safeRootProps", "resolvedColor", "resolvedSize", "SidebarContent", "SidebarHeader", "asContainer", "SidebarFooter", "SidebarTrigger", "onClick", "event", "SidebarSeparator", "SidebarMenu", "SidebarMenuItem", "SidebarMenuButton", "isActive", "shortcut", "badge", "onMouseEnter", "onMouseLeave", "isHighlighted", "setIsHighlighted", "sidebarSize", "SidebarMenuSub", "SidebarMenuSubTrigger", "SidebarMenuSubContent", "SidebarGroup", "SidebarGroupLabel", "SidebarGroupContent"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kushagradhawan/kookie-ui",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive docs",
   "keywords": [
     "react",

package/src/components/image.css

@@ -60,6 +60,10 @@
 /* Blur variant wrapper */
 .rt-variant-blur {
   position: relative;
+}
+
+/* Blur variant when used with asChild - use inline-block for proper sizing */
+.rt-variant-blur--as-child {
   display: inline-block;
 }
 
@@ -93,28 +97,14 @@
   box-shadow: var(--box-shadow) !important;
 }
 
-/* Blur background image */
+/* Blur background image - simplified */
 .rt-Image--blur-bg {
-  position: absolute;
-  top: var(--blur-offset-y, 8px);
-  left: var(--blur-offset-x, 0);
-  filter: var(--blur-filter);
-  opacity: var(--blur-opacity);
-  z-index: -1;
-}
-
-/* Blur variant CSS variables */
-.rt-variant-blur {
-  --blur-filter: blur(16px) saturate(1.5);
-  --blur-opacity: 0.5;
-  --blur-offset-y: 8px;
-  --blur-offset-x: 0;
+  /* No additional styles needed - all handled inline */
 }
 
-/* Image inside blur variant gets positioned */
+/* Image inside blur variant - simplified */
 .rt-Image--blur {
-  position: relative;
-  z-index: 1;
+  /* No additional styles needed - all handled inline */
 }
 
 /* Object fit variants */

package/src/components/image.tsx

@@ -79,7 +79,7 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
     onLoad: userOnLoad,
     onError: userOnError,
     children,
-    ...imgProps
+    ...wrapperProps
   } = extractProps(
     restProps,
     imagePropDefs,
@@ -97,7 +97,7 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
   // Ref to check if image is already loaded (for cached images)
   const imgRef = React.useRef<HTMLImageElement>(null);
 
-  // Handle image load - moved to top to avoid conditional hook call
+  // Handle image load
   const handleLoad = React.useCallback(
     (event: React.SyntheticEvent<HTMLImageElement>) => {
       setImageLoaded(true);
@@ -108,7 +108,7 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
     [userOnLoad],
   );
 
-  // Handle image error - moved to top to avoid conditional hook call
+  // Handle image error
   const handleError = React.useCallback(
     (event: React.SyntheticEvent<HTMLImageElement>) => {
       setImageLoaded(false);
@@ -139,14 +139,30 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
     console.warn('Image component: alt prop is required for accessibility when not using asChild');
   }
 
+  // Common image styles that apply to the actual img element
+  const imgStyle: React.CSSProperties = {
+    width: '100%',
+    height: '100%',
+    display: 'block',
+    opacity: fadeIn ? (imageLoaded ? 1 : 0) : 1,
+    transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',
+    ...style, // Allow style overrides for the image
+  };
+
+  // Wrapper styles that get all the sizing and positioning
+  const wrapperStyleFinal: React.CSSProperties = {
+    position: 'relative',
+    display: 'block', // Use block instead of inline-block to work better with AspectRatio
+    ...wrapperStyle,
+  };
+
   // Create skeleton placeholder
   const skeletonElement =
     showSkeleton && !imageLoaded && !imageError ? (
       <Skeleton
         width="100%"
-        height="100px" // Default height, can be overridden by style
+        height="100px" // Default height, can be overridden by wrapper
         style={{
-          ...style,
           borderRadius: radius ? `var(--radius-${radius})` : undefined,
         }}
         className={className}
@@ -159,7 +175,7 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
       <img
         data-radius={radius}
         style={{
-          ...style,
+          ...imgStyle,
           filter: 'blur(4px)',
           opacity: 0.7,
           transition: 'opacity 0.3s ease-out',
@@ -170,51 +186,7 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
       />
     ) : null;
 
-  // Create the standard img element
-  const imgElement = (
-    <img
-      data-radius={radius}
-      loading={loading}
-      style={{
-        ...style,
-        opacity: fadeIn ? (imageLoaded ? (style?.opacity ?? 1) : 0) : (style?.opacity ?? 1),
-        transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',
-      }}
-      className={classNames(
-        'rt-reset',
-        'rt-Image',
-        variant === 'blur' && 'rt-Image--blur',
-        className,
-      )}
-      alt={alt}
-      src={src}
-      onLoad={handleLoad}
-      onError={handleError}
-      {...imgProps}
-      ref={(node) => {
-        imgRef.current = node;
-        if (typeof forwardedRef === 'function') {
-          forwardedRef(node);
-        } else if (forwardedRef) {
-          forwardedRef.current = node;
-        }
-      }}
-    />
-  );
-
-  // Wrapper for images with placeholders
-  const imageWithPlaceholder =
-    placeholder || showSkeleton ? (
-      <Box position="relative" display="inline-block" style={wrapperStyle}>
-        {skeletonElement}
-        {placeholderElement}
-        {imgElement}
-      </Box>
-    ) : (
-      imgElement
-    );
-
-  // Handle asChild - inject img into the child element
+  // Handle asChild - inject content into the child element
   if (asChild && children) {
     const child = React.Children.only(children) as React.ReactElement<any>;
 
@@ -223,55 +195,48 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
       return React.cloneElement(child, {
         className: classNames(child.props?.className, 'rt-variant-blur'),
         style: {
-          textDecoration: 'none', // Reset link underlines
-          color: 'inherit', // Reset link colors
-          border: 'none', // Reset button borders
-          background: 'none', // Reset button backgrounds
-          padding: 0, // Reset button padding
-          font: 'inherit', // Reset button fonts
-          cursor: 'pointer', // Ensure interactive cursor
+          textDecoration: 'none',
+          color: 'inherit',
+          border: 'none',
+          background: 'none',
+          padding: 0,
+          font: 'inherit',
+          cursor: 'pointer',
+          ...wrapperStyleFinal,
+          ...style, // Apply sizing to the child element
           ...child.props?.style,
         },
         children: (
-          <Box position="relative" display="inline-block" style={wrapperStyle}>
+          <>
             {/* Background blurred image */}
             <img
               data-radius={radius}
               loading={loading}
               style={{
-                ...style,
                 position: 'absolute',
-                top: '8px',
+                top: '0',
                 left: '0',
+                width: '105%',
+                height: '105%',
+                transform: 'translate(-2.5%, -2.5%)',
+                filter: 'blur(16px) saturate(1.5)',
+                opacity: 0.5,
+                zIndex: -1,
               }}
-              className={classNames(
-                'rt-reset',
-                'rt-Image',
-                'rt-Image--blur',
-                'rt-Image--blur-bg',
-                className,
-              )}
+              className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur-bg', className)}
               alt=""
               src={src}
-              {...imgProps}
             />
             {/* Foreground image */}
             <img
               data-radius={radius}
               loading={loading}
-              style={{
-                ...style,
-                position: 'relative',
-                zIndex: 1,
-                opacity: fadeIn ? (imageLoaded ? (style?.opacity ?? 1) : 0) : (style?.opacity ?? 1),
-                transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',
-              }}
+              style={imgStyle}
               className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}
               alt={alt}
               src={src}
               onLoad={handleLoad}
               onError={handleError}
-              {...imgProps}
               ref={(node) => {
                 imgRef.current = node;
                 if (typeof forwardedRef === 'function') {
@@ -281,7 +246,7 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
                 }
               }}
             />
-          </Box>
+          </>
         ),
       });
     } else {
@@ -289,68 +254,84 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
       return React.cloneElement(child, {
         className: classNames(child.props?.className),
         style: {
-          textDecoration: 'none', // Reset link underlines
-          color: 'inherit', // Reset link colors
-          border: 'none', // Reset button borders
-          background: 'none', // Reset button backgrounds
-          padding: 0, // Reset button padding
-          font: 'inherit', // Reset button fonts
-          cursor: 'pointer', // Ensure interactive cursor
-          display: 'inline-block', // Ensure proper sizing
-          ...child.props?.style, // Allow user overrides
+          textDecoration: 'none',
+          color: 'inherit',
+          border: 'none',
+          background: 'none',
+          padding: 0,
+          font: 'inherit',
+          cursor: 'pointer',
+          ...wrapperStyleFinal,
+          ...child.props?.style,
         },
-        children: imageWithPlaceholder,
+        children: (
+          <>
+            {skeletonElement}
+            {placeholderElement}
+            <img
+              data-radius={radius}
+              loading={loading}
+              style={imgStyle}
+              className={classNames('rt-reset', 'rt-Image', className)}
+              alt={alt}
+              src={src}
+              onLoad={handleLoad}
+              onError={handleError}
+              ref={(node) => {
+                imgRef.current = node;
+                if (typeof forwardedRef === 'function') {
+                  forwardedRef(node);
+                } else if (forwardedRef) {
+                  forwardedRef.current = node;
+                }
+              }}
+            />
+          </>
+        ),
       });
     }
   }
 
-  // Regular rendering without asChild
+  // Regular rendering without asChild - both variants use Box wrapper
   if (variant === 'blur') {
     return (
       <Box
-        className="rt-variant-blur"
-        position="relative"
-        display="inline-block"
-        style={wrapperStyle}
+        className={classNames('rt-variant-blur', className)}
+        style={{
+          ...style, // Include the width/height styles from extractProps
+          ...wrapperStyleFinal,
+        }}
+        {...wrapperProps} // Apply other props to wrapper
       >
         {/* Background blurred image */}
         <img
           data-radius={radius}
           loading={loading}
           style={{
-            ...style,
             position: 'absolute',
-            top: '8px',
+            top: '0',
             left: '0',
+            width: '105%',
+            height: '105%',
+            transform: 'translate(-2.5%, -2.5%)',
+            filter: 'blur(16px) saturate(1.5)',
+            opacity: 0.5,
+            zIndex: -1,
           }}
-          className={classNames(
-            'rt-reset',
-            'rt-Image',
-            'rt-Image--blur',
-            'rt-Image--blur-bg',
-            className,
-          )}
+          className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur-bg', className)}
           alt=""
           src={src}
-          {...imgProps}
         />
         {/* Foreground image */}
         <img
           data-radius={radius}
           loading={loading}
-          style={{
-            ...style,
-            position: 'relative',
-            zIndex: 1,
-            opacity: fadeIn ? (imageLoaded ? (style?.opacity ?? 1) : 0) : (style?.opacity ?? 1),
-            transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',
-          }}
+          style={imgStyle}
           className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}
           alt={alt}
           src={src}
           onLoad={handleLoad}
           onError={handleError}
-          {...imgProps}
           ref={(node) => {
             imgRef.current = node;
             if (typeof forwardedRef === 'function') {
@@ -364,7 +345,38 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
     );
   }
 
-  return imageWithPlaceholder;
+  // Surface variant - also use Box wrapper for consistency
+  return (
+    <Box
+      className={className}
+      style={{
+        ...style, // Include the width/height styles from extractProps
+        ...wrapperStyleFinal,
+      }}
+      {...wrapperProps} // Apply other props to wrapper
+    >
+      {skeletonElement}
+      {placeholderElement}
+      <img
+        data-radius={radius}
+        loading={loading}
+        style={imgStyle}
+        className={classNames('rt-reset', 'rt-Image', className)}
+        alt={alt}
+        src={src}
+        onLoad={handleLoad}
+        onError={handleError}
+        ref={(node) => {
+          imgRef.current = node;
+          if (typeof forwardedRef === 'function') {
+            forwardedRef(node);
+          } else if (forwardedRef) {
+            forwardedRef.current = node;
+          }
+        }}
+      />
+    </Box>
+  );
 });
 
 Image.displayName = 'Image';