@kushagradhawan/kookie-ui 0.1.4 → 0.1.6

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"],
+  "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"]
 }

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

@@ -2,7 +2,18 @@ import * as React from 'react';
 import { BaseButton } from './_internal/base-button.js';
 import type { BaseButtonProps } from './_internal/base-button.js';
 type IconButtonElement = React.ElementRef<typeof BaseButton>;
-type IconButtonOwnProps = Omit<BaseButtonProps, 'as'>;
+type AccessibilityProps = {
+    'aria-label': string;
+    'aria-labelledby'?: never;
+} | {
+    'aria-label'?: never;
+    'aria-labelledby': string;
+} | {
+    'aria-label'?: never;
+    'aria-labelledby'?: never;
+    children: React.ReactNode;
+};
+type IconButtonOwnProps = Omit<BaseButtonProps, 'as'> & AccessibilityProps;
 type IconButtonProps<C extends React.ElementType = 'button'> = IconButtonOwnProps & {
     as?: C;
 } & Omit<React.ComponentPropsWithoutRef<C>, keyof IconButtonOwnProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,KAAK,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAG7D,KAAK,kBAAkB,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;AAEtD,KAAK,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,kBAAkB,GAAG;IAClF,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,kBAAkB,CAAC,CAAC;AAEtE,KAAK,mBAAmB,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAChE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAAE,KACxE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,QAAA,MAAM,UAAU,EAOX,mBAAmB,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAIpD,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,KAAK,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAG7D,KAAK,kBAAkB,GACnB;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAAE,GACnD;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,iBAAiB,EAAE,MAAM,CAAA;CAAE,GACnD;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AAGnF,KAAK,kBAAkB,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,GAAG,kBAAkB,CAAC;AAE3E,KAAK,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,kBAAkB,GAAG;IAClF,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,kBAAkB,CAAC,CAAC;AAEtE,KAAK,mBAAmB,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAChE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAAE,KACxE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,QAAA,MAAM,UAAU,EA6BX,mBAAmB,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAIpD,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}

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

@@ -1,2 +1,2 @@
-import*as t from"react";import r from"classnames";import{BaseButton as s}from"./_internal/base-button.js";const o=t.forwardRef(({className:e,...n},p)=>t.createElement(s,{...n,ref:p,className:r("rt-IconButton",e)}));o.displayName="IconButton";export{o as IconButton};
+import*as e from"react";import r from"classnames";import{BaseButton as l}from"./_internal/base-button.js";const t=e.forwardRef(({className:n,...o},a)=>e.createElement(l,{...o,ref:a,className:r("rt-IconButton",n)}));t.displayName="IconButton";export{t as IconButton};
 //# sourceMappingURL=icon-button.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/icon-button.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport { BaseButton } from './_internal/base-button.js';\nimport type { BaseButtonProps } from './_internal/base-button.js';\n\ntype IconButtonElement = React.ElementRef<typeof BaseButton>;\n\n// Polymorphic IconButton props\ntype IconButtonOwnProps = Omit<BaseButtonProps, 'as'>;\n\ntype IconButtonProps<C extends React.ElementType = 'button'> = IconButtonOwnProps & {\n  as?: C;\n} & Omit<React.ComponentPropsWithoutRef<C>, keyof IconButtonOwnProps>;\n\ntype IconButtonComponent = <C extends React.ElementType = 'button'>(\n  props: IconButtonProps<C> & { ref?: React.ForwardedRef<IconButtonElement> },\n) => React.ReactElement | null;\n\nconst IconButton = React.forwardRef(\n  (\n    { className, ...props }: IconButtonProps,\n    forwardedRef: React.ForwardedRef<IconButtonElement>,\n  ) => (\n    <BaseButton {...props} ref={forwardedRef} className={classNames('rt-IconButton', className)} />\n  ),\n) as IconButtonComponent & { displayName?: string };\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton };\nexport type { IconButtonProps };\n"],
