@trackunit/react-filter-components 0.0.165-alpha-a3e6a36823.0 → 0.0.172

package/index.cjs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var reactComponents = require('@trackunit/react-components');
-var tailwindStyledComponents = require('@trackunit/tailwind-styled-components');
+var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var React = require('react');
 var reactFormComponents = require('@trackunit/react-form-components');
 
@@ -39,6 +39,18 @@ function __rest(s, e) {
     return t;
 }
 
+const cvaFilterCustomButton = cssClassVarianceUtilities.cvaMerge([], {
+    variants: {
+        isActive: {
+            true: "border-primary-600",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        isActive: false,
+    },
+});
+
 /**
  * The Filter component is the base component used in the manager to filter data.
  *
@@ -54,19 +66,8 @@ function __rest(s, e) {
 const Filter = (_a) => {
     var { title, children, popoverProps, isActive, activeLabel, menuListProps, className, dataTestId, withStickyHeader = false, readOnly } = _a, rest = __rest(_a, ["title", "children", "popoverProps", "isActive", "activeLabel", "menuListProps", "className", "dataTestId", "withStickyHeader", "readOnly"]);
     const buttonProps = Object.assign({}, rest);
-    return (jsxRuntime.jsxs(reactComponents.Popover, Object.assign({ dataTestId: dataTestId && `${dataTestId}-popover`, placement: "bottom-start" }, popoverProps, { children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsxs(CustomButton, Object.assign({ color: "tertiary", size: "small", dataTestId: dataTestId, disabled: readOnly }, buttonProps, { "$isActive": isActive, className: className, children: [title, " ", isActive && jsxRuntime.jsx(ActiveLabel, { children: activeLabel })] })) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsx(CustomMenuList, Object.assign({ withStickyHeader: withStickyHeader, dataTestId: dataTestId && `${dataTestId}-menulist` }, menuListProps, { children: children })) })] })));
+    return (jsxRuntime.jsxs(reactComponents.Popover, Object.assign({ dataTestId: dataTestId && `${dataTestId}-popover`, placement: "bottom-start" }, popoverProps, { children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsxs(reactComponents.Button, Object.assign({ className: cvaFilterCustomButton({ isActive, className }), color: "tertiary", size: "small", dataTestId: dataTestId, disabled: readOnly }, buttonProps, { children: [title, " ", isActive && jsxRuntime.jsx("span", { className: "text-primary-600", children: activeLabel })] })) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsx(reactComponents.MenuList, Object.assign({ className: "overflow-x-hidden overflow-y-auto relative", withStickyHeader: withStickyHeader, dataTestId: dataTestId && `${dataTestId}-menulist` }, menuListProps, { children: children })) })] })));
 };
-const CustomButton = tailwindStyledComponents.twx(reactComponents.Button) `
-  ${({ $isActive }) => ($isActive ? tailwindStyledComponents.tws `!border-primary-600` : "")}
-`;
-const CustomMenuList = tailwindStyledComponents.twx(reactComponents.MenuList) `
-  overflow-x-hidden
-  overflow-y-auto
-  relative
-`;
-const ActiveLabel = tailwindStyledComponents.tw.span `
-  text-primary-600
-`;
 
 /**
  * The FilterBody component is used to display the title of the filter and a reset button.
@@ -78,23 +79,19 @@ const ActiveLabel = tailwindStyledComponents.tw.span `
  */
 const FilterBody = React__default["default"].forwardRef((_a, ref) => {
     var { children, dataTestId, limitSize = false } = _a, rest = __rest(_a, ["children", "dataTestId", "limitSize"]);
-    return (jsxRuntime.jsx(Root$1, Object.assign({ "$limitSize": limitSize, ref: ref }, rest, { "data-testid": dataTestId, children: children })));
+    return (jsxRuntime.jsx("div", Object.assign({ className: cvaFilterBody({ limitSize }), ref: ref }, rest, { "data-testid": dataTestId, children: children })));
+});
+const cvaFilterBody = cssClassVarianceUtilities.cvaMerge(["grid", "gap-1", "p-1", "rounded", "w-full"], {
+    variants: {
+        limitSize: {
+            true: "overflow-hidden max-h-80 max-w-sm overflow-y-auto",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        limitSize: false,
+    },
 });
-const Root$1 = tailwindStyledComponents.tw.div `
-  grid
-  gap-1
-  p-1
-  rounded
-  w-full
-  ${props => props.$limitSize
-    ? tailwindStyledComponents.tws `
-          overflow-hidden
-          max-h-80
-          max-w-sm
-          overflow-y-auto
-        `
-    : ""}
-`;
 
 /**
  * The FilterHeader component is used to display the title of the filter and a reset button.
@@ -106,26 +103,19 @@ const Root$1 = tailwindStyledComponents.tw.div `
  */
 const FilterHeader = (_a) => {
     var { title, resetLabel, showReset, dataTestId, onReset, loading, children } = _a, rest = __rest(_a, ["title", "resetLabel", "showReset", "dataTestId", "onReset", "loading", "children"]);
-    return (jsxRuntime.jsxs(Root, Object.assign({}, rest, { "data-testid": dataTestId, children: [jsxRuntime.jsxs(HeadingContainer, { children: [jsxRuntime.jsx("h4", { children: title }), loading ? (jsxRuntime.jsx(reactComponents.Spinner, { size: "small" })) : (jsxRuntime.jsx(HiddenButton, { "data-testid": `${dataTestId}-reset-button`, "$isVisible": Boolean(showReset), size: "small", variant: "transparent", color: "danger", onClick: onReset, children: resetLabel }))] }), children] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: "grid gap-1 p-1" }, rest, { "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: "flex items-center pl-1 justify-between font-medium text-sm text-slate-600 uppercase", children: [jsxRuntime.jsx("h4", { children: title }), loading ? (jsxRuntime.jsx(reactComponents.Spinner, { size: "small" })) : (jsxRuntime.jsx(reactComponents.Button, { className: cvaFilterHeaderButton({ isVisible: showReset }), "data-testid": `${dataTestId}-reset-button`, size: "small", variant: "transparent", color: "danger", onClick: onReset, children: resetLabel }))] }), children] })));
 };
-const HeadingContainer = tailwindStyledComponents.tw.div `
-  flex
-  items-center
-  pl-1
-  justify-between
-  font-medium
-  text-sm
-  text-slate-600
-  uppercase
-`;
-const HiddenButton = tailwindStyledComponents.twx(reactComponents.Button) `
-  ${props => (props.$isVisible ? tailwindStyledComponents.tws `visible` : tailwindStyledComponents.tws `invisible`)}
-`;
-const Root = tailwindStyledComponents.tw.div `
-  grid
-  gap-1
-  p-1
-`;
+const cvaFilterHeaderButton = cssClassVarianceUtilities.cvaMerge([], {
+    variants: {
+        isVisible: {
+            true: "visible",
+            false: "invisible",
+        },
+    },
+    defaultVariants: {
+        isVisible: true,
+    },
+});
 
 /**
  * The CheckBoxFilterItem component is the base component used in the manager to FilterItem data.
@@ -162,3 +152,4 @@ exports.Filter = Filter;
 exports.FilterBody = FilterBody;
 exports.FilterHeader = FilterHeader;
 exports.RadioFilterItem = RadioFilterItem;
+exports.cvaFilterHeaderButton = cvaFilterHeaderButton;

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Button, MenuList, Popover, PopoverTrigger, PopoverContent, Spinner, MenuItem, Text } from '@trackunit/react-components';
-import { twx, tws, tw } from '@trackunit/tailwind-styled-components';
+import { Popover, PopoverTrigger, Button, PopoverContent, MenuList, Spinner, MenuItem, Text } from '@trackunit/react-components';
+import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import React, { useRef } from 'react';
 import { Checkbox, RadioItem } from '@trackunit/react-form-components';
 
@@ -31,6 +31,18 @@ function __rest(s, e) {
     return t;
 }
 
+const cvaFilterCustomButton = cvaMerge([], {
+    variants: {
+        isActive: {
+            true: "border-primary-600",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        isActive: false,
+    },
+});
+
 /**
  * The Filter component is the base component used in the manager to filter data.
  *
@@ -46,19 +58,8 @@ function __rest(s, e) {
 const Filter = (_a) => {
     var { title, children, popoverProps, isActive, activeLabel, menuListProps, className, dataTestId, withStickyHeader = false, readOnly } = _a, rest = __rest(_a, ["title", "children", "popoverProps", "isActive", "activeLabel", "menuListProps", "className", "dataTestId", "withStickyHeader", "readOnly"]);
     const buttonProps = Object.assign({}, rest);
-    return (jsxs(Popover, Object.assign({ dataTestId: dataTestId && `${dataTestId}-popover`, placement: "bottom-start" }, popoverProps, { children: [jsx(PopoverTrigger, { children: jsxs(CustomButton, Object.assign({ color: "tertiary", size: "small", dataTestId: dataTestId, disabled: readOnly }, buttonProps, { "$isActive": isActive, className: className, children: [title, " ", isActive && jsx(ActiveLabel, { children: activeLabel })] })) }), jsx(PopoverContent, { children: jsx(CustomMenuList, Object.assign({ withStickyHeader: withStickyHeader, dataTestId: dataTestId && `${dataTestId}-menulist` }, menuListProps, { children: children })) })] })));
+    return (jsxs(Popover, Object.assign({ dataTestId: dataTestId && `${dataTestId}-popover`, placement: "bottom-start" }, popoverProps, { children: [jsx(PopoverTrigger, { children: jsxs(Button, Object.assign({ className: cvaFilterCustomButton({ isActive, className }), color: "tertiary", size: "small", dataTestId: dataTestId, disabled: readOnly }, buttonProps, { children: [title, " ", isActive && jsx("span", { className: "text-primary-600", children: activeLabel })] })) }), jsx(PopoverContent, { children: jsx(MenuList, Object.assign({ className: "overflow-x-hidden overflow-y-auto relative", withStickyHeader: withStickyHeader, dataTestId: dataTestId && `${dataTestId}-menulist` }, menuListProps, { children: children })) })] })));
 };
-const CustomButton = twx(Button) `
-  ${({ $isActive }) => ($isActive ? tws `!border-primary-600` : "")}
-`;
-const CustomMenuList = twx(MenuList) `
-  overflow-x-hidden
-  overflow-y-auto
-  relative
-`;
-const ActiveLabel = tw.span `
-  text-primary-600
-`;
 
 /**
  * The FilterBody component is used to display the title of the filter and a reset button.
@@ -70,23 +71,19 @@ const ActiveLabel = tw.span `
  */
 const FilterBody = React.forwardRef((_a, ref) => {
     var { children, dataTestId, limitSize = false } = _a, rest = __rest(_a, ["children", "dataTestId", "limitSize"]);
-    return (jsx(Root$1, Object.assign({ "$limitSize": limitSize, ref: ref }, rest, { "data-testid": dataTestId, children: children })));
+    return (jsx("div", Object.assign({ className: cvaFilterBody({ limitSize }), ref: ref }, rest, { "data-testid": dataTestId, children: children })));
+});
+const cvaFilterBody = cvaMerge(["grid", "gap-1", "p-1", "rounded", "w-full"], {
+    variants: {
+        limitSize: {
+            true: "overflow-hidden max-h-80 max-w-sm overflow-y-auto",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        limitSize: false,
+    },
 });
-const Root$1 = tw.div `
-  grid
-  gap-1
-  p-1
-  rounded
-  w-full
-  ${props => props.$limitSize
-    ? tws `
-          overflow-hidden
-          max-h-80
-          max-w-sm
-          overflow-y-auto
-        `
-    : ""}
-`;
 
 /**
  * The FilterHeader component is used to display the title of the filter and a reset button.
@@ -98,26 +95,19 @@ const Root$1 = tw.div `
  */
 const FilterHeader = (_a) => {
     var { title, resetLabel, showReset, dataTestId, onReset, loading, children } = _a, rest = __rest(_a, ["title", "resetLabel", "showReset", "dataTestId", "onReset", "loading", "children"]);
-    return (jsxs(Root, Object.assign({}, rest, { "data-testid": dataTestId, children: [jsxs(HeadingContainer, { children: [jsx("h4", { children: title }), loading ? (jsx(Spinner, { size: "small" })) : (jsx(HiddenButton, { "data-testid": `${dataTestId}-reset-button`, "$isVisible": Boolean(showReset), size: "small", variant: "transparent", color: "danger", onClick: onReset, children: resetLabel }))] }), children] })));
+    return (jsxs("div", Object.assign({ className: "grid gap-1 p-1" }, rest, { "data-testid": dataTestId, children: [jsxs("div", { className: "flex items-center pl-1 justify-between font-medium text-sm text-slate-600 uppercase", children: [jsx("h4", { children: title }), loading ? (jsx(Spinner, { size: "small" })) : (jsx(Button, { className: cvaFilterHeaderButton({ isVisible: showReset }), "data-testid": `${dataTestId}-reset-button`, size: "small", variant: "transparent", color: "danger", onClick: onReset, children: resetLabel }))] }), children] })));
 };
-const HeadingContainer = tw.div `
-  flex
-  items-center
-  pl-1
-  justify-between
-  font-medium
-  text-sm
-  text-slate-600
-  uppercase
-`;
-const HiddenButton = twx(Button) `
-  ${props => (props.$isVisible ? tws `visible` : tws `invisible`)}
-`;
-const Root = tw.div `
-  grid
-  gap-1
-  p-1
-`;
+const cvaFilterHeaderButton = cvaMerge([], {
+    variants: {
+        isVisible: {
+            true: "visible",
+            false: "invisible",
+        },
+    },
+    defaultVariants: {
+        isVisible: true,
+    },
+});
 
 /**
  * The CheckBoxFilterItem component is the base component used in the manager to FilterItem data.
@@ -149,4 +139,4 @@ const RadioFilterItem = (_a) => {
     return (jsx(MenuItem, Object.assign({ selected: selected, dataTestId: dataTestId, className: "flex justify-between cursor-default p-0 my-[2px]", suffix: jsx("small", { className: "pl-1 pr-3", children: itemCount }) }, menuItemProps, { children: jsx(RadioItem, Object.assign({}, rest, { value: value, className: "flex items-center w-full py-2 pl-2", dataTestId: dataTestId && `${dataTestId}-radio`, label: jsx(Text, { className: "cursor-pointer", type: "span", children: label }) })) })));
 };
 
-export { CheckBoxFilterItem, Filter, FilterBody, FilterHeader, RadioFilterItem };
+export { CheckBoxFilterItem, Filter, FilterBody, FilterHeader, RadioFilterItem, cvaFilterHeaderButton };

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@trackunit/react-filter-components",
-  "version": "0.0.165-alpha-a3e6a36823.0",
+  "version": "0.0.172",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=18.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "0.1.141-alpha-a3e6a36823.0",
-    "@trackunit/react-form-components": "0.0.107-alpha-a3e6a36823.0",
-    "@trackunit/tailwind-styled-components": "0.0.61-alpha-a3e6a36823.0",
+    "@trackunit/css-class-variance-utilities": "0.0.11",
+    "@trackunit/react-components": "0.1.145",
+    "@trackunit/react-form-components": "0.0.114",
     "react": "18.2.0"
   },
   "module": "./index.esm.js",

package/src/Filter/Filter.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const cvaFilterCustomButton: (props?: ({
+    isActive?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/FilterHeader/FilterHeader.d.ts

@@ -33,3 +33,6 @@ export interface FilterHeaderProps extends CommonProps {
  * @returns {JSX.Element} FilterHeader component
  */
 export declare const FilterHeader: ({ title, resetLabel, showReset, dataTestId, onReset, loading, children, ...rest }: FilterHeaderProps) => JSX.Element;
+export declare const cvaFilterHeaderButton: (props?: ({
+    isVisible?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;