@xola/ui-kit 3.0.8 → 3.4.1

package/build/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,58 @@
+import { default as React } from 'react';
+interface NotificationDrawer {
+    count: number;
+    content: React.ReactNode;
+    title: string;
+    hide?: boolean;
+    onClose?: () => void;
+}
+export interface SidebarProps {
+    logo?: React.ReactElement;
+    footer: React.ReactElement;
+    notifications?: {
+        announcements?: NotificationDrawer;
+        notices?: NotificationDrawer;
+    };
+    isFixed?: boolean;
+    isStickyHeader?: boolean;
+    isStickyFooter?: boolean;
+    isLeftDrawerOpen?: boolean;
+    isRightDrawerOpen?: boolean;
+    children: React.ReactNode;
+    className?: string;
+    onLogoClick: () => void;
+    handleDrawerStateChange?: (drawer: "left" | "right") => void;
+    onSidebarResize?: (width: number) => void;
+}
+export declare const Sidebar: {
+    ({ logo, footer, notifications, isFixed, isStickyHeader, isStickyFooter, isLeftDrawerOpen, isRightDrawerOpen, children, className, onLogoClick, handleDrawerStateChange, onSidebarResize, }: SidebarProps): React.JSX.Element;
+    Account: {
+        ({ name, description, image, icon, isResponsive, className, ...rest }: import('./Sidebar.Account').SidebarAccountProps): React.JSX.Element;
+        displayName: string;
+    };
+    Button: {
+        ({ icon: Icon, label, className, ...rest }: import('./Sidebar.Button').SidebarButtonProps): React.JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ children, ...rest }: import('./Sidebar.Footer').SidebarFooterProps): React.JSX.Element;
+        displayName: string;
+    };
+    Link: {
+        ({ isActive, icon: Icon, isSubMenuItem, align, children, classNames, ...rest }: import('./Sidebar.Link').SidebarLinkProps): React.JSX.Element;
+        displayName: string;
+    };
+    Separator: {
+        ({ className }: import('./Sidebar.Link').SidebarSeparatorProps): React.JSX.Element;
+        displayName: string;
+    };
+    Menu: {
+        ({ content, children, ...rest }: import('./Sidebar.Menu').SidebarMenuProps): React.JSX.Element;
+        displayName: string;
+    };
+    Heading: {
+        ({ icon: Icon, label, className }: import('./Sidebar.Heading').SidebarHeadingProps): React.JSX.Element;
+        displayName: string;
+    };
+};
+export {};

package/build/components/Sidebar/Sidebar.js

