@lolmath/ui 2.3.0 → 2.4.0

package/dist/index.cjs

@@ -41,6 +41,10 @@ __export(src_exports, {
   SliderLabel: () => SliderLabel,
   Spinner: () => Spinner,
   Switch: () => Switch,
+  Tab: () => Tab,
+  TabList: () => TabList,
+  TabPanel: () => TabPanel,
+  Tabs: () => Tabs,
   TextField: () => TextField
 });
 module.exports = __toCommonJS(src_exports);
@@ -524,7 +528,7 @@ function Accordion({ children, className }) {
         "div",
         {
           className: (0, import_tailwind_merge7.twMerge)(
-            "bg-lol-blue-950 border-lol-gold-500 rounded border",
+            "bg-lol-blue-950 border-lol-gold-500 rounded border overflow-hidden",
             className
           ),
           style: {
@@ -852,6 +856,69 @@ function DialogButtons({ children }) {
 function DialogTrigger(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_aria_components11.DialogTrigger, { ...props });
 }
+
+// src/components/tabs.tsx
+var import_react_aria_components12 = require("react-aria-components");
+var import_tailwind_merge14 = require("tailwind-merge");
+var import_react4 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function Tabs({ onSelectionChange, ...rest }) {
+  const id = useCssId();
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TabsContext.Provider, { value: { id }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_react_aria_components12.Tabs,
+    {
+      ...rest,
+      onSelectionChange: (key) => {
+        startViewTransition(() => {
+          onSelectionChange?.(key);
+        });
+      }
+    }
+  ) });
+}
+function TabList({ ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_aria_components12.TabList, { ...rest, className: () => "flex gap-0 -ml-4" });
+}
+function Tab({ children, ...rest }) {
+  const { id } = useTabsContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_react_aria_components12.Tab,
+    {
+      ...rest,
+      className: (values) => (0, import_tailwind_merge14.twMerge)(
+        "font-beaufort text-lol-gold-300 uppercase font-medium text-xs tracking-widest px-4 relative py-1 cursor-pointer select-none",
+        (values.isSelected || values.isHovered) && "text-lol-gold-50",
+        values.isPressed && "text-lol-gold-500",
+        values.isDisabled && "text-lol-gray-500 cursor-default"
+      ),
+      children: (values) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+        typeof children === "function" ? children(values) : children,
+        values.isSelected && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "div",
+          {
+            style: {
+              viewTransitionName: `tab-indicator-${id}`
+            },
+            className: (0, import_tailwind_merge14.twMerge)(
+              "h-px bg-gradient-to-r from-transparent via-lol-gold-200 to-transparent absolute bottom-0 w-full left-0"
+            )
+          }
+        )
+      ] })
+    }
+  );
+}
+function TabPanel({ ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_aria_components12.TabPanel, { ...rest });
+}
+var TabsContext = (0, import_react4.createContext)(void 0);
+function useTabsContext() {
+  const context = (0, import_react4.useContext)(TabsContext);
+  if (context === void 0) {
+    throw new Error("useTabsContext must be used within a Tabs");
+  }
+  return context;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -875,6 +942,10 @@ function DialogTrigger(props) {
   SliderLabel,
   Spinner,
   Switch,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs,
   TextField
 });
 //# sourceMappingURL=index.cjs.map