@stack-spot/citric-react 0.15.4 → 0.17.0

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAI1C,MAAM,WAAW,aAAc,SAAQ,eAAe;IACpD;;;;OAIG;IACH,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,CAAC;IACpE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC5D;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD;;;;OAIG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACjC;AAED,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,aAAa,CAAA;AAE1E,eAAO,MAAM,IAAI,mEAAoF,SAAS,4CAS5G,CAAA"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAI1C,MAAM,WAAW,aAAc,SAAQ,eAAe;IACpD;;;;OAIG;IACH,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,CAAC;IACpE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC5D;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD;;;;OAIG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACjC;AAED,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,aAAa,CAAA;AAE1E,eAAO,MAAM,IAAI,mEAAoF,SAAS,4CAU5G,CAAA"}

package/dist/components/Card.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { listToClass } from '@stack-spot/portal-theme';
 import { withRef } from '../utils/react.js';
 import { CitricComponent } from './CitricComponent.js';
-export const Card = withRef(({ tag = 'div', onClick, size, bgLevel, className, children, ...props }) => (_jsx(CitricComponent, { tag: tag, component: "card", className: listToClass([onClick && 'clickable', size, bgLevel && `bg-${bgLevel}`, className]), ...props, children: children })));
+export const Card = withRef(({ tag = 'div', onClick, size, bgLevel, className, children, ...props }) => (_jsx(CitricComponent, { tag: tag, component: "card", onClick: onClick, className: listToClass([onClick && 'clickable', size, bgLevel && `bg-${bgLevel}`, className]), ...props, children: children })));
 //# sourceMappingURL=Card.js.map

package/dist/components/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA0BnD,MAAM,CAAC,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,EAAE,GAAG,GAAG,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAa,EAAE,EAAE,CAAC,CACjH,KAAC,eAAe,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,MAAM,EAChB,SAAS,EAAE,WAAW,CAAC,CAAC,OAAO,IAAI,WAAW,EAAE,IAAI,EAAE,OAAO,IAAI,MAAM,OAAO,EAAE,EAAE,SAAS,CAAC,CAAC,KACzF,KAAK,YAER,QAAQ,GACO,CACnB,CAAC,CAAA"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA0BnD,MAAM,CAAC,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,EAAE,GAAG,GAAG,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAa,EAAE,EAAE,CAAC,CACjH,KAAC,eAAe,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,WAAW,CAAC,CAAC,OAAO,IAAI,WAAW,EAAE,IAAI,EAAE,OAAO,IAAI,MAAM,OAAO,EAAE,EAAE,SAAS,CAAC,CAAC,KACzF,KAAK,YAER,QAAQ,GACO,CACnB,CAAC,CAAA"}

package/dist/components/ImageWithFallback.d.ts

