@lolmath/ui 2.3.1 → 2.4.0

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode, ComponentProps } from 'react';
-import { ButtonProps as ButtonProps$1, ItemProps, SelectProps as SelectProps$1, SearchFieldProps, Input, SliderProps, SliderTrackProps, SliderThumbProps, SliderTrackRenderProps, SwitchProps, ProgressBarProps as ProgressBarProps$1, TextFieldProps, RadioGroupProps, RadioProps, LabelProps, NumberFieldProps, Group, HeadingProps, DialogTriggerProps, ModalOverlayProps, DialogProps } from 'react-aria-components';
+import { ButtonProps as ButtonProps$1, ItemProps, SelectProps as SelectProps$1, SearchFieldProps, Input, SliderProps, SliderTrackProps, SliderThumbProps, SliderTrackRenderProps, SwitchProps, ProgressBarProps as ProgressBarProps$1, TextFieldProps, RadioGroupProps, RadioProps, LabelProps, NumberFieldProps, Group, HeadingProps, DialogTriggerProps, ModalOverlayProps, DialogProps, TabsProps, TabListProps, TabProps, TabPanelProps } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface ButtonProps extends ButtonProps$1 {
@@ -92,4 +92,9 @@ declare function DialogButtons({ children }: {
 }): react_jsx_runtime.JSX.Element;
 declare function DialogTrigger(props: DialogTriggerProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, DialogButtons, DialogTrigger, Heading, Item, Label, Modal, NumberField, ProgressBar, Radio, RadioGroup, SearchField, Select, Slider, SliderLabel, Spinner, Switch, TextField };
+declare function Tabs({ onSelectionChange, ...rest }: TabsProps): react_jsx_runtime.JSX.Element;
+declare function TabList<T extends object>({ ...rest }: TabListProps<T>): react_jsx_runtime.JSX.Element;
+declare function Tab({ children, ...rest }: TabProps): react_jsx_runtime.JSX.Element;
+declare function TabPanel({ ...rest }: TabPanelProps): react_jsx_runtime.JSX.Element;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, DialogButtons, DialogTrigger, Heading, Item, Label, Modal, NumberField, ProgressBar, Radio, RadioGroup, SearchField, Select, Slider, SliderLabel, Spinner, Switch, Tab, TabList, TabPanel, Tabs, TextField };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode, ComponentProps } from 'react';
-import { ButtonProps as ButtonProps$1, ItemProps, SelectProps as SelectProps$1, SearchFieldProps, Input, SliderProps, SliderTrackProps, SliderThumbProps, SliderTrackRenderProps, SwitchProps, ProgressBarProps as ProgressBarProps$1, TextFieldProps, RadioGroupProps, RadioProps, LabelProps, NumberFieldProps, Group, HeadingProps, DialogTriggerProps, ModalOverlayProps, DialogProps } from 'react-aria-components';
+import { ButtonProps as ButtonProps$1, ItemProps, SelectProps as SelectProps$1, SearchFieldProps, Input, SliderProps, SliderTrackProps, SliderThumbProps, SliderTrackRenderProps, SwitchProps, ProgressBarProps as ProgressBarProps$1, TextFieldProps, RadioGroupProps, RadioProps, LabelProps, NumberFieldProps, Group, HeadingProps, DialogTriggerProps, ModalOverlayProps, DialogProps, TabsProps, TabListProps, TabProps, TabPanelProps } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface ButtonProps extends ButtonProps$1 {
@@ -92,4 +92,9 @@ declare function DialogButtons({ children }: {
 }): react_jsx_runtime.JSX.Element;
 declare function DialogTrigger(props: DialogTriggerProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, DialogButtons, DialogTrigger, Heading, Item, Label, Modal, NumberField, ProgressBar, Radio, RadioGroup, SearchField, Select, Slider, SliderLabel, Spinner, Switch, TextField };
+declare function Tabs({ onSelectionChange, ...rest }: TabsProps): react_jsx_runtime.JSX.Element;
+declare function TabList<T extends object>({ ...rest }: TabListProps<T>): react_jsx_runtime.JSX.Element;
+declare function Tab({ children, ...rest }: TabProps): react_jsx_runtime.JSX.Element;
+declare function TabPanel({ ...rest }: TabPanelProps): react_jsx_runtime.JSX.Element;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, DialogButtons, DialogTrigger, Heading, Item, Label, Modal, NumberField, ProgressBar, Radio, RadioGroup, SearchField, Select, Slider, SliderLabel, Spinner, Switch, Tab, TabList, TabPanel, Tabs, TextField };

package/dist/index.js

@@ -847,6 +847,74 @@ function DialogButtons({ children }) {
 function DialogTrigger(props) {
   return /* @__PURE__ */ jsx13(AriaDialogTrigger, { ...props });
 }
+
+// src/components/tabs.tsx
+import {
+  Tabs as AriaTabs,
+  TabList as AriaTabList,
+  Tab as AriaTab,
+  TabPanel as AriaTabPanel
+} from "react-aria-components";
+import { twMerge as twMerge14 } from "tailwind-merge";
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { Fragment as Fragment6, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+function Tabs({ onSelectionChange, ...rest }) {
+  const id = useCssId();
+  return /* @__PURE__ */ jsx14(TabsContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx14(
+    AriaTabs,
+    {
+      ...rest,
+      onSelectionChange: (key) => {
+        startViewTransition(() => {
+          onSelectionChange?.(key);
+        });
+      }
+    }
+  ) });
+}
+function TabList({ ...rest }) {
+  return /* @__PURE__ */ jsx14(AriaTabList, { ...rest, className: () => "flex gap-0 -ml-4" });
+}
+function Tab({ children, ...rest }) {
+  const { id } = useTabsContext();
+  return /* @__PURE__ */ jsx14(
+    AriaTab,
+    {
+      ...rest,
+      className: (values) => twMerge14(
+        "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__ */ jsxs9(Fragment6, { children: [
+        typeof children === "function" ? children(values) : children,
+        values.isSelected && /* @__PURE__ */ jsx14(
+          "div",
+          {
+            style: {
+              viewTransitionName: `tab-indicator-${id}`
+            },
+            className: twMerge14(
+              "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__ */ jsx14(AriaTabPanel, { ...rest });
+}
+var TabsContext = createContext2(void 0);
+function useTabsContext() {
+  const context = useContext2(TabsContext);
+  if (context === void 0) {
+    throw new Error("useTabsContext must be used within a Tabs");
+  }
+  return context;
+}
 export {
   Accordion,
   AccordionContent,
@@ -869,6 +937,10 @@ export {
   SliderLabel,
   Spinner,
   Switch,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs,
   TextField
 };
 //# sourceMappingURL=index.js.map