@raystack/apsara 0.32.0 → 0.33.0

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

@@ -12,22 +12,33 @@ require('../../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_modul
 require('../../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_modules/react-day-picker/dist/esm/useDayPicker.cjs');
 require('../tooltip/tooltip.cjs');
 var datePicker = require('../calendar/date-picker.cjs');
-var rangePicker = require('../calendar/range-picker.cjs');
+require('../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.cjs');
+require('../popover/popover.cjs');
 var filterChip_module = require('./filter-chip.module.css.cjs');
+var filters = require('../../types/filters.cjs');
 
-const FilterChip = ({ label, value, onRemove = () => null, className, ref, columnType = 'text', options = [], onValueChange, onOperationChange, leadingIcon, ...props }) => {
-    const [operation, setOperation] = React.useState('is');
-    const [filterValue, setFilterValue] = React.useState(value || '');
-    const operationOptions = [
-        { label: 'is', value: 'is' },
-        { label: 'is not', value: 'is not' },
-        { label: 'contains', value: 'contains' },
-    ];
+const Operation = ({ label, columnType = filters.FilterType.text, onOperationSelect, }) => {
+    const filterOptions = filters.filterOperators[columnType] || [];
+    // FilterOperatorTypes gives error as Select returns string
+    const [value, setValue] = React.useState(filterOptions?.[0]?.value);
     React.useEffect(() => {
-        if (onOperationChange) {
-            onOperationChange(operation);
+        const selectedOption = filterOptions.find((o) => o.value === value);
+        if (selectedOption) {
+            onOperationSelect(selectedOption);
         }
-    }, [operation]);
+    }, [value]);
+    return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { value: value, onValueChange: setValue, "aria-labelledby": `${label}-label`, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { variant: "filter", className: filterChip_module.default.operation, "aria-label": `${label} filter operation`, children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, { placeholder: "Select operation", className: filterChip_module.default.operationText }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Content, { "data-variant": "filter", children: filterOptions.map((opt) => {
+                    return (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: opt.value, "aria-label": `Filter ${label} ${opt.label}`, children: opt.label }, opt.value));
+                }) })] }));
+};
+const FilterChip = ({ label, value, onRemove = () => null, className, ref, columnType = "text", options = [], onValueChange, onOperationChange, leadingIcon, ...props }) => {
+    const [operation, setOperation] = React.useState();
+    const [filterValue, setFilterValue] = React.useState(value || "");
+    React.useEffect(() => {
+        if (onOperationChange && operation?.value) {
+            onOperationChange(operation?.value);
+        }
+    }, [operation?.value]);
     React.useEffect(() => {
         if (onValueChange) {
             onValueChange(filterValue);
@@ -35,17 +46,15 @@ const FilterChip = ({ label, value, onRemove = () => null, className, ref, colum
     }, [filterValue]);
     const renderValueInput = () => {
         switch (columnType) {
-            case 'select':
-                return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { value: filterValue, onValueChange: setFilterValue, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { variant: "filter", children: jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.selectValue, children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, { placeholder: "Select value" }) }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Content, { "data-variant": "filter", children: options.map((opt) => (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: opt.value, children: opt.label }, opt.value))) })] }));
-            case 'date':
-                return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.dateFieldWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(datePicker.DatePicker, { onSelect: (date) => setFilterValue(date), showCalendarIcon: false, textFieldProps: { className: filterChip_module.default.dateField } }) }));
-            case 'range':
-                return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.dateFieldWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(rangePicker.RangePicker, { textFieldProps: { className: filterChip_module.default.dateField }, onSelect: (range) => setFilterValue(range), showCalendarIcon: false, value: filterValue }) }));
+            case filters.FilterType.select:
+                return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { value: filterValue.toString(), onValueChange: setFilterValue, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { variant: "filter", className: filterChip_module.default.selectValue, children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, { placeholder: "Select value" }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Content, { "data-variant": "filter", children: options.map((opt) => (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: opt.value.toString(), children: opt.label }, opt.value.toString()))) })] }));
+            case filters.FilterType.date:
+                return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.dateFieldWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(datePicker.DatePicker, { value: filterValue, onSelect: (date) => setFilterValue(date), showCalendarIcon: false, textFieldProps: { className: filterChip_module.default.dateField } }) }));
             default:
                 return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.textFieldWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(textfield.TextField, { className: filterChip_module.default.textField, value: filterValue, onChange: (e) => setFilterValue(e.target.value) }) }));
         }
     };
-    return (jsxRuntime.jsxRuntimeExports.jsx(box.Box, { ref: ref, className: [filterChip_module.default.chip, className].filter(Boolean).join(" "), role: "group", "aria-label": `Filter by ${label}`, ...props, children: jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { align: "center", children: [jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { align: "center", style: { gap: 'var(--rs-space-2)' }, children: [leadingIcon && (jsxRuntime.jsxRuntimeExports.jsx("span", { className: filterChip_module.default.leadingIcon, "aria-hidden": "true", children: leadingIcon })), jsxRuntime.jsxRuntimeExports.jsx(text.Text, { size: 2, weight: "normal", children: label })] }), jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { defaultValue: operation, onValueChange: setOperation, "aria-labelledby": `${label}-label`, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { className: filterChip_module.default.operation, variant: "filter", "aria-label": `${label} filter operation`, children: jsxRuntime.jsxRuntimeExports.jsx("span", { className: filterChip_module.default.operationText, children: operation }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Content, { "data-variant": "filter", children: operationOptions.map((opt) => (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: opt.value, "aria-label": `Filter ${label} ${opt.label}`, children: opt.label }, opt.value))) })] }), renderValueInput(), jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.removeIconContainer, role: "button", tabIndex: 0, "aria-label": `Remove ${label} filter`, children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.Cross1Icon, { className: filterChip_module.default.removeIcon, onClick: onRemove }) })] }) }));
+    return (jsxRuntime.jsxRuntimeExports.jsx(box.Box, { ref: ref, className: [filterChip_module.default.chip, className].filter(Boolean).join(" "), role: "group", "aria-label": `Filter by ${label}`, ...props, children: jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { align: "center", children: [jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { align: "center", gap: 2, children: [leadingIcon && (jsxRuntime.jsxRuntimeExports.jsx("span", { className: filterChip_module.default.leadingIcon, "aria-hidden": "true", children: leadingIcon })), jsxRuntime.jsxRuntimeExports.jsx(text.Text, { size: 2, weight: "normal", children: label })] }), jsxRuntime.jsxRuntimeExports.jsx(Operation, { columnType: columnType, label: label, onOperationSelect: setOperation }), renderValueInput(), jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.removeIconContainer, role: "button", tabIndex: 0, "aria-label": `Remove ${label} filter`, children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.Cross1Icon, { className: filterChip_module.default.removeIcon, onClick: onRemove }) })] }) }));
 };
 FilterChip.displayName = "FilterChip";
 

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

