@choco-vanille/ui 1.1.2 → 1.3.0

package/dist/components/actions/toggle-group/ToggleGroup.js

@@ -0,0 +1,20 @@
+import { jsx as g } from "react/jsx-runtime";
+import { ToggleGroup as l } from "@base-ui/react/toggle-group";
+import t from "./components/toggle-group-item/ToggleGroupItem.js";
+import { TOGGLE_GROUP_STYLES as G } from "./styles/ToggleGroup.css.js";
+import { cn as a } from "../../../utils/cn.js";
+const r = (({ className: m, orientation: o = "horizontal", children: p, ...e }) => /* @__PURE__ */ g(
+  l,
+  {
+    className: a(G.recipe({ orientation: o }), m),
+    orientation: o,
+    ...e,
+    children: p
+  }
+));
+r.displayName = "ToggleGroup";
+r.Item = t;
+export {
+  r as default
+};
+//# sourceMappingURL=ToggleGroup.js.map

package/dist/components/actions/toggle-group/ToggleGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.js","sources":["../../../../src/components/actions/toggle-group/ToggleGroup.tsx"],"sourcesContent":["import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group'\r\n\r\nimport ToggleGroupItem from '@components/actions/toggle-group/components/toggle-group-item/ToggleGroupItem.tsx'\r\nimport { TOGGLE_GROUP_STYLES } from '@components/actions/toggle-group/styles/ToggleGroup.css.ts'\r\nimport type { ToggleGroupCompound } from '@components/actions/toggle-group/types/ToggleGroupCompound.ts'\r\nimport type { ToggleGroupProps } from '@components/actions/toggle-group/types/ToggleGroup.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/**\r\n * A coordinated set of toggle buttons.\r\n *\r\n * Use `ToggleGroup.Item` for each option. Base UI manages the selected values,\r\n * roving focus, keyboard navigation, and controlled/uncontrolled behavior.\r\n * The group selects one item by default; pass `multiple` to allow several\r\n * selected items.\r\n *\r\n * @example\r\n * ```tsx\r\n * <ToggleGroup defaultValue={['bold']}>\r\n *     <ToggleGroup.Item value=\"bold\" label=\"Bold\" />\r\n *     <ToggleGroup.Item value=\"italic\" label=\"Italic\" />\r\n * </ToggleGroup>\r\n * ```\r\n */\r\nconst ToggleGroup = (({ className, orientation = 'horizontal', children, ...props }: ToggleGroupProps) => (\r\n    <BaseToggleGroup\r\n        className={cn(TOGGLE_GROUP_STYLES.recipe({ orientation }), className)}\r\n        orientation={orientation}\r\n        {...props}\r\n    >\r\n        {children}\r\n    </BaseToggleGroup>\r\n)) as ToggleGroupCompound\r\n\r\nToggleGroup.displayName = 'ToggleGroup'\r\nToggleGroup.Item = ToggleGroupItem\r\n\r\nexport default ToggleGroup\r\n"],"names":["ToggleGroup","className","orientation","children","props","jsx","BaseToggleGroup","cn","TOGGLE_GROUP_STYLES","ToggleGroupItem"],"mappings":";;;;;AAwBA,MAAMA,KAAe,CAAC,EAAE,WAAAC,GAAW,aAAAC,IAAc,cAAc,UAAAC,GAAU,GAAGC,EAAA,MACxE,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACG,WAAWC,EAAGC,EAAoB,OAAO,EAAE,aAAAN,EAAA,CAAa,GAAGD,CAAS;AAAA,IACpE,aAAAC;AAAA,IACC,GAAGE;AAAA,IAEH,UAAAD;AAAA,EAAA;AACL;AAGJH,EAAY,cAAc;AAC1BA,EAAY,OAAOS;"}

package/dist/components/actions/toggle-group/components/toggle-group-item/ToggleGroupItem.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),d=require("@base-ui/react/toggle"),i=require("../../../_shared/buttons/styles/buttonShared.css.cjs"),x=require("../../../_shared/buttons/constants/index.cjs"),n=require("../../../../foundation/icon/Icon.cjs");require("../../../../foundation/icon/styles/Icon.css.cjs");const N=require("../../../../foundation/typography/Typography.cjs");require("../../../../foundation/typography/styles/Typography.css.cjs");const p=require("../../../toggle/constants/toggleSizes.const.cjs"),j=require("../../../toggle/styles/Toggle.css.cjs"),O=require("../../../../../utils/cn.cjs"),T=({variant:u,subtle:S,color:a,size:s="md",radius:g,className:l,label:_,icon:o,startIcon:c,endIcon:t,ref:m,...q})=>{const r=x.buttonSizeToIconSize[s],E=p.TOGGLE_SIZE_TO_FONT_SIZE[s];return e.jsx(d.Toggle,{ref:m,"data-icon-only":o?"":void 0,className:O.cn(j.TOGGLE_STYLES.recipe({variant:u,color:a,size:s,radius:g,subtle:S}),l),...q,children:o?e.jsx(n,{icon:o,size:r,className:i.BUTTON_SHARED_STYLES.icon}):e.jsxs(e.Fragment,{children:[c&&e.jsx(n,{icon:c,size:r,className:i.BUTTON_SHARED_STYLES.icon}),e.jsx(N,{as:"span",fontSize:E,fontWeight:"medium",children:_}),t&&e.jsx(n,{icon:t,size:r,className:i.BUTTON_SHARED_STYLES.icon})]})})};T.displayName="ToggleGroup.Item";module.exports=T;
+//# sourceMappingURL=ToggleGroupItem.cjs.map

package/dist/components/actions/toggle-group/components/toggle-group-item/ToggleGroupItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroupItem.cjs","sources":["../../../../../../src/components/actions/toggle-group/components/toggle-group-item/ToggleGroupItem.tsx"],"sourcesContent":["import { Toggle as BaseToggle } from '@base-ui/react/toggle'\r\n\r\nimport { BUTTON_SHARED_STYLES } from '@components/actions/_shared/buttons/styles/buttonShared.css.ts'\r\nimport { buttonSizeToIconSize } from '@components/actions/_shared/buttons/constants'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { TOGGLE_SIZE_TO_FONT_SIZE } from '@components/actions/toggle/constants/toggleSizes.const.ts'\r\nimport { TOGGLE_STYLES } from '@components/actions/toggle/styles/Toggle.css.ts'\r\nimport type { ToggleGroupItemProps } from '@components/actions/toggle-group/components/toggle-group-item/types/ToggleGroupItem.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { FC } from 'react'\r\n\r\nconst ToggleGroupItem: FC<ToggleGroupItemProps> = ({\r\n    variant,\r\n    subtle,\r\n    color,\r\n    size = 'md',\r\n    radius,\r\n    className,\r\n    label,\r\n    icon,\r\n    startIcon,\r\n    endIcon,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const iconSize = buttonSizeToIconSize[size]\r\n    const fontSize = TOGGLE_SIZE_TO_FONT_SIZE[size]\r\n\r\n    return (\r\n        <BaseToggle\r\n            ref={ref}\r\n            data-icon-only={icon ? '' : undefined}\r\n            className={cn(TOGGLE_STYLES.recipe({ variant, color, size, radius, subtle }), className)}\r\n            {...props}\r\n        >\r\n            {icon ? (\r\n                <Icon\r\n                    icon={icon}\r\n                    size={iconSize}\r\n                    className={BUTTON_SHARED_STYLES.icon}\r\n                />\r\n            ) : (\r\n                <>\r\n                    {startIcon && (\r\n                        <Icon\r\n                            icon={startIcon}\r\n                            size={iconSize}\r\n                            className={BUTTON_SHARED_STYLES.icon}\r\n                        />\r\n                    )}\r\n                    <Typography\r\n                        as={'span'}\r\n                        fontSize={fontSize}\r\n                        fontWeight={'medium'}\r\n                    >\r\n                        {label}\r\n                    </Typography>\r\n                    {endIcon && (\r\n                        <Icon\r\n                            icon={endIcon}\r\n                            size={iconSize}\r\n                            className={BUTTON_SHARED_STYLES.icon}\r\n                        />\r\n                    )}\r\n                </>\r\n            )}\r\n        </BaseToggle>\r\n    )\r\n}\r\n\r\nToggleGroupItem.displayName = 'ToggleGroup.Item'\r\n\r\nexport default ToggleGroupItem\r\n"],"names":["ToggleGroupItem","variant","subtle","color","size","radius","className","label","icon","startIcon","endIcon","ref","props","iconSize","buttonSizeToIconSize","fontSize","TOGGLE_SIZE_TO_FONT_SIZE","jsx","BaseToggle","cn","TOGGLE_STYLES","Icon","BUTTON_SHARED_STYLES","jsxs","Fragment","Typography"],"mappings":"wmBAYMA,EAA4C,CAAC,CAC/C,QAAAC,EACA,OAAAC,EACA,MAAAC,EACA,KAAAC,EAAO,KACP,OAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,UAAAC,EACA,QAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAWC,EAAAA,qBAAqBV,CAAI,EACpCW,EAAWC,EAAAA,yBAAyBZ,CAAI,EAE9C,OACIa,EAAAA,IAACC,EAAAA,OAAA,CACG,IAAAP,EACA,iBAAgBH,EAAO,GAAK,OAC5B,UAAWW,EAAAA,GAAGC,gBAAc,OAAO,CAAE,QAAAnB,EAAS,MAAAE,EAAO,KAAAC,EAAM,OAAAC,EAAQ,OAAAH,CAAA,CAAQ,EAAGI,CAAS,EACtF,GAAGM,EAEH,SAAAJ,EACGS,EAAAA,IAACI,EAAA,CACG,KAAAb,EACA,KAAMK,EACN,UAAWS,EAAAA,qBAAqB,IAAA,CAAA,EAGpCC,EAAAA,KAAAC,WAAA,CACK,SAAA,CAAAf,GACGQ,EAAAA,IAACI,EAAA,CACG,KAAMZ,EACN,KAAMI,EACN,UAAWS,EAAAA,qBAAqB,IAAA,CAAA,EAGxCL,EAAAA,IAACQ,EAAA,CACG,GAAI,OACJ,SAAAV,EACA,WAAY,SAEX,SAAAR,CAAA,CAAA,EAEJG,GACGO,EAAAA,IAACI,EAAA,CACG,KAAMX,EACN,KAAMG,EACN,UAAWS,EAAAA,qBAAqB,IAAA,CAAA,CACpC,CAAA,CAER,CAAA,CAAA,CAIhB,EAEAtB,EAAgB,YAAc"}