-  "mappings": "AAAA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aAEvB,OAAS,cAAAC,MAAkB,6BAgB3B,MAAMC,EAAaH,EAAM,WACvB,CACE,CAAE,UAAAI,EAAW,GAAGC,CAAM,EACtBC,IAEAN,EAAA,cAACE,EAAA,CAAY,GAAGG,EAAO,IAAKC,EAAc,UAAWL,EAAW,gBAAiBG,CAAS,EAAG,CAEjG,EAEAD,EAAW,YAAc",
+  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport { BaseButton } from './_internal/base-button.js';\nimport type { BaseButtonProps } from './_internal/base-button.js';\n\ntype IconButtonElement = React.ElementRef<typeof BaseButton>;\n\n// Required accessibility props for icon buttons\ntype AccessibilityProps =\n  | { 'aria-label': string; 'aria-labelledby'?: never }\n  | { 'aria-label'?: never; 'aria-labelledby': string }\n  | { 'aria-label'?: never; 'aria-labelledby'?: never; children: React.ReactNode };\n\n// Polymorphic IconButton props with required accessibility\ntype IconButtonOwnProps = Omit<BaseButtonProps, 'as'> & AccessibilityProps;\n\ntype IconButtonProps<C extends React.ElementType = 'button'> = IconButtonOwnProps & {\n  as?: C;\n} & Omit<React.ComponentPropsWithoutRef<C>, keyof IconButtonOwnProps>;\n\ntype IconButtonComponent = <C extends React.ElementType = 'button'>(\n  props: IconButtonProps<C> & { ref?: React.ForwardedRef<IconButtonElement> },\n) => React.ReactElement | null;\n\nconst IconButton = React.forwardRef(\n  (\n    { className, ...props }: IconButtonProps,\n    forwardedRef: React.ForwardedRef<IconButtonElement>,\n  ) => {\n    // Warn in development if no accessibility attributes are provided\n    if (process.env.NODE_ENV === 'development') {\n      const hasAriaLabel = 'aria-label' in props && props['aria-label'];\n      const hasAriaLabelledBy = 'aria-labelledby' in props && props['aria-labelledby'];\n      const hasChildren = 'children' in props && props.children;\n\n      if (!hasAriaLabel && !hasAriaLabelledBy && !hasChildren) {\n        console.warn(\n          'IconButton: Icon buttons must have an accessible name. Please provide either:' +\n            '\\n- aria-label prop with descriptive text' +\n            '\\n- aria-labelledby prop referencing a label element' +\n            '\\n- or visible text children',\n        );\n      }\n    }\n\n    return (\n      <BaseButton\n        {...props}\n        ref={forwardedRef}\n        className={classNames('rt-IconButton', className)}\n      />\n    );\n  },\n) as IconButtonComponent & { displayName?: string };\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton };\nexport type { IconButtonProps };\n"],
+  "mappings": "AAAA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aAEvB,OAAS,cAAAC,MAAkB,6BAsB3B,MAAMC,EAAaH,EAAM,WACvB,CACE,CAAE,UAAAI,EAAW,GAAGC,CAAM,EACtBC,IAmBEN,EAAA,cAACE,EAAA,CACE,GAAGG,EACJ,IAAKC,EACL,UAAWL,EAAW,gBAAiBG,CAAS,EAClD,CAGN,EAEAD,EAAW,YAAc",
   "names": ["React", "classNames", "BaseButton", "IconButton", "className", "props", "forwardedRef"]
 }

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"],
+  "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"]
 }

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

@@ -1,11 +1,24 @@
 import * as React from 'react';
