@kushagradhawan/kookie-ui 0.1.21 → 0.1.23

package/dist/esm/components/_internal/base-radio.props.d.ts

@@ -19,8 +19,8 @@ declare const baseRadioPropDefs: {
     variant: {
         type: "enum";
         className: string;
-        values: readonly ["classic", "surface", "soft"];
-        default: "surface";
+        values: readonly ["classic", "solid", "soft"];
+        default: "solid";
     };
 };
 export { baseRadioPropDefs };

package/dist/esm/components/_internal/base-radio.props.js

@@ -1,2 +1,2 @@
-import{colorPropDef as s}from"../../props/color.prop.js";import{highContrastPropDef as e}from"../../props/high-contrast.prop.js";const r=["1","2","3"],o=["classic","surface","soft"],t={size:{type:"enum",className:"rt-r-size",values:r,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:o,default:"surface"},...s,...e};export{t as baseRadioPropDefs};
+import{colorPropDef as s}from"../../props/color.prop.js";import{highContrastPropDef as e}from"../../props/high-contrast.prop.js";const o=["1","2","3"],r=["classic","solid","soft"],t={size:{type:"enum",className:"rt-r-size",values:o,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:r,default:"solid"},...s,...e};export{t as baseRadioPropDefs};
 //# sourceMappingURL=base-radio.props.js.map

package/dist/esm/components/_internal/base-radio.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/_internal/base-radio.props.ts"],
-  "sourcesContent": ["import { colorPropDef } from '../../props/color.prop.js';\nimport { highContrastPropDef } from '../../props/high-contrast.prop.js';\n\nimport type { PropDef } from '../../props/prop-def.js';\n\nconst sizes = ['1', '2', '3'] as const;\nconst variants = ['classic', 'surface', 'soft'] as const;\n\nconst baseRadioPropDefs = {\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },\n  ...colorPropDef,\n  ...highContrastPropDef,\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n};\n\nexport { baseRadioPropDefs };\n"],
-  "mappings": "AAAA,OAAS,gBAAAA,MAAoB,4BAC7B,OAAS,uBAAAC,MAA2B,oCAIpC,MAAMC,EAAQ,CAAC,IAAK,IAAK,GAAG,EACtBC,EAAW,CAAC,UAAW,UAAW,MAAM,EAExCC,EAAoB,CACxB,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQF,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,EACvF,GAAGH,EACH,GAAGC,CACL",
+  "sourcesContent": ["import { colorPropDef } from '../../props/color.prop.js';\nimport { highContrastPropDef } from '../../props/high-contrast.prop.js';\n\nimport type { PropDef } from '../../props/prop-def.js';\n\nconst sizes = ['1', '2', '3'] as const;\nconst variants = ['classic', 'solid', 'soft'] as const;\n\nconst baseRadioPropDefs = {\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'solid' },\n  ...colorPropDef,\n  ...highContrastPropDef,\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n};\n\nexport { baseRadioPropDefs };\n"],
+  "mappings": "AAAA,OAAS,gBAAAA,MAAoB,4BAC7B,OAAS,uBAAAC,MAA2B,oCAIpC,MAAMC,EAAQ,CAAC,IAAK,IAAK,GAAG,EACtBC,EAAW,CAAC,UAAW,QAAS,MAAM,EAEtCC,EAAoB,CACxB,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQF,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,OAAQ,EACrF,GAAGH,EACH,GAAGC,CACL",
   "names": ["colorPropDef", "highContrastPropDef", "sizes", "variants", "baseRadioPropDefs"]
 }

package/dist/esm/components/checkbox-cards.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-cards.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox-cards.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C,OAAO,KAAK,sBAAsB,MAAM,+BAA+B,CAAC;AAExE,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAOtE,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAc,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAmBxE,KAAK,yBAAyB,GAAG,eAAe,CAAC,OAAO,yBAAyB,CAAC,CAAC;AACnF,UAAU,sBACR,SAAQ,qBAAqB,CACzB,OAAO,sBAAsB,CAAC,IAAI,EAClC,SAAS,GAAG,OAAO,GAAG,gBAAgB,CACvC,EACD,WAAW,EACX,yBAAyB;CAAG;AAChC,QAAA,MAAM,iBAAiB,+FA0BtB,CAAC;AAIF,UAAU,sBACR,SAAQ,qBAAqB,CAAC,OAAO,sBAAsB,CAAC,IAAI,EAAE,YAAY,CAAC,EAC7E,WAAW;CAAG;AAClB,QAAA,MAAM,iBAAiB;2BAxD4B,OAAO,CAAC,KAAK;2CA4F9D,CAAC;AAGH,OAAO,EAAE,iBAAiB,IAAI,IAAI,EAAE,iBAAiB,IAAI,IAAI,EAAE,CAAC;AAChE,YAAY,EAAE,sBAAsB,IAAI,SAAS,EAAE,sBAAsB,IAAI,SAAS,EAAE,CAAC"}
+{"version":3,"file":"checkbox-cards.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox-cards.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C,OAAO,KAAK,sBAAsB,MAAM,+BAA+B,CAAC;AAExE,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAQtE,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAc,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAmBxE,KAAK,yBAAyB,GAAG,eAAe,CAAC,OAAO,yBAAyB,CAAC,CAAC;AACnF,UAAU,sBACR,SAAQ,qBAAqB,CACzB,OAAO,sBAAsB,CAAC,IAAI,EAClC,SAAS,GAAG,OAAO,GAAG,gBAAgB,CACvC,EACD,WAAW,EACX,yBAAyB;CAAG;AAChC,QAAA,MAAM,iBAAiB,+FA+BtB,CAAC;AAIF,UAAU,sBACR,SAAQ,qBAAqB,CAAC,OAAO,sBAAsB,CAAC,IAAI,EAAE,YAAY,CAAC,EAC7E,WAAW;CAAG;AAClB,QAAA,MAAM,iBAAiB;2BA7D4B,OAAO,CAAC,KAAK;2CAkG9D,CAAC;AAGH,OAAO,EAAE,iBAAiB,IAAI,IAAI,EAAE,iBAAiB,IAAI,IAAI,EAAE,CAAC;AAChE,YAAY,EAAE,sBAAsB,IAAI,SAAS,EAAE,sBAAsB,IAAI,SAAS,EAAE,CAAC"}

package/dist/esm/components/checkbox-cards.js

@@ -1,2 +1,2 @@
-"use client";import*as o from"react";import a from"classnames";import{Context as f}from"radix-ui/internal";import*as m from"./checkbox-group.primitive.js";import{createCheckboxGroupScope as h}from"./checkbox-group.primitive.js";import{checkboxCardsRootPropDefs as l}from"./checkbox-cards.props.js";import{baseCheckboxPropDefs as R}from"./_internal/base-checkbox.props.js";import{Grid as u}from"./grid.js";import{ThickCheckIcon as y}from"./icons.js";import{extractProps as n}from"../helpers/extract-props.js";import{marginPropDefs as I}from"../props/margin.props.js";const x="CheckboxCards",[G]=f.createContextScope(x,[h]),d=h(),[v,N]=G(x),b=o.forwardRef((e,s)=>{const{__scopeCheckboxCards:r,className:c,color:p,...C}=n(e,l,I),t=d(r);return o.createElement(v,{scope:r,size:e.size,highContrast:e.highContrast},o.createElement(u,{asChild:!0},o.createElement(m.Root,{...t,"data-accent-color":p,...C,ref:s,className:a("rt-CheckboxCardsRoot",c)})))});b.displayName="CheckboxCards.Root";const k=o.forwardRef(({__scopeCheckboxCards:e,children:s,className:r,style:c,...p},C)=>{const t=N("CheckboxCardsItem",e),i=d(e),{className:P}=n({size:t?.size,variant:"surface",highContrast:t?.highContrast},R);return o.createElement("label",{className:a("rt-BaseCard","rt-CheckboxCardsItem",r),style:c},s,o.createElement(m.Item,{...i,...p,ref:C,className:a("rt-reset","rt-BaseCheckboxRoot","rt-CheckboxCardCheckbox",P)},o.createElement(m.Indicator,{...i,asChild:!0,className:"rt-BaseCheckboxIndicator"},o.createElement(y,null))))});k.displayName="CheckboxCards.Item";export{k as Item,b as Root};
+"use client";import*as o from"react";import n from"classnames";import{Context as l}from"radix-ui/internal";import*as i from"./checkbox-group.primitive.js";import{createCheckboxGroupScope as h}from"./checkbox-group.primitive.js";import{checkboxCardsRootPropDefs as u}from"./checkbox-cards.props.js";import{baseCheckboxPropDefs as R}from"./_internal/base-checkbox.props.js";import{Grid as y}from"./grid.js";import{ThickCheckIcon as I}from"./icons.js";import{extractProps as d}from"../helpers/extract-props.js";import{marginPropDefs as G}from"../props/margin.props.js";import{useThemeContext as g}from"./theme.js";const x="CheckboxCards",[v]=l.createContextScope(x,[h]),k=h(),[N,S]=v(x),b=o.forwardRef((e,s)=>{const a=g(),c=e.panelBackground??a.panelBackground,{__scopeCheckboxCards:r,className:p,color:t,panelBackground:C,...m}=d(e,u,G),f=k(r);return o.createElement(N,{scope:r,size:e.size,highContrast:e.highContrast},o.createElement(y,{asChild:!0},o.createElement(i.Root,{...f,"data-accent-color":t,"data-panel-background":c,...m,ref:s,className:n("rt-CheckboxCardsRoot",p)})))});b.displayName="CheckboxCards.Root";const P=o.forwardRef(({__scopeCheckboxCards:e,children:s,className:a,style:c,...r},p)=>{const t=S("CheckboxCardsItem",e),C=k(e),{className:m}=d({size:t?.size,variant:"solid",highContrast:t?.highContrast},R);return o.createElement("label",{className:n("rt-BaseCard","rt-CheckboxCardsItem",a),style:c},s,o.createElement(i.Item,{...C,...r,ref:p,className:n("rt-reset","rt-BaseCheckboxRoot","rt-CheckboxCardCheckbox",m)},o.createElement(i.Indicator,{...C,asChild:!0,className:"rt-BaseCheckboxIndicator"},o.createElement(I,null))))});P.displayName="CheckboxCards.Item";export{P as Item,b as Root};
 //# sourceMappingURL=checkbox-cards.js.map

