@konstructio/ui 0.1.0-alpha.11 → 0.1.0-alpha.13

package/dist/components/Tabs/Tabs.js

@@ -1,24 +1,27 @@
 import { jsx as e } from "react/jsx-runtime";
-import { R as s } from "../../index-CvfCCTEO.js";
-import { List as n } from "./components/List.js";
-import f from "./components/Trigger.js";
-import { Content as p } from "./components/Content.js";
-import { rootVariants as g } from "./Tabs.variants.js";
-import { cn as c } from "../../utils/index.js";
-const t = ({ children: o, theme: a, className: m, orientation: r, ...i }) => /* @__PURE__ */ e(
-  s,
+import { R as n } from "../../index-CvfCCTEO.js";
+import { cn as s } from "../../utils/index.js";
+import { rootVariants as p } from "./Tabs.variants.js";
+import { List as f } from "./components/List.js";
+import { Trigger as g } from "./components/Trigger.js";
+import { Content as c } from "./components/Content.js";
+const t = ({ children: o, theme: m, className: a, orientation: r, ...i }) => /* @__PURE__ */ e(
+  n,
   {
     ...i,
-    "data-theme": a,
+    "data-theme": m,
     "data-orientation": r,
     "aria-orientation": r,
-    className: c(g({ variant: r, className: m })),
+    className: s(p({ variant: r, className: a })),
     children: o
   }
 );
-t.List = n;
-t.Trigger = f;
-t.Content = p;
+t.List = f;
+t.Trigger = g;
+t.Content = c;
 export {
-  t as default
+  c as Content,
+  f as List,
+  t as Tabs,
+  g as Trigger
 };

package/dist/components/Tabs/components/Content.js

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
 import { C as m } from "../../../index-CvfCCTEO.js";
-import { contentVariants as a } from "../Tabs.variants.js";
-import { cn as e } from "../../../utils/index.js";
+import { cn as a } from "../../../utils/index.js";
+import { contentVariants as e } from "../Tabs.variants.js";
 const c = ({
   children: t,
   className: o,
@@ -10,7 +10,7 @@ const c = ({
   m,
   {
     ...r,
-    className: e(a({ variant: "default", className: o })),
+    className: a(e({ variant: "default", className: o })),
     children: t
   }
 );

package/dist/components/Tabs/components/List.js

@@ -1,16 +1,16 @@
 import { jsx as r } from "react/jsx-runtime";
 import { L as n } from "../../../index-CvfCCTEO.js";
-import { listVariants as t } from "../Tabs.variants.js";
-import { cn as a } from "../../../utils/index.js";
+import { cn as t } from "../../../utils/index.js";
+import { listVariants as a } from "../Tabs.variants.js";
 const p = ({
   children: i,
   className: s,
   orientation: m,
   ...o
-}) => /* @__PURE__ */ r("div", { className: a(t({ variant: "default" })), children: /* @__PURE__ */ r(
+}) => /* @__PURE__ */ r("div", { className: t(a({ variant: "default" })), children: /* @__PURE__ */ r(
   n,
   {
-    className: a(t({ variant: m, className: s })),
+    className: t(a({ variant: m, className: s })),
     ...o,
     children: i
   }

package/dist/components/Tabs/components/Trigger.js

@@ -1,26 +1,26 @@
 import { jsx as r } from "react/jsx-runtime";
-import { Typography as e } from "../../Typography/Typography.js";
-import { T as m } from "../../../index-CvfCCTEO.js";
+import { T as e } from "../../../index-CvfCCTEO.js";
+import { Typography as m } from "../../Typography/Typography.js";
 import { cn as n } from "../../../utils/index.js";
 import { triggerVariants as p } from "../Tabs.variants.js";
-const v = ({
+const l = ({
   tab: i,
-  label: a,
+  label: o,
   isActive: t,
-  className: o
-}) => /* @__PURE__ */ r(m, { value: i, children: /* @__PURE__ */ r(
-  e,
+  className: a
+}) => /* @__PURE__ */ r(e, { value: i, children: /* @__PURE__ */ r(
+  m,
   {
     variant: "body2",
     className: n(
       p({
         variant: t ? "active" : "inactive",
-        className: o
+        className: a
       })
     ),
-    children: a
+    children: o
   }
 ) });
 export {
-  v as default
+  l as Trigger
 };

package/dist/components/Tabs/components/index.js

@@ -0,0 +1,8 @@
+import { Content as t } from "./Content.js";
+import { List as f } from "./List.js";
+import { Trigger as p } from "./Trigger.js";
+export {
+  t as Content,
+  f as List,
+  p as Trigger
+};

package/dist/components/index.js

@@ -3,19 +3,19 @@ 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 l } from "./Button/Button.js";
+import { Button as n } from "./Button/Button.js";
 import { Card as u } from "./Card/Card.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 { Checkbox as c } from "./Checkbox/Checkbox.js";
+import { DatePicker as s } from "./Datepicker/DatePicker.js";
+import { Divider as S } from "./Divider/Divider.js";
+import { Dropdown as B } from "./Dropdown/Dropdown.js";
+import { Filter as N } from "./Filter/Filter.js";
+import { Input as A } 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 { NumberInput as L } from "./NumberInput/NumberInput.js";
+import { ProgressBar as P } from "./ProgressBar/ProgressBar.js";
+import { Radio as I } from "./Radio/Radio.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";
@@ -24,48 +24,54 @@ 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 { Tabs as oo } from "./Tabs/Tabs.js";
+import { Tag as eo } from "./Tag/Tag.js";
+import { TagSelect as po } from "./TagSelect/TagSelect.js";
+import { TextArea as xo } from "./TextArea/TextArea.js";
+import { TimePicker as ao } from "./TimePicker/TimePicker.js";
+import { Toast as go } from "./Toast/Toast.js";
+import { Tooltip as lo } from "./Tooltip/Tooltip.js";
+import { Typography as To } from "./Typography/Typography.js";
+import { BadgeMultiSelect as bo } 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 { Footer as vo } from "./Sidebar/components/Footer/Footer.js";
+import { Logo as Co } 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";
+import { NavigationGroup as ho } from "./Sidebar/components/NavigationGroup/NavigationGroup.js";
+import { NavigationOption as wo } from "./Sidebar/components/NavigationOption/NavigationOption.js";
+import { NavigationSeparator as Go } from "./Sidebar/components/NavigationSeparator/NavigationSeparator.js";
+import { List as Mo } from "./Tabs/components/List.js";
+import { Trigger as yo } from "./Tabs/components/Trigger.js";
+import { Content as Oo } from "./Tabs/components/Content.js";
 export {
   e as Alert,
   p as AlertDialog,
   x as Autocomplete,
   a as Badge,
-  co as BadgeMultiSelect,
+  bo as BadgeMultiSelect,
   d as Breadcrumb,
-  l as Button,
+  n as Button,
   u as Card,
-  T as Checkbox,
+  c as Checkbox,
+  Oo as Content,
   Do as DateFilterDropdown,
-  S as DatePicker,
-  v as Divider,
-  N as Dropdown,
-  s as Filter,
-  bo as Footer,
-  C as Input,
+  s as DatePicker,
+  S as Divider,
+  B as Dropdown,
+  N as Filter,
+  vo as Footer,
+  A as Input,
+  Mo as List,
   k as Loading,
-  Bo as Logo,
+  Co 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,
+  ho as NavigationGroup,
+  wo as NavigationOption,
+  Go as NavigationSeparator,
+  L as NumberInput,
+  P as ProgressBar,
+  I as Radio,
   j as RadioCard,
   z as RadioCardGroup,
   H as RadioGroup,
@@ -74,11 +80,13 @@ export {
   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
+  oo as Tabs,
+  eo as Tag,
+  po as TagSelect,
+  xo as TextArea,
+  ao as TimePicker,
+  go as Toast,
+  lo as Tooltip,
+  yo as Trigger,
+  To as Typography
 };

package/dist/index.d.ts

@@ -6,12 +6,15 @@ import { Context } from 'react';
 import { DayPickerProps } from 'react-day-picker';
 import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
+import { FunctionComponent } from 'react';
 import { getAllTimezones } from 'countries-and-timezones';
 import { HTMLAttributes } from 'react';
 import { HtmlHTMLAttributes } from 'react';
 import { InputHTMLAttributes } from 'react';
+import { JSX } from 'react/jsx-runtime';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
+import * as ReactTabs from '@radix-ui/react-tabs';
 import { RefAttributes } from 'react';
 import { SliderProps } from '@radix-ui/react-slider';
 import { VariantProps } from 'class-variance-authority';
@@ -167,6 +170,8 @@ declare const checkboxVariants: (props?: ({
     checked?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;
 
+export declare const Content: ({ children, className, ...rest }: ReactTabs.TabsContentProps) => JSX.Element;
+
 export declare const DateFilterDropdown: FC<DateFilterDropdownProps>;
 
 declare type DateFilterDropdownProps = {
@@ -259,6 +264,12 @@ declare const inputVariants: (props?: ({
     variant?: "error" | "default" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+export declare const List: FunctionComponent<ListProps>;
+
+declare interface ListProps extends React.HTMLAttributes<HTMLDivElement>, PropsWithChildren {
+    orientation: 'horizontal' | 'vertical';
+}
+
 export declare const Loading: FC<LoadingProps>;
 
 declare type LoadingProps = InputHTMLAttributes<SVGSVGElement> & VariantProps<typeof loadingVariants> & {
@@ -571,6 +582,16 @@ declare interface TableProps extends React.HTMLAttributes<HTMLTableElement>, Pro
 
 declare const tableVariants: (props?: ClassProp | undefined) => string;
 
+export declare const Tabs: FunctionComponent<TabsProps> & {
+    List: FunctionComponent<ListProps>;
+    Trigger: FunctionComponent<TriggerProps>;
+    Content: FunctionComponent<ReactTabs.TabsContentProps>;
+};
+
+declare interface TabsProps extends ReactTabs.TabsProps, PropsWithChildren {
+    theme?: Theme;
+}
+
 export declare const Tag: FC<TagProps>;
 
 declare type TagProps = {
@@ -680,6 +701,18 @@ declare const tooltipVariants: (props?: ({
     position?: "left" | "right" | "bottom" | "top" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+export declare const Trigger: FunctionComponent<TriggerProps>;
+
+declare interface TriggerProps extends VariantProps<typeof triggerVariants>, React.HTMLAttributes<HTMLDivElement> {
+    tab: string;
+    label: string;
+    isActive: boolean;
+}
+
+declare const triggerVariants: (props?: ({
+    variant?: "default" | "active" | "inactive" | null | undefined;
+} & ClassProp) | undefined) => string;
+
 export declare const Typography: FC<TypographyProps>;
 
 declare interface TypographyProps extends InputHTMLAttributes<HTMLParagraphElement>, VariantProps<typeof typographyVariants> {

package/dist/index.js

@@ -3,19 +3,19 @@ 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 l } from "./components/Button/Button.js";
-import { Card as u } from "./components/Card/Card.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 s } from "./components/Datepicker/DatePicker.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 { DatePicker as b } from "./components/Datepicker/DatePicker.js";
+import { Divider as v } from "./components/Divider/Divider.js";
+import { Dropdown as D } from "./components/Dropdown/Dropdown.js";
+import { Filter as B } 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 { M } from "./Modal-CrG0m703.js";
+import { NumberInput as I } 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";
@@ -30,19 +30,23 @@ import { NavigationOption as po } from "./components/Sidebar/components/Navigati
 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";
+import { Switch as lo } from "./components/Switch/Switch.js";
+import { Table as uo } from "./components/Table/Table.js";
+import { Tabs as so } from "./components/Tabs/Tabs.js";
+import { List as ho } from "./components/Tabs/components/List.js";
+import { Trigger as Co } from "./components/Tabs/components/Trigger.js";
+import { Content as So } from "./components/Tabs/components/Content.js";
+import { Tag as No } from "./components/Tag/Tag.js";
+import { TagSelect as Ao } from "./components/TagSelect/TagSelect.js";
+import { TextArea as ko } from "./components/TextArea/TextArea.js";
+import { TimePicker as Fo } from "./components/TimePicker/TimePicker.js";
+import { Toast as Lo } from "./components/Toast/Toast.js";
+import { Tooltip as yo } from "./components/Tooltip/Tooltip.js";
+import { Typography as Oo } from "./components/Typography/Typography.js";
+import { ThemeContext as qo } from "./contexts/theme.context.js";
+import { useTheme as Eo } from "./contexts/theme.hook.js";
+import { ThemeProvider as Jo } from "./contexts/theme.provider.js";
+import { useToggle as Qo } from "./hooks/useToggle.js";
 export {
   e as Alert,
   p as AlertDialog,
@@ -50,24 +54,26 @@ export {
   a as Badge,
   R as BadgeMultiSelect,
   d as Breadcrumb,
-  l as Button,
-  u as Card,
+  n as Button,
+  T as Card,
   c as Checkbox,
+  So as Content,
   P as DateFilterDropdown,
-  s as DatePicker,
-  D as Divider,
-  b as Dropdown,
-  C as Filter,
+  b as DatePicker,
+  v as Divider,
+  D as Dropdown,
+  B as Filter,
   Y as Footer,
   w as Input,
+  ho as List,
   G as Loading,
   _ as Logo,
-  y as Modal,
+  M as Modal,
   oo as Navigation,
   eo as NavigationGroup,
   po as NavigationOption,
   xo as NavigationSeparator,
-  L as NumberInput,
+  I as NumberInput,
   j as ProgressBar,
   z as Radio,
   H as RadioCard,
@@ -76,17 +82,19 @@ export {
   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
+  lo as Switch,
+  uo as Table,
+  so as Tabs,
+  No as Tag,
+  Ao as TagSelect,
+  ko as TextArea,
+  qo as ThemeContext,
+  Jo as ThemeProvider,
+  Fo as TimePicker,
+  Lo as Toast,
+  yo as Tooltip,
+  Co as Trigger,
+  Oo as Typography,
+  Eo as useTheme,
+  Qo 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.10",
+  "version": "0.1.0-alpha.12",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",

package/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.11",
+  "version": "0.1.0-alpha.13",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",