-import { IconButton } from './icon-button.js';
-interface ToggleIconButtonProps extends React.ComponentPropsWithoutRef<typeof IconButton> {
+type ButtonVariant = 'classic' | 'solid' | 'soft' | 'surface' | 'outline' | 'ghost';
+type ButtonSize = '1' | '2' | '3' | '4';
+type ButtonColor = 'gray' | 'gold' | 'bronze' | 'brown' | 'yellow' | 'amber' | 'orange' | 'tomato' | 'red' | 'ruby' | 'crimson' | 'pink' | 'plum' | 'purple' | 'violet' | 'iris' | 'indigo' | 'blue' | 'cyan' | 'teal' | 'jade' | 'green' | 'grass' | 'lime' | 'mint' | 'sky';
+type ButtonRadius = 'none' | 'small' | 'medium' | 'large' | 'full';
+interface ToggleIconButtonProps {
     pressed?: boolean;
     onPressedChange?: (pressed: boolean) => void;
     defaultPressed?: boolean;
+    'aria-label': string;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    color?: ButtonColor;
+    highContrast?: boolean;
+    radius?: ButtonRadius;
+    disabled?: boolean;
+    loading?: boolean;
+    className?: string;
+    children?: React.ReactNode;
 }
-declare const ToggleIconButton: React.ForwardRefExoticComponent<Omit<ToggleIconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const ToggleIconButton: React.ForwardRefExoticComponent<ToggleIconButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { ToggleIconButton };
 export type { ToggleIconButtonProps };
 //# sourceMappingURL=toggle-icon-button.d.ts.map

package/dist/esm/components/toggle-icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,UAAU,qBAAsB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,UAAU,CAAC;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAID,QAAA,MAAM,gBAAgB,8GAarB,CAAC;AAGF,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC5B,YAAY,EAAE,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"toggle-icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,KAAK,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AACpF,KAAK,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AACxC,KAAK,WAAW,GACZ,MAAM,GACN,MAAM,GACN,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,KAAK,GACL,MAAM,GACN,SAAS,GACT,MAAM,GACN,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,MAAM,GACN,MAAM,GACN,MAAM,GACN,MAAM,GACN,OAAO,GACP,OAAO,GACP,MAAM,GACN,MAAM,GACN,KAAK,CAAC;AACV,KAAK,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnE,UAAU,qBAAqB;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAID,QAAA,MAAM,gBAAgB,iGAarB,CAAC;AAGF,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC5B,YAAY,EAAE,qBAAqB,EAAE,CAAC"}

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

@@ -1,2 +1,2 @@
-import*as o from"react";import{Toggle as l}from"radix-ui";import{IconButton as p}from"./icon-button.js";const e=o.forwardRef(({pressed:t,onPressedChange:n,defaultPressed:r,...s},g)=>o.createElement(l.Root,{pressed:t,onPressedChange:n,defaultPressed:r,asChild:!0},o.createElement(p,{...s,ref:g})));e.displayName="ToggleIconButton";export{e as ToggleIconButton};
+import*as o from"react";import{Toggle as s}from"radix-ui";import{IconButton as i}from"./icon-button.js";const e=o.forwardRef(({pressed:t,onPressedChange:n,defaultPressed:r,...a},l)=>o.createElement(s.Root,{pressed:t,onPressedChange:n,defaultPressed:r,asChild:!0},o.createElement(i,{...a,ref:l})));e.displayName="ToggleIconButton";export{e as ToggleIconButton};
 //# sourceMappingURL=toggle-icon-button.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/toggle-icon-button.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport { Toggle } from 'radix-ui';\nimport { IconButton } from './icon-button.js';\n\ninterface ToggleIconButtonProps extends React.ComponentPropsWithoutRef<typeof IconButton> {\n  pressed?: boolean;\n  onPressedChange?: (pressed: boolean) => void;\n  defaultPressed?: boolean;\n}\n\ntype ToggleIconButtonElement = React.ElementRef<typeof IconButton>;\n\nconst ToggleIconButton = React.forwardRef<ToggleIconButtonElement, ToggleIconButtonProps>(\n  ({ pressed, onPressedChange, defaultPressed, ...iconButtonProps }, forwardedRef) => {\n    return (\n      <Toggle.Root\n        pressed={pressed}\n        onPressedChange={onPressedChange}\n        defaultPressed={defaultPressed}\n        asChild\n      >\n        <IconButton {...iconButtonProps} ref={forwardedRef} />\n      </Toggle.Root>\n    );\n  },\n);\nToggleIconButton.displayName = 'ToggleIconButton';\n\nexport { ToggleIconButton };\nexport type { ToggleIconButtonProps };\n"],