@@ -1 +1 @@
-{"version":3,"file":"filter-chip.cjs","sources":["../../../../v1/components/filter-chip/filter-chip.tsx"],"sourcesContent":["import { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { ReactNode, useEffect, useState, ReactElement } from \"react\";\nimport { Box } from \"../box\";\nimport { Flex } from \"../flex\";\nimport { Select } from \"../select\";\nimport { Text } from \"../text\";\nimport { TextField } from \"../textfield\";\nimport { DatePicker, RangePicker } from \"../calendar\";\nimport styles from \"./filter-chip.module.css\";\n\ntype FilterVariant = 'select' | 'text' | 'date' | 'range' | 'number';\n\nexport interface FilterChipProps {\n  label: string;\n  value?: string;\n  onRemove?: () => void;\n  className?: string;\n  ref?: React.RefObject<HTMLDivElement>;\n  children?: ReactNode;\n  columnType?: FilterVariant;\n  options?: Array<{ label: string; value: string }>;\n  onValueChange?: (value: any) => void;\n  onOperationChange?: (operation: string) => void;\n  leadingIcon?: ReactElement;\n}\n\nexport const FilterChip = ({\n  label,\n  value,\n  onRemove = () => null,\n  className,\n  ref,\n  columnType = 'text',\n  options = [],\n  onValueChange,\n  onOperationChange,\n  leadingIcon,\n  ...props\n}: FilterChipProps) => {\n  const [operation, setOperation] = useState('is');\n  const [filterValue, setFilterValue] = useState<any>(value || '');\n\n  const operationOptions = [\n    { label: 'is', value: 'is' },\n    { label: 'is not', value: 'is not' },\n    { label: 'contains', value: 'contains' },\n  ];\n\n  useEffect(() => {\n    if (onOperationChange) {\n      onOperationChange(operation);\n    }\n  }, [operation]);\n\n  useEffect(() => {\n    if (onValueChange) {\n      onValueChange(filterValue);\n    }\n  }, [filterValue]);\n\n  const renderValueInput = () => {\n    switch (columnType) {\n      case 'select':\n        return (\n          <Select\n            value={filterValue}\n            onValueChange={setFilterValue}\n          >\n            <Select.Trigger variant=\"filter\">\n              <div className={styles.selectValue}>\n                <Select.Value placeholder=\"Select value\" />\n              </div>\n            </Select.Trigger>\n            <Select.Content data-variant=\"filter\">\n              {options.map((opt) => (\n                <Select.Item key={opt.value} value={opt.value}>\n                  {opt.label}\n                </Select.Item>\n              ))}\n            </Select.Content>\n          </Select>\n        );\n      case 'date':\n        return (\n          <div className={styles.dateFieldWrapper}>\n            <DatePicker \n              onSelect={(date) => setFilterValue(date)}\n              showCalendarIcon={false}\n              textFieldProps={{ className: styles.dateField }}\n            />\n          </div>\n        );\n      case 'range':\n        return (\n          <div className={styles.dateFieldWrapper}>\n            <RangePicker\n              textFieldProps={{ className: styles.dateField }}\n              onSelect={(range) => setFilterValue(range)}\n              showCalendarIcon={false}\n              value={filterValue}\n            />\n          </div>\n        );\n      default:\n        return (\n          <div className={styles.textFieldWrapper}>\n            <TextField\n              className={styles.textField}\n              value={filterValue}\n              onChange={(e) => setFilterValue(e.target.value)}\n            />\n          </div>\n        );\n    }\n  };\n\n  return (\n    <Box\n      ref={ref}\n      className={[styles.chip, className].filter(Boolean).join(\" \")}\n      role=\"group\"\n      aria-label={`Filter by ${label}`}\n      {...props}\n    >\n      <Flex align=\"center\">\n        <Flex align=\"center\" style={{ gap: 'var(--rs-space-2)' }}>\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        <Select defaultValue={operation} onValueChange={setOperation} aria-labelledby={`${label}-label`}>\n          <Select.Trigger className={styles.operation} variant=\"filter\" aria-label={`${label} filter operation`}>\n            <span className={styles.operationText}>{operation}</span>\n          </Select.Trigger>\n          <Select.Content data-variant=\"filter\">\n            {operationOptions.map((opt) => (\n              <Select.Item key={opt.value} value={opt.value} aria-label={`Filter ${label} ${opt.label}`}>\n                {opt.label}\n              </Select.Item>\n            ))}\n          </Select.Content>\n        </Select>\n        {renderValueInput()}\n          <div className={styles.removeIconContainer} \n            role=\"button\"\n            tabIndex={0}\n            aria-label={`Remove ${label} filter`}\n          >\n            <Cross1Icon \n              className={styles.removeIcon}\n              onClick={onRemove}\n            />\n          </div>\n      </Flex>\n    </Box>\n  );\n};\n\nFilterChip.displayName = \"FilterChip\";\n"],"names":["useState","useEffect","_jsxs","Select","_jsx","styles","DatePicker","RangePicker","TextField","Box","Flex","Text","Cross1Icon"],"mappings":"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"}
+{"version":3,"file":"filter-chip.cjs","sources":["../../../../v1/components/filter-chip/filter-chip.tsx"],"sourcesContent":["import { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { ReactNode, useEffect, useState, ReactElement } from \"react\";\nimport { Box } from \"../box\";\nimport { Flex } from \"../flex\";\nimport { Select } from \"../select\";\nimport { Text } from \"../text\";\nimport { TextField } from \"../textfield\";\nimport { DatePicker } from \"../calendar\";\nimport styles from \"./filter-chip.module.css\";\nimport {\n  FilterSelectOption,\n  FilterOperation,\n  FilterType,\n  FilterTypes,\n  filterOperators,\n} from \"~/v1/types/filters\";\n\nexport interface FilterChipProps {\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) => void;\n  onOperationChange?: (operation: string) => void;\n  leadingIcon?: ReactElement;\n}\n\ninterface OperationProps {\n  label: string;\n  columnType: FilterTypes;\n  onOperationSelect: (op: FilterOperation) => void;\n}\n\nconst Operation = ({\n  label,\n  columnType = FilterType.text,\n  onOperationSelect,\n}: OperationProps) => {\n  const filterOptions = filterOperators[columnType] || [];\n  // FilterOperatorTypes gives error as Select returns string\n  const [value, setValue] = useState<string>(filterOptions?.[0]?.value);\n\n  useEffect(() => {\n    const selectedOption = filterOptions.find((o) => o.value === value);\n    if (selectedOption) {\n      onOperationSelect(selectedOption);\n    }\n  }, [value]);\n\n  return (\n    <Select\n      value={value}\n      onValueChange={setValue}\n      aria-labelledby={`${label}-label`}\n    >\n      <Select.Trigger\n        variant=\"filter\"\n        className={styles.operation}\n        aria-label={`${label} filter operation`}\n      >\n        <Select.Value\n          placeholder=\"Select operation\"\n          className={styles.operationText}\n        />\n      </Select.Trigger>\n      <Select.Content data-variant=\"filter\">\n        {filterOptions.map((opt) => {\n          return (\n            <Select.Item\n              key={opt.value}\n              value={opt.value}\n              aria-label={`Filter ${label} ${opt.label}`}\n            >\n              {opt.label}\n            </Select.Item>\n          );\n        })}\n      </Select.Content>\n    </Select>\n  );\n};\n\nexport const FilterChip = ({\n  label,\n  value,\n  onRemove = () => null,\n  className,\n  ref,\n  columnType = \"text\",\n  options = [],\n  onValueChange,\n  onOperationChange,\n  leadingIcon,\n  ...props\n}: FilterChipProps) => {\n  const [operation, setOperation] = useState<FilterOperation>();\n  const [filterValue, setFilterValue] = useState<any>(value || \"\");\n\n  useEffect(() => {\n    if (onOperationChange && operation?.value) {\n      onOperationChange(operation?.value);\n    }\n  }, [operation?.value]);\n\n  useEffect(() => {\n    if (onValueChange) {\n      onValueChange(filterValue);\n    }\n  }, [filterValue]);\n\n  const renderValueInput = () => {\n    switch (columnType) {\n      case FilterType.select:\n        return (\n          <Select value={filterValue.toString()} onValueChange={setFilterValue}>\n            <Select.Trigger variant=\"filter\" className={styles.selectValue}>\n              <Select.Value placeholder=\"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) => setFilterValue(date)}\n              showCalendarIcon={false}\n              textFieldProps={{ className: styles.dateField }}\n            />\n          </div>\n        );\n      default:\n        return (\n          <div className={styles.textFieldWrapper}>\n            <TextField\n              className={styles.textField}\n              value={filterValue}\n              onChange={(e) => setFilterValue(e.target.value)}\n            />\n          </div>\n        );\n    }\n  };\n\n  return (\n    <Box\n      ref={ref}\n      className={[styles.chip, className].filter(Boolean).join(\" \")}\n      role=\"group\"\n      aria-label={`Filter by ${label}`}\n      {...props}\n    >\n      <Flex align=\"center\">\n        <Flex align=\"center\" gap={2}>\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          columnType={columnType}\n          label={label}\n          onOperationSelect={setOperation}\n        />\n        {renderValueInput()}\n        <div\n          className={styles.removeIconContainer}\n          role=\"button\"\n          tabIndex={0}\n          aria-label={`Remove ${label} filter`}\n        >\n          <Cross1Icon className={styles.removeIcon} onClick={onRemove} />\n        </div>\n      </Flex>\n    </Box>\n  );\n};\n\nFilterChip.displayName = \"FilterChip\";\n"],"names":["FilterType","filterOperators","useState","useEffect","_jsxs","Select","_jsx","styles","DatePicker","TextField","Box","Flex","Text","Cross1Icon"],"mappings":"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"}