package/dist/esm/components/checkbox-cards.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/checkbox-cards.tsx"],
-  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Context } from 'radix-ui/internal';\n\nimport * as CheckboxGroupPrimitive from './checkbox-group.primitive.js';\nimport { createCheckboxGroupScope } from './checkbox-group.primitive.js';\nimport { checkboxCardsRootPropDefs } from './checkbox-cards.props.js';\nimport { baseCheckboxPropDefs } from './_internal/base-checkbox.props.js';\nimport { Grid } from './grid.js';\nimport { ThickCheckIcon } from './icons.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { Responsive, GetPropDefTypes } from '../props/prop-def.js';\n\nconst CHECKBOX_CARD_GROUP_NAME = 'CheckboxCards';\n\ntype ScopedProps<P> = P & { __scopeCheckboxCards?: Context.Scope };\nconst [createCheckboxCardsContext] = Context.createContextScope(CHECKBOX_CARD_GROUP_NAME, [\n  createCheckboxGroupScope,\n]);\nconst useCheckboxGroupScope = createCheckboxGroupScope();\n\ntype CheckboxCardsContextValue = {\n  size?: Responsive<(typeof checkboxCardsRootPropDefs.size.values)[number]>;\n  highContrast?: boolean;\n};\n\nconst [CheckboxCardsProvider, useCheckboxCardsContext] =\n  createCheckboxCardsContext<CheckboxCardsContextValue>(CHECKBOX_CARD_GROUP_NAME);\n\ntype CheckboxCardsRootElement = React.ElementRef<typeof CheckboxGroupPrimitive.Root>;\ntype CheckboxCardsRootOwnProps = GetPropDefTypes<typeof checkboxCardsRootPropDefs>;\ninterface CheckboxCardsRootProps\n  extends ComponentPropsWithout<\n      typeof CheckboxGroupPrimitive.Root,\n      'asChild' | 'color' | 'defaultChecked'\n    >,\n    MarginProps,\n    CheckboxCardsRootOwnProps {}\nconst CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCardsRootProps>(\n  (props: ScopedProps<CheckboxCardsRootProps>, forwardedRef) => {\n    const { __scopeCheckboxCards, className, color, ...rootProps } = extractProps(\n      props,\n      checkboxCardsRootPropDefs,\n      marginPropDefs,\n    );\n    const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxCards);\n    return (\n      <CheckboxCardsProvider\n        scope={__scopeCheckboxCards}\n        size={props.size}\n        highContrast={props.highContrast}\n      >\n        <Grid asChild>\n          <CheckboxGroupPrimitive.Root\n            {...checkboxGroupScope}\n            data-accent-color={color}\n            {...rootProps}\n            ref={forwardedRef}\n            className={classNames('rt-CheckboxCardsRoot', className)}\n          />\n        </Grid>\n      </CheckboxCardsProvider>\n    );\n  },\n);\nCheckboxCardsRoot.displayName = 'CheckboxCards.Root';\n\ntype CheckboxCardsItemElement = React.ElementRef<typeof CheckboxGroupPrimitive.Item>;\ninterface CheckboxCardsItemProps\n  extends ComponentPropsWithout<typeof CheckboxGroupPrimitive.Item, RemovedProps>,\n    MarginProps {}\nconst CheckboxCardsItem = React.forwardRef<\n  CheckboxCardsItemElement,\n  ScopedProps<CheckboxCardsItemProps>\n>(({ __scopeCheckboxCards, children, className, style, ...props }, forwardedRef) => {\n  const context = useCheckboxCardsContext('CheckboxCardsItem', __scopeCheckboxCards);\n  const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxCards);\n  const { className: checkboxClassName } = extractProps(\n    // Pass size / highContrast values from the context and static variant to generate styles\n    { size: context?.size, variant: 'surface', highContrast: context?.highContrast },\n    // Pass size & variant prop defs to allow it to be extracted\n    baseCheckboxPropDefs,\n  );\n  return (\n    <label className={classNames('rt-BaseCard', 'rt-CheckboxCardsItem', className)} style={style}>\n      {children}\n      <CheckboxGroupPrimitive.Item\n        {...checkboxGroupScope}\n        {...props}\n        ref={forwardedRef}\n        className={classNames(\n          'rt-reset',\n          'rt-BaseCheckboxRoot',\n          'rt-CheckboxCardCheckbox',\n          checkboxClassName,\n        )}\n      >\n        <CheckboxGroupPrimitive.Indicator\n          {...checkboxGroupScope}\n          asChild\n          className=\"rt-BaseCheckboxIndicator\"\n        >\n          <ThickCheckIcon />\n        </CheckboxGroupPrimitive.Indicator>\n      </CheckboxGroupPrimitive.Item>\n    </label>\n  );\n});\nCheckboxCardsItem.displayName = 'CheckboxCards.Item';\n\nexport { CheckboxCardsRoot as Root, CheckboxCardsItem as Item };\nexport type { CheckboxCardsRootProps as RootProps, CheckboxCardsItemProps as ItemProps };\n"],
-  "mappings": "aAEA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aACvB,OAAS,WAAAC,MAAe,oBAExB,UAAYC,MAA4B,gCACxC,OAAS,4BAAAC,MAAgC,gCACzC,OAAS,6BAAAC,MAAiC,4BAC1C,OAAS,wBAAAC,MAA4B,qCACrC,OAAS,QAAAC,MAAY,YACrB,OAAS,kBAAAC,MAAsB,aAC/B,OAAS,gBAAAC,MAAoB,8BAC7B,OAAS,kBAAAC,MAAsB,2BAM/B,MAAMC,EAA2B,gBAG3B,CAACC,CAA0B,EAAIV,EAAQ,mBAAmBS,EAA0B,CACxFP,CACF,CAAC,EACKS,EAAwBT,EAAyB,EAOjD,CAACU,EAAuBC,CAAuB,EACnDH,EAAsDD,CAAwB,EAW1EK,EAAoBhB,EAAM,WAC9B,CAACiB,EAA4CC,IAAiB,CAC5D,KAAM,CAAE,qBAAAC,EAAsB,UAAAC,EAAW,MAAAC,EAAO,GAAGC,CAAU,EAAIb,EAC/DQ,EACAZ,EACAK,CACF,EACMa,EAAqBV,EAAsBM,CAAoB,EACrE,OACEnB,EAAA,cAACc,EAAA,CACC,MAAOK,EACP,KAAMF,EAAM,KACZ,aAAcA,EAAM,cAEpBjB,EAAA,cAACO,EAAA,CAAK,QAAO,IACXP,EAAA,cAACG,EAAuB,KAAvB,CACE,GAAGoB,EACJ,oBAAmBF,EAClB,GAAGC,EACJ,IAAKJ,EACL,UAAWjB,EAAW,uBAAwBmB,CAAS,EACzD,CACF,CACF,CAEJ,CACF,EACAJ,EAAkB,YAAc,qBAMhC,MAAMQ,EAAoBxB,EAAM,WAG9B,CAAC,CAAE,qBAAAmB,EAAsB,SAAAM,EAAU,UAAAL,EAAW,MAAAM,EAAO,GAAGT,CAAM,EAAGC,IAAiB,CAClF,MAAMS,EAAUZ,EAAwB,oBAAqBI,CAAoB,EAC3EI,EAAqBV,EAAsBM,CAAoB,EAC/D,CAAE,UAAWS,CAAkB,EAAInB,EAEvC,CAAE,KAAMkB,GAAS,KAAM,QAAS,UAAW,aAAcA,GAAS,YAAa,EAE/ErB,CACF,EACA,OACEN,EAAA,cAAC,SAAM,UAAWC,EAAW,cAAe,uBAAwBmB,CAAS,EAAG,MAAOM,GACpFD,EACDzB,EAAA,cAACG,EAAuB,KAAvB,CACE,GAAGoB,EACH,GAAGN,EACJ,IAAKC,EACL,UAAWjB,EACT,WACA,sBACA,0BACA2B,CACF,GAEA5B,EAAA,cAACG,EAAuB,UAAvB,CACE,GAAGoB,EACJ,QAAO,GACP,UAAU,4BAEVvB,EAAA,cAACQ,EAAA,IAAe,CAClB,CACF,CACF,CAEJ,CAAC,EACDgB,EAAkB,YAAc",
-  "names": ["React", "classNames", "Context", "CheckboxGroupPrimitive", "createCheckboxGroupScope", "checkboxCardsRootPropDefs", "baseCheckboxPropDefs", "Grid", "ThickCheckIcon", "extractProps", "marginPropDefs", "CHECKBOX_CARD_GROUP_NAME", "createCheckboxCardsContext", "useCheckboxGroupScope", "CheckboxCardsProvider", "useCheckboxCardsContext", "CheckboxCardsRoot", "props", "forwardedRef", "__scopeCheckboxCards", "className", "color", "rootProps", "checkboxGroupScope", "CheckboxCardsItem", "children", "style", "context", "checkboxClassName"]
+  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Context } from 'radix-ui/internal';\n\nimport * as CheckboxGroupPrimitive from './checkbox-group.primitive.js';\nimport { createCheckboxGroupScope } from './checkbox-group.primitive.js';\nimport { checkboxCardsRootPropDefs } from './checkbox-cards.props.js';\nimport { baseCheckboxPropDefs } from './_internal/base-checkbox.props.js';\nimport { Grid } from './grid.js';\nimport { ThickCheckIcon } from './icons.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\nimport { useThemeContext } from './theme.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { Responsive, GetPropDefTypes } from '../props/prop-def.js';\n\nconst CHECKBOX_CARD_GROUP_NAME = 'CheckboxCards';\n\ntype ScopedProps<P> = P & { __scopeCheckboxCards?: Context.Scope };\nconst [createCheckboxCardsContext] = Context.createContextScope(CHECKBOX_CARD_GROUP_NAME, [\n  createCheckboxGroupScope,\n]);\nconst useCheckboxGroupScope = createCheckboxGroupScope();\n\ntype CheckboxCardsContextValue = {\n  size?: Responsive<(typeof checkboxCardsRootPropDefs.size.values)[number]>;\n  highContrast?: boolean;\n};\n\nconst [CheckboxCardsProvider, useCheckboxCardsContext] =\n  createCheckboxCardsContext<CheckboxCardsContextValue>(CHECKBOX_CARD_GROUP_NAME);\n\ntype CheckboxCardsRootElement = React.ElementRef<typeof CheckboxGroupPrimitive.Root>;\ntype CheckboxCardsRootOwnProps = GetPropDefTypes<typeof checkboxCardsRootPropDefs>;\ninterface CheckboxCardsRootProps\n  extends ComponentPropsWithout<\n      typeof CheckboxGroupPrimitive.Root,\n      'asChild' | 'color' | 'defaultChecked'\n    >,\n    MarginProps,\n    CheckboxCardsRootOwnProps {}\nconst CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCardsRootProps>(\n  (props: ScopedProps<CheckboxCardsRootProps>, forwardedRef) => {\n    const themeContext = useThemeContext();\n    const panelBackground = props.panelBackground ?? themeContext.panelBackground;\n    const {\n      __scopeCheckboxCards,\n      className,\n      color,\n      panelBackground: _,\n      ...rootProps\n    } = extractProps(props, checkboxCardsRootPropDefs, marginPropDefs);\n    const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxCards);\n    return (\n      <CheckboxCardsProvider\n        scope={__scopeCheckboxCards}\n        size={props.size}\n        highContrast={props.highContrast}\n      >\n        <Grid asChild>\n          <CheckboxGroupPrimitive.Root\n            {...checkboxGroupScope}\n            data-accent-color={color}\n            data-panel-background={panelBackground}\n            {...rootProps}\n            ref={forwardedRef}\n            className={classNames('rt-CheckboxCardsRoot', className)}\n          />\n        </Grid>\n      </CheckboxCardsProvider>\n    );\n  },\n);\nCheckboxCardsRoot.displayName = 'CheckboxCards.Root';\n\ntype CheckboxCardsItemElement = React.ElementRef<typeof CheckboxGroupPrimitive.Item>;\ninterface CheckboxCardsItemProps\n  extends ComponentPropsWithout<typeof CheckboxGroupPrimitive.Item, RemovedProps>,\n    MarginProps {}\nconst CheckboxCardsItem = React.forwardRef<\n  CheckboxCardsItemElement,\n  ScopedProps<CheckboxCardsItemProps>\n>(({ __scopeCheckboxCards, children, className, style, ...props }, forwardedRef) => {\n  const context = useCheckboxCardsContext('CheckboxCardsItem', __scopeCheckboxCards);\n  const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxCards);\n\n  const { className: checkboxClassName } = extractProps(\n    // Pass size / highContrast values from the context and static variant to generate styles\n    { size: context?.size, variant: 'solid', highContrast: context?.highContrast },\n    // Pass size & variant prop defs to allow it to be extracted\n    baseCheckboxPropDefs,\n  );\n  return (\n    <label className={classNames('rt-BaseCard', 'rt-CheckboxCardsItem', className)} style={style}>\n      {children}\n      <CheckboxGroupPrimitive.Item\n        {...checkboxGroupScope}\n        {...props}\n        ref={forwardedRef}\n        className={classNames(\n          'rt-reset',\n          'rt-BaseCheckboxRoot',\n          'rt-CheckboxCardCheckbox',\n          checkboxClassName,\n        )}\n      >\n        <CheckboxGroupPrimitive.Indicator\n          {...checkboxGroupScope}\n          asChild\n          className=\"rt-BaseCheckboxIndicator\"\n        >\n          <ThickCheckIcon />\n        </CheckboxGroupPrimitive.Indicator>\n      </CheckboxGroupPrimitive.Item>\n    </label>\n  );\n});\nCheckboxCardsItem.displayName = 'CheckboxCards.Item';\n\nexport { CheckboxCardsRoot as Root, CheckboxCardsItem as Item };\nexport type { CheckboxCardsRootProps as RootProps, CheckboxCardsItemProps as ItemProps };\n"],
+  "mappings": "aAEA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aACvB,OAAS,WAAAC,MAAe,oBAExB,UAAYC,MAA4B,gCACxC,OAAS,4BAAAC,MAAgC,gCACzC,OAAS,6BAAAC,MAAiC,4BAC1C,OAAS,wBAAAC,MAA4B,qCACrC,OAAS,QAAAC,MAAY,YACrB,OAAS,kBAAAC,MAAsB,aAC/B,OAAS,gBAAAC,MAAoB,8BAC7B,OAAS,kBAAAC,MAAsB,2BAC/B,OAAS,mBAAAC,MAAuB,aAMhC,MAAMC,EAA2B,gBAG3B,CAACC,CAA0B,EAAIX,EAAQ,mBAAmBU,EAA0B,CACxFR,CACF,CAAC,EACKU,EAAwBV,EAAyB,EAOjD,CAACW,EAAuBC,CAAuB,EACnDH,EAAsDD,CAAwB,EAW1EK,EAAoBjB,EAAM,WAC9B,CAACkB,EAA4CC,IAAiB,CAC5D,MAAMC,EAAeT,EAAgB,EAC/BU,EAAkBH,EAAM,iBAAmBE,EAAa,gBACxD,CACJ,qBAAAE,EACA,UAAAC,EACA,MAAAC,EACA,gBAAiBC,EACjB,GAAGC,CACL,EAAIjB,EAAaS,EAAOb,EAA2BK,CAAc,EAC3DiB,EAAqBb,EAAsBQ,CAAoB,EACrE,OACEtB,EAAA,cAACe,EAAA,CACC,MAAOO,EACP,KAAMJ,EAAM,KACZ,aAAcA,EAAM,cAEpBlB,EAAA,cAACO,EAAA,CAAK,QAAO,IACXP,EAAA,cAACG,EAAuB,KAAvB,CACE,GAAGwB,EACJ,oBAAmBH,EACnB,wBAAuBH,EACtB,GAAGK,EACJ,IAAKP,EACL,UAAWlB,EAAW,uBAAwBsB,CAAS,EACzD,CACF,CACF,CAEJ,CACF,EACAN,EAAkB,YAAc,qBAMhC,MAAMW,EAAoB5B,EAAM,WAG9B,CAAC,CAAE,qBAAAsB,EAAsB,SAAAO,EAAU,UAAAN,EAAW,MAAAO,EAAO,GAAGZ,CAAM,EAAGC,IAAiB,CAClF,MAAMY,EAAUf,EAAwB,oBAAqBM,CAAoB,EAC3EK,EAAqBb,EAAsBQ,CAAoB,EAE/D,CAAE,UAAWU,CAAkB,EAAIvB,EAEvC,CAAE,KAAMsB,GAAS,KAAM,QAAS,QAAS,aAAcA,GAAS,YAAa,EAE7EzB,CACF,EACA,OACEN,EAAA,cAAC,SAAM,UAAWC,EAAW,cAAe,uBAAwBsB,CAAS,EAAG,MAAOO,GACpFD,EACD7B,EAAA,cAACG,EAAuB,KAAvB,CACE,GAAGwB,EACH,GAAGT,EACJ,IAAKC,EACL,UAAWlB,EACT,WACA,sBACA,0BACA+B,CACF,GAEAhC,EAAA,cAACG,EAAuB,UAAvB,CACE,GAAGwB,EACJ,QAAO,GACP,UAAU,4BAEV3B,EAAA,cAACQ,EAAA,IAAe,CAClB,CACF,CACF,CAEJ,CAAC,EACDoB,EAAkB,YAAc",
+  "names": ["React", "classNames", "Context", "CheckboxGroupPrimitive", "createCheckboxGroupScope", "checkboxCardsRootPropDefs", "baseCheckboxPropDefs", "Grid", "ThickCheckIcon", "extractProps", "marginPropDefs", "useThemeContext", "CHECKBOX_CARD_GROUP_NAME", "createCheckboxCardsContext", "useCheckboxGroupScope", "CheckboxCardsProvider", "useCheckboxCardsContext", "CheckboxCardsRoot", "props", "forwardedRef", "themeContext", "panelBackground", "__scopeCheckboxCards", "className", "color", "_", "rootProps", "checkboxGroupScope", "CheckboxCardsItem", "children", "style", "context", "checkboxClassName"]
 }

package/dist/esm/components/checkbox-cards.props.d.ts

@@ -39,6 +39,11 @@ declare const checkboxCardsRootPropDefs: {
         values: readonly ["surface", "classic"];
         default: "surface";
     };
+    panelBackground: {
+        type: "enum";
+        values: readonly ["solid", "translucent"];
+        default: undefined;
+    };
     asChild: {
         type: "boolean";
     };

package/dist/esm/components/checkbox-cards.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-cards.props.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox-cards.props.tsx"],"names":[],"mappings":"AAUA,QAAA,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAa9B,CAAC;AAEF,OAAO,EAAE,yBAAyB,EAAE,CAAC"}
+{"version":3,"file":"checkbox-cards.props.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox-cards.props.tsx"],"names":[],"mappings":"AAWA,QAAA,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAe9B,CAAC;AAEF,OAAO,EAAE,yBAAyB,EAAE,CAAC"}

