@konstructio/ui 0.1.0-alpha.7 → 0.1.0-alpha.8

package/dist/components/index.js

@@ -3,76 +3,82 @@ import { AlertDialog as p } from "./AlertDialog/AlertDialog.js";
 import { Autocomplete as x } from "./Autocomplete/Autocomplete.js";
 import { Badge as a } from "./Badge/Badge.js";
 import { Breadcrumb as d } from "./Breadcrumb/Breadcrumb.js";
-import { Button as n } from "./Button/Button.js";
+import { Button as l } from "./Button/Button.js";
 import { Card as u } from "./Card/Card.js";
-import { Checkbox as c } from "./Checkbox/Checkbox.js";
-import { DatePicker as v } from "./Datepicker/DatePicker.js";
-import { Divider as R } from "./Divider/Divider.js";
-import { Dropdown as s } from "./Dropdown/Dropdown.js";
-import { Input as B } from "./Input/Input.js";
-import { Loading as D } from "./Loading/Loading.js";
-import { M as k } from "../Modal-CrG0m703.js";
-import { NumberInput as P } from "./NumberInput/NumberInput.js";
+import { Checkbox as T } from "./Checkbox/Checkbox.js";
+import { DatePicker as S } from "./Datepicker/DatePicker.js";
+import { Divider as v } from "./Divider/Divider.js";
+import { Dropdown as N } from "./Dropdown/Dropdown.js";
+import { Filter as s } from "./Filter/Filter.js";
+import { Input as C } from "./Input/Input.js";
+import { Loading as k } from "./Loading/Loading.js";
+import { M as F } from "../Modal-CrG0m703.js";
+import { NumberInput as M } from "./NumberInput/NumberInput.js";
 import { ProgressBar as y } from "./ProgressBar/ProgressBar.js";
 import { Radio as L } from "./Radio/Radio.js";
