dirk-cfx-react 1.0.36 → 1.0.37

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { BorderedIcon, BorderedIconProps, ButtonProps, Counter, FloatingParticles, FloatingParticlesProps, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, NavigationStore, ParticleState, ProgressProps, Segment, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, Title, TitleProps, useNavigation, useNavigationStore } from './components/index.js';
+export { BorderedIcon, BorderedIconProps, ButtonProps, Counter, FloatingParticles, FloatingParticlesProps, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, NavigationStore, ParticleState, ProgressProps, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, Title, TitleProps, useNavigation, useNavigationStore } from './components/index.js';
 export { InitialFetch, InternalEvent, SkillSettings, colorWithAlpha, copyToClipboard, createSkill, fetchNui, initialFetches, internalEvent, isEnvBrowser, isProfanity, locale, localeStore, noop, numberToRoman, openLink, registerInitialFetch, runFetches, splitFAString, useAutoFetcher, useProfanityStore } from './utils/index.js';
 export { TornEdgeSVGFilter, useNuiEvent, useTornEdges } from './hooks/index.js';
 export { DirkProvider, DirkProviderProps, useSettings } from './providers/index.js';

package/dist/index.js

@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { createTheme, Flex, Text, Image, MantineProvider, BackgroundImage, useMantineTheme } from '@mantine/core';
+import { createTheme, Flex, Text, Image, MantineProvider, BackgroundImage, useMantineTheme, alpha } from '@mantine/core';
 import { createContext, useRef, useEffect, useMemo, useState, useContext } from 'react';
 import '@mantine/core/styles.css';
 import '@mantine/notifications/styles.css';
@@ -163,11 +163,11 @@ var colorNames = {
   Yellow: { r: 255, g: 255, b: 0 },
   YellowGreen: { r: 154, g: 205, b: 50 }
 };
-function colorWithAlpha(color, alpha) {
+function colorWithAlpha(color, alpha2) {
   const lowerCasedColor = color.toLowerCase();
   if (colorNames[lowerCasedColor]) {
     const rgb = colorNames[lowerCasedColor];
-    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha2})`;
   }
   if (/^#([A-Fa-f0-9]{6})$/.test(color)) {
     const hex = color.slice(1);
@@ -175,12 +175,12 @@ function colorWithAlpha(color, alpha) {
     const r = bigint >> 16 & 255;
     const g = bigint >> 8 & 255;
     const b = bigint & 255;
-    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    return `rgba(${r}, ${g}, ${b}, ${alpha2})`;
   }
   if (/^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/.test(color)) {
     const result = color.match(/^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/);
     if (result) {
-      return `rgba(${result[1]}, ${result[2]}, ${result[3]}, ${alpha})`;
+      return `rgba(${result[1]}, ${result[2]}, ${result[3]}, ${alpha2})`;
     }
   }
   return color;
@@ -1414,7 +1414,7 @@ function SegmentedControl(props) {
       bg: "rgba(33, 33, 33, 0.6)",
       w: props.w || "fit-content",
       style: {
-        borderRadius: theme2.radius.xs,
+        borderRadius: props.enableRadius !== false ? theme2.radius.xs : 0,
         overflow: "hidden"
       },
       ...props,
@@ -1438,6 +1438,7 @@ function SegmentedControl(props) {
               icon: item.icon,
               rightSection: item.rightSection,
               fz: props.fz,
+              color: props.color,
               selected: !props.multi ? props.value === item.value : Array.isArray(props.value) && props.value.includes(item.value),
               onClick: () => {
                 if (props.multi) {
@@ -1466,7 +1467,7 @@ function Segment(props) {
       direction: "column",
       align: "center",
       h: "100%",
-      bg: props.selected ? colorWithAlpha(theme2.colors[theme2.primaryColor][theme2.primaryShade], 0.2) : "transparent",
+      bg: props.selected ? props.color ? alpha(props.color, 0.2) : colorWithAlpha(theme2.colors[theme2.primaryColor][theme2.primaryShade], 0.2) : "transparent",
       pos: "relative",
       style: {
         // position: "relative",
@@ -1488,10 +1489,10 @@ function Segment(props) {
                 {
                   icon: props.icon,
                   initial: {
-                    color: props.selected ? theme2.colors[theme2.primaryColor][5] : "inherit"
+                    color: props.selected ? props.color || theme2.colors[theme2.primaryColor][5] : "inherit"
                   },
                   animate: {
-                    color: props.selected ? theme2.colors[theme2.primaryColor][5] : "inherit"
+                    color: props.selected ? props.color || theme2.colors[theme2.primaryColor][5] : "inherit"
                   },
                   exit: {
                     color: "inherit"
@@ -1507,10 +1508,10 @@ function Segment(props) {
                 {
                   size: props.fz || "xs",
                   initial: {
-                    color: props.selected ? theme2.colors[theme2.primaryColor][5] : "inherit"
+                    color: props.selected ? props.color || theme2.colors[theme2.primaryColor][5] : "inherit"
                   },
                   animate: {
-                    color: props.selected ? theme2.colors[theme2.primaryColor][5] : "inherit"
+                    color: props.selected ? props.color || theme2.colors[theme2.primaryColor][5] : "inherit"
                   },
                   exit: {
                     color: "inherit"
@@ -1546,7 +1547,7 @@ function Segment(props) {
               left: 0,
               right: 0,
               height: "0.2vh",
-              backgroundColor: theme2.colors[theme2.primaryColor][5],
+              backgroundColor: props.color || theme2.colors[theme2.primaryColor][5],
               transformOrigin: "center"
             }
           }
@@ -1749,6 +1750,6 @@ function Title(props) {
   );
 }
 
-export { BorderedIcon, Counter, DirkProvider, FloatingParticles, InfoBox, InputContainer, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, Segment, SegmentedControl, SegmentedProgress, Title, TornEdgeSVGFilter, colorWithAlpha, copyToClipboard, createSkill, fetchNui, initialFetches, internalEvent, isEnvBrowser, isProfanity, locale, localeStore, noop, numberToRoman, openLink, registerInitialFetch, runFetches, splitFAString, useAutoFetcher, useNavigation, useNavigationStore, useNuiEvent, useProfanityStore, useSettings, useTornEdges };
+export { BorderedIcon, Counter, DirkProvider, FloatingParticles, InfoBox, InputContainer, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, SegmentedControl, SegmentedProgress, Title, TornEdgeSVGFilter, colorWithAlpha, copyToClipboard, createSkill, fetchNui, initialFetches, internalEvent, isEnvBrowser, isProfanity, locale, localeStore, noop, numberToRoman, openLink, registerInitialFetch, runFetches, splitFAString, useAutoFetcher, useNavigation, useNavigationStore, useNuiEvent, useProfanityStore, useSettings, useTornEdges };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map