package/dist/esm/components/checkbox-cards.props.js

@@ -1,2 +1,2 @@
-import{asChildPropDef as r}from"../props/as-child.prop.js";import{colorPropDef as o}from"../props/color.prop.js";import{highContrastPropDef as s}from"../props/high-contrast.prop.js";import{gridPropDefs as e}from"./grid.props.js";const a=["1","2","3"],t=["surface","classic"],p={...r,size:{type:"enum",className:"rt-r-size",values:a,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:t,default:"surface"},...o,...s,columns:{...e.columns,default:"repeat(auto-fit, minmax(200px, 1fr))"},gap:{...e.gap,default:"4"}};export{p as checkboxCardsRootPropDefs};
+import{asChildPropDef as r}from"../props/as-child.prop.js";import{colorPropDef as o}from"../props/color.prop.js";import{highContrastPropDef as s}from"../props/high-contrast.prop.js";import{gridPropDefs as e}from"./grid.props.js";const a=["1","2","3"],t=["surface","classic"],p=["solid","translucent"],n={...r,size:{type:"enum",className:"rt-r-size",values:a,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:t,default:"surface"},panelBackground:{type:"enum",values:p,default:void 0},...o,...s,columns:{...e.columns,default:"repeat(auto-fit, minmax(200px, 1fr))"},gap:{...e.gap,default:"4"}};export{n as checkboxCardsRootPropDefs};
 //# sourceMappingURL=checkbox-cards.props.js.map

