welcome-ui
Version:
Customizable design system with react, typescript, tailwindcss and ariakit.
584 lines (583 loc) • 12.9 kB
JavaScript
"use client";
import './Tabs.css';
import { jsx as h, jsxs as L } from "react/jsx-runtime";
import { T as V, b as A, a as F } from "./tab-panel-Cc3MfOBM.js";
import T, { createContext as C, useMemo as R, forwardRef as O } from "react";
import { c as w } from "./index-B6iGEm-i.js";
import { m as W, o as y, c as K, s as p, d as m, g as Q, u as E, a as j, b as U } from "./Q5W46E73-5xQblshY.js";
import { Badge as D } from "./Badge.js";
import { f as G } from "./forwardRefWithAs-8eP3ZN15.js";
import { Icon as H } from "./Icon.js";
import { P as J, b as X } from "./JMU4N4M5-DnfyqGdJ.js";
import { C as Y, a as Z } from "./WZWDIE3S-CGqoM1Fy.js";
import { b as ee, x as v, Q as z, y as P } from "./U6HHPQDW-CzxyP5H7.js";
import { c as te, a as oe, u as ae } from "./IQYAUKXT-Cltvp3KN.js";
import { a as se } from "./CVCFNOHX-Ck0bUDvo.js";
var ie = ee(
[X, Z],
[J, Y]
), re = ie.useContext;
C(!1);
C(null);
function le({
composite: e,
combobox: a,
...t
} = {}) {
const r = [
"items",
"renderedItems",
"moves",
"orientation",
"virtualFocus",
"includesBaseElement",
"baseElement",
"focusLoop",
"focusShift",
"focusWrap"
], l = W(
t.store,
y(e, r),
y(a, r)
), i = l == null ? void 0 : l.getState(), d = te({
...t,
store: l,
// We need to explicitly set the default value of `includesBaseElement` to
// `false` since we don't want the composite store to default it to `true`
// when the activeId state is null, which could be the case when rendering
// combobox with tab.
includesBaseElement: v(
t.includesBaseElement,
i == null ? void 0 : i.includesBaseElement,
!1
),
orientation: v(
t.orientation,
i == null ? void 0 : i.orientation,
"horizontal"
),
focusLoop: v(t.focusLoop, i == null ? void 0 : i.focusLoop, !0)
}), b = oe(), I = {
...d.getState(),
selectedId: v(
t.selectedId,
i == null ? void 0 : i.selectedId,
t.defaultSelectedId
),
selectOnMove: v(
t.selectOnMove,
i == null ? void 0 : i.selectOnMove,
!0
)
}, o = K(I, d, l);
p(
o,
() => m(o, ["moves"], () => {
const { activeId: s, selectOnMove: n } = o.getState();
if (!n || !s) return;
const c = d.item(s);
c && (c.dimmed || c.disabled || o.setState("selectedId", c.id));
})
);
let u = !0;
p(
o,
() => Q(o, ["selectedId"], (s, n) => {
if (!u) {
u = !0;
return;
}
e && s.selectedId === n.selectedId || o.setState("activeId", s.selectedId);
})
), p(
o,
() => m(o, ["selectedId", "renderedItems"], (s) => {
if (s.selectedId !== void 0) return;
const { activeId: n, renderedItems: c } = o.getState(), f = d.item(n);
if (f && !f.disabled && !f.dimmed)
o.setState("selectedId", f.id);
else {
const k = c.find(
(g) => !g.disabled && !g.dimmed
);
o.setState("selectedId", k == null ? void 0 : k.id);
}
})
), p(
o,
() => m(o, ["renderedItems"], (s) => {
const n = s.renderedItems;
if (n.length)
return m(b, ["renderedItems"], (c) => {
const f = c.renderedItems;
f.some((g) => !g.tabId) && f.forEach((g, B) => {
if (g.tabId) return;
const x = n[B];
x && b.renderItem({ ...g, tabId: x.id });
});
});
})
);
let _ = null;
return p(o, () => {
const s = () => {
_ = o.getState().selectedId;
}, n = () => {
u = !1, o.setState("selectedId", _);
};
if (e && "setSelectElement" in e)
return z(
m(e, ["value"], s),
m(e, ["mounted"], n)
);
if (a)
return z(
m(a, ["selectedValue"], s),
m(a, ["mounted"], n)
);
}), {
...d,
...o,
panels: b,
setSelectedId: (s) => o.setState("selectedId", s),
select: (s) => {
o.setState("selectedId", s), d.move(s);
}
};
}
function ne(e, a, t) {
P(a, [t.composite, t.combobox]), e = ae(e, a, t), j(e, t, "selectedId", "setSelectedId"), j(e, t, "selectOnMove");
const [r, l] = E(() => e.panels, {});
return P(l, [e, l]), Object.assign(
R(() => ({ ...e, panels: r }), [e, r]),
{ composite: t.composite, combobox: t.combobox }
);
}
function Fe(e = {}) {
const a = se(), t = re() || a;
e = {
...e,
composite: e.composite !== void 0 ? e.composite : t,
combobox: e.combobox !== void 0 ? e.combobox : a
};
const [r, l] = E(le, e);
return ne(r, l, e);
}
const N = T.createContext(null);
function ce() {
const e = T.useContext(N);
return (e == null ? void 0 : e.size) || "lg";
}
const de = "_root_ijogm_2", S = {
root: de,
"size-lg": "_size-lg_ijogm_58",
"size-md": "_size-md_ijogm_65",
"folder-icon": "_folder-icon_ijogm_75",
"folder-icon-blue": "_folder-icon-blue_ijogm_78",
"folder-icon-blue-active": "_folder-icon-blue-active_ijogm_81",
"folder-icon-green": "_folder-icon-green_ijogm_84",
"folder-icon-green-active": "_folder-icon-green-active_ijogm_87",
"folder-icon-orange": "_folder-icon-orange_ijogm_90",
"folder-icon-orange-active": "_folder-icon-orange-active_ijogm_93",
"folder-icon-pink": "_folder-icon-pink_ijogm_96",
"folder-icon-pink-active": "_folder-icon-pink-active_ijogm_99",
"folder-icon-teal": "_folder-icon-teal_ijogm_102",
"folder-icon-teal-active": "_folder-icon-teal-active_ijogm_105",
"folder-icon-violet": "_folder-icon-violet_ijogm_108",
"folder-icon-violet-active": "_folder-icon-violet-active_ijogm_111",
"folder-icon-warm": "_folder-icon-warm_ijogm_114",
"folder-icon-warm-active": "_folder-icon-warm-active_ijogm_117",
"tab-list": "_tab-list_ijogm_123"
}, me = [
"angle-left-b",
"angle-right-b",
"angle-up",
"angle-down",
"arrow-left",
"arrow-right",
"arrow-up",
"arrow-down",
"left-arrow-to-left",
"arrow-to-right",
"top-arrow-to-top",
"arrow-to-bottom",
"angle-double-left",
"angle-double-right",
"angle-left",
"angle-right"
], ue = [
"asterisk",
"info-circle",
"chart-line",
"plus",
"chart-line",
"archive-alt",
"arrows-merge-v",
// (not unicons, personal mashup)
"arrows-shrink-v",
"apps",
"edit",
"user-check",
"user-plus",
"user-times",
"check",
"times",
"trash",
"import",
"upload",
"draggable-dots",
"copy",
"pen",
"left-arrow-from-left",
"arrow-from-right",
"resize-handle",
// (not unicons)
"arrow-resize-diagonal",
"draggabledots",
"compress-alt",
"external-link-alt",
"heart-solid",
"heart",
"filter",
"eye",
"eye-slash",
"sliders-v-alt",
"link",
"sign-out-alt",
"bars",
"sort-amount-down",
"ellipsis-v",
"ellipsis-h",
"move-arrow",
// (not unicons)
"bell",
"print",
"bolt-alt",
"redo",
"save",
"search",
"setting",
"share-alt",
"share",
"bulk",
"bulk-active"
], fe = ["chat", "chat-bubble-user", "comment", "comment-alt-lines"], ge = [
"music",
"rocket",
"file-alt",
"user-square",
"book-reader",
"file-question-alt",
"sad-solid",
"smile-beam-solid",
"sad",
"smile-beam",
"sign-right",
"exclamation-triangle",
"exclamation-circle",
"exclamation-octagon",
"chart-pie",
"paperclip",
"chart-bar",
"fire",
"user-check",
"apps",
"trophy",
"bookmark-solid",
"bookmark",
"clock",
"comment-alt-lines",
"file-edit-alt",
"illustration",
"calendar",
"users-alt",
"globe",
"graduation-cap",
"envelope",
"equal-circle",
"minus",
"venus",
"mars",
"estate",
"info-circle",
"columns",
"english-to-chinese",
"bag-alt",
"chart-line",
"map-marker-alt",
"map-pin",
"lock-alt",
"flag",
// (not unicons)
"at",
"user",
"user-circle",
"clipboard-check",
// (not unicons, personal mashup)
"building",
"compass",
"phone",
"pin",
// (not unicons)
"microphone",
"user-search",
// (not unicons, personal mashup)
"house-user",
"star-solid",
"star",
"coins",
"euro-circle",
"file-search-alt",
"question-circle",
"gift",
"birthday-cake",
// (not unicons)
"bunting-flags",
// (not unicons)
"swatchbook",
"tag-alt",
"tablet",
"mobile",
"video",
"plus-circle",
"pen",
"check-circle",
"certified",
// (not unicons, personal mashup)
"plug"
], be = [
"play",
"play-solid",
"stop-circle-solid",
"pause-circle-solid",
"previous",
"step-forward",
"expand-arrows-alt",
"compress-arrows",
"screen-share",
// (not unicons)
"stop-screen-share",
// (not unicons)
"microphone",
"microphone-slash",
"cast",
// (not unicons)
"cast-connected",
// (not unicons, personal mashup)
"cast-unavailable",
// (not unicons, personal mashup)
"video",
"video-slash",
"airplay",
"history",
"playlist",
// (not unicons)
"volume-up",
"volume-mute",
"closed-captioning"
], he = [
"icons",
"package",
"basketball",
"bill",
"invoice",
"book-alt",
"lightbulb-alt",
"life-ring",
"calculator-alt",
"camera",
"shopping-cart",
"clipboard-notes",
"coffee",
"ruler",
"desktop",
"hard-hat",
"credit-card",
"moon-solid",
"moon",
"crosshair",
"crown",
// (not unicons)
"restaurant",
"diamond",
"industry",
// (not unicons)
"fingerprint",
// (not unicons)
"flag",
"flag-solid",
// (not unicons, personal mashup)
"setting",
"handshake",
"hashtag",
// (not unicons)
"headphones",
"heart",
"estate",
"balance-scale",
"key-skeleton",
"leaf",
// (not unicons)
"map",
"masonry",
// (not unicons, personal mashup)
"masonry-plus",
// (not unicons, personal mashup)
"megaphone",
"microphone",
"processor",
"euro-circle",
"mountains",
"pen",
"images",
"chart-pie-alt",
"pizza-slice",
"puzzle-piece-solid",
"puzzle-piece",
"shield",
"wrench",
"sparkles",
// (not unicons)
"server",
"sun",
"hunting",
"thumbs-up",
"thumbs-down",
"trees",
"sofa",
// (not unicons)
"exit",
// (not unicons, personal mashup)
"redo",
"play",
"ban"
], pe = ["folder", "folder-open", "folder-full", "file", "image"], ve = [
"bold",
"arrow",
"brackets-curly",
"italic",
"list-ol-alt",
"list-ul",
"quote",
// (not unicons)
"text-strike-through",
"heading",
// (not unicons, original creation)
"heading-1",
// (not unicons, original creation)
"heading-2",
// (not unicons, original creation)
"heading-3",
// (not unicons, original creation)
"heading-4",
// (not unicons, original creation)
"heading-5",
// (not unicons, original creation)
"heading-6",
// (not unicons, original creation)
"font",
"underline"
], _e = [
"behance",
"dribbble",
"facebook",
"github",
"google",
"instagram",
"linkedin",
"npm",
// (not unicons)
"pinterest",
// (not unicons)
"slack",
"stackoverflow",
// (not unicons)
"tiktok",
"twitch",
// (not unicons)
"x",
// (not unicons)
"xing",
// (not unicons)
"youtube",
"zapier",
// (not unicons)
"medium"
// (not unicons)
], Ie = ["symbol", "wttj"], ke = ["flag-fr", "flag-en", "flag-us"], we = [
...ue,
...me,
..._e,
...fe,
...pe,
...ke,
...ve,
...ge,
...be,
...Ie,
...he
], Se = (e) => we.includes(e), xe = w(S);
function ye({
icon: e,
iconColor: a,
isActive: t,
size: r
}) {
return e ? typeof e != "string" || !Se(e) ? e : /* @__PURE__ */ h(
H,
{
className: a ? xe("folder-icon", `folder-icon-${a}${t ? "-active" : ""}`) : void 0,
name: e,
size: r
}
) : null;
}
const je = w(S), $ = G(
({ as: e, badge: a, children: t, className: r, icon: l, iconColor: i = "violet", id: d, store: b, ...I }, o) => {
const u = ce(), { selectedId: _ } = U(b), s = _ === d, n = ye({
icon: l,
iconColor: i,
isActive: s,
size: u
}), c = s ? "neutral" : "warm";
return /* @__PURE__ */ L(
V,
{
className: je("root", `size-${u}`, r),
id: d,
ref: o,
render: e ? /* @__PURE__ */ h(e, {}) : void 0,
store: b,
...I,
children: [
n,
t,
a ? /* @__PURE__ */ h(D, { size: u, variant: c, children: a }) : null
]
}
);
}
);
$.displayName = "Tabs.Tab";
const M = O(({ children: e, ...a }, t) => /* @__PURE__ */ h(A, { ref: t, ...a, children: e }));
M.displayName = "Tabs.Panel";
const ze = w(S), q = O(
({ children: e, className: a, size: t = "lg", store: r, ...l }, i) => /* @__PURE__ */ h(
F,
{
className: ze("tab-list", `size-${t}`, a),
ref: i,
store: r,
...l,
children: /* @__PURE__ */ h(N.Provider, { value: { size: t }, children: e })
}
)
);
q.displayName = "Tabs";
const Re = Object.assign(q, { Panel: M, Tab: $ });
export {
Re as Tabs,
q as TabsComponent,
S as tabsClasses,
Fe as useTab
};