@pibit.ai/cure-design-system 0.6.13 → 0.6.15

package/dist/patterns/expandable-drawer/expandable-drawer.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+export type ExpandableRightDrawerState = "hidden" | "normal" | "expanded";
+export interface ExpandableRightDrawerProps {
+    /** Current state: hidden (no space), normal (sidebar width), expanded (wide). */
+    state: ExpandableRightDrawerState;
+    onClose: () => void;
+    /** Optional custom header. When not provided, default header with title/subtitle and actions is used. */
+    header?: React.ReactNode;
+    /** Used by default header. */
+    title?: string;
+    /** Used by default header. */
+    subtitle?: string;
+    /** Content; only rendered when state is not "hidden" (lazy). */
+    children: React.ReactNode;
+    /** Width in pixels for normal state. Default 512 (32rem). */
+    normalWidth?: number;
+    /** Width when expanded. Default `calc(100vw - 140px)`. */
+    maxWidth?: string;
+    /** Controlled drawer width. When provided, it is used for the normal state. */
+    width?: number | string;
+    /** Minimum drawer width while visible. */
+    minWidth?: number;
+    /** Maximum width allowed while dragging. */
+    maxResizableWidth?: number;
+    /** Called while the user drags the drawer resize handle. */
+    onWidthChange?: (width: number) => void;
+    /** Callback when expand/collapse is toggled. When provided, default header shows expand/minimize button. */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Extra actions rendered in the default header before expand/close controls. */
+    headerActions?: React.ReactNode;
+    className?: string;
+    headerClassName?: string;
+    bodyClassName?: string;
+}
+export declare const ExpandableRightDrawer: React.FC<ExpandableRightDrawerProps>;
+//# sourceMappingURL=expandable-drawer.d.ts.map

package/dist/patterns/expandable-drawer/expandable-drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expandable-drawer.d.ts","sourceRoot":"","sources":["../../../src/patterns/expandable-drawer/expandable-drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAQlE,MAAM,MAAM,0BAA0B,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC;AAM1E,MAAM,WAAW,0BAA0B;IACzC,iFAAiF;IACjF,KAAK,EAAE,0BAA0B,CAAC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,yGAAyG;IACzG,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gEAAgE;IAChE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4DAA4D;IAC5D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,4GAA4G;IAC5G,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,iFAAiF;IACjF,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAsKtE,CAAC"}

package/dist/patterns/expandable-drawer/expandable-drawer.js