package/dist/esm/components/checkbox-cards.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/checkbox-cards.props.tsx"],
-  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\nimport { colorPropDef } from '../props/color.prop.js';\nimport { highContrastPropDef } from '../props/high-contrast.prop.js';\nimport { gridPropDefs } from './grid.props.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3'] as const;\nconst variants = ['surface', 'classic'] as const;\n\nconst checkboxCardsRootPropDefs = {\n  ...asChildPropDef,\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },\n  ...colorPropDef,\n  ...highContrastPropDef,\n  columns: { ...gridPropDefs.columns, default: 'repeat(auto-fit, minmax(200px, 1fr))' },\n  gap: { ...gridPropDefs.gap, default: '4' },\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  columns: PropDef<(typeof gridPropDefs.columns.values)[number]>;\n  gap: PropDef<(typeof gridPropDefs.gap.values)[number]>;\n};\n\nexport { checkboxCardsRootPropDefs };\n"],
-  "mappings": "AAAA,OAAS,kBAAAA,MAAsB,4BAC/B,OAAS,gBAAAC,MAAoB,yBAC7B,OAAS,uBAAAC,MAA2B,iCACpC,OAAS,gBAAAC,MAAoB,kBAI7B,MAAMC,EAAQ,CAAC,IAAK,IAAK,GAAG,EACtBC,EAAW,CAAC,UAAW,SAAS,EAEhCC,EAA4B,CAChC,GAAGN,EACH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQI,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,EACvF,GAAGJ,EACH,GAAGC,EACH,QAAS,CAAE,GAAGC,EAAa,QAAS,QAAS,sCAAuC,EACpF,IAAK,CAAE,GAAGA,EAAa,IAAK,QAAS,GAAI,CAC3C",
-  "names": ["asChildPropDef", "colorPropDef", "highContrastPropDef", "gridPropDefs", "sizes", "variants", "checkboxCardsRootPropDefs"]
+  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\nimport { colorPropDef } from '../props/color.prop.js';\nimport { highContrastPropDef } from '../props/high-contrast.prop.js';\nimport { gridPropDefs } from './grid.props.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3'] as const;\nconst variants = ['surface', 'classic'] as const;\nconst panelBackgrounds = ['solid', 'translucent'] as const;\n\nconst checkboxCardsRootPropDefs = {\n  ...asChildPropDef,\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },\n  ...colorPropDef,\n  ...highContrastPropDef,\n  columns: { ...gridPropDefs.columns, default: 'repeat(auto-fit, minmax(200px, 1fr))' },\n  gap: { ...gridPropDefs.gap, default: '4' },\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;\n  columns: PropDef<(typeof gridPropDefs.columns.values)[number]>;\n  gap: PropDef<(typeof gridPropDefs.gap.values)[number]>;\n};\n\nexport { checkboxCardsRootPropDefs };\n"],
+  "mappings": "AAAA,OAAS,kBAAAA,MAAsB,4BAC/B,OAAS,gBAAAC,MAAoB,yBAC7B,OAAS,uBAAAC,MAA2B,iCACpC,OAAS,gBAAAC,MAAoB,kBAI7B,MAAMC,EAAQ,CAAC,IAAK,IAAK,GAAG,EACtBC,EAAW,CAAC,UAAW,SAAS,EAChCC,EAAmB,CAAC,QAAS,aAAa,EAE1CC,EAA4B,CAChC,GAAGP,EACH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQI,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,EACvF,gBAAiB,CAAE,KAAM,OAAQ,OAAQC,EAAkB,QAAS,MAAU,EAC9E,GAAGL,EACH,GAAGC,EACH,QAAS,CAAE,GAAGC,EAAa,QAAS,QAAS,sCAAuC,EACpF,IAAK,CAAE,GAAGA,EAAa,IAAK,QAAS,GAAI,CAC3C",
+  "names": ["asChildPropDef", "colorPropDef", "highContrastPropDef", "gridPropDefs", "sizes", "variants", "panelBackgrounds", "checkboxCardsRootPropDefs"]
 }

package/dist/esm/components/checkbox-group.props.d.ts