@@ -0,0 +1,8 @@
+import { WithStyleShortcuts } from '../types.js';
+export interface BaseImageWithFallbackProps extends Pick<WithStyleShortcuts, 'w' | 'h' | 'radius' | 'bg'> {
+    fallback: React.ReactNode;
+    showLoading?: boolean;
+}
+export type ImageWithFallbackProps = JSX.IntrinsicElements['img'] & BaseImageWithFallbackProps;
+export declare const ImageWithFallback: ({ onLoad, onError, className, style: ogStyle, fallback, showLoading, w, h, radius, bg, ...props }: ImageWithFallbackProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ImageWithFallback.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageWithFallback.d.ts","sourceRoot":"","sources":["../../src/components/ImageWithFallback.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAI7C,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CAAC,kBAAkB,EAAE,GAAG,GAAG,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC;IACvG,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,sBAAsB,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,0BAA0B,CAAA;AAE9F,eAAO,MAAM,iBAAiB,GAC5B,mGAA0G,sBAAsB,4CAgCjI,CAAA"}

package/dist/components/ImageWithFallback.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { listToClass } from '@stack-spot/portal-theme';
+import { useEffect, useMemo, useState } from 'react';
+import { getStyleFromProps } from '../utils/css.js';
+import { Skeleton } from './Skeleton.js';
+export const ImageWithFallback = ({ onLoad, onError, className, style: ogStyle, fallback, showLoading = true, w, h, radius, bg, ...props }) => {
+    const [state, setState] = useState(props.src ? 'loading' : 'error');
+    const isLoading = state === 'loading' && showLoading;
+    const style = useMemo(() => ({ ...getStyleFromProps({ w, h, radius, bg }), ...ogStyle }), [ogStyle, w, h, radius, bg]);
+    function handleLoad(e) {
+        if (state === 'loading')
+            setState('ready');
+        onLoad?.(e);
+    }
+    function handleError(e) {
+        setState('error');
+        onError?.(e);
+    }
+    useEffect(() => {
+        if (state !== 'loading')
+            setState(props.src ? 'loading' : 'error');
+    }, [props.src]);
+    if (state === 'error')
+        return _jsx("div", { className: listToClass([className, 'center']), style: style, children: fallback });
+    return _jsxs(_Fragment, { children: [isLoading && _jsx(Skeleton, { className: className, style: style }), _jsx("img", { onLoad: handleLoad, onError: handleError, style: { ...style, ...(isLoading ? { pointerEvents: 'none', position: 'absolute', opacity: 0 } : {}) }, "aria-hidden": isLoading, className: className, ...props })] });
+};
+//# sourceMappingURL=ImageWithFallback.js.map

package/dist/components/ImageWithFallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageWithFallback.js","sourceRoot":"","sources":["../../src/components/ImageWithFallback.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AASrC,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,GAAG,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,KAAK,EAA0B,EAChI,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IAClG,MAAM,SAAS,GAAG,KAAK,KAAK,SAAS,IAAI,WAAW,CAAA;IACpD,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,iBAAiB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,CAAA;IAEtH,SAAS,UAAU,CAAC,CAAgD;QAClE,IAAI,KAAK,KAAK,SAAS;YAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;QAC1C,MAAM,EAAE,CAAC,CAAC,CAAC,CAAA;IACb,CAAC;IAED,SAAS,WAAW,CAAC,CAAgD;QACnE,QAAQ,CAAC,OAAO,CAAC,CAAA;QACjB,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;IACd,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,KAAK,SAAS;YAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IACpE,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAA;IAEf,IAAI,KAAK,KAAK,OAAO;QAAE,OAAO,cAAK,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAO,CAAA;IAChH,OAAO,8BACJ,SAAS,IAAI,KAAC,QAAQ,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAI,EAC9D,cACE,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,iBACzF,SAAS,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,IACD,CAAA;AACL,CAAC,CAAA"}

package/dist/components/layout.d.ts

@@ -32,15 +32,75 @@ export type CenterProps<T extends keyof HTMLTag> = HTMLTag[T] & BaseLayoutProps<
 export type RowProps<T extends keyof HTMLTag> = HTMLTag[T] & BaseRowProps<T>;
 export type ColumnProps<T extends keyof HTMLTag> = HTMLTag[T] & BaseColumnProps<T>;
 declare function _Center<T extends keyof HTMLTag = 'div'>({ tag, className, ...props }: CenterProps<T>): import("react").ReactElement<{
-    style: Partial<import("react").CSSProperties>;
+    bg?: import("@stack-spot/portal-theme").ColorKey;
+    fg?: import("@stack-spot/portal-theme").ColorKey;
+    border?: import("@stack-spot/portal-theme").ColorKey;
+    radius?: import("@stack-spot/portal-theme").RadiusKey;
+    m?: import("@stack-spot/portal-theme").SpacingKey | import("@stack-spot/portal-theme").SpacingKey[] | string;
+    mt?: import("@stack-spot/portal-theme").SpacingKey | string;
+    mb?: import("@stack-spot/portal-theme").SpacingKey | string;
+    ml?: import("@stack-spot/portal-theme").SpacingKey | string;
+    mr?: import("@stack-spot/portal-theme").SpacingKey | string;
+    p?: import("@stack-spot/portal-theme").SpacingKey | import("@stack-spot/portal-theme").SpacingKey[] | string;
+    pt?: import("@stack-spot/portal-theme").SpacingKey | string;
+    pb?: import("@stack-spot/portal-theme").SpacingKey | string;
+    pl?: import("@stack-spot/portal-theme").SpacingKey | string;
+    pr?: import("@stack-spot/portal-theme").SpacingKey | string;
+    w?: string | number;
+    h?: string | number;
+    flex?: React.CSSProperties["flex"];
+    justifyContent?: React.CSSProperties["justifyContent"];
+    alignItems?: React.CSSProperties["alignItems"];
+    gap?: React.CSSProperties["gap"];
+    style: any;
     className: string;
 }, string | import("react").JSXElementConstructor<any>>;
 declare function _Row<T extends keyof HTMLTag = 'div'>({ tag, className, center, ...props }: RowProps<T>): import("react").ReactElement<{
-    style: Partial<import("react").CSSProperties>;
+    bg?: import("@stack-spot/portal-theme").ColorKey;
+    fg?: import("@stack-spot/portal-theme").ColorKey;
+    border?: import("@stack-spot/portal-theme").ColorKey;
+    radius?: import("@stack-spot/portal-theme").RadiusKey;
+    m?: import("@stack-spot/portal-theme").SpacingKey | import("@stack-spot/portal-theme").SpacingKey[] | string;
+    mt?: import("@stack-spot/portal-theme").SpacingKey | string;
+    mb?: import("@stack-spot/portal-theme").SpacingKey | string;
+    ml?: import("@stack-spot/portal-theme").SpacingKey | string;
+    mr?: import("@stack-spot/portal-theme").SpacingKey | string;
+    p?: import("@stack-spot/portal-theme").SpacingKey | import("@stack-spot/portal-theme").SpacingKey[] | string;
+    pt?: import("@stack-spot/portal-theme").SpacingKey | string;
+    pb?: import("@stack-spot/portal-theme").SpacingKey | string;
+    pl?: import("@stack-spot/portal-theme").SpacingKey | string;
+    pr?: import("@stack-spot/portal-theme").SpacingKey | string;
+    w?: string | number;
+    h?: string | number;
+    flex?: React.CSSProperties["flex"];
+    justifyContent?: React.CSSProperties["justifyContent"];
+    alignItems?: React.CSSProperties["alignItems"];
+    gap?: React.CSSProperties["gap"];
+    style: any;
     className: string;
 }, string | import("react").JSXElementConstructor<any>>;
 declare function _Column<T extends keyof HTMLTag = 'div'>({ tag, className, center, ...props }: ColumnProps<T>): import("react").ReactElement<{
-    style: Partial<import("react").CSSProperties>;
+    bg?: import("@stack-spot/portal-theme").ColorKey;
+    fg?: import("@stack-spot/portal-theme").ColorKey;
+    border?: import("@stack-spot/portal-theme").ColorKey;
+    radius?: import("@stack-spot/portal-theme").RadiusKey;
+    m?: import("@stack-spot/portal-theme").SpacingKey | import("@stack-spot/portal-theme").SpacingKey[] | string;
+    mt?: import("@stack-spot/portal-theme").SpacingKey | string;
+    mb?: import("@stack-spot/portal-theme").SpacingKey | string;
+    ml?: import("@stack-spot/portal-theme").SpacingKey | string;
+    mr?: import("@stack-spot/portal-theme").SpacingKey | string;
+    p?: import("@stack-spot/portal-theme").SpacingKey | import("@stack-spot/portal-theme").SpacingKey[] | string;
+    pt?: import("@stack-spot/portal-theme").SpacingKey | string;
+    pb?: import("@stack-spot/portal-theme").SpacingKey | string;
+    pl?: import("@stack-spot/portal-theme").SpacingKey | string;
+    pr?: import("@stack-spot/portal-theme").SpacingKey | string;
+    w?: string | number;
+    h?: string | number;
+    flex?: React.CSSProperties["flex"];
+    justifyContent?: React.CSSProperties["justifyContent"];
+    alignItems?: React.CSSProperties["alignItems"];
+    gap?: React.CSSProperties["gap"];
+    style: any;
     className: string;
 }, string | import("react").JSXElementConstructor<any>>;
 export declare const Center: typeof _Center;

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

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/components/layout.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAItD,eAAO,MAAM,MAAM;;;;CAIlB,CAAA;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,kBAAkB;IAClF;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;CACT;AAED,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAC/E;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAClF;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;AAClF,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,CAAA;AAC5E,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;AAElF,iBAAS,OAAO,CAAC,CAAC,SAAS,MAAM,OAAO,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;;;wDAE7F;AAED,iBAAS,IAAI,CAAC,CAAC,SAAS,MAAM,OAAO,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC;;;wDAE/F;AAED,iBAAS,OAAO,CAAC,CAAC,SAAS,MAAM,OAAO,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;;;wDAErG;AAED,eAAO,MAAM,MAAM,gBAAmB,CAAA;AACtC,eAAO,MAAM,GAAG,aAAgB,CAAA;AAChC,eAAO,MAAM,MAAM,gBAAmB,CAAA"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/components/layout.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAItD,eAAO,MAAM,MAAM;;;;CAIlB,CAAA;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,kBAAkB;IAClF;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;CACT;AAED,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAC/E;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAClF;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;AAClF,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,CAAA;AAC5E,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;AAElF,iBAAS,OAAO,CAAC,CAAC,SAAS,MAAM,OAAO,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;wDAE7F;AAED,iBAAS,IAAI,CAAC,CAAC,SAAS,MAAM,OAAO,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;wDAE/F;AAED,iBAAS,OAAO,CAAC,CAAC,SAAS,MAAM,OAAO,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;wDAErG;AAED,eAAO,MAAM,MAAM,gBAAmB,CAAA;AACtC,eAAO,MAAM,GAAG,aAAgB,CAAA;AAChC,eAAO,MAAM,MAAM,gBAAmB,CAAA"}

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export * from './components/Form.js';
 export * from './components/FormGroup.js';
 export * from './components/IconBox.js';
 export * from './components/ImageBox.js';
+export * from './components/ImageWithFallback.js';
 export * from './components/Input.js';
 export * from './components/layout.js';
 export * from './components/Link.js';
@@ -49,5 +50,7 @@ export * from './components/Textarea.js';
 export * from './components/Tooltip.js';
 export * from './context/CitricProvider.js';
 export type { CitricController } from './types.js';
+export * from './utils/checkbox.js';
+export * from './utils/radio.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,uBAAuB,CAAA;AACrC,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"}
+{"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,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,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,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}

package/dist/index.js

@@ -21,6 +21,7 @@ export * from './components/Form.js';
 export * from './components/FormGroup.js';
 export * from './components/IconBox.js';
 export * from './components/ImageBox.js';
+export * from './components/ImageWithFallback.js';
 export * from './components/Input.js';
 export * from './components/layout.js';
 export * from './components/Link.js';
@@ -48,5 +49,7 @@ export * from './components/Text.js';
 export * from './components/Textarea.js';
 export * from './components/Tooltip.js';
 export * from './context/CitricProvider.js';
+export * from './utils/checkbox.js';
+export * from './utils/radio.js';
 export * from './utils/ValueController.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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,uBAAuB,CAAA;AACrC,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;AAExC,cAAc,yBAAyB,CAAA"}
+{"version":3,"file":"index.js","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,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,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;AAExC,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}

package/dist/utils/checkbox.d.ts

@@ -0,0 +1,75 @@
+export interface CheckboxGroupHookParams<T, F = string> {
+    /**
+     * The initial value for the checkbox group.
+     *
+     * @default []
+     */
+    initialValue?: T[];
+    /**
+     * A function to apply a filter to an option. Must return true if the option respects the filter and false otherwise.
+     * @param filter the current filter.
+     * @param option the current option.
+     * @returns true if the option should pass the filter, false if the option should be discarded.
+     */
+    applyFilter?: (filter: F, option: T) => boolean;
+    /**
+     * The full set of options for the checkbox group.
+     */
+    options: T[];
+    /**
+     * A function that produces a unique id for an option.
+     * @param option the current option.
+     * @returns a unique key.
+     */
+    renderKey: (option: T) => string | number | undefined;
+}
+/**
+ * Use this hook to easily implement filtering and selection controls for a checkbox group.
+ * @param params the parameters to create the controls.
+ * @returns the checkbox controls.
+ */
+export declare function useCheckboxGroupControls<T, F = string>(params: CheckboxGroupHookParams<T, F>): {
+    /**
+     * Selects all the options currently visible.
+     */
+    selectAll: () => void;
+    /**
+     * Removes all options from the selection.
+     */
+    removeSelection: () => void;
+    /**
+     * The current filter applied.
+     */
+    filter: F | undefined;
+    /**
+     * Apply a new filter.
+     */
+    setFilter: import("react").Dispatch<import("react").SetStateAction<F | undefined>>;
+    /**
+     * The options that should be passed to the checkbox group.
+     */
+    options: T[];
+    /**
+     * The value that should be passed to the checkbox group.
+     */
+    value: T[];
+    /**
+     * Changes the current value, should be passed to the property `onChange` of the checkbox group.
+     */
+    setValue: import("react").Dispatch<import("react").SetStateAction<T[]>>;
+    /**
+     * A function to render a unique key for an option. Should be passed to the property `renderKey` of the checkbox group.
+     */
+    renderKey: (option: T) => string | number | undefined;
+    /**
+     * A function that returns true if the option is filtered out, but checked.
+     * @param option the option to check.
+     * @returns true if the option was filtered out, but is checked; false otherwise.
+     */
+    isUnfilteredButChecked: (o: T) => boolean;
+    /**
+     * True if all options showing are selected, false otherwise.
+     */
+    isAllSelected: boolean;
+};
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/utils/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/utils/checkbox.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,uBAAuB,CAAC,CAAC,EAAE,CAAC,GAAG,MAAM;IACpD;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;IACnB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;IAChD;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;;OAIG;IACH,SAAS,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CACvD;AAED;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,uBAAuB,CAAC,CAAC,EAAE,CAAC,CAAC;IA+BzF;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;8BArEqB,MAAM,GAAG,MAAM,GAAG,SAAS;IAuEnD;;;;OAIG;gCAhDmF,CAAC;IAkDvF;;OAEG;;EAGN"}

package/dist/utils/checkbox.js

@@ -0,0 +1,81 @@
+import { useCallback, useMemo, useState } from 'react';
+import { defaultRenderKey } from './options.js';
+/**
+ * Use this hook to easily implement filtering and selection controls for a checkbox group.
+ * @param params the parameters to create the controls.
+ * @returns the checkbox controls.
+ */
+export function useCheckboxGroupControls(params) {
+    const [value, setValue] = useState(params.initialValue ?? []);
+    const [filter, setFilter] = useState();
+    const renderKey = params.renderKey ?? defaultRenderKey;
+    const { options, isUnfilteredButChecked } = useMemo(() => {
+        if (!params.applyFilter || !filter)
+            return { options: params.options, isUnfilteredButChecked: () => false };
+        const filtered = [];
+        const unfilteredButChecked = [];
+        const map = new Map();
+        const valueKeys = value.map(o => renderKey(o));
+        for (const o of params.options) {
+            const key = renderKey(o);
+            if (params.applyFilter(filter, o))
+                filtered.push(o);
+            else if (valueKeys.includes(key)) {
+                unfilteredButChecked.push(o);
+                map.set(key, true);
+            }
+        }
+        return { options: [...unfilteredButChecked, ...filtered], isUnfilteredButChecked: (o) => map.has(renderKey(o)) };
+    }, [params.options, filter]);
+    const selectAll = useCallback(() => {
+        setValue([...options]);
+    }, [options]);
+    const removeSelection = useCallback(() => {
+        setValue([]);
+    }, []);
+    return {
+        /**
+         * Selects all the options currently visible.
+         */
+        selectAll,
+        /**
+         * Removes all options from the selection.
+         */
+        removeSelection,
+        /**
+         * The current filter applied.
+         */
+        filter,
+        /**
+         * Apply a new filter.
+         */
+        setFilter: setFilter,
+        /**
+         * The options that should be passed to the checkbox group.
+         */
+        options,
+        /**
+         * The value that should be passed to the checkbox group.
+         */
+        value,
+        /**
+         * Changes the current value, should be passed to the property `onChange` of the checkbox group.
+         */
+        setValue,
+        /**
+         * A function to render a unique key for an option. Should be passed to the property `renderKey` of the checkbox group.
+         */
+        renderKey,
+        /**
+         * A function that returns true if the option is filtered out, but checked.
+         * @param option the option to check.
+         * @returns true if the option was filtered out, but is checked; false otherwise.
+         */
+        isUnfilteredButChecked,
+        /**
+         * True if all options showing are selected, false otherwise.
+         */
+        isAllSelected: value.length === options.length,
+    };
+}
+//# sourceMappingURL=checkbox.js.map

package/dist/utils/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/utils/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AA4B5C;;;;GAIG;AACH,MAAM,UAAU,wBAAwB,CAAgB,MAAqC;IAC3F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,YAAY,IAAI,EAAE,CAAC,CAAA;IAC7D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAiB,CAAA;IACrD,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,IAAI,gBAAgB,CAAA;IAEtD,MAAM,EAAE,OAAO,EAAE,sBAAsB,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE;QACvD,IAAI,CAAC,MAAM,CAAC,WAAW,IAAI,CAAC,MAAM;YAAE,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,sBAAsB,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,CAAA;QAC3G,MAAM,QAAQ,GAAQ,EAAE,CAAA;QACxB,MAAM,oBAAoB,GAAQ,EAAE,CAAA;QACpC,MAAM,GAAG,GAAG,IAAI,GAAG,EAAwC,CAAA;QAC3D,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;QAC9C,KAAK,MAAM,CAAC,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;YAC/B,MAAM,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA;YACxB,IAAI,MAAM,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC;gBAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;iBAC9C,IAAI,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;gBACjC,oBAAoB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;gBAC5B,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,CAAA;YACpB,CAAC;QACH,CAAC;QACD,OAAO,EAAE,OAAO,EAAE,CAAC,GAAG,oBAAoB,EAAE,GAAG,QAAQ,CAAC,EAAE,sBAAsB,EAAE,CAAC,CAAI,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IACrH,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAA;IAE5B,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,QAAQ,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAA;IACxB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,QAAQ,CAAC,EAAE,CAAC,CAAA;IACd,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO;QACL;;WAEG;QACH,SAAS;QACT;;WAEG;QACH,eAAe;QACf;;WAEG;QACH,MAAM;QACN;;WAEG;QACH,SAAS,EAAE,SAAS;QACpB;;WAEG;QACH,OAAO;QACP;;WAEG;QACH,KAAK;QACL;;WAEG;QACH,QAAQ;QACR;;WAEG;QACH,SAAS;QACT;;;;WAIG;QACH,sBAAsB;QACtB;;WAEG;QACH,aAAa,EAAE,KAAK,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM;KAC/C,CAAA;AACH,CAAC"}

package/dist/utils/css.d.ts

@@ -1,12 +1,34 @@
 import { ColorKey } from '@stack-spot/portal-theme';
+import { SpacingKey } from '@stack-spot/portal-theme/dist/definition.js';
 import { TextAppearance, WithStyleShortcuts } from '../types.js';
 export declare function colorNameToColorVariable(name: ColorKey): string;
 export declare function applyColor(style: React.CSSProperties | undefined, color: ColorKey | undefined): import("react").CSSProperties | undefined;
 export declare function textAppearanceToClass(appearance: TextAppearance): string;
 export declare function applyTextAppearance(className: string | undefined, appearance: TextAppearance | undefined): string;
 export declare function applyCSSVariable(style: React.CSSProperties | undefined, name: string, value: any): import("react").CSSProperties | undefined;
-export declare function applyStyles({ bg, fg, border, radius, justifyContent, alignItems, flex, gap, m, mt, mb, ml, mr, p, pt, pb, pl, pr, w, h, style, ...props }: WithStyleShortcuts & Record<string, any>): {
-    style: Partial<import("react").CSSProperties>;
+export declare function getStyleFromProps({ bg, fg, border, radius, justifyContent, alignItems, flex, gap, m, mt, mb, ml, mr, p, pt, pb, pl, pr, w, h, }: WithStyleShortcuts): React.CSSProperties;
+export declare function applyStyles({ style, ...props }: WithStyleShortcuts & Record<string, any>): {
+    bg?: ColorKey;
+    fg?: ColorKey;
+    border?: ColorKey;
+    radius?: import("@stack-spot/portal-theme").RadiusKey;
+    m?: SpacingKey | SpacingKey[] | string;
+    mt?: SpacingKey | string;
+    mb?: SpacingKey | string;
+    ml?: SpacingKey | string;
+    mr?: SpacingKey | string;
+    p?: SpacingKey | SpacingKey[] | string;
+    pt?: SpacingKey | string;
+    pb?: SpacingKey | string;
+    pl?: SpacingKey | string;
+    pr?: SpacingKey | string;
+    w?: string | number;
+    h?: string | number;
+    flex?: React.CSSProperties["flex"];
+    justifyContent?: React.CSSProperties["justifyContent"];
+    alignItems?: React.CSSProperties["alignItems"];
+    gap?: React.CSSProperties["gap"];
+    style: any;
 };
 export declare function styleObjectToCssString(styleObject?: React.CSSProperties): string;
 //# sourceMappingURL=css.d.ts.map

package/dist/utils/css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../src/utils/css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,0BAA0B,CAAA;AAGvE,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAE7D,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAE/D;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,EAAE,KAAK,EAAE,QAAQ,GAAG,SAAS,6CAE7F;AAED,wBAAgB,qBAAqB,CAAC,UAAU,EAAE,cAAc,GAAG,MAAM,CAExE;AAED,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,EAAE,UAAU,EAAE,cAAc,GAAG,SAAS,UAExG;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,6CAGhG;AAQD,wBAAgB,WAAW,CACzB,EACE,EAAE,EACF,EAAE,EACF,MAAM,EACN,MAAM,EACN,cAAc,EACd,UAAU,EACV,IAAI,EACJ,GAAG,EACH,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,CAAC,EACD,CAAC,EACD,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;;EA8B5C;AAGD,wBAAgB,sBAAsB,CAAC,WAAW,GAAE,KAAK,CAAC,aAAkB,UAgB3E"}
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../src/utils/css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,0BAA0B,CAAA;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAA;AAErE,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAE7D,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAE/D;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,EAAE,KAAK,EAAE,QAAQ,GAAG,SAAS,6CAE7F;AAED,wBAAgB,qBAAqB,CAAC,UAAU,EAAE,cAAc,GAAG,MAAM,CAExE;AAED,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,EAAE,UAAU,EAAE,cAAc,GAAG,SAAS,UAExG;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,6CAGhG;AAQD,wBAAgB,iBAAiB,CAAC,EAChC,EAAE,EACF,EAAE,EACF,MAAM,EACN,MAAM,EACN,cAAc,EACd,UAAU,EACV,IAAI,EACJ,GAAG,EACH,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,CAAC,EACD,CAAC,GACF,EAAE,kBAAkB,GAAG,KAAK,CAAC,aAAa,CA4B1C;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;EAGxF;AAGD,wBAAgB,sBAAsB,CAAC,WAAW,GAAE,KAAK,CAAC,aAAkB,UAgB3E"}

package/dist/utils/css.js

@@ -24,7 +24,7 @@ function spacingToStyle(spacing) {
         return theme.spacing[spacing];
     return spacing?.map(s => theme.spacing[s]).join(' ');
 }
-export function applyStyles({ bg, fg, border, radius, justifyContent, alignItems, flex, gap, m, mt, mb, ml, mr, p, pt, pb, pl, pr, w, h, style, ...props }) {
+export function getStyleFromProps({ bg, fg, border, radius, justifyContent, alignItems, flex, gap, m, mt, mb, ml, mr, p, pt, pb, pl, pr, w, h, }) {
     const [bgColor, bgLevel] = bg?.split('.') ?? [];
     const [fgColor, fgLevel] = fg?.split('.') ?? [];
     const [borderColor, borderLevel] = border?.split('.') ?? [];
@@ -50,23 +50,26 @@ export function applyStyles({ bg, fg, border, radius, justifyContent, alignItems
         paddingRight: spacingToStyle(pr),
         width: w,
         height: h,
-        ...style,
     };
-    return { style: omitBy(newStyle, v => v === undefined), ...props };
+    return omitBy(newStyle, v => v === undefined);
+}
+export function applyStyles({ style, ...props }) {
+    const newStyle = getStyleFromProps(props);
+    return { style: { ...newStyle, ...style }, ...props };
 }
 // AI generated
 export function styleObjectToCssString(styleObject = {}) {
     return Object.entries(styleObject)
         .map(([property, value]) => {
         // Convert camelCase to kebab-case
-        const cssProperty = property.replace(/([A-Z])/g, "-$1").toLowerCase();
+        const cssProperty = property.replace(/([A-Z])/g, '-$1').toLowerCase();
         // Append 'px' to numeric values for common dimension properties
-        const cssValue = typeof value === "number" &&
+        const cssValue = typeof value === 'number' &&
             !['zIndex', 'opacity', 'fontWeight'].includes(property)
             ? `${value}px`
             : value;
         return `${cssProperty}: ${cssValue}`;
     })
-        .join("; ");
+        .join('; ');
 }
 //# sourceMappingURL=css.js.map

package/dist/utils/css.js.map

@@ -1 +1 @@
-{"version":3,"file":"css.js","sourceRoot":"","sources":["../../src/utils/css.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"css.js","sourceRoot":"","sources":["../../src/utils/css.ts"],"names":[],"mappings":"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"}

package/dist/utils/radio.d.ts

@@ -0,0 +1,61 @@
+export interface RadioGroupHookParams<T, F = string> {
+    /**
+     * The initial value for the radio group.
+     */
+    initialValue?: T;
+    /**
+     * A function to apply a filter to an option. Must return true if the option respects the filter and false otherwise.
+     * @param filter the current filter.
+     * @param option the current option.
+     * @returns true if the option should pass the filter, false if the option should be discarded.
+     */
+    applyFilter?: (filter: F, option: T) => boolean;
+    /**
+     * The full set of options for the radio group.
+     */
+    options: T[];
+    /**
+     * A function that produces a unique id for an option.
+     * @param option the current option.
+     * @returns a unique key.
+     */
+    renderKey: (option: T) => string | number | undefined;
+}
+/**
+ * Use this hook to easily implement filtering for a radio group.
+ * @param params the parameters to create the controls.
+ * @returns the checkbox controls.
+ */
+export declare function useRadioGroupControls<T, F = string>(params: RadioGroupHookParams<T, F>): {
+    /**
+     * The current filter applied.
+     */
+    filter: F | undefined;
+    /**
+     * Apply a new filter.
+     */
+    setFilter: import("react").Dispatch<import("react").SetStateAction<F | undefined>>;
+    /**
+     * The options that should be passed to the radio group.
+     */
+    options: T[];
+    /**
+     * The value that should be passed to the radio group.
+     */
+    value: T | undefined;
+    /**
+     * Changes the current value, should be passed to the property `onChange` of the radio group.
+     */
+    setValue: import("react").Dispatch<import("react").SetStateAction<T | undefined>>;
+    /**
+     * A function to render a unique key for an option. Should be passed to the property `renderKey` of the radio group.
+     */
+    renderKey: (option: T) => string | number | undefined;
+    /**
+     * A function that returns true if the option is filtered out, but checked.
+     * @param option the option to check.
+     * @returns true if the option was filtered out, but is checked; false otherwise.
+     */
+    isUnfilteredButChecked: (o: T) => boolean | undefined;
+};
+//# sourceMappingURL=radio.d.ts.map

package/dist/utils/radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../src/utils/radio.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,oBAAoB,CAAC,CAAC,EAAE,CAAC,GAAG,MAAM;IACjD;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;IAChD;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;;OAIG;IACH,SAAS,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CACvD;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,oBAAoB,CAAC,CAAC,EAAE,CAAC,CAAC;IAiBnF;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;8BA/CqB,MAAM,GAAG,MAAM,GAAG,SAAS;IAiDnD;;;;OAIG;gCAjC2B,CAAC;EAoClC"}

package/dist/utils/radio.js

@@ -0,0 +1,56 @@
+import { useMemo, useState } from 'react';
+import { defaultRenderKey } from './options.js';
+/**
+ * Use this hook to easily implement filtering for a radio group.
+ * @param params the parameters to create the controls.
+ * @returns the checkbox controls.
+ */
+export function useRadioGroupControls(params) {
+    const [value, setValue] = useState(params.initialValue);
+    const [filter, setFilter] = useState();
+    const renderKey = params.renderKey ?? defaultRenderKey;
+    const { options, isUnfilteredButChecked } = useMemo(() => {
+        if (!params.applyFilter || !filter)
+            return { options: params.options, isUnfilteredButChecked: () => false };
+        const valueKey = value ? renderKey(value) : undefined;
+        const isValueFilteredOut = value && !params.applyFilter?.(filter, value);
+        const filtered = params.options.filter(o => params.applyFilter?.(filter, o));
+        return {
+            options: isValueFilteredOut ? [value, ...filtered] : filtered,
+            isUnfilteredButChecked: (o) => isValueFilteredOut && renderKey(o) === valueKey,
+        };
+    }, [params.options, filter]);
+    return {
+        /**
+         * The current filter applied.
+         */
+        filter,
+        /**
+         * Apply a new filter.
+         */
+        setFilter: setFilter,
+        /**
+         * The options that should be passed to the radio group.
+         */
+        options,
+        /**
+         * The value that should be passed to the radio group.
+         */
+        value,
+        /**
+         * Changes the current value, should be passed to the property `onChange` of the radio group.
+         */
+        setValue,
+        /**
+         * A function to render a unique key for an option. Should be passed to the property `renderKey` of the radio group.
+         */
+        renderKey,
+        /**
+         * A function that returns true if the option is filtered out, but checked.
+         * @param option the option to check.
+         * @returns true if the option was filtered out, but is checked; false otherwise.
+         */
+        isUnfilteredButChecked,
+    };
+}
+//# sourceMappingURL=radio.js.map

package/dist/utils/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../src/utils/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AA0B5C;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CAAgB,MAAkC;IACrF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,YAAY,CAAC,CAAA;IACvD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAiB,CAAA;IACrD,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,IAAI,gBAAgB,CAAA;IAEtD,MAAM,EAAE,OAAO,EAAE,sBAAsB,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE;QACvD,IAAI,CAAC,MAAM,CAAC,WAAW,IAAI,CAAC,MAAM;YAAE,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,sBAAsB,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,CAAA;QAC3G,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;QACrD,MAAM,kBAAkB,GAAG,KAAK,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;QACxE,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAA;QAC5E,OAAO;YACL,OAAO,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ;YAC7D,sBAAsB,EAAE,CAAC,CAAI,EAAE,EAAE,CAAC,kBAAkB,IAAI,SAAS,CAAC,CAAC,CAAC,KAAK,QAAQ;SAClF,CAAA;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAA;IAE5B,OAAO;QACL;;WAEG;QACH,MAAM;QACN;;WAEG;QACH,SAAS,EAAE,SAAS;QACpB;;WAEG;QACH,OAAO;QACP;;WAEG;QACH,KAAK;QACL;;WAEG;QACH,QAAQ;QACR;;WAEG;QACH,SAAS;QACT;;;;WAIG;QACH,sBAAsB;KACvB,CAAA;AACH,CAAC"}

package/package.json

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

package/src/components/Card.tsx

@@ -31,6 +31,7 @@ export const Card = withRef(({ tag = 'div', onClick, size, bgLevel, className, c
   <CitricComponent
     tag={tag}
     component="card"
+    onClick={onClick}
     className={listToClass([onClick && 'clickable', size, bgLevel && `bg-${bgLevel}`, className])}
     {...props}
   >

package/src/components/ImageWithFallback.tsx

@@ -0,0 +1,47 @@
+import { listToClass } from '@stack-spot/portal-theme'
+import { useEffect, useMemo, useState } from 'react'
+import { WithStyleShortcuts } from '../types'
+import { getStyleFromProps } from '../utils/css'
+import { Skeleton } from './Skeleton'
+
+export interface BaseImageWithFallbackProps extends Pick<WithStyleShortcuts, 'w' | 'h' | 'radius' | 'bg'> {
+  fallback: React.ReactNode,
+  showLoading?: boolean,
+}
+
+export type ImageWithFallbackProps = JSX.IntrinsicElements['img'] & BaseImageWithFallbackProps
+
+export const ImageWithFallback = (
+  { onLoad, onError, className, style: ogStyle, fallback, showLoading = true, w, h, radius, bg, ...props }: ImageWithFallbackProps,
+) => {
+  const [state, setState] = useState<'loading' | 'ready' | 'error'>(props.src ? 'loading' : 'error')
+  const isLoading = state === 'loading' && showLoading
+  const style = useMemo(() => ({ ...getStyleFromProps({ w, h, radius, bg }), ...ogStyle }), [ogStyle, w, h, radius, bg])
+
+  function handleLoad(e: React.SyntheticEvent<HTMLImageElement, Event>) {
+    if (state === 'loading') setState('ready')
+    onLoad?.(e)
+  }
+
+  function handleError(e: React.SyntheticEvent<HTMLImageElement, Event>) {
+    setState('error')
+    onError?.(e)
+  }
+
+  useEffect(() => {
+    if (state !== 'loading') setState(props.src ? 'loading' : 'error')
+  }, [props.src])
+
+  if (state === 'error') return <div className={listToClass([className, 'center'])} style={style}>{fallback}</div>
+  return <>
+    {isLoading && <Skeleton className={className} style={style} />}
+    <img
+      onLoad={handleLoad}
+      onError={handleError}
+      style={{ ...style, ...(isLoading ? { pointerEvents: 'none', position: 'absolute', opacity: 0 } : {}) }}
+      aria-hidden={isLoading}
+      className={className}
+      {...props}
+    />
+  </>
+}

package/src/index.ts

@@ -21,6 +21,7 @@ export * from './components/Form'
 export * from './components/FormGroup'
 export * from './components/IconBox'
 export * from './components/ImageBox'
+export * from './components/ImageWithFallback'
 export * from './components/Input'
 export * from './components/layout'
 export * from './components/Link'
@@ -49,4 +50,7 @@ export * from './components/Textarea'
 export * from './components/Tooltip'
 export * from './context/CitricProvider'
 export type { CitricController } from './types'
+export * from './utils/checkbox'
+export * from './utils/radio'
 export * from './utils/ValueController'
+

package/src/utils/checkbox.ts

@@ -0,0 +1,109 @@
+import { useCallback, useMemo, useState } from 'react'
+import { defaultRenderKey } from './options'
+
+export interface CheckboxGroupHookParams<T, F = string> {
+  /**
+   * The initial value for the checkbox group.
+   * 
+   * @default []
+   */
+  initialValue?: T[],
+  /**
+   * A function to apply a filter to an option. Must return true if the option respects the filter and false otherwise.
+   * @param filter the current filter.
+   * @param option the current option.
+   * @returns true if the option should pass the filter, false if the option should be discarded.
+   */
+  applyFilter?: (filter: F, option: T) => boolean,
+  /**
+   * The full set of options for the checkbox group.
+   */
+  options: T[],
+  /**
+   * A function that produces a unique id for an option.
+   * @param option the current option.
+   * @returns a unique key.
+   */
+  renderKey: (option: T) => string | number | undefined,
+}
+
+/**
+ * Use this hook to easily implement filtering and selection controls for a checkbox group.
+ * @param params the parameters to create the controls.
+ * @returns the checkbox controls.
+ */
+export function useCheckboxGroupControls<T, F = string>(params: CheckboxGroupHookParams<T, F>) {
+  const [value, setValue] = useState(params.initialValue ?? [])
+  const [filter, setFilter] = useState<F | undefined>()
+  const renderKey = params.renderKey ?? defaultRenderKey
+
+  const { options, isUnfilteredButChecked } = useMemo(() => {
+    if (!params.applyFilter || !filter) return { options: params.options, isUnfilteredButChecked: () => false }
+    const filtered: T[] = []
+    const unfilteredButChecked: T[] = []
+    const map = new Map<number | string | undefined, boolean>()
+    const valueKeys = value.map(o => renderKey(o))
+    for (const o of params.options) {
+      const key = renderKey(o)
+      if (params.applyFilter(filter, o)) filtered.push(o)
+      else if (valueKeys.includes(key)) {
+        unfilteredButChecked.push(o)
+        map.set(key, true)
+      }
+    }
+    return { options: [...unfilteredButChecked, ...filtered], isUnfilteredButChecked: (o: T) => map.has(renderKey(o)) }
+  }, [params.options, filter])
+
+  const selectAll = useCallback(() => {
+    setValue([...options])
+  }, [options])
+
+  const removeSelection = useCallback(() => {
+    setValue([])
+  }, [])
+
+  return {
+    /**
+     * Selects all the options currently visible.
+     */
+    selectAll,
+    /**
+     * Removes all options from the selection.
+     */
+    removeSelection,
+    /**
+     * The current filter applied.
+     */
+    filter,
+    /**
+     * Apply a new filter.
+     */
+    setFilter: setFilter,
+    /**
+     * The options that should be passed to the checkbox group.
+     */
+    options,
+    /**
+     * The value that should be passed to the checkbox group.
+     */
+    value,
+    /**
+     * Changes the current value, should be passed to the property `onChange` of the checkbox group.
+     */
+    setValue,
+    /**
+     * A function to render a unique key for an option. Should be passed to the property `renderKey` of the checkbox group.
+     */
+    renderKey,
+    /**
+     * A function that returns true if the option is filtered out, but checked.
+     * @param option the option to check.
+     * @returns true if the option was filtered out, but is checked; false otherwise.
+     */
+    isUnfilteredButChecked,
+    /**
+     * True if all options showing are selected, false otherwise.
+     */
+    isAllSelected: value.length === options.length,
+  }
+}

package/src/utils/css.ts

@@ -30,37 +30,33 @@ function spacingToStyle(spacing: SpacingKey | SpacingKey[] | string | undefined)
   return spacing?.map(s => theme.spacing[s]).join(' ')
 }
 
-export function applyStyles(
-  {
-    bg,
-    fg,
-    border,
-    radius,
-    justifyContent,
-    alignItems,
-    flex,
-    gap,
-    m,
-    mt,
-    mb,
-    ml,
-    mr,
-    p,
-    pt,
-    pb,
-    pl,
-    pr,
-    w,
-    h,
-    style,
-    ...props
-  }: WithStyleShortcuts & Record<string, any>,
-) {
+export function getStyleFromProps({
+  bg,
+  fg,
+  border,
+  radius,
+  justifyContent,
+  alignItems,
+  flex,
+  gap,
+  m,
+  mt,
+  mb,
+  ml,
+  mr,
+  p,
+  pt,
+  pb,
+  pl,
+  pr,
+  w,
+  h,
+}: WithStyleShortcuts): React.CSSProperties {
   const [bgColor, bgLevel] = bg?.split('.') ?? []
   const [fgColor, fgLevel] = fg?.split('.') ?? []
   const [borderColor, borderLevel] = border?.split('.') ?? []
   const borderColorVar = (theme.color as any)[borderColor]?.[borderLevel]
-  const newStyle: React.CSSProperties = {
+  const newStyle: React.CSSProperties =  {
     backgroundColor: (theme.color as any)[bgColor]?.[bgLevel],
     color: (theme.color as any)[fgColor]?.[fgLevel],
     border: borderColorVar ? `1px solid ${borderColorVar}` : undefined,
@@ -81,9 +77,13 @@ export function applyStyles(
     paddingRight: spacingToStyle(pr),
     width: w,
     height: h,
-    ...style,
   }
-  return { style: omitBy(newStyle, v => v === undefined), ...props }
+  return omitBy(newStyle, v => v === undefined)
+}
+
+export function applyStyles({ style, ...props }: WithStyleShortcuts & Record<string, any>) {
+  const newStyle = getStyleFromProps(props)
+  return { style: { ...newStyle, ...style }, ...props }
 }
 
 // AI generated
@@ -91,16 +91,16 @@ export function styleObjectToCssString(styleObject: React.CSSProperties = {}) {
   return Object.entries(styleObject)
     .map(([property, value]) => {
       // Convert camelCase to kebab-case
-      const cssProperty = property.replace(/([A-Z])/g, "-$1").toLowerCase()
+      const cssProperty = property.replace(/([A-Z])/g, '-$1').toLowerCase()
 
       // Append 'px' to numeric values for common dimension properties
       const cssValue =
-        typeof value === "number" &&
+        typeof value === 'number' &&
         !['zIndex', 'opacity', 'fontWeight'].includes(property)
           ? `${value}px`
           : value
 
       return `${cssProperty}: ${cssValue}`
     })
-    .join("; ")
+    .join('; ')
 }

package/src/utils/radio.ts

@@ -0,0 +1,81 @@
+import { useMemo, useState } from 'react'
+import { defaultRenderKey } from './options'
+
+export interface RadioGroupHookParams<T, F = string> {
+  /**
+   * The initial value for the radio group.
+   */
+  initialValue?: T,
+  /**
+   * A function to apply a filter to an option. Must return true if the option respects the filter and false otherwise.
+   * @param filter the current filter.
+   * @param option the current option.
+   * @returns true if the option should pass the filter, false if the option should be discarded.
+   */
+  applyFilter?: (filter: F, option: T) => boolean,
+  /**
+   * The full set of options for the radio group.
+   */
+  options: T[],
+  /**
+   * A function that produces a unique id for an option.
+   * @param option the current option.
+   * @returns a unique key.
+   */
+  renderKey: (option: T) => string | number | undefined,
+}
+
+/**
+ * Use this hook to easily implement filtering for a radio group.
+ * @param params the parameters to create the controls.
+ * @returns the checkbox controls.
+ */
+export function useRadioGroupControls<T, F = string>(params: RadioGroupHookParams<T, F>) {
+  const [value, setValue] = useState(params.initialValue)
+  const [filter, setFilter] = useState<F | undefined>()
+  const renderKey = params.renderKey ?? defaultRenderKey
+
+  const { options, isUnfilteredButChecked } = useMemo(() => {
+    if (!params.applyFilter || !filter) return { options: params.options, isUnfilteredButChecked: () => false }
+    const valueKey = value ? renderKey(value) : undefined
+    const isValueFilteredOut = value && !params.applyFilter?.(filter, value)
+    const filtered = params.options.filter(o => params.applyFilter?.(filter, o))
+    return {
+      options: isValueFilteredOut ? [value, ...filtered] : filtered,
+      isUnfilteredButChecked: (o: T) => isValueFilteredOut && renderKey(o) === valueKey,
+    }
+  }, [params.options, filter])
+
+  return {
+    /**
+     * The current filter applied.
+     */
+    filter,
+    /**
+     * Apply a new filter.
+     */
+    setFilter: setFilter,
+    /**
+     * The options that should be passed to the radio group.
+     */
+    options,
+    /**
+     * The value that should be passed to the radio group.
+     */
+    value,
+    /**
+     * Changes the current value, should be passed to the property `onChange` of the radio group.
+     */
+    setValue,
+    /**
+     * A function to render a unique key for an option. Should be passed to the property `renderKey` of the radio group.
+     */
+    renderKey,
+    /**
+     * A function that returns true if the option is filtered out, but checked.
+     * @param option the option to check.
+     * @returns true if the option was filtered out, but is checked; false otherwise.
+     */
+    isUnfilteredButChecked,
+  }
+}