@@ -0,0 +1,120 @@
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import { Minimize01 as H, Expand01 as K, X as F } from "@untitledui/icons";
+import { useState as U, useId as Y, useRef as G, useEffect as J } from "react";
+import { motion as Q } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
+const Z = 512, W = "calc(100vw - 140px)", C = { type: "tween", duration: 0.3, ease: "easeInOut" }, se = ({
+  state: o,
+  onClose: h,
+  header: n,
+  title: I = "",
+  subtitle: y,
+  children: z,
+  normalWidth: g = Z,
+  maxWidth: D = W,
+  width: k,
+  minWidth: a = 480,
+  maxResizableWidth: R,
+  onWidthChange: r,
+  onExpandedChange: c,
+  headerActions: M,
+  className: P = "",
+  headerClassName: S = "",
+  bodyClassName: E = ""
+}) => {
+  const [v, V] = U(!1), u = o !== "hidden";
+  u && !v && V(!0);
+  const w = c !== void 0, m = o === "expanded", l = o === "hidden" ? 0 : o === "expanded" ? D : k ?? g, f = Math.max(R ?? Number.POSITIVE_INFINITY, a), b = o === "normal" && u && typeof l == "number" && r !== void 0, p = (e) => Math.min(Math.max(e, a), f), L = Y(), s = G(null);
+  J(() => () => {
+    var e;
+    return (e = s.current) == null ? void 0 : e.call(s);
+  }, []);
+  const T = (e) => {
+    if (!b || typeof l != "number") return;
+    e.preventDefault(), e.stopPropagation();
+    const d = e.clientX, $ = l, O = document.body.style.cursor, q = document.body.style.userSelect;
+    document.body.style.cursor = "col-resize", document.body.style.userSelect = "none";
+    const N = (B) => {
+      r == null || r(p($ + d - B.clientX));
+    }, x = () => {
+      document.body.style.cursor = O, document.body.style.userSelect = q, window.removeEventListener("pointermove", N), window.removeEventListener("pointerup", x), s.current = null;
+    };
+    s.current = x, window.addEventListener("pointermove", N), window.addEventListener("pointerup", x);
+  }, X = (e) => {
+    if (!b || typeof l != "number") return;
+    const d = e.shiftKey ? 50 : 16;
+    e.key === "ArrowLeft" && (e.preventDefault(), r == null || r(p(l + d))), e.key === "ArrowRight" && (e.preventDefault(), r == null || r(p(l - d)));
+  }, _ = {
+    backgroundImage: "linear-gradient(90deg, rgba(6, 132, 240, 0.1) 0%, rgba(6, 132, 240, 0.1) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0) 60.66%, rgba(255, 255, 255, 0.5) 100%), linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%)"
+  }, j = `flex items-center justify-between pl-6 pr-2 border-b border-secondary gap-2 py-4 ${S}`, A = `flex min-h-0 flex-1 flex-col overflow-y-auto pb-3 ${E} ${n ? "" : "px-5"}`;
+  return /* @__PURE__ */ t(
+    Q.div,
+    {
+      className: `relative flex flex-col flex-shrink-0 overflow-hidden min-w-0 h-[calc(98vh-85px)] z-1000 ${P}`,
+      initial: !1,
+      animate: {
+        width: l,
+        minWidth: o === "hidden" ? 0 : a || void 0
+      },
+      transition: C,
+      children: u && /* @__PURE__ */ i(
+        "div",
+        {
+          className: "h-full w-full min-w-0 flex flex-col rounded-2xl border-l border-t border-b border-white backdrop-blur-[3px] p-2",
+          style: _,
+          children: [
+            b && /* @__PURE__ */ t(
+              "div",
+              {
+                role: "separator",
+                "aria-label": "Resize drawer",
+                "aria-orientation": "vertical",
+                "aria-valuemin": a,
+                "aria-valuemax": Number.isFinite(f) ? f : void 0,
+                "aria-valuenow": typeof l == "number" ? Math.round(l) : void 0,
+                tabIndex: 0,
+                onPointerDown: T,
+                onKeyDown: X,
+                className: "absolute left-0 top-0 z-10 h-full w-2 -translate-x-1 cursor-col-resize touch-none focus-visible:outline-none"
+              }
+            ),
+            /* @__PURE__ */ i("div", { className: "h-full w-full bg-white rounded-lg overflow-hidden flex flex-col min-w-0", children: [
+              n ?? /* @__PURE__ */ i("header", { className: j, children: [
+                /* @__PURE__ */ i("div", { className: `flex-1 flex flex-col gap-0 min-w-0 ${w ? "pr-2" : "pr-16"}`, children: [
+                  /* @__PURE__ */ t("h2", { id: L, className: "text-lg font-semibold leading-7 text-[#06060a] truncate", children: I }),
+                  y && /* @__PURE__ */ t("p", { className: "text-sm text-secondary truncate", children: y })
+                ] }),
+                /* @__PURE__ */ i("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
+                  M,
+                  w && /* @__PURE__ */ t(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => c == null ? void 0 : c(!m),
+                      className: "flex items-center justify-center p-2 rounded-lg hover:bg-primary_hover transition-colors cursor-pointer",
+                      "aria-label": m ? "Collapse sidebar" : "Expand sidebar",
+                      children: m ? /* @__PURE__ */ t(H, { size: 20, className: "text-fg-quaternary", strokeWidth: 1.67 }) : /* @__PURE__ */ t(K, { size: 20, className: "text-fg-quaternary", strokeWidth: 1.67 })
+                    }
+                  ),
+                  /* @__PURE__ */ t(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: h,
+                      className: "flex items-center justify-center p-2 rounded-lg hover:bg-primary_hover transition-colors cursor-pointer",
+                      "aria-label": "Close",
+                      children: /* @__PURE__ */ t(F, { size: 20, className: "text-fg-quaternary", strokeWidth: 1.67 })
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ t("main", { className: A, children: v ? z : null })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  se as ExpandableRightDrawer
+};

package/dist/patterns/expandable-drawer/index.d.ts

@@ -0,0 +1,2 @@
+export { ExpandableRightDrawer, type ExpandableRightDrawerProps, type ExpandableRightDrawerState, } from './expandable-drawer';
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/expandable-drawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/expandable-drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,EAC/B,KAAK,0BAA0B,GAChC,MAAM,qBAAqB,CAAC"}

package/dist/patterns/tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { Tabs, TabList, Tab, TabPanel, type TabListComponentProps, type TabComponentProps } from './tabs';
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,qBAAqB,EAAE,KAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC"}

package/dist/patterns/tabs/tabs.d.ts

@@ -0,0 +1,42 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { TabListProps as AriaTabListProps, TabProps as AriaTabProps, TabRenderProps as AriaTabRenderProps, TabPanel as AriaTabPanel, Tabs as AriaTabs } from 'react-aria-components';
+type Orientation = "horizontal" | "vertical";
+type HorizontalTypes = "button-brand" | "button-gray" | "button-border" | "button-minimal" | "underline" | "button-curved";
+type VerticalTypes = "button-brand" | "button-gray" | "button-border" | "button-minimal" | "line";
+type TabTypeColors<T> = T extends "horizontal" ? HorizontalTypes : VerticalTypes;
+declare const sizes: Record<"xs" | "sm" | "md", Partial<Record<HorizontalTypes | VerticalTypes, string>>>;
+export interface TabListComponentProps<T extends object, K extends Orientation> extends AriaTabListProps<T> {
+    /** The size of the tab list. */
+    size?: keyof typeof sizes;
+    /** The type of the tab list. */
+    type?: TabTypeColors<K>;
+    /** The orientation of the tab list. */
+    orientation?: K;
+    /** The items of the tab list. */
+    items: T[];
+    /** Whether the tab list is full width. */
+    fullWidth?: boolean;
+}
+export declare const TabList: <T extends Orientation>({ size, type, orientation: orientationProp, fullWidth, className, children, items, ...otherProps }: TabListComponentProps<TabComponentProps, T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TabPanel: (props: ComponentPropsWithRef<typeof AriaTabPanel>) => import("react/jsx-runtime").JSX.Element;
+export interface TabComponentProps extends AriaTabProps {
+    /** The label of the tab. */
+    label?: ReactNode;
+    /** The children of the tab. */
+    children?: ReactNode | ((props: AriaTabRenderProps) => ReactNode);
+    /** The badge displayed next to the label. */
+    badge?: number | string;
+    /** The badge displayed before the label. */
+    leadingBadge?: number | string;
+    /** The class name for the badge. */
+    badgeClassName?: string;
+}
+export declare const Tab: (props: TabComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: {
+    ({ className, ...props }: ComponentPropsWithRef<typeof AriaTabs>): import("react/jsx-runtime").JSX.Element;
+    Panel: (props: ComponentPropsWithRef<typeof AriaTabPanel>) => import("react/jsx-runtime").JSX.Element;
+    List: <T extends Orientation>({ size, type, orientation: orientationProp, fullWidth, className, children, items, ...otherProps }: TabListComponentProps<TabComponentProps, T>) => import("react/jsx-runtime").JSX.Element;
+    Item: (props: TabComponentProps) => import("react/jsx-runtime").JSX.Element;
+};
+export {};
+//# sourceMappingURL=tabs.d.ts.map

package/dist/patterns/tabs/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/patterns/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EACV,YAAY,IAAI,gBAAgB,EAChC,QAAQ,IAAI,YAAY,EACxB,cAAc,IAAI,kBAAkB,EACrC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAGL,QAAQ,IAAI,YAAY,EACxB,IAAI,IAAI,QAAQ,EAGjB,MAAM,uBAAuB,CAAC;AAY/B,KAAK,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AAG7C,KAAK,eAAe,GAChB,cAAc,GACd,aAAa,GACb,eAAe,GACf,gBAAgB,GAChB,WAAW,GACX,eAAe,CAAC;AACpB,KAAK,aAAa,GAAG,cAAc,GAAG,aAAa,GAAG,eAAe,GAAG,gBAAgB,GAAG,MAAM,CAAC;AAClG,KAAK,aAAa,CAAC,CAAC,IAAI,CAAC,SAAS,YAAY,GAAG,eAAe,GAAG,aAAa,CAAC;AAsDjF,QAAA,MAAM,KAAK,EAAE,MAAM,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,GAAG,aAAa,EAAE,MAAM,CAAC,CAAC,CA2B/F,CAAC;AA0CF,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,WAAW,CAAE,SAAQ,gBAAgB,CAAC,CAAC,CAAC;IACzG,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IAC1B,gCAAgC;IAChC,IAAI,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACxB,uCAAuC;IACvC,WAAW,CAAC,EAAE,CAAC,CAAC;IAChB,iCAAiC;IACjC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAYD,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,WAAW,EAAE,oGAS5C,qBAAqB,CAAC,iBAAiB,EAAE,CAAC,CAAC,4CAoC7C,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,OAAO,qBAAqB,CAAC,OAAO,YAAY,CAAC,4CAYzE,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,YAAY;IACrD,4BAA4B;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,kBAAkB,KAAK,SAAS,CAAC,CAAC;IAClE,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,oCAAoC;IACpC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,GAAG,GAAI,OAAO,iBAAiB,4CA8C3C,CAAC;AAEF,eAAO,MAAM,IAAI;8BAA6B,qBAAqB,CAAC,OAAO,QAAQ,CAAC;mBA3EpD,qBAAqB,CAAC,OAAO,YAAY,CAAC;WA/ClD,CAAC,SAAS,WAAW,sGAS1C,qBAAqB,CAAC,iBAAiB,EAAE,CAAC,CAAC;kBAiEnB,iBAAiB;CAgE3C,CAAC"}

package/dist/patterns/tabs/tabs.js

@@ -0,0 +1,217 @@
+import { jsx as b, jsxs as h } from "react/jsx-runtime";
+import { createContext as _, useContext as v, Fragment as T } from "react";
+import { Tabs as w, useSlottedContext as z, TabsContext as N, TabList as C, Tab as B, TabPanel as L } from "react-aria-components";
+import { cx as e } from "../../utils/cn.js";
+import { Badge as p } from "../../primitives/badge/badge.js";
+const P = ({ isFocusVisible: t, isSelected: n, isHovered: o, isDisabled: a }) => ({
+  "button-brand": e(
+    "outline-focus-ring",
+    t && "outline-2 -outline-offset-2",
+    n && "bg-brand-primary_alt text-[var(--color-brand-600)]",
+    o && "text-[var(--color-brand-600)]"
+  ),
+  "button-gray": e(
+    "outline-focus-ring",
+    o && "bg-primary_hover text-secondary",
+    t && "outline-2 -outline-offset-2",
+    n && "bg-active text-secondary"
+  ),
+  "button-border": e(
+    "outline-focus-ring",
+    (n || o) && "bg-primary_alt text-secondary shadow-sm",
+    t && "outline-2 -outline-offset-2"
+  ),
+  "button-minimal": e(
+    "rounded-lg outline-focus-ring",
+    o && "text-secondary",
+    t && "outline-2 -outline-offset-2",
+    n && "bg-primary_alt text-secondary shadow-xs ring-1 ring-primary ring-inset"
+  ),
+  underline: e(
+    "rounded-none outline-focus-ring",
+    n && "border-b-2 border-[var(--color-brand-600)] text-[var(--color-brand-600)]",
+    o && "text-[var(--color-brand-600)] border-transparent",
+    !a && "hover:border-[var(--color-brand-600)] hover:text-[var(--color-brand-600)]",
+    t && "outline-2 -outline-offset-2"
+  ),
+  line: e(
+    "rounded-none border-l-2 border-transparent outline-focus-ring",
+    n && "border-fg-brand-primary_alt text-brand-secondary",
+    o && "text-brand-secondary",
+    t && "outline-2 -outline-offset-2"
+  ),
+  "button-curved": e(
+    "rounded-none rounded-t-xl outline-focus-ring relative text-xs font-medium transition-all duration-200 ease-out",
+    "before:absolute before:-left-3 before:bottom-0 before:size-3 before:rounded-br-lg before:transition-shadow before:duration-200 before:ease-out",
+    "after:absolute after:-right-3 after:bottom-0 after:size-3 after:rounded-bl-lg after:transition-shadow after:duration-200 after:ease-out",
+    t && "outline-2 -outline-offset-2",
+    n && "bg-primary text-brand-tertiary z-10 font-semibold",
+    n && "before:shadow-[4px_4px_0_0_var(--color-bg-primary)]",
+    n && "after:shadow-[-4px_4px_0_0_var(--color-bg-primary)]",
+    !n && "before:shadow-[4px_4px_0_0_transparent] after:shadow-[-4px_4px_0_0_transparent]",
+    !n && !a && o && "bg-primary_hover text-primary"
+  )
+}), j = {
+  xs: {
+    "button-brand": "text-xs font-semibold px-2",
+    "button-gray": "text-xs font-semibold px-2",
+    "button-border": "text-xs font-semibold px-2",
+    "button-minimal": "text-xs font-semibold px-2",
+    underline: "text-xs font-semibold px-1.5 pt-0",
+    line: "text-xs font-semibold pl-2.5 pr-2.5"
+  },
+  sm: {
+    "button-brand": "text-sm font-semibold py-2 px-3",
+    "button-gray": "text-sm font-semibold py-2 px-3",
+    "button-border": "text-sm font-semibold py-2 px-3",
+    "button-minimal": "text-sm font-semibold py-2 px-3",
+    underline: "text-sm font-semibold px-1 pb-2.5 pt-0",
+    line: "text-sm font-semibold pl-2.5 pr-3 py-0.5",
+    "button-curved": "py-2 px-4"
+  },
+  md: {
+    "button-brand": "text-md font-semibold py-2.5 px-3",
+    "button-gray": "text-md font-semibold py-2.5 px-3",
+    "button-border": "text-md font-semibold py-2.5 px-3",
+    "button-minimal": "text-md font-semibold py-2.5 px-3",
+    underline: "text-md font-semibold px-1 pb-2.5 pt-0",
+    line: "text-md font-semibold pr-3.5 pl-3 py-1",
+    "button-curved": "py-2.5 px-5"
+  }
+}, $ = ({ size: t, fullWidth: n }) => ({
+  "button-brand": "gap-1",
+  "button-gray": "gap-1",
+  "button-border": e(
+    "gap-1 rounded-[10px] bg-secondary_alt p-1 ring-1 ring-secondary ring-inset",
+    t === "md" && "rounded-xl p-1.5"
+  ),
+  "button-minimal": "gap-0.5 rounded-lg bg-secondary_alt ring-1 ring-inset ring-secondary",
+  underline: e("gap-3", n && "w-full gap-4"),
+  line: "gap-2",
+  "button-curved": "gap-0"
+});
+function I(t) {
+  return t.some((n) => {
+    if (!("badge" in n)) return !1;
+    const o = n.badge;
+    return o != null && String(o).length > 0;
+  });
+}
+const k = {
+  xs: "!min-h-8",
+  sm: "!min-h-9",
+  md: "!min-h-10"
+}, g = ({ isSelected: t, isHovered: n }) => ({
+  "button-brand": t || n ? "brand" : "gray",
+  "button-gray": "gray",
+  "button-border": "gray",
+  "button-minimal": "gray",
+  underline: t || n ? "brand" : "gray",
+  line: t || n ? "brand" : "gray",
+  "button-curved": "gray"
+}), c = _({
+  size: "sm",
+  type: "button-brand",
+  reserveBadgeSlot: !1
+}), A = ({
+  size: t = "sm",
+  type: n = "button-brand",
+  orientation: o,
+  fullWidth: a,
+  className: d,
+  children: m,
+  items: u,
+  ...r
+}) => {
+  const i = z(N), s = o ?? (i == null ? void 0 : i.orientation) ?? "horizontal", l = s === "horizontal" && n === "underline" && I(u);
+  return /* @__PURE__ */ b(c.Provider, { value: { size: t, type: n, orientation: s, fullWidth: a, reserveBadgeSlot: l }, children: /* @__PURE__ */ b(
+    C,
+    {
+      ...r,
+      items: u,
+      className: (f) => e(
+        "group flex",
+        $({
+          size: t,
+          fullWidth: a
+        })[n],
+        s === "vertical" && "w-max flex-col",
+        // Only horizontal tabs with underline type have bottom border
+        s === "horizontal" && n === "underline" && "relative before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-border-secondary",
+        typeof d == "function" ? d(f) : d
+      ),
+      children: m ?? ((f) => /* @__PURE__ */ b(y, { ...f, children: f.children }))
+    }
+  ) });
+}, M = (t) => /* @__PURE__ */ b(
+  L,
+  {
+    ...t,
+    className: (n) => e(
+      "outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2",
+      typeof t.className == "function" ? t.className(n) : t.className
+    )
+  }
+), y = (t) => {
+  const { label: n, children: o, badge: a, leadingBadge: d, badgeClassName: m, ...u } = t, { size: r = "sm", type: i = "button-brand", fullWidth: s } = v(c);
+  return /* @__PURE__ */ b(
+    B,
+    {
+      ...u,
+      className: (l) => e(
+        "z-10 flex h-max cursor-pointer items-center justify-center gap-1 rounded-md whitespace-nowrap text-secondary transition duration-100 ease-linear",
+        "group-orientation-vertical:justify-start",
+        s && "w-full flex-1",
+        k[r],
+        j[r][i],
+        P(l)[i],
+        typeof t.className == "function" ? t.className(l) : t.className
+      ),
+      children: (l) => /* @__PURE__ */ h(T, { children: [
+        d && /* @__PURE__ */ b(
+          p,
+          {
+            size: r === "xs" ? "sm" : r,
+            type: "pill-color",
+            color: g(l)[i],
+            className: e("hidden transition-inherit-all md:flex", r === "sm" && "-my-px", m),
+            children: d
+          }
+        ),
+        typeof o == "function" ? o(l) : o || n,
+        a && /* @__PURE__ */ b(
+          p,
+          {
+            size: r === "xs" ? "sm" : r,
+            type: "pill-color",
+            color: g(l)[i],
+            className: e("hidden transition-inherit-all md:flex", r === "sm" && "-my-px"),
+            children: a
+          }
+        )
+      ] })
+    }
+  );
+}, x = ({ className: t, ...n }) => /* @__PURE__ */ b(
+  w,
+  {
+    keyboardActivation: "manual",
+    ...n,
+    className: (o) => e(
+      // RAC marks the root `data-focus-visible` whenever anything inside it has keyboard focus, and the
+      // design system's global `[data-focus-visible]` outline would ring the whole tab section.
+      // The focused tab or control draws its own ring.
+      "flex w-full flex-col outline-hidden",
+      typeof t == "function" ? t(o) : t
+    )
+  }
+);
+x.Panel = M;
+x.List = A;
+x.Item = y;
+export {
+  y as Tab,
+  A as TabList,
+  M as TabPanel,
+  x as Tabs
+};