@@ -19,8 +19,8 @@ declare const checkboxGroupRootPropDefs: {
     variant: {
         type: "enum";
         className: string;
-        values: readonly ["classic", "surface", "soft"];
-        default: "surface";
+        values: readonly ["classic", "solid", "soft"];
+        default: "solid";
     };
     asChild: {
         type: "boolean";

package/dist/esm/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,qFA6ST,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":"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,qFA8ST,CAAC;AAIH,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}

package/dist/esm/components/image.js

@@ -1,2 +1,2 @@
-"use client";import*as t from"react";import s from"classnames";import{imagePropDefs as O}from"./image.props.js";import{extractProps as q}from"../helpers/extract-props.js";import{marginPropDefs as G}from"../props/margin.props.js";import{widthPropDefs as $}from"../props/width.props.js";import{heightPropDefs as A}from"../props/height.props.js";import{layoutPropDefs as F}from"../props/layout.props.js";import{Skeleton as J}from"./skeleton.js";import{Box as x}from"./box.js";const M=t.forwardRef((T,o)=>{const{variant:d="surface",wrapperStyle:f,...j}=T,{asChild:L,className:n,radius:a,style:r,loading:p="lazy",alt:c,src:i,placeholder:u,showSkeleton:N=!1,fadeIn:l=!0,onLoad:S,onError:k,children:D,...m}=q(j,O,G,$,A,F),[g,h]=t.useState(!1),[W,I]=t.useState(!1),[w,b]=t.useState(!!u),y=t.useRef(null),P=t.useCallback(e=>{h(!0),I(!1),b(!1),S?.(e)},[S]),E=t.useCallback(e=>{h(!1),I(!0),b(!1),k?.(e)},[k]);if(t.useEffect(()=>{const e=y.current;e&&e.complete&&e.naturalWidth>0&&(h(!0),I(!1),b(!1))},[i]),!i)return console.warn("Image component: src prop is required"),null;!L&&c===void 0&&console.warn("Image component: alt prop is required for accessibility when not using asChild");const z=N&&!g&&!W?t.createElement(J,{width:"100%",height:"100px",style:{...r,borderRadius:a?`var(--radius-${a})`:void 0},className:n}):null,B=u&&w?t.createElement("img",{"data-radius":a,style:{...r,filter:"blur(4px)",opacity:.7,transition:"opacity 0.3s ease-out"},className:s("rt-reset","rt-Image","rt-Image--placeholder",n),alt:"",src:u}):null,C=t.createElement("img",{"data-radius":a,loading:p,style:{...r,opacity:l?g?r?.opacity??1:0:r?.opacity??1,transition:l?"opacity 0.3s ease-out":"none"},className:s("rt-reset","rt-Image",d==="blur"&&"rt-Image--blur",n),alt:c,src:i,onLoad:P,onError:E,...m,ref:e=>{y.current=e,typeof o=="function"?o(e):o&&(o.current=e)}}),H=u||N?t.createElement(x,{position:"relative",display:"inline-block",style:f},z,B,C):C;if(L&&D){const e=t.Children.only(D);return d==="blur"?t.cloneElement(e,{className:s(e.props?.className,"rt-variant-blur"),style:{textDecoration:"none",color:"inherit",border:"none",background:"none",padding:0,font:"inherit",cursor:"pointer",...e.props?.style},children:t.createElement(x,{position:"relative",display:"inline-block",style:f},t.createElement("img",{"data-radius":a,loading:p,style:{...r,position:"absolute",top:"8px",left:"0"},className:s("rt-reset","rt-Image","rt-Image--blur","rt-Image--blur-bg",n),alt:"",src:i,...m}),t.createElement("img",{"data-radius":a,loading:p,style:{...r,position:"relative",zIndex:1,opacity:l?g?r?.opacity??1:0:r?.opacity??1,transition:l?"opacity 0.3s ease-out":"none"},className:s("rt-reset","rt-Image","rt-Image--blur",n),alt:c,src:i,onLoad:P,onError:E,...m,ref:v=>{y.current=v,typeof o=="function"?o(v):o&&(o.current=v)}}))}):t.cloneElement(e,{className:s(e.props?.className,"rt-Image"),style:{textDecoration:"none",color:"inherit",border:"none",background:"none",padding:0,font:"inherit",cursor:"pointer",...e.props?.style},children:H})}return d==="blur"?t.createElement(x,{className:"rt-variant-blur",position:"relative",display:"inline-block",style:f},t.createElement("img",{"data-radius":a,loading:p,style:{...r,position:"absolute",top:"8px",left:"0"},className:s("rt-reset","rt-Image","rt-Image--blur","rt-Image--blur-bg",n),alt:"",src:i,...m}),t.createElement("img",{"data-radius":a,loading:p,style:{...r,position:"relative",zIndex:1,opacity:l?g?r?.opacity??1:0:r?.opacity??1,transition:l?"opacity 0.3s ease-out":"none"},className:s("rt-reset","rt-Image","rt-Image--blur",n),alt:c,src:i,onLoad:P,onError:E,...m,ref:e=>{y.current=e,typeof o=="function"?o(e):o&&(o.current=e)}})):H});M.displayName="Image";export{M as Image};
+"use client";import*as t from"react";import a from"classnames";import{imagePropDefs as O}from"./image.props.js";import{extractProps as q}from"../helpers/extract-props.js";import{marginPropDefs as G}from"../props/margin.props.js";import{widthPropDefs as $}from"../props/width.props.js";import{heightPropDefs as A}from"../props/height.props.js";import{layoutPropDefs as F}from"../props/layout.props.js";import{Skeleton as J}from"./skeleton.js";import{Box as x}from"./box.js";const M=t.forwardRef((T,o)=>{const{variant:d="surface",wrapperStyle:f,...j}=T,{asChild:L,className:n,radius:s,style:r,loading:p="lazy",alt:c,src:i,placeholder:u,showSkeleton:N=!1,fadeIn:l=!0,onLoad:S,onError:k,children:D,...m}=q(j,O,G,$,A,F),[g,h]=t.useState(!1),[W,I]=t.useState(!1),[w,b]=t.useState(!!u),y=t.useRef(null),P=t.useCallback(e=>{h(!0),I(!1),b(!1),S?.(e)},[S]),E=t.useCallback(e=>{h(!1),I(!0),b(!1),k?.(e)},[k]);if(t.useEffect(()=>{const e=y.current;e&&e.complete&&e.naturalWidth>0&&(h(!0),I(!1),b(!1))},[i]),!i)return console.warn("Image component: src prop is required"),null;!L&&c===void 0&&console.warn("Image component: alt prop is required for accessibility when not using asChild");const z=N&&!g&&!W?t.createElement(J,{width:"100%",height:"100px",style:{...r,borderRadius:s?`var(--radius-${s})`:void 0},className:n}):null,B=u&&w?t.createElement("img",{"data-radius":s,style:{...r,filter:"blur(4px)",opacity:.7,transition:"opacity 0.3s ease-out"},className:a("rt-reset","rt-Image","rt-Image--placeholder",n),alt:"",src:u}):null,C=t.createElement("img",{"data-radius":s,loading:p,style:{...r,opacity:l?g?r?.opacity??1:0:r?.opacity??1,transition:l?"opacity 0.3s ease-out":"none"},className:a("rt-reset","rt-Image",d==="blur"&&"rt-Image--blur",n),alt:c,src:i,onLoad:P,onError:E,...m,ref:e=>{y.current=e,typeof o=="function"?o(e):o&&(o.current=e)}}),H=u||N?t.createElement(x,{position:"relative",display:"inline-block",style:f},z,B,C):C;if(L&&D){const e=t.Children.only(D);return d==="blur"?t.cloneElement(e,{className:a(e.props?.className,"rt-variant-blur"),style:{textDecoration:"none",color:"inherit",border:"none",background:"none",padding:0,font:"inherit",cursor:"pointer",...e.props?.style},children:t.createElement(x,{position:"relative",display:"inline-block",style:f},t.createElement("img",{"data-radius":s,loading:p,style:{...r,position:"absolute",top:"8px",left:"0"},className:a("rt-reset","rt-Image","rt-Image--blur","rt-Image--blur-bg",n),alt:"",src:i,...m}),t.createElement("img",{"data-radius":s,loading:p,style:{...r,position:"relative",zIndex:1,opacity:l?g?r?.opacity??1:0:r?.opacity??1,transition:l?"opacity 0.3s ease-out":"none"},className:a("rt-reset","rt-Image","rt-Image--blur",n),alt:c,src:i,onLoad:P,onError:E,...m,ref:v=>{y.current=v,typeof o=="function"?o(v):o&&(o.current=v)}}))}):t.cloneElement(e,{className:a(e.props?.className),style:{textDecoration:"none",color:"inherit",border:"none",background:"none",padding:0,font:"inherit",cursor:"pointer",display:"inline-block",...e.props?.style},children:H})}return d==="blur"?t.createElement(x,{className:"rt-variant-blur",position:"relative",display:"inline-block",style:f},t.createElement("img",{"data-radius":s,loading:p,style:{...r,position:"absolute",top:"8px",left:"0"},className:a("rt-reset","rt-Image","rt-Image--blur","rt-Image--blur-bg",n),alt:"",src:i,...m}),t.createElement("img",{"data-radius":s,loading:p,style:{...r,position:"relative",zIndex:1,opacity:l?g?r?.opacity??1:0:r?.opacity??1,transition:l?"opacity 0.3s ease-out":"none"},className:a("rt-reset","rt-Image","rt-Image--blur",n),alt:c,src:i,onLoad:P,onError:E,...m,ref:e=>{y.current=e,typeof o=="function"?o(e):o&&(o.current=e)}})):H});M.displayName="Image";export{M as Image};
 //# sourceMappingURL=image.js.map

package/dist/esm/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    ...imgProps\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 - moved to top to avoid conditional hook call\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 - moved to top to avoid conditional hook call\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  // Create skeleton placeholder\n  const skeletonElement =\n    showSkeleton && !imageLoaded && !imageError ? (\n      <Skeleton\n        width=\"100%\"\n        height=\"100px\" // Default height, can be overridden by style\n        style={{\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          ...style,\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  // Create the standard img element\n  const imgElement = (\n    <img\n      data-radius={radius}\n      loading={loading}\n      style={{\n        ...style,\n        opacity: fadeIn ? (imageLoaded ? (style?.opacity ?? 1) : 0) : (style?.opacity ?? 1),\n        transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',\n      }}\n      className={classNames(\n        'rt-reset',\n        'rt-Image',\n        variant === 'blur' && 'rt-Image--blur',\n        className,\n      )}\n      alt={alt}\n      src={src}\n      onLoad={handleLoad}\n      onError={handleError}\n      {...imgProps}\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  // Wrapper for images with placeholders\n  const imageWithPlaceholder =\n    placeholder || showSkeleton ? (\n      <Box position=\"relative\" display=\"inline-block\" style={wrapperStyle}>\n        {skeletonElement}\n        {placeholderElement}\n        {imgElement}\n      </Box>\n    ) : (\n      imgElement\n    );\n\n  // Handle asChild - inject img 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', // Reset link underlines\n          color: 'inherit', // Reset link colors\n          border: 'none', // Reset button borders\n          background: 'none', // Reset button backgrounds\n          padding: 0, // Reset button padding\n          font: 'inherit', // Reset button fonts\n          cursor: 'pointer', // Ensure interactive cursor\n          ...child.props?.style,\n        },\n        children: (\n          <Box position=\"relative\" display=\"inline-block\" style={wrapperStyle}>\n            {/* Background blurred image */}\n            <img\n              data-radius={radius}\n              loading={loading}\n              style={{\n                ...style,\n                position: 'absolute',\n                top: '8px',\n                left: '0',\n              }}\n              className={classNames(\n                'rt-reset',\n                'rt-Image',\n                'rt-Image--blur',\n                'rt-Image--blur-bg',\n                className,\n              )}\n              alt=\"\"\n              src={src}\n              {...imgProps}\n            />\n            {/* Foreground image */}\n            <img\n              data-radius={radius}\n              loading={loading}\n              style={{\n                ...style,\n                position: 'relative',\n                zIndex: 1,\n                opacity: fadeIn ? (imageLoaded ? (style?.opacity ?? 1) : 0) : (style?.opacity ?? 1),\n                transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',\n              }}\n              className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}\n              alt={alt}\n              src={src}\n              onLoad={handleLoad}\n              onError={handleError}\n              {...imgProps}\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    } else {\n      // For surface variant with asChild\n      return React.cloneElement(child, {\n        className: classNames(child.props?.className, 'rt-Image'),\n        style: {\n          textDecoration: 'none', // Reset link underlines\n          color: 'inherit', // Reset link colors\n          border: 'none', // Reset button borders\n          background: 'none', // Reset button backgrounds\n          padding: 0, // Reset button padding\n          font: 'inherit', // Reset button fonts\n          cursor: 'pointer', // Ensure interactive cursor\n          ...child.props?.style, // Allow user overrides\n        },\n        children: imageWithPlaceholder,\n      });\n    }\n  }\n\n  // Regular rendering without asChild\n  if (variant === 'blur') {\n    return (\n      <Box\n        className=\"rt-variant-blur\"\n        position=\"relative\"\n        display=\"inline-block\"\n        style={wrapperStyle}\n      >\n        {/* Background blurred image */}\n        <img\n          data-radius={radius}\n          loading={loading}\n          style={{\n            ...style,\n            position: 'absolute',\n            top: '8px',\n            left: '0',\n          }}\n          className={classNames(\n            'rt-reset',\n            'rt-Image',\n            'rt-Image--blur',\n            'rt-Image--blur-bg',\n            className,\n          )}\n          alt=\"\"\n          src={src}\n          {...imgProps}\n        />\n        {/* Foreground image */}\n        <img\n          data-radius={radius}\n          loading={loading}\n          style={{\n            ...style,\n            position: 'relative',\n            zIndex: 1,\n            opacity: fadeIn ? (imageLoaded ? (style?.opacity ?? 1) : 0) : (style?.opacity ?? 1),\n            transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',\n          }}\n          className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}\n          alt={alt}\n          src={src}\n          onLoad={handleLoad}\n          onError={handleError}\n          {...imgProps}\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  return imageWithPlaceholder;\n});\n\nImage.displayName = 'Image';\n\nexport { Image };\nexport type { ImageProps };\n"],
-  "mappings": "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",
+  "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    ...imgProps\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 - moved to top to avoid conditional hook call\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 - moved to top to avoid conditional hook call\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  // Create skeleton placeholder\n  const skeletonElement =\n    showSkeleton && !imageLoaded && !imageError ? (\n      <Skeleton\n        width=\"100%\"\n        height=\"100px\" // Default height, can be overridden by style\n        style={{\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          ...style,\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  // Create the standard img element\n  const imgElement = (\n    <img\n      data-radius={radius}\n      loading={loading}\n      style={{\n        ...style,\n        opacity: fadeIn ? (imageLoaded ? (style?.opacity ?? 1) : 0) : (style?.opacity ?? 1),\n        transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',\n      }}\n      className={classNames(\n        'rt-reset',\n        'rt-Image',\n        variant === 'blur' && 'rt-Image--blur',\n        className,\n      )}\n      alt={alt}\n      src={src}\n      onLoad={handleLoad}\n      onError={handleError}\n      {...imgProps}\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  // Wrapper for images with placeholders\n  const imageWithPlaceholder =\n    placeholder || showSkeleton ? (\n      <Box position=\"relative\" display=\"inline-block\" style={wrapperStyle}>\n        {skeletonElement}\n        {placeholderElement}\n        {imgElement}\n      </Box>\n    ) : (\n      imgElement\n    );\n\n  // Handle asChild - inject img 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', // Reset link underlines\n          color: 'inherit', // Reset link colors\n          border: 'none', // Reset button borders\n          background: 'none', // Reset button backgrounds\n          padding: 0, // Reset button padding\n          font: 'inherit', // Reset button fonts\n          cursor: 'pointer', // Ensure interactive cursor\n          ...child.props?.style,\n        },\n        children: (\n          <Box position=\"relative\" display=\"inline-block\" style={wrapperStyle}>\n            {/* Background blurred image */}\n            <img\n              data-radius={radius}\n              loading={loading}\n              style={{\n                ...style,\n                position: 'absolute',\n                top: '8px',\n                left: '0',\n              }}\n              className={classNames(\n                'rt-reset',\n                'rt-Image',\n                'rt-Image--blur',\n                'rt-Image--blur-bg',\n                className,\n              )}\n              alt=\"\"\n              src={src}\n              {...imgProps}\n            />\n            {/* Foreground image */}\n            <img\n              data-radius={radius}\n              loading={loading}\n              style={{\n                ...style,\n                position: 'relative',\n                zIndex: 1,\n                opacity: fadeIn ? (imageLoaded ? (style?.opacity ?? 1) : 0) : (style?.opacity ?? 1),\n                transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',\n              }}\n              className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}\n              alt={alt}\n              src={src}\n              onLoad={handleLoad}\n              onError={handleError}\n              {...imgProps}\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    } else {\n      // For surface variant with asChild\n      return React.cloneElement(child, {\n        className: classNames(child.props?.className),\n        style: {\n          textDecoration: 'none', // Reset link underlines\n          color: 'inherit', // Reset link colors\n          border: 'none', // Reset button borders\n          background: 'none', // Reset button backgrounds\n          padding: 0, // Reset button padding\n          font: 'inherit', // Reset button fonts\n          cursor: 'pointer', // Ensure interactive cursor\n          display: 'inline-block', // Ensure proper sizing\n          ...child.props?.style, // Allow user overrides\n        },\n        children: imageWithPlaceholder,\n      });\n    }\n  }\n\n  // Regular rendering without asChild\n  if (variant === 'blur') {\n    return (\n      <Box\n        className=\"rt-variant-blur\"\n        position=\"relative\"\n        display=\"inline-block\"\n        style={wrapperStyle}\n      >\n        {/* Background blurred image */}\n        <img\n          data-radius={radius}\n          loading={loading}\n          style={{\n            ...style,\n            position: 'absolute',\n            top: '8px',\n            left: '0',\n          }}\n          className={classNames(\n            'rt-reset',\n            'rt-Image',\n            'rt-Image--blur',\n            'rt-Image--blur-bg',\n            className,\n          )}\n          alt=\"\"\n          src={src}\n          {...imgProps}\n        />\n        {/* Foreground image */}\n        <img\n          data-radius={radius}\n          loading={loading}\n          style={{\n            ...style,\n            position: 'relative',\n            zIndex: 1,\n            opacity: fadeIn ? (imageLoaded ? (style?.opacity ?? 1) : 0) : (style?.opacity ?? 1),\n            transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',\n          }}\n          className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}\n          alt={alt}\n          src={src}\n          onLoad={handleLoad}\n          onError={handleError}\n          {...imgProps}\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  return imageWithPlaceholder;\n});\n\nImage.displayName = 'Image';\n\nexport { Image };\nexport type { ImageProps };\n"],
+  "mappings": "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",
   "names": ["React", "classNames", "imagePropDefs", "extractProps", "marginPropDefs", "widthPropDefs", "heightPropDefs", "layoutPropDefs", "Skeleton", "Box", "Image", "props", "forwardedRef", "variant", "wrapperStyle", "restProps", "asChild", "className", "radius", "style", "loading", "alt", "src", "placeholder", "showSkeleton", "fadeIn", "userOnLoad", "userOnError", "children", "imgProps", "imageLoaded", "setImageLoaded", "imageError", "setImageError", "showPlaceholder", "setShowPlaceholder", "imgRef", "handleLoad", "event", "handleError", "img", "skeletonElement", "placeholderElement", "imgElement", "node", "imageWithPlaceholder", "child"]
 }