package/dist/components/actions/toggle-group/components/toggle-group-item/ToggleGroupItem.d.ts

@@ -0,0 +1,4 @@
+import { ToggleGroupItemProps } from './types/ToggleGroupItem.props.ts';
+import { FC } from 'react';
+declare const ToggleGroupItem: FC<ToggleGroupItemProps>;
+export default ToggleGroupItem;

package/dist/components/actions/toggle-group/components/toggle-group-item/ToggleGroupItem.js

@@ -0,0 +1,75 @@
+import { jsx as o, jsxs as E, Fragment as N } from "react/jsx-runtime";
+import { Toggle as _ } from "@base-ui/react/toggle";
+import { BUTTON_SHARED_STYLES as e } from "../../../_shared/buttons/styles/buttonShared.css.js";
+import { buttonSizeToIconSize as u } from "../../../_shared/buttons/constants/index.js";
+import t from "../../../../foundation/icon/Icon.js";
+import "../../../../foundation/icon/styles/Icon.css.js";
+import G from "../../../../foundation/typography/Typography.js";
+import "../../../../foundation/typography/styles/Typography.css.js";
+import { TOGGLE_SIZE_TO_FONT_SIZE as h } from "../../../toggle/constants/toggleSizes.const.js";
+import { TOGGLE_STYLES as z } from "../../../toggle/styles/Toggle.css.js";
+import { cn as O } from "../../../../../utils/cn.js";
+const y = ({
+  variant: s,
+  subtle: a,
+  color: c,
+  size: m = "md",
+  radius: l,
+  className: T,
+  label: f,
+  icon: r,
+  startIcon: p,
+  endIcon: n,
+  ref: S,
+  ...g
+}) => {
+  const i = u[m], d = h[m];
+  return /* @__PURE__ */ o(
+    _,
+    {
+      ref: S,
+      "data-icon-only": r ? "" : void 0,
+      className: O(z.recipe({ variant: s, color: c, size: m, radius: l, subtle: a }), T),
+      ...g,
+      children: r ? /* @__PURE__ */ o(
+        t,
+        {
+          icon: r,
+          size: i,
+          className: e.icon
+        }
+      ) : /* @__PURE__ */ E(N, { children: [
+        p && /* @__PURE__ */ o(
+          t,
+          {
+            icon: p,
+            size: i,
+            className: e.icon
+          }
+        ),
+        /* @__PURE__ */ o(
+          G,
+          {
+            as: "span",
+            fontSize: d,
+            fontWeight: "medium",
+            children: f
+          }
+        ),
+        n && /* @__PURE__ */ o(
+          t,
+          {
+            icon: n,
+            size: i,
+            className: e.icon
+          }
+        )
+      ] })
+    }
+  );
+};
+y.displayName = "ToggleGroup.Item";
+export {
+  y as default
+};
+//# sourceMappingURL=ToggleGroupItem.js.map

package/dist/components/actions/toggle-group/components/toggle-group-item/ToggleGroupItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroupItem.js","sources":["../../../../../../src/components/actions/toggle-group/components/toggle-group-item/ToggleGroupItem.tsx"],"sourcesContent":["import { Toggle as BaseToggle } from '@base-ui/react/toggle'\r\n\r\nimport { BUTTON_SHARED_STYLES } from '@components/actions/_shared/buttons/styles/buttonShared.css.ts'\r\nimport { buttonSizeToIconSize } from '@components/actions/_shared/buttons/constants'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { TOGGLE_SIZE_TO_FONT_SIZE } from '@components/actions/toggle/constants/toggleSizes.const.ts'\r\nimport { TOGGLE_STYLES } from '@components/actions/toggle/styles/Toggle.css.ts'\r\nimport type { ToggleGroupItemProps } from '@components/actions/toggle-group/components/toggle-group-item/types/ToggleGroupItem.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { FC } from 'react'\r\n\r\nconst ToggleGroupItem: FC<ToggleGroupItemProps> = ({\r\n    variant,\r\n    subtle,\r\n    color,\r\n    size = 'md',\r\n    radius,\r\n    className,\r\n    label,\r\n    icon,\r\n    startIcon,\r\n    endIcon,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const iconSize = buttonSizeToIconSize[size]\r\n    const fontSize = TOGGLE_SIZE_TO_FONT_SIZE[size]\r\n\r\n    return (\r\n        <BaseToggle\r\n            ref={ref}\r\n            data-icon-only={icon ? '' : undefined}\r\n            className={cn(TOGGLE_STYLES.recipe({ variant, color, size, radius, subtle }), className)}\r\n            {...props}\r\n        >\r\n            {icon ? (\r\n                <Icon\r\n                    icon={icon}\r\n                    size={iconSize}\r\n                    className={BUTTON_SHARED_STYLES.icon}\r\n                />\r\n            ) : (\r\n                <>\r\n                    {startIcon && (\r\n                        <Icon\r\n                            icon={startIcon}\r\n                            size={iconSize}\r\n                            className={BUTTON_SHARED_STYLES.icon}\r\n                        />\r\n                    )}\r\n                    <Typography\r\n                        as={'span'}\r\n                        fontSize={fontSize}\r\n                        fontWeight={'medium'}\r\n                    >\r\n                        {label}\r\n                    </Typography>\r\n                    {endIcon && (\r\n                        <Icon\r\n                            icon={endIcon}\r\n                            size={iconSize}\r\n                            className={BUTTON_SHARED_STYLES.icon}\r\n                        />\r\n                    )}\r\n                </>\r\n            )}\r\n        </BaseToggle>\r\n    )\r\n}\r\n\r\nToggleGroupItem.displayName = 'ToggleGroup.Item'\r\n\r\nexport default ToggleGroupItem\r\n"],"names":["ToggleGroupItem","variant","subtle","color","size","radius","className","label","icon","startIcon","endIcon","ref","props","iconSize","buttonSizeToIconSize","fontSize","TOGGLE_SIZE_TO_FONT_SIZE","jsx","BaseToggle","cn","TOGGLE_STYLES","Icon","BUTTON_SHARED_STYLES","jsxs","Fragment","Typography"],"mappings":";;;;;;;;;;;AAYA,MAAMA,IAA4C,CAAC;AAAA,EAC/C,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAWC,EAAqBV,CAAI,GACpCW,IAAWC,EAAyBZ,CAAI;AAE9C,SACI,gBAAAa;AAAA,IAACC;AAAAA,IAAA;AAAA,MACG,KAAAP;AAAA,MACA,kBAAgBH,IAAO,KAAK;AAAA,MAC5B,WAAWW,EAAGC,EAAc,OAAO,EAAE,SAAAnB,GAAS,OAAAE,GAAO,MAAAC,GAAM,QAAAC,GAAQ,QAAAH,EAAA,CAAQ,GAAGI,CAAS;AAAA,MACtF,GAAGM;AAAA,MAEH,UAAAJ,IACG,gBAAAS;AAAA,QAACI;AAAA,QAAA;AAAA,UACG,MAAAb;AAAA,UACA,MAAMK;AAAA,UACN,WAAWS,EAAqB;AAAA,QAAA;AAAA,MAAA,IAGpC,gBAAAC,EAAAC,GAAA,EACK,UAAA;AAAA,QAAAf,KACG,gBAAAQ;AAAA,UAACI;AAAA,UAAA;AAAA,YACG,MAAMZ;AAAA,YACN,MAAMI;AAAA,YACN,WAAWS,EAAqB;AAAA,UAAA;AAAA,QAAA;AAAA,QAGxC,gBAAAL;AAAA,UAACQ;AAAA,UAAA;AAAA,YACG,IAAI;AAAA,YACJ,UAAAV;AAAA,YACA,YAAY;AAAA,YAEX,UAAAR;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJG,KACG,gBAAAO;AAAA,UAACI;AAAA,UAAA;AAAA,YACG,MAAMX;AAAA,YACN,MAAMG;AAAA,YACN,WAAWS,EAAqB;AAAA,UAAA;AAAA,QAAA;AAAA,MACpC,EAAA,CAER;AAAA,IAAA;AAAA,EAAA;AAIhB;AAEAtB,EAAgB,cAAc;"}