@@ -0,0 +1,218 @@
+import { jsxs as d, jsx as i } from "react/jsx-runtime";
+import s from "clsx";
+import $, { useState as x, useRef as K, useEffect as b } from "react";
+import { AnnounceIcon as P } from "../../icons/build/AnnounceIcon.js";
+import { BellIcon as U } from "../../icons/build/BellIcon.js";
+import { XolaLogoSimple as _ } from "../../icons/build/images/XolaLogoSimple.js";
+import { Counter as h } from "../Counter.js";
+import { Drawer as k } from "../Drawer.js";
+import { SidebarAccount as q } from "./Sidebar.Account.js";
+import { SidebarButton as J } from "./Sidebar.Button.js";
+import { SidebarFooter as Q } from "./Sidebar.Footer.js";
+import { SidebarHeading as S } from "./Sidebar.Heading.js";
+import { SidebarLink as V, SidebarSeparator as Y } from "./Sidebar.Link.js";
+import { SidebarMenu as Z } from "./Sidebar.Menu.js";
+import D from "./SidebarScroll.module.css.js";
+const C = {
+  // From Figma
+  background: "linear-gradient(138.65deg, #583DFF 19.59%, #F849C7 62.96%, #FFC03D 97.07%)"
+}, p = {
+  SM: 64,
+  // Small (mobile)
+  MD: 134,
+  // Medium (tablet)
+  LG: 174,
+  // Large (small desktop)
+  XL: 200
+  // Extra large (desktop)
+}, a = {
+  MD: 768,
+  LG: 1024,
+  XL: 1280
+}, E = (r = typeof window > "u" ? 1280 : window.innerWidth) => r >= a.XL ? p.XL : r >= a.LG ? p.LG : r >= a.MD ? p.MD : p.SM, l = ({
+  logo: r,
+  footer: W,
+  notifications: z,
+  isFixed: g = !0,
+  isStickyHeader: v = !0,
+  isStickyFooter: y = !0,
+  isLeftDrawerOpen: F,
+  isRightDrawerOpen: H,
+  children: j,
+  className: X,
+  onLogoClick: L,
+  handleDrawerStateChange: o,
+  onSidebarResize: m
+}) => {
+  const [e, N] = x(() => {
+    if (typeof window < "u") {
+      const t = localStorage.getItem("sidebarWidth");
+      return t ? Number.parseInt(t, 10) : E(window.innerWidth);
+    }
+    return 200;
+  }), [A, w] = x(!1), [u, M] = x(!1), I = K(null), { announcements: c, notices: n } = z ?? {}, B = ((n == null ? void 0 : n.count) ?? 0) <= 0 || !n, G = v && y;
+  b(() => {
+    const t = () => {
+      const f = E(window.innerWidth);
+      N(f);
+    };
+    return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
+  }, [e]), b(() => {
+    const t = (T) => {
+      if (!u || !I.current) return;
+      const O = Math.min(Math.max(T.clientX, 64), 200);
+      N(O);
+    }, f = () => {
+      M(!1), document.body.style.cursor = "", document.body.style.userSelect = "";
+    };
+    return u && (document.addEventListener("mousemove", t), document.addEventListener("mouseup", f), document.body.style.cursor = "ew-resize", document.body.style.userSelect = "none"), () => {
+      document.removeEventListener("mousemove", t), document.removeEventListener("mouseup", f);
+    };
+  }, [u]), b(() => {
+    if (typeof window < "u" && e) {
+      const t = setTimeout(() => {
+        localStorage.setItem("sidebarWidth", e.toString()), m == null || m(e);
+      }, 500);
+      return () => clearTimeout(t);
+    }
+  }, [e, m]);
+  const R = (t) => {
+    t.preventDefault(), M(!0);
+  };
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      ref: I,
+      className: s(
+        D,
+        "ui-sidebar",
+        g ? "fixed" : "relative",
+        "z-20 flex h-full flex-col  border-r-4 border-black bg-black px-1 py-2 text-white transition-all duration-300",
+        (A || u) && "box-border !border-r-4 !border-yellow",
+        X
+      ),
+      style: { width: `${e}px` },
+      children: [
+        /* @__PURE__ */ i(
+          "div",
+          {
+            className: "absolute -right-3 bottom-0 top-0 z-10 w-4 cursor-ew-resize",
+            onMouseDown: R,
+            onMouseEnter: () => w(!0),
+            onMouseLeave: () => w(!1)
+          }
+        ),
+        c ?? n ? /* @__PURE__ */ d(
+          "div",
+          {
+            className: s(
+              "flex w-full gap-2 p-2",
+              e <= 78 && "flex-col",
+              e < 134 ? "justify-center" : "justify-between",
+              v && "sticky top-0 z-50 bg-black"
+            ),
+            children: [
+              c && /* @__PURE__ */ i("div", { className: s("cursor-pointer text-center", c.hide && "hidden"), children: /* @__PURE__ */ d(
+                h,
+                {
+                  style: {
+                    ...C,
+                    minWidth: e > 168 ? "48px" : "30px",
+                    width: e > 168 ? "48px" : "30px",
+                    minHeight: "20px",
+                    height: "20px",
+                    display: "inline-flex",
+                    justifyContent: "center",
+                    alignItems: "center"
+                  },
+                  onClick: () => o == null ? void 0 : o("left"),
+                  children: [
+                    /* @__PURE__ */ i(P, { className: s(e <= 168 && "hidden") }),
+                    c.count
+                  ]
+                }
+              ) }),
+              n && /* @__PURE__ */ i("div", { className: s("cursor-pointer text-center", B && "hidden"), children: /* @__PURE__ */ d(
+                h,
+                {
+                  className: "text-sm",
+                  style: {
+                    minWidth: e > 168 ? "48px" : "30px",
+                    width: e > 168 ? "48px" : "30px",
+                    minHeight: "20px",
+                    height: "20px",
+                    display: "inline-flex",
+                    justifyContent: "center",
+                    alignItems: "center"
+                  },
+                  onClick: () => o == null ? void 0 : o("right"),
+                  children: [
+                    /* @__PURE__ */ i(U, { className: s(e <= 168 && "hidden") }),
+                    n.count
+                  ]
+                }
+              ) })
+            ]
+          }
+        ) : null,
+        c && /* @__PURE__ */ i(
+          k,
+          {
+            classNames: { dialogContent: `left-[${e}px]` },
+            sideIndent: e,
+            position: "left",
+            size: "xl",
+            title: c.title,
+            content: c.content,
+            isOpen: F ?? !1,
+            onClose: (t) => !!t && (o == null ? void 0 : o("left"))
+          }
+        ),
+        n && /* @__PURE__ */ i(
+          k,
+          {
+            classNames: { dialogContent: `left-[${e}px]` },
+            position: "left",
+            sideIndent: e,
+            size: "xl",
+            title: n.title,
+            content: n.content,
+            isOpen: H ?? !1,
+            onClose: (t) => !!t && (o == null ? void 0 : o("right"))
+          }
+        ),
+        /* @__PURE__ */ d("div", { className: s("flex-grow space-y-2", G && "overflow-y-auto"), children: [
+          e > 60 && /* @__PURE__ */ i("div", { className: "text-center", children: r ? $.cloneElement(r, {
+            className: s(
+              "inline-block h-12 w-12",
+              e > 160 && "h-30 w-30",
+              r.props.className
+            )
+          }) : e > 90 && /* @__PURE__ */ i(
+            _,
+            {
+              className: s(
+                "inline-block h-12 w-12 ",
+                e > 160 && "h-30 w-30",
+                L !== void 0 && "cursor-pointer transition-opacity hover:opacity-80"
+              ),
+              onClick: L
+            }
+          ) }),
+          /* @__PURE__ */ i("div", { children: j })
+        ] }),
+        /* @__PURE__ */ i("div", { className: s(y && "sticky bottom-0 bg-black"), children: W })
+      ]
+    }
+  );
+};
+l.Account = q;
+l.Button = J;
+l.Footer = Q;
+l.Link = V;
+l.Separator = Y;
+l.Menu = Z;
+l.Heading = S;
+export {
+  l as Sidebar
+};

