@lolmath/ui 1.3.0 → 2.0.0

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, SwitchProps, ProgressBarProps as ProgressBarProps$1, TextFieldProps, RadioGroupProps, RadioProps, LabelProps, NumberFieldProps, Group } 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 } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface ButtonProps extends ButtonProps$1 {
@@ -21,7 +21,16 @@ declare function SearchField({ inputProps, ...props }: SearchFieldProps & {
     inputProps?: ComponentProps<typeof Input>;
 }): react_jsx_runtime.JSX.Element;
 
-declare function Slider({ className, label, ...props }: SliderProps & {}): react_jsx_runtime.JSX.Element;
+declare function Slider({ children, sliderThumbProps, sliderTrackProps, sliderTrackBackgroundClassName, sliderTrackForegroundClassName, ...props }: SliderProps & {
+    sliderTrackProps?: SliderTrackProps;
+    sliderThumbProps?: SliderThumbProps;
+    sliderTrackBackgroundClassName?: string | ((values: SliderTrackRenderProps) => string);
+    sliderTrackForegroundClassName?: string | ((values: SliderTrackRenderProps) => string);
+}): react_jsx_runtime.JSX.Element;
+interface SliderLabelProps {
+    children?: React.ReactNode;
+}
+declare function SliderLabel({ children }: SliderLabelProps): react_jsx_runtime.JSX.Element;
 
 declare function Switch({ className, placeholder, children, ...props }: SwitchProps & {
     placeholder?: string;
@@ -66,4 +75,4 @@ declare function NumberField({ inputProps, groupProps, ...props }: NumberFieldPr
     groupProps: ComponentProps<typeof Group>;
 }): react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, Item, Label, NumberField, ProgressBar, Radio, RadioGroup, SearchField, Select, Slider, Switch, TextField };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, Item, Label, NumberField, ProgressBar, Radio, RadioGroup, SearchField, Select, Slider, SliderLabel, Switch, TextField };

package/dist/index.js

