@stack-spot/citric-react 0.9.0 → 0.10.1

package/dist/citric.css

@@ -648,11 +648,11 @@
       margin-left: 6px;
     }
     &.asc:after {
-      content: var(--citric-icon-fill-ChevronUpFill);
+      content: var(--citric-icon-fill-ChevronUp);
       font-family: CitricIconsFill;
     }
     &.desc:after {
-      content: var(--citric-icon-fill-ChevronDownFill);
+      content: var(--citric-icon-fill-ChevronDown);
       font-family: CitricIconsFill;
     }
   }
@@ -1299,7 +1299,7 @@ input[type="range"][data-citric="slider"] {
 
 [data-citric="rating"] {
   --icon: var(--citric-icon-outline-Star);
-  --icon-fill: var(--citric-icon-fill-StarFill);
+  --icon-fill: var(--citric-icon-fill-Star);
   display: flex;
   flex-direction: row-reverse;
   width: fit-content;
@@ -1971,7 +1971,7 @@ input[type="reset"][data-citric="icon-box"], .apply-citric input[type="reset"].c
 
 input[data-citric="favorite"][type="checkbox"] {
   --icon: var(--citric-icon-outline-Star);
-  --icon-fill: var(--citric-icon-fill-StarFill);
+  --icon-fill: var(--citric-icon-fill-Star);
   --height: 42px;
   display: flex;
   align-items: center;

package/dist/components/IconBox.d.ts

@@ -1,11 +1,11 @@
-import { IconGroup, IconOwnProps } from '@stack-spot/citric-icons';
+import { BaseIconProps, IconGroup } from '@stack-spot/citric-icons';
 import { HTMLTag, WithColorPalette, WithColorScheme } from '../types.js';
 type IconBoxTag = 'a' | 'button' | 'i' | 'span' | 'div';
-export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> extends Partial<IconOwnProps<G>>, WithColorScheme, WithColorPalette {
+export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> extends BaseIconProps<G>, WithColorScheme, WithColorPalette {
     /**
      * The HTML element to render.
      *
-     * @default "'i' if the icon is provided, 'span' otherwise"
+     * @default 'i'
      */
     tag?: T;
     /**
@@ -13,7 +13,7 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
      *
      * @default 'circle'
      */
-    appearance?: 'circle' | 'square' | 'text';
+    appearance?: 'circle' | 'square';
     /**
      * Size of the box.
      *
@@ -36,14 +36,14 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
      */
     analytics?: boolean;
 }
-export type IconBoxProps<T extends IconBoxTag, G extends IconGroup> = HTMLTag[T] & BaseIconBoxProps<T, G>;
-export declare function IconBox<T extends IconBoxTag = 'i', G extends IconGroup = 'outline'>({ group, icon, tag, colorScheme, colorPalette, appearance, size, className, analytics, onClick, feedback, children, ...props }: IconBoxProps<T, G>): import("react/jsx-runtime").JSX.Element;
+export type IconBoxProps<T extends IconBoxTag, G extends IconGroup> = Omit<HTMLTag[T], 'children'> & BaseIconBoxProps<T, G>;
+export declare function IconBox<T extends IconBoxTag = 'i', G extends IconGroup = 'outline'>({ group, icon, tag, colorScheme, colorPalette, appearance, size, className, analytics, onClick, feedback, ...props }: IconBoxProps<T, G>): import("react/jsx-runtime").JSX.Element;
 /**
- * Shortcut to <IconBox tag="button" />
+ * Shortcut to `<IconBox tag="button" />`
  */
 export declare function IconButton<G extends IconGroup = 'outline'>(props: Omit<IconBoxProps<'button', G>, 'tag'>): import("react/jsx-runtime").JSX.Element;
 /**
- * Shortcut to <IconBox tag="a" />
+ * Shortcut to `<IconBox tag="a" />`
  */
 export declare function IconLink<G extends IconGroup = 'outline'>(props: Omit<IconBoxProps<'a', G>, 'tag'>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/IconBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconBox.d.ts","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIlE,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAGrE,KAAK,UAAU,GAAG,GAAG,GAAG,QAAQ,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,CAAA;AAEvD,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,CAAE,SAC3E,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,gBAAgB;IAC3D;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC1C;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AAEzG,wBAAgB,OAAO,CAAC,CAAC,SAAS,UAAU,GAAG,GAAG,EAAE,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,EACnF,KAAK,EACL,IAAI,EACJ,GAAG,EACH,WAAW,EACX,YAAY,EACZ,UAAU,EACV,IAAI,EACJ,SAAS,EACT,SAAS,EACT,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,2CAsBpB;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,2CAExG;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,2CAEjG"}
+{"version":3,"file":"IconBox.d.ts","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAInE,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAGrE,KAAK,UAAU,GAAG,GAAG,GAAG,QAAQ,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,CAAA;AAEvD,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,gBAAgB;IACtI;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,GAAG,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AAE3H,wBAAgB,OAAO,CAAC,CAAC,SAAS,UAAU,GAAG,GAAG,EAAE,CAAC,SAAS,SAAS,GAAG,SAAS,EACjF,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,2CAoBzI;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,2CAExG;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,2CAEjG"}

package/dist/components/IconBox.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { listToClass } from '@stack-spot/portal-theme';
 import { useCallback } from 'react';
 import { useCitricController } from '../context/hooks.js';
-import { asCitricProps, CitricComponent } from './CitricComponent.js';
-export function IconBox({ group, icon, tag, colorScheme, colorPalette, appearance, size, className, analytics, onClick, feedback, children, ...props }) {
+import { CitricComponent } from './CitricComponent.js';
+export function IconBox({ group, icon, tag, colorScheme, colorPalette, appearance, size, className, analytics, onClick, feedback, ...props }) {
     const citric = useCitricController();
     const handleClick = useCallback((e) => {
         onClick?.(e);
@@ -12,27 +12,16 @@ export function IconBox({ group, icon, tag, colorScheme, colorPalette, appearanc
         else if (tag === 'a')
             citric?.onClickLink?.(e, analytics ?? false);
     }, [tag]);
-    const allProps = {
-        component: 'icon-box',
-        className: listToClass([icon && 'citric-icon', icon && (group || 'outline'), icon, appearance, size, className]),
-        colorScheme: colorScheme,
-        colorPalette: colorPalette,
-        'data-feedback': feedback || undefined,
-        onClick: ['button', 'a'].includes(tag ?? '') ? handleClick : onClick,
-        ...props,
-    };
-    if (tag === 'a' && citric?.renderLink)
-        return citric.renderLink(asCitricProps(allProps));
-    return _jsx(CitricComponent, { tag: (tag || (icon ? 'i' : 'span')), ...allProps, children: children });
+    return _jsx(CitricComponent, { tag: (tag || 'i'), component: "icon-box", className: listToClass(['citric-icon', group || 'outline', icon, appearance, size, className]), colorScheme: colorScheme, colorPalette: colorPalette, "data-feedback": feedback || undefined, onClick: ['button', 'a'].includes(tag ?? '') ? handleClick : onClick, ...props });
 }
 /**
- * Shortcut to <IconBox tag="button" />
+ * Shortcut to `<IconBox tag="button" />`
  */
 export function IconButton(props) {
     return IconBox({ ...props, tag: 'button', type: props.type || 'button' });
 }
 /**
- * Shortcut to <IconBox tag="a" />
+ * Shortcut to `<IconBox tag="a" />`
  */
 export function IconLink(props) {
     return IconBox({ ...props, tag: 'a' });

package/dist/components/IconBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconBox.js","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA2ClE,MAAM,UAAU,OAAO,CAA8D,EACnF,KAAK,EACL,IAAI,EACJ,GAAG,EACH,WAAW,EACX,YAAY,EACZ,UAAU,EACV,IAAI,EACJ,SAAS,EACT,SAAS,EACT,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACW;IACnB,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAwB,EAAE,EAAE;QAC3D,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QACZ,IAAI,GAAG,KAAK,QAAQ;YAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;aAC/D,IAAI,GAAG,KAAK,GAAG;YAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;IACpE,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IAET,MAAM,QAAQ,GAAG;QACf,SAAS,EAAE,UAAU;QACrB,SAAS,EAAE,WAAW,CAAC,CAAC,IAAI,IAAI,aAAa,EAAE,IAAI,IAAI,CAAC,KAAK,IAAI,SAAS,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC;QAChH,WAAW,EAAE,WAAW;QACxB,YAAY,EAAE,YAAY;QAC1B,eAAe,EAAE,QAAQ,IAAI,SAAS;QACtC,OAAO,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO;QACpE,GAAG,KAAK;KACA,CAAA;IAEV,IAAI,GAAG,KAAK,GAAG,IAAI,MAAM,EAAE,UAAU;QAAE,OAAO,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAA;IAExF,OAAO,KAAC,eAAe,IAAC,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAQ,KAAM,QAAQ,YAAG,QAAQ,GAAmB,CAAA;AAChH,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,UAAU,CAAkC,KAA6C;IACvG,OAAO,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,QAAQ,EAAE,CAAC,CAAA;AAC3E,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAkC,KAAwC;IAChG,OAAO,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAA;AACxC,CAAC"}
+{"version":3,"file":"IconBox.js","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA0CnD,MAAM,UAAU,OAAO,CACrB,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAsB;IAExI,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAwB,EAAE,EAAE;QAC3D,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QACZ,IAAI,GAAG,KAAK,QAAQ;YAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;aAC/D,IAAI,GAAG,KAAK,GAAG;YAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;IACpE,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IAET,OAAO,KAAC,eAAe,IACrB,GAAG,EAAE,CAAC,GAAG,IAAI,GAAG,CAAQ,EACxB,SAAS,EAAC,UAAU,EACpB,SAAS,EAAE,WAAW,CAAC,CAAC,aAAa,EAAE,KAAK,IAAI,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,EAC9F,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,mBACX,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,KAChE,KAAK,GACT,CAAA;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,UAAU,CAAkC,KAA6C;IACvG,OAAO,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,QAAQ,EAAE,CAAC,CAAA;AAC3E,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAkC,KAAwC;IAChG,OAAO,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAA;AACxC,CAAC"}

package/dist/components/Tabs/types.d.ts

@@ -1,6 +1,6 @@
 import { WithColorPalette, WithColorScheme } from '../../types.js';
 import { TabController } from './TabController.js';
-export interface Tab<Key extends string> {
+export interface Tab<Key extends string = string> {
     /**
      * A unique identifier for the tab.
      */

package/dist/components/Tabs/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,MAAM,WAAW,GAAG,CAAC,GAAG,SAAS,MAAM;IACrC;;OAEG;IACH,GAAG,EAAE,GAAG,CAAC;IACT;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa,CAAC,GAAG,SAAS,MAAM,CAAE,SAAQ,eAAe,EAAE,gBAAgB;IAC1F;;OAEG;IACH,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;CACjC;AAED,MAAM,MAAM,SAAS,CAAC,GAAG,SAAS,MAAM,IAAI,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,aAAa,CAAC,GAAG,CAAC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,MAAM,WAAW,GAAG,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IAC9C;;OAEG;IACH,GAAG,EAAE,GAAG,CAAC;IACT;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa,CAAC,GAAG,SAAS,MAAM,CAAE,SAAQ,eAAe,EAAE,gBAAgB;IAC1F;;OAEG;IACH,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;CACjC;AAED,MAAM,MAAM,SAAS,CAAC,GAAG,SAAS,MAAM,IAAI,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,aAAa,CAAC,GAAG,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/citric-react",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "author": "StackSpot",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -15,8 +15,8 @@
     "url": "https://github.com/stack-spot/citric"
   },
   "peerDependencies": {
-    "@stack-spot/citric-icons": ">=0.1.1",
-    "@stack-spot/portal-theme": ">=1.2.0",
+    "@stack-spot/citric-icons": ">=0.2.1",
+    "@stack-spot/portal-theme": ">=1.2.1",
     "@stack-spot/portal-translate": ">=1.2.2",
     "lodash": ">=4.17.21",
     "react": ">=18",

package/src/components/IconBox.tsx

@@ -1,18 +1,17 @@
-import { IconGroup, IconOwnProps } from '@stack-spot/citric-icons'
+import { BaseIconProps, IconGroup } from '@stack-spot/citric-icons'
 import { listToClass } from '@stack-spot/portal-theme'
 import { useCallback } from 'react'
 import { useCitricController } from '../context/hooks'
 import { HTMLTag, WithColorPalette, WithColorScheme } from '../types'
-import { asCitricProps, CitricComponent } from './CitricComponent'
+import { CitricComponent } from './CitricComponent'
 
 type IconBoxTag = 'a' | 'button' | 'i' | 'span' | 'div'
 
-export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> extends
-  Partial<IconOwnProps<G>>, WithColorScheme, WithColorPalette {
+export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> extends BaseIconProps<G>, WithColorScheme, WithColorPalette {
   /**
    * The HTML element to render.
    * 
-   * @default "'i' if the icon is provided, 'span' otherwise"
+   * @default 'i'
    */
   tag?: T,
   /**
@@ -20,7 +19,7 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
    * 
    * @default 'circle'
    */
-  appearance?: 'circle' | 'square' | 'text',
+  appearance?: 'circle' | 'square',
   /**
    * Size of the box.
    * 
@@ -44,23 +43,11 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
   analytics?: boolean,
 }
 
-export type IconBoxProps<T extends IconBoxTag, G extends IconGroup> = HTMLTag[T] & BaseIconBoxProps<T, G>
+export type IconBoxProps<T extends IconBoxTag, G extends IconGroup> = Omit<HTMLTag[T], 'children'> & BaseIconBoxProps<T, G>
 
-export function IconBox<T extends IconBoxTag = 'i', G extends IconGroup = 'outline'>({
-  group,
-  icon,
-  tag,
-  colorScheme,
-  colorPalette,
-  appearance,
-  size,
-  className,
-  analytics,
-  onClick,
-  feedback,
-  children,
-  ...props
-}: IconBoxProps<T, G>) {
+export function IconBox<T extends IconBoxTag = 'i', G extends IconGroup = 'outline'>(
+  { group, icon, tag, colorScheme, colorPalette, appearance, size, className, analytics, onClick, feedback, ...props }: IconBoxProps<T, G>,
+) {
   const citric = useCitricController()
 
   const handleClick = useCallback((e: React.MouseEvent<any>) => {
@@ -69,30 +56,27 @@ export function IconBox<T extends IconBoxTag = 'i', G extends IconGroup = 'outli
     else if (tag === 'a') citric?.onClickLink?.(e, analytics ?? false)
   }, [tag])
 
-  const allProps = {
-    component: 'icon-box',
-    className: listToClass([icon && 'citric-icon', icon && (group || 'outline'), icon, appearance, size, className]),
-    colorScheme: colorScheme,
-    colorPalette: colorPalette,
-    'data-feedback': feedback || undefined,
-    onClick: ['button', 'a'].includes(tag ?? '') ? handleClick : onClick,
-    ...props,
-  } as const
-
-  if (tag === 'a' && citric?.renderLink) return citric.renderLink(asCitricProps(allProps))
-
-  return <CitricComponent tag={(tag || (icon ? 'i' : 'span')) as any} {...allProps}>{children}</CitricComponent>
+  return <CitricComponent
+    tag={(tag || 'i') as any}
+    component="icon-box"
+    className={listToClass(['citric-icon', group || 'outline', icon, appearance, size, className])}
+    colorScheme={colorScheme}
+    colorPalette={colorPalette}
+    data-feedback={feedback || undefined}
+    onClick={['button', 'a'].includes(tag ?? '') ? handleClick : onClick}
+    {...props}
+  />
 }
 
 /**
- * Shortcut to <IconBox tag="button" />
+ * Shortcut to `<IconBox tag="button" />`
  */
 export function IconButton<G extends IconGroup = 'outline'>(props: Omit<IconBoxProps<'button', G>, 'tag'>) {
   return IconBox({ ...props, tag: 'button', type: props.type || 'button' })
 }
 
 /**
- * Shortcut to <IconBox tag="a" />
+ * Shortcut to `<IconBox tag="a" />`
  */
 export function IconLink<G extends IconGroup = 'outline'>(props: Omit<IconBoxProps<'a', G>, 'tag'>) {
   return IconBox({ ...props, tag: 'a' })

package/src/components/Tabs/types.ts

@@ -1,7 +1,7 @@
 import { WithColorPalette, WithColorScheme } from '../../types'
 import { TabController } from './TabController'
 
-export interface Tab<Key extends string> {
+export interface Tab<Key extends string = string> {
   /**
    * A unique identifier for the tab.
    */