package/build/components/Sidebar/SidebarScroll.module.css.js

@@ -0,0 +1,4 @@
+const a = {};
+export {
+  a as default
+};

package/build/components/Sidebar/index.d.ts

@@ -0,0 +1,8 @@
+export { Sidebar } from './Sidebar';
+export type { SidebarProps } from './Sidebar';
+export type { SidebarAccountProps } from './Sidebar.Account';
+export type { SidebarButtonProps } from './Sidebar.Button';
+export type { SidebarFooterProps } from './Sidebar.Footer';
+export type { SidebarHeadingProps } from './Sidebar.Heading';
+export type { SidebarLinkProps, SidebarSeparatorProps } from './Sidebar.Link';
+export type { SidebarMenuProps } from './Sidebar.Menu';

package/build/components/Skeleton.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    style?: React.CSSProperties;
+    height?: number | string;
+    shouldAnimate?: boolean;
+    children?: React.ReactNode;
+    classNames?: {
+        container?: string;
+        shimmer?: string;
+        text?: string;
+    };
+}
+export declare const Skeleton: ({ style, height, shouldAnimate, children, classNames, ...rest }: SkeletonProps) => React.JSX.Element;

package/build/components/Skeleton.js

@@ -0,0 +1,29 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import r from "clsx";
+import d from "./Skeleton.module.css.js";
+const c = ({
+  style: l,
+  height: i = 300,
+  shouldAnimate: o = !0,
+  children: s,
+  classNames: e = {},
+  ...m
+}) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: r(
+      "ui-skeleton",
+      "relative flex items-center justify-center overflow-hidden rounded border border-gray-lighter bg-gray-lighter",
+      e.container
+    ),
+    style: { height: i, ...l },
+    ...m,
+    children: [
+      o ? /* @__PURE__ */ t("div", { className: r(d.shimmer, "absolute h-full w-full", e.shimmer) }) : null,
+      /* @__PURE__ */ t("div", { className: r("text-gray", e.text), children: s })
+    ]
+  }
+);
+export {
+  c as Skeleton
+};