package/dist/components/actions/toggle-group/components/toggle-group-item/types/ToggleGroupItem.props.d.ts

@@ -0,0 +1,12 @@
+import { Toggle as BaseToggle } from '@base-ui/react/toggle';
+import { ToggleColor, ToggleContent, ToggleRadius, ToggleSize, ToggleVariant } from '../../../../toggle/types/Toggle.types.ts';
+import type * as React from 'react';
+export type ToggleGroupItemProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color'> & ToggleContent & {
+    value: string;
+    variant?: ToggleVariant;
+    subtle?: boolean;
+    color?: ToggleColor;
+    size?: ToggleSize;
+    radius?: ToggleRadius;
+    ref?: React.Ref<HTMLButtonElement>;
+} & Pick<BaseToggle.Props, 'disabled'>;

package/dist/components/actions/toggle-group/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ToggleGroup } from './ToggleGroup.tsx';
+export { TOGGLE_GROUP_STYLES } from './styles/ToggleGroup.css.ts';
+export type { ToggleGroupProps } from './types/ToggleGroup.props.ts';
+export type { ToggleGroupItemProps } from './components/toggle-group-item/types/ToggleGroupItem.props.ts';

package/dist/components/actions/toggle-group/styles/ToggleGroup.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                              */;/* empty css                                 */const e=require("@vanilla-extract/recipes/createRuntimeFn");var t={recipe:e.createRuntimeFn({defaultClassName:"_40ge150",variantClassNames:{orientation:{horizontal:"_40ge151",vertical:"_40ge152"}},defaultVariants:{orientation:"horizontal"},compoundVariants:[]})};exports.TOGGLE_GROUP_STYLES=t;
+//# sourceMappingURL=ToggleGroup.css.cjs.map

package/dist/components/actions/toggle-group/styles/ToggleGroup.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/actions/toggle-group/styles/ToggleGroup.css.d.ts

@@ -0,0 +1,14 @@
+import { RuntimeFn } from '@vanilla-extract/recipes';
+export declare const TOGGLE_GROUP_STYLES: {
+    recipe: RuntimeFn<{
+        orientation: {
+            horizontal: {
+                flexDirection: "row";
+            };
+            vertical: {
+                flexDirection: "column";
+                alignItems: "stretch";
+            };
+        };
+    }>;
+};

package/dist/components/actions/toggle-group/styles/ToggleGroup.css.js

@@ -0,0 +1,8 @@
+/* empty css                                            */
+/* empty css                               */
+import { createRuntimeFn as a } from "@vanilla-extract/recipes/createRuntimeFn";
+var i = { recipe: a({ defaultClassName: "_40ge150", variantClassNames: { orientation: { horizontal: "_40ge151", vertical: "_40ge152" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] }) };
+export {
+  i as TOGGLE_GROUP_STYLES
+};
+//# sourceMappingURL=ToggleGroup.css.js.map

package/dist/components/actions/toggle-group/styles/ToggleGroup.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/actions/toggle-group/types/ToggleGroup.props.d.ts

@@ -0,0 +1,19 @@
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
+import type * as React from 'react';
+/**
+ * Coordinates the pressed state of a set of `ToggleGroup.Item` components.
+ *
+ * By default, one item can be pressed at a time. Set `multiple` to `true` to
+ * allow several values. Use `value` with `onValueChange` for controlled state,
+ * or `defaultValue` for uncontrolled state.
+ */
+export type ToggleGroupProps<Value extends string = string> = Omit<BaseToggleGroup.Props<Value>, 'className' | 'children' | 'orientation'> & {
+    /** Class applied to the group container. */
+    className?: string;
+    /** Toggle items rendered by the group. */
+    children?: React.ReactNode;
+    /** Arrow-key navigation direction. Defaults to `horizontal`. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Ref forwarded to the group's `<div>` element. */
+    ref?: React.Ref<HTMLDivElement>;
+};

package/dist/components/actions/toggle-group/types/ToggleGroupCompound.d.ts

@@ -0,0 +1,6 @@
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
+import { default as ToggleGroupItem } from '../components/toggle-group-item/ToggleGroupItem.tsx';
+export type ToggleGroupCompound = (typeof BaseToggleGroup) & {
+    displayName?: string;
+    Item: typeof ToggleGroupItem;
+};

package/dist/components/data-display/_shared/utils/extractText.utils.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=r=>typeof r=="string"||typeof r=="number"?String(r):Array.isArray(r)?r.map(t).join(""):e.isValidElement(r)?t(r.props.children):"";exports.extractTextFromReactNode=t;
+//# sourceMappingURL=extractText.utils.cjs.map

package/dist/components/data-display/_shared/utils/extractText.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"extractText.utils.cjs","sources":["../../../../../src/components/data-display/_shared/utils/extractText.utils.ts"],"sourcesContent":["import { isValidElement, type ReactNode } from 'react'\r\n\r\nexport const extractTextFromReactNode = (value: ReactNode): string => {\r\n    if (typeof value === 'string' || typeof value === 'number') {\r\n        return String(value)\r\n    }\r\n\r\n    if (Array.isArray(value)) {\r\n        return value.map(extractTextFromReactNode).join('')\r\n    }\r\n\r\n    if (isValidElement<{ children?: ReactNode }>(value)) {\r\n        return extractTextFromReactNode(value.props.children)\r\n    }\r\n\r\n    return ''\r\n}\r\n"],"names":["extractTextFromReactNode","value","isValidElement"],"mappings":"yGAEaA,EAA4BC,GACjC,OAAOA,GAAU,UAAY,OAAOA,GAAU,SACvC,OAAOA,CAAK,EAGnB,MAAM,QAAQA,CAAK,EACZA,EAAM,IAAID,CAAwB,EAAE,KAAK,EAAE,EAGlDE,EAAAA,eAAyCD,CAAK,EACvCD,EAAyBC,EAAM,MAAM,QAAQ,EAGjD"}

package/dist/components/data-display/_shared/utils/extractText.utils.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from 'react';
+export declare const extractTextFromReactNode: (value: ReactNode) => string;

package/dist/components/data-display/_shared/utils/extractText.utils.js

@@ -0,0 +1,6 @@
+import { isValidElement as i } from "react";
+const t = (r) => typeof r == "string" || typeof r == "number" ? String(r) : Array.isArray(r) ? r.map(t).join("") : i(r) ? t(r.props.children) : "";
+export {
+  t as extractTextFromReactNode
+};
+//# sourceMappingURL=extractText.utils.js.map

