@raystack/apsara 0.56.7 → 1.0.0-rc.1

package/dist/components/drawer/drawer.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+var drawer = require('@base-ui/react/drawer');
+var drawerContent = require('./drawer-content.cjs');
+var drawerMisc = require('./drawer-misc.cjs');
+var drawerRoot = require('./drawer-root.cjs');
+
+const Drawer = Object.assign(drawerRoot.DrawerRoot, {
+    Trigger: drawer.DrawerPreview.Trigger,
+    Content: drawerContent.DrawerContent,
+    Header: drawerMisc.DrawerHeader,
+    Title: drawerMisc.DrawerTitle,
+    Description: drawerMisc.DrawerDescription,
+    Body: drawerMisc.DrawerBody,
+    Footer: drawerMisc.DrawerFooter,
+    Close: drawer.DrawerPreview.Close
+});
+
+exports.Drawer = Drawer;
+//# sourceMappingURL=drawer.cjs.map

package/dist/components/drawer/drawer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.cjs","sources":["../../../components/drawer/drawer.tsx"],"sourcesContent":["import { DrawerPreview as DrawerPrimitive } from '@base-ui/react/drawer';\nimport { DrawerContent } from './drawer-content';\nimport {\n  DrawerBody,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle\n} from './drawer-misc';\nimport { DrawerRoot } from './drawer-root';\n\nexport type { DrawerContentProps } from './drawer-content';\nexport type { DrawerRootProps } from './drawer-root';\n\nexport const Drawer = Object.assign(DrawerRoot, {\n  Trigger: DrawerPrimitive.Trigger,\n  Content: DrawerContent,\n  Header: DrawerHeader,\n  Title: DrawerTitle,\n  Description: DrawerDescription,\n  Body: DrawerBody,\n  Footer: DrawerFooter,\n  Close: DrawerPrimitive.Close\n});\n"],"names":["DrawerRoot","DrawerPrimitive","DrawerContent","DrawerHeader","DrawerTitle","DrawerDescription","DrawerBody","DrawerFooter"],"mappings":";;;;;;;MAca,MAAM,GAAG,MAAM,CAAC,MAAM,CAACA,qBAAU,EAAE;IAC9C,OAAO,EAAEC,oBAAe,CAAC,OAAO;AAChC,IAAA,OAAO,EAAEC,2BAAa;AACtB,IAAA,MAAM,EAAEC,uBAAY;AACpB,IAAA,KAAK,EAAEC,sBAAW;AAClB,IAAA,WAAW,EAAEC,4BAAiB;AAC9B,IAAA,IAAI,EAAEC,qBAAU;AAChB,IAAA,MAAM,EAAEC,uBAAY;IACpB,KAAK,EAAEN,oBAAe,CAAC,KAAK;AAC7B,CAAA;;;;"}

package/dist/components/drawer/drawer.d.ts

@@ -0,0 +1,23 @@
+import { DrawerPreview as DrawerPrimitive } from '@base-ui/react/drawer';
+import { DrawerContent } from './drawer-content';
+import { DrawerBody, DrawerDescription, DrawerFooter, DrawerTitle } from './drawer-misc';
+import { DrawerRoot } from './drawer-root';
+export type { DrawerContentProps } from './drawer-content';
+export type { DrawerRootProps } from './drawer-root';
+export declare const Drawer: typeof DrawerRoot & {
+    Trigger: DrawerPrimitive.Trigger;
+    Content: typeof DrawerContent;
+    Header: {
+        ({ children, className }: {
+            children: import("react").ReactNode;
+            className?: string | undefined;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Title: typeof DrawerTitle;
+    Description: typeof DrawerDescription;
+    Body: typeof DrawerBody;
+    Footer: typeof DrawerFooter;
+    Close: DrawerPrimitive.Close;
+};
+//# sourceMappingURL=drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../components/drawer/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,YAAY,EAEZ,WAAW,EACZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;CASjB,CAAC"}

package/dist/components/drawer/drawer.js

@@ -0,0 +1,18 @@
+import { DrawerPreview } from '@base-ui/react/drawer';
+import { DrawerContent } from './drawer-content.js';
+import { DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter } from './drawer-misc.js';
+import { DrawerRoot } from './drawer-root.js';
+
+const Drawer = Object.assign(DrawerRoot, {
+    Trigger: DrawerPreview.Trigger,
+    Content: DrawerContent,
+    Header: DrawerHeader,
+    Title: DrawerTitle,
+    Description: DrawerDescription,
+    Body: DrawerBody,
+    Footer: DrawerFooter,
+    Close: DrawerPreview.Close
+});
+
+export { Drawer };
+//# sourceMappingURL=drawer.js.map

package/dist/components/drawer/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","sources":["../../../components/drawer/drawer.tsx"],"sourcesContent":["import { DrawerPreview as DrawerPrimitive } from '@base-ui/react/drawer';\nimport { DrawerContent } from './drawer-content';\nimport {\n  DrawerBody,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle\n} from './drawer-misc';\nimport { DrawerRoot } from './drawer-root';\n\nexport type { DrawerContentProps } from './drawer-content';\nexport type { DrawerRootProps } from './drawer-root';\n\nexport const Drawer = Object.assign(DrawerRoot, {\n  Trigger: DrawerPrimitive.Trigger,\n  Content: DrawerContent,\n  Header: DrawerHeader,\n  Title: DrawerTitle,\n  Description: DrawerDescription,\n  Body: DrawerBody,\n  Footer: DrawerFooter,\n  Close: DrawerPrimitive.Close\n});\n"],"names":["DrawerPrimitive"],"mappings":";;;;;MAca,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE;IAC9C,OAAO,EAAEA,aAAe,CAAC,OAAO;AAChC,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,KAAK,EAAE,WAAW;AAClB,IAAA,WAAW,EAAE,iBAAiB;AAC9B,IAAA,IAAI,EAAE,UAAU;AAChB,IAAA,MAAM,EAAE,YAAY;IACpB,KAAK,EAAEA,aAAe,CAAC,KAAK;AAC7B,CAAA;;;;"}

package/dist/components/drawer/drawer.module.css.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"backdrop":"drawer-module_backdrop__ec-fE","viewport":"drawer-module_viewport__QFE1z","drawerPopup-right":"drawer-module_drawerPopup-right__PMF5q","drawerPopup-left":"drawer-module_drawerPopup-left__z2HaX","drawerPopup-top":"drawer-module_drawerPopup-top__oub9Q","drawerPopup-bottom":"drawer-module_drawerPopup-bottom__RyQ-2","drawerPopup":"drawer-module_drawerPopup__5Br64","content":"drawer-module_content__nJCyN","close":"drawer-module_close__sk-zV","header":"drawer-module_header__kh4dG","title":"drawer-module_title__wrN8s","description":"drawer-module_description__HjJYQ","body":"drawer-module_body__MOVn9","footer":"drawer-module_footer__w5-IO","drawerPopup___right":"drawer-module_drawerPopup-right__PMF5q","drawerPopup___left":"drawer-module_drawerPopup-left__z2HaX","drawerPopup___top":"drawer-module_drawerPopup-top__oub9Q","drawerPopup___bottom":"drawer-module_drawerPopup-bottom__RyQ-2"};
+
+exports.default = styles;
+//# sourceMappingURL=drawer.module.css.cjs.map

package/dist/components/drawer/drawer.module.css.cjs.map

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

package/dist/components/drawer/drawer.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"backdrop":"drawer-module_backdrop__ec-fE","viewport":"drawer-module_viewport__QFE1z","drawerPopup-right":"drawer-module_drawerPopup-right__PMF5q","drawerPopup-left":"drawer-module_drawerPopup-left__z2HaX","drawerPopup-top":"drawer-module_drawerPopup-top__oub9Q","drawerPopup-bottom":"drawer-module_drawerPopup-bottom__RyQ-2","drawerPopup":"drawer-module_drawerPopup__5Br64","content":"drawer-module_content__nJCyN","close":"drawer-module_close__sk-zV","header":"drawer-module_header__kh4dG","title":"drawer-module_title__wrN8s","description":"drawer-module_description__HjJYQ","body":"drawer-module_body__MOVn9","footer":"drawer-module_footer__w5-IO","drawerPopup___right":"drawer-module_drawerPopup-right__PMF5q","drawerPopup___left":"drawer-module_drawerPopup-left__z2HaX","drawerPopup___top":"drawer-module_drawerPopup-top__oub9Q","drawerPopup___bottom":"drawer-module_drawerPopup-bottom__RyQ-2"};
+
+export { styles as default };
+//# sourceMappingURL=drawer.module.css.js.map

package/dist/components/drawer/drawer.module.css.js.map

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

package/dist/components/drawer/index.d.ts

@@ -0,0 +1,2 @@
+export { Drawer } from './drawer';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/drawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/drawer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/empty-state/empty-state.cjs

@@ -6,12 +6,13 @@ var flex = require('../flex/flex.cjs');
 var text = require('../text/text.cjs');
 var emptyState_module = require('./empty-state.module.css.cjs');
 
-const EmptyState = ({ icon, heading, subHeading, primaryAction, secondaryAction, classNames, variant = 'empty1' }) => {
+function EmptyState({ icon, heading, subHeading, primaryAction, secondaryAction, classNames, variant = 'empty1', ...props }) {
     if (variant === 'empty2') {
-        return (jsxRuntime.jsx(flex.Flex, { align: 'center', justify: 'center', className: emptyState_module.default.emptyStatePage, children: jsxRuntime.jsxs(flex.Flex, { direction: 'column', align: 'start', gap: 'medium', className: classVarianceAuthority.cx(emptyState_module.default.emptyStateContent, classNames?.container), children: [jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(emptyState_module.default.iconContainer, classNames?.iconContainer), children: jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(emptyState_module.default.icon, emptyState_module.default.iconLarge, classNames?.icon), children: icon }) }), heading && (jsxRuntime.jsx(text.Text, { size: 5, weight: 500, className: classVarianceAuthority.cx(emptyState_module.default.headerText, classNames?.heading), children: heading })), subHeading && (jsxRuntime.jsx(text.Text, { size: 4, weight: 400, className: classVarianceAuthority.cx(emptyState_module.default.subHeaderText, classNames?.subHeading), children: subHeading })), jsxRuntime.jsxs(flex.Flex, { gap: 'medium', children: [primaryAction, secondaryAction] })] }) }));
+        return (jsxRuntime.jsx(flex.Flex, { align: 'center', justify: 'center', className: emptyState_module.default.emptyStatePage, ...props, children: jsxRuntime.jsxs(flex.Flex, { direction: 'column', align: 'start', gap: 'medium', className: classVarianceAuthority.cx(emptyState_module.default.emptyStateContent, classNames?.container), children: [jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(emptyState_module.default.iconContainer, classNames?.iconContainer), children: jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(emptyState_module.default.icon, emptyState_module.default.iconLarge, classNames?.icon), children: icon }) }), heading && (jsxRuntime.jsx(text.Text, { size: 5, weight: 500, className: classVarianceAuthority.cx(emptyState_module.default.headerText, classNames?.heading), children: heading })), subHeading && (jsxRuntime.jsx(text.Text, { size: 4, weight: 400, className: classVarianceAuthority.cx(emptyState_module.default.subHeaderText, classNames?.subHeading), children: subHeading })), jsxRuntime.jsxs(flex.Flex, { gap: 'medium', children: [primaryAction, secondaryAction] })] }) }));
     }