package/build/components/Skeleton.module.css.js

@@ -0,0 +1,7 @@
+const s = "_shimmer_qt4e9_7", e = {
+  shimmer: s
+};
+export {
+  e as default,
+  s as shimmer
+};

package/build/components/Spinner.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+declare const colors: {
+    readonly primary: "text-primary";
+    readonly secondary: "text-secondary";
+    readonly warning: "text-warning";
+    readonly success: "text-success";
+    readonly danger: "text-danger";
+    readonly caution: "text-caution";
+    readonly current: null;
+};
+declare const sizes: {
+    readonly tiny: "w-4 h-4";
+    readonly small: "w-7 h-7";
+    readonly medium: "w-10 h-10";
+    readonly large: "w-14 h-14";
+    readonly current: "w-[1em] h-[1em]";
+};
+type SpinnerColor = keyof typeof colors;
+type SpinnerSize = keyof typeof sizes;
+export interface SpinnerProps extends React.SVGProps<SVGSVGElement> {
+    size?: SpinnerSize;
+    color?: SpinnerColor;
+    className?: string;
+}
+export declare const Spinner: ({ size, color, className, ...rest }: SpinnerProps) => React.JSX.Element;
+export {};

package/build/components/Spinner.js

@@ -0,0 +1,27 @@
+import { jsx as s } from "react/jsx-runtime";
+import c from "clsx";
+import { CircleNotch as i } from "../icons/build/CircleNotch.js";
+const o = {
+  primary: "text-primary",
+  secondary: "text-secondary",
+  warning: "text-warning",
+  success: "text-success",
+  danger: "text-danger",
+  caution: "text-caution",
+  current: null
+}, a = {
+  tiny: "w-4 h-4",
+  small: "w-7 h-7",
+  medium: "w-10 h-10",
+  large: "w-14 h-14",
+  current: "w-[1em] h-[1em]"
+}, p = ({ size: r = "small", color: e = "secondary", className: n, ...t }) => /* @__PURE__ */ s(
+  i,
+  {
+    className: c("ui-spinner", n, a[r], o[e], "inline-block animate-spin"),
+    ...t
+  }
+);
+export {
+  p as Spinner
+};

package/build/components/Table.d.ts

@@ -0,0 +1,59 @@
+import { default as React } from 'react';
+export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const Table: {
+    ({ className, ...rest }: TableProps): React.JSX.Element;
+    Head: {
+        ({ className, ...rest }: TableHeadProps): React.JSX.Element;
+        displayName: string;
+    };
+    Header: {
+        ({ className, ...rest }: TableHeaderProps): React.JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ isStriped, children, className, ...rest }: TableBodyProps): React.JSX.Element;
+        displayName: string;
+    };
+    Row: {
+        ({ isStriped, className, ...rest }: TableRowProps): React.JSX.Element;
+        displayName: string;
+    };
+    Cell: {
+        ({ className, ...rest }: TableCellProps): React.JSX.Element;
+        displayName: string;
+    };
+    EditableCell: {
+        ({ value, className, onSave, ...rest }: EditableCellProps): React.JSX.Element;
+        displayName: string;
+    };
+};
+export interface TableHeadProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    children?: React.ReactNode;
+    className?: string;
+}
+export interface TableHeaderProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+    children?: React.ReactNode;
+    className?: string;
+}
+export interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    isStriped?: boolean;
+    children: React.ReactNode;
+    className?: string;
+}
+export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    isStriped?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}
+export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    children?: React.ReactNode;
+    className?: string;
+}
+export interface EditableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    value: string;
+    className?: string;
+    onSave: (value: string) => void;
+}

package/build/components/Table.js