-  "mappings": "AAAA,UAAYA,MAAW,QACvB,OAAS,UAAAC,MAAc,WACvB,OAAS,cAAAC,MAAkB,mBAU3B,MAAMC,EAAmBH,EAAM,WAC7B,CAAC,CAAE,QAAAI,EAAS,gBAAAC,EAAiB,eAAAC,EAAgB,GAAGC,CAAgB,EAAGC,IAE/DR,EAAA,cAACC,EAAO,KAAP,CACC,QAASG,EACT,gBAAiBC,EACjB,eAAgBC,EAChB,QAAO,IAEPN,EAAA,cAACE,EAAA,CAAY,GAAGK,EAAiB,IAAKC,EAAc,CACtD,CAGN,EACAL,EAAiB,YAAc",
+  "sourcesContent": ["import * as React from 'react';\nimport { Toggle } from 'radix-ui';\nimport { IconButton } from './icon-button.js';\nimport type { BaseButtonProps } from './_internal/base-button.js';\n\n// Extract the specific types we need\ntype ButtonVariant = 'classic' | 'solid' | 'soft' | 'surface' | 'outline' | 'ghost';\ntype ButtonSize = '1' | '2' | '3' | '4';\ntype ButtonColor =\n  | 'gray'\n  | 'gold'\n  | 'bronze'\n  | 'brown'\n  | 'yellow'\n  | 'amber'\n  | 'orange'\n  | 'tomato'\n  | 'red'\n  | 'ruby'\n  | 'crimson'\n  | 'pink'\n  | 'plum'\n  | 'purple'\n  | 'violet'\n  | 'iris'\n  | 'indigo'\n  | 'blue'\n  | 'cyan'\n  | 'teal'\n  | 'jade'\n  | 'green'\n  | 'grass'\n  | 'lime'\n  | 'mint'\n  | 'sky';\ntype ButtonRadius = 'none' | 'small' | 'medium' | 'large' | 'full';\n\ninterface ToggleIconButtonProps {\n  pressed?: boolean;\n  onPressedChange?: (pressed: boolean) => void;\n  defaultPressed?: boolean;\n  'aria-label': string;\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  color?: ButtonColor;\n  highContrast?: boolean;\n  radius?: ButtonRadius;\n  disabled?: boolean;\n  loading?: boolean;\n  className?: string;\n  children?: React.ReactNode;\n}\n\ntype ToggleIconButtonElement = React.ElementRef<typeof IconButton>;\n\nconst ToggleIconButton = React.forwardRef<ToggleIconButtonElement, ToggleIconButtonProps>(\n  ({ pressed, onPressedChange, defaultPressed, ...iconButtonProps }, forwardedRef) => {\n    return (\n      <Toggle.Root\n        pressed={pressed}\n        onPressedChange={onPressedChange}\n        defaultPressed={defaultPressed}\n        asChild\n      >\n        <IconButton {...iconButtonProps} ref={forwardedRef} />\n      </Toggle.Root>\n    );\n  },\n);\nToggleIconButton.displayName = 'ToggleIconButton';\n\nexport { ToggleIconButton };\nexport type { ToggleIconButtonProps };\n"],
+  "mappings": "AAAA,UAAYA,MAAW,QACvB,OAAS,UAAAC,MAAc,WACvB,OAAS,cAAAC,MAAkB,mBAqD3B,MAAMC,EAAmBH,EAAM,WAC7B,CAAC,CAAE,QAAAI,EAAS,gBAAAC,EAAiB,eAAAC,EAAgB,GAAGC,CAAgB,EAAGC,IAE/DR,EAAA,cAACC,EAAO,KAAP,CACC,QAASG,EACT,gBAAiBC,EACjB,eAAgBC,EAChB,QAAO,IAEPN,EAAA,cAACE,EAAA,CAAY,GAAGK,EAAiB,IAAKC,EAAc,CACtD,CAGN,EACAL,EAAiB,YAAc",
   "names": ["React", "Toggle", "IconButton", "ToggleIconButton", "pressed", "onPressedChange", "defaultPressed", "iconButtonProps", "forwardedRef"]
 }

