@konstructio/ui 0.1.0-alpha.19 → 0.1.0-alpha.20

package/dist/components/TimePicker/components/Wrapper/Wrapper.js

@@ -3,7 +3,7 @@ import { useId as y, useState as E, useRef as O, useCallback as I, useEffect as
 import { cn as d } from "../../../../utils/index.js";
 import { timePickerVariants as j } from "../../TimePicker.variants.js";
 import { WrapperList as P } from "../WrapperList/WrapperList.js";
-import { C as R } from "../../../../chevron-down-BsRShKTO.js";
+import { C as R } from "../../../../chevron-down-3QGcvbP_.js";
 import { useTimePickerContext as T } from "../../contexts/time-picker.hook.js";
 const $ = ({
   name: p,

package/dist/components/index.js

@@ -8,87 +8,89 @@ import { Card as u } from "./Card/Card.js";
 import { Checkbox as c } from "./Checkbox/Checkbox.js";
 import { DatePicker as b } from "./Datepicker/DatePicker.js";
 import { Divider as B } from "./Divider/Divider.js";
-import { Dropdown as v } from "./Dropdown/Dropdown.js";
+import { Dropdown as S } from "./Dropdown/Dropdown.js";
 import { DropdownButton as N } from "./DropdownButton/DropdownButton.js";
-import { Filter as w } from "./Filter/Filter.js";
-import { Input as h } from "./Input/Input.js";
-import { Loading as F } from "./Loading/Loading.js";
-import { M as L } from "../Modal-CrG0m703.js";
-import { NumberInput as P } from "./NumberInput/NumberInput.js";
-import { ProgressBar as I } from "./ProgressBar/ProgressBar.js";
-import { Radio as j } from "./Radio/Radio.js";
-import { RadioCard as z } from "./RadioCard/RadioCard.js";
-import { RadioCardGroup as H } from "./RadioCardGroup/RadioCardGroup.js";
-import { RadioGroup as K } from "./RadioGroup/RadioGroup.js";
-import { Range as U } from "./Range/Range.js";
-import { Sidebar as W } from "./Sidebar/Sidebar.js";
-import { Slider as Y } from "./Slider/Slider.js";
-import { Switch as _ } from "./Switch/Switch.js";
-import { Table as oo } from "./Table/Table.js";
-import { Tabs as eo } from "./Tabs/Tabs.js";
-import { Tag as po } from "./Tag/Tag.js";
-import { TagSelect as xo } from "./TagSelect/TagSelect.js";
-import { TextArea as ao } from "./TextArea/TextArea.js";
-import { TimePicker as go } from "./TimePicker/TimePicker.js";
-import { Toast as lo } from "./Toast/Toast.js";
-import { Tooltip as To } from "./Tooltip/Tooltip.js";
-import { Typography as Do } from "./Typography/Typography.js";
-import { BadgeMultiSelect as so } from "./Filter/components/BadgeDropdown/BadgeMultiSelect.js";
-import { DateFilterDropdown as So } from "./Filter/components/DateFilterDropdown/DateFilterDropdown.js";
-import { Footer as Co } from "./Sidebar/components/Footer/Footer.js";
-import { Logo as Ro } from "./Sidebar/components/Logo/Logo.js";
-import { Navigation as Ao } from "./Sidebar/components/Navigation/Navigation.js";
-import { NavigationGroup as ko } from "./Sidebar/components/NavigationGroup/NavigationGroup.js";
-import { NavigationOption as Go } from "./Sidebar/components/NavigationOption/NavigationOption.js";
-import { NavigationSeparator as Mo } from "./Sidebar/components/NavigationSeparator/NavigationSeparator.js";
-import { List as yo } from "./Tabs/components/List.js";
-import { Trigger as Oo } from "./Tabs/components/Trigger.js";
-import { Content as qo } from "./Tabs/components/Content.js";
+import { Filter as h } from "./Filter/Filter.js";
+import { Input as A } from "./Input/Input.js";
+import { Loading as k } from "./Loading/Loading.js";
+import { M as G } from "../Modal-CrG0m703.js";
+import { NumberInput as M } from "./NumberInput/NumberInput.js";
+import { PieChart as I } from "./PieChart/PieChart.js";
+import { ProgressBar as j } from "./ProgressBar/ProgressBar.js";
+import { Radio as z } from "./Radio/Radio.js";
+import { RadioCard as H } from "./RadioCard/RadioCard.js";
+import { RadioCardGroup as K } from "./RadioCardGroup/RadioCardGroup.js";
+import { RadioGroup as U } from "./RadioGroup/RadioGroup.js";
+import { Range as W } from "./Range/Range.js";
+import { Sidebar as Y } from "./Sidebar/Sidebar.js";
+import { Slider as _ } from "./Slider/Slider.js";
+import { Switch as oo } from "./Switch/Switch.js";
+import { Table as eo } from "./Table/Table.js";
+import { Tabs as po } from "./Tabs/Tabs.js";
+import { Tag as xo } from "./Tag/Tag.js";
+import { TagSelect as ao } from "./TagSelect/TagSelect.js";
+import { TextArea as go } from "./TextArea/TextArea.js";
+import { TimePicker as lo } from "./TimePicker/TimePicker.js";
+import { Toast as To } from "./Toast/Toast.js";
+import { Tooltip as Do } from "./Tooltip/Tooltip.js";
+import { Typography as so } from "./Typography/Typography.js";
+import { BadgeMultiSelect as Co } from "./Filter/components/BadgeDropdown/BadgeMultiSelect.js";
+import { DateFilterDropdown as vo } from "./Filter/components/DateFilterDropdown/DateFilterDropdown.js";
+import { Footer as Ro } from "./Sidebar/components/Footer/Footer.js";
+import { Logo as wo } from "./Sidebar/components/Logo/Logo.js";
+import { Navigation as Po } from "./Sidebar/components/Navigation/Navigation.js";
+import { NavigationGroup as Fo } from "./Sidebar/components/NavigationGroup/NavigationGroup.js";
+import { NavigationOption as Lo } from "./Sidebar/components/NavigationOption/NavigationOption.js";
+import { NavigationSeparator as yo } from "./Sidebar/components/NavigationSeparator/NavigationSeparator.js";
+import { List as Oo } from "./Tabs/components/List.js";
+import { Trigger as qo } from "./Tabs/components/Trigger.js";
+import { Content as Eo } from "./Tabs/components/Content.js";
 export {
   e as Alert,
   p as AlertDialog,
   x as Autocomplete,
   a as Badge,
-  so as BadgeMultiSelect,
+  Co as BadgeMultiSelect,
   d as Breadcrumb,
   n as Button,
   u as Card,
   c as Checkbox,
-  qo as Content,
-  So as DateFilterDropdown,
+  Eo as Content,
+  vo as DateFilterDropdown,
   b as DatePicker,
   B as Divider,
-  v as Dropdown,
+  S as Dropdown,
   N as DropdownButton,
-  w as Filter,
-  Co as Footer,
-  h as Input,
-  yo as List,
-  F as Loading,
-  Ro as Logo,
-  L as Modal,
-  Ao as Navigation,
-  ko as NavigationGroup,
-  Go as NavigationOption,
-  Mo as NavigationSeparator,
-  P as NumberInput,
-  I as ProgressBar,
-  j as Radio,
-  z as RadioCard,
-  H as RadioCardGroup,
-  K as RadioGroup,
-  U as Range,
-  W as Sidebar,
-  Y as Slider,
-  _ as Switch,
-  oo as Table,
-  eo as Tabs,
-  po as Tag,
-  xo as TagSelect,
-  ao as TextArea,
-  go as TimePicker,
-  lo as Toast,
-  To as Tooltip,
-  Oo as Trigger,
-  Do as Typography
+  h as Filter,
+  Ro as Footer,
+  A as Input,
+  Oo as List,
+  k as Loading,
+  wo as Logo,
+  G as Modal,
+  Po as Navigation,
+  Fo as NavigationGroup,
+  Lo as NavigationOption,
+  yo as NavigationSeparator,
+  M as NumberInput,
+  I as PieChart,
+  j as ProgressBar,
+  z as Radio,
+  H as RadioCard,
+  K as RadioCardGroup,
+  U as RadioGroup,
+  W as Range,
+  Y as Sidebar,
+  _ as Slider,
+  oo as Switch,
+  eo as Table,
+  po as Tabs,
+  xo as Tag,
+  ao as TagSelect,
+  go as TextArea,
+  lo as TimePicker,
+  To as Toast,
+  Do as Tooltip,
+  qo as Trigger,
+  so as Typography
 };

package/dist/{createLucideIcon-cbweG6TU.js → createLucideIcon-B7yPYScZ.js}

@@ -1,6 +1,6 @@
 import { forwardRef as l, createElement as n } from "react";
 /**
-* @license lucide-react v0.536.0 - ISC
+* @license lucide-react v0.539.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.536.0 - ISC
+* @license lucide-react v0.539.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.536.0 - ISC
+* @license lucide-react v0.539.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.536.0 - ISC
+* @license lucide-react v0.539.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

@@ -421,6 +421,8 @@ declare type Option_5 = {
     variant?: BadgeProps['variant'];
 };
 
+export declare const PieChart: FC<Props_2>;
+
 export declare const ProgressBar: FC<ProgressBarProps>;
 
 declare interface ProgressBarProps extends VariantProps<typeof progressBarVariants> {
@@ -441,6 +443,84 @@ declare type Props = {
     options: Option_4[];
 };
 
+/**
+ * Props for the PieChart component
+ */
+declare type Props_2 = {
+    /**
+     * Array of hexadecimal colors for the borders of the pie chart segments
+     * @default ['#FFFFFF', '#FFFFFF']
+     */
+    borderColors?: HexColor[];
+    /**
+     * Width of the border for pie chart segments in pixels
+     * @default 0
+     */
+    borderWidth?: number;
+    /**
+     * Array of hexadecimal colors for filling the pie chart segments
+     * @default ['#525252', '#00D492']
+     */
+    colors?: HexColor[];
+    /**
+     * Percentage of the pie chart's center that should be cut out, creating a donut chart effect
+     * @default 80
+     */
+    cutoutPercentage?: number;
+    /**
+     * Whether to redraw the entire chart when props change
+     * @default true
+     */
+    redraw?: boolean;
+    /**
+     * Hexadecimal color for the subtitle text
+     * @default '#6B7280'
+     */
+    subtitleColor?: HexColor;
+    /**
+     * Font size for the subtitle in pixels
+     * @default 14
+     */
+    subtitleFontSize?: number;
+    /**
+     * Font weight for the subtitle
+     * @default 'normal'
+     */
+    subtitleFontWeight?: 'bold' | 'normal';
+    /**
+     * Hexadecimal color for the title text
+     * @default '#111827'
+     */
+    titleColor?: HexColor;
+    /**
+     * Font size for the title in pixels
+     * @default 16
+     */
+    titleFontSize?: number;
+    /**
+     * Font weight for the title
+     * @default 'bold'
+     */
+    titleFontWeight?: 'bold' | 'normal';
+    /**
+     * Array of numeric values representing data for each segment of the pie chart
+     * @required
+     */
+    values: number[];
+} & 
+/**
+* Union type that enforces either:
+* - No title and no subtitle
+* - Title with optional subtitle
+*/
+({
+    title?: undefined;
+    subtitle?: never;
+} | {
+    title: string;
+    subtitle?: string;
+});
+
 export declare const Radio: FC<RadioProps>;
 
 export declare const RadioCard: FC<RadioCardProps>;

package/dist/index.js

@@ -6,97 +6,99 @@ import { Breadcrumb as d } from "./components/Breadcrumb/Breadcrumb.js";
 import { Button as n } from "./components/Button/Button.js";
 import { Card as T } from "./components/Card/Card.js";
 import { Checkbox as c } from "./components/Checkbox/Checkbox.js";
-import { DatePicker as D } from "./components/Datepicker/DatePicker.js";
-import { Divider as h } from "./components/Divider/Divider.js";
-import { Dropdown as B } from "./components/Dropdown/Dropdown.js";
+import { DatePicker as h } from "./components/Datepicker/DatePicker.js";
+import { Divider as D } from "./components/Divider/Divider.js";
+import { Dropdown as v } from "./components/Dropdown/Dropdown.js";
 import { DropdownButton as S } from "./components/DropdownButton/DropdownButton.js";
-import { Filter as R } from "./components/Filter/Filter.js";
-import { BadgeMultiSelect as A } from "./components/Filter/components/BadgeDropdown/BadgeMultiSelect.js";
+import { Filter as P } from "./components/Filter/Filter.js";
+import { BadgeMultiSelect as w } from "./components/Filter/components/BadgeDropdown/BadgeMultiSelect.js";
 import { DateFilterDropdown as k } from "./components/Filter/components/DateFilterDropdown/DateFilterDropdown.js";
 import { Input as G } from "./components/Input/Input.js";
 import { Loading as M } from "./components/Loading/Loading.js";
 import { M as I } from "./Modal-CrG0m703.js";
 import { NumberInput as j } from "./components/NumberInput/NumberInput.js";
-import { ProgressBar as z } from "./components/ProgressBar/ProgressBar.js";
-import { Radio as H } from "./components/Radio/Radio.js";
-import { RadioCard as K } from "./components/RadioCard/RadioCard.js";
-import { RadioCardGroup as U } from "./components/RadioCardGroup/RadioCardGroup.js";
-import { RadioGroup as W } from "./components/RadioGroup/RadioGroup.js";
-import { Range as Y } from "./components/Range/Range.js";
-import { Footer as _ } from "./components/Sidebar/components/Footer/Footer.js";
-import { Logo as oo } from "./components/Sidebar/components/Logo/Logo.js";
-import { Navigation as eo } from "./components/Sidebar/components/Navigation/Navigation.js";
-import { NavigationGroup as po } from "./components/Sidebar/components/NavigationGroup/NavigationGroup.js";
-import { NavigationOption as xo } from "./components/Sidebar/components/NavigationOption/NavigationOption.js";
-import { NavigationSeparator as ao } from "./components/Sidebar/components/NavigationSeparator/NavigationSeparator.js";
-import { Sidebar as go } from "./components/Sidebar/Sidebar.js";
-import { Slider as lo } from "./components/Slider/Slider.js";
-import { Switch as uo } from "./components/Switch/Switch.js";
-import { Table as so } from "./components/Table/Table.js";
+import { PieChart as z } from "./components/PieChart/PieChart.js";
+import { ProgressBar as H } from "./components/ProgressBar/ProgressBar.js";
+import { Radio as K } from "./components/Radio/Radio.js";
+import { RadioCard as U } from "./components/RadioCard/RadioCard.js";
+import { RadioCardGroup as W } from "./components/RadioCardGroup/RadioCardGroup.js";
+import { RadioGroup as Y } from "./components/RadioGroup/RadioGroup.js";
+import { Range as _ } from "./components/Range/Range.js";
+import { Footer as oo } from "./components/Sidebar/components/Footer/Footer.js";
+import { Logo as eo } from "./components/Sidebar/components/Logo/Logo.js";
+import { Navigation as po } from "./components/Sidebar/components/Navigation/Navigation.js";
+import { NavigationGroup as xo } from "./components/Sidebar/components/NavigationGroup/NavigationGroup.js";
+import { NavigationOption as ao } from "./components/Sidebar/components/NavigationOption/NavigationOption.js";
+import { NavigationSeparator as go } from "./components/Sidebar/components/NavigationSeparator/NavigationSeparator.js";
+import { Sidebar as lo } from "./components/Sidebar/Sidebar.js";
+import { Slider as uo } from "./components/Slider/Slider.js";
+import { Switch as so } from "./components/Switch/Switch.js";
+import { Table as Co } from "./components/Table/Table.js";
 import { Tabs as bo } from "./components/Tabs/Tabs.js";
-import { List as vo } from "./components/Tabs/components/List.js";
-import { Trigger as Co } from "./components/Tabs/components/Trigger.js";
-import { Content as No } from "./components/Tabs/components/Content.js";
-import { Tag as wo } from "./components/Tag/Tag.js";
-import { TagSelect as Po } from "./components/TagSelect/TagSelect.js";
-import { TextArea as Fo } from "./components/TextArea/TextArea.js";
-import { TimePicker as Lo } from "./components/TimePicker/TimePicker.js";
-import { Toast as yo } from "./components/Toast/Toast.js";
-import { Tooltip as Oo } from "./components/Tooltip/Tooltip.js";
-import { Typography as qo } from "./components/Typography/Typography.js";
-import { ThemeContext as Eo } from "./contexts/theme.context.js";
-import { useTheme as Jo } from "./contexts/theme.hook.js";
-import { ThemeProvider as Qo } from "./contexts/theme.provider.js";
-import { useToggle as Vo } from "./hooks/useToggle.js";
+import { List as Bo } from "./components/Tabs/components/List.js";
+import { Trigger as No } from "./components/Tabs/components/Trigger.js";
+import { Content as Ro } from "./components/Tabs/components/Content.js";
+import { Tag as Ao } from "./components/Tag/Tag.js";
+import { TagSelect as Fo } from "./components/TagSelect/TagSelect.js";
+import { TextArea as Lo } from "./components/TextArea/TextArea.js";
+import { TimePicker as yo } from "./components/TimePicker/TimePicker.js";
+import { Toast as Oo } from "./components/Toast/Toast.js";
+import { Tooltip as qo } from "./components/Tooltip/Tooltip.js";
+import { Typography as Eo } from "./components/Typography/Typography.js";
+import { ThemeContext as Jo } from "./contexts/theme.context.js";
+import { useTheme as Qo } from "./contexts/theme.hook.js";
+import { ThemeProvider as Vo } from "./contexts/theme.provider.js";
+import { useToggle as Xo } from "./hooks/useToggle.js";
 export {
   e as Alert,
   p as AlertDialog,
   x as Autocomplete,
   a as Badge,
-  A as BadgeMultiSelect,
+  w as BadgeMultiSelect,
   d as Breadcrumb,
   n as Button,
   T as Card,
   c as Checkbox,
-  No as Content,
+  Ro as Content,
   k as DateFilterDropdown,
-  D as DatePicker,
-  h as Divider,
-  B as Dropdown,
+  h as DatePicker,
+  D as Divider,
+  v as Dropdown,
   S as DropdownButton,
-  R as Filter,
-  _ as Footer,
+  P as Filter,
+  oo as Footer,
   G as Input,
-  vo as List,
+  Bo as List,
   M as Loading,
-  oo as Logo,
+  eo as Logo,
   I as Modal,
-  eo as Navigation,
-  po as NavigationGroup,
-  xo as NavigationOption,
-  ao as NavigationSeparator,
+  po as Navigation,
+  xo as NavigationGroup,
+  ao as NavigationOption,
+  go as NavigationSeparator,
   j as NumberInput,
-  z as ProgressBar,
-  H as Radio,
-  K as RadioCard,
-  U as RadioCardGroup,
-  W as RadioGroup,
-  Y as Range,
-  go as Sidebar,
-  lo as Slider,
-  uo as Switch,
-  so as Table,
+  z as PieChart,
+  H as ProgressBar,
+  K as Radio,
+  U as RadioCard,
+  W as RadioCardGroup,
+  Y as RadioGroup,
+  _ as Range,
+  lo as Sidebar,
+  uo as Slider,
+  so as Switch,
+  Co as Table,
   bo as Tabs,
-  wo as Tag,
-  Po as TagSelect,
-  Fo as TextArea,
-  Eo as ThemeContext,
-  Qo as ThemeProvider,
-  Lo as TimePicker,
-  yo as Toast,
-  Oo as Tooltip,
-  Co as Trigger,
-  qo as Typography,
-  Jo as useTheme,
-  Vo as useToggle
+  Ao as Tag,
+  Fo as TagSelect,
+  Lo as TextArea,
+  Jo as ThemeContext,
+  Vo as ThemeProvider,
+  yo as TimePicker,
+  Oo as Toast,
+  qo as Tooltip,
+  No as Trigger,
+  Eo as Typography,
+  Qo as useTheme,
+  Xo 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.18",
+  "version": "0.1.0-alpha.19",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",
@@ -64,12 +64,14 @@
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-toast": "^1.2.14",
     "@radix-ui/react-visually-hidden": "^1.2.3",
+    "chart.js": "^4.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "countries-and-timezones": "^3.8.0",
     "js-cookie": "^3.0.5",
-    "lucide-react": "^0.536.0",
+    "lucide-react": "^0.539.0",
+    "react-chartjs-2": "^5.3.0",
     "react-day-picker": "^9.8.1",
     "react-feather": "^2.0.10",
     "react-focus-lock": "^2.13.6",
@@ -106,9 +108,9 @@
   },
   "devDependencies": {
     "@rollup/plugin-alias": "^5.1.1",
-    "@storybook/addon-docs": "^9.1.1",
-    "@storybook/addon-links": "^9.1.1",
-    "@storybook/react-vite": "^9.1.1",
+    "@storybook/addon-docs": "^9.1.2",
+    "@storybook/addon-links": "^9.1.2",
+    "@storybook/react-vite": "^9.1.2",
     "@tailwindcss/vite": "^4.1.11",
     "@testing-library/jest-dom": "^6.6.4",
     "@testing-library/react": "^16.3.0",
@@ -116,17 +118,17 @@
     "@types/jest-axe": "^3.5.9",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.17.20",
-    "@types/react": "^19.1.9",
+    "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
-    "@typescript-eslint/eslint-plugin": "^8.38.0",
-    "@typescript-eslint/parser": "^8.38.0",
+    "@typescript-eslint/eslint-plugin": "^8.39.1",
+    "@typescript-eslint/parser": "^8.39.1",
     "@vitejs/plugin-react": "^4.7.0",
     "@vitest/coverage-v8": "^3.2.4",
     "autoprefixer": "^10.4.21",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
-    "eslint-plugin-storybook": "^9.1.1",
+    "eslint-plugin-storybook": "^9.1.2",
     "glob": "^11.0.3",
     "husky": "^9.1.7",
     "jest-axe": "^10.0.0",
@@ -135,10 +137,10 @@
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "rimraf": "^6.0.1",
-    "storybook": "^9.1.1",
+    "storybook": "^9.1.2",
     "tailwindcss": "^4.1.11",
     "ts-node": "^10.9.2",
-    "typescript": "^5.8.3",
+    "typescript": "^5.9.2",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",