package/dist/esm/components/radio-cards.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-cards.d.ts","sourceRoot":"","sources":["../../../src/components/radio-cards.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAE7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAKhE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5D,KAAK,sBAAsB,GAAG,eAAe,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC7E,UAAU,mBACR,SAAQ,qBAAqB,CACzB,OAAO,mBAAmB,CAAC,IAAI,EAC/B,SAAS,GAAG,OAAO,GAAG,gBAAgB,CACvC,EACD,WAAW,EACX,sBAAsB;CAAG;AAC7B,QAAA,MAAM,cAAc,4FAkBnB,CAAC;AAIF,UAAU,mBACR,SAAQ,qBAAqB,CAAC,OAAO,mBAAmB,CAAC,IAAI,EAAE,YAAY,CAAC,EAC1E,WAAW;CAAG;AAClB,QAAA,MAAM,cAAc,+FASnB,CAAC;AAGF,OAAO,EAAE,cAAc,IAAI,IAAI,EAAE,cAAc,IAAI,IAAI,EAAE,CAAC;AAC1D,YAAY,EAAE,mBAAmB,IAAI,SAAS,EAAE,mBAAmB,IAAI,SAAS,EAAE,CAAC"}
+{"version":3,"file":"radio-cards.d.ts","sourceRoot":"","sources":["../../../src/components/radio-cards.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAE7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAMhE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5D,KAAK,sBAAsB,GAAG,eAAe,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC7E,UAAU,mBACR,SAAQ,qBAAqB,CACzB,OAAO,mBAAmB,CAAC,IAAI,EAC/B,SAAS,GAAG,OAAO,GAAG,gBAAgB,CACvC,EACD,WAAW,EACX,sBAAsB;CAAG;AAC7B,QAAA,MAAM,cAAc,4FAsBnB,CAAC;AAIF,UAAU,mBACR,SAAQ,qBAAqB,CAAC,OAAO,mBAAmB,CAAC,IAAI,EAAE,YAAY,CAAC,EAC1E,WAAW;CAAG;AAClB,QAAA,MAAM,cAAc,+FASnB,CAAC;AAGF,OAAO,EAAE,cAAc,IAAI,IAAI,EAAE,cAAc,IAAI,IAAI,EAAE,CAAC;AAC1D,YAAY,EAAE,mBAAmB,IAAI,SAAS,EAAE,mBAAmB,IAAI,SAAS,EAAE,CAAC"}

package/dist/esm/components/radio-cards.js

@@ -1,2 +1,2 @@
-import*as o from"react";import a from"classnames";import{RadioGroup as s}from"radix-ui";import{radioCardsRootPropDefs as R}from"./radio-cards.props.js";import{Grid as f}from"./grid.js";import{extractProps as n}from"../helpers/extract-props.js";import{marginPropDefs as P}from"../props/margin.props.js";const p=o.forwardRef((r,t)=>{const{className:e,color:d,...m}=n(r,R,P);return o.createElement(f,{asChild:!0},o.createElement(s.Root,{"data-accent-color":d,...m,ref:t,className:a("rt-RadioCardsRoot",e)}))});p.displayName="RadioCards.Root";const i=o.forwardRef(({className:r,...t},e)=>o.createElement(s.Item,{...t,asChild:!1,ref:e,className:a("rt-reset","rt-BaseCard","rt-RadioCardsItem",r)}));i.displayName="RadioCards.Item";export{i as Item,p as Root};
+import*as o from"react";import a from"classnames";import{RadioGroup as s}from"radix-ui";import{radioCardsRootPropDefs as f}from"./radio-cards.props.js";import{Grid as C}from"./grid.js";import{extractProps as P}from"../helpers/extract-props.js";import{marginPropDefs as l}from"../props/margin.props.js";import{useThemeContext as c}from"./theme.js";const p=o.forwardRef((r,e)=>{const t=c(),i=r.panelBackground??t.panelBackground,{className:m,color:R,panelBackground:u,...n}=P(r,f,l);return o.createElement(C,{asChild:!0},o.createElement(s.Root,{"data-accent-color":R,"data-panel-background":i,...n,ref:e,className:a("rt-RadioCardsRoot",m)}))});p.displayName="RadioCards.Root";const d=o.forwardRef(({className:r,...e},t)=>o.createElement(s.Item,{...e,asChild:!1,ref:t,className:a("rt-reset","rt-BaseCard","rt-RadioCardsItem",r)}));d.displayName="RadioCards.Item";export{d as Item,p as Root};
 //# sourceMappingURL=radio-cards.js.map

package/dist/esm/components/radio-cards.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/radio-cards.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport { RadioGroup as RadioGroupPrimitive } from 'radix-ui';\n\nimport { radioCardsRootPropDefs } from './radio-cards.props.js';\nimport { Grid } from './grid.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\n\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype RadioCardsRootElement = React.ElementRef<typeof RadioGroupPrimitive.Root>;\ntype RadioCardsRootOwnProps = GetPropDefTypes<typeof radioCardsRootPropDefs>;\ninterface RadioCardsRootProps\n  extends ComponentPropsWithout<\n      typeof RadioGroupPrimitive.Root,\n      'asChild' | 'color' | 'defaultChecked'\n    >,\n    MarginProps,\n    RadioCardsRootOwnProps {}\nconst RadioCardsRoot = React.forwardRef<RadioCardsRootElement, RadioCardsRootProps>(\n  (props, forwardedRef) => {\n    const { className, color, ...rootProps } = extractProps(\n      props,\n      radioCardsRootPropDefs,\n      marginPropDefs,\n    );\n    return (\n      <Grid asChild>\n        <RadioGroupPrimitive.Root\n          data-accent-color={color}\n          {...rootProps}\n          ref={forwardedRef}\n          className={classNames('rt-RadioCardsRoot', className)}\n        />\n      </Grid>\n    );\n  },\n);\nRadioCardsRoot.displayName = 'RadioCards.Root';\n\ntype RadioCardsItemElement = React.ElementRef<typeof RadioGroupPrimitive.Item>;\ninterface RadioCardsItemProps\n  extends ComponentPropsWithout<typeof RadioGroupPrimitive.Item, RemovedProps>,\n    MarginProps {}\nconst RadioCardsItem = React.forwardRef<RadioCardsItemElement, RadioCardsItemProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <RadioGroupPrimitive.Item\n      {...props}\n      asChild={false}\n      ref={forwardedRef}\n      className={classNames('rt-reset', 'rt-BaseCard', 'rt-RadioCardsItem', className)}\n    />\n  ),\n);\nRadioCardsItem.displayName = 'RadioCards.Item';\n\nexport { RadioCardsRoot as Root, RadioCardsItem as Item };\nexport type { RadioCardsRootProps as RootProps, RadioCardsItemProps as ItemProps };\n"],
-  "mappings": "AAAA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aACvB,OAAS,cAAcC,MAA2B,WAElD,OAAS,0BAAAC,MAA8B,yBACvC,OAAS,QAAAC,MAAY,YACrB,OAAS,gBAAAC,MAAoB,8BAC7B,OAAS,kBAAAC,MAAsB,2BAe/B,MAAMC,EAAiBP,EAAM,WAC3B,CAACQ,EAAOC,IAAiB,CACvB,KAAM,CAAE,UAAAC,EAAW,MAAAC,EAAO,GAAGC,CAAU,EAAIP,EACzCG,EACAL,EACAG,CACF,EACA,OACEN,EAAA,cAACI,EAAA,CAAK,QAAO,IACXJ,EAAA,cAACE,EAAoB,KAApB,CACC,oBAAmBS,EAClB,GAAGC,EACJ,IAAKH,EACL,UAAWR,EAAW,oBAAqBS,CAAS,EACtD,CACF,CAEJ,CACF,EACAH,EAAe,YAAc,kBAM7B,MAAMM,EAAiBb,EAAM,WAC3B,CAAC,CAAE,UAAAU,EAAW,GAAGF,CAAM,EAAGC,IACxBT,EAAA,cAACE,EAAoB,KAApB,CACE,GAAGM,EACJ,QAAS,GACT,IAAKC,EACL,UAAWR,EAAW,WAAY,cAAe,oBAAqBS,CAAS,EACjF,CAEJ,EACAG,EAAe,YAAc",
-  "names": ["React", "classNames", "RadioGroupPrimitive", "radioCardsRootPropDefs", "Grid", "extractProps", "marginPropDefs", "RadioCardsRoot", "props", "forwardedRef", "className", "color", "rootProps", "RadioCardsItem"]
+  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport { RadioGroup as RadioGroupPrimitive } from 'radix-ui';\n\nimport { radioCardsRootPropDefs } from './radio-cards.props.js';\nimport { Grid } from './grid.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\nimport { useThemeContext } from './theme.js';\n\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype RadioCardsRootElement = React.ElementRef<typeof RadioGroupPrimitive.Root>;\ntype RadioCardsRootOwnProps = GetPropDefTypes<typeof radioCardsRootPropDefs>;\ninterface RadioCardsRootProps\n  extends ComponentPropsWithout<\n      typeof RadioGroupPrimitive.Root,\n      'asChild' | 'color' | 'defaultChecked'\n    >,\n    MarginProps,\n    RadioCardsRootOwnProps {}\nconst RadioCardsRoot = React.forwardRef<RadioCardsRootElement, RadioCardsRootProps>(\n  (props, forwardedRef) => {\n    const themeContext = useThemeContext();\n    const panelBackground = props.panelBackground ?? themeContext.panelBackground;\n    const {\n      className,\n      color,\n      panelBackground: _,\n      ...rootProps\n    } = extractProps(props, radioCardsRootPropDefs, marginPropDefs);\n    return (\n      <Grid asChild>\n        <RadioGroupPrimitive.Root\n          data-accent-color={color}\n          data-panel-background={panelBackground}\n          {...rootProps}\n          ref={forwardedRef}\n          className={classNames('rt-RadioCardsRoot', className)}\n        />\n      </Grid>\n    );\n  },\n);\nRadioCardsRoot.displayName = 'RadioCards.Root';\n\ntype RadioCardsItemElement = React.ElementRef<typeof RadioGroupPrimitive.Item>;\ninterface RadioCardsItemProps\n  extends ComponentPropsWithout<typeof RadioGroupPrimitive.Item, RemovedProps>,\n    MarginProps {}\nconst RadioCardsItem = React.forwardRef<RadioCardsItemElement, RadioCardsItemProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <RadioGroupPrimitive.Item\n      {...props}\n      asChild={false}\n      ref={forwardedRef}\n      className={classNames('rt-reset', 'rt-BaseCard', 'rt-RadioCardsItem', className)}\n    />\n  ),\n);\nRadioCardsItem.displayName = 'RadioCards.Item';\n\nexport { RadioCardsRoot as Root, RadioCardsItem as Item };\nexport type { RadioCardsRootProps as RootProps, RadioCardsItemProps as ItemProps };\n"],
+  "mappings": "AAAA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aACvB,OAAS,cAAcC,MAA2B,WAElD,OAAS,0BAAAC,MAA8B,yBACvC,OAAS,QAAAC,MAAY,YACrB,OAAS,gBAAAC,MAAoB,8BAC7B,OAAS,kBAAAC,MAAsB,2BAC/B,OAAS,mBAAAC,MAAuB,aAehC,MAAMC,EAAiBR,EAAM,WAC3B,CAACS,EAAOC,IAAiB,CACvB,MAAMC,EAAeJ,EAAgB,EAC/BK,EAAkBH,EAAM,iBAAmBE,EAAa,gBACxD,CACJ,UAAAE,EACA,MAAAC,EACA,gBAAiBC,EACjB,GAAGC,CACL,EAAIX,EAAaI,EAAON,EAAwBG,CAAc,EAC9D,OACEN,EAAA,cAACI,EAAA,CAAK,QAAO,IACXJ,EAAA,cAACE,EAAoB,KAApB,CACC,oBAAmBY,EACnB,wBAAuBF,EACtB,GAAGI,EACJ,IAAKN,EACL,UAAWT,EAAW,oBAAqBY,CAAS,EACtD,CACF,CAEJ,CACF,EACAL,EAAe,YAAc,kBAM7B,MAAMS,EAAiBjB,EAAM,WAC3B,CAAC,CAAE,UAAAa,EAAW,GAAGJ,CAAM,EAAGC,IACxBV,EAAA,cAACE,EAAoB,KAApB,CACE,GAAGO,EACJ,QAAS,GACT,IAAKC,EACL,UAAWT,EAAW,WAAY,cAAe,oBAAqBY,CAAS,EACjF,CAEJ,EACAI,EAAe,YAAc",
+  "names": ["React", "classNames", "RadioGroupPrimitive", "radioCardsRootPropDefs", "Grid", "extractProps", "marginPropDefs", "useThemeContext", "RadioCardsRoot", "props", "forwardedRef", "themeContext", "panelBackground", "className", "color", "_", "rootProps", "RadioCardsItem"]
 }