-    return (jsxRuntime.jsxs(flex.Flex, { direction: 'column', align: 'center', gap: 'medium', className: classVarianceAuthority.cx(emptyState_module.default.emptyState, classNames?.container), children: [jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(emptyState_module.default.iconContainer, classNames?.iconContainer), children: jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(emptyState_module.default.icon, classNames?.icon), children: icon }) }), jsxRuntime.jsxs(flex.Flex, { direction: 'column', gap: 'small', align: 'center', children: [heading && (jsxRuntime.jsx(text.Text, { size: 5, weight: 500, className: classVarianceAuthority.cx(emptyState_module.default.headerText, classNames?.heading), children: heading })), subHeading && (jsxRuntime.jsx(text.Text, { size: 4, weight: 400, className: classVarianceAuthority.cx(emptyState_module.default.subHeaderText, classNames?.subHeading), children: subHeading }))] }), primaryAction, secondaryAction] }));
-};
+    return (jsxRuntime.jsxs(flex.Flex, { direction: 'column', align: 'center', gap: 'medium', className: classVarianceAuthority.cx(emptyState_module.default.emptyState, classNames?.container), ...props, children: [jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(emptyState_module.default.iconContainer, classNames?.iconContainer), children: jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(emptyState_module.default.icon, classNames?.icon), children: icon }) }), jsxRuntime.jsxs(flex.Flex, { direction: 'column', gap: 'small', align: 'center', children: [heading && (jsxRuntime.jsx(text.Text, { size: 5, weight: 500, className: classVarianceAuthority.cx(emptyState_module.default.headerText, classNames?.heading), children: heading })), subHeading && (jsxRuntime.jsx(text.Text, { size: 4, weight: 400, className: classVarianceAuthority.cx(emptyState_module.default.subHeaderText, classNames?.subHeading), children: subHeading }))] }), primaryAction, secondaryAction] }));
+}
+EmptyState.displayName = 'EmptyState';
 
 exports.EmptyState = EmptyState;
 //# sourceMappingURL=empty-state.cjs.map

package/dist/components/empty-state/empty-state.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.cjs","sources":["../../../components/empty-state/empty-state.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { Flex } from '../flex';\nimport { Text } from '../text';\nimport styles from './empty-state.module.css';\n\ntype classNameKeys =\n  | 'container'\n  | 'iconContainer'\n  | 'icon'\n  | 'heading'\n  | 'subHeading';\n\ninterface EmptyStateProps {\n  icon: React.ReactNode;\n  heading?: React.ReactNode;\n  subHeading?: React.ReactNode;\n  primaryAction?: React.ReactNode;\n  secondaryAction?: React.ReactNode;\n  classNames?: Partial<Record<classNameKeys, string>>;\n  variant?: 'empty1' | 'empty2';\n}\n\nexport const EmptyState = ({\n  icon,\n  heading,\n  subHeading,\n  primaryAction,\n  secondaryAction,\n  classNames,\n  variant = 'empty1'\n}: EmptyStateProps) => {\n  if (variant === 'empty2') {\n    return (\n      <Flex align='center' justify='center' className={styles.emptyStatePage}>\n        <Flex\n          direction='column'\n          align='start'\n          gap='medium'\n          className={cx(styles.emptyStateContent, classNames?.container)}\n        >\n          <div className={cx(styles.iconContainer, classNames?.iconContainer)}>\n            <div\n              className={cx(styles.icon, styles.iconLarge, classNames?.icon)}\n            >\n              {icon}\n            </div>\n          </div>\n\n          {heading && (\n            <Text\n              size={5}\n              weight={500}\n              className={cx(styles.headerText, classNames?.heading)}\n            >\n              {heading}\n            </Text>\n          )}\n\n          {subHeading && (\n            <Text\n              size={4}\n              weight={400}\n              className={cx(styles.subHeaderText, classNames?.subHeading)}\n            >\n              {subHeading}\n            </Text>\n          )}\n\n          <Flex gap='medium'>\n            {primaryAction}\n            {secondaryAction}\n          </Flex>\n        </Flex>\n      </Flex>\n    );\n  }\n\n  return (\n    <Flex\n      direction='column'\n      align='center'\n      gap='medium'\n      className={cx(styles.emptyState, classNames?.container)}\n    >\n      <div className={cx(styles.iconContainer, classNames?.iconContainer)}>\n        <div className={cx(styles.icon, classNames?.icon)}>{icon}</div>\n      </div>\n\n      <Flex direction='column' gap='small' align='center'>\n        {heading && (\n          <Text\n            size={5}\n            weight={500}\n            className={cx(styles.headerText, classNames?.heading)}\n          >\n            {heading}\n          </Text>\n        )}\n\n        {subHeading && (\n          <Text\n            size={4}\n            weight={400}\n            className={cx(styles.subHeaderText, classNames?.subHeading)}\n          >\n            {subHeading}\n          </Text>\n        )}\n      </Flex>\n\n      {primaryAction}\n\n      {secondaryAction}\n    </Flex>\n  );\n};\n"],"names":["_jsx","Flex","styles","_jsxs","cx","Text"],"mappings":";;;;;;;;MAsBa,UAAU,GAAG,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,aAAa,EACb,eAAe,EACf,UAAU,EACV,OAAO,GAAG,QAAQ,EACF,KAAI;AACpB,IAAA,IAAI,OAAO,KAAK,QAAQ,EAAE;AACxB,QAAA,QACEA,cAAC,CAAAC,SAAI,EAAC,EAAA,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,EAAC,SAAS,EAAEC,yBAAM,CAAC,cAAc,EAAA,QAAA,EACpEC,eAAC,CAAAF,SAAI,IACH,SAAS,EAAC,QAAQ,EAClB,KAAK,EAAC,OAAO,EACb,GAAG,EAAC,QAAQ,EACZ,SAAS,EAAEG,yBAAE,CAACF,yBAAM,CAAC,iBAAiB,EAAE,UAAU,EAAE,SAAS,CAAC,aAE9DF,cAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEI,yBAAE,CAACF,yBAAM,CAAC,aAAa,EAAE,UAAU,EAAE,aAAa,CAAC,EAAA,QAAA,EACjEF,wBACE,SAAS,EAAEI,yBAAE,CAACF,yBAAM,CAAC,IAAI,EAAEA,yBAAM,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,EAE7D,QAAA,EAAA,IAAI,EACD,CAAA,EAAA,CACF,EAEL,OAAO,KACNF,cAAA,CAACK,SAAI,EACH,EAAA,IAAI,EAAE,CAAC,EACP,MAAM,EAAE,GAAG,EACX,SAAS,EAAED,yBAAE,CAACF,yBAAM,CAAC,UAAU,EAAE,UAAU,EAAE,OAAO,CAAC,EAAA,QAAA,EAEpD,OAAO,EAAA,CACH,CACR,EAEA,UAAU,KACTF,eAACK,SAAI,EAAA,EACH,IAAI,EAAE,CAAC,EACP,MAAM,EAAE,GAAG,EACX,SAAS,EAAED,yBAAE,CAACF,yBAAM,CAAC,aAAa,EAAE,UAAU,EAAE,UAAU,CAAC,EAE1D,QAAA,EAAA,UAAU,GACN,CACR,EAEDC,eAAC,CAAAF,SAAI,IAAC,GAAG,EAAC,QAAQ,EAAA,QAAA,EAAA,CACf,aAAa,EACb,eAAe,IACX,CACF,EAAA,CAAA,EAAA,CACF,EACP;KACH;AAED,IAAA,QACEE,eAAA,CAACF,SAAI,EAAA,EACH,SAAS,EAAC,QAAQ,EAClB,KAAK,EAAC,QAAQ,EACd,GAAG,EAAC,QAAQ,EACZ,SAAS,EAAEG,yBAAE,CAACF,yBAAM,CAAC,UAAU,EAAE,UAAU,EAAE,SAAS,CAAC,EAEvD,QAAA,EAAA,CAAAF,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEI,yBAAE,CAACF,yBAAM,CAAC,aAAa,EAAE,UAAU,EAAE,aAAa,CAAC,EACjE,QAAA,EAAAF,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEI,yBAAE,CAACF,yBAAM,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,EAAA,QAAA,EAAG,IAAI,EAAA,CAAO,GAC3D,EAENC,eAAA,CAACF,SAAI,EAAA,EAAC,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAA,QAAA,EAAA,CAChD,OAAO,KACND,cAAC,CAAAK,SAAI,EACH,EAAA,IAAI,EAAE,CAAC,EACP,MAAM,EAAE,GAAG,EACX,SAAS,EAAED,yBAAE,CAACF,yBAAM,CAAC,UAAU,EAAE,UAAU,EAAE,OAAO,CAAC,EAEpD,QAAA,EAAA,OAAO,EACH,CAAA,CACR,EAEA,UAAU,KACTF,cAAA,CAACK,SAAI,EAAA,EACH,IAAI,EAAE,CAAC,EACP,MAAM,EAAE,GAAG,EACX,SAAS,EAAED,yBAAE,CAACF,yBAAM,CAAC,aAAa,EAAE,UAAU,EAAE,UAAU,CAAC,YAE1D,UAAU,EAAA,CACN,CACR,CAAA,EAAA,CACI,EAEN,aAAa,EAEb,eAAe,CAAA,EAAA,CACX,EACP;AACJ;;;;"}
+{"version":3,"file":"empty-state.cjs","sources":["../../../components/empty-state/empty-state.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { ComponentProps, ReactNode } from 'react';\nimport { Flex } from '../flex';\nimport { Text } from '../text';\nimport styles from './empty-state.module.css';\n\ntype classNameKeys =\n  | 'container'\n  | 'iconContainer'\n  | 'icon'\n  | 'heading'\n  | 'subHeading';\n\ninterface EmptyStateProps extends ComponentProps<typeof Flex> {\n  icon: ReactNode;\n  heading?: ReactNode;\n  subHeading?: ReactNode;\n  primaryAction?: ReactNode;\n  secondaryAction?: ReactNode;\n  classNames?: Partial<Record<classNameKeys, string>>;\n  variant?: 'empty1' | 'empty2';\n}\n\nexport function EmptyState({\n  icon,\n  heading,\n  subHeading,\n  primaryAction,\n  secondaryAction,\n  classNames,\n  variant = 'empty1',\n  ...props\n}: EmptyStateProps) {\n  if (variant === 'empty2') {\n    return (\n      <Flex\n        align='center'\n        justify='center'\n        className={styles.emptyStatePage}\n        {...props}\n      >\n        <Flex\n          direction='column'\n          align='start'\n          gap='medium'\n          className={cx(styles.emptyStateContent, classNames?.container)}\n        >\n          <div className={cx(styles.iconContainer, classNames?.iconContainer)}>\n            <div\n              className={cx(styles.icon, styles.iconLarge, classNames?.icon)}\n            >\n              {icon}\n            </div>\n          </div>\n\n          {heading && (\n            <Text\n              size={5}\n              weight={500}\n              className={cx(styles.headerText, classNames?.heading)}\n            >\n              {heading}\n            </Text>\n          )}\n\n          {subHeading && (\n            <Text\n              size={4}\n              weight={400}\n              className={cx(styles.subHeaderText, classNames?.subHeading)}\n            >\n              {subHeading}\n            </Text>\n          )}\n\n          <Flex gap='medium'>\n            {primaryAction}\n            {secondaryAction}\n          </Flex>\n        </Flex>\n      </Flex>\n    );\n  }\n\n  return (\n    <Flex\n      direction='column'\n      align='center'\n      gap='medium'\n      className={cx(styles.emptyState, classNames?.container)}\n      {...props}\n    >\n      <div className={cx(styles.iconContainer, classNames?.iconContainer)}>\n        <div className={cx(styles.icon, classNames?.icon)}>{icon}</div>\n      </div>\n\n      <Flex direction='column' gap='small' align='center'>\n        {heading && (\n          <Text\n            size={5}\n            weight={500}\n            className={cx(styles.headerText, classNames?.heading)}\n          >\n            {heading}\n          </Text>\n        )}\n\n        {subHeading && (\n          <Text\n            size={4}\n            weight={400}\n            className={cx(styles.subHeaderText, classNames?.subHeading)}\n          >\n            {subHeading}\n          </Text>\n        )}\n      </Flex>\n\n      {primaryAction}\n\n      {secondaryAction}\n    </Flex>\n  );\n}\n\nEmptyState.displayName = 'EmptyState';\n"],"names":["_jsx","Flex","styles","_jsxs","cx","Text"],"mappings":"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"}

