@xola/ui-kit 3.4.6 → 3.6.0

package/build/components/Sidebar/Sidebar.js

@@ -1,219 +0,0 @@
-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 { Counter as I } from "../Counter.js";
-import { Drawer as k } from "../Drawer.js";
-import { SidebarAccount as P } from "./Sidebar.Account.js";
-import { SidebarButton as U } from "./Sidebar.Button.js";
-import { SidebarFooter as _ } from "./Sidebar.Footer.js";
-import { SidebarHeading as q } from "./Sidebar.Heading.js";
-import { SidebarLink as J, SidebarSeparator as Q } from "./Sidebar.Link.js";
-import { SidebarMenu as S } from "./Sidebar.Menu.js";
-import V from "./SidebarScroll.module.css.js";
-import { AnnounceIcon as Y } from "../../icons/src/AnnounceIcon.js";
-import { BellIcon as Z } from "../../icons/src/BellIcon.js";
-import { XolaLogoSimple as D } from "../../icons/src/images/XolaLogoSimple.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)
-}, v = {
-  MD: 768,
-  LG: 1024,
-  XL: 1280
-}, E = (r = typeof window > "u" ? 1280 : window.innerWidth) => r >= v.XL ? p.XL : r >= v.LG ? p.LG : r >= v.MD ? p.MD : p.SM, l = ({
-  logo: r,
-  footer: W,
-  notifications: z,
-  isFixed: g = !0,
-  isStickyHeader: a = !0,
-  isStickyFooter: y = !0,
-  isLeftDrawerOpen: F,
-  isRightDrawerOpen: H,
-  children: j,
-  className: X,
-  onLogoClick: w,
-  handleDrawerStateChange: o,
-  onSidebarResize: m
-}) => {
-  const [e, L] = x(() => {
-    if (typeof window < "u") {
-      const t = localStorage.getItem("sidebarWidth");
-      return t ? Number.parseInt(t, 10) : E(window.innerWidth);
-    }
-    return 200;
-  }), [A, N] = x(!1), [u, M] = x(!1), h = K(null), { announcements: c, notices: n } = z ?? {}, B = ((n == null ? void 0 : n.count) ?? 0) <= 0 || !n, R = a && y;
-  b(() => {
-    const t = () => {
-      const f = E(window.innerWidth);
-      L(f);
-    };
-    return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
-  }, [e]), b(() => {
-    const t = (T) => {
-      if (!u || !h.current) return;
-      const O = Math.min(Math.max(T.clientX, 64), 200);
-      L(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 G = (t) => {
-    t.preventDefault(), M(!0);
-  };
-  return /* @__PURE__ */ d(
-    "div",
-    {
-      ref: h,
-      className: s(
-        V,
-        "ui-sidebar",
-        g ? "fixed" : "relative",
-        "z-20 flex h-full flex-col overflow-x-hidden 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: G,
-            onMouseEnter: () => N(!0),
-            onMouseLeave: () => N(!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",
-              a && "sticky top-0 z-50 bg-black"
-            ),
-            children: [
-              c && /* @__PURE__ */ i("div", { className: s("cursor-pointer text-center", c.hide && "hidden"), children: /* @__PURE__ */ d(
-                I,
-                {
-                  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(Y, { className: s(e <= 168 && "hidden") }),
-                    c.count
-                  ]
-                }
-              ) }),
-              n && /* @__PURE__ */ i("div", { className: s("cursor-pointer text-center", B && "hidden"), children: /* @__PURE__ */ d(
-                I,
-                {
-                  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(Z, { 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", R && "overflow-y-auto overflow-x-hidden"), 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(
-            D,
-            {
-              className: s(
-                "inline-block h-12 w-12 ",
-                e > 160 && "h-30 w-30",
-                w !== void 0 && "cursor-pointer transition-opacity hover:opacity-80"
-              ),
-              onClick: w
-            }
-          ) }),
-          /* @__PURE__ */ i("div", { children: j })
-        ] }),
-        /* @__PURE__ */ i("div", { className: s(y && "sticky bottom-0 bg-black"), children: W })
-      ]
-    }
-  );
-};
-l.Account = P;
-l.Button = U;
-l.Footer = _;
-l.Link = J;
-l.Separator = Q;
-l.Menu = S;
-l.Heading = q;
-export {
-  l as Sidebar
-};

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

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

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

@@ -1,8 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

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

package/build/components/Spinner.d.ts

@@ -1,26 +0,0 @@
-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

@@ -1,27 +0,0 @@
-import { jsx as s } from "react/jsx-runtime";
-import c from "clsx";
-import { CircleNotch as i } from "../icons/src/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

@@ -1,59 +0,0 @@
-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

@@ -1,71 +0,0 @@
-import { jsx as a } from "react/jsx-runtime";
-import s from "clsx";
-import T, { 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 || !T.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);
-  }, R = (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: R,
-          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

@@ -1,9 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

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

package/build/components/Tag.d.ts

@@ -1,25 +0,0 @@
-import { default as React } from 'react';
-declare const colors: {
-    readonly primary: "bg-primary-lighter text-black border border-primary";
-    readonly secondary: "bg-secondary-light text-gray-darker border border-secondary";
-    readonly success: "bg-success-lighter text-black border border-success";
-    readonly warning: "bg-warning-lighter text-black border border-warning";
-    readonly danger: "bg-danger-lighter text-black border border-danger";
-    readonly caution: "bg-caution-lighter text-black border border-caution";
-};
-declare const sizes: {
-    readonly small: "px-1 py-0.75 text-sm leading-3.5";
-    readonly medium: "px-2 py-1 text-base leading-3.5";
-    readonly large: "px-2 py-1.5 text-base leading-4";
-};
-type TagColor = keyof typeof colors;
-type TagSize = keyof typeof sizes;
-export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
-    color?: TagColor;
-    size?: TagSize;
-    children: React.ReactNode;
-    className?: string;
-    onClose?: () => void;
-}
-export declare const Tag: ({ color, size, children, className, onClose, ...rest }: TagProps) => React.JSX.Element;
-export {};