-import { RadioCard as F } from "./RadioCard/RadioCard.js";
-import { RadioCardGroup as j } from "./RadioCardGroup/RadioCardGroup.js";
-import { RadioGroup as z } from "./RadioGroup/RadioGroup.js";
-import { Range as H } from "./Range/Range.js";
-import { Sidebar as K } from "./Sidebar/Sidebar.js";
-import { Slider as U } from "./Slider/Slider.js";
-import { Switch as W } from "./Switch/Switch.js";
-import { Table as Y } from "./Table/Table.js";
-import { Tag as _ } from "./Tag/Tag.js";
-import { TagSelect as oo } from "./TagSelect/TagSelect.js";
-import { TextArea as eo } from "./TextArea/TextArea.js";
-import { TimePicker as po } from "./TimePicker/TimePicker.js";
-import { Toast as xo } from "./Toast/Toast.js";
-import { Tooltip as ao } from "./Tooltip/Tooltip.js";
-import { Typography as go } from "./Typography/Typography.js";
-import { Footer as lo } from "./Sidebar/components/Footer/Footer.js";
-import { Logo as To } from "./Sidebar/components/Logo/Logo.js";
-import { Navigation as bo } from "./Sidebar/components/Navigation/Navigation.js";
-import { NavigationGroup as No } from "./Sidebar/components/NavigationGroup/NavigationGroup.js";
-import { NavigationOption as So } from "./Sidebar/components/NavigationOption/NavigationOption.js";
-import { NavigationSeparator as Ao } from "./Sidebar/components/NavigationSeparator/NavigationSeparator.js";
+import { RadioCard as j } from "./RadioCard/RadioCard.js";
+import { RadioCardGroup as z } from "./RadioCardGroup/RadioCardGroup.js";
+import { RadioGroup as H } from "./RadioGroup/RadioGroup.js";
+import { Range as K } from "./Range/Range.js";
+import { Sidebar as U } from "./Sidebar/Sidebar.js";
+import { Slider as W } from "./Slider/Slider.js";
+import { Switch as Y } from "./Switch/Switch.js";
+import { Table as _ } from "./Table/Table.js";
+import { Tag as oo } from "./Tag/Tag.js";
+import { TagSelect as eo } from "./TagSelect/TagSelect.js";
+import { TextArea as po } from "./TextArea/TextArea.js";
+import { TimePicker as xo } from "./TimePicker/TimePicker.js";
+import { Toast as ao } from "./Toast/Toast.js";
+import { Tooltip as go } from "./Tooltip/Tooltip.js";
+import { Typography as no } from "./Typography/Typography.js";
+import { BadgeMultiSelect as co } from "./Filter/components/BadgeDropdown/BadgeMultiSelect.js";
+import { DateFilterDropdown as Do } from "./Filter/components/DateFilterDropdown/DateFilterDropdown.js";
+import { Footer as bo } from "./Sidebar/components/Footer/Footer.js";
+import { Logo as Bo } from "./Sidebar/components/Logo/Logo.js";
+import { Navigation as Ro } from "./Sidebar/components/Navigation/Navigation.js";
+import { NavigationGroup as Ao } from "./Sidebar/components/NavigationGroup/NavigationGroup.js";
+import { NavigationOption as ho } from "./Sidebar/components/NavigationOption/NavigationOption.js";
+import { NavigationSeparator as wo } from "./Sidebar/components/NavigationSeparator/NavigationSeparator.js";
 export {
   e as Alert,
   p as AlertDialog,
   x as Autocomplete,
   a as Badge,
+  co as BadgeMultiSelect,
   d as Breadcrumb,
-  n as Button,
+  l as Button,
   u as Card,
-  c as Checkbox,
-  v as DatePicker,
-  R as Divider,
-  s as Dropdown,
-  lo as Footer,
-  B as Input,
-  D as Loading,
-  To as Logo,
-  k as Modal,
-  bo as Navigation,
-  No as NavigationGroup,
-  So as NavigationOption,
-  Ao as NavigationSeparator,
-  P as NumberInput,
+  T as Checkbox,
+  Do as DateFilterDropdown,
+  S as DatePicker,
+  v as Divider,
+  N as Dropdown,
+  s as Filter,
+  bo as Footer,
+  C as Input,
+  k as Loading,
+  Bo as Logo,
+  F as Modal,
+  Ro as Navigation,
+  Ao as NavigationGroup,
+  ho as NavigationOption,
+  wo as NavigationSeparator,
+  M as NumberInput,
   y as ProgressBar,
   L as Radio,
-  F as RadioCard,
-  j as RadioCardGroup,
-  z as RadioGroup,
-  H as Range,
-  K as Sidebar,
-  U as Slider,
-  W as Switch,
-  Y as Table,
-  _ as Tag,
-  oo as TagSelect,
-  eo as TextArea,
-  po as TimePicker,
-  xo as Toast,
-  ao as Tooltip,
-  go as Typography
+  j as RadioCard,
+  z as RadioCardGroup,
+  H as RadioGroup,
+  K as Range,
+  U as Sidebar,
+  W as Slider,
+  Y as Switch,
+  _ as Table,
+  oo as Tag,
+  eo as TagSelect,
+  po as TextArea,
+  xo as TimePicker,
+  ao as Toast,
+  go as Tooltip,
+  no as Typography
 };

package/dist/{createLucideIcon-vyksFS6P.js → createLucideIcon-ByJ0JZvK.js}