package/dist/esm/components/radio-cards.props.d.ts

@@ -39,6 +39,11 @@ declare const radioCardsRootPropDefs: {
         values: readonly ["surface", "classic"];
         default: "surface";
     };
+    panelBackground: {
+        type: "enum";
+        values: readonly ["solid", "translucent"];
+        default: undefined;
+    };
     asChild: {
         type: "boolean";
     };

package/dist/esm/components/radio-cards.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-cards.props.d.ts","sourceRoot":"","sources":["../../../src/components/radio-cards.props.tsx"],"names":[],"mappings":"AAUA,QAAA,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAa3B,CAAC;AAEF,OAAO,EAAE,sBAAsB,EAAE,CAAC"}
+{"version":3,"file":"radio-cards.props.d.ts","sourceRoot":"","sources":["../../../src/components/radio-cards.props.tsx"],"names":[],"mappings":"AAWA,QAAA,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAe3B,CAAC;AAEF,OAAO,EAAE,sBAAsB,EAAE,CAAC"}

package/dist/esm/components/radio-cards.props.js

@@ -1,2 +1,2 @@
-import{asChildPropDef as r}from"../props/as-child.prop.js";import{colorPropDef as o}from"../props/color.prop.js";import{highContrastPropDef as s}from"../props/high-contrast.prop.js";import{gridPropDefs as e}from"./grid.props.js";const a=["1","2","3"],t=["surface","classic"],p={...r,size:{type:"enum",className:"rt-r-size",values:a,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:t,default:"surface"},...o,...s,columns:{...e.columns,default:"repeat(auto-fit, minmax(160px, 1fr))"},gap:{...e.gap,default:"4"}};export{p as radioCardsRootPropDefs};
+import{asChildPropDef as r}from"../props/as-child.prop.js";import{colorPropDef as o}from"../props/color.prop.js";import{highContrastPropDef as s}from"../props/high-contrast.prop.js";import{gridPropDefs as e}from"./grid.props.js";const a=["1","2","3"],t=["surface","classic"],p=["solid","translucent"],n={...r,size:{type:"enum",className:"rt-r-size",values:a,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:t,default:"surface"},panelBackground:{type:"enum",values:p,default:void 0},...o,...s,columns:{...e.columns,default:"repeat(auto-fit, minmax(160px, 1fr))"},gap:{...e.gap,default:"4"}};export{n as radioCardsRootPropDefs};
 //# sourceMappingURL=radio-cards.props.js.map

package/dist/esm/components/radio-cards.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/radio-cards.props.tsx"],
-  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\nimport { colorPropDef } from '../props/color.prop.js';\nimport { highContrastPropDef } from '../props/high-contrast.prop.js';\nimport { gridPropDefs } from './grid.props.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3'] as const;\nconst variants = ['surface', 'classic'] as const;\n\nconst radioCardsRootPropDefs = {\n  ...asChildPropDef,\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },\n  ...colorPropDef,\n  ...highContrastPropDef,\n  columns: { ...gridPropDefs.columns, default: 'repeat(auto-fit, minmax(160px, 1fr))' },\n  gap: { ...gridPropDefs.gap, default: '4' },\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  columns: PropDef<(typeof gridPropDefs.columns.values)[number]>;\n  gap: PropDef<(typeof gridPropDefs.gap.values)[number]>;\n};\n\nexport { radioCardsRootPropDefs };\n"],
-  "mappings": "AAAA,OAAS,kBAAAA,MAAsB,4BAC/B,OAAS,gBAAAC,MAAoB,yBAC7B,OAAS,uBAAAC,MAA2B,iCACpC,OAAS,gBAAAC,MAAoB,kBAI7B,MAAMC,EAAQ,CAAC,IAAK,IAAK,GAAG,EACtBC,EAAW,CAAC,UAAW,SAAS,EAEhCC,EAAyB,CAC7B,GAAGN,EACH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQI,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,EACvF,GAAGJ,EACH,GAAGC,EACH,QAAS,CAAE,GAAGC,EAAa,QAAS,QAAS,sCAAuC,EACpF,IAAK,CAAE,GAAGA,EAAa,IAAK,QAAS,GAAI,CAC3C",
-  "names": ["asChildPropDef", "colorPropDef", "highContrastPropDef", "gridPropDefs", "sizes", "variants", "radioCardsRootPropDefs"]
+  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\nimport { colorPropDef } from '../props/color.prop.js';\nimport { highContrastPropDef } from '../props/high-contrast.prop.js';\nimport { gridPropDefs } from './grid.props.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3'] as const;\nconst variants = ['surface', 'classic'] as const;\nconst panelBackgrounds = ['solid', 'translucent'] as const;\n\nconst radioCardsRootPropDefs = {\n  ...asChildPropDef,\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },\n  ...colorPropDef,\n  ...highContrastPropDef,\n  columns: { ...gridPropDefs.columns, default: 'repeat(auto-fit, minmax(160px, 1fr))' },\n  gap: { ...gridPropDefs.gap, default: '4' },\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;\n  columns: PropDef<(typeof gridPropDefs.columns.values)[number]>;\n  gap: PropDef<(typeof gridPropDefs.gap.values)[number]>;\n};\n\nexport { radioCardsRootPropDefs };\n"],
+  "mappings": "AAAA,OAAS,kBAAAA,MAAsB,4BAC/B,OAAS,gBAAAC,MAAoB,yBAC7B,OAAS,uBAAAC,MAA2B,iCACpC,OAAS,gBAAAC,MAAoB,kBAI7B,MAAMC,EAAQ,CAAC,IAAK,IAAK,GAAG,EACtBC,EAAW,CAAC,UAAW,SAAS,EAChCC,EAAmB,CAAC,QAAS,aAAa,EAE1CC,EAAyB,CAC7B,GAAGP,EACH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQI,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,EACvF,gBAAiB,CAAE,KAAM,OAAQ,OAAQC,EAAkB,QAAS,MAAU,EAC9E,GAAGL,EACH,GAAGC,EACH,QAAS,CAAE,GAAGC,EAAa,QAAS,QAAS,sCAAuC,EACpF,IAAK,CAAE,GAAGA,EAAa,IAAK,QAAS,GAAI,CAC3C",
+  "names": ["asChildPropDef", "colorPropDef", "highContrastPropDef", "gridPropDefs", "sizes", "variants", "panelBackgrounds", "radioCardsRootPropDefs"]
 }

package/dist/esm/components/radio-group.props.d.ts

