@konstructio/ui 0.1.0-alpha.2 → 0.1.0-alpha.4

package/dist/index.d.ts

@@ -1,8 +1,11 @@
+import { AlertDialogProps as AlertDialogProps_2 } from '@radix-ui/react-alert-dialog';
 import { ButtonHTMLAttributes } from 'react';
 import { ClassProp } from 'class-variance-authority/types';
 import { Context } from 'react';
+import { DayPickerProps } from 'react-day-picker';
 import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
+import { getAllTimezones } from 'countries-and-timezones';
 import { HTMLAttributes } from 'react';
 import { HtmlHTMLAttributes } from 'react';
 import { InputHTMLAttributes } from 'react';
@@ -16,17 +19,17 @@ export declare const Alert: FC<AlertProps>;
 
 export declare const AlertDialog: FC<AlertDialogProps>;
 
-declare interface AlertDialogProps extends PropsWithChildren {
-    buttonCancelClassName?: string;
-    buttonCancelText?: string;
-    buttonConfirmClassName?: string;
-    buttonConfirmText?: string;
-    buttonText?: string;
+declare interface AlertDialogProps extends PropsWithChildren, AlertDialogProps_2 {
+    buttonCancel?: ButtonCancelProps;
+    buttonConfirm?: ButtonConfirmProps;
+    buttonTriggerText?: string;
     buttonTriggerClassName?: string;
     className?: string;
-    description?: string;
+    description?: string | ReactNode;
+    showCancelButton?: boolean;
     theme?: Theme;
-    title?: string;
+    title?: string | ReactNode;
+    wrapperClassName?: string;
     onConfirm?: () => void;
 }
 
@@ -63,6 +66,22 @@ declare const autocompleteVariants: (props?: ({
     variant?: "default" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+export declare const Badge: FC<BadgeProps>;
+
+declare type BadgeProps = VariantProps<typeof badgeVariants> & {
+    label: string;
+    className?: string;
+    loading?: boolean;
+    dismissible?: true;
+    onClick?: VoidFunction;
+    onDismiss?: VoidFunction;
+};
+
+declare const badgeVariants: (props?: ({
+    variant?: "info" | "warning" | "danger" | "default" | "success" | null | undefined;
+    size?: "default" | null | undefined;
+} & ClassProp) | undefined) => string;
+
 declare interface BodyProps extends React.HTMLAttributes<HTMLTableSectionElement>, PropsWithChildren, VariantProps<typeof bodyVariants> {
 }
 
@@ -76,12 +95,19 @@ declare interface BreadcrumbProps extends VariantProps<typeof breadcrumbVariants
     theme?: Theme;
 }
 
-declare const breadcrumbVariants: (props?: ({
-    size?: "base" | "sm" | "lg" | "xl" | null | undefined;
-} & ClassProp) | undefined) => string;
+declare const breadcrumbVariants: (props?: ClassProp | undefined) => string;
 
 export declare const Button: FC<ButtonProps>;
 
+declare type ButtonBaseProps = Partial<ButtonProps> & {
+    className?: string;
+    text?: string;
+};
+
+declare type ButtonCancelProps = ButtonBaseProps;
+
+declare type ButtonConfirmProps = ButtonBaseProps;
+
 declare interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
     disabled?: boolean;
@@ -89,10 +115,12 @@ declare interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElemen
 }
 
 declare const buttonVariants: (props?: ({
-    variant?: "danger" | "circle" | "text" | "primary" | "secondary" | null | undefined;
+    variant?: "danger" | "text" | "primary" | "secondary" | null | undefined;
+    shape?: "circle" | null | undefined;
     version?: "default" | "alternate" | null | undefined;
     disabled?: boolean | null | undefined;
     size?: "medium" | "large" | null | undefined;
+    appearance?: "compact" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare const Card: FC<CardProps>;
@@ -129,14 +157,26 @@ declare const checkboxVariants: (props?: ({
     checked?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;
 
+export declare const DatePicker: FC<DatePickerProps>;
+
+declare type DatePickerProps = Omit<DayPickerProps, 'mode'> & VariantProps<typeof datePickerVariants> & {
+    timeZone?: TimeZone;
+    onSelect?: (date: Date) => void;
+};
+
+declare const datePickerVariants: (props?: ClassProp | undefined) => string;
+
 export declare const Divider: FC<HTMLAttributes<HTMLDivElement>>;
 
 export declare const Dropdown: FC<DropdownProps>;
 
 declare interface DropdownProps extends VariantProps<typeof dropdownVariants>, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+    className?: string;
     isLoading?: boolean;
     label?: string;
     labelClassName?: string;
+    listClassName?: string;
+    listItemClassName?: string;
     options: Option_3[];
     theme?: Theme;
     value?: string;
@@ -171,6 +211,9 @@ declare interface InputProps extends InputHTMLAttributes<HTMLInputElement>, Vari
     label?: string | ReactNode;
     labelClassName?: string;
     theme?: Theme;
+    isRequired?: boolean;
+    isSearch?: boolean;
+    helperText?: string;
 }
 
 declare const inputVariants: (props?: ({
@@ -538,6 +581,25 @@ declare type ThemeProps = {
 
 export declare const ThemeProvider: FC<ThemeContextProps>;
 
+export declare const TimePicker: FC<TimePickerProps>;
+
+declare type TimePickerProps = VariantProps<typeof timePickerVariants> & {
+    format?: '12' | '24';
+    scrollBehavior?: 'smooth' | 'auto';
+    time?: Date;
+    name?: string;
+    label?: string;
+    required?: boolean;
+    className?: string;
+    listClassName?: string;
+    listItemClassName?: string;
+    listItemButtonClassName?: string;
+};
+
+declare const timePickerVariants: (props?: ClassProp | undefined) => string;
+
+declare type TimeZone = keyof ReturnType<typeof getAllTimezones>;
+
 export declare const Toast: FC<ToastProps>;
 
 declare interface ToastProps extends PropsWithChildren, VariantProps<typeof toastVariants> {
@@ -566,7 +628,7 @@ declare interface TooltipProps extends PropsWithChildren, VariantProps<typeof to
 }
 
 declare const tooltipVariants: (props?: ({
-    position?: "left" | "right" | "top" | "bottom" | null | undefined;
+    position?: "left" | "right" | "bottom" | "top" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare const Typography: FC<TypographyProps>;

package/dist/index.js

@@ -1,80 +1,86 @@
 import { Alert as e } from "./components/Alert/Alert.js";
 import { AlertDialog as p } from "./components/AlertDialog/AlertDialog.js";
 import { Autocomplete as x } from "./components/Autocomplete/Autocomplete.js";
-import { Breadcrumb as a } from "./components/Breadcrumb/Breadcrumb.js";
-import { Button as d } from "./components/Button/Button.js";
-import { Card as n } from "./components/Card/Card.js";
-import { Checkbox as T } from "./components/Checkbox/Checkbox.js";
-import { Dropdown as h } from "./components/Dropdown/Dropdown.js";
-import { Input as v } from "./components/Input/Input.js";
-import { M as c } from "./Modal-i7eolhYH.js";
-import { NumberInput as N } from "./components/NumberInput/NumberInput.js";
-import { ProgressBar as S } from "./components/ProgressBar/ProgressBar.js";
-import { Radio as B } from "./components/Radio/Radio.js";
-import { RadioCard as G } from "./components/RadioCard/RadioCard.js";
-import { RadioCardGroup as y } from "./components/RadioCardGroup/RadioCardGroup.js";
-import { RadioGroup as L } from "./components/RadioGroup/RadioGroup.js";
-import { Range as P } from "./components/Range/Range.js";
-import { Footer as F } from "./components/Sidebar/components/Footer/Footer.js";
-import { Logo as j } from "./components/Sidebar/components/Logo/Logo.js";
-import { Navigation as z } from "./components/Sidebar/components/Navigation/Navigation.js";
-import { NavigationGroup as H } from "./components/Sidebar/components/NavigationGroup/NavigationGroup.js";
-import { NavigationOption as K } from "./components/Sidebar/components/NavigationOption/NavigationOption.js";
-import { NavigationSeparator as U } from "./components/Sidebar/components/NavigationSeparator/NavigationSeparator.js";
-import { Sidebar as W } from "./components/Sidebar/Sidebar.js";
-import { Slider as Y } from "./components/Slider/Slider.js";
-import { Switch as _ } from "./components/Switch/Switch.js";
-import { Tag as oo } from "./components/Tag/Tag.js";
-import { TagSelect as eo } from "./components/TagSelect/TagSelect.js";
-import { TextArea as po } from "./components/TextArea/TextArea.js";
-import { Toast as xo } from "./components/Toast/Toast.js";
-import { Tooltip as ao } from "./components/Tooltip/Tooltip.js";
-import { Loading as go } from "./components/Loading/Loading.js";
-import { Typography as uo } from "./components/Typography/Typography.js";
-import { Divider as lo } from "./components/Divider/Divider.js";
-import { Table as so } from "./components/Table/Table.js";
-import { ThemeContext as bo } from "./contexts/theme.context.js";
-import { useTheme as Co } from "./contexts/theme.hook.js";
-import { ThemeProvider as Ro } from "./contexts/theme.provider.js";
-import { useToggle as Ao } from "./hooks/useToggle.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 { 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-DXYBiafI.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";
 export {
   e as Alert,
   p as AlertDialog,
   x as Autocomplete,
-  a as Breadcrumb,
-  d as Button,
-  n as Card,
-  T as Checkbox,
-  lo as Divider,
-  h as Dropdown,
-  F as Footer,
-  v as Input,
-  go as Loading,
-  j as Logo,
-  c as Modal,
-  z as Navigation,
-  H as NavigationGroup,
-  K as NavigationOption,
-  U as NavigationSeparator,
-  N as NumberInput,
-  S as ProgressBar,
-  B as Radio,
-  G as RadioCard,
-  y as RadioCardGroup,
-  L as RadioGroup,
-  P as Range,
-  W as Sidebar,
-  Y as Slider,
-  _ as Switch,
-  so as Table,
-  oo as Tag,
-  eo as TagSelect,
-  po as TextArea,
-  bo as ThemeContext,
-  Ro as ThemeProvider,
-  xo as Toast,
-  ao as Tooltip,
-  uo as Typography,
-  Co as useTheme,
-  Ao as useToggle
+  a as Badge,
+  d as Breadcrumb,
+  n as Button,
+  u as Card,
+  c as Checkbox,
+  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
 };

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.0.13-alpha.2",
+  "version": "0.1.0-alpha.3",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",
@@ -55,23 +55,26 @@
     "test:watch": "vitest dev"
   },
   "dependencies": {
-    "@radix-ui/react-alert-dialog": "^1.1.7",
-    "@radix-ui/react-checkbox": "^1.1.5",
-    "@radix-ui/react-dialog": "^1.1.7",
-    "@radix-ui/react-slider": "^1.2.4",
-    "@radix-ui/react-slot": "^1.2.0",
-    "@radix-ui/react-switch": "^1.1.4",
-    "@radix-ui/react-toast": "^1.2.7",
-    "@radix-ui/react-visually-hidden": "^1.1.3",
+    "@radix-ui/react-alert-dialog": "^1.1.14",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-slider": "^1.3.5",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.5",
+    "@radix-ui/react-toast": "^1.2.14",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-visually-hidden": "^1.2.3",
     "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.488.0",
+    "lucide-react": "^0.511.0",
+    "react-day-picker": "^9.7.0",
     "react-feather": "^2.0.10",
     "react-focus-lock": "^2.13.6",
-    "react-remove-scroll": "^2.6.3",
-    "tailwind-merge": "^3.2.0"
+    "react-remove-scroll": "^2.7.0",
+    "tailwind-merge": "^3.3.0"
   },
   "peerDependencies": {
     "@types/react": "*",
@@ -103,34 +106,34 @@
   },
   "devDependencies": {
     "@rollup/plugin-alias": "^5.1.1",
-    "@storybook/addon-docs": "^8.6.12",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-interactions": "^8.6.12",
-    "@storybook/addon-links": "^8.6.12",
+    "@storybook/addon-docs": "^8.6.14",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-links": "^8.6.14",
     "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/react-vite": "^8.6.12",
-    "@storybook/test": "^8.6.12",
-    "@tailwindcss/vite": "^4.1.4",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-vite": "^8.6.14",
+    "@storybook/test": "^8.6.14",
+    "@tailwindcss/vite": "^4.1.7",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest-axe": "^3.5.9",
     "@types/js-cookie": "^3.0.6",
-    "@types/lodash": "^4.17.16",
-    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.2",
-    "@typescript-eslint/eslint-plugin": "^8.29.1",
-    "@typescript-eslint/parser": "^8.29.1",
-    "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "^3.1.1",
+    "@types/lodash": "^4.17.17",
+    "@types/react": "^19.1.5",
+    "@types/react-dom": "^19.1.5",
+    "@typescript-eslint/eslint-plugin": "^8.32.1",
+    "@typescript-eslint/parser": "^8.32.1",
+    "@vitejs/plugin-react": "^4.4.1",
+    "@vitest/coverage-v8": "^3.1.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": "^0.9.0",
-    "glob": "^11.0.1",
+    "glob": "^11.0.2",
     "husky": "^9.1.7",
     "jest-axe": "^10.0.0",
     "jsdom": "^26.1.0",
@@ -138,15 +141,15 @@
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
     "rimraf": "^6.0.1",
-    "storybook": "^8.6.12",
-    "tailwindcss": "^4.1.4",
+    "storybook": "^8.6.14",
+    "tailwindcss": "^4.1.7",
     "ts-node": "^10.9.2",
     "typescript": "^5.8.3",
-    "vite": "^6.2.6",
-    "vite-plugin-dts": "^4.5.3",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.1.1"
+    "vitest": "^3.1.4"
   }
 }