package/package.json

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

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

@@ -1,10 +1,15 @@
 .rt-BaseButton {
+  all: unset;
+  box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   user-select: none;
-  vertical-align: top;
+  position: relative;
+  cursor: default;
+  gap: var(--base-button-gap);
+  transition: var(--transition-button);
 
   font-family: var(--default-font-family);
   font-style: normal;
@@ -12,10 +17,28 @@
 
   &:where([data-disabled]) {
     --spinner-opacity: 1;
+    /* Disabled cursor and interaction prevention */
+    cursor: not-allowed;
+    pointer-events: none;
   }
 
   &:where(.rt-loading) {
     position: relative;
+    cursor: wait;
+  }
+
+  /* Scale animation on press for all button variants */
+  &:where(:active:not([data-disabled], [data-state='open'])) {
+    transform: scale(0.98);
+  }
+
+  /* Reduced motion support for transforms */
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+
+    &:where(:active:not([data-disabled], [data-state='open'])) {
+      transform: none;
+    }
   }
 
   height: var(--base-button-height);
@@ -71,6 +94,8 @@
   --base-button-classic-hover-shadow: var(--shadow-3);
   --base-button-classic-active-shadow: var(--shadow-2);
   --base-button-classic-disabled-shadow: none;
+  --base-button-classic-hover-filter: brightness(1.08) saturate(1.02) contrast(1.02);
+  --base-button-classic-active-filter: brightness(0.88) saturate(1.05) contrast(1.1);
 }
 /* prettier-ignore */
 :is(.dark, .dark-theme),
@@ -79,6 +104,8 @@
   --base-button-classic-hover-shadow: var(--shadow-3);
   --base-button-classic-active-shadow: var(--shadow-2);
   --base-button-classic-disabled-shadow: none;
+  --base-button-classic-hover-filter: brightness(1.12) saturate(1.05) contrast(1.02);
+  --base-button-classic-active-filter: brightness(0.92) saturate(1.1) contrast(1.05);
 }
 
 .rt-BaseButton:where(.rt-variant-classic) {
@@ -108,8 +135,9 @@
   }
   @media (hover: hover) {
     &:where(:hover) {
-      background: linear-gradient(to bottom, var(--accent-10), var(--accent-11));
+      background: linear-gradient(to bottom, var(--accent-9), var(--accent-10));
       box-shadow: var(--base-button-classic-hover-shadow);
+      filter: var(--base-button-classic-hover-filter);
       &:where(.rt-high-contrast) {
         background: linear-gradient(to bottom, var(--accent-11), var(--accent-12));
         filter: contrast(0.88) saturate(1.1) brightness(1.1);
@@ -122,8 +150,9 @@
     }
   }
   &:where([data-state='open']) {
-    background: linear-gradient(to bottom, var(--accent-10), var(--accent-11));
+    background: linear-gradient(to bottom, var(--accent-9), var(--accent-10));
     box-shadow: var(--base-button-classic-hover-shadow);
+    filter: var(--base-button-classic-hover-filter);
     &:where(.rt-high-contrast) {
       background: linear-gradient(to bottom, var(--accent-11), var(--accent-12));
       filter: contrast(0.88) saturate(1.1) brightness(1.1);
@@ -135,11 +164,12 @@
     }
   }
   &:where(:active:not([data-state='open'], [data-disabled])) {
-    background: linear-gradient(to bottom, var(--accent-10), var(--accent-9));
+    background: linear-gradient(to bottom, var(--accent-9), var(--accent-10));
     box-shadow: var(--base-button-classic-active-shadow);
+    filter: var(--base-button-classic-active-filter);
 
     &:where(.rt-high-contrast) {
-      background: linear-gradient(to bottom, var(--accent-12), var(--accent-11));
+      background: linear-gradient(to bottom, var(--accent-11), var(--accent-12));
       filter: contrast(0.82) saturate(1.2) brightness(1.16);
 
       /* Use solid color for non-gray accent colors */
@@ -154,6 +184,8 @@
     box-shadow: var(--base-button-classic-disabled-shadow);
     outline: none;
     filter: none;
+    cursor: not-allowed;
+    pointer-events: none;
   }
 }
 
@@ -222,6 +254,8 @@
     background-color: var(--gray-a3);
     outline: none;
     filter: none;
+    cursor: not-allowed;
+    pointer-events: none;
   }
 }
 