@@ -19,8 +19,8 @@ declare const radioGroupRootPropDefs: {
     variant: {
         type: "enum";
         className: string;
-        values: readonly ["classic", "surface", "soft"];
-        default: "surface";
+        values: readonly ["classic", "solid", "soft"];
+        default: "solid";
     };
     asChild: {
         type: "boolean";

package/dist/esm/components/radio-group.props.js

@@ -1,2 +1,2 @@
-import{asChildPropDef as s}from"../props/as-child.prop.js";import{colorPropDef as r}from"../props/color.prop.js";import{highContrastPropDef as e}from"../props/high-contrast.prop.js";const o=["1","2","3"],t=["classic","surface","soft"],a={...s,size:{type:"enum",className:"rt-r-size",values:o,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:t,default:"surface"},...r,...e};export{a as radioGroupRootPropDefs};
+import{asChildPropDef as s}from"../props/as-child.prop.js";import{colorPropDef as o}from"../props/color.prop.js";import{highContrastPropDef as r}from"../props/high-contrast.prop.js";const e=["1","2","3"],t=["classic","solid","soft"],a={...s,size:{type:"enum",className:"rt-r-size",values:e,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:t,default:"solid"},...o,...r};export{a as radioGroupRootPropDefs};
 //# sourceMappingURL=radio-group.props.js.map

package/dist/esm/components/radio-group.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/radio-group.props.tsx"],
-  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\nimport { colorPropDef } from '../props/color.prop.js';\nimport { highContrastPropDef } from '../props/high-contrast.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3'] as const;\nconst variants = ['classic', 'surface', 'soft'] as const;\n\nconst radioGroupRootPropDefs = {\n  ...asChildPropDef,\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },\n  ...colorPropDef,\n  ...highContrastPropDef,\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n};\n\nexport { radioGroupRootPropDefs };\n"],
-  "mappings": "AAAA,OAAS,kBAAAA,MAAsB,4BAC/B,OAAS,gBAAAC,MAAoB,yBAC7B,OAAS,uBAAAC,MAA2B,iCAIpC,MAAMC,EAAQ,CAAC,IAAK,IAAK,GAAG,EACtBC,EAAW,CAAC,UAAW,UAAW,MAAM,EAExCC,EAAyB,CAC7B,GAAGL,EACH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQG,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,EACvF,GAAGH,EACH,GAAGC,CACL",
+  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\nimport { colorPropDef } from '../props/color.prop.js';\nimport { highContrastPropDef } from '../props/high-contrast.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3'] as const;\nconst variants = ['classic', 'solid', 'soft'] as const;\n\nconst radioGroupRootPropDefs = {\n  ...asChildPropDef,\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'solid' },\n  ...colorPropDef,\n  ...highContrastPropDef,\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n};\n\nexport { radioGroupRootPropDefs };\n"],
+  "mappings": "AAAA,OAAS,kBAAAA,MAAsB,4BAC/B,OAAS,gBAAAC,MAAoB,yBAC7B,OAAS,uBAAAC,MAA2B,iCAIpC,MAAMC,EAAQ,CAAC,IAAK,IAAK,GAAG,EACtBC,EAAW,CAAC,UAAW,QAAS,MAAM,EAEtCC,EAAyB,CAC7B,GAAGL,EACH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQG,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,OAAQ,EACrF,GAAGH,EACH,GAAGC,CACL",
   "names": ["asChildPropDef", "colorPropDef", "highContrastPropDef", "sizes", "variants", "radioGroupRootPropDefs"]
 }

package/dist/esm/components/segmented-control.props.d.ts

@@ -22,6 +22,11 @@ declare const segmentedControlRootPropDefs: {
         values: readonly ["surface", "classic"];
         default: "surface";
     };
+    panelBackground: {
+        type: "enum";
+        className: string;
+        values: ("solid" | "translucent")[];
+    };
 };
 export { segmentedControlRootPropDefs };
 //# sourceMappingURL=segmented-control.props.d.ts.map

package/dist/esm/components/segmented-control.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.props.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control.props.tsx"],"names":[],"mappings":"AAOA,QAAA,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;CASjC,CAAC;AAEF,OAAO,EAAE,4BAA4B,EAAE,CAAC"}
+{"version":3,"file":"segmented-control.props.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control.props.tsx"],"names":[],"mappings":"AAOA,QAAA,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAejC,CAAC;AAEF,OAAO,EAAE,4BAA4B,EAAE,CAAC"}

package/dist/esm/components/segmented-control.props.js

@@ -1,2 +1,2 @@
-import{radiusPropDef as e}from"../props/radius.prop.js";const s=["1","2","3"],a=["surface","classic"],o={disabled:{type:"boolean",className:"disabled",default:!1},size:{type:"enum",className:"rt-r-size",values:s,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:a,default:"surface"},...e};export{o as segmentedControlRootPropDefs};
+import{radiusPropDef as e}from"../props/radius.prop.js";const s=["1","2","3"],a=["surface","classic"],r={disabled:{type:"boolean",className:"disabled",default:!1},size:{type:"enum",className:"rt-r-size",values:s,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:a,default:"surface"},panelBackground:{type:"enum",className:"rt-panel-background",values:["solid","translucent"]},...e};export{r as segmentedControlRootPropDefs};
 //# sourceMappingURL=segmented-control.props.js.map

package/dist/esm/components/segmented-control.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/segmented-control.props.tsx"],
-  "sourcesContent": ["import { radiusPropDef } from '../props/radius.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3'] as const;\nconst variants = ['surface', 'classic'] as const;\n\nconst segmentedControlRootPropDefs = {\n  disabled: { type: 'boolean', className: 'disabled', default: false },\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },\n  ...radiusPropDef,\n} satisfies {\n  disabled?: PropDef<boolean>;\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n};\n\nexport { segmentedControlRootPropDefs };\n"],
-  "mappings": "AAAA,OAAS,iBAAAA,MAAqB,0BAI9B,MAAMC,EAAQ,CAAC,IAAK,IAAK,GAAG,EACtBC,EAAW,CAAC,UAAW,SAAS,EAEhCC,EAA+B,CACnC,SAAU,CAAE,KAAM,UAAW,UAAW,WAAY,QAAS,EAAM,EACnE,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQF,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,EACvF,GAAGF,CACL",
+  "sourcesContent": ["import { radiusPropDef } from '../props/radius.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3'] as const;\nconst variants = ['surface', 'classic'] as const;\n\nconst segmentedControlRootPropDefs = {\n  disabled: { type: 'boolean', className: 'disabled', default: false },\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },\n  panelBackground: {\n    type: 'enum',\n    className: 'rt-panel-background',\n    values: ['solid', 'translucent'],\n  },\n  ...radiusPropDef,\n} satisfies {\n  disabled?: PropDef<boolean>;\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  panelBackground: PropDef<'solid' | 'translucent'>;\n};\n\nexport { segmentedControlRootPropDefs };\n"],
+  "mappings": "AAAA,OAAS,iBAAAA,MAAqB,0BAI9B,MAAMC,EAAQ,CAAC,IAAK,IAAK,GAAG,EACtBC,EAAW,CAAC,UAAW,SAAS,EAEhCC,EAA+B,CACnC,SAAU,CAAE,KAAM,UAAW,UAAW,WAAY,QAAS,EAAM,EACnE,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQF,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,EACvF,gBAAiB,CACf,KAAM,OACN,UAAW,sBACX,OAAQ,CAAC,QAAS,aAAa,CACjC,EACA,GAAGF,CACL",
   "names": ["radiusPropDef", "sizes", "variants", "segmentedControlRootPropDefs"]
 }

package/package.json

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

package/src/components/_internal/base-button.css

@@ -438,6 +438,11 @@
         backdrop-filter: var(--backdrop-filter-components);
         --backdrop-filter-components: blur(var(--backdrop-blur-components));
       }
+
+      /* Disable backdrop-filter when inside elements that already have backdrop-filter */
+      :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
+        backdrop-filter: none !important;
+      }
     }
   }
   &:where(:focus-visible) {
@@ -466,6 +471,11 @@
       backdrop-filter: var(--backdrop-filter-components);
       --backdrop-filter-components: blur(var(--backdrop-blur-components));
     }
+
+    /* Disable backdrop-filter when inside elements that already have backdrop-filter */
+    :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
+      backdrop-filter: none !important;
+    }
   }
   &:where(:active:not([data-state='open'])) {
     /* Base state: solid accent for solid panels */
@@ -489,6 +499,11 @@
       backdrop-filter: var(--backdrop-filter-components);
       --backdrop-filter-components: blur(var(--backdrop-blur-components));
     }
+
+    /* Disable backdrop-filter when inside elements that already have backdrop-filter */
+    :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
+      backdrop-filter: none !important;
+    }
   }
   &:where([data-disabled]) {
     color: var(--gray-a8);
@@ -743,13 +758,7 @@
 
 /* Toggle button pressed states for all variants */
 .rt-BaseButton:where([data-state='on']) {
-  /* Add scale transform for pressed state - same as active */
-  transform: scale(0.98);
-
-  /* Reduced motion support */
-  @media (prefers-reduced-motion: reduce) {
-    transform: none;
-  }
+  /* No scale transform for toggle buttons - removed for better UX */
 
   /* Classic variant pressed */
   &:where(.rt-variant-classic) {

package/src/components/_internal/base-card.css

@@ -53,6 +53,27 @@
    */
   &::before {
     z-index: -1;
+    
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent']) & {
+      backdrop-filter: var(--backdrop-filter-panel);
+    }
+
+    /* Component-level overrides (higher specificity) */
+    :where(.rt-BaseCard[data-panel-background='solid']) & {
+      backdrop-filter: none;
+      --backdrop-filter-panel: none;
+    }
+
+    :where(.rt-BaseCard[data-panel-background='translucent']) & {
+      backdrop-filter: var(--backdrop-filter-panel);
+      --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    }
+
+    /* Disable backdrop-filter when inside elements that already have backdrop-filter */
+    :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
+      backdrop-filter: none !important;
+    }
   }
   & {
     contain: paint;
@@ -98,6 +119,8 @@
     0 0 0 var(--classic-border-width) var(--gray-a5),
     0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--gray-a7);
 
+  --base-card-classic-box-shadow-inner: none;
+
   /* Hover state - enhanced elevation (exact same structure as Button) */
   --base-card-classic-hover-box-shadow-outer: 
     inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a2),
@@ -108,11 +131,15 @@
     0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--gray-a7),
     0 0 0 var(--classic-border-width) var(--gray-a5);
 
+  --base-card-classic-hover-box-shadow-inner: none;
+
   /* Active state - pressed down effect (exact same structure as Button) */
   --base-card-classic-active-box-shadow-outer: 
     inset 0 var(--classic-border-width) var(--black-a3), 
     0 0 0 var(--classic-border-width) var(--gray-a7);
 
+  --base-card-classic-active-box-shadow-inner: none;
+
   /* Dark mode overrides (exact same structure as Button) */
   :where(.dark, .dark-theme) &,
   :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
@@ -136,6 +163,10 @@
     --base-card-classic-active-box-shadow-outer: 
       inset 0 var(--classic-border-width) var(--black-a3), 
       0 0 0 var(--classic-border-width) var(--gray-a7);
+
+    --base-card-classic-box-shadow-inner: none;
+    --base-card-classic-hover-box-shadow-inner: none;
+    --base-card-classic-active-box-shadow-inner: none;
   }
 
   /* Border color definitions (kept for compatibility) */