@@ -0,0 +1,71 @@
+import { jsx as a } from "react/jsx-runtime";
+import s from "clsx";
+import R, { Children as k, cloneElement as B, useState as u, useRef as h, useEffect as A } from "react";
+const n = ({ className: e, ...l }) => /* @__PURE__ */ a("div", { className: "ui-table flex flex-col", children: /* @__PURE__ */ a("div", { className: "-my-2 overflow-x-auto", children: /* @__PURE__ */ a("div", { className: "inline-block min-w-full py-2 align-middle", children: /* @__PURE__ */ a("div", { className: "overflow-hidden border-b border-gray-lighter sm:rounded-lg", children: /* @__PURE__ */ a("table", { className: s(e, "min-w-full divide-y border border-gray-lighter"), ...l }) }) }) }) }), g = ({ className: e, ...l }) => /* @__PURE__ */ a("thead", { className: s("ui-table-head", "bg-gray-lighter", e), ...l });
+g.displayName = "Table.Head";
+const f = ({ className: e, ...l }) => /* @__PURE__ */ a("th", { className: s("ui-table-header", "px-4 py-2 text-left text-base font-bold", e), ...l });
+f.displayName = "Table.Header";
+const y = ({ isStriped: e = !1, children: l, className: i, ...d }) => /* @__PURE__ */ a("tbody", { className: s("ui-table-body", "border-none", i), ...d, children: k.map(l, (t) => !t || !R.isValidElement(t) ? t : B(t, { isStriped: e })) });
+y.displayName = "Table.Body";
+const p = ({ isStriped: e = !1, className: l, ...i }) => /* @__PURE__ */ a("tr", { className: s("ui-table-row", e && "even:bg-gray-lighter", l), ...i });
+p.displayName = "Table.Row";
+const x = ({ className: e, ...l }) => /* @__PURE__ */ a(
+  "td",
+  {
+    className: s("ui-table-cell", "whitespace-nowrap px-4 py-2 text-base text-gray-darker", e),
+    ...l
+  }
+);
+x.displayName = "Table.Cell";
+const N = ({ value: e, className: l, onSave: i, ...d }) => {
+  const [t, b] = u(!1), [o, w] = u(e), c = h(null), m = h(null), [v, C] = u("auto"), H = async () => {
+    b(!1), o !== e && i(o);
+  }, E = () => {
+    t || b(!0);
+  }, T = (r) => {
+    w(r.target.value), r.target.style.height = "auto", r.target.style.height = `${r.target.scrollHeight}px`;
+  };
+  return A(() => {
+    if (t) {
+      requestAnimationFrame(() => {
+        var r;
+        (r = m.current) == null || r.focus();
+      });
+      return;
+    }
+    c.current && C(`${c.current.scrollHeight * 1.07}px`);
+  }, [t]), /* @__PURE__ */ a(
+    "td",
+    {
+      className: s(
+        "ui-table-cell",
+        "whitespace-nowrap px-4 py-2 text-base text-gray-darker",
+        { "bg-gray-hover": t },
+        l
+      ),
+      onClick: E,
+      ...d,
+      children: t ? /* @__PURE__ */ a(
+        "textarea",
+        {
+          ref: m,
+          value: o,
+          style: { height: v },
+          className: "h-auto w-full rounded border-none p-1 focus:outline-0 focus:!ring-gray-light",
+          onChange: T,
+          onBlur: H
+        }
+      ) : /* @__PURE__ */ a("div", { ref: c, className: "cursor-text whitespace-pre-wrap", children: o || /* @__PURE__ */ a("span", { className: "text-gray", children: "Not Available" }) })
+    }
+  );
+};
+N.displayName = "Table.EditableCell";
+n.Head = g;
+n.Header = f;
+n.Body = y;
+n.Row = p;
+n.Cell = x;
+n.EditableCell = N;
+export {
+  n as Table
+};

package/build/components/Tabs/Tabs.Panel.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export interface PanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const Panel: {
+    ({ className, ...rest }: PanelProps): React.JSX.Element;
+    displayName: string;
+};

package/build/components/Tabs/Tabs.Panel.js

@@ -0,0 +1,7 @@
+import { jsx as e } from "react/jsx-runtime";
+import r from "clsx";
+const l = ({ className: a, ...s }) => /* @__PURE__ */ e("div", { className: r("ui-tabs-panel", a), ...s });
+l.displayName = "Tabs.Panel";
+export {
+  l as Panel
+};

package/build/components/Tabs/Tabs.Tab.d.ts