@@ -236,6 +270,8 @@
   &:where([data-disabled]) {
     color: var(--gray-a8);
     background-color: var(--gray-a3);
+    cursor: not-allowed;
+    pointer-events: none;
   }
 }
 
@@ -260,6 +296,8 @@
   &:where([data-disabled]) {
     color: var(--gray-a8);
     background-color: var(--gray-a3);
+    cursor: not-allowed;
+    pointer-events: none;
   }
 }
 
@@ -282,6 +320,8 @@
   &:where([data-disabled]) {
     color: var(--gray-a8);
     background-color: transparent;
+    cursor: not-allowed;
+    pointer-events: none;
   }
 }
 
@@ -316,6 +356,8 @@
     color: var(--gray-a8);
     box-shadow: inset 0 0 0 1px var(--gray-a7);
     background-color: transparent;
+    cursor: not-allowed;
+    pointer-events: none;
   }
 }
 
@@ -349,5 +391,127 @@
     color: var(--gray-a8);
     box-shadow: inset 0 0 0 1px var(--gray-a6);
     background-color: var(--gray-a2);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * TOGGLE PRESSED STATES                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+/* 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;
+  }
+
+  /* Classic variant pressed */
+  &:where(.rt-variant-classic) {
+    background: linear-gradient(to bottom, var(--accent-9), var(--accent-10));
+    box-shadow: var(--base-button-classic-active-shadow);
+    filter: var(--base-button-classic-active-filter);
+
+    &:where(.rt-high-contrast) {
+      background: linear-gradient(to bottom, var(--accent-11), var(--accent-12));
+      filter: contrast(0.82) saturate(1.2) brightness(1.16);
+
+      &:where(:not([data-accent-color='gray'])) {
+        background: var(--accent-12);
+      }
+    }
+  }
+
+  /* Solid variant pressed */
+  &:where(.rt-variant-solid) {
+    background-color: var(--accent-10);
+    filter: var(--base-button-solid-active-filter);
+
+    &:where(.rt-high-contrast) {
+      background-color: var(--accent-12);
+      filter: var(--base-button-solid-high-contrast-active-filter);
+    }
+  }
+
+  /* Soft variant pressed */
+  &:where(.rt-variant-soft) {
+    background-color: var(--accent-a5);
+  }
+
+  /* Ghost variant pressed */
+  &:where(.rt-variant-ghost) {
+    background-color: var(--accent-a4);
+  }
+
+  /* Outline variant pressed */
+  &:where(.rt-variant-outline) {
+    background-color: var(--accent-a3);
+  }
+
+  /* Surface variant pressed */
+  &:where(.rt-variant-surface) {
+    background-color: var(--accent-a3);
+    box-shadow: inset 0 0 0 1px var(--accent-a8);
+  }
+}
+
+/* Disabled state for ALL toggle buttons (pressed and unpressed) */
+.rt-BaseButton:where([disabled][aria-pressed]) {
+  /* Remove scale transform when disabled */
+  transform: none;
+
+  /* Apply consistent disabled styling across all variants */
+  color: var(--gray-a8);
+  background-color: var(--gray-a3);
+  background: var(--gray-a3);
+  box-shadow: none;
+  filter: none;
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+
+  /* Override any pressed state styling with higher specificity */
+  &:where([data-state='on']) {
+    transform: none;
+    background: var(--gray-a3);
+    background-color: var(--gray-a3);
+    box-shadow: none;
+    filter: none;
+  }
+
+  /* Override variant-specific pressed states */
+  &:where(.rt-variant-classic) {
+    background: var(--gray-a3);
+    box-shadow: none;
+    filter: none;
+  }
+
+  &:where(.rt-variant-solid) {
+    background-color: var(--gray-a3);
+    filter: none;
+  }
+
+  &:where(.rt-variant-soft) {
+    background-color: var(--gray-a3);
+  }
+
+  &:where(.rt-variant-ghost) {
+    background-color: var(--gray-a3);
+  }
+
+  &:where(.rt-variant-outline) {
+    background-color: var(--gray-a3);
+    box-shadow: none;
+  }
+
+  &:where(.rt-variant-surface) {
+    background-color: var(--gray-a3);
+    box-shadow: none;
   }
 }

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