package/dist/components/empty-state/empty-state.d.ts

@@ -1,13 +1,18 @@
+import { ComponentProps, ReactNode } from 'react';
+import { Flex } from '../flex';
 type classNameKeys = 'container' | 'iconContainer' | 'icon' | 'heading' | 'subHeading';
-interface EmptyStateProps {
-    icon: React.ReactNode;
-    heading?: React.ReactNode;
-    subHeading?: React.ReactNode;
-    primaryAction?: React.ReactNode;
-    secondaryAction?: React.ReactNode;
+interface EmptyStateProps extends ComponentProps<typeof Flex> {
+    icon: ReactNode;
+    heading?: ReactNode;
+    subHeading?: ReactNode;
+    primaryAction?: ReactNode;
+    secondaryAction?: ReactNode;
     classNames?: Partial<Record<classNameKeys, string>>;
     variant?: 'empty1' | 'empty2';
 }
-export declare const EmptyState: ({ icon, heading, subHeading, primaryAction, secondaryAction, classNames, variant }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+export declare function EmptyState({ icon, heading, subHeading, primaryAction, secondaryAction, classNames, variant, ...props }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace EmptyState {
+    var displayName: string;
+}
 export {};
 //# sourceMappingURL=empty-state.d.ts.map

package/dist/components/empty-state/empty-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../../components/empty-state/empty-state.tsx"],"names":[],"mappings":"AAKA,KAAK,aAAa,GACd,WAAW,GACX,eAAe,GACf,MAAM,GACN,SAAS,GACT,YAAY,CAAC;AAEjB,UAAU,eAAe;IACvB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;IACpD,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC/B;AAED,eAAO,MAAM,UAAU,uFAQpB,eAAe,4CAqFjB,CAAC"}
+{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../../components/empty-state/empty-state.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAI/B,KAAK,aAAa,GACd,WAAW,GACX,eAAe,GACf,MAAM,GACN,SAAS,GACT,YAAY,CAAC;AAEjB,UAAU,eAAgB,SAAQ,cAAc,CAAC,OAAO,IAAI,CAAC;IAC3D,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;IACpD,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC/B;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,aAAa,EACb,eAAe,EACf,UAAU,EACV,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,eAAe,2CA2FjB;yBApGe,UAAU"}

package/dist/components/empty-state/empty-state.js

@@ -4,12 +4,13 @@ import { Flex } from '../flex/flex.js';
 import { Text } from '../text/text.js';
 import styles from './empty-state.module.css.js';
 
-const EmptyState = ({ icon, heading, subHeading, primaryAction, secondaryAction, classNames, variant = 'empty1' }) => {
+function EmptyState({ icon, heading, subHeading, primaryAction, secondaryAction, classNames, variant = 'empty1', ...props }) {
     if (variant === 'empty2') {
-        return (jsx(Flex, { align: 'center', justify: 'center', className: styles.emptyStatePage, children: jsxs(Flex, { direction: 'column', align: 'start', gap: 'medium', className: cx(styles.emptyStateContent, classNames?.container), children: [jsx("div", { className: cx(styles.iconContainer, classNames?.iconContainer), children: jsx("div", { className: cx(styles.icon, styles.iconLarge, classNames?.icon), children: icon }) }), heading && (jsx(Text, { size: 5, weight: 500, className: cx(styles.headerText, classNames?.heading), children: heading })), subHeading && (jsx(Text, { size: 4, weight: 400, className: cx(styles.subHeaderText, classNames?.subHeading), children: subHeading })), jsxs(Flex, { gap: 'medium', children: [primaryAction, secondaryAction] })] }) }));
+        return (jsx(Flex, { align: 'center', justify: 'center', className: styles.emptyStatePage, ...props, children: jsxs(Flex, { direction: 'column', align: 'start', gap: 'medium', className: cx(styles.emptyStateContent, classNames?.container), children: [jsx("div", { className: cx(styles.iconContainer, classNames?.iconContainer), children: jsx("div", { className: cx(styles.icon, styles.iconLarge, classNames?.icon), children: icon }) }), heading && (jsx(Text, { size: 5, weight: 500, className: cx(styles.headerText, classNames?.heading), children: heading })), subHeading && (jsx(Text, { size: 4, weight: 400, className: cx(styles.subHeaderText, classNames?.subHeading), children: subHeading })), jsxs(Flex, { gap: 'medium', children: [primaryAction, secondaryAction] })] }) }));
     }
-    return (jsxs(Flex, { direction: 'column', align: 'center', gap: 'medium', className: cx(styles.emptyState, classNames?.container), children: [jsx("div", { className: cx(styles.iconContainer, classNames?.iconContainer), children: jsx("div", { className: cx(styles.icon, classNames?.icon), children: icon }) }), jsxs(Flex, { direction: 'column', gap: 'small', align: 'center', children: [heading && (jsx(Text, { size: 5, weight: 500, className: cx(styles.headerText, classNames?.heading), children: heading })), subHeading && (jsx(Text, { size: 4, weight: 400, className: cx(styles.subHeaderText, classNames?.subHeading), children: subHeading }))] }), primaryAction, secondaryAction] }));
-};
+    return (jsxs(Flex, { direction: 'column', align: 'center', gap: 'medium', className: cx(styles.emptyState, classNames?.container), ...props, children: [jsx("div", { className: cx(styles.iconContainer, classNames?.iconContainer), children: jsx("div", { className: cx(styles.icon, classNames?.icon), children: icon }) }), jsxs(Flex, { direction: 'column', gap: 'small', align: 'center', children: [heading && (jsx(Text, { size: 5, weight: 500, className: cx(styles.headerText, classNames?.heading), children: heading })), subHeading && (jsx(Text, { size: 4, weight: 400, className: cx(styles.subHeaderText, classNames?.subHeading), children: subHeading }))] }), primaryAction, secondaryAction] }));
+}
+EmptyState.displayName = 'EmptyState';
 
 export { EmptyState };
 //# sourceMappingURL=empty-state.js.map

package/dist/components/empty-state/empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.js","sources":["../../../components/empty-state/empty-state.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { Flex } from '../flex';\nimport { Text } from '../text';\nimport styles from './empty-state.module.css';\n\ntype classNameKeys =\n  | 'container'\n  | 'iconContainer'\n  | 'icon'\n  | 'heading'\n  | 'subHeading';\n\ninterface EmptyStateProps {\n  icon: React.ReactNode;\n  heading?: React.ReactNode;\n  subHeading?: React.ReactNode;\n  primaryAction?: React.ReactNode;\n  secondaryAction?: React.ReactNode;\n  classNames?: Partial<Record<classNameKeys, string>>;\n  variant?: 'empty1' | 'empty2';\n}\n\nexport const EmptyState = ({\n  icon,\n  heading,\n  subHeading,\n  primaryAction,\n  secondaryAction,\n  classNames,\n  variant = 'empty1'\n}: EmptyStateProps) => {\n  if (variant === 'empty2') {\n    return (\n      <Flex align='center' justify='center' className={styles.emptyStatePage}>\n        <Flex\n          direction='column'\n          align='start'\n          gap='medium'\n          className={cx(styles.emptyStateContent, classNames?.container)}\n        >\n          <div className={cx(styles.iconContainer, classNames?.iconContainer)}>\n            <div\n              className={cx(styles.icon, styles.iconLarge, classNames?.icon)}\n            >\n              {icon}\n            </div>\n          </div>\n\n          {heading && (\n            <Text\n              size={5}\n              weight={500}\n              className={cx(styles.headerText, classNames?.heading)}\n            >\n              {heading}\n            </Text>\n          )}\n\n          {subHeading && (\n            <Text\n              size={4}\n              weight={400}\n              className={cx(styles.subHeaderText, classNames?.subHeading)}\n            >\n              {subHeading}\n            </Text>\n          )}\n\n          <Flex gap='medium'>\n            {primaryAction}\n            {secondaryAction}\n          </Flex>\n        </Flex>\n      </Flex>\n    );\n  }\n\n  return (\n    <Flex\n      direction='column'\n      align='center'\n      gap='medium'\n      className={cx(styles.emptyState, classNames?.container)}\n    >\n      <div className={cx(styles.iconContainer, classNames?.iconContainer)}>\n        <div className={cx(styles.icon, classNames?.icon)}>{icon}</div>\n      </div>\n\n      <Flex direction='column' gap='small' align='center'>\n        {heading && (\n          <Text\n            size={5}\n            weight={500}\n            className={cx(styles.headerText, classNames?.heading)}\n          >\n            {heading}\n          </Text>\n        )}\n\n        {subHeading && (\n          <Text\n            size={4}\n            weight={400}\n            className={cx(styles.subHeaderText, classNames?.subHeading)}\n          >\n            {subHeading}\n          </Text>\n        )}\n      </Flex>\n\n      {primaryAction}\n\n      {secondaryAction}\n    </Flex>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"empty-state.js","sources":["../../../components/empty-state/empty-state.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { ComponentProps, ReactNode } from 'react';\nimport { Flex } from '../flex';\nimport { Text } from '../text';\nimport styles from './empty-state.module.css';\n\ntype classNameKeys =\n  | 'container'\n  | 'iconContainer'\n  | 'icon'\n  | 'heading'\n  | 'subHeading';\n\ninterface EmptyStateProps extends ComponentProps<typeof Flex> {\n  icon: ReactNode;\n  heading?: ReactNode;\n  subHeading?: ReactNode;\n  primaryAction?: ReactNode;\n  secondaryAction?: ReactNode;\n  classNames?: Partial<Record<classNameKeys, string>>;\n  variant?: 'empty1' | 'empty2';\n}\n\nexport function EmptyState({\n  icon,\n  heading,\n  subHeading,\n  primaryAction,\n  secondaryAction,\n  classNames,\n  variant = 'empty1',\n  ...props\n}: EmptyStateProps) {\n  if (variant === 'empty2') {\n    return (\n      <Flex\n        align='center'\n        justify='center'\n        className={styles.emptyStatePage}\n        {...props}\n      >\n        <Flex\n          direction='column'\n          align='start'\n          gap='medium'\n          className={cx(styles.emptyStateContent, classNames?.container)}\n        >\n          <div className={cx(styles.iconContainer, classNames?.iconContainer)}>\n            <div\n              className={cx(styles.icon, styles.iconLarge, classNames?.icon)}\n            >\n              {icon}\n            </div>\n          </div>\n\n          {heading && (\n            <Text\n              size={5}\n              weight={500}\n              className={cx(styles.headerText, classNames?.heading)}\n            >\n              {heading}\n            </Text>\n          )}\n\n          {subHeading && (\n            <Text\n              size={4}\n              weight={400}\n              className={cx(styles.subHeaderText, classNames?.subHeading)}\n            >\n              {subHeading}\n            </Text>\n          )}\n\n          <Flex gap='medium'>\n            {primaryAction}\n            {secondaryAction}\n          </Flex>\n        </Flex>\n      </Flex>\n    );\n  }\n\n  return (\n    <Flex\n      direction='column'\n      align='center'\n      gap='medium'\n      className={cx(styles.emptyState, classNames?.container)}\n      {...props}\n    >\n      <div className={cx(styles.iconContainer, classNames?.iconContainer)}>\n        <div className={cx(styles.icon, classNames?.icon)}>{icon}</div>\n      </div>\n\n      <Flex direction='column' gap='small' align='center'>\n        {heading && (\n          <Text\n            size={5}\n            weight={500}\n            className={cx(styles.headerText, classNames?.heading)}\n          >\n            {heading}\n          </Text>\n        )}\n\n        {subHeading && (\n          <Text\n            size={4}\n            weight={400}\n            className={cx(styles.subHeaderText, classNames?.subHeading)}\n          >\n            {subHeading}\n          </Text>\n        )}\n      </Flex>\n\n      {primaryAction}\n\n      {secondaryAction}\n    </Flex>\n  );\n}\n\nEmptyState.displayName = 'EmptyState';\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/filter-chip/filter-chip.cjs

@@ -8,10 +8,9 @@ var React = require('react');
 var filters = require('../../types/filters.cjs');
 require('../calendar/calendar.cjs');
 var datePicker = require('../calendar/date-picker.cjs');
-require('dayjs');
+require('../calendar/range-picker.cjs');
 var flex = require('../flex/flex.cjs');
 var inputField = require('../input-field/input-field.cjs');
-require('../popover/popover.cjs');
 var select = require('../select/select.cjs');
 var text = require('../text/text.cjs');
 var filterChip_module = require('./filter-chip.module.css.cjs');

package/dist/components/filter-chip/filter-chip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"filter-chip.cjs","sources":["../../../components/filter-chip/filter-chip.tsx"],"sourcesContent":["'use client';\n\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { cva, cx, VariantProps } from 'class-variance-authority';\nimport { ReactElement, ReactNode, useCallback, useState } from 'react';\nimport {\n  FilterOperation,\n  FilterOperator,\n  FilterSelectOption,\n  FilterType,\n  FilterTypes,\n  filterOperators\n} from '~/types/filters';\nimport { DatePicker } from '../calendar';\nimport { Flex } from '../flex';\nimport { InputField } from '../input-field';\nimport { Select } from '../select';\nimport { BaseSelectProps } from '../select/select-root';\nimport { Text } from '../text';\nimport styles from './filter-chip.module.css';\nimport { Operation } from './filter-chip-operation';\n\nconst chip = cva(styles.chip, {\n  variants: {\n    variant: {\n      default: styles['chip-default'],\n      text: null\n    }\n  },\n  defaultVariants: {\n    variant: 'default'\n  }\n});\n\nexport interface FilterChipProps extends VariantProps<typeof chip> {\n  label: string;\n  value?: string;\n  onRemove?: () => void;\n  className?: string;\n  ref?: React.RefObject<HTMLDivElement>;\n  children?: ReactNode;\n  columnType?: FilterTypes;\n  options?: FilterSelectOption[];\n  onValueChange?: (value: any, operation: string) => void;\n  onOperationChange?: (operation: string) => void;\n  leadingIcon?: ReactElement;\n  operations?: FilterOperator<string>[];\n  selectProps?: BaseSelectProps;\n}\n\nexport const FilterChip = ({\n  label,\n  value,\n  onRemove,\n  className,\n  ref,\n  columnType = FilterType.string,\n  options = [],\n  onValueChange,\n  onOperationChange,\n  leadingIcon,\n  variant,\n  operations,\n  selectProps,\n  ...props\n}: FilterChipProps) => {\n  const computedOperations = operations?.length\n    ? operations\n    : filterOperators[columnType];\n\n  const [operation, setOperation] = useState<FilterOperation | undefined>(\n    computedOperations?.[0]\n  );\n  const [filterValue, setFilterValue] = useState<any>(value || '');\n\n  const showOnRemove = typeof onRemove === 'function';\n  const isMultiSelectColumn = columnType === FilterType.multiselect;\n\n  const handleOperationChange = useCallback(\n    (operation: FilterOperation) => {\n      setOperation(operation);\n      if (operation?.value) onOperationChange?.(operation.value);\n    },\n    [onOperationChange]\n  );\n\n  const handleFilterValueChange = useCallback(\n    (value: any) => {\n      setFilterValue(value);\n      onValueChange?.(value, operation?.value ?? '');\n    },\n    [operation, onValueChange]\n  );\n\n  const renderValueInput = () => {\n    switch (columnType) {\n      case FilterType.multiselect:\n      case FilterType.select:\n        return (\n          <Select\n            value={isMultiSelectColumn ? filterValue : filterValue.toString()}\n            onValueChange={handleFilterValueChange}\n            multiple={isMultiSelectColumn}\n            {...selectProps}\n          >\n            <Select.Trigger\n              iconProps={{\n                style: {\n                  display: 'none'\n                }\n              }}\n              variant='text'\n              className={cx(\n                styles.selectValue,\n                !showOnRemove && styles.selectColumn\n              )}\n            >\n              <Select.Value placeholder='Select value'>\n                {isMultiSelectColumn && filterValue.length > 1\n                  ? `${filterValue.length} selected`\n                  : undefined}\n              </Select.Value>\n            </Select.Trigger>\n            <Select.Content data-variant='filter'>\n              {options.map(opt => (\n                <Select.Item\n                  key={opt.value.toString()}\n                  value={opt.value.toString()}\n                >\n                  {opt.label}\n                </Select.Item>\n              ))}\n            </Select.Content>\n          </Select>\n        );\n      case FilterType.date:\n        return (\n          <div className={styles.dateFieldWrapper}>\n            <DatePicker\n              value={filterValue}\n              onSelect={date => handleFilterValueChange(date)}\n              showCalendarIcon={false}\n              inputFieldProps={{ className: styles.dateField }}\n            />\n          </div>\n        );\n      default:\n        return (\n          <div className={styles.inputFieldWrapper}>\n            <InputField\n              variant={variant === 'text' ? 'borderless' : 'default'}\n              className={styles.inputField}\n              value={filterValue}\n              onChange={e => handleFilterValueChange(e.target.value)}\n            />\n          </div>\n        );\n    }\n  };\n\n  return (\n    <Flex\n      align='center'\n      ref={ref}\n      className={chip({ variant, className })}\n      role='group'\n      aria-label={`Filter by ${label}`}\n      data-variant={variant}\n      {...props}\n    >\n      <Flex align='center' gap={2} className={styles['chip-label']}>\n        {leadingIcon && (\n          <span className={styles.leadingIcon} aria-hidden='true'>\n            {leadingIcon}\n          </span>\n        )}\n        <Text size={2} weight='normal'>\n          {label}\n        </Text>\n      </Flex>\n      <Operation\n        operations={computedOperations}\n        label={label}\n        value={operation}\n        onChange={handleOperationChange}\n        showAlternateLabel={isMultiSelectColumn && filterValue.length <= 1}\n      />\n      {renderValueInput()}\n      {showOnRemove && (\n        <button\n          className={styles.removeIconContainer}\n          aria-label={`Remove ${label} filter`}\n          onClick={onRemove}\n        >\n          <Cross1Icon className={styles.removeIcon} />\n        </button>\n      )}\n    </Flex>\n  );\n};\n\nFilterChip.displayName = 'FilterChip';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAsBA;AACE;AACE;AACE;AACA;AACD;AACF;AACD;AACE;AACD;AACF;AAkBY;AAgBX;AACE;AACA;AAEF;AAGA;AAEA;AACA;AAEA;;;AAG0B;AACxB;AAIF;;;AAIE;;;;;AAQI;AASQ;AACE;AACD;AACF;AASG;;;AAiBV;AAUF;;;AAYJ;AAEA;AAuCF;AAEA;;"}
+{"version":3,"file":"filter-chip.cjs","sources":["../../../components/filter-chip/filter-chip.tsx"],"sourcesContent":["'use client';\n\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { cva, cx, VariantProps } from 'class-variance-authority';\nimport { ReactElement, ReactNode, useCallback, useState } from 'react';\nimport {\n  FilterOperation,\n  FilterOperator,\n  FilterSelectOption,\n  FilterType,\n  FilterTypes,\n  filterOperators\n} from '~/types/filters';\nimport { DatePicker } from '../calendar';\nimport { Flex } from '../flex';\nimport { InputField } from '../input-field';\nimport { Select } from '../select';\nimport { BaseSelectProps } from '../select/select-root';\nimport { Text } from '../text';\nimport styles from './filter-chip.module.css';\nimport { Operation } from './filter-chip-operation';\n\nconst chip = cva(styles.chip, {\n  variants: {\n    variant: {\n      default: styles['chip-default'],\n      text: null\n    }\n  },\n  defaultVariants: {\n    variant: 'default'\n  }\n});\n\nexport interface FilterChipProps extends VariantProps<typeof chip> {\n  label: string;\n  value?: string;\n  onRemove?: () => void;\n  className?: string;\n  ref?: React.RefObject<HTMLDivElement>;\n  children?: ReactNode;\n  columnType?: FilterTypes;\n  options?: FilterSelectOption[];\n  onValueChange?: (value: any, operation: string) => void;\n  onOperationChange?: (operation: string) => void;\n  leadingIcon?: ReactElement;\n  operations?: FilterOperator<string>[];\n  selectProps?: BaseSelectProps;\n}\n\nexport const FilterChip = ({\n  label,\n  value,\n  onRemove,\n  className,\n  ref,\n  columnType = FilterType.string,\n  options = [],\n  onValueChange,\n  onOperationChange,\n  leadingIcon,\n  variant,\n  operations,\n  selectProps,\n  ...props\n}: FilterChipProps) => {\n  const computedOperations = operations?.length\n    ? operations\n    : filterOperators[columnType];\n\n  const [operation, setOperation] = useState<FilterOperation | undefined>(\n    computedOperations?.[0]\n  );\n  const [filterValue, setFilterValue] = useState<any>(value || '');\n\n  const showOnRemove = typeof onRemove === 'function';\n  const isMultiSelectColumn = columnType === FilterType.multiselect;\n\n  const handleOperationChange = useCallback(\n    (operation: FilterOperation) => {\n      setOperation(operation);\n      if (operation?.value) onOperationChange?.(operation.value);\n    },\n    [onOperationChange]\n  );\n\n  const handleFilterValueChange = useCallback(\n    (value: any) => {\n      setFilterValue(value);\n      onValueChange?.(value, operation?.value ?? '');\n    },\n    [operation, onValueChange]\n  );\n\n  const renderValueInput = () => {\n    switch (columnType) {\n      case FilterType.multiselect:\n      case FilterType.select:\n        return (\n          <Select\n            value={isMultiSelectColumn ? filterValue : filterValue.toString()}\n            onValueChange={handleFilterValueChange}\n            multiple={isMultiSelectColumn}\n            {...selectProps}\n          >\n            <Select.Trigger\n              iconProps={{\n                style: {\n                  display: 'none'\n                }\n              }}\n              variant='text'\n              className={cx(\n                styles.selectValue,\n                !showOnRemove && styles.selectColumn\n              )}\n            >\n              <Select.Value placeholder='Select value'>\n                {isMultiSelectColumn && filterValue.length > 1\n                  ? `${filterValue.length} selected`\n                  : undefined}\n              </Select.Value>\n            </Select.Trigger>\n            <Select.Content data-variant='filter'>\n              {options.map(opt => (\n                <Select.Item\n                  key={opt.value.toString()}\n                  value={opt.value.toString()}\n                >\n                  {opt.label}\n                </Select.Item>\n              ))}\n            </Select.Content>\n          </Select>\n        );\n      case FilterType.date:\n        return (\n          <div className={styles.dateFieldWrapper}>\n            <DatePicker\n              value={filterValue}\n              onSelect={date => handleFilterValueChange(date)}\n              showCalendarIcon={false}\n              inputFieldProps={{ className: styles.dateField }}\n            />\n          </div>\n        );\n      default:\n        return (\n          <div className={styles.inputFieldWrapper}>\n            <InputField\n              variant={variant === 'text' ? 'borderless' : 'default'}\n              className={styles.inputField}\n              value={filterValue}\n              onChange={e => handleFilterValueChange(e.target.value)}\n            />\n          </div>\n        );\n    }\n  };\n\n  return (\n    <Flex\n      align='center'\n      ref={ref}\n      className={chip({ variant, className })}\n      role='group'\n      aria-label={`Filter by ${label}`}\n      data-variant={variant}\n      {...props}\n    >\n      <Flex align='center' gap={2} className={styles['chip-label']}>\n        {leadingIcon && (\n          <span className={styles.leadingIcon} aria-hidden='true'>\n            {leadingIcon}\n          </span>\n        )}\n        <Text size={2} weight='normal'>\n          {label}\n        </Text>\n      </Flex>\n      <Operation\n        operations={computedOperations}\n        label={label}\n        value={operation}\n        onChange={handleOperationChange}\n        showAlternateLabel={isMultiSelectColumn && filterValue.length <= 1}\n      />\n      {renderValueInput()}\n      {showOnRemove && (\n        <button\n          className={styles.removeIconContainer}\n          aria-label={`Remove ${label} filter`}\n          onClick={onRemove}\n        >\n          <Cross1Icon className={styles.removeIcon} />\n        </button>\n      )}\n    </Flex>\n  );\n};\n\nFilterChip.displayName = 'FilterChip';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAsBA;AACE;AACE;AACE;AACA;AACD;AACF;AACD;AACE;AACD;AACF;AAkBY;AAgBX;AACE;AACA;AAEF;AAGA;AAEA;AACA;AAEA;;;AAG0B;AACxB;AAIF;;;AAIE;;;;;AAQI;AASQ;AACE;AACD;AACF;AASG;;;AAiBV;AAUF;;;AAYJ;AAEA;AAuCF;AAEA;;"}

package/dist/components/filter-chip/filter-chip.js

@@ -6,10 +6,9 @@ import { useState, useCallback } from 'react';
 import { filterOperators, FilterType } from '../../types/filters.js';
 import '../calendar/calendar.js';
 import { DatePicker } from '../calendar/date-picker.js';
-import 'dayjs';
+import '../calendar/range-picker.js';
 import { Flex } from '../flex/flex.js';
 import { InputField } from '../input-field/input-field.js';
-import '../popover/popover.js';
 import { Select } from '../select/select.js';
 import { Text } from '../text/text.js';
 import styles from './filter-chip.module.css.js';

package/dist/components/filter-chip/filter-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-chip.js","sources":["../../../components/filter-chip/filter-chip.tsx"],"sourcesContent":["'use client';\n\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { cva, cx, VariantProps } from 'class-variance-authority';\nimport { ReactElement, ReactNode, useCallback, useState } from 'react';\nimport {\n  FilterOperation,\n  FilterOperator,\n  FilterSelectOption,\n  FilterType,\n  FilterTypes,\n  filterOperators\n} from '~/types/filters';\nimport { DatePicker } from '../calendar';\nimport { Flex } from '../flex';\nimport { InputField } from '../input-field';\nimport { Select } from '../select';\nimport { BaseSelectProps } from '../select/select-root';\nimport { Text } from '../text';\nimport styles from './filter-chip.module.css';\nimport { Operation } from './filter-chip-operation';\n\nconst chip = cva(styles.chip, {\n  variants: {\n    variant: {\n      default: styles['chip-default'],\n      text: null\n    }\n  },\n  defaultVariants: {\n    variant: 'default'\n  }\n});\n\nexport interface FilterChipProps extends VariantProps<typeof chip> {\n  label: string;\n  value?: string;\n  onRemove?: () => void;\n  className?: string;\n  ref?: React.RefObject<HTMLDivElement>;\n  children?: ReactNode;\n  columnType?: FilterTypes;\n  options?: FilterSelectOption[];\n  onValueChange?: (value: any, operation: string) => void;\n  onOperationChange?: (operation: string) => void;\n  leadingIcon?: ReactElement;\n  operations?: FilterOperator<string>[];\n  selectProps?: BaseSelectProps;\n}\n\nexport const FilterChip = ({\n  label,\n  value,\n  onRemove,\n  className,\n  ref,\n  columnType = FilterType.string,\n  options = [],\n  onValueChange,\n  onOperationChange,\n  leadingIcon,\n  variant,\n  operations,\n  selectProps,\n  ...props\n}: FilterChipProps) => {\n  const computedOperations = operations?.length\n    ? operations\n    : filterOperators[columnType];\n\n  const [operation, setOperation] = useState<FilterOperation | undefined>(\n    computedOperations?.[0]\n  );\n  const [filterValue, setFilterValue] = useState<any>(value || '');\n\n  const showOnRemove = typeof onRemove === 'function';\n  const isMultiSelectColumn = columnType === FilterType.multiselect;\n\n  const handleOperationChange = useCallback(\n    (operation: FilterOperation) => {\n      setOperation(operation);\n      if (operation?.value) onOperationChange?.(operation.value);\n    },\n    [onOperationChange]\n  );\n\n  const handleFilterValueChange = useCallback(\n    (value: any) => {\n      setFilterValue(value);\n      onValueChange?.(value, operation?.value ?? '');\n    },\n    [operation, onValueChange]\n  );\n\n  const renderValueInput = () => {\n    switch (columnType) {\n      case FilterType.multiselect:\n      case FilterType.select:\n        return (\n          <Select\n            value={isMultiSelectColumn ? filterValue : filterValue.toString()}\n            onValueChange={handleFilterValueChange}\n            multiple={isMultiSelectColumn}\n            {...selectProps}\n          >\n            <Select.Trigger\n              iconProps={{\n                style: {\n                  display: 'none'\n                }\n              }}\n              variant='text'\n              className={cx(\n                styles.selectValue,\n                !showOnRemove && styles.selectColumn\n              )}\n            >\n              <Select.Value placeholder='Select value'>\n                {isMultiSelectColumn && filterValue.length > 1\n                  ? `${filterValue.length} selected`\n                  : undefined}\n              </Select.Value>\n            </Select.Trigger>\n            <Select.Content data-variant='filter'>\n              {options.map(opt => (\n                <Select.Item\n                  key={opt.value.toString()}\n                  value={opt.value.toString()}\n                >\n                  {opt.label}\n                </Select.Item>\n              ))}\n            </Select.Content>\n          </Select>\n        );\n      case FilterType.date:\n        return (\n          <div className={styles.dateFieldWrapper}>\n            <DatePicker\n              value={filterValue}\n              onSelect={date => handleFilterValueChange(date)}\n              showCalendarIcon={false}\n              inputFieldProps={{ className: styles.dateField }}\n            />\n          </div>\n        );\n      default:\n        return (\n          <div className={styles.inputFieldWrapper}>\n            <InputField\n              variant={variant === 'text' ? 'borderless' : 'default'}\n              className={styles.inputField}\n              value={filterValue}\n              onChange={e => handleFilterValueChange(e.target.value)}\n            />\n          </div>\n        );\n    }\n  };\n\n  return (\n    <Flex\n      align='center'\n      ref={ref}\n      className={chip({ variant, className })}\n      role='group'\n      aria-label={`Filter by ${label}`}\n      data-variant={variant}\n      {...props}\n    >\n      <Flex align='center' gap={2} className={styles['chip-label']}>\n        {leadingIcon && (\n          <span className={styles.leadingIcon} aria-hidden='true'>\n            {leadingIcon}\n          </span>\n        )}\n        <Text size={2} weight='normal'>\n          {label}\n        </Text>\n      </Flex>\n      <Operation\n        operations={computedOperations}\n        label={label}\n        value={operation}\n        onChange={handleOperationChange}\n        showAlternateLabel={isMultiSelectColumn && filterValue.length <= 1}\n      />\n      {renderValueInput()}\n      {showOnRemove && (\n        <button\n          className={styles.removeIconContainer}\n          aria-label={`Remove ${label} filter`}\n          onClick={onRemove}\n        >\n          <Cross1Icon className={styles.removeIcon} />\n        </button>\n      )}\n    </Flex>\n  );\n};\n\nFilterChip.displayName = 'FilterChip';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAsBA;AACE;AACE;AACE;AACA;AACD;AACF;AACD;AACE;AACD;AACF;AAkBY;AAgBX;AACE;AACA;AAEF;AAGA;AAEA;AACA;AAEA;;;AAG0B;AACxB;AAIF;;;AAIE;;;;;AAQI;AASQ;AACE;AACD;AACF;AASG;;;AAiBV;AAUF;;;AAYJ;AAEA;AAuCF;AAEA;;"}
+{"version":3,"file":"filter-chip.js","sources":["../../../components/filter-chip/filter-chip.tsx"],"sourcesContent":["'use client';\n\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { cva, cx, VariantProps } from 'class-variance-authority';\nimport { ReactElement, ReactNode, useCallback, useState } from 'react';\nimport {\n  FilterOperation,\n  FilterOperator,\n  FilterSelectOption,\n  FilterType,\n  FilterTypes,\n  filterOperators\n} from '~/types/filters';\nimport { DatePicker } from '../calendar';\nimport { Flex } from '../flex';\nimport { InputField } from '../input-field';\nimport { Select } from '../select';\nimport { BaseSelectProps } from '../select/select-root';\nimport { Text } from '../text';\nimport styles from './filter-chip.module.css';\nimport { Operation } from './filter-chip-operation';\n\nconst chip = cva(styles.chip, {\n  variants: {\n    variant: {\n      default: styles['chip-default'],\n      text: null\n    }\n  },\n  defaultVariants: {\n    variant: 'default'\n  }\n});\n\nexport interface FilterChipProps extends VariantProps<typeof chip> {\n  label: string;\n  value?: string;\n  onRemove?: () => void;\n  className?: string;\n  ref?: React.RefObject<HTMLDivElement>;\n  children?: ReactNode;\n  columnType?: FilterTypes;\n  options?: FilterSelectOption[];\n  onValueChange?: (value: any, operation: string) => void;\n  onOperationChange?: (operation: string) => void;\n  leadingIcon?: ReactElement;\n  operations?: FilterOperator<string>[];\n  selectProps?: BaseSelectProps;\n}\n\nexport const FilterChip = ({\n  label,\n  value,\n  onRemove,\n  className,\n  ref,\n  columnType = FilterType.string,\n  options = [],\n  onValueChange,\n  onOperationChange,\n  leadingIcon,\n  variant,\n  operations,\n  selectProps,\n  ...props\n}: FilterChipProps) => {\n  const computedOperations = operations?.length\n    ? operations\n    : filterOperators[columnType];\n\n  const [operation, setOperation] = useState<FilterOperation | undefined>(\n    computedOperations?.[0]\n  );\n  const [filterValue, setFilterValue] = useState<any>(value || '');\n\n  const showOnRemove = typeof onRemove === 'function';\n  const isMultiSelectColumn = columnType === FilterType.multiselect;\n\n  const handleOperationChange = useCallback(\n    (operation: FilterOperation) => {\n      setOperation(operation);\n      if (operation?.value) onOperationChange?.(operation.value);\n    },\n    [onOperationChange]\n  );\n\n  const handleFilterValueChange = useCallback(\n    (value: any) => {\n      setFilterValue(value);\n      onValueChange?.(value, operation?.value ?? '');\n    },\n    [operation, onValueChange]\n  );\n\n  const renderValueInput = () => {\n    switch (columnType) {\n      case FilterType.multiselect:\n      case FilterType.select:\n        return (\n          <Select\n            value={isMultiSelectColumn ? filterValue : filterValue.toString()}\n            onValueChange={handleFilterValueChange}\n            multiple={isMultiSelectColumn}\n            {...selectProps}\n          >\n            <Select.Trigger\n              iconProps={{\n                style: {\n                  display: 'none'\n                }\n              }}\n              variant='text'\n              className={cx(\n                styles.selectValue,\n                !showOnRemove && styles.selectColumn\n              )}\n            >\n              <Select.Value placeholder='Select value'>\n                {isMultiSelectColumn && filterValue.length > 1\n                  ? `${filterValue.length} selected`\n                  : undefined}\n              </Select.Value>\n            </Select.Trigger>\n            <Select.Content data-variant='filter'>\n              {options.map(opt => (\n                <Select.Item\n                  key={opt.value.toString()}\n                  value={opt.value.toString()}\n                >\n                  {opt.label}\n                </Select.Item>\n              ))}\n            </Select.Content>\n          </Select>\n        );\n      case FilterType.date:\n        return (\n          <div className={styles.dateFieldWrapper}>\n            <DatePicker\n              value={filterValue}\n              onSelect={date => handleFilterValueChange(date)}\n              showCalendarIcon={false}\n              inputFieldProps={{ className: styles.dateField }}\n            />\n          </div>\n        );\n      default:\n        return (\n          <div className={styles.inputFieldWrapper}>\n            <InputField\n              variant={variant === 'text' ? 'borderless' : 'default'}\n              className={styles.inputField}\n              value={filterValue}\n              onChange={e => handleFilterValueChange(e.target.value)}\n            />\n          </div>\n        );\n    }\n  };\n\n  return (\n    <Flex\n      align='center'\n      ref={ref}\n      className={chip({ variant, className })}\n      role='group'\n      aria-label={`Filter by ${label}`}\n      data-variant={variant}\n      {...props}\n    >\n      <Flex align='center' gap={2} className={styles['chip-label']}>\n        {leadingIcon && (\n          <span className={styles.leadingIcon} aria-hidden='true'>\n            {leadingIcon}\n          </span>\n        )}\n        <Text size={2} weight='normal'>\n          {label}\n        </Text>\n      </Flex>\n      <Operation\n        operations={computedOperations}\n        label={label}\n        value={operation}\n        onChange={handleOperationChange}\n        showAlternateLabel={isMultiSelectColumn && filterValue.length <= 1}\n      />\n      {renderValueInput()}\n      {showOnRemove && (\n        <button\n          className={styles.removeIconContainer}\n          aria-label={`Remove ${label} filter`}\n          onClick={onRemove}\n        >\n          <Cross1Icon className={styles.removeIcon} />\n        </button>\n      )}\n    </Flex>\n  );\n};\n\nFilterChip.displayName = 'FilterChip';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAsBA;AACE;AACE;AACE;AACA;AACD;AACF;AACD;AACE;AACD;AACF;AAkBY;AAgBX;AACE;AACA;AAEF;AAGA;AAEA;AACA;AAEA;;;AAG0B;AACxB;AAIF;;;AAIE;;;;;AAQI;AASQ;AACE;AACD;AACF;AASG;;;AAiBV;AAUF;;;AAYJ;AAEA;AAuCF;AAEA;;"}

package/dist/components/flex/flex.cjs

@@ -1,8 +1,7 @@
 'use strict';
 
-var jsxRuntime = require('react/jsx-runtime');
+var react = require('@base-ui/react');
 var classVarianceAuthority = require('class-variance-authority');
-var React = require('react');
 var flex_module = require('./flex.module.css.cjs');
 
 const flex = classVarianceAuthority.cva(flex_module.default.flex, {
@@ -58,8 +57,9 @@ const flex = classVarianceAuthority.cva(flex_module.default.flex, {
         wrap: 'noWrap'
     }
 });
-const Flex = React.forwardRef(({ children, direction, align, justify, wrap, gap, className, width, ...props }, ref) => {
-    return (jsxRuntime.jsx("div", { className: flex({
+function Flex({ direction, align, justify, wrap, gap, className, width, render, ref, ...props }) {
+    const flexProps = {
+        className: flex({
             direction,
             align,
             justify,
@@ -67,8 +67,17 @@ const Flex = React.forwardRef(({ children, direction, align, justify, wrap, gap,
             gap,
             className,
             width
-        }), ...props, ref: ref, children: children }));
-});
+        })
+    };
+    const element = react.useRender({
+        defaultTagName: 'div',
+        ref,
+        render,
+        props: react.mergeProps(flexProps, props)
+    });
+    return element;
+}
+Flex.displayName = 'Flex';
 
 exports.Flex = Flex;
 //# sourceMappingURL=flex.cjs.map

package/dist/components/flex/flex.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"flex.cjs","sources":["../../../components/flex/flex.tsx"],"sourcesContent":["import { VariantProps, cva } from 'class-variance-authority';\nimport { HTMLAttributes, PropsWithChildren, forwardRef } from 'react';\n\nimport styles from './flex.module.css';\n\nconst flex = cva(styles.flex, {\n  variants: {\n    direction: {\n      row: styles['direction-row'],\n      column: styles['direction-column'],\n      rowReverse: styles['direction-rowReverse'],\n      columnReverse: styles['direction-columnReverse']\n    },\n    align: {\n      start: styles['align-start'],\n      center: styles['align-center'],\n      end: styles['align-end'],\n      stretch: styles['align-stretch'],\n      baseline: styles['align-baseline']\n    },\n    justify: {\n      start: styles['justify-start'],\n      center: styles['justify-center'],\n      end: styles['justify-end'],\n      between: styles['justify-between']\n    },\n    wrap: {\n      noWrap: styles['wrap-noWrap'],\n      wrap: styles['wrap-wrap'],\n      wrapReverse: styles['wrap-wrapReverse']\n    },\n    gap: {\n      1: styles['gap-1'],\n      2: styles['gap-2'],\n      3: styles['gap-3'],\n      4: styles['gap-4'],\n      5: styles['gap-5'],\n      6: styles['gap-6'],\n      7: styles['gap-7'],\n      8: styles['gap-8'],\n      9: styles['gap-9'],\n      'extra-small': styles['gap-xs'],\n      small: styles['gap-sm'],\n      medium: styles['gap-md'],\n      large: styles['gap-lg'],\n      'extra-large': styles['gap-xl']\n    },\n    width: {\n      full: styles['width-full']\n    }\n  },\n  defaultVariants: {\n    direction: 'row',\n    align: 'stretch',\n    justify: 'start',\n    wrap: 'noWrap'\n  }\n});\n\ntype BoxProps = PropsWithChildren<VariantProps<typeof flex>> &\n  HTMLAttributes<HTMLDivElement>;\n\nexport const Flex = forwardRef<HTMLDivElement, BoxProps>(\n  (\n    {\n      children,\n      direction,\n      align,\n      justify,\n      wrap,\n      gap,\n      className,\n      width,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        className={flex({\n          direction,\n          align,\n          justify,\n          wrap,\n          gap,\n          className,\n          width\n        })}\n        {...props}\n        ref={ref}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["cva","styles","forwardRef","_jsx"],"mappings":"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"}
+{"version":3,"file":"flex.cjs","sources":["../../../components/flex/flex.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { cva, VariantProps } from 'class-variance-authority';\nimport styles from './flex.module.css';\n\nconst flex = cva(styles.flex, {\n  variants: {\n    direction: {\n      row: styles['direction-row'],\n      column: styles['direction-column'],\n      rowReverse: styles['direction-rowReverse'],\n      columnReverse: styles['direction-columnReverse']\n    },\n    align: {\n      start: styles['align-start'],\n      center: styles['align-center'],\n      end: styles['align-end'],\n      stretch: styles['align-stretch'],\n      baseline: styles['align-baseline']\n    },\n    justify: {\n      start: styles['justify-start'],\n      center: styles['justify-center'],\n      end: styles['justify-end'],\n      between: styles['justify-between']\n    },\n    wrap: {\n      noWrap: styles['wrap-noWrap'],\n      wrap: styles['wrap-wrap'],\n      wrapReverse: styles['wrap-wrapReverse']\n    },\n    gap: {\n      1: styles['gap-1'],\n      2: styles['gap-2'],\n      3: styles['gap-3'],\n      4: styles['gap-4'],\n      5: styles['gap-5'],\n      6: styles['gap-6'],\n      7: styles['gap-7'],\n      8: styles['gap-8'],\n      9: styles['gap-9'],\n      'extra-small': styles['gap-xs'],\n      small: styles['gap-sm'],\n      medium: styles['gap-md'],\n      large: styles['gap-lg'],\n      'extra-large': styles['gap-xl']\n    },\n    width: {\n      full: styles['width-full']\n    }\n  },\n  defaultVariants: {\n    direction: 'row',\n    align: 'stretch',\n    justify: 'start',\n    wrap: 'noWrap'\n  }\n});\n\ntype BoxProps = VariantProps<typeof flex> & useRender.ComponentProps<'div'>;\n\nexport function Flex({\n  direction,\n  align,\n  justify,\n  wrap,\n  gap,\n  className,\n  width,\n  render,\n  ref,\n  ...props\n}: BoxProps) {\n  const flexProps = {\n    className: flex({\n      direction,\n      align,\n      justify,\n      wrap,\n      gap,\n      className,\n      width\n    })\n  };\n\n  const element = useRender({\n    defaultTagName: 'div',\n    ref,\n    render,\n    props: mergeProps<'div'>(flexProps, props)\n  });\n\n  return element;\n}\n\nFlex.displayName = 'Flex';\n"],"names":["cva","styles","useRender","mergeProps"],"mappings":"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"}

package/dist/components/flex/flex.d.ts

@@ -1,13 +1,17 @@
+import { useRender } from '@base-ui/react';
 import { VariantProps } from 'class-variance-authority';
-import { HTMLAttributes } from 'react';
-export declare const Flex: import("react").ForwardRefExoticComponent<VariantProps<(props?: ({
+declare const flex: (props?: ({
     direction?: "row" | "column" | "rowReverse" | "columnReverse" | null | undefined;
     align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
     justify?: "center" | "start" | "end" | "between" | null | undefined;
     wrap?: "wrap" | "noWrap" | "wrapReverse" | null | undefined;
-    gap?: 1 | "small" | 2 | "extra-small" | "medium" | "large" | "extra-large" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | null | undefined;
+    gap?: "small" | 1 | "extra-small" | "medium" | "large" | "extra-large" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | null | undefined;
     width?: "full" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
-    children?: import("react").ReactNode;
-} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type BoxProps = VariantProps<typeof flex> & useRender.ComponentProps<'div'>;
+export declare function Flex({ direction, align, justify, wrap, gap, className, width, render, ref, ...props }: BoxProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare namespace Flex {
+    var displayName: string;
+}
+export {};
 //# sourceMappingURL=flex.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"flex.d.ts","sourceRoot":"","sources":["../../../components/flex/flex.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAO,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAiC,MAAM,OAAO,CAAC;AA6DtE,eAAO,MAAM,IAAI;;;;;;;;;mFAiChB,CAAC"}
+{"version":3,"file":"flex.d.ts","sourceRoot":"","sources":["../../../components/flex/flex.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG7D,QAAA,MAAM,IAAI;;;;;;;8EAoDR,CAAC;AAEH,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,GAAG,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE5E,wBAAgB,IAAI,CAAC,EACnB,SAAS,EACT,KAAK,EACL,OAAO,EACP,IAAI,EACJ,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,KAAK,EACT,EAAE,QAAQ,8FAqBV;yBAhCe,IAAI"}

package/dist/components/flex/flex.js

@@ -1,6 +1,5 @@
-import { jsx } from 'react/jsx-runtime';
+import { useRender, mergeProps } from '@base-ui/react';
 import { cva } from 'class-variance-authority';
-import { forwardRef } from 'react';
 import styles from './flex.module.css.js';
 
 const flex = cva(styles.flex, {
@@ -56,8 +55,9 @@ const flex = cva(styles.flex, {
         wrap: 'noWrap'
     }
 });
-const Flex = forwardRef(({ children, direction, align, justify, wrap, gap, className, width, ...props }, ref) => {
-    return (jsx("div", { className: flex({
+function Flex({ direction, align, justify, wrap, gap, className, width, render, ref, ...props }) {
+    const flexProps = {
+        className: flex({
             direction,
             align,
             justify,
@@ -65,8 +65,17 @@ const Flex = forwardRef(({ children, direction, align, justify, wrap, gap, class
             gap,
             className,
             width
-        }), ...props, ref: ref, children: children }));
-});
+        })
+    };
+    const element = useRender({
+        defaultTagName: 'div',
+        ref,
+        render,
+        props: mergeProps(flexProps, props)
+    });
+    return element;
+}
+Flex.displayName = 'Flex';
 
 export { Flex };
 //# sourceMappingURL=flex.js.map

package/dist/components/flex/flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"flex.js","sources":["../../../components/flex/flex.tsx"],"sourcesContent":["import { VariantProps, cva } from 'class-variance-authority';\nimport { HTMLAttributes, PropsWithChildren, forwardRef } from 'react';\n\nimport styles from './flex.module.css';\n\nconst flex = cva(styles.flex, {\n  variants: {\n    direction: {\n      row: styles['direction-row'],\n      column: styles['direction-column'],\n      rowReverse: styles['direction-rowReverse'],\n      columnReverse: styles['direction-columnReverse']\n    },\n    align: {\n      start: styles['align-start'],\n      center: styles['align-center'],\n      end: styles['align-end'],\n      stretch: styles['align-stretch'],\n      baseline: styles['align-baseline']\n    },\n    justify: {\n      start: styles['justify-start'],\n      center: styles['justify-center'],\n      end: styles['justify-end'],\n      between: styles['justify-between']\n    },\n    wrap: {\n      noWrap: styles['wrap-noWrap'],\n      wrap: styles['wrap-wrap'],\n      wrapReverse: styles['wrap-wrapReverse']\n    },\n    gap: {\n      1: styles['gap-1'],\n      2: styles['gap-2'],\n      3: styles['gap-3'],\n      4: styles['gap-4'],\n      5: styles['gap-5'],\n      6: styles['gap-6'],\n      7: styles['gap-7'],\n      8: styles['gap-8'],\n      9: styles['gap-9'],\n      'extra-small': styles['gap-xs'],\n      small: styles['gap-sm'],\n      medium: styles['gap-md'],\n      large: styles['gap-lg'],\n      'extra-large': styles['gap-xl']\n    },\n    width: {\n      full: styles['width-full']\n    }\n  },\n  defaultVariants: {\n    direction: 'row',\n    align: 'stretch',\n    justify: 'start',\n    wrap: 'noWrap'\n  }\n});\n\ntype BoxProps = PropsWithChildren<VariantProps<typeof flex>> &\n  HTMLAttributes<HTMLDivElement>;\n\nexport const Flex = forwardRef<HTMLDivElement, BoxProps>(\n  (\n    {\n      children,\n      direction,\n      align,\n      justify,\n      wrap,\n      gap,\n      className,\n      width,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        className={flex({\n          direction,\n          align,\n          justify,\n          wrap,\n          gap,\n          className,\n          width\n        })}\n        {...props}\n        ref={ref}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"flex.js","sources":["../../../components/flex/flex.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { cva, VariantProps } from 'class-variance-authority';\nimport styles from './flex.module.css';\n\nconst flex = cva(styles.flex, {\n  variants: {\n    direction: {\n      row: styles['direction-row'],\n      column: styles['direction-column'],\n      rowReverse: styles['direction-rowReverse'],\n      columnReverse: styles['direction-columnReverse']\n    },\n    align: {\n      start: styles['align-start'],\n      center: styles['align-center'],\n      end: styles['align-end'],\n      stretch: styles['align-stretch'],\n      baseline: styles['align-baseline']\n    },\n    justify: {\n      start: styles['justify-start'],\n      center: styles['justify-center'],\n      end: styles['justify-end'],\n      between: styles['justify-between']\n    },\n    wrap: {\n      noWrap: styles['wrap-noWrap'],\n      wrap: styles['wrap-wrap'],\n      wrapReverse: styles['wrap-wrapReverse']\n    },\n    gap: {\n      1: styles['gap-1'],\n      2: styles['gap-2'],\n      3: styles['gap-3'],\n      4: styles['gap-4'],\n      5: styles['gap-5'],\n      6: styles['gap-6'],\n      7: styles['gap-7'],\n      8: styles['gap-8'],\n      9: styles['gap-9'],\n      'extra-small': styles['gap-xs'],\n      small: styles['gap-sm'],\n      medium: styles['gap-md'],\n      large: styles['gap-lg'],\n      'extra-large': styles['gap-xl']\n    },\n    width: {\n      full: styles['width-full']\n    }\n  },\n  defaultVariants: {\n    direction: 'row',\n    align: 'stretch',\n    justify: 'start',\n    wrap: 'noWrap'\n  }\n});\n\ntype BoxProps = VariantProps<typeof flex> & useRender.ComponentProps<'div'>;\n\nexport function Flex({\n  direction,\n  align,\n  justify,\n  wrap,\n  gap,\n  className,\n  width,\n  render,\n  ref,\n  ...props\n}: BoxProps) {\n  const flexProps = {\n    className: flex({\n      direction,\n      align,\n      justify,\n      wrap,\n      gap,\n      className,\n      width\n    })\n  };\n\n  const element = useRender({\n    defaultTagName: 'div',\n    ref,\n    render,\n    props: mergeProps<'div'>(flexProps, props)\n  });\n\n  return element;\n}\n\nFlex.displayName = 'Flex';\n"],"names":[],"mappings":"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"}

package/dist/components/grid/grid-item.cjs

@@ -1,25 +1,29 @@
 'use strict';
 
-var jsxRuntime = require('react/jsx-runtime');
-var radixUi = require('radix-ui');
-var React = require('react');
+var react = require('@base-ui/react');
 
-const GridItem = React.forwardRef(({ area, colStart, colEnd, rowStart, rowEnd, colSpan, rowSpan, justifySelf, alignSelf, style, asChild, ...props }, ref) => {
-    const Comp = asChild ? radixUi.Slot.Root : 'div';
-    return (jsxRuntime.jsx(Comp, { ref: ref, style: {
-            gridArea: area,
-            gridColumnStart: colStart,
-            gridColumnEnd: colEnd,
-            gridRowStart: rowStart,
-            gridRowEnd: rowEnd,
-            gridColumn: colSpan ? `span ${colSpan}` : undefined,
-            gridRow: rowSpan ? `span ${rowSpan}` : undefined,
-            justifySelf,
-            alignSelf,
-            ...style
-        }, ...props }));
-});
-GridItem.displayName = 'GridItem';
+function GridItem({ area, colStart, colEnd, rowStart, rowEnd, colSpan, rowSpan, justifySelf, alignSelf, style, render, ref, ...props }) {
+    const gridItemStyle = {
+        gridArea: area,
+        gridColumnStart: colStart,
+        gridColumnEnd: colEnd,
+        gridRowStart: rowStart,
+        gridRowEnd: rowEnd,
+        gridColumn: colSpan ? `span ${colSpan}` : undefined,
+        gridRow: rowSpan ? `span ${rowSpan}` : undefined,
+        justifySelf,
+        alignSelf,
+        ...style
+    };
+    const element = react.useRender({
+        defaultTagName: 'div',
+        ref,
+        render,
+        props: react.mergeProps({ style: gridItemStyle }, props)
+    });
+    return element;
+}
+GridItem.displayName = 'Grid.Item';
 
 exports.GridItem = GridItem;
 //# sourceMappingURL=grid-item.cjs.map