@@ -0,0 +1,19 @@
+import { default as React, ElementType } from 'react';
+declare const variants: {
+    readonly default: (isActive: boolean) => string;
+    readonly simple: (isActive: boolean) => string;
+};
+type TabVariant = keyof typeof variants;
+export interface TabProps<T extends ElementType = "button"> {
+    as?: T;
+    variant?: TabVariant;
+    isActive?: boolean;
+    isHidden?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const Tab: {
+    <T extends ElementType = "button">({ variant, as, isActive, isHidden, className, ...rest }: TabProps<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof TabProps<T>>): React.JSX.Element | null;
+    displayName: string;
+};
+export {};

package/build/components/Tabs/Tabs.Tab.js

@@ -0,0 +1,37 @@
+import { jsx as i } from "react/jsx-runtime";
+import t from "clsx";
+const n = {
+  default: (r) => t(
+    "border-b border-gray-light",
+    r ? "text-primary border-l border-r border-b-transparent" : "hover:text-gray-darker"
+  ),
+  simple: (r) => t(
+    "flex-1 text-lg transition-colors",
+    r ? "bg-white text-black" : "text-gray-dark hover:text-black hover:bg-gray-light"
+  )
+}, c = ({
+  variant: r = "default",
+  as: e,
+  isActive: a = !1,
+  isHidden: o = !1,
+  className: s,
+  ...l
+}) => {
+  const b = e ?? "button";
+  return o ? null : /* @__PURE__ */ i(
+    b,
+    {
+      className: t(
+        "ui-tabs-tab",
+        s,
+        "cursor-pointer whitespace-nowrap px-8 py-4 text-center font-semibold focus-visible:ring",
+        n[r](a)
+      ),
+      ...l
+    }
+  );
+};
+c.displayName = "Tabs.Tab";
+export {
+  c as Tab
+};

package/build/components/Tabs/Tabs.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { PanelProps } from './Tabs.Panel';
+import { TabProps } from './Tabs.Tab';
+declare const variants: {
+    readonly default: "border-t border-gray-light";
+    readonly simple: "bg-gray-lighter";
+};
+type TabsVariant = keyof typeof variants;
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLElement>, "onChange"> {
+    variant?: TabsVariant;
+    value: number;
+    children: React.ReactNode;
+    className?: string;
+    onChange: (index: number) => void;
+}
+export declare const Tabs: {
+    ({ variant, value, children, className, onChange, ...rest }: TabsProps): React.JSX.Element;
+    Tab: {
+        <T extends React.ElementType = "button">({ variant, as, isActive, isHidden, className, ...rest }: TabProps<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof TabProps<T>>): React.JSX.Element | null;
+        displayName: string;
+    };
+    Panel: {
+        ({ className, ...rest }: PanelProps): React.JSX.Element;
+        displayName: string;
+    };
+};
+export {};

package/build/components/Tabs/Tabs.js

@@ -0,0 +1,28 @@
+import { jsxs as a, Fragment as y, jsx as n } from "react/jsx-runtime";
+import h from "clsx";
+import s, { Children as x, cloneElement as w } from "react";
+import { Panel as i } from "./Tabs.Panel.js";
+import { Tab as m } from "./Tabs.Tab.js";
+const A = {
+  default: "border-t border-gray-light",
+  simple: "bg-gray-lighter"
+}, d = ({ variant: e = "default", value: t, children: f, className: b, onChange: c, ...g }) => {
+  const l = x.toArray(f), p = l.filter((r) => s.isValidElement(r) && r.type === m), u = l.filter((r) => s.isValidElement(r) && r.type === i);
+  return /* @__PURE__ */ a(y, { children: [
+    /* @__PURE__ */ a("nav", { className: h("ui-tabs", "flex overflow-x-auto", A[e], b), ...g, children: [
+      e === "default" ? /* @__PURE__ */ n("div", { className: "min-w-10 flex-shrink-0 border-b border-gray-light" }) : null,
+      p.map((r, o) => w(r, {
+        variant: e,
+        isActive: o === t,
+        onClick: () => c(o)
+      })),
+      e === "default" ? /* @__PURE__ */ n("div", { className: "min-w-10 flex-grow border-b border-gray-light" }) : null
+    ] }),
+    u[t]
+  ] });
+};
+d.Tab = m;
+d.Panel = i;
+export {
+  d as Tabs
+};

package/build/components/Tabs/index.d.ts

@@ -0,0 +1,4 @@
+export { Tabs } from './Tabs';
+export type { TabsProps } from './Tabs';
+export type { TabProps } from './Tabs.Tab';
+export type { PanelProps } from './Tabs.Panel';