@@ -17,12 +17,12 @@ import type { GetPropDefTypes } from '../../props/prop-def.js';
 type BaseButtonElement = React.ElementRef<'button'>;
 type BaseButtonOwnProps = GetPropDefTypes<typeof baseButtonPropDefs>;
 
-// Polymorphic types
+// Polymorphic types using the proper ComponentPropsWithout pattern
 type PolymorphicBaseButtonProps<C extends React.ElementType = 'button'> = {
   as?: C;
 } & BaseButtonOwnProps &
   MarginProps &
-  Omit<React.ComponentPropsWithoutRef<C>, keyof BaseButtonOwnProps | keyof MarginProps | 'as'>;
+  ComponentPropsWithout<C, RemovedProps | keyof BaseButtonOwnProps | keyof MarginProps | 'as'>;
 
 interface BaseButtonProps extends PolymorphicBaseButtonProps {}
 
@@ -46,6 +46,19 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props,
   const shouldPassDisabled =
     asChild || !as || ['button', 'input', 'textarea', 'select'].includes(as);
 
+  // Generate unique ID for loading announcements
+  const loadingId = React.useId();
+  const describedById = props.loading ? `${loadingId}-loading` : undefined;
+
+  // Enhanced accessibility props for loading state
+  const accessibilityProps = props.loading
+    ? {
+        'aria-busy': true,
+        'aria-disabled': true,
+        'aria-describedby': describedById,
+      }
+    : {};
+
   return (
     <Comp
       // The `data-disabled` attribute enables correct styles when doing `<Button asChild disabled>`
@@ -53,6 +66,7 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props,
       data-accent-color={color}
       data-radius={radius}
       {...baseButtonProps}
+      {...accessibilityProps}
       ref={forwardedRef}
       className={classNames('rt-reset', 'rt-BaseButton', className)}
       {...(shouldPassDisabled && { disabled })}
@@ -69,11 +83,19 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props,
           <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>
             {children}
           </span>
-          <VisuallyHidden>{children}</VisuallyHidden>
+
+          {/* Enhanced accessibility for loading state */}
+          <VisuallyHidden>
+            <span id={describedById}>Loading, please wait...</span>
+            {children}
+          </VisuallyHidden>
 
           <Flex asChild align="center" justify="center" position="absolute" inset="0">
             <span>
-              <Spinner size={mapResponsiveProp(size, mapButtonSizeToSpinnerSize)} />
+              <Spinner
+                size={mapResponsiveProp(size, mapButtonSizeToSpinnerSize)}
+                aria-hidden="true"
+              />
             </span>
           </Flex>
         </>

package/src/components/checkbox-cards.tsx

@@ -47,7 +47,7 @@ const CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCar
     const { __scopeCheckboxCards, className, color, ...rootProps } = extractProps(
       props,
       checkboxCardsRootPropDefs,
-      marginPropDefs
+      marginPropDefs,
     );
     const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxCards);
     return (
@@ -67,7 +67,7 @@ const CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCar
         </Grid>
       </CheckboxCardsProvider>
     );
-  }
+  },
 );
 CheckboxCardsRoot.displayName = 'CheckboxCards.Root';
 