@@ -1,6 +1,6 @@
 import { forwardRef as l, createElement as n } from "react";
 /**
-* @license lucide-react v0.511.0 - ISC
+* @license lucide-react v0.513.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
@@ -17,7 +17,7 @@ const w = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), h = (t)
       return !0;
 };
 /**
-* @license lucide-react v0.511.0 - ISC
+* @license lucide-react v0.513.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
@@ -34,7 +34,7 @@ var g = {
   strokeLinejoin: "round"
 };
 /**
-* @license lucide-react v0.511.0 - ISC
+* @license lucide-react v0.513.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
@@ -69,7 +69,7 @@ const A = l(
   )
 );
 /**
-* @license lucide-react v0.511.0 - ISC
+* @license lucide-react v0.513.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { AlertDialogProps as AlertDialogProps_2 } from '@radix-ui/react-alert-dialog';
 import { ButtonHTMLAttributes } from 'react';
+import { CheckboxProps as CheckboxProps_2 } from '@radix-ui/react-checkbox';
 import { ClassProp } from 'class-variance-authority/types';
 import { Context } from 'react';
 import { DayPickerProps } from 'react-day-picker';
@@ -68,6 +69,14 @@ declare const autocompleteVariants: (props?: ({
 
 export declare const Badge: FC<BadgeProps>;
 
+export declare const BadgeMultiSelect: FC<BadgeMultiSelectProps>;
+
+declare type BadgeMultiSelectProps = {
+    label: string;
+    options: Option_4[];
+    onApply?: (selectedOptions: Option_4[]) => void;
+};
+
 declare type BadgeProps = VariantProps<typeof badgeVariants> & {
     label: string;
     className?: string;
@@ -139,7 +148,7 @@ declare const cardVariants: (props?: ({
 
 export declare const Checkbox: FC<CheckboxProps>;
 
-declare interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked'>, VariantProps<typeof checkboxVariants> {
+declare interface CheckboxProps extends Omit<CheckboxProps_2, 'onChange'>, Omit<VariantProps<typeof checkboxVariants>, 'checked'> {
     ariaLabelledBy?: string;
     className?: string;
     defaultChecked?: boolean;
@@ -149,7 +158,7 @@ declare interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     labelClassName?: string;
     name?: string;
     theme?: Theme;
-    onChange?: () => void;
+    onChange?: (checked: boolean) => void;
 }
 
 declare const checkboxVariants: (props?: ({
@@ -157,10 +166,20 @@ declare const checkboxVariants: (props?: ({
     checked?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;
 
+export declare const DateFilterDropdown: FC<DateFilterDropdownProps>;
+
+declare type DateFilterDropdownProps = {
+    label: string;
+    onApply?: (date?: Date) => void;
+};
+
 export declare const DatePicker: FC<DatePickerProps>;
 
 declare type DatePickerProps = Omit<DayPickerProps, 'mode'> & VariantProps<typeof datePickerVariants> & {
+    arrowClassName?: string;
+    monthsClassName?: string;
     timeZone?: TimeZone;
+    defaultSelected?: Date;
     onSelect?: (date: Date) => void;
 };
 
@@ -188,10 +207,25 @@ declare interface DropdownProps extends VariantProps<typeof dropdownVariants>, O
 
 declare const dropdownVariants: (props?: ClassProp | undefined) => string;
 
-declare interface FilterProps extends React.InputHTMLAttributes<HTMLInputElement>, PropsWithChildren {
+export declare const Filter: FilterComponentProps;
+
+declare type FilterComponentProps = FC<FilterProps> & {
+    BadgeMultiSelect: FC<BadgeMultiSelectProps>;
+    DateFilterDropdown: FC<DateFilterDropdownProps>;
+    ResetButton: FC<ResetButtonProps>;
+};
+
+declare type FilterProps = VariantProps<typeof filterVariants> & PropsWithChildren & {
+    className?: string;
+    theme?: Theme;
+};
+
+declare interface FilterProps_2 extends React.InputHTMLAttributes<HTMLInputElement>, PropsWithChildren {
     placeholder?: string;
 }
 
+declare const filterVariants: (props?: ClassProp | undefined) => string;
+
 export declare const Footer: FC<FooterProps>;
 
 declare interface FooterProps extends PropsWithChildren, VariantProps<typeof footerVariants> {
@@ -359,6 +393,12 @@ declare type Option_3 = {
     value: string;
 };
 
+declare type Option_4 = {
+    id: string;
+    label: string;
+    variant?: BadgeProps['variant'];
+};
+
 export declare const ProgressBar: FC<ProgressBarProps>;
 
 declare interface ProgressBarProps extends VariantProps<typeof progressBarVariants> {
@@ -444,6 +484,10 @@ declare interface RangeProps extends VariantProps<typeof rangeVariants> {
 
 declare const rangeVariants: (props?: ClassProp | undefined) => string;
 
+declare type ResetButtonProps = {
+    disabled?: boolean;
+};
+
 declare interface RowProps extends React.HTMLAttributes<HTMLTableRowElement>, PropsWithChildren, VariantProps<typeof rowVariants> {
     width?: string;
     isSelected?: boolean;
@@ -515,7 +559,7 @@ declare const switchVariants: (props?: ClassProp | undefined) => string;
 export declare const Table: FC<TableProps> & {
     Head: FC<HeadProps>;
     Row: FC<RowProps>;
-    Filter: FC<FilterProps>;
+    Filter: FC<FilterProps_2>;
     Body: FC<BodyProps>;
 };
 

package/dist/index.js

@@ -3,84 +3,90 @@ import { AlertDialog as p } from "./components/AlertDialog/AlertDialog.js";
 import { Autocomplete as x } from "./components/Autocomplete/Autocomplete.js";
 import { Badge as a } from "./components/Badge/Badge.js";
 import { Breadcrumb as d } from "./components/Breadcrumb/Breadcrumb.js";
-import { Button as n } from "./components/Button/Button.js";
+import { Button as l } from "./components/Button/Button.js";
 import { Card as u } from "./components/Card/Card.js";
 import { Checkbox as c } from "./components/Checkbox/Checkbox.js";
 import { DatePicker as s } from "./components/Datepicker/DatePicker.js";
-import { Divider as b } from "./components/Divider/Divider.js";
-import { Dropdown as N } from "./components/Dropdown/Dropdown.js";
-import { Input as S } from "./components/Input/Input.js";
-import { Loading as B } from "./components/Loading/Loading.js";
-import { M as P } from "./Modal-CrG0m703.js";
-import { NumberInput as G } from "./components/NumberInput/NumberInput.js";
-import { ProgressBar as y } from "./components/ProgressBar/ProgressBar.js";
-import { Radio as L } from "./components/Radio/Radio.js";
-import { RadioCard as F } from "./components/RadioCard/RadioCard.js";
-import { RadioCardGroup as j } from "./components/RadioCardGroup/RadioCardGroup.js";
-import { RadioGroup as z } from "./components/RadioGroup/RadioGroup.js";
-import { Range as H } from "./components/Range/Range.js";
-import { Footer as K } from "./components/Sidebar/components/Footer/Footer.js";
-import { Logo as U } from "./components/Sidebar/components/Logo/Logo.js";
-import { Navigation as W } from "./components/Sidebar/components/Navigation/Navigation.js";
-import { NavigationGroup as Y } from "./components/Sidebar/components/NavigationGroup/NavigationGroup.js";
-import { NavigationOption as _ } from "./components/Sidebar/components/NavigationOption/NavigationOption.js";
-import { NavigationSeparator as oo } from "./components/Sidebar/components/NavigationSeparator/NavigationSeparator.js";
-import { Sidebar as eo } from "./components/Sidebar/Sidebar.js";
-import { Slider as po } from "./components/Slider/Slider.js";
-import { Switch as xo } from "./components/Switch/Switch.js";
-import { Table as ao } from "./components/Table/Table.js";
-import { Tag as go } from "./components/Tag/Tag.js";
-import { TagSelect as To } from "./components/TagSelect/TagSelect.js";
-import { TextArea as lo } from "./components/TextArea/TextArea.js";
-import { TimePicker as ho } from "./components/TimePicker/TimePicker.js";
-import { Toast as vo } from "./components/Toast/Toast.js";
-import { Tooltip as Co } from "./components/Tooltip/Tooltip.js";
-import { Typography as Ro } from "./components/Typography/Typography.js";
-import { ThemeContext as Ao } from "./contexts/theme.context.js";
-import { useTheme as Do } from "./contexts/theme.hook.js";
-import { ThemeProvider as ko } from "./contexts/theme.provider.js";
-import { useToggle as wo } from "./hooks/useToggle.js";
+import { Divider as D } from "./components/Divider/Divider.js";
+import { Dropdown as b } from "./components/Dropdown/Dropdown.js";
+import { Filter as C } from "./components/Filter/Filter.js";
+import { BadgeMultiSelect as R } from "./components/Filter/components/BadgeDropdown/BadgeMultiSelect.js";
+import { DateFilterDropdown as P } from "./components/Filter/components/DateFilterDropdown/DateFilterDropdown.js";
+import { Input as w } from "./components/Input/Input.js";
+import { Loading as G } from "./components/Loading/Loading.js";
+import { M as y } from "./Modal-CrG0m703.js";
+import { NumberInput as L } from "./components/NumberInput/NumberInput.js";
+import { ProgressBar as j } from "./components/ProgressBar/ProgressBar.js";
+import { Radio as z } from "./components/Radio/Radio.js";
+import { RadioCard as H } from "./components/RadioCard/RadioCard.js";
+import { RadioCardGroup as K } from "./components/RadioCardGroup/RadioCardGroup.js";
+import { RadioGroup as U } from "./components/RadioGroup/RadioGroup.js";
+import { Range as W } from "./components/Range/Range.js";
+import { Footer as Y } from "./components/Sidebar/components/Footer/Footer.js";
+import { Logo as _ } from "./components/Sidebar/components/Logo/Logo.js";
+import { Navigation as oo } from "./components/Sidebar/components/Navigation/Navigation.js";
+import { NavigationGroup as eo } from "./components/Sidebar/components/NavigationGroup/NavigationGroup.js";
+import { NavigationOption as po } from "./components/Sidebar/components/NavigationOption/NavigationOption.js";
+import { NavigationSeparator as xo } from "./components/Sidebar/components/NavigationSeparator/NavigationSeparator.js";
+import { Sidebar as ao } from "./components/Sidebar/Sidebar.js";
+import { Slider as go } from "./components/Slider/Slider.js";
+import { Switch as no } from "./components/Switch/Switch.js";
+import { Table as To } from "./components/Table/Table.js";
+import { Tag as ho } from "./components/Tag/Tag.js";
+import { TagSelect as vo } from "./components/TagSelect/TagSelect.js";
+import { TextArea as So } from "./components/TextArea/TextArea.js";
+import { TimePicker as Bo } from "./components/TimePicker/TimePicker.js";
+import { Toast as No } from "./components/Toast/Toast.js";
+import { Tooltip as Ao } from "./components/Tooltip/Tooltip.js";
+import { Typography as ko } from "./components/Typography/Typography.js";
+import { ThemeContext as Fo } from "./contexts/theme.context.js";
+import { useTheme as Mo } from "./contexts/theme.hook.js";
+import { ThemeProvider as Io } from "./contexts/theme.provider.js";
+import { useToggle as Oo } from "./hooks/useToggle.js";
 export {
   e as Alert,
   p as AlertDialog,
   x as Autocomplete,
   a as Badge,
+  R as BadgeMultiSelect,
   d as Breadcrumb,
-  n as Button,
+  l as Button,
   u as Card,
   c as Checkbox,
+  P as DateFilterDropdown,
   s as DatePicker,
-  b as Divider,
-  N as Dropdown,
-  K as Footer,
-  S as Input,
-  B as Loading,
-  U as Logo,
-  P as Modal,
-  W as Navigation,
-  Y as NavigationGroup,
-  _ as NavigationOption,
-  oo as NavigationSeparator,
-  G as NumberInput,
-  y as ProgressBar,
-  L as Radio,
-  F as RadioCard,
-  j as RadioCardGroup,
-  z as RadioGroup,
-  H as Range,
-  eo as Sidebar,
-  po as Slider,
-  xo as Switch,
-  ao as Table,
-  go as Tag,
-  To as TagSelect,
-  lo as TextArea,
-  Ao as ThemeContext,
-  ko as ThemeProvider,
-  ho as TimePicker,
-  vo as Toast,
-  Co as Tooltip,
-  Ro as Typography,
-  Do as useTheme,
-  wo as useToggle
+  D as Divider,
+  b as Dropdown,
+  C as Filter,
+  Y as Footer,
+  w as Input,
+  G as Loading,
+  _ as Logo,
+  y as Modal,
+  oo as Navigation,
+  eo as NavigationGroup,
+  po as NavigationOption,
+  xo as NavigationSeparator,
+  L as NumberInput,
+  j as ProgressBar,
+  z as Radio,
+  H as RadioCard,
+  K as RadioCardGroup,
+  U as RadioGroup,
+  W as Range,
+  ao as Sidebar,
+  go as Slider,
+  no as Switch,
+  To as Table,
+  ho as Tag,
+  vo as TagSelect,
+  So as TextArea,
+  Fo as ThemeContext,
+  Io as ThemeProvider,
+  Bo as TimePicker,
+  No as Toast,
+  Ao as Tooltip,
+  ko as Typography,
+  Mo as useTheme,
+  Oo as useToggle
 };

package/dist/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.0-alpha.6",
+  "version": "0.1.0-alpha.7",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",
@@ -69,7 +69,7 @@
     "cmdk": "^1.1.1",
     "countries-and-timezones": "^3.8.0",
     "js-cookie": "^3.0.5",
-    "lucide-react": "^0.511.0",
+    "lucide-react": "^0.513.0",
     "react-day-picker": "^9.7.0",
     "react-feather": "^2.0.10",
     "react-focus-lock": "^2.13.6",
@@ -117,11 +117,11 @@
     "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.17.17",
     "@types/react": "^19.1.6",
-    "@types/react-dom": "^19.1.5",
+    "@types/react-dom": "^19.1.6",
     "@typescript-eslint/eslint-plugin": "^8.33.1",
     "@typescript-eslint/parser": "^8.33.1",
-    "@vitejs/plugin-react": "^4.5.0",
-    "@vitest/coverage-v8": "^3.2.0",
+    "@vitejs/plugin-react": "^4.5.1",
+    "@vitest/coverage-v8": "^3.2.3",
     "autoprefixer": "^10.4.21",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
@@ -144,9 +144,9 @@
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.2.0"
+    "vitest": "^3.2.3"
   },
   "overrides": {
     "storybook": "$storybook"
   }
-}
+}