@@ -152,8 +152,8 @@ import {
 import { twMerge as twMerge3 } from "tailwind-merge";
 
 // src/utilities/resolve-classname.ts
-function resolveClassname(props, values) {
-  return typeof props.className === "function" ? props.className(values) : props.className;
+function resolveClassname(className, values) {
+  return typeof className === "function" ? className(values) : className;
 }
 
 // src/components/search-field.tsx
@@ -166,7 +166,7 @@ function SearchField({
     AriaSearchField,
     {
       className: (values) => {
-        const finalClassName = resolveClassname(props, values);
+        const finalClassName = resolveClassname(props.className, values);
         return twMerge3(
           "flex flex-col outline-none",
           borderClassName,
@@ -189,7 +189,10 @@ function SearchField({
               {
                 ...inputProps,
                 className: (values) => {
-                  const finalClassName = resolveClassname(inputProps, values);
+                  const finalClassName = resolveClassname(
+                    inputProps.className,
+                    values
+                  );
                   return twMerge3(
                     "bg-transparent grow py-2 px-3 text-lol-gold-50 text-xs outline-none font-spiegel tracking-wide pl-6",
                     props.isDisabled && "text-lol-gray-500",
@@ -241,58 +244,114 @@ var sliderDisabled = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAAB
 
 // src/components/slider.tsx
 import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function Slider({ className, label, ...props }) {
-  return /* @__PURE__ */ jsx4(AriaSlider, { ...props, className: "", children: ({ state }) => /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between font-spiegel text-xs text-[#a09b8c] font-normal tracking-wide", children: [
-      /* @__PURE__ */ jsx4(Label, { className: "", children: label }),
-      /* @__PURE__ */ jsx4(AriaSliderOutput, { className: "", children: state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") })
-    ] }),
-    /* @__PURE__ */ jsx4(AriaSliderTrack, { className: "relative w-full h-7 group", children: ({ state: state2 }) => {
-      const left = state2.values.length === 1 ? 0 : state2.getThumbPercent(0) * 100;
-      const width = state2.values.length === 1 ? state2.getThumbPercent(0) * 100 : (state2.getThumbPercent(1) - state2.getThumbPercent(0)) * 100;
-      return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-        /* @__PURE__ */ jsx4("div", { className: "absolute h-0.5 top-[50%] transform translate-y-[-50%] w-full rounded-full bg-lol-gray-950" }),
+function Slider({
+  children,
+  sliderThumbProps = {},
+  sliderTrackProps = {},
+  sliderTrackBackgroundClassName,
+  sliderTrackForegroundClassName,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    AriaSlider,
+    {
+      ...props,
+      className: (values) => {
+        const resolvedClassName = resolveClassname(props.className, values);
+        return twMerge4("", resolvedClassName);
+      },
+      children: (values) => /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        typeof children === "function" ? children(values) : children,
         /* @__PURE__ */ jsx4(
-          "div",
+          AriaSliderTrack,
           {
-            className: twMerge4(
-              "absolute h-0.5 top-[50%] transform translate-y-[-50%] from-[#463714] to-[#695625] bg-gradient-to-r",
-              state2.isDisabled ? "from-transparent via-transparent to-transparent bg-[#5C5B57]" : [
-                "group-hover:from-[#785a28] group-hover:via-[#c89b3c] group-hover:to-[#c8aa6e]",
-                "group-active:from-[#695625] group-active:via-[#463714] group-active:to-[#463714]"
-              ]
-            ),
-            style: { left: `${left}%`, width: `${width}%` }
-          }
-        ),
-        state2.values.map((_, i) => {
-          let zIndex = state2.getThumbPercent(i === 1 ? 0 : 1) === (i === 1 ? 0 : 1) ? 2 : void 0;
-          return /* @__PURE__ */ jsx4(Fragment2, { children: /* @__PURE__ */ jsx4(
-            AriaSliderThumb,
-            {
-              index: i,
-              className: twMerge4(
-                "bg-contain h-7 w-7 top-[50%] outline-none",
-                "[background-image:var(--normal)]",
-                state2.isDisabled ? "[background-image:var(--disabled)]" : [
-                  state2.isThumbDragging(i) && "[background-image:var(--active)]",
-                  !state2.isThumbDragging(0) && !state2.isThumbDragging(1) && "group-hover:[background-image:var(--hover)]"
-                ]
-              ),
-              style: {
-                "--normal": sliderNormal,
-                "--hover": sliderHover,
-                "--active": sliderActive,
-                "--disabled": sliderDisabled,
-                zIndex
-              }
+            ...sliderTrackProps,
+            className: (sliderTrackRenderProps) => {
+              const resolvedClassName = resolveClassname(
+                sliderTrackProps.className,
+                sliderTrackRenderProps
+              );
+              return twMerge4("relative w-full h-7 group", resolvedClassName);
             },
-            i
-          ) });
-        })
-      ] });
-    } })
-  ] }) });
+            children: (values2) => {
+              const left = values2.state.values.length === 1 ? 0 : values2.state.getThumbPercent(0) * 100;
+              const width = values2.state.values.length === 1 ? values2.state.getThumbPercent(0) * 100 : (values2.state.getThumbPercent(1) - values2.state.getThumbPercent(0)) * 100;
+              return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+                /* @__PURE__ */ jsx4(
+                  "div",
+                  {
+                    className: twMerge4(
+                      "absolute h-0.5 top-[50%] transform translate-y-[-50%] w-full rounded-full bg-lol-gray-950",
+                      resolveClassname(sliderTrackBackgroundClassName, values2)
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx4(
+                  "div",
+                  {
+                    className: twMerge4(
+                      "absolute h-0.5 top-[50%] transform translate-y-[-50%] from-[#463714] to-[#695625] bg-gradient-to-r",
+                      values2.state.isDisabled ? "from-transparent via-transparent to-transparent bg-[#5C5B57]" : [
+                        "group-hover:from-[#785a28] group-hover:via-[#c89b3c] group-hover:to-[#c8aa6e]",
+                        "group-active:from-[#695625] group-active:via-[#463714] group-active:to-[#463714]"
+                      ],
+                      resolveClassname(sliderTrackForegroundClassName, values2)
+                    ),
+                    style: { left: `${left}%`, width: `${width}%` }
+                  }
+                ),
+                values2.state.values.map((_, i) => {
+                  let zIndex = values2.state.getThumbPercent(i === 1 ? 0 : 1) === (i === 1 ? 0 : 1) ? 2 : void 0;
+                  return /* @__PURE__ */ jsx4(Fragment2, { children: /* @__PURE__ */ jsx4(
+                    AriaSliderThumb,
+                    {
+                      index: i,
+                      ...sliderThumbProps,
+                      className: (sliderThumbRenderProps) => {
+                        const resolvedClassName = resolveClassname(
+                          sliderThumbProps.className,
+                          sliderThumbRenderProps
+                        );
+                        return twMerge4(
+                          "bg-contain h-7 w-7 top-[50%] outline-none",
+                          "[background-image:var(--normal)]",
+                          sliderThumbRenderProps.isDisabled ? "[background-image:var(--disabled)]" : [
+                            sliderThumbRenderProps.state.isThumbDragging(
+                              i
+                            ) && "[background-image:var(--active)]",
+                            !sliderThumbRenderProps.state.isThumbDragging(
+                              0
+                            ) && !sliderThumbRenderProps.state.isThumbDragging(
+                              1
+                            ) && "group-hover:[background-image:var(--hover)]"
+                          ],
+                          resolvedClassName
+                        );
+                      },
+                      style: {
+                        "--normal": sliderNormal,
+                        "--hover": sliderHover,
+                        "--active": sliderActive,
+                        "--disabled": sliderDisabled,
+                        zIndex
+                      }
+                    },
+                    i
+                  ) });
+                })
+              ] });
+            }
+          }
+        )
+      ] })
+    }
+  );
+}
+function SliderLabel({ children }) {
+  return /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between font-spiegel text-xs text-lol-gray-300 font-normal tracking-wide", children: [
+    /* @__PURE__ */ jsx4(Label, { className: "", children }),
+    /* @__PURE__ */ jsx4(AriaSliderOutput, { className: "", children: (sliderRenderProps) => sliderRenderProps.state.values.map((_, i) => sliderRenderProps.state.getThumbValueLabel(i)).join(" \u2013 ") })
+  ] });
 }
 
 // src/components/switch.tsx
