@yr3/ui 1.0.15 → 1.0.16

package/dist/index.js

@@ -344,6 +344,15 @@ function mergeDeep(target, source) {
   return output;
 }
 
+// src/utils/input.ts
+var inputCurrency = (e, value, alloweds) => {
+  const allowed = ["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab"].concat(alloweds);
+  if (allowed.includes(e.key)) return;
+  if (/^\d$/.test(e.key)) return;
+  if ((e.key === "," || e.key === ".") && !(value || "").includes(",") && !(value || "").includes(".")) return;
+  e.preventDefault();
+};
+
 // src/theme/breakpoint.ts
 var breakpoints = {
   xs: 0,
@@ -1542,7 +1551,14 @@ var initialComponents = {
   },
   item: {
     ui: {},
-    style: {}
+    style: {},
+    text: {
+      variant: "caption",
+      color: "primary",
+      as: "span",
+      ui: {},
+      style: {}
+    }
   }
 };
 var Group = ({
@@ -1552,8 +1568,10 @@ var Group = ({
   variant,
   type = "rounded",
   color = "primary",
-  propsComponent = initialComponents
+  exclude = false,
+  propsComponent
 }) => {
+  const properties = mergeDeep(initialComponents, propsComponent || {});
   const [internalValue, setInternalValue] = React10.useState(null);
   const isControlled = value !== void 0;
   React10.useEffect(() => {
@@ -1562,20 +1580,51 @@ var Group = ({
     }
   }, [value, isControlled]);
   const classItems = bem("yr3Group--item");
+  const clasess = (item) => classItems(void 0, {
+    item: !!item,
+    active: !exclude ? Array.isArray(value) ? value.includes(item?.value) : internalValue === item.value : false,
+    exclude: exclude && Array.isArray(value) ? !value.includes(item?.value) : ""
+  });
+  const mappingStyle = React10.useMemo(() => {
+    if (!exclude) {
+      const checked = options.filter((opt) => Array.isArray(value) ? value.includes(opt.value) : internalValue === opt.value);
+      return checked.map((opt, index) => ({
+        ...opt,
+        index,
+        style: {
+          borderTopLeftRadius: index === 0 ? "var(--group-border-radius, 0px)" : 0,
+          borderBottomLeftRadius: index === 0 ? "var(--group-border-radius, 0px)" : 0,
+          borderTopRightRadius: index === checked.length - 1 ? "var(--group-border-radius, 0px)" : 0,
+          borderBottomRightRadius: index === checked.length - 1 ? "var(--group-border-radius, 0px)" : 0
+        }
+      }));
+    }
+    const diference = options.filter((opt) => Array.isArray(value) ? !value.includes(opt.value) : internalValue !== opt.value);
+    return diference.map((opt, index) => ({
+      ...opt,
+      index,
+      style: {
+        borderTopLeftRadius: index === 0 ? "var(--group-border-radius, 0px)" : 0,
+        borderBottomLeftRadius: index === 0 ? "var(--group-border-radius, 0px)" : 0,
+        borderTopRightRadius: index === diference.length - 1 ? "var(--group-border-radius, 0px)" : 0,
+        borderBottomRightRadius: index === diference.length - 1 ? "var(--group-border-radius, 0px)" : 0
+      }
+    }));
+  }, [exclude, value, options]);
   return /* @__PURE__ */ jsx20(
     "div",
     {
       className: groupVariants({ variant, color, type }),
       "data-testid": "yr3Group",
-      style: composeStyles(propsComponent.group?.ui, propsComponent.group?.style),
-      children: options.map((opt) => /* @__PURE__ */ jsx20(
+      style: composeStyles(properties.group?.ui, properties.group?.style),
+      children: options.map((opt, index) => /* @__PURE__ */ jsx20(
         "div",
         {
           "data-testid": "yr3Group-item",
-          className: classItems(void 0, { item: !!opt, active: internalValue === opt.value || Array.isArray(value) && value.includes(opt.value) }),
-          onClick: () => onChange?.(opt.value),
-          style: composeStyles(propsComponent.item?.ui, propsComponent.item?.style),
-          children: opt.label
+          className: clasess(opt),
+          onClick: () => (!opt.disabled && !exclude || exclude && mappingStyle?.find((e) => e.value === opt.value)?.index === 0) && onChange?.(opt.value),
+          style: composeStyles(properties.item?.ui, { ...properties.item?.style, ...mappingStyle?.find((o) => o.value === opt.value)?.style }),
+          children: /* @__PURE__ */ jsx20(Text, { ...properties.item?.text, children: opt.label })
         },
         opt.value
       ))
@@ -1745,11 +1794,12 @@ var Input = React12.forwardRef(
     defaultValue,
     onChange,
     variant = "outlined",
-    error = null,
+    error = "ce un errore",
+    separatorCurrency = ",",
     ui,
     style,
     propsComponent = initiaPropsComponent,
-    type = "text",
+    pattern = "text",
     color = "primary",
     size = "auto",
     ...props
@@ -1759,20 +1809,24 @@ var Input = React12.forwardRef(
     const isControlled = value !== void 0;
     const currentValue = isControlled ? value : internalValue;
     const isActive = focused || !!currentValue;
-    const checkPattern = (type2, value2) => {
-      switch (type2) {
+    const checkPattern = (type, value2) => {
+      switch (type) {
         case "email":
           return /^[\w.-]+@[\w.-]+\.\w{2,}$/.test(value2);
         case "phone":
           return /^\d{10}$/.test(value2);
         case "number":
           return /^\d+$/.test(value2);
+        case "currency":
+          if (separatorCurrency === ",") return /^\d+(\,\d{0,2})?$/.test(value2);
+          if (separatorCurrency === ".") return /^\d+(\.\d{0,2})?$/.test(value2);
         default:
           return true;
       }
     };
     const handleChange = (e) => {
       const newValue = e.target.value;
+      if (newValue && !checkPattern(pattern, newValue)) return;
       if (!isControlled) {
         setInternalValue(newValue);
       }
@@ -1794,10 +1848,10 @@ var Input = React12.forwardRef(
         {
           ref,
           value: currentValue,
-          type,
+          inputMode: pattern === "currency" ? "numeric" : pattern === "phone" ? "tel" : void 0,
           autoComplete: "off",
+          type: "text",
           onChange: handleChange,
-          onKeyDown: (e) => checkPattern(type, e.key),
           onFocus: () => setFocused(true),
           onBlur: () => setFocused(false),
           className: classes,
@@ -2430,104 +2484,7 @@ var Radio = ({
 };
 
 // src/components/Select/Select.tsx
-import * as React22 from "react";
-
-// src/theme/ThemeProvider.tsx
-import * as React20 from "react";
-
-// src/theme/notistackContext.tsx
 import * as React19 from "react";
-import { jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
-var NotistackContext = React19.createContext(null);
-var NotistackProvider = ({ children }) => {
-  const [snacks, setSnacks] = React19.useState([]);
-  const notistack = (snack) => {
-    const id = Date.now();
-    setSnacks((prev) => [...prev, { ...snack, id, exiting: false }]);
-    const duration = snack.duration || 3e3;
-    const exitDuration = 300;
-    setTimeout(() => {
-      setSnacks(
-        (prev) => prev.map((s) => s.id === id ? { ...s, exiting: true } : s)
-      );
-    }, duration);
-    setTimeout(() => {
-      setSnacks((prev) => prev.filter((s) => s.id !== id));
-    }, duration + exitDuration);
-  };
-  return /* @__PURE__ */ jsxs15(NotistackContext.Provider, { value: { notistack }, children: [
-    children,
-    /* @__PURE__ */ jsx36("div", { className: "yr3NotistackContainer", children: snacks.map((snack) => /* @__PURE__ */ jsx36(Notistack, { ...snack }, snack.id)) })
-  ] });
-};
-var useNotistack = () => {
-  const ctx = React19.useContext(NotistackContext);
-  if (!ctx) {
-    throw new Error("NotistackProvider missing");
-  }
-  return ctx;
-};
-
-// src/theme/ThemeProvider.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
-var ThemeContext = React20.createContext(null);
-var ThemeProvider = ({ theme, children }) => {
-  React20.useEffect(() => {
-    applyTheme(theme);
-  }, [theme]);
-  return /* @__PURE__ */ jsx37(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx37(BackdropProvider, { children: /* @__PURE__ */ jsx37(NotistackProvider, { children }) }) });
-};
-var useTheme = () => React20.useContext(ThemeContext);
-
-// src/theme/tokens.ts
-var baseTokens = {
-  colors: {
-    primary: "#6C5CE7",
-    secondary: "#00CEC9",
-    background: "#0f0f1a",
-    surface: "#1a1a2e",
-    textPrimary: "#ffffff",
-    textSecondary: "#b2bec3"
-  },
-  spacing: (factor) => `${factor * 8}px`,
-  radius: {
-    sm: "6px",
-    md: "12px",
-    lg: "20px"
-  }
-};
-
-// src/theme/useMediaQuery.tsx
-import * as React21 from "react";
-function useMediaQuery(query) {
-  const theme = useTheme();
-  const computedQuery = typeof query === "function" ? query(theme) : query;
-  const [matches, setMatches] = React21.useState(() => {
-    if (typeof window === "undefined") return false;
-    return window.matchMedia(computedQuery).matches;
-  });
-  React21.useEffect(() => {
-    if (typeof window === "undefined") return;
-    const media = window.matchMedia(computedQuery);
-    const listener = () => setMatches(media.matches);
-    media.addEventListener("change", listener);
-    return () => media.removeEventListener("change", listener);
-  }, [computedQuery]);
-  return matches;
-}
-function useBreakpointValue(values) {
-  const xs = useMediaQuery(`(min-width: ${breakpoints.xs}px)`);
-  const sm = useMediaQuery(`(min-width: ${breakpoints.sm}px)`);
-  const md = useMediaQuery(`(min-width: ${breakpoints.md}px)`);
-  const lg = useMediaQuery(`(min-width: ${breakpoints.lg}px)`);
-  const xl = useMediaQuery(`(min-width: ${breakpoints.xl}px)`);
-  if (xl && values.xl !== void 0) return values.xl;
-  if (lg && values.lg !== void 0) return values.lg;
-  if (md && values.md !== void 0) return values.md;
-  if (sm && values.sm !== void 0) return values.sm;
-  if (xs && values.xs !== void 0) return values.xs;
-  return void 0;
-}
 
 // src/components/Select/select.variants.ts
 var selectVariants = createVariants({
@@ -2587,7 +2544,7 @@ var selectIconVariants = createVariants({
 });
 
 // src/components/Select/Select.tsx
-import { jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
 var initiaPropsComponent3 = {
   control: {
     variant: "outlined",
@@ -2627,36 +2584,35 @@ var initiaPropsComponent3 = {
   }
 };
 var Select = ({ label, options, name, value, defaultValue, onChange, propsComponent }) => {
-  const [open, setOpen] = React22.useState(false);
-  const [valueState, setValueState] = React22.useState(value || defaultValue || null);
-  const ref = React22.useRef(null);
+  const [open, setOpen] = React19.useState(false);
+  const [valueState, setValueState] = React19.useState(value || defaultValue || null);
+  const ref = React19.useRef(null);
   useClickAway(ref, () => setOpen(false));
-  const theme = useTheme();
   const properties = mergeDeep(initiaPropsComponent3, propsComponent || {});
   const classesIcon = selectIconVariants({ color: properties?.icon?.color, animated: open, open });
   const classes = selectVariants({ wrapper: true });
-  return /* @__PURE__ */ jsxs16("div", { className: classes, ref, children: [
-    /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsxs15("div", { className: classes, ref, children: [
+    /* @__PURE__ */ jsx36(
       Input,
       {
         label,
         variant: "base",
         disabled: true,
-        value: valueState,
+        value: options.find((opt) => opt.value === valueState)?.label || "",
         propsComponent: {
           control: properties?.control,
           label: properties?.label
         }
       }
     ),
-    /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx36(
       "div",
       {
         className: classesIcon,
         style: properties?.icon?.style,
         onClick: () => setOpen((prev) => !prev),
         "data-testid": "yr3Select-icon",
-        children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ jsx38(
+        children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ jsx36(
           IconDown,
           {
             width: properties?.icon?.style?.width,
@@ -2667,13 +2623,13 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
         )
       }
     ),
-    open && /* @__PURE__ */ jsx38(
+    open && /* @__PURE__ */ jsx36(
       "div",
       {
         className: "yr3Select--menu",
         style: composeStyles(properties?.menu?.ui, properties?.menu?.style),
         "data-testid": "yr3Select-menu",
-        children: options.map((opt) => /* @__PURE__ */ jsx38(
+        children: options.map((opt) => /* @__PURE__ */ jsx36(
           "div",
           {
             className: "yr3Select--option",
@@ -2695,7 +2651,7 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
               onChange?.(event, opt.value);
             },
             style: composeStyles(properties?.menu?.options?.ui, properties?.menu?.options?.style),
-            children: /* @__PURE__ */ jsx38(Text, { as: "span", variant: "caption", color: properties?.menu?.options?.text?.color || "primary", ...properties?.menu?.options?.text, children: opt.label })
+            children: /* @__PURE__ */ jsx36(Text, { as: "span", variant: "caption", color: properties?.menu?.options?.text?.color || "primary", ...properties?.menu?.options?.text, children: opt.label })
           },
           opt.value
         ))
@@ -2705,8 +2661,15 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
 };
 
 // src/components/Slide/Slide.tsx
-import * as React23 from "react";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import * as React20 from "react";
+import { jsx as jsx37 } from "react/jsx-runtime";
+var initialPropsComponent4 = {
+  slide: {
+    ui: {},
+    style: {}
+  },
+  box: {}
+};
 var Slide = ({
   in: inProp,
   children,
@@ -2715,12 +2678,14 @@ var Slide = ({
   onTransitionEnd,
   propsComponent
 }) => {
+  const properties = mergeDeep(initialPropsComponent4, propsComponent || {});
   const bemContent = bem("yr3Slide--content");
   const classNameContent = bemContent(void 0, {
     [direction]: true,
-    "in": !!inProp
+    "in": !!inProp,
+    "out": !inProp
   });
-  React23.useEffect(() => {
+  React20.useEffect(() => {
     let timeoutId;
     if (inProp) {
       timeoutId = setTimeout(() => {
@@ -2729,20 +2694,20 @@ var Slide = ({
     }
     return () => clearTimeout(timeoutId);
   }, [inProp, duration, onTransitionEnd]);
-  const uiStyleContent = uiStyle({ ...propsComponent?.slide?.ui, transitionDuration: `${duration}ms` });
-  return /* @__PURE__ */ jsx39(
+  const uiStyleContent = uiStyle({ ...properties?.slide?.ui, transitionDuration: `${duration}ms` });
+  return /* @__PURE__ */ jsx37(
     "div",
     {
       className: "yr3Slide",
-      style: uiStyle({ position: "relative", zIndex: 4, overflow: "hidden" }),
+      style: composeStyles(),
       "data-testid": "yr3Slide",
-      children: /* @__PURE__ */ jsx39(
+      children: /* @__PURE__ */ jsx37(
         "div",
         {
           className: classNameContent,
-          style: composeStyles(uiStyleContent, propsComponent?.slide?.style || {}),
+          style: composeStyles(uiStyleContent, properties?.slide?.style || {}),
           "data-testid": "yr3Slide-content",
-          children: /* @__PURE__ */ jsx39(Box, { ...propsComponent?.box, "data-testid": "yr3Slide-box", children })
+          children: /* @__PURE__ */ jsx37(Box, { ...properties?.box, "data-testid": "yr3Slide-box", children })
         }
       )
     }
@@ -2750,7 +2715,7 @@ var Slide = ({
 };
 
 // src/components/Switch/Switch.tsx
-import * as React24 from "react";
+import * as React21 from "react";
 
 // src/components/Switch/switch.variants.ts
 var switchVariants = createVariants({
@@ -2787,7 +2752,7 @@ var switchVariants = createVariants({
 });
 
 // src/components/Switch/Switch.tsx
-import { jsx as jsx40, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
 var Switch = ({
   checked,
   defaultChecked,
@@ -2799,7 +2764,7 @@ var Switch = ({
   placement = "end",
   propsComponent
 }) => {
-  const [internal, setInternal] = React24.useState(defaultChecked || false);
+  const [internal, setInternal] = React21.useState(defaultChecked || false);
   const classname = switchVariants({ colors: color, size, disabled: !!disabled, checked: checked ?? internal, placement });
   const isControlled = checked !== void 0;
   const value = isControlled ? checked : internal;
@@ -2807,13 +2772,13 @@ var Switch = ({
     if (!isControlled) setInternal(e.target.checked);
     onChange?.(e, e.target.checked);
   };
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs16(
     "label",
     {
       className: classname,
       "data-testid": "yr3Switch",
       children: [
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx38(
           "input",
           {
             type: "checkbox",
@@ -2822,8 +2787,8 @@ var Switch = ({
             disabled
           }
         ),
-        /* @__PURE__ */ jsx40("span", { className: "yr3Switch--track", children: /* @__PURE__ */ jsx40("span", { className: "yr3Switch--thumb" }) }),
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx38("span", { className: "yr3Switch--track", children: /* @__PURE__ */ jsx38("span", { className: "yr3Switch--thumb" }) }),
+        /* @__PURE__ */ jsx38(
           "span",
           {
             className: "yr3Switch--label",
@@ -2838,9 +2803,9 @@ var Switch = ({
 };
 
 // src/Icons/IconSearch.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var IconSearch = (props) => {
-  return /* @__PURE__ */ jsx41("svg", { width: props.width || "64px", height: props.height || "64px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx39("svg", { width: props.width || "64px", height: props.height || "64px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx39(
     "path",
     {
       d: "M15.7955 15.8111L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z",
@@ -2852,6 +2817,103 @@ var IconSearch = (props) => {
   ) });
 };
 
+// src/theme/ThemeProvider.tsx
+import * as React23 from "react";
+
+// src/theme/notistackContext.tsx
+import * as React22 from "react";
+import { jsx as jsx40, jsxs as jsxs17 } from "react/jsx-runtime";
+var NotistackContext = React22.createContext(null);
+var NotistackProvider = ({ children }) => {
+  const [snacks, setSnacks] = React22.useState([]);
+  const notistack = (snack) => {
+    const id = Date.now();
+    setSnacks((prev) => [...prev, { ...snack, id, exiting: false }]);
+    const duration = snack.duration || 3e3;
+    const exitDuration = 300;
+    setTimeout(() => {
+      setSnacks(
+        (prev) => prev.map((s) => s.id === id ? { ...s, exiting: true } : s)
+      );
+    }, duration);
+    setTimeout(() => {
+      setSnacks((prev) => prev.filter((s) => s.id !== id));
+    }, duration + exitDuration);
+  };
+  return /* @__PURE__ */ jsxs17(NotistackContext.Provider, { value: { notistack }, children: [
+    children,
+    /* @__PURE__ */ jsx40("div", { className: "yr3NotistackContainer", children: snacks.map((snack) => /* @__PURE__ */ jsx40(Notistack, { ...snack }, snack.id)) })
+  ] });
+};
+var useNotistack = () => {
+  const ctx = React22.useContext(NotistackContext);
+  if (!ctx) {
+    throw new Error("NotistackProvider missing");
+  }
+  return ctx;
+};
+
+// src/theme/ThemeProvider.tsx
+import { jsx as jsx41 } from "react/jsx-runtime";
+var ThemeContext = React23.createContext(null);
+var ThemeProvider = ({ theme, children }) => {
+  React23.useEffect(() => {
+    applyTheme(theme);
+  }, [theme]);
+  return /* @__PURE__ */ jsx41(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx41(BackdropProvider, { children: /* @__PURE__ */ jsx41(NotistackProvider, { children }) }) });
+};
+var useTheme = () => React23.useContext(ThemeContext);
+
+// src/theme/tokens.ts
+var baseTokens = {
+  colors: {
+    primary: "#6C5CE7",
+    secondary: "#00CEC9",
+    background: "#0f0f1a",
+    surface: "#1a1a2e",
+    textPrimary: "#ffffff",
+    textSecondary: "#b2bec3"
+  },
+  spacing: (factor) => `${factor * 8}px`,
+  radius: {
+    sm: "6px",
+    md: "12px",
+    lg: "20px"
+  }
+};
+
+// src/theme/useMediaQuery.tsx
+import * as React24 from "react";
+function useMediaQuery(query) {
+  const theme = useTheme();
+  const computedQuery = typeof query === "function" ? query(theme) : query;
+  const [matches, setMatches] = React24.useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(computedQuery).matches;
+  });
+  React24.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const media = window.matchMedia(computedQuery);
+    const listener = () => setMatches(media.matches);
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+  }, [computedQuery]);
+  return matches;
+}
+function useBreakpointValue(values) {
+  const xs = useMediaQuery(`(min-width: ${breakpoints.xs}px)`);
+  const sm = useMediaQuery(`(min-width: ${breakpoints.sm}px)`);
+  const md = useMediaQuery(`(min-width: ${breakpoints.md}px)`);
+  const lg = useMediaQuery(`(min-width: ${breakpoints.lg}px)`);
+  const xl = useMediaQuery(`(min-width: ${breakpoints.xl}px)`);
+  if (xl && values.xl !== void 0) return values.xl;
+  if (lg && values.lg !== void 0) return values.lg;
+  if (md && values.md !== void 0) return values.md;
+  if (sm && values.sm !== void 0) return values.sm;
+  if (xs && values.xs !== void 0) return values.xs;
+  return void 0;
+}
+
 // src/hooks/usePlaces.ts
 import { useAutocompletePlaces as useAutocompletePlaces2 } from "@yr3/autocomplete-places";
 var usePlaces = ({ input, language, apiKey, provider }) => {
@@ -2965,6 +3027,7 @@ export {
   getNumberPhone,
   hexToRgb,
   initTheme,
+  inputCurrency,
   isEmpty,
   lighten,
   mergeDeep,

package/dist/styles/index.css

@@ -1351,21 +1351,22 @@ input[type=date]::-webkit-calendar-picker-indicator {
   border-color: var(--group-border-color, var(--color-primary));
   background: var(--bg-group, var(--color-primary));
   --group-bg-item: var(--color-surface, #fff);
-  border-radius: var(--group-border-radius, 40px);
-}
-.yr3Group--filled .yr3Group--item {
-  color: var(--color-surface, var(--color-surface));
-  border-radius: var(--group-border-radius, 40px);
+  transition: all 0.2s;
 }
 .yr3Group--filled .yr3Group--item--active {
   background: var(--color-surface);
   color: var(--group-color-text);
+  border-radius: var(--group-border-radius, 0px);
+}
+.yr3Group--filled .yr3Group--item--exclude {
+  background: var(--color-surface);
+  color: var(--group-color-text);
 }
 
 .yr3Group--outlined {
   border: 1px solid;
   border-color: var(--group-border-color, var(--color-primary));
-  border-radius: var(--group-border-radius, 40px);
+  transition: all 0.2s;
 }
 .yr3Group--outlined .yr3Group--item {
   background: var(--group-bg-item, transparent);
@@ -1374,6 +1375,11 @@ input[type=date]::-webkit-calendar-picker-indicator {
 .yr3Group--outlined .yr3Group--item--active {
   background: var(--group-active, var(--color-surface));
   color: var(--color-surface);
+  border-radius: var(--group-border-radius, 0px);
+}
+.yr3Group--outlined .yr3Group--item--exclude {
+  background: var(--color-surface);
+  color: var(--group-color-text);
 }
 
 .yr3Group--text {
@@ -2569,6 +2575,10 @@ input::placeholder {
   transform: translate(0, 0);
 }
 
+.yr3Slide--content--out {
+  transition: all 0.3s ease;
+}
+
 .yr3Switch {
   display: inline-flex;
   align-items: center;