package/dist/v1/components/filter-chip/filter-chip.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, ReactElement } from "react";
-type FilterVariant = 'select' | 'text' | 'date' | 'range' | 'number';
+import { FilterSelectOption, FilterTypes } from "~/v1/types/filters";
 export interface FilterChipProps {
     label: string;
     value?: string;
@@ -7,11 +7,8 @@ export interface FilterChipProps {
     className?: string;
     ref?: React.RefObject<HTMLDivElement>;
     children?: ReactNode;
-    columnType?: FilterVariant;
-    options?: Array<{
-        label: string;
-        value: string;
-    }>;
+    columnType?: FilterTypes;
+    options?: FilterSelectOption[];
     onValueChange?: (value: any) => void;
     onOperationChange?: (operation: string) => void;
     leadingIcon?: ReactElement;
@@ -20,5 +17,4 @@ export declare const FilterChip: {
     ({ label, value, onRemove, className, ref, columnType, options, onValueChange, onOperationChange, leadingIcon, ...props }: FilterChipProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export {};
 //# sourceMappingURL=filter-chip.d.ts.map

package/dist/v1/components/filter-chip/filter-chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filter-chip.d.ts","sourceRoot":"","sources":["../../../../v1/components/filter-chip/filter-chip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAuB,YAAY,EAAE,MAAM,OAAO,CAAC;AASrE,KAAK,aAAa,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAErE,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,YAAY,CAAC;CAC5B;AAED,eAAO,MAAM,UAAU;+HAYpB,eAAe;;CA2HjB,CAAC"}
+{"version":3,"file":"filter-chip.d.ts","sourceRoot":"","sources":["../../../../v1/components/filter-chip/filter-chip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAuB,YAAY,EAAE,MAAM,OAAO,CAAC;AAQrE,OAAO,EACL,kBAAkB,EAGlB,WAAW,EAEZ,MAAM,oBAAoB,CAAC;AAE5B,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,YAAY,CAAC;CAC5B;AAyDD,eAAO,MAAM,UAAU;+HAYpB,eAAe;;CAgGjB,CAAC"}

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

@@ -10,22 +10,33 @@ import '../../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_module
 import '../../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_modules/react-day-picker/dist/esm/useDayPicker.js';
 import '../tooltip/tooltip.js';
 import { DatePicker } from '../calendar/date-picker.js';
-import { RangePicker } from '../calendar/range-picker.js';
+import '../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.js';
+import '../popover/popover.js';
 import styles from './filter-chip.module.css.js';
+import { FilterType, filterOperators } from '../../types/filters.js';
 
-const FilterChip = ({ label, value, onRemove = () => null, className, ref, columnType = 'text', options = [], onValueChange, onOperationChange, leadingIcon, ...props }) => {
-    const [operation, setOperation] = useState('is');
-    const [filterValue, setFilterValue] = useState(value || '');
-    const operationOptions = [
-        { label: 'is', value: 'is' },
-        { label: 'is not', value: 'is not' },
-        { label: 'contains', value: 'contains' },
-    ];
+const Operation = ({ label, columnType = FilterType.text, onOperationSelect, }) => {
+    const filterOptions = filterOperators[columnType] || [];
+    // FilterOperatorTypes gives error as Select returns string
+    const [value, setValue] = useState(filterOptions?.[0]?.value);
     useEffect(() => {
-        if (onOperationChange) {
-            onOperationChange(operation);
+        const selectedOption = filterOptions.find((o) => o.value === value);
+        if (selectedOption) {
+            onOperationSelect(selectedOption);
         }
-    }, [operation]);
+    }, [value]);
+    return (jsxRuntimeExports.jsxs(Select, { value: value, onValueChange: setValue, "aria-labelledby": `${label}-label`, children: [jsxRuntimeExports.jsx(Select.Trigger, { variant: "filter", className: styles.operation, "aria-label": `${label} filter operation`, children: jsxRuntimeExports.jsx(Select.Value, { placeholder: "Select operation", className: styles.operationText }) }), jsxRuntimeExports.jsx(Select.Content, { "data-variant": "filter", children: filterOptions.map((opt) => {
+                    return (jsxRuntimeExports.jsx(Select.Item, { value: opt.value, "aria-label": `Filter ${label} ${opt.label}`, children: opt.label }, opt.value));
+                }) })] }));
+};
+const FilterChip = ({ label, value, onRemove = () => null, className, ref, columnType = "text", options = [], onValueChange, onOperationChange, leadingIcon, ...props }) => {
+    const [operation, setOperation] = useState();
+    const [filterValue, setFilterValue] = useState(value || "");
+    useEffect(() => {
+        if (onOperationChange && operation?.value) {
+            onOperationChange(operation?.value);
+        }
+    }, [operation?.value]);
     useEffect(() => {
         if (onValueChange) {
             onValueChange(filterValue);
@@ -33,17 +44,15 @@ const FilterChip = ({ label, value, onRemove = () => null, className, ref, colum
     }, [filterValue]);
     const renderValueInput = () => {
         switch (columnType) {
-            case 'select':
-                return (jsxRuntimeExports.jsxs(Select, { value: filterValue, onValueChange: setFilterValue, children: [jsxRuntimeExports.jsx(Select.Trigger, { variant: "filter", children: jsxRuntimeExports.jsx("div", { className: styles.selectValue, children: jsxRuntimeExports.jsx(Select.Value, { placeholder: "Select value" }) }) }), jsxRuntimeExports.jsx(Select.Content, { "data-variant": "filter", children: options.map((opt) => (jsxRuntimeExports.jsx(Select.Item, { value: opt.value, children: opt.label }, opt.value))) })] }));
-            case 'date':
-                return (jsxRuntimeExports.jsx("div", { className: styles.dateFieldWrapper, children: jsxRuntimeExports.jsx(DatePicker, { onSelect: (date) => setFilterValue(date), showCalendarIcon: false, textFieldProps: { className: styles.dateField } }) }));
-            case 'range':
-                return (jsxRuntimeExports.jsx("div", { className: styles.dateFieldWrapper, children: jsxRuntimeExports.jsx(RangePicker, { textFieldProps: { className: styles.dateField }, onSelect: (range) => setFilterValue(range), showCalendarIcon: false, value: filterValue }) }));
+            case FilterType.select:
+                return (jsxRuntimeExports.jsxs(Select, { value: filterValue.toString(), onValueChange: setFilterValue, children: [jsxRuntimeExports.jsx(Select.Trigger, { variant: "filter", className: styles.selectValue, children: jsxRuntimeExports.jsx(Select.Value, { placeholder: "Select value" }) }), jsxRuntimeExports.jsx(Select.Content, { "data-variant": "filter", children: options.map((opt) => (jsxRuntimeExports.jsx(Select.Item, { value: opt.value.toString(), children: opt.label }, opt.value.toString()))) })] }));
+            case FilterType.date:
+                return (jsxRuntimeExports.jsx("div", { className: styles.dateFieldWrapper, children: jsxRuntimeExports.jsx(DatePicker, { value: filterValue, onSelect: (date) => setFilterValue(date), showCalendarIcon: false, textFieldProps: { className: styles.dateField } }) }));
             default:
                 return (jsxRuntimeExports.jsx("div", { className: styles.textFieldWrapper, children: jsxRuntimeExports.jsx(TextField, { className: styles.textField, value: filterValue, onChange: (e) => setFilterValue(e.target.value) }) }));
         }
     };
-    return (jsxRuntimeExports.jsx(Box, { ref: ref, className: [styles.chip, className].filter(Boolean).join(" "), role: "group", "aria-label": `Filter by ${label}`, ...props, children: jsxRuntimeExports.jsxs(Flex, { align: "center", children: [jsxRuntimeExports.jsxs(Flex, { align: "center", style: { gap: 'var(--rs-space-2)' }, children: [leadingIcon && (jsxRuntimeExports.jsx("span", { className: styles.leadingIcon, "aria-hidden": "true", children: leadingIcon })), jsxRuntimeExports.jsx(Text, { size: 2, weight: "normal", children: label })] }), jsxRuntimeExports.jsxs(Select, { defaultValue: operation, onValueChange: setOperation, "aria-labelledby": `${label}-label`, children: [jsxRuntimeExports.jsx(Select.Trigger, { className: styles.operation, variant: "filter", "aria-label": `${label} filter operation`, children: jsxRuntimeExports.jsx("span", { className: styles.operationText, children: operation }) }), jsxRuntimeExports.jsx(Select.Content, { "data-variant": "filter", children: operationOptions.map((opt) => (jsxRuntimeExports.jsx(Select.Item, { value: opt.value, "aria-label": `Filter ${label} ${opt.label}`, children: opt.label }, opt.value))) })] }), renderValueInput(), jsxRuntimeExports.jsx("div", { className: styles.removeIconContainer, role: "button", tabIndex: 0, "aria-label": `Remove ${label} filter`, children: jsxRuntimeExports.jsx(Cross1Icon, { className: styles.removeIcon, onClick: onRemove }) })] }) }));
+    return (jsxRuntimeExports.jsx(Box, { ref: ref, className: [styles.chip, className].filter(Boolean).join(" "), role: "group", "aria-label": `Filter by ${label}`, ...props, children: jsxRuntimeExports.jsxs(Flex, { align: "center", children: [jsxRuntimeExports.jsxs(Flex, { align: "center", gap: 2, children: [leadingIcon && (jsxRuntimeExports.jsx("span", { className: styles.leadingIcon, "aria-hidden": "true", children: leadingIcon })), jsxRuntimeExports.jsx(Text, { size: 2, weight: "normal", children: label })] }), jsxRuntimeExports.jsx(Operation, { columnType: columnType, label: label, onOperationSelect: setOperation }), renderValueInput(), jsxRuntimeExports.jsx("div", { className: styles.removeIconContainer, role: "button", tabIndex: 0, "aria-label": `Remove ${label} filter`, children: jsxRuntimeExports.jsx(Cross1Icon, { className: styles.removeIcon, onClick: onRemove }) })] }) }));
 };
 FilterChip.displayName = "FilterChip";
 

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

@@ -1 +1 @@
-{"version":3,"file":"filter-chip.js","sources":["../../../../v1/components/filter-chip/filter-chip.tsx"],"sourcesContent":["import { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { ReactNode, useEffect, useState, ReactElement } from \"react\";\nimport { Box } from \"../box\";\nimport { Flex } from \"../flex\";\nimport { Select } from \"../select\";\nimport { Text } from \"../text\";\nimport { TextField } from \"../textfield\";\nimport { DatePicker, RangePicker } from \"../calendar\";\nimport styles from \"./filter-chip.module.css\";\n\ntype FilterVariant = 'select' | 'text' | 'date' | 'range' | 'number';\n\nexport interface FilterChipProps {\n  label: string;\n  value?: string;\n  onRemove?: () => void;\n  className?: string;\n  ref?: React.RefObject<HTMLDivElement>;\n  children?: ReactNode;\n  columnType?: FilterVariant;\n  options?: Array<{ label: string; value: string }>;\n  onValueChange?: (value: any) => void;\n  onOperationChange?: (operation: string) => void;\n  leadingIcon?: ReactElement;\n}\n\nexport const FilterChip = ({\n  label,\n  value,\n  onRemove = () => null,\n  className,\n  ref,\n  columnType = 'text',\n  options = [],\n  onValueChange,\n  onOperationChange,\n  leadingIcon,\n  ...props\n}: FilterChipProps) => {\n  const [operation, setOperation] = useState('is');\n  const [filterValue, setFilterValue] = useState<any>(value || '');\n\n  const operationOptions = [\n    { label: 'is', value: 'is' },\n    { label: 'is not', value: 'is not' },\n    { label: 'contains', value: 'contains' },\n  ];\n\n  useEffect(() => {\n    if (onOperationChange) {\n      onOperationChange(operation);\n    }\n  }, [operation]);\n\n  useEffect(() => {\n    if (onValueChange) {\n      onValueChange(filterValue);\n    }\n  }, [filterValue]);\n\n  const renderValueInput = () => {\n    switch (columnType) {\n      case 'select':\n        return (\n          <Select\n            value={filterValue}\n            onValueChange={setFilterValue}\n          >\n            <Select.Trigger variant=\"filter\">\n              <div className={styles.selectValue}>\n                <Select.Value placeholder=\"Select value\" />\n              </div>\n            </Select.Trigger>\n            <Select.Content data-variant=\"filter\">\n              {options.map((opt) => (\n                <Select.Item key={opt.value} value={opt.value}>\n                  {opt.label}\n                </Select.Item>\n              ))}\n            </Select.Content>\n          </Select>\n        );\n      case 'date':\n        return (\n          <div className={styles.dateFieldWrapper}>\n            <DatePicker \n              onSelect={(date) => setFilterValue(date)}\n              showCalendarIcon={false}\n              textFieldProps={{ className: styles.dateField }}\n            />\n          </div>\n        );\n      case 'range':\n        return (\n          <div className={styles.dateFieldWrapper}>\n            <RangePicker\n              textFieldProps={{ className: styles.dateField }}\n              onSelect={(range) => setFilterValue(range)}\n              showCalendarIcon={false}\n              value={filterValue}\n            />\n          </div>\n        );\n      default:\n        return (\n          <div className={styles.textFieldWrapper}>\n            <TextField\n              className={styles.textField}\n              value={filterValue}\n              onChange={(e) => setFilterValue(e.target.value)}\n            />\n          </div>\n        );\n    }\n  };\n\n  return (\n    <Box\n      ref={ref}\n      className={[styles.chip, className].filter(Boolean).join(\" \")}\n      role=\"group\"\n      aria-label={`Filter by ${label}`}\n      {...props}\n    >\n      <Flex align=\"center\">\n        <Flex align=\"center\" style={{ gap: 'var(--rs-space-2)' }}>\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        <Select defaultValue={operation} onValueChange={setOperation} aria-labelledby={`${label}-label`}>\n          <Select.Trigger className={styles.operation} variant=\"filter\" aria-label={`${label} filter operation`}>\n            <span className={styles.operationText}>{operation}</span>\n          </Select.Trigger>\n          <Select.Content data-variant=\"filter\">\n            {operationOptions.map((opt) => (\n              <Select.Item key={opt.value} value={opt.value} aria-label={`Filter ${label} ${opt.label}`}>\n                {opt.label}\n              </Select.Item>\n            ))}\n          </Select.Content>\n        </Select>\n        {renderValueInput()}\n          <div className={styles.removeIconContainer} \n            role=\"button\"\n            tabIndex={0}\n            aria-label={`Remove ${label} filter`}\n          >\n            <Cross1Icon \n              className={styles.removeIcon}\n              onClick={onRemove}\n            />\n          </div>\n      </Flex>\n    </Box>\n  );\n};\n\nFilterChip.displayName = \"FilterChip\";\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"filter-chip.js","sources":["../../../../v1/components/filter-chip/filter-chip.tsx"],"sourcesContent":["import { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { ReactNode, useEffect, useState, ReactElement } from \"react\";\nimport { Box } from \"../box\";\nimport { Flex } from \"../flex\";\nimport { Select } from \"../select\";\nimport { Text } from \"../text\";\nimport { TextField } from \"../textfield\";\nimport { DatePicker } from \"../calendar\";\nimport styles from \"./filter-chip.module.css\";\nimport {\n  FilterSelectOption,\n  FilterOperation,\n  FilterType,\n  FilterTypes,\n  filterOperators,\n} from \"~/v1/types/filters\";\n\nexport interface FilterChipProps {\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) => void;\n  onOperationChange?: (operation: string) => void;\n  leadingIcon?: ReactElement;\n}\n\ninterface OperationProps {\n  label: string;\n  columnType: FilterTypes;\n  onOperationSelect: (op: FilterOperation) => void;\n}\n\nconst Operation = ({\n  label,\n  columnType = FilterType.text,\n  onOperationSelect,\n}: OperationProps) => {\n  const filterOptions = filterOperators[columnType] || [];\n  // FilterOperatorTypes gives error as Select returns string\n  const [value, setValue] = useState<string>(filterOptions?.[0]?.value);\n\n  useEffect(() => {\n    const selectedOption = filterOptions.find((o) => o.value === value);\n    if (selectedOption) {\n      onOperationSelect(selectedOption);\n    }\n  }, [value]);\n\n  return (\n    <Select\n      value={value}\n      onValueChange={setValue}\n      aria-labelledby={`${label}-label`}\n    >\n      <Select.Trigger\n        variant=\"filter\"\n        className={styles.operation}\n        aria-label={`${label} filter operation`}\n      >\n        <Select.Value\n          placeholder=\"Select operation\"\n          className={styles.operationText}\n        />\n      </Select.Trigger>\n      <Select.Content data-variant=\"filter\">\n        {filterOptions.map((opt) => {\n          return (\n            <Select.Item\n              key={opt.value}\n              value={opt.value}\n              aria-label={`Filter ${label} ${opt.label}`}\n            >\n              {opt.label}\n            </Select.Item>\n          );\n        })}\n      </Select.Content>\n    </Select>\n  );\n};\n\nexport const FilterChip = ({\n  label,\n  value,\n  onRemove = () => null,\n  className,\n  ref,\n  columnType = \"text\",\n  options = [],\n  onValueChange,\n  onOperationChange,\n  leadingIcon,\n  ...props\n}: FilterChipProps) => {\n  const [operation, setOperation] = useState<FilterOperation>();\n  const [filterValue, setFilterValue] = useState<any>(value || \"\");\n\n  useEffect(() => {\n    if (onOperationChange && operation?.value) {\n      onOperationChange(operation?.value);\n    }\n  }, [operation?.value]);\n\n  useEffect(() => {\n    if (onValueChange) {\n      onValueChange(filterValue);\n    }\n  }, [filterValue]);\n\n  const renderValueInput = () => {\n    switch (columnType) {\n      case FilterType.select:\n        return (\n          <Select value={filterValue.toString()} onValueChange={setFilterValue}>\n            <Select.Trigger variant=\"filter\" className={styles.selectValue}>\n              <Select.Value placeholder=\"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) => setFilterValue(date)}\n              showCalendarIcon={false}\n              textFieldProps={{ className: styles.dateField }}\n            />\n          </div>\n        );\n      default:\n        return (\n          <div className={styles.textFieldWrapper}>\n            <TextField\n              className={styles.textField}\n              value={filterValue}\n              onChange={(e) => setFilterValue(e.target.value)}\n            />\n          </div>\n        );\n    }\n  };\n\n  return (\n    <Box\n      ref={ref}\n      className={[styles.chip, className].filter(Boolean).join(\" \")}\n      role=\"group\"\n      aria-label={`Filter by ${label}`}\n      {...props}\n    >\n      <Flex align=\"center\">\n        <Flex align=\"center\" gap={2}>\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          columnType={columnType}\n          label={label}\n          onOperationSelect={setOperation}\n        />\n        {renderValueInput()}\n        <div\n          className={styles.removeIconContainer}\n          role=\"button\"\n          tabIndex={0}\n          aria-label={`Remove ${label} filter`}\n        >\n          <Cross1Icon className={styles.removeIcon} onClick={onRemove} />\n        </div>\n      </Flex>\n    </Box>\n  );\n};\n\nFilterChip.displayName = \"FilterChip\";\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/v1/components/icons/assets/filter.svg.cjs

@@ -0,0 +1,41 @@
+'use strict';
+
+var React = require('react');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+var _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var SvgFilter = function SvgFilter(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "var(--rs-color-foreground-base-secondary)",
+    fillRule: "evenodd",
+    d: "M2.167 4.8a.5.5 0 0 1 .5-.5h10.666a.5.5 0 1 1 0 1H2.667a.5.5 0 0 1-.5-.5M4.3 8a.5.5 0 0 1 .5-.5h6.4a.5.5 0 0 1 0 1H4.8a.5.5 0 0 1-.5-.5m.933 3.2a.5.5 0 0 1 .5-.5h4.534a.5.5 0 1 1 0 1H5.733a.5.5 0 0 1-.5-.5",
+    clipRule: "evenodd"
+  })));
+};
+
+exports.ReactComponent = SvgFilter;
+//# sourceMappingURL=filter.svg.cjs.map

package/dist/v1/components/icons/assets/filter.svg.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter.svg.cjs","sources":["../../../../../v1/components/icons/assets/filter.svg"],"sourcesContent":["var img = \"data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cg id='Filter'%3e %3cpath id='Shape' fill-rule='evenodd' clip-rule='evenodd' d='M2.16675 4.80005C2.16675 4.52391 2.39061 4.30005 2.66675 4.30005H13.3334C13.6096 4.30005 13.8334 4.52391 13.8334 4.80005C13.8334 5.07619 13.6096 5.30005 13.3334 5.30005H2.66675C2.39061 5.30005 2.16675 5.07619 2.16675 4.80005ZM4.30008 8.00005C4.30008 7.72391 4.52394 7.50005 4.80008 7.50005H11.2001C11.4762 7.50005 11.7001 7.72391 11.7001 8.00005C11.7001 8.27619 11.4762 8.50005 11.2001 8.50005H4.80008C4.52394 8.50005 4.30008 8.27619 4.30008 8.00005ZM5.23341 11.2C5.23341 10.9239 5.45727 10.7 5.73341 10.7H10.2667C10.5429 10.7 10.7667 10.9239 10.7667 11.2C10.7667 11.4762 10.5429 11.7 10.2667 11.7H5.73341C5.45727 11.7 5.23341 11.4762 5.23341 11.2Z' fill='var(--rs-color-foreground-base-secondary)' /%3e %3c/g%3e%3c/svg%3e\";\n  export default img;"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAI,KAAK,CAAC;AACV,SAAS,QAAQ,GAAG,EAAE,OAAO,QAAQ,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,UAAU,CAAC,EAAE,EAAE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAE;AAEjR,IAAC,SAAS,GAAG,SAAS,SAAS,CAAC,KAAK,EAAE;AAC1C,EAAE,oBAAoBA,gBAAK,CAAC,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC;AAC1D,IAAI,KAAK,EAAE,4BAA4B;AACvC,IAAI,KAAK,EAAE,EAAE;AACb,IAAI,MAAM,EAAE,EAAE;AACd,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,KAAK,gBAAgBA,gBAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AACxE,IAAI,IAAI,EAAE,2CAA2C;AACrD,IAAI,QAAQ,EAAE,SAAS;AACvB,IAAI,CAAC,EAAE,+MAA+M;AACtN,IAAI,QAAQ,EAAE,SAAS;AACvB,GAAG,CAAC,CAAC,CAAC,CAAC;AACP;;;;"}

package/dist/v1/components/icons/assets/filter.svg.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+var _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var SvgFilter = function SvgFilter(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "var(--rs-color-foreground-base-secondary)",
+    fillRule: "evenodd",
+    d: "M2.167 4.8a.5.5 0 0 1 .5-.5h10.666a.5.5 0 1 1 0 1H2.667a.5.5 0 0 1-.5-.5M4.3 8a.5.5 0 0 1 .5-.5h6.4a.5.5 0 0 1 0 1H4.8a.5.5 0 0 1-.5-.5m.933 3.2a.5.5 0 0 1 .5-.5h4.534a.5.5 0 1 1 0 1H5.733a.5.5 0 0 1-.5-.5",
+    clipRule: "evenodd"
+  })));
+};
+
+export { SvgFilter as ReactComponent };
+//# sourceMappingURL=filter.svg.js.map

package/dist/v1/components/icons/assets/filter.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter.svg.js","sources":["../../../../../v1/components/icons/assets/filter.svg"],"sourcesContent":["var img = \"data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cg id='Filter'%3e %3cpath id='Shape' fill-rule='evenodd' clip-rule='evenodd' d='M2.16675 4.80005C2.16675 4.52391 2.39061 4.30005 2.66675 4.30005H13.3334C13.6096 4.30005 13.8334 4.52391 13.8334 4.80005C13.8334 5.07619 13.6096 5.30005 13.3334 5.30005H2.66675C2.39061 5.30005 2.16675 5.07619 2.16675 4.80005ZM4.30008 8.00005C4.30008 7.72391 4.52394 7.50005 4.80008 7.50005H11.2001C11.4762 7.50005 11.7001 7.72391 11.7001 8.00005C11.7001 8.27619 11.4762 8.50005 11.2001 8.50005H4.80008C4.52394 8.50005 4.30008 8.27619 4.30008 8.00005ZM5.23341 11.2C5.23341 10.9239 5.45727 10.7 5.73341 10.7H10.2667C10.5429 10.7 10.7667 10.9239 10.7667 11.2C10.7667 11.4762 10.5429 11.7 10.2667 11.7H5.73341C5.45727 11.7 5.23341 11.4762 5.23341 11.2Z' fill='var(--rs-color-foreground-base-secondary)' /%3e %3c/g%3e%3c/svg%3e\";\n  export default img;"],"names":[],"mappings":";;AAAA,IAAI,KAAK,CAAC;AACV,SAAS,QAAQ,GAAG,EAAE,OAAO,QAAQ,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,UAAU,CAAC,EAAE,EAAE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAE;AAEjR,IAAC,SAAS,GAAG,SAAS,SAAS,CAAC,KAAK,EAAE;AAC1C,EAAE,oBAAoB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC;AAC1D,IAAI,KAAK,EAAE,4BAA4B;AACvC,IAAI,KAAK,EAAE,EAAE;AACb,IAAI,MAAM,EAAE,EAAE;AACd,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,KAAK,gBAAgB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AACxE,IAAI,IAAI,EAAE,2CAA2C;AACrD,IAAI,QAAQ,EAAE,SAAS;AACvB,IAAI,CAAC,EAAE,+MAA+M;AACtN,IAAI,QAAQ,EAAE,SAAS;AACvB,GAAG,CAAC,CAAC,CAAC,CAAC;AACP;;;;"}

package/dist/v1/components/icons/icons.d.ts

@@ -0,0 +1,3 @@
+import { ReactComponent as FilterIcon } from "./assets/filter.svg";
+export { FilterIcon };
+//# sourceMappingURL=icons.d.ts.map

package/dist/v1/components/icons/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../../v1/components/icons/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/v1/components/icons/index.d.ts

@@ -0,0 +1,2 @@
+export { FilterIcon } from "./icons";
+//# sourceMappingURL=index.d.ts.map

package/dist/v1/components/icons/index.d.ts.map

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

package/dist/v1/components/input-field/input-field.cjs

@@ -6,7 +6,7 @@ var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/c
 var chip = require('../chip/chip.cjs');
 var inputField_module = require('./input-field.module.css.cjs');
 
-// Todo: Add a dropdown and chip support
+// Todo: Add a dropdown support
 const inputWrapper = index.cva(inputField_module.default.inputWrapper, {
     variants: {
         size: {

package/dist/v1/components/input-field/input-field.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"input-field.cjs","sources":["../../../../v1/components/input-field/input-field.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport clsx from \"clsx\";\nimport { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { Chip } from \"../chip\";\nimport styles from \"./input-field.module.css\";\n\n// Todo: Add a dropdown and chip support\n\nconst inputWrapper = cva(styles.inputWrapper, {\n  variants: {\n    size: {\n      small: styles[\"size-small\"],\n      large: styles[\"size-large\"],\n    }\n  },\n  defaultVariants: {\n    size: \"large\",\n  }\n});\n\nexport interface InputFieldProps\n  extends Omit<ComponentPropsWithoutRef<\"input\">, \"error\" | \"size\">,\n    VariantProps<typeof inputWrapper> {\n  label?: string;\n  helperText?: string;\n  error?: string;\n  disabled?: boolean;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  optional?: boolean;\n  prefix?: string;\n  suffix?: string;\n  width?: string | number;\n  chips?: Array<{ label: string; onRemove?: () => void }>;\n  maxChipsVisible?: number;\n  ref?: React.RefObject<HTMLInputElement>;\n}\n\nexport const InputField = ({ \n  className,\n  disabled,\n  label,\n  helperText,\n  placeholder,\n  error,\n  leadingIcon,\n  trailingIcon,\n  optional,\n  prefix,\n  suffix,\n  width,\n  chips,\n  maxChipsVisible = 2,\n  ref,\n  size,\n  ...props \n}: InputFieldProps) => {\n  return (\n    <div className={styles.container} style={{ width: width || '100%' }}>\n      {label && (\n        <label className={clsx(styles.label, disabled && styles[\"label-disabled\"])}>\n          {label}\n          {optional && <span className={styles.optional}>(optional)</span>}\n        </label>\n      )}\n      <div \n        className={clsx(\n          inputWrapper({ size, className }),\n          chips?.length && styles['has-chips']\n        )}\n      >\n        {leadingIcon && <span className={styles['leading-icon']}>{leadingIcon}</span>}\n        {prefix && <span className={styles.prefix}>{prefix}</span>}\n        <div className={styles['chip-input-container']}>\n          {chips?.slice(0, maxChipsVisible).map((chip, index) => (\n            <Chip\n              key={index}\n              variant=\"outline\"\n              isDismissible={!!chip.onRemove}\n              onDismiss={chip.onRemove}\n              className={styles.chip}\n            >\n              {chip.label}\n            </Chip>\n          ))}\n          {chips && chips.length > maxChipsVisible && (\n            <span className={styles['chip-overflow']}>\n              +{chips.length - maxChipsVisible}\n            </span>\n          )}\n          <input\n            ref={ref}\n            className={clsx(\n              styles['input-field'],\n              leadingIcon && styles['has-leading-icon'],\n              trailingIcon && styles['has-trailing-icon'],\n              prefix && styles['has-prefix'],\n              suffix && styles['has-suffix'],\n              error && styles['input-error'],\n              disabled && styles['input-disabled'],\n              className\n            )}\n            aria-invalid={!!error}\n            placeholder={placeholder}\n            disabled={disabled}\n            {...props}\n          />\n        </div>\n        {suffix && <span className={styles.suffix}>{suffix}</span>}\n        {trailingIcon && <span className={styles['trailing-icon']}>{trailingIcon}</span>}\n      </div>\n      {(error || helperText) && (\n        <span \n          className={clsx(\n            styles['helper-text'], \n            error && styles['helper-text-error'],\n            disabled && styles['helper-text-disabled']\n          )}\n        >\n          {error || helperText}\n        </span>\n      )}\n    </div>\n  );\n};\n\nInputField.displayName = \"InputField\";"],"names":["cva","styles","_jsxs","clsx","_jsx","chip","Chip"],"mappings":"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"}
+{"version":3,"file":"input-field.cjs","sources":["../../../../v1/components/input-field/input-field.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport clsx from \"clsx\";\nimport { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { Chip } from \"../chip\";\nimport styles from \"./input-field.module.css\";\n\n// Todo: Add a dropdown support\n\nconst inputWrapper = cva(styles.inputWrapper, {\n  variants: {\n    size: {\n      small: styles[\"size-small\"],\n      large: styles[\"size-large\"],\n    }\n  },\n  defaultVariants: {\n    size: \"large\",\n  }\n});\n\nexport interface InputFieldProps\n  extends Omit<ComponentPropsWithoutRef<\"input\">, \"error\" | \"size\">,\n    VariantProps<typeof inputWrapper> {\n  label?: string;\n  helperText?: string;\n  error?: string;\n  disabled?: boolean;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  optional?: boolean;\n  prefix?: string;\n  suffix?: string;\n  width?: string | number;\n  chips?: Array<{ label: string; onRemove?: () => void }>;\n  maxChipsVisible?: number;\n  ref?: React.RefObject<HTMLInputElement>;\n}\n\nexport const InputField = ({ \n  className,\n  disabled,\n  label,\n  helperText,\n  placeholder,\n  error,\n  leadingIcon,\n  trailingIcon,\n  optional,\n  prefix,\n  suffix,\n  width,\n  chips,\n  maxChipsVisible = 2,\n  ref,\n  size,\n  ...props \n}: InputFieldProps) => {\n  return (\n    <div className={styles.container} style={{ width: width || '100%' }}>\n      {label && (\n        <label className={clsx(styles.label, disabled && styles[\"label-disabled\"])}>\n          {label}\n          {optional && <span className={styles.optional}>(optional)</span>}\n        </label>\n      )}\n      <div \n        className={clsx(\n          inputWrapper({ size, className }),\n          chips?.length && styles['has-chips']\n        )}\n      >\n        {leadingIcon && <span className={styles['leading-icon']}>{leadingIcon}</span>}\n        {prefix && <span className={styles.prefix}>{prefix}</span>}\n        <div className={styles['chip-input-container']}>\n          {chips?.slice(0, maxChipsVisible).map((chip, index) => (\n            <Chip\n              key={index}\n              variant=\"outline\"\n              isDismissible={!!chip.onRemove}\n              onDismiss={chip.onRemove}\n              className={styles.chip}\n            >\n              {chip.label}\n            </Chip>\n          ))}\n          {chips && chips.length > maxChipsVisible && (\n            <span className={styles['chip-overflow']}>\n              +{chips.length - maxChipsVisible}\n            </span>\n          )}\n          <input\n            ref={ref}\n            className={clsx(\n              styles['input-field'],\n              leadingIcon && styles['has-leading-icon'],\n              trailingIcon && styles['has-trailing-icon'],\n              prefix && styles['has-prefix'],\n              suffix && styles['has-suffix'],\n              error && styles['input-error'],\n              disabled && styles['input-disabled'],\n              className\n            )}\n            aria-invalid={!!error}\n            placeholder={placeholder}\n            disabled={disabled}\n            {...props}\n          />\n        </div>\n        {suffix && <span className={styles.suffix}>{suffix}</span>}\n        {trailingIcon && <span className={styles['trailing-icon']}>{trailingIcon}</span>}\n      </div>\n      {(error || helperText) && (\n        <span \n          className={clsx(\n            styles['helper-text'], \n            error && styles['helper-text-error'],\n            disabled && styles['helper-text-disabled']\n          )}\n        >\n          {error || helperText}\n        </span>\n      )}\n    </div>\n  );\n};\n\nInputField.displayName = \"InputField\";"],"names":["cva","styles","_jsxs","clsx","_jsx","chip","Chip"],"mappings":"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"}

package/dist/v1/components/input-field/input-field.js

@@ -4,7 +4,7 @@ import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist
 import { Chip } from '../chip/chip.js';
 import styles from './input-field.module.css.js';
 
-// Todo: Add a dropdown and chip support
+// Todo: Add a dropdown support
 const inputWrapper = cva(styles.inputWrapper, {
     variants: {
         size: {

package/dist/v1/components/input-field/input-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-field.js","sources":["../../../../v1/components/input-field/input-field.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport clsx from \"clsx\";\nimport { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { Chip } from \"../chip\";\nimport styles from \"./input-field.module.css\";\n\n// Todo: Add a dropdown and chip support\n\nconst inputWrapper = cva(styles.inputWrapper, {\n  variants: {\n    size: {\n      small: styles[\"size-small\"],\n      large: styles[\"size-large\"],\n    }\n  },\n  defaultVariants: {\n    size: \"large\",\n  }\n});\n\nexport interface InputFieldProps\n  extends Omit<ComponentPropsWithoutRef<\"input\">, \"error\" | \"size\">,\n    VariantProps<typeof inputWrapper> {\n  label?: string;\n  helperText?: string;\n  error?: string;\n  disabled?: boolean;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  optional?: boolean;\n  prefix?: string;\n  suffix?: string;\n  width?: string | number;\n  chips?: Array<{ label: string; onRemove?: () => void }>;\n  maxChipsVisible?: number;\n  ref?: React.RefObject<HTMLInputElement>;\n}\n\nexport const InputField = ({ \n  className,\n  disabled,\n  label,\n  helperText,\n  placeholder,\n  error,\n  leadingIcon,\n  trailingIcon,\n  optional,\n  prefix,\n  suffix,\n  width,\n  chips,\n  maxChipsVisible = 2,\n  ref,\n  size,\n  ...props \n}: InputFieldProps) => {\n  return (\n    <div className={styles.container} style={{ width: width || '100%' }}>\n      {label && (\n        <label className={clsx(styles.label, disabled && styles[\"label-disabled\"])}>\n          {label}\n          {optional && <span className={styles.optional}>(optional)</span>}\n        </label>\n      )}\n      <div \n        className={clsx(\n          inputWrapper({ size, className }),\n          chips?.length && styles['has-chips']\n        )}\n      >\n        {leadingIcon && <span className={styles['leading-icon']}>{leadingIcon}</span>}\n        {prefix && <span className={styles.prefix}>{prefix}</span>}\n        <div className={styles['chip-input-container']}>\n          {chips?.slice(0, maxChipsVisible).map((chip, index) => (\n            <Chip\n              key={index}\n              variant=\"outline\"\n              isDismissible={!!chip.onRemove}\n              onDismiss={chip.onRemove}\n              className={styles.chip}\n            >\n              {chip.label}\n            </Chip>\n          ))}\n          {chips && chips.length > maxChipsVisible && (\n            <span className={styles['chip-overflow']}>\n              +{chips.length - maxChipsVisible}\n            </span>\n          )}\n          <input\n            ref={ref}\n            className={clsx(\n              styles['input-field'],\n              leadingIcon && styles['has-leading-icon'],\n              trailingIcon && styles['has-trailing-icon'],\n              prefix && styles['has-prefix'],\n              suffix && styles['has-suffix'],\n              error && styles['input-error'],\n              disabled && styles['input-disabled'],\n              className\n            )}\n            aria-invalid={!!error}\n            placeholder={placeholder}\n            disabled={disabled}\n            {...props}\n          />\n        </div>\n        {suffix && <span className={styles.suffix}>{suffix}</span>}\n        {trailingIcon && <span className={styles['trailing-icon']}>{trailingIcon}</span>}\n      </div>\n      {(error || helperText) && (\n        <span \n          className={clsx(\n            styles['helper-text'], \n            error && styles['helper-text-error'],\n            disabled && styles['helper-text-disabled']\n          )}\n        >\n          {error || helperText}\n        </span>\n      )}\n    </div>\n  );\n};\n\nInputField.displayName = \"InputField\";"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"input-field.js","sources":["../../../../v1/components/input-field/input-field.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport clsx from \"clsx\";\nimport { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { Chip } from \"../chip\";\nimport styles from \"./input-field.module.css\";\n\n// Todo: Add a dropdown support\n\nconst inputWrapper = cva(styles.inputWrapper, {\n  variants: {\n    size: {\n      small: styles[\"size-small\"],\n      large: styles[\"size-large\"],\n    }\n  },\n  defaultVariants: {\n    size: \"large\",\n  }\n});\n\nexport interface InputFieldProps\n  extends Omit<ComponentPropsWithoutRef<\"input\">, \"error\" | \"size\">,\n    VariantProps<typeof inputWrapper> {\n  label?: string;\n  helperText?: string;\n  error?: string;\n  disabled?: boolean;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  optional?: boolean;\n  prefix?: string;\n  suffix?: string;\n  width?: string | number;\n  chips?: Array<{ label: string; onRemove?: () => void }>;\n  maxChipsVisible?: number;\n  ref?: React.RefObject<HTMLInputElement>;\n}\n\nexport const InputField = ({ \n  className,\n  disabled,\n  label,\n  helperText,\n  placeholder,\n  error,\n  leadingIcon,\n  trailingIcon,\n  optional,\n  prefix,\n  suffix,\n  width,\n  chips,\n  maxChipsVisible = 2,\n  ref,\n  size,\n  ...props \n}: InputFieldProps) => {\n  return (\n    <div className={styles.container} style={{ width: width || '100%' }}>\n      {label && (\n        <label className={clsx(styles.label, disabled && styles[\"label-disabled\"])}>\n          {label}\n          {optional && <span className={styles.optional}>(optional)</span>}\n        </label>\n      )}\n      <div \n        className={clsx(\n          inputWrapper({ size, className }),\n          chips?.length && styles['has-chips']\n        )}\n      >\n        {leadingIcon && <span className={styles['leading-icon']}>{leadingIcon}</span>}\n        {prefix && <span className={styles.prefix}>{prefix}</span>}\n        <div className={styles['chip-input-container']}>\n          {chips?.slice(0, maxChipsVisible).map((chip, index) => (\n            <Chip\n              key={index}\n              variant=\"outline\"\n              isDismissible={!!chip.onRemove}\n              onDismiss={chip.onRemove}\n              className={styles.chip}\n            >\n              {chip.label}\n            </Chip>\n          ))}\n          {chips && chips.length > maxChipsVisible && (\n            <span className={styles['chip-overflow']}>\n              +{chips.length - maxChipsVisible}\n            </span>\n          )}\n          <input\n            ref={ref}\n            className={clsx(\n              styles['input-field'],\n              leadingIcon && styles['has-leading-icon'],\n              trailingIcon && styles['has-trailing-icon'],\n              prefix && styles['has-prefix'],\n              suffix && styles['has-suffix'],\n              error && styles['input-error'],\n              disabled && styles['input-disabled'],\n              className\n            )}\n            aria-invalid={!!error}\n            placeholder={placeholder}\n            disabled={disabled}\n            {...props}\n          />\n        </div>\n        {suffix && <span className={styles.suffix}>{suffix}</span>}\n        {trailingIcon && <span className={styles['trailing-icon']}>{trailingIcon}</span>}\n      </div>\n      {(error || helperText) && (\n        <span \n          className={clsx(\n            styles['helper-text'], \n            error && styles['helper-text-error'],\n            disabled && styles['helper-text-disabled']\n          )}\n        >\n          {error || helperText}\n        </span>\n      )}\n    </div>\n  );\n};\n\nInputField.displayName = \"InputField\";"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/v1/components/sidebar/index.d.ts

@@ -0,0 +1,2 @@
+export { Sidebar } from "./sidebar";
+//# sourceMappingURL=index.d.ts.map

package/dist/v1/components/sidebar/index.d.ts.map

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

package/dist/v1/components/sidebar/sidebar.cjs

@@ -0,0 +1,47 @@
+'use strict';
+
+var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
+var index = require('../../node_modules/.pnpm/@radix-ui_react-collapsible@1.1.2_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18._hjslo7xm5vmo3b4sx344jkbtcq/node_modules/@radix-ui/react-collapsible/dist/index.cjs');
+var index$1 = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
+var tooltip = require('../tooltip/tooltip.cjs');
+var sidebar_module = require('./sidebar.module.css.cjs');
+
+const root = index$1.cva(sidebar_module.default.root);
+const SidebarRoot = ({ className, position = 'left', open, onOpenChange, children, profile, ref, ...props }) => (jsxRuntime.jsxRuntimeExports.jsx(tooltip.TooltipProvider, { children: jsxRuntime.jsxRuntimeExports.jsxs(index.Root, { ref: ref, className: root({ className }), "data-position": position, "data-state": open ? 'expanded' : 'collapsed', open: open, onOpenChange: onOpenChange, "aria-label": "Navigation Sidebar", "aria-expanded": open, role: "navigation", ...props, children: [jsxRuntime.jsxRuntimeExports.jsx(tooltip.Tooltip, { message: open ? "Click to collapse" : "Click to expand", side: position === 'left' ? 'right' : 'left', asChild: true, children: jsxRuntime.jsxRuntimeExports.jsx("div", { className: sidebar_module.default.resizeHandle, onClick: () => onOpenChange?.(!open), role: "button", tabIndex: 0, "aria-label": open ? "Collapse sidebar" : "Expand sidebar", onKeyDown: (e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            onOpenChange?.(!open);
+                        }
+                    } }) }), children, profile && (jsxRuntime.jsxRuntimeExports.jsxs("a", { href: profile.href, className: sidebar_module.default.account, role: "button", "aria-label": `Profile: ${profile.label}`, onClick: (e) => {
+                    if (profile.onIconClick) {
+                        e.preventDefault();
+                        profile.onIconClick();
+                    }
+                }, children: [jsxRuntime.jsxRuntimeExports.jsx("span", { className: sidebar_module.default['nav-icon'], "aria-hidden": "true", style: { cursor: profile.onIconClick ? 'pointer' : undefined }, children: profile.icon }), jsxRuntime.jsxRuntimeExports.jsx("span", { className: sidebar_module.default['nav-text'], children: profile.label })] }))] }) }));
+const SidebarHeader = ({ className, logo, title, onLogoClick, ref, ...props }) => (jsxRuntime.jsxRuntimeExports.jsxs("div", { ref: ref, className: sidebar_module.default.header, role: "banner", ...props, children: [jsxRuntime.jsxRuntimeExports.jsx("div", { className: sidebar_module.default.logo, onClick: onLogoClick, role: onLogoClick ? "button" : undefined, tabIndex: onLogoClick ? 0 : undefined, onKeyDown: (e) => {
+                if (onLogoClick && (e.key === 'Enter' || e.key === ' ')) {
+                    e.preventDefault();
+                    onLogoClick();
+                }
+            }, style: { cursor: onLogoClick ? 'pointer' : undefined }, children: logo }), jsxRuntime.jsxRuntimeExports.jsx("div", { className: sidebar_module.default.title, role: "heading", "aria-level": 1, children: title })] }));
+const SidebarMain = ({ className, children, ref, ...props }) => (jsxRuntime.jsxRuntimeExports.jsx("div", { ref: ref, className: sidebar_module.default.main, role: "group", "aria-label": "Main navigation", ...props, children: children }));
+const SidebarFooter = ({ className, children, ref, ...props }) => (jsxRuntime.jsxRuntimeExports.jsx("div", { ref: ref, className: sidebar_module.default.footer, role: "group", "aria-label": "Footer navigation", ...props, children: children }));
+const SidebarItem = ({ className, icon, children, active, disabled, ref, ...props }) => (jsxRuntime.jsxRuntimeExports.jsxs("a", { ref: ref, className: sidebar_module.default['nav-item'], "data-active": active, "data-disabled": disabled, role: "menuitem", "aria-current": active ? "page" : undefined, "aria-disabled": disabled, ...props, children: [jsxRuntime.jsxRuntimeExports.jsx("span", { className: sidebar_module.default['nav-icon'], "aria-hidden": "true", children: icon }), jsxRuntime.jsxRuntimeExports.jsx("span", { className: sidebar_module.default['nav-text'], children: children })] }));
+const SidebarNavigationGroup = ({ className, name, icon, children, ref, ...props }) => (jsxRuntime.jsxRuntimeExports.jsxs("div", { ref: ref, role: "group", "aria-label": name, ...props, children: [jsxRuntime.jsxRuntimeExports.jsxs("div", { className: sidebar_module.default['nav-group-header'], children: [icon && jsxRuntime.jsxRuntimeExports.jsx("span", { className: sidebar_module.default['nav-icon'], children: icon }), jsxRuntime.jsxRuntimeExports.jsx("span", { className: sidebar_module.default['nav-group-name'], children: name })] }), jsxRuntime.jsxRuntimeExports.jsx("div", { className: sidebar_module.default['nav-group-items'], children: children })] }));
+SidebarRoot.displayName = "Sidebar.Root";
+SidebarHeader.displayName = "Sidebar.Header";
+SidebarMain.displayName = "Sidebar.Main";
+SidebarFooter.displayName = "Sidebar.Footer";
+SidebarItem.displayName = "Sidebar.Item";
+SidebarNavigationGroup.displayName = "Sidebar.Group";
+const Sidebar = {
+    Root: SidebarRoot,
+    Header: SidebarHeader,
+    Main: SidebarMain,
+    Footer: SidebarFooter,
+    Item: SidebarItem,
+    Group: SidebarNavigationGroup,
+};
+
+exports.Sidebar = Sidebar;
+//# sourceMappingURL=sidebar.cjs.map