@@ -497,7 +556,7 @@ function TextField({
     AriaTextField,
     {
       className: (values) => {
-        const finalClassName = resolveClassname(props, values);
+        const finalClassName = resolveClassname(props.className, values);
         return twMerge8(
           "flex flex-col outline-none",
           borderClassName,
@@ -519,7 +578,10 @@ function TextField({
             {
               ...inputProps,
               className: (values) => {
-                const finalClassName = resolveClassname(inputProps, values);
+                const finalClassName = resolveClassname(
+                  inputProps.className,
+                  values
+                );
                 return twMerge8(
                   "bg-transparent grow py-2 px-3 text-lol-gold-50 text-xs outline-none font-spiegel tracking-wide",
                   values.isDisabled && "text-lol-gray-500",
@@ -548,7 +610,7 @@ function RadioGroup({ ...props }) {
     {
       ...props,
       className: (values) => {
-        const finalClassName = resolveClassname(props, values);
+        const finalClassName = resolveClassname(props.className, values);
         return twMerge9("flex flex-col items-start", finalClassName);
       }
     }
@@ -560,7 +622,7 @@ function Radio({ ...props }) {
     {
       ...props,
       className: (values) => {
-        const finalClassName = resolveClassname(props, values);
+        const finalClassName = resolveClassname(props.className, values);
         return twMerge9(
           "text-lol-gold-300 font-spiegel text-xs font-normal py-2 bg-no-repeat bg-[length:18px] bg-left pl-6 pr-4",
           values.isDisabled ? "text-lol-gray-500" : values.isHovered || values.isSelected ? "text-lol-gold-50" : "",
@@ -619,7 +681,7 @@ function NumberField({
     {
       ...groupProps,
       className: (values) => {
-        const finalClassName = resolveClassname(groupProps, values);
+        const finalClassName = resolveClassname(groupProps.className, values);
         return twMerge11(
           "grid grid-cols-[auto_1fr_auto] outline-none gap-px p-px",
           borderClassName,
@@ -635,7 +697,10 @@ function NumberField({
           {
             ...inputProps,
             className: (values) => {
-              const finalClassName = resolveClassname(inputProps, values);
+              const finalClassName = resolveClassname(
+                inputProps.className,
+                values
+              );
               return twMerge11(
                 "bg-black w-full py-2 px-3 text-lol-gold-50 text-xs outline-none font-spiegel",
                 values.isDisabled && "text-lol-gray-500 bg-lol-gray-950",
@@ -665,6 +730,7 @@ export {
   SearchField,
   Select,
   Slider,
+  SliderLabel,
   Switch,
   TextField
 };