package/dist/components/data-display/_shared/utils/extractText.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extractText.utils.js","sources":["../../../../../src/components/data-display/_shared/utils/extractText.utils.ts"],"sourcesContent":["import { isValidElement, type ReactNode } from 'react'\r\n\r\nexport const extractTextFromReactNode = (value: ReactNode): string => {\r\n    if (typeof value === 'string' || typeof value === 'number') {\r\n        return String(value)\r\n    }\r\n\r\n    if (Array.isArray(value)) {\r\n        return value.map(extractTextFromReactNode).join('')\r\n    }\r\n\r\n    if (isValidElement<{ children?: ReactNode }>(value)) {\r\n        return extractTextFromReactNode(value.props.children)\r\n    }\r\n\r\n    return ''\r\n}\r\n"],"names":["extractTextFromReactNode","value","isValidElement"],"mappings":";AAEO,MAAMA,IAA2B,CAACC,MACjC,OAAOA,KAAU,YAAY,OAAOA,KAAU,WACvC,OAAOA,CAAK,IAGnB,MAAM,QAAQA,CAAK,IACZA,EAAM,IAAID,CAAwB,EAAE,KAAK,EAAE,IAGlDE,EAAyCD,CAAK,IACvCD,EAAyBC,EAAM,MAAM,QAAQ,IAGjD;"}

package/dist/components/data-display/avatar/Avatar.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("./components/avatar-fallback/AvatarFallback.cjs"),c=require("./components/avatar-image/AvatarImage.cjs"),n=require("./components/avatar-root/AvatarRoot.cjs"),i=require("./components/avatar-status/AvatarStatus.cjs"),R=require("./constants/avatarSizes.const.cjs"),I=require("react"),a=I.memo(({src:t,alt:l,initials:u,icon:m,size:r=R.AVATAR_SIZES.md,shape:A="circle",color:v="primary",status:o,statusLabel:q,statusSize:S,fallbackDelay:d,onLoadingStatusChange:j,className:b,ref:g,...x})=>{const y=!!t;return e.jsxs(n,{ref:g,size:r,shape:A,color:v,className:b,...x,children:[y&&e.jsx(c,{src:t,alt:l,onLoadingStatusChange:j}),e.jsx(s,{initials:u,icon:m,size:r,delay:d}),o&&e.jsx(i,{status:o,size:S??r,label:q})]})});a.displayName="Avatar";a.Root=n;a.Image=c;a.Fallback=s;a.Status=i;exports.Avatar=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("./components/avatar-fallback/AvatarFallback.cjs"),c=require("./components/avatar-image/AvatarImage.cjs"),n=require("./components/avatar-root/AvatarRoot.cjs"),i=require("./components/avatar-status/AvatarStatus.cjs"),I=require("./constants/avatarSizes.const.cjs"),R=require("react"),a=R.memo(({src:t,alt:l,initials:u,icon:m,size:r=I.AVATAR_SIZES.md,shape:A="circle",color:v="primary",status:o,statusLabel:q,statusSize:S,fallbackDelay:d,onLoadingStatusChange:j,className:b,ref:g,...x})=>{const y=!!t;return e.jsxs(n,{ref:g,size:r,shape:A,color:v,className:b,...x,children:[y&&e.jsx(c,{src:t,alt:l,onLoadingStatusChange:j}),e.jsx(s,{initials:u,icon:m,size:r,delay:d}),o&&e.jsx(i,{status:o,size:S??r,label:q})]})});a.displayName="Avatar";a.Root=n;a.Image=c;a.Fallback=s;a.Status=i;exports.Avatar=a;
 //# sourceMappingURL=Avatar.cjs.map

package/dist/components/data-display/avatar/components/avatar-fallback/types/AvatarFallback.props.d.ts

@@ -1,6 +1,7 @@
 import { Avatar } from '@base-ui/react/avatar';
+import { HTMLAttributes } from 'react';
 import { AvatarSize } from '../../../types/Avatar.types.ts';
