@stack-spot/citric-react 0.7.2 → 0.9.0

package/dist/citric.css

@@ -1760,6 +1760,7 @@ nav[data-citric="menu"].rounded-items, [data-citric="menu"].rounded-items nav {
   width: var(--size);
   height: var(--size);
   color: var(--fg);
+  overflow: hidden;
 
   /* Sizes */
 
@@ -1781,6 +1782,10 @@ nav[data-citric="menu"].rounded-items, [data-citric="menu"].rounded-items nav {
     border-radius: var(--radius-xs);
   }
 
+  &.text {
+    background-color: transparent;
+  }
+
   /* Colors */
 
   &[data-color-scheme] {

package/dist/components/Favorite.d.ts

@@ -15,9 +15,14 @@ export interface BaseFavoriteProps {
      */
     appearance?: FavoriteAppearance;
     onChange: (value: boolean) => void;
-    isLoading?: boolean;
+    /**
+     * Whether or not to show the loading feedback.
+     *
+     * If `loading` is true, this button becomes disabled.
+     */
+    loading?: boolean;
 }
 export type FavoriteProps = ControlledInput & BaseFavoriteProps;
-export declare const Favorite: ({ value, size, appearance, onChange, isLoading, className, ...props }: FavoriteProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Favorite: ({ value, size, appearance, onChange, loading, disabled, className, ...props }: FavoriteProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Favorite.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Favorite.d.ts","sourceRoot":"","sources":["../../src/components/Favorite.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAG1C,KAAK,kBAAkB,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAA;AAEtD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,YAAY,CAAC;IACzC;;;;OAIG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,aAAa,GAAG,eAAe,GAAG,iBAAiB,CAAA;AAE/D,eAAO,MAAM,QAAQ,GAAI,uEAAuE,aAAa,4CAUzG,CAAA"}
+{"version":3,"file":"Favorite.d.ts","sourceRoot":"","sources":["../../src/components/Favorite.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAG1C,KAAK,kBAAkB,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAA;AAEtD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,YAAY,CAAC;IACzC;;;;OAIG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,MAAM,aAAa,GAAG,eAAe,GAAG,iBAAiB,CAAA;AAE/D,eAAO,MAAM,QAAQ,GAAI,+EAA+E,aAAa,4CAWjH,CAAA"}

package/dist/components/Favorite.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { listToClass } from '@stack-spot/portal-theme';
 import { CitricComponent } from './CitricComponent.js';
-export const Favorite = ({ value, size, appearance, onChange, isLoading, className, ...props }) => _jsx(CitricComponent, { tag: "input", type: "checkbox", component: "favorite", className: listToClass([appearance, size, className]), checked: !!value, onChange: () => onChange(!value), "aria-busy": isLoading, ...props });
+export const Favorite = ({ value, size, appearance, onChange, loading, disabled, className, ...props }) => _jsx(CitricComponent, { tag: "input", type: "checkbox", component: "favorite", className: listToClass([appearance, size, className]), checked: !!value, onChange: () => onChange(!value), "aria-busy": loading, disabled: loading || disabled, ...props });
 //# sourceMappingURL=Favorite.js.map

package/dist/components/Favorite.js.map

@@ -1 +1 @@
-{"version":3,"file":"Favorite.js","sourceRoot":"","sources":["../../src/components/Favorite.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAwBnD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAiB,EAAE,EAAE,CAC/G,KAAC,eAAe,IACd,GAAG,EAAC,OAAO,EACX,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,UAAU,EACpB,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,EACrD,OAAO,EAAE,CAAC,CAAC,KAAK,EAChB,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,eACrB,SAAS,KAChB,KAAK,GACT,CAAA"}
+{"version":3,"file":"Favorite.js","sourceRoot":"","sources":["../../src/components/Favorite.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA6BnD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAiB,EAAE,EAAE,CACvH,KAAC,eAAe,IACd,GAAG,EAAC,OAAO,EACX,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,UAAU,EACpB,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,EACrD,OAAO,EAAE,CAAC,CAAC,KAAK,EAChB,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,eACrB,OAAO,EAClB,QAAQ,EAAE,OAAO,IAAI,QAAQ,KACzB,KAAK,GACT,CAAA"}

package/dist/components/IconBox.d.ts

@@ -1,11 +1,11 @@
 import { IconGroup, IconOwnProps } 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 IconOwnProps<G>, WithColorScheme, WithColorPalette {
+export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> extends Partial<IconOwnProps<G>>, WithColorScheme, WithColorPalette {
     /**
      * The HTML element to render.
      *
-     * @default 'i'
+     * @default "'i' if the icon is provided, 'span' otherwise"
      */
     tag?: T;
     /**
@@ -13,7 +13,7 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
      *
      * @default 'circle'
      */
-    appearance?: 'circle' | 'square';
+    appearance?: 'circle' | 'square' | 'text';
     /**
      * Size of the box.
      *
@@ -37,7 +37,7 @@ 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, ...props }: IconBoxProps<T, G>): import("react/jsx-runtime").JSX.Element;
+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;
 /**
  * Shortcut to <IconBox tag="button" />
  */

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,SAAQ,YAAY,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,gBAAgB;IACrI;;;;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,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,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,2CAuBzI;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,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"}

package/dist/components/IconBox.js

@@ -3,7 +3,7 @@ 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, ...props }) {
+export function IconBox({ group, icon, tag, colorScheme, colorPalette, appearance, size, className, analytics, onClick, feedback, children, ...props }) {
     const citric = useCitricController();
     const handleClick = useCallback((e) => {
         onClick?.(e);
@@ -12,18 +12,18 @@ export function IconBox({ group, icon, tag, colorScheme, colorPalette, appearanc
         else if (tag === 'a')
             citric?.onClickLink?.(e, analytics ?? false);
     }, [tag]);
-    const citricProps = asCitricProps({
+    const allProps = {
         component: 'icon-box',
-        className: listToClass(['citric-icon', group || 'outline', icon, appearance, size, className]),
+        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(citricProps);
-    return _jsx(CitricComponent, { tag: (tag || 'i'), ...citricProps });
+        return citric.renderLink(asCitricProps(allProps));
+    return _jsx(CitricComponent, { tag: (tag || (icon ? 'i' : 'span')), ...allProps, children: children });
 }
 /**
  * Shortcut to <IconBox tag="button" />

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;AA0ClE,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,MAAM,WAAW,GAAG,aAAa,CAAC;QAChC,SAAS,EAAE,UAAU;QACrB,SAAS,EAAE,WAAW,CAAC,CAAC,aAAa,EAAE,KAAK,IAAI,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC;QAC9F,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;KACT,CAAC,CAAA;IAEF,IAAI,GAAG,KAAK,GAAG,IAAI,MAAM,EAAE,UAAU;QAAE,OAAO,MAAM,CAAC,UAAU,CAAC,WAAW,CAAC,CAAA;IAE5E,OAAO,KAAC,eAAe,IAAC,GAAG,EAAE,CAAC,GAAG,IAAI,GAAG,CAAQ,KAAM,WAAW,GAAI,CAAA;AACvE,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,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"}

package/dist/index.d.ts

@@ -47,6 +47,6 @@ export * from './components/Text.js';
 export * from './components/Textarea.js';
 export * from './components/Tooltip.js';
 export * from './context/CitricProvider.js';
-export { CitricController } from './types.js';
+export type { CitricController } from './types.js';
 export * from './utils/ValueController.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC1C,cAAc,yBAAyB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,cAAc,yBAAyB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/citric-react",
-  "version": "0.7.2",
+  "version": "0.9.0",
   "author": "StackSpot",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Favorite.tsx

@@ -19,12 +19,17 @@ export interface BaseFavoriteProps {
    */
   appearance?: FavoriteAppearance,
   onChange: (value: boolean) => void,
-  isLoading?: boolean,
+  /**
+   * Whether or not to show the loading feedback.
+   * 
+   * If `loading` is true, this button becomes disabled.
+   */
+  loading?: boolean,
 }
 
 export type FavoriteProps = ControlledInput & BaseFavoriteProps
 
-export const Favorite = ({ value, size, appearance, onChange, isLoading, className, ...props }: FavoriteProps) =>
+export const Favorite = ({ value, size, appearance, onChange, loading, disabled, className, ...props }: FavoriteProps) =>
   <CitricComponent
     tag="input"
     type="checkbox"
@@ -32,6 +37,7 @@ export const Favorite = ({ value, size, appearance, onChange, isLoading, classNa
     className={listToClass([appearance, size, className])}
     checked={!!value}
     onChange={() => onChange(!value)}
-    aria-busy={isLoading}
+    aria-busy={loading}
+    disabled={loading || disabled}
     {...props}
   />

package/src/components/IconBox.tsx

@@ -7,11 +7,12 @@ import { asCitricProps, CitricComponent } from './CitricComponent'
 
 type IconBoxTag = 'a' | 'button' | 'i' | 'span' | 'div'
 
-export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> extends IconOwnProps<G>, WithColorScheme, WithColorPalette {
+export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> extends
+  Partial<IconOwnProps<G>>, WithColorScheme, WithColorPalette {
   /**
    * The HTML element to render.
    * 
-   * @default 'i'
+   * @default "'i' if the icon is provided, 'span' otherwise"
    */
   tag?: T,
   /**
@@ -19,7 +20,7 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
    * 
    * @default 'circle'
    */
-  appearance?: 'circle' | 'square',
+  appearance?: 'circle' | 'square' | 'text',
   /**
    * Size of the box.
    * 
@@ -45,9 +46,21 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
 
 export type IconBoxProps<T extends IconBoxTag, G extends IconGroup> = HTMLTag[T] & 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, ...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,
+  children,
+  ...props
+}: IconBoxProps<T, G>) {
   const citric = useCitricController()
 
   const handleClick = useCallback((e: React.MouseEvent<any>) => {
@@ -56,19 +69,19 @@ export function IconBox<T extends IconBoxTag = 'i', G extends IconGroup = 'outli
     else if (tag === 'a') citric?.onClickLink?.(e, analytics ?? false)
   }, [tag])
 
-  const citricProps = asCitricProps({
+  const allProps = {
     component: 'icon-box',
-    className: listToClass(['citric-icon', group || 'outline', icon, appearance, size, className]),
+    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(citricProps)
+  if (tag === 'a' && citric?.renderLink) return citric.renderLink(asCitricProps(allProps))
 
-  return <CitricComponent tag={(tag || 'i') as any} {...citricProps} />
+  return <CitricComponent tag={(tag || (icon ? 'i' : 'span')) as any} {...allProps}>{children}</CitricComponent>
 }
 
 /**

package/src/index.ts

@@ -47,5 +47,5 @@ export * from './components/Text'
 export * from './components/Textarea'
 export * from './components/Tooltip'
 export * from './context/CitricProvider'
-export { CitricController } from './types'
+export type { CitricController } from './types'
 export * from './utils/ValueController'