@@ -85,7 +85,7 @@ const CheckboxCardsItem = React.forwardRef<
     // Pass size / highContrast values from the context and static variant to generate styles
     { size: context?.size, variant: 'surface', highContrast: context?.highContrast },
     // Pass size & variant prop defs to allow it to be extracted
-    baseCheckboxPropDefs
+    baseCheckboxPropDefs,
   );
   return (
     <label className={classNames('rt-BaseCard', 'rt-CheckboxCardsItem', className)} style={style}>
@@ -98,7 +98,7 @@ const CheckboxCardsItem = React.forwardRef<
           'rt-reset',
           'rt-BaseCheckboxRoot',
           'rt-CheckboxCardCheckbox',
-          checkboxClassName
+          checkboxClassName,
         )}
       >
         <CheckboxGroupPrimitive.Indicator

package/src/components/icon-button.tsx

@@ -6,8 +6,14 @@ import type { BaseButtonProps } from './_internal/base-button.js';
 
 type IconButtonElement = React.ElementRef<typeof BaseButton>;
 
-// Polymorphic IconButton props
-type IconButtonOwnProps = Omit<BaseButtonProps, 'as'>;
+// Required accessibility props for icon buttons
+type AccessibilityProps =
+  | { 'aria-label': string; 'aria-labelledby'?: never }
+  | { 'aria-label'?: never; 'aria-labelledby': string }
+  | { 'aria-label'?: never; 'aria-labelledby'?: never; children: React.ReactNode };
+
+// Polymorphic IconButton props with required accessibility
+type IconButtonOwnProps = Omit<BaseButtonProps, 'as'> & AccessibilityProps;
 
 type IconButtonProps<C extends React.ElementType = 'button'> = IconButtonOwnProps & {
   as?: C;
@@ -21,9 +27,31 @@ const IconButton = React.forwardRef(
   (
     { className, ...props }: IconButtonProps,
     forwardedRef: React.ForwardedRef<IconButtonElement>,
-  ) => (
-    <BaseButton {...props} ref={forwardedRef} className={classNames('rt-IconButton', className)} />
-  ),
+  ) => {
+    // Warn in development if no accessibility attributes are provided
+    if (process.env.NODE_ENV === 'development') {
+      const hasAriaLabel = 'aria-label' in props && props['aria-label'];
+      const hasAriaLabelledBy = 'aria-labelledby' in props && props['aria-labelledby'];
+      const hasChildren = 'children' in props && props.children;
+
+      if (!hasAriaLabel && !hasAriaLabelledBy && !hasChildren) {
+        console.warn(
+          'IconButton: Icon buttons must have an accessible name. Please provide either:' +
+            '\n- aria-label prop with descriptive text' +
+            '\n- aria-labelledby prop referencing a label element' +
+            '\n- or visible text children',
+        );
+      }
+    }
+
+    return (
+      <BaseButton
+        {...props}
+        ref={forwardedRef}
+        className={classNames('rt-IconButton', className)}
+      />
+    );
+  },
 ) as IconButtonComponent & { displayName?: string };
 
 IconButton.displayName = 'IconButton';

package/src/components/radio-cards.tsx

@@ -25,7 +25,7 @@ const RadioCardsRoot = React.forwardRef<RadioCardsRootElement, RadioCardsRootPro
     const { className, color, ...rootProps } = extractProps(
       props,
       radioCardsRootPropDefs,
-      marginPropDefs
+      marginPropDefs,
     );
     return (
       <Grid asChild>
@@ -37,7 +37,7 @@ const RadioCardsRoot = React.forwardRef<RadioCardsRootElement, RadioCardsRootPro
         />
       </Grid>
     );
-  }
+  },
 );
 RadioCardsRoot.displayName = 'RadioCards.Root';
 
@@ -53,7 +53,7 @@ const RadioCardsItem = React.forwardRef<RadioCardsItemElement, RadioCardsItemPro
       ref={forwardedRef}
       className={classNames('rt-reset', 'rt-BaseCard', 'rt-RadioCardsItem', className)}
     />
-  )
+  ),
 );
 RadioCardsItem.displayName = 'RadioCards.Item';