-export type AvatarFallbackProps = {
+export type AvatarFallbackProps = HTMLAttributes<HTMLSpanElement> & {
     /** Initials displayed when the image fails to load or is omitted. */
     initials?: string;
     /** Iconify icon name displayed as a fallback when no initials are provided. */
@@ -11,6 +12,4 @@ export type AvatarFallbackProps = {
     delay?: Avatar.Fallback.Props['delay'];
     /** Additional CSS class names. */
     className?: string;
-    /** Native HTML attributes forwarded to the fallback element. */
-    [key: string]: unknown;
 };

package/dist/components/data-display/avatar/components/avatar-image/types/AvatarImage.props.d.ts

@@ -1,5 +1,6 @@
 import { Avatar } from '@base-ui/react/avatar';
-export type AvatarImageProps = {
+import { ImgHTMLAttributes } from 'react';
+export type AvatarImageProps = ImgHTMLAttributes<HTMLImageElement> & {
     /** The URL of the image to display. */
     src?: string;
     /** Accessible text description of the image. */
@@ -8,6 +9,4 @@ export type AvatarImageProps = {
     onLoadingStatusChange?: Avatar.Image.Props['onLoadingStatusChange'];
     /** Additional CSS class names. */
     className?: string;
-    /** Native HTML attributes forwarded to the image element. */
-    [key: string]: unknown;
 };

package/dist/components/data-display/avatar/components/avatar-root/types/AvatarRoot.props.d.ts

@@ -1,8 +1,6 @@
 import { AvatarColor, AvatarShape, AvatarSize } from '../../../types/Avatar.types.ts';
 import type * as React from 'react';
-export type AvatarRootProps = {
-    /** Ref forwarded to the underlying `<span>` element. */
-    ref?: React.Ref<HTMLSpanElement>;
+export type AvatarRootProps = React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement> & {
     /** Size variant. Defaults to `md`. */
     size?: AvatarSize;
     /** Shape variant. Defaults to `circle`. */
@@ -17,8 +15,4 @@ export type AvatarRootProps = {
     role?: React.HTMLAttributes<HTMLSpanElement>['role'];
     /** Additional CSS class names. */
     className?: string;
-    /** Children (image, fallback, status). */
-    children?: React.ReactNode;
-    /** Native HTML attributes forwarded to the root element. */
-    [key: string]: unknown;
 };

package/dist/components/data-display/avatar/components/avatar-status/AvatarStatus.cjs

@@ -1,2 +1,2 @@
-"use strict";const n=require("react/jsx-runtime"),i=require("../../constants/avatarStatus.const.cjs"),o=require("./styles/AvatarStatus.css.cjs"),u=require("../../../../layout/box/Box.cjs");require("../../../../layout/box/styles/Box.css.cjs");const A=require("../../../../../utils/cn.cjs"),S=require("react"),t=S.memo(({status:e=i.AVATAR_STATUS.online,size:s,label:a,className:r,...c})=>n.jsx(u,{as:"span",className:A.cn(o.AVATAR_STATUS_STYLES.recipe({size:s,status:e}),r),"aria-label":a??e,role:"status",...c}));t.displayName="Avatar.Status";module.exports=t;
+"use strict";const n=require("react/jsx-runtime"),i=require("../../constants/avatarStatus.const.cjs"),o=require("./styles/AvatarStatus.css.cjs"),u=require("../../../../layout/box/Box.cjs");require("../../../../layout/box/styles/Box.css.cjs");const A=require("../../../../../utils/cn.cjs"),S=require("react"),t=S.memo(({status:e=i.AVATAR_STATUS.online,size:r,label:s,className:a,...c})=>n.jsx(u,{as:"span",className:A.cn(o.AVATAR_STATUS_STYLES.recipe({size:r,status:e}),a),"aria-label":s??e,role:"status",...c}));t.displayName="Avatar.Status";module.exports=t;
 //# sourceMappingURL=AvatarStatus.cjs.map

package/dist/components/data-display/avatar/components/avatar-status/index.d.ts

@@ -1,3 +1,2 @@
-export { default as AvatarStatus } from './AvatarStatus.tsx';
 export { AVATAR_STATUS_STYLES } from './styles/AvatarStatus.css.ts';
 export type { AvatarStatusProps } from './types/AvatarStatus.props.ts';

package/dist/components/data-display/avatar/components/avatar-status/types/AvatarStatus.props.d.ts

@@ -1,5 +1,6 @@
 import { AvatarSize, AvatarStatus as AvatarStatusType } from '../../../types/Avatar.types.ts';
-export type AvatarStatusProps = {
+import { HTMLAttributes } from 'react';
+export type AvatarStatusProps = HTMLAttributes<HTMLSpanElement> & {
     /** Status indicator variant. Defaults to `online`. */
     status?: AvatarStatusType;
     /** Size of the status indicator. Defaults to `md`. */
@@ -8,6 +9,4 @@ export type AvatarStatusProps = {
     label?: string;
     /** Additional CSS class names. */
     className?: string;
-    /** Native HTML attributes forwarded to the status element. */
-    [key: string]: unknown;
 };

package/dist/components/data-display/avatar/components/index.d.ts

@@ -1,4 +1,4 @@
 export * from './avatar-root';
 export * from './avatar-image';
 export * from './avatar-fallback';
-export * from './avatar-status';
+export type { AvatarStatusProps } from './avatar-status';

package/dist/components/data-display/avatar/constants/avatarStatus.const.d.ts

@@ -4,4 +4,4 @@ export declare const AVATAR_STATUS: {
     readonly busy: "busy";
     readonly away: "away";
 };
-export declare const AVATAR_STATUS_ARRAY: ("online" | "offline" | "busy" | "away")[];
+export declare const AVATAR_STATUS_ARRAY: ("offline" | "online" | "busy" | "away")[];

package/dist/components/data-display/avatar/types/Avatar.props.d.ts

@@ -1,9 +1,7 @@
 import { Avatar } from '@base-ui/react/avatar';
 import { AvatarColor, AvatarShape, AvatarSize, AvatarStatus } from './Avatar.types.ts';
 import type * as React from 'react';
-export type AvatarProps = {
-    /** Ref forwarded to the underlying `<span>` element. */
-    ref?: React.Ref<HTMLSpanElement>;
+export type AvatarProps = React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement> & {
     /** The URL of the image to display. */
     src?: string;
     /** Accessible text description of the image. */
@@ -36,6 +34,4 @@ export type AvatarProps = {
     onLoadingStatusChange?: Avatar.Image.Props['onLoadingStatusChange'];
     /** Additional CSS class names. */
     className?: string;
-    /** Native HTML attributes forwarded to the root element. */
-    [key: string]: unknown;
 };

package/dist/components/data-display/avatar/types/index.d.ts

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { default as AvatarFallback } from '../components/avatar-fallback/AvatarFallback.tsx';
 import { default as AvatarImage } from '../components/avatar-image/AvatarImage.tsx';
 import { default as AvatarRoot } from '../components/avatar-root/AvatarRoot.tsx';
-import { default as AvatarStatus } from '../components/avatar-status/AvatarStatus.tsx';
+import { default as AvatarStatusComponent } from '../components/avatar-status/AvatarStatus.tsx';
 import { AvatarProps } from './Avatar.props.ts';
 export type { AvatarProps } from './Avatar.props.ts';
 export type { AvatarColor, AvatarShape, AvatarSize, AvatarStatus, } from './Avatar.types.ts';
@@ -10,5 +10,5 @@ export type AvatarCompound = FC<AvatarProps> & {
     Root: typeof AvatarRoot;
     Image: typeof AvatarImage;
     Fallback: typeof AvatarFallback;
-    Status: typeof AvatarStatus;
+    Status: typeof AvatarStatusComponent;
 };

package/dist/components/data-display/badge/Badge.cjs

@@ -1,2 +1,2 @@
-"use strict";const s=require("react/jsx-runtime"),d=require("./styles/Badge.css.cjs"),r=require("./constants/badgeSizes.const.cjs"),c=require("../../foundation/icon/Icon.cjs");require("../../foundation/icon/styles/Icon.css.cjs");const p=require("../../foundation/typography/Typography.cjs");require("../../foundation/typography/styles/Typography.css.cjs");const x=require("../../layout/box/Box.cjs");require("../../layout/box/styles/Box.css.cjs");const B=require("../../../utils/cn.cjs"),I=require("react"),o=I.memo(({label:t,variant:a,color:_,size:e="md",startIcon:i,endIcon:n,className:u,ref:q,display:E="inline-flex",borderRadius:S="sm",...m})=>s.jsxs(x,{as:"span",ref:q,display:E,borderRadius:S,className:B.cn(d.BADGE_STYLES.recipe({variant:a,color:_,size:e}),u),...m,children:[i&&s.jsx(c,{icon:i,size:r.BADGE_SIZE_TO_ICON_SIZE[e]}),s.jsx(p,{as:"span",variant:"span",fontSize:r.BADGE_SIZE_TO_FONT_SIZE[e],fontWeight:"medium",children:t}),n&&s.jsx(c,{icon:n,size:r.BADGE_SIZE_TO_ICON_SIZE[e]})]}));o.displayName="Badge";module.exports=o;
+"use strict";const r=require("react/jsx-runtime"),d=require("./styles/Badge.css.cjs"),s=require("./constants/badgeSizes.const.cjs"),c=require("../../foundation/icon/Icon.cjs");require("../../foundation/icon/styles/Icon.css.cjs");const p=require("../../foundation/typography/Typography.cjs");require("../../foundation/typography/styles/Typography.css.cjs");const x=require("../../layout/box/Box.cjs");require("../../layout/box/styles/Box.css.cjs");const B=require("../../../utils/cn.cjs"),I=require("react"),o=I.memo(({label:t,variant:a,color:_,size:e="md",startIcon:i,endIcon:n,className:u,ref:q,display:E="inline-flex",borderRadius:S="sm",...m})=>r.jsxs(x,{as:"span",ref:q,display:E,borderRadius:S,className:B.cn(d.BADGE_STYLES.recipe({variant:a,color:_,size:e}),u),...m,children:[i&&r.jsx(c,{icon:i,size:s.BADGE_SIZE_TO_ICON_SIZE[e]}),r.jsx(p,{as:"span",variant:"span",fontSize:s.BADGE_SIZE_TO_FONT_SIZE[e],fontWeight:"medium",children:t}),n&&r.jsx(c,{icon:n,size:s.BADGE_SIZE_TO_ICON_SIZE[e]})]}));o.displayName="Badge";module.exports=o;
 //# sourceMappingURL=Badge.cjs.map

package/dist/components/data-display/badge/constants/badgeVariants.const.d.ts

@@ -1,7 +1,7 @@
 export declare const BADGE_VARIANTS: {
-    readonly solid: "solid";
+    readonly contained: "contained";
     readonly subtle: "subtle";
-    readonly outline: "outline";
+    readonly outlined: "outlined";
     readonly outlinedSubtle: "outlinedSubtle";
 };
-export declare const BADGE_VARIANTS_ARRAY: ("outline" | "solid" | "subtle" | "outlinedSubtle")[];
+export declare const BADGE_VARIANTS_ARRAY: ("contained" | "outlined" | "subtle" | "outlinedSubtle")[];

package/dist/components/data-display/badge/styles/Badge.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                              */;/* empty css                           */const r=require("@vanilla-extract/recipes/createRuntimeFn");var o={recipe:r.createRuntimeFn({defaultClassName:"mw901r0",variantClassNames:{size:{sm:"mw901r1",md:"mw901r2",lg:"mw901r3"},variant:{solid:"mw901r4",subtle:"mw901r5",outline:"mw901r6",outlinedSubtle:"mw901r7"},color:{primary:"mw901r8",secondary:"mw901r9",tertiary:"mw901ra",destructive:"mw901rb",success:"mw901rc",warning:"mw901rd",info:"mw901re",purple:"mw901rf",pink:"mw901rg",orange:"mw901rh",teal:"mw901ri",cyan:"mw901rj",indigo:"mw901rk"}},defaultVariants:{variant:"outlinedSubtle",color:"primary",size:"md"},compoundVariants:[[{variant:"solid",color:"primary"},"mw901rl"],[{variant:"solid",color:"secondary"},"mw901rm"],[{variant:"solid",color:"tertiary"},"mw901rn"],[{variant:"solid",color:"destructive"},"mw901ro"],[{variant:"solid",color:"success"},"mw901rp"],[{variant:"solid",color:"warning"},"mw901rq"],[{variant:"solid",color:"info"},"mw901rr"],[{variant:"solid",color:"purple"},"mw901rs"],[{variant:"solid",color:"pink"},"mw901rt"],[{variant:"solid",color:"orange"},"mw901ru"],[{variant:"solid",color:"teal"},"mw901rv"],[{variant:"solid",color:"cyan"},"mw901rw"],[{variant:"solid",color:"indigo"},"mw901rx"],[{variant:"subtle",color:"primary"},"mw901ry"],[{variant:"subtle",color:"secondary"},"mw901rz"],[{variant:"subtle",color:"tertiary"},"mw901r10"],[{variant:"subtle",color:"destructive"},"mw901r11"],[{variant:"subtle",color:"success"},"mw901r12"],[{variant:"subtle",color:"warning"},"mw901r13"],[{variant:"subtle",color:"info"},"mw901r14"],[{variant:"subtle",color:"purple"},"mw901r15"],[{variant:"subtle",color:"pink"},"mw901r16"],[{variant:"subtle",color:"orange"},"mw901r17"],[{variant:"subtle",color:"teal"},"mw901r18"],[{variant:"subtle",color:"cyan"},"mw901r19"],[{variant:"subtle",color:"indigo"},"mw901r1a"],[{variant:"outline",color:"primary"},"mw901r1b"],[{variant:"outline",color:"secondary"},"mw901r1c"],[{variant:"outline",color:"tertiary"},"mw901r1d"],[{variant:"outline",color:"destructive"},"mw901r1e"],[{variant:"outline",color:"success"},"mw901r1f"],[{variant:"outline",color:"warning"},"mw901r1g"],[{variant:"outline",color:"info"},"mw901r1h"],[{variant:"outline",color:"purple"},"mw901r1i"],[{variant:"outline",color:"pink"},"mw901r1j"],[{variant:"outline",color:"orange"},"mw901r1k"],[{variant:"outline",color:"teal"},"mw901r1l"],[{variant:"outline",color:"cyan"},"mw901r1m"],[{variant:"outline",color:"indigo"},"mw901r1n"],[{variant:"outlinedSubtle",color:"primary"},"mw901r1o"],[{variant:"outlinedSubtle",color:"secondary"},"mw901r1p"],[{variant:"outlinedSubtle",color:"tertiary"},"mw901r1q"],[{variant:"outlinedSubtle",color:"destructive"},"mw901r1r"],[{variant:"outlinedSubtle",color:"success"},"mw901r1s"],[{variant:"outlinedSubtle",color:"warning"},"mw901r1t"],[{variant:"outlinedSubtle",color:"info"},"mw901r1u"],[{variant:"outlinedSubtle",color:"purple"},"mw901r1v"],[{variant:"outlinedSubtle",color:"pink"},"mw901r1w"],[{variant:"outlinedSubtle",color:"orange"},"mw901r1x"],[{variant:"outlinedSubtle",color:"teal"},"mw901r1y"],[{variant:"outlinedSubtle",color:"cyan"},"mw901r1z"],[{variant:"outlinedSubtle",color:"indigo"},"mw901r20"]]})};exports.BADGE_STYLES=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                              */;/* empty css                           */const r=require("@vanilla-extract/recipes/createRuntimeFn");var o={recipe:r.createRuntimeFn({defaultClassName:"mw901r0",variantClassNames:{size:{sm:"mw901r1",md:"mw901r2",lg:"mw901r3"},variant:{contained:"mw901r4",subtle:"mw901r5",outlined:"mw901r6",outlinedSubtle:"mw901r7"},color:{primary:"mw901r8",secondary:"mw901r9",tertiary:"mw901ra",destructive:"mw901rb",success:"mw901rc",warning:"mw901rd",info:"mw901re",purple:"mw901rf",pink:"mw901rg",orange:"mw901rh",teal:"mw901ri",cyan:"mw901rj",indigo:"mw901rk"}},defaultVariants:{variant:"outlinedSubtle",color:"primary",size:"md"},compoundVariants:[[{variant:"contained",color:"primary"},"mw901rl"],[{variant:"contained",color:"secondary"},"mw901rm"],[{variant:"contained",color:"tertiary"},"mw901rn"],[{variant:"contained",color:"destructive"},"mw901ro"],[{variant:"contained",color:"success"},"mw901rp"],[{variant:"contained",color:"warning"},"mw901rq"],[{variant:"contained",color:"info"},"mw901rr"],[{variant:"contained",color:"purple"},"mw901rs"],[{variant:"contained",color:"pink"},"mw901rt"],[{variant:"contained",color:"orange"},"mw901ru"],[{variant:"contained",color:"teal"},"mw901rv"],[{variant:"contained",color:"cyan"},"mw901rw"],[{variant:"contained",color:"indigo"},"mw901rx"],[{variant:"subtle",color:"primary"},"mw901ry"],[{variant:"subtle",color:"secondary"},"mw901rz"],[{variant:"subtle",color:"tertiary"},"mw901r10"],[{variant:"subtle",color:"destructive"},"mw901r11"],[{variant:"subtle",color:"success"},"mw901r12"],[{variant:"subtle",color:"warning"},"mw901r13"],[{variant:"subtle",color:"info"},"mw901r14"],[{variant:"subtle",color:"purple"},"mw901r15"],[{variant:"subtle",color:"pink"},"mw901r16"],[{variant:"subtle",color:"orange"},"mw901r17"],[{variant:"subtle",color:"teal"},"mw901r18"],[{variant:"subtle",color:"cyan"},"mw901r19"],[{variant:"subtle",color:"indigo"},"mw901r1a"],[{variant:"outlined",color:"primary"},"mw901r1b"],[{variant:"outlined",color:"secondary"},"mw901r1c"],[{variant:"outlined",color:"tertiary"},"mw901r1d"],[{variant:"outlined",color:"destructive"},"mw901r1e"],[{variant:"outlined",color:"success"},"mw901r1f"],[{variant:"outlined",color:"warning"},"mw901r1g"],[{variant:"outlined",color:"info"},"mw901r1h"],[{variant:"outlined",color:"purple"},"mw901r1i"],[{variant:"outlined",color:"pink"},"mw901r1j"],[{variant:"outlined",color:"orange"},"mw901r1k"],[{variant:"outlined",color:"teal"},"mw901r1l"],[{variant:"outlined",color:"cyan"},"mw901r1m"],[{variant:"outlined",color:"indigo"},"mw901r1n"],[{variant:"outlinedSubtle",color:"primary"},"mw901r1o"],[{variant:"outlinedSubtle",color:"secondary"},"mw901r1p"],[{variant:"outlinedSubtle",color:"tertiary"},"mw901r1q"],[{variant:"outlinedSubtle",color:"destructive"},"mw901r1r"],[{variant:"outlinedSubtle",color:"success"},"mw901r1s"],[{variant:"outlinedSubtle",color:"warning"},"mw901r1t"],[{variant:"outlinedSubtle",color:"info"},"mw901r1u"],[{variant:"outlinedSubtle",color:"purple"},"mw901r1v"],[{variant:"outlinedSubtle",color:"pink"},"mw901r1w"],[{variant:"outlinedSubtle",color:"orange"},"mw901r1x"],[{variant:"outlinedSubtle",color:"teal"},"mw901r1y"],[{variant:"outlinedSubtle",color:"cyan"},"mw901r1z"],[{variant:"outlinedSubtle",color:"indigo"},"mw901r20"]]})};exports.BADGE_STYLES=o;
 //# sourceMappingURL=Badge.css.cjs.map

package/dist/components/data-display/badge/styles/Badge.css.d.ts

@@ -25,9 +25,9 @@ export declare const BADGE_STYLES: {
             };
         };
         variant: {
-            solid: {};
+            contained: {};
             subtle: {};
-            outline: {
+            outlined: {
                 backgroundColor: "transparent";
             };
             outlinedSubtle: {};

package/dist/components/data-display/badge/styles/Badge.css.js

@@ -1,8 +1,8 @@
 /* empty css                                            */
 /* empty css                         */
 import { createRuntimeFn as r } from "@vanilla-extract/recipes/createRuntimeFn";
-var t = { recipe: r({ defaultClassName: "mw901r0", variantClassNames: { size: { sm: "mw901r1", md: "mw901r2", lg: "mw901r3" }, variant: { solid: "mw901r4", subtle: "mw901r5", outline: "mw901r6", outlinedSubtle: "mw901r7" }, color: { primary: "mw901r8", secondary: "mw901r9", tertiary: "mw901ra", destructive: "mw901rb", success: "mw901rc", warning: "mw901rd", info: "mw901re", purple: "mw901rf", pink: "mw901rg", orange: "mw901rh", teal: "mw901ri", cyan: "mw901rj", indigo: "mw901rk" } }, defaultVariants: { variant: "outlinedSubtle", color: "primary", size: "md" }, compoundVariants: [[{ variant: "solid", color: "primary" }, "mw901rl"], [{ variant: "solid", color: "secondary" }, "mw901rm"], [{ variant: "solid", color: "tertiary" }, "mw901rn"], [{ variant: "solid", color: "destructive" }, "mw901ro"], [{ variant: "solid", color: "success" }, "mw901rp"], [{ variant: "solid", color: "warning" }, "mw901rq"], [{ variant: "solid", color: "info" }, "mw901rr"], [{ variant: "solid", color: "purple" }, "mw901rs"], [{ variant: "solid", color: "pink" }, "mw901rt"], [{ variant: "solid", color: "orange" }, "mw901ru"], [{ variant: "solid", color: "teal" }, "mw901rv"], [{ variant: "solid", color: "cyan" }, "mw901rw"], [{ variant: "solid", color: "indigo" }, "mw901rx"], [{ variant: "subtle", color: "primary" }, "mw901ry"], [{ variant: "subtle", color: "secondary" }, "mw901rz"], [{ variant: "subtle", color: "tertiary" }, "mw901r10"], [{ variant: "subtle", color: "destructive" }, "mw901r11"], [{ variant: "subtle", color: "success" }, "mw901r12"], [{ variant: "subtle", color: "warning" }, "mw901r13"], [{ variant: "subtle", color: "info" }, "mw901r14"], [{ variant: "subtle", color: "purple" }, "mw901r15"], [{ variant: "subtle", color: "pink" }, "mw901r16"], [{ variant: "subtle", color: "orange" }, "mw901r17"], [{ variant: "subtle", color: "teal" }, "mw901r18"], [{ variant: "subtle", color: "cyan" }, "mw901r19"], [{ variant: "subtle", color: "indigo" }, "mw901r1a"], [{ variant: "outline", color: "primary" }, "mw901r1b"], [{ variant: "outline", color: "secondary" }, "mw901r1c"], [{ variant: "outline", color: "tertiary" }, "mw901r1d"], [{ variant: "outline", color: "destructive" }, "mw901r1e"], [{ variant: "outline", color: "success" }, "mw901r1f"], [{ variant: "outline", color: "warning" }, "mw901r1g"], [{ variant: "outline", color: "info" }, "mw901r1h"], [{ variant: "outline", color: "purple" }, "mw901r1i"], [{ variant: "outline", color: "pink" }, "mw901r1j"], [{ variant: "outline", color: "orange" }, "mw901r1k"], [{ variant: "outline", color: "teal" }, "mw901r1l"], [{ variant: "outline", color: "cyan" }, "mw901r1m"], [{ variant: "outline", color: "indigo" }, "mw901r1n"], [{ variant: "outlinedSubtle", color: "primary" }, "mw901r1o"], [{ variant: "outlinedSubtle", color: "secondary" }, "mw901r1p"], [{ variant: "outlinedSubtle", color: "tertiary" }, "mw901r1q"], [{ variant: "outlinedSubtle", color: "destructive" }, "mw901r1r"], [{ variant: "outlinedSubtle", color: "success" }, "mw901r1s"], [{ variant: "outlinedSubtle", color: "warning" }, "mw901r1t"], [{ variant: "outlinedSubtle", color: "info" }, "mw901r1u"], [{ variant: "outlinedSubtle", color: "purple" }, "mw901r1v"], [{ variant: "outlinedSubtle", color: "pink" }, "mw901r1w"], [{ variant: "outlinedSubtle", color: "orange" }, "mw901r1x"], [{ variant: "outlinedSubtle", color: "teal" }, "mw901r1y"], [{ variant: "outlinedSubtle", color: "cyan" }, "mw901r1z"], [{ variant: "outlinedSubtle", color: "indigo" }, "mw901r20"]] }) };
+var n = { recipe: r({ defaultClassName: "mw901r0", variantClassNames: { size: { sm: "mw901r1", md: "mw901r2", lg: "mw901r3" }, variant: { contained: "mw901r4", subtle: "mw901r5", outlined: "mw901r6", outlinedSubtle: "mw901r7" }, color: { primary: "mw901r8", secondary: "mw901r9", tertiary: "mw901ra", destructive: "mw901rb", success: "mw901rc", warning: "mw901rd", info: "mw901re", purple: "mw901rf", pink: "mw901rg", orange: "mw901rh", teal: "mw901ri", cyan: "mw901rj", indigo: "mw901rk" } }, defaultVariants: { variant: "outlinedSubtle", color: "primary", size: "md" }, compoundVariants: [[{ variant: "contained", color: "primary" }, "mw901rl"], [{ variant: "contained", color: "secondary" }, "mw901rm"], [{ variant: "contained", color: "tertiary" }, "mw901rn"], [{ variant: "contained", color: "destructive" }, "mw901ro"], [{ variant: "contained", color: "success" }, "mw901rp"], [{ variant: "contained", color: "warning" }, "mw901rq"], [{ variant: "contained", color: "info" }, "mw901rr"], [{ variant: "contained", color: "purple" }, "mw901rs"], [{ variant: "contained", color: "pink" }, "mw901rt"], [{ variant: "contained", color: "orange" }, "mw901ru"], [{ variant: "contained", color: "teal" }, "mw901rv"], [{ variant: "contained", color: "cyan" }, "mw901rw"], [{ variant: "contained", color: "indigo" }, "mw901rx"], [{ variant: "subtle", color: "primary" }, "mw901ry"], [{ variant: "subtle", color: "secondary" }, "mw901rz"], [{ variant: "subtle", color: "tertiary" }, "mw901r10"], [{ variant: "subtle", color: "destructive" }, "mw901r11"], [{ variant: "subtle", color: "success" }, "mw901r12"], [{ variant: "subtle", color: "warning" }, "mw901r13"], [{ variant: "subtle", color: "info" }, "mw901r14"], [{ variant: "subtle", color: "purple" }, "mw901r15"], [{ variant: "subtle", color: "pink" }, "mw901r16"], [{ variant: "subtle", color: "orange" }, "mw901r17"], [{ variant: "subtle", color: "teal" }, "mw901r18"], [{ variant: "subtle", color: "cyan" }, "mw901r19"], [{ variant: "subtle", color: "indigo" }, "mw901r1a"], [{ variant: "outlined", color: "primary" }, "mw901r1b"], [{ variant: "outlined", color: "secondary" }, "mw901r1c"], [{ variant: "outlined", color: "tertiary" }, "mw901r1d"], [{ variant: "outlined", color: "destructive" }, "mw901r1e"], [{ variant: "outlined", color: "success" }, "mw901r1f"], [{ variant: "outlined", color: "warning" }, "mw901r1g"], [{ variant: "outlined", color: "info" }, "mw901r1h"], [{ variant: "outlined", color: "purple" }, "mw901r1i"], [{ variant: "outlined", color: "pink" }, "mw901r1j"], [{ variant: "outlined", color: "orange" }, "mw901r1k"], [{ variant: "outlined", color: "teal" }, "mw901r1l"], [{ variant: "outlined", color: "cyan" }, "mw901r1m"], [{ variant: "outlined", color: "indigo" }, "mw901r1n"], [{ variant: "outlinedSubtle", color: "primary" }, "mw901r1o"], [{ variant: "outlinedSubtle", color: "secondary" }, "mw901r1p"], [{ variant: "outlinedSubtle", color: "tertiary" }, "mw901r1q"], [{ variant: "outlinedSubtle", color: "destructive" }, "mw901r1r"], [{ variant: "outlinedSubtle", color: "success" }, "mw901r1s"], [{ variant: "outlinedSubtle", color: "warning" }, "mw901r1t"], [{ variant: "outlinedSubtle", color: "info" }, "mw901r1u"], [{ variant: "outlinedSubtle", color: "purple" }, "mw901r1v"], [{ variant: "outlinedSubtle", color: "pink" }, "mw901r1w"], [{ variant: "outlinedSubtle", color: "orange" }, "mw901r1x"], [{ variant: "outlinedSubtle", color: "teal" }, "mw901r1y"], [{ variant: "outlinedSubtle", color: "cyan" }, "mw901r1z"], [{ variant: "outlinedSubtle", color: "indigo" }, "mw901r20"]] }) };
 export {
-  t as BADGE_STYLES
+  n as BADGE_STYLES
 };
 //# sourceMappingURL=Badge.css.js.map

package/dist/components/data-display/badge/styles/variants/{solid.d.ts → contained.d.ts}

@@ -1,5 +1,5 @@
 import { BadgeCompoundVariant } from './types';
 /**
- * Compound variants for the "solid" visual variant.
+ * Compound variants for the "contained" visual variant.
  */
 export declare const solidCompoundVariants: BadgeCompoundVariant[];

package/dist/components/data-display/badge/styles/variants/{outline.d.ts → outlined.d.ts}

@@ -1,5 +1,5 @@
 import { BadgeCompoundVariant } from './types';
 /**
- * Compound variants for the "outline" visual variant.
+ * Compound variants for the "outlined" visual variant.
  */
 export declare const outlineCompoundVariants: BadgeCompoundVariant[];

package/dist/components/data-display/badge/types/Badge.props.d.ts

@@ -6,7 +6,7 @@ export type BadgeProps = Omit<BoxProps, 'as' | 'children' | 'ref'> & {
     ref?: React.Ref<HTMLSpanElement>;
     /** The text content rendered inside the badge. */
     label: string;
-    /** Visual style variant. Defaults to `subtle`. */
+    /** Visual style variant. Defaults to `outlinedSubtle`. */
     variant?: BadgeVariant;
     /** Semantic color intent. Defaults to `primary`. */
     color?: BadgeColor;

package/dist/components/data-display/index.d.ts

@@ -1,4 +1,5 @@
 export * from './avatar';
 export * from './avatar-group';
 export * from './badge';
+export * from './rich-text-renderer';
 export * from './table';

package/dist/components/data-display/markdown-renderer/constants/markdownAllowedElements.const.d.ts

@@ -0,0 +1 @@
+export declare const MARKDOWN_ALLOWED_ELEMENTS: readonly ["a", "blockquote", "br", "code", "del", "em", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "li", "ol", "p", "pre", "strong", "table", "tbody", "td", "th", "thead", "tr", "ul"];

package/dist/components/data-display/rich-text-renderer/RichTextRenderer.cjs

@@ -0,0 +1,2 @@
+"use strict";const n=require("react/jsx-runtime"),i=require("react"),o=require("../../layout/box/Box.cjs");require("../../layout/box/styles/Box.css.cjs");const R=require("../../../utils/cn.cjs"),u=require("./styles/RichTextRenderer.css.cjs"),d=require("./utils/renderRichTextNodes.utils.cjs"),e=i.memo(({value:r,className:c,ref:s,...t})=>n.jsx(o,{ref:s,className:R.cn(u.RICH_TEXT_RENDERER_STYLES,c),...t,children:d.renderRichTextNodes(r.content)}));e.displayName="RichTextRenderer";module.exports=e;
+//# sourceMappingURL=RichTextRenderer.cjs.map

package/dist/components/data-display/rich-text-renderer/RichTextRenderer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextRenderer.cjs","sources":["../../../../src/components/data-display/rich-text-renderer/RichTextRenderer.tsx"],"sourcesContent":["import { memo } from 'react'\r\n\r\nimport { Box } from '@components/layout/box'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { RICH_TEXT_RENDERER_STYLES } from '@components/data-display/rich-text-renderer/styles/RichTextRenderer.css.ts'\r\nimport type { RichTextRendererProps } from '@components/data-display/rich-text-renderer/types'\r\nimport { renderRichTextNodes } from '@components/data-display/rich-text-renderer/utils/renderRichTextNodes.utils.tsx'\r\n\r\nconst RichTextRenderer = memo<RichTextRendererProps>(({\r\n    value,\r\n    className,\r\n    ref,\r\n    ...props\r\n}) => (\r\n    <Box\r\n        ref={ref}\r\n        className={cn(RICH_TEXT_RENDERER_STYLES, className)}\r\n        {...props}\r\n    >\r\n        {renderRichTextNodes(value.content)}\r\n    </Box>\r\n))\r\n\r\nRichTextRenderer.displayName = 'RichTextRenderer'\r\n\r\nexport default RichTextRenderer\r\n"],"names":["RichTextRenderer","memo","value","className","ref","props","jsx","Box","cn","RICH_TEXT_RENDERER_STYLES","renderRichTextNodes"],"mappings":"qSAQMA,EAAmBC,EAAAA,KAA4B,CAAC,CAClD,MAAAC,EACA,UAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IACIC,EAAAA,IAACC,EAAA,CACG,IAAAH,EACA,UAAWI,EAAAA,GAAGC,EAAAA,0BAA2BN,CAAS,EACjD,GAAGE,EAEH,SAAAK,EAAAA,oBAAoBR,EAAM,OAAO,CAAA,CACtC,CACH,EAEDF,EAAiB,YAAc"}

package/dist/components/data-display/rich-text-renderer/RichTextRenderer.d.ts

@@ -0,0 +1,4 @@
+import { RichTextRendererProps } from './types';
+import { NamedExoticComponent } from 'react';
+declare const RichTextRenderer: NamedExoticComponent<RichTextRendererProps>;
+export default RichTextRenderer;

package/dist/components/data-display/rich-text-renderer/RichTextRenderer.js

@@ -0,0 +1,26 @@
+import { jsx as t } from "react/jsx-runtime";
+import { memo as i } from "react";
+import p from "../../layout/box/Box.js";
+import "../../layout/box/styles/Box.css.js";
+import { cn as R } from "../../../utils/cn.js";
+import { RICH_TEXT_RENDERER_STYLES as c } from "./styles/RichTextRenderer.css.js";
+import { renderRichTextNodes as n } from "./utils/renderRichTextNodes.utils.js";
+const d = i(({
+  value: r,
+  className: e,
+  ref: o,
+  ...m
+}) => /* @__PURE__ */ t(
+  p,
+  {
+    ref: o,
+    className: R(c, e),
+    ...m,
+    children: n(r.content)
+  }
+));
+d.displayName = "RichTextRenderer";
+export {
+  d as default
+};
+//# sourceMappingURL=RichTextRenderer.js.map

package/dist/components/data-display/rich-text-renderer/RichTextRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextRenderer.js","sources":["../../../../src/components/data-display/rich-text-renderer/RichTextRenderer.tsx"],"sourcesContent":["import { memo } from 'react'\r\n\r\nimport { Box } from '@components/layout/box'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { RICH_TEXT_RENDERER_STYLES } from '@components/data-display/rich-text-renderer/styles/RichTextRenderer.css.ts'\r\nimport type { RichTextRendererProps } from '@components/data-display/rich-text-renderer/types'\r\nimport { renderRichTextNodes } from '@components/data-display/rich-text-renderer/utils/renderRichTextNodes.utils.tsx'\r\n\r\nconst RichTextRenderer = memo<RichTextRendererProps>(({\r\n    value,\r\n    className,\r\n    ref,\r\n    ...props\r\n}) => (\r\n    <Box\r\n        ref={ref}\r\n        className={cn(RICH_TEXT_RENDERER_STYLES, className)}\r\n        {...props}\r\n    >\r\n        {renderRichTextNodes(value.content)}\r\n    </Box>\r\n))\r\n\r\nRichTextRenderer.displayName = 'RichTextRenderer'\r\n\r\nexport default RichTextRenderer\r\n"],"names":["RichTextRenderer","memo","value","className","ref","props","jsx","Box","cn","RICH_TEXT_RENDERER_STYLES","renderRichTextNodes"],"mappings":";;;;;;;AAQA,MAAMA,IAAmBC,EAA4B,CAAC;AAAA,EAClD,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACP,MACI,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,KAAAH;AAAA,IACA,WAAWI,EAAGC,GAA2BN,CAAS;AAAA,IACjD,GAAGE;AAAA,IAEH,UAAAK,EAAoBR,EAAM,OAAO;AAAA,EAAA;AACtC,CACH;AAEDF,EAAiB,cAAc;"}

package/dist/components/data-display/rich-text-renderer/index.d.ts

@@ -0,0 +1,3 @@
+export { default as RichTextRenderer } from './RichTextRenderer.tsx';
+export { RICH_TEXT_RENDERER_STYLES } from './styles/RichTextRenderer.css.ts';
+export type { RichTextRendererProps } from './types';

package/dist/components/data-display/rich-text-renderer/styles/RichTextRenderer.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                              */;/* empty css                                      */var e="_14fy7o60";exports.RICH_TEXT_RENDERER_STYLES=e;
+//# sourceMappingURL=RichTextRenderer.css.cjs.map

package/dist/components/data-display/rich-text-renderer/styles/RichTextRenderer.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextRenderer.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}