npm - @intlayer/design-system - Versions diffs - 3.0.3 → 3.2.0 - Mend

@intlayer/design-system 3.0.3 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (648) hide show

package/dist/components/Navbar/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sources":["../../../src/components/Navbar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, ~~MouseEventHandler,~~ ReactNode } from 'react';\nimport { useDevice, useIsMounted } from '../../hooks';\nimport { DesktopNavbar } from './DesktopNavbar';\nimport { MobileNavbar } from './MobileNavbar';\n\~~nexport~~ ~~interface~~ ~~NavSection~~ {\n ~~title~~: ReactNode;\n id: ~~string~~;\n ~~onClick: MouseEventHandler;\n url?: string;\n label: string;\n}\n\ninterface NavbarProps {\n logo: ReactNode;\n~~ desktopSections?: ~~NavSection~~[];\n mobileTopChildren?: ReactNode;\n mobileTopSections?: ~~NavSection~~[];\n mobileBottomChildren?: ReactNode;\n mobileBottomSections?: ~~NavSection~~[];\n rightItemsDesktop?: ReactNode;\n rightItemsMobile?: ReactNode;\n}\n\nexport const Navbar: FC<~~NavbarProps>~~ = ({\n logo,\n mobileTopChildren,\n desktopSections = [],\n mobileTopSections = [],\n mobileBottomChildren,\n mobileBottomSections = [],\n rightItemsDesktop,\n rightItemsMobile,\n}) => {\n const { isMobile } = useDevice();\n const isMoUnted = useIsMounted();\n\n if (!isMoUnted) return <></>;\n\n return isMobile ? (\n <MobileNavbar\n topChildren={mobileTopChildren}\n topSections={mobileTopSections}\n bottomChildren={mobileBottomChildren}\n bottomSections={mobileBottomSections}\n logo={logo}\n rightItems={rightItemsMobile}\n />\n ) : (\n <DesktopNavbar\n sections={desktopSections}\n rightItems={rightItemsDesktop}\n logo={logo}\n />\n );\n};\n"],"names":["useDevice","useIsMounted","jsx","Fragment","MobileNavbar","DesktopNavbar"],"mappings":"~~;;;;;;;;;;;;;;;;;;;AA0BO~~,MAAM,~~SAA0B~~,~~CAAC~~;AAAA,~~EACtC~~;AAAA,EACA;AAAA,EACA,kBAAkB,CAAC;AAAA,EACnB,oBAAoB,CAAC;AAAA,EACrB;AAAA,EACA,uBAAuB,CAAC;AAAA,EACxB;AAAA,EACA;AACF,~~MAAM~~;~~AACE~~,QAAA,EAAE,aAAaA,gBAAAA;AACrB,QAAM,YAAYC,mBAAAA;AAEd,MAAA,CAAC,UAAW,QAASC,2BAAA,kBAAA,IAAAC,WAAA,kBAAA,UAAA,CAAA,CAAA;AAEzB,SAAO,WACLD,2BAAA,kBAAA;AAAA,IAACE,+BAAA;AAAA,IAAA;AAAA,MACC,aAAa;AAAA,MACb,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB;AAAA,MACA,YAAY;AAAA,IAAA;AAAA,EAAA,IAGdF,2BAAA,kBAAA;AAAA,IAACG,gCAAA;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAY;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAGN;;"}
1	+ {"version":3,"file":"index.cjs","sources":["../../../src/components/Navbar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode } from 'react';\nimport { useDevice, useIsMounted } from '../../hooks';\nimport { TabProps } from '../TabSelector';\nimport { DesktopNavbar } from './DesktopNavbar';\nimport { MobileNavbar } from './MobileNavbar';\n\ntype NavbarProps<T extends TabProps> = {\n logo: ReactNode;\n selectedChoice: T['key'];\n desktopSections?: ReactElement<T>[];\n mobileTopChildren?: ReactNode;\n mobileTopSections?: ReactElement<T>[];\n mobileBottomChildren?: ReactNode;\n mobileBottomSections?: ReactElement<T>[];\n rightItemsDesktop?: ReactNode;\n rightItemsMobile?: ReactNode;\n};\n\nexport const Navbar = <T extends TabProps>({\n logo,\n mobileTopChildren,\n desktopSections = [],\n mobileTopSections = [],\n mobileBottomChildren,\n mobileBottomSections = [],\n rightItemsDesktop,\n rightItemsMobile,\n selectedChoice,\n}: NavbarProps<T>) => {\n const { isMobile } = useDevice();\n const isMoUnted = useIsMounted();\n\n if (!isMoUnted) return <></>;\n\n return isMobile ? (\n <MobileNavbar\n topChildren={mobileTopChildren}\n topSections={mobileTopSections}\n bottomChildren={mobileBottomChildren}\n bottomSections={mobileBottomSections}\n logo={logo}\n rightItems={rightItemsMobile}\n />\n ) : (\n <DesktopNavbar\n sections={desktopSections}\n rightItems={rightItemsDesktop}\n logo={logo}\n selectedChoice={selectedChoice}\n />\n );\n};\n"],"names":["useDevice","useIsMounted","jsx","Fragment","MobileNavbar","DesktopNavbar"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,SAAS,CAAqB;AAAA,EACzC;AAAA,EACA;AAAA,EACA,kBAAkB,CAAC;AAAA,EACnB,oBAAoB,CAAC;AAAA,EACrB;AAAA,EACA,uBAAuB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AACF,MAAsB;AACd,QAAA,EAAE,aAAaA,gBAAAA;AACrB,QAAM,YAAYC,mBAAAA;AAEd,MAAA,CAAC,UAAW,QAASC,2BAAA,kBAAA,IAAAC,WAAA,kBAAA,UAAA,CAAA,CAAA;AAEzB,SAAO,WACLD,2BAAA,kBAAA;AAAA,IAACE,+BAAA;AAAA,IAAA;AAAA,MACC,aAAa;AAAA,MACb,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB;AAAA,MACA,YAAY;AAAA,IAAA;AAAA,EAAA,IAGdF,2BAAA,kBAAA;AAAA,IAACG,gCAAA;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAGN;;"}

package/dist/components/Navbar/index.d.ts CHANGED Viewed

@@ -1,22 +1,16 @@
-import { FC, MouseEventHandler, ReactNode } from 'react';
-export interface NavSection {
-    title: ReactNode;
-    id: string;
-    onClick: MouseEventHandler;
-    url?: string;
-    label: string;
-}
-interface NavbarProps {
+import { ReactElement, ReactNode } from 'react';
+import { TabProps } from '../TabSelector';
+type NavbarProps<T extends TabProps> = {
     logo: ReactNode;
-    desktopSections?: NavSection[];
+    selectedChoice: T['key'];
+    desktopSections?: ReactElement<T>[];
     mobileTopChildren?: ReactNode;
-    mobileTopSections?: NavSection[];
+    mobileTopSections?: ReactElement<T>[];
     mobileBottomChildren?: ReactNode;
-    mobileBottomSections?: NavSection[];
+    mobileBottomSections?: ReactElement<T>[];
     rightItemsDesktop?: ReactNode;
     rightItemsMobile?: ReactNode;
-}
-export declare const Navbar: FC<NavbarProps>;
+};
+export declare const Navbar: <T extends TabProps>({ logo, mobileTopChildren, desktopSections, mobileTopSections, mobileBottomChildren, mobileBottomSections, rightItemsDesktop, rightItemsMobile, selectedChoice, }: NavbarProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Navbar/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,~~EAAE~~,EAAE,~~iBAAiB,EAAE,~~SAAS,EAAE,MAAM,OAAO,CAAC;~~AAK9D~~,MAAM,~~WAAW~~,~~UAAU~~;~~IACzB~~,KAAK,~~EAAE~~,~~SAAS~~,CAAC~~;IACjB~~,~~EAAE~~,~~EAAE~~,~~MAAM,CAAC~~;~~IACX~~,~~OAAO~~,EAAE,~~iBAAiB~~,CAAC;~~IAC3B~~,~~GAAG~~,~~CAAC,~~EAAE,~~MAAM~~,CAAC~~;IACb~~,KAAK,~~EAAE~~,~~MAAM,~~CAAC;~~CACf;AAED~~,~~UAAU~~,~~WAAW;IACnB~~,~~IAAI,~~EAAE,~~SAAS~~,CAAC~~;IAChB~~,~~eAAe~~,CAAC,EAAE,~~UAAU,EAAE,~~CAAC;~~IAC/B~~,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,iBAAiB,CAAC,EAAE,~~UAAU~~,EAAE,CAAC;~~IACjC~~,oBAAoB,CAAC,EAAE,SAAS,CAAC;IACjC,oBAAoB,CAAC,EAAE,~~UAAU~~,EAAE,CAAC;~~IACpC~~,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAC9B;~~AAED~~,eAAO,MAAM,MAAM,~~EAAE~~,~~EAAE,~~CAAC,WAAW,~~CA+BlC~~,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAI1C,KAAK,WAAW,CAAC,CAAC,SAAS,QAAQ,IAAI;IACrC,IAAI,EAAE,SAAS,CAAC;IAChB,cAAc,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IACzB,eAAe,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,iBAAiB,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACtC,oBAAoB,CAAC,EAAE,SAAS,CAAC;IACjC,oBAAoB,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACzC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,QAAQ,qKAUtC,WAAW,CAAC,CAAC,CAAC,4CAuBhB,CAAC"}

package/dist/components/Navbar/index.mjs CHANGED Viewed

@@ -5,12 +5,14 @@ import "react";
 import "../../hooks/useScrollBlockage/useScrollBlockageStore.mjs";
 import { useIsMounted } from "../../hooks/useIsMounted.mjs";
 import "../../hooks/useAsync/useAsyncStateStore.mjs";
-import "../Auth/AuthProvider/index.mjs";
 import "../../libs/intlayer-api/auth.mjs";
 import "../../libs/intlayer-api/dictionary.mjs";
 import "../../libs/intlayer-api/organization.mjs";
 import "../../libs/intlayer-api/project.mjs";
+import "../../libs/intlayer-api/stripe.mjs";
 import "../../libs/intlayer-api/user.mjs";
+import "@intlayer/config/client";
+import "../Toaster/Toast.mjs";
 import "@intlayer/dictionaries-entry";
 import "deepmerge";
 import { DesktopNavbar } from "./DesktopNavbar.mjs";
@@ -23,7 +25,8 @@ const Navbar = ({
   mobileBottomChildren,
   mobileBottomSections = [],
   rightItemsDesktop,
-  rightItemsMobile
+  rightItemsMobile,
+  selectedChoice
 }) => {
   const { isMobile } = useDevice();
   const isMoUnted = useIsMounted();
@@ -43,7 +46,8 @@ const Navbar = ({
     {
       sections: desktopSections,
       rightItems: rightItemsDesktop,
-      logo
+      logo,
+      selectedChoice
     }
   );
 };

package/dist/components/Navbar/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","sources":["../../../src/components/Navbar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, ~~MouseEventHandler,~~ ReactNode } from 'react';\nimport { useDevice, useIsMounted } from '../../hooks';\nimport { DesktopNavbar } from './DesktopNavbar';\nimport { MobileNavbar } from './MobileNavbar';\n\~~nexport~~ ~~interface~~ ~~NavSection~~ {\n ~~title~~: ReactNode;\n id: ~~string~~;\n ~~onClick: MouseEventHandler;\n url?: string;\n label: string;\n}\n\ninterface NavbarProps {\n logo: ReactNode;\n~~ desktopSections?: ~~NavSection~~[];\n mobileTopChildren?: ReactNode;\n mobileTopSections?: ~~NavSection~~[];\n mobileBottomChildren?: ReactNode;\n mobileBottomSections?: ~~NavSection~~[];\n rightItemsDesktop?: ReactNode;\n rightItemsMobile?: ReactNode;\n}\n\nexport const Navbar: FC<~~NavbarProps>~~ = ({\n logo,\n mobileTopChildren,\n desktopSections = [],\n mobileTopSections = [],\n mobileBottomChildren,\n mobileBottomSections = [],\n rightItemsDesktop,\n rightItemsMobile,\n}) => {\n const { isMobile } = useDevice();\n const isMoUnted = useIsMounted();\n\n if (!isMoUnted) return <></>;\n\n return isMobile ? (\n <MobileNavbar\n topChildren={mobileTopChildren}\n topSections={mobileTopSections}\n bottomChildren={mobileBottomChildren}\n bottomSections={mobileBottomSections}\n logo={logo}\n rightItems={rightItemsMobile}\n />\n ) : (\n <DesktopNavbar\n sections={desktopSections}\n rightItems={rightItemsDesktop}\n logo={logo}\n />\n );\n};\n"],"names":["jsx","Fragment"],"mappings":"~~;;;;;;;;;;;;;;;;;AA0BO~~,MAAM,~~SAA0B~~,~~CAAC~~;AAAA,~~EACtC~~;AAAA,EACA;AAAA,EACA,kBAAkB,CAAC;AAAA,EACnB,oBAAoB,CAAC;AAAA,EACrB;AAAA,EACA,uBAAuB,CAAC;AAAA,EACxB;AAAA,EACA;AACF,~~MAAM~~;~~AACE~~,QAAA,EAAE,aAAa;AACrB,QAAM,YAAY;AAEd,MAAA,CAAC,UAAW,QAASA,kCAAA,IAAAC,kBAAA,UAAA,CAAA,CAAA;AAEzB,SAAO,WACLD,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAa;AAAA,MACb,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB;AAAA,MACA,YAAY;AAAA,IAAA;AAAA,EAAA,IAGdA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAY;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
1	+ {"version":3,"file":"index.mjs","sources":["../../../src/components/Navbar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode } from 'react';\nimport { useDevice, useIsMounted } from '../../hooks';\nimport { TabProps } from '../TabSelector';\nimport { DesktopNavbar } from './DesktopNavbar';\nimport { MobileNavbar } from './MobileNavbar';\n\ntype NavbarProps<T extends TabProps> = {\n logo: ReactNode;\n selectedChoice: T['key'];\n desktopSections?: ReactElement<T>[];\n mobileTopChildren?: ReactNode;\n mobileTopSections?: ReactElement<T>[];\n mobileBottomChildren?: ReactNode;\n mobileBottomSections?: ReactElement<T>[];\n rightItemsDesktop?: ReactNode;\n rightItemsMobile?: ReactNode;\n};\n\nexport const Navbar = <T extends TabProps>({\n logo,\n mobileTopChildren,\n desktopSections = [],\n mobileTopSections = [],\n mobileBottomChildren,\n mobileBottomSections = [],\n rightItemsDesktop,\n rightItemsMobile,\n selectedChoice,\n}: NavbarProps<T>) => {\n const { isMobile } = useDevice();\n const isMoUnted = useIsMounted();\n\n if (!isMoUnted) return <></>;\n\n return isMobile ? (\n <MobileNavbar\n topChildren={mobileTopChildren}\n topSections={mobileTopSections}\n bottomChildren={mobileBottomChildren}\n bottomSections={mobileBottomSections}\n logo={logo}\n rightItems={rightItemsMobile}\n />\n ) : (\n <DesktopNavbar\n sections={desktopSections}\n rightItems={rightItemsDesktop}\n logo={logo}\n selectedChoice={selectedChoice}\n />\n );\n};\n"],"names":["jsx","Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;AAoBO,MAAM,SAAS,CAAqB;AAAA,EACzC;AAAA,EACA;AAAA,EACA,kBAAkB,CAAC;AAAA,EACnB,oBAAoB,CAAC;AAAA,EACrB;AAAA,EACA,uBAAuB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AACF,MAAsB;AACd,QAAA,EAAE,aAAa;AACrB,QAAM,YAAY;AAEd,MAAA,CAAC,UAAW,QAASA,kCAAA,IAAAC,kBAAA,UAAA,CAAA,CAAA;AAEzB,SAAO,WACLD,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAa;AAAA,MACb,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB;AAAA,MACA,YAAY;AAAA,IAAA;AAAA,EAAA,IAGdA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Pattern/DotPattern.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { FC, SVGProps } from 'react';
 type DotPatternProps = {
     width?: number;
     height?: number;

package/dist/components/Pattern/GridPattern.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { FC, SVGProps } from 'react';
 type GridPatternProps = {
     width?: number;
     height?: number;

package/dist/components/Pattern/SpotLight.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { FC, SVGProps } from 'react';
 type SpotlightProps = {
     fill?: string;
     cx?: number;

package/dist/components/Popover/index.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { FC, ReactNode } from 'react';
 type PopoverProps = {
     content: ReactNode | string;
     children: ReactNode;

package/dist/components/PressableSpan/PressableSpan.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { FC, HTMLAttributes } from 'react';
 type PressableDivProps = {
     onPress: () => void;
     onClickOutside?: () => void;

package/dist/components/ProfileDropDown/index.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import { FC, PropsWithChildren } from 'react';
 import { AvatarProps } from '../Avatar';
 type ProfileDropDownProps = PropsWithChildren<AvatarProps>;
 export declare const ProfileDropDown: FC<ProfileDropDownProps>;
 export {};

package/dist/components/RightDrawer/RightDrawer.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { ReactNode, FC } from 'react';
 type BackButtonProps = {
     onBack: () => void;
     text?: string;

package/dist/components/Select/Multiselect.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import { ComponentPropsWithoutRef, FC, HTMLAttributes } from 'react';
 import { Command, CommandRoot } from '../Command';
 /**
  * MultiSelect Docs: {@link: https://shadcn-extension.vercel.app/docs/multi-select}
  */
@@ -45,7 +44,7 @@ declare const MultiSelectList: import('react').ForwardRefExoticComponent<Omit<Om
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "key" | "asChild" | keyof HTMLAttributes<HTMLDivElement>> & {
     label?: string;
 } & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 declare const MultiSelectItem: import('react').ForwardRefExoticComponent<{
@@ -56,7 +55,7 @@ declare const MultiSelectItem: import('react').ForwardRefExoticComponent<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "onSelect" | "disabled"> & {
+}, "key" | "asChild" | keyof HTMLAttributes<HTMLDivElement>>, "onSelect" | "value" | "disabled"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

package/dist/components/Select/Multiselect.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Multiselect.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Multiselect.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,wBAAwB,EAG7B,KAAK,EAAE,EACP,KAAK,cAAc,EAcpB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAyBlD;;GAEG;AAEH,KAAK,gBAAgB,GAAG,wBAAwB,CAAC,OAAO,WAAW,CAAC,GAAG;IACrE,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,gBAAgB,CAmLzC,CAAC;AAEF,QAAA,MAAM,kBAAkB;oBAGJ,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM;6BAChB,OAAO;kDAiEnC,CAAC;AAIF,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,wBAAwB,CAAC,OAAO,OAAO,CAAC,KAAK,CAAC,CAgCxE,CAAC;AAIF,QAAA,MAAM,kBAAkB,2HAUtB,CAAC;AAIH,QAAA,MAAM,eAAe;~~qBAjYF~~,SAAS;;~~gBA6ZX~~,GAAG;;;;;~~kKAZlB~~,CAAC;AAIH,QAAA,MAAM,eAAe;WAEV,MAAM;;~~qBAvZE~~,SAAS;;~~gBAibsB~~,GAAG;;;;;;;;;~~kKAQnD~~,CAAC;AAIH,KAAK,eAAe,GAAG,OAAO,eAAe,GAAG;IAC9C,OAAO,EAAE,OAAO,kBAAkB,CAAC;IACnC,KAAK,EAAE,OAAO,gBAAgB,CAAC;IAC/B,OAAO,EAAE,OAAO,kBAAkB,CAAC;IACnC,IAAI,EAAE,OAAO,eAAe,CAAC;IAC7B,IAAI,EAAE,OAAO,eAAe,CAAC;CAC9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,WAAW,EAAsB,eAAe,CAAC"}
1	+ {"version":3,"file":"Multiselect.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Multiselect.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,wBAAwB,EAG7B,KAAK,EAAE,EACP,KAAK,cAAc,EAcpB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAyBlD;;GAEG;AAEH,KAAK,gBAAgB,GAAG,wBAAwB,CAAC,OAAO,WAAW,CAAC,GAAG;IACrE,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,gBAAgB,CAmLzC,CAAC;AAEF,QAAA,MAAM,kBAAkB;oBAGJ,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM;6BAChB,OAAO;kDAiEnC,CAAC;AAIF,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,wBAAwB,CAAC,OAAO,OAAO,CAAC,KAAK,CAAC,CAgCxE,CAAC;AAIF,QAAA,MAAM,kBAAkB,2HAUtB,CAAC;AAIH,QAAA,MAAM,eAAe;qBA/XX,SAAS;;gBA0dc,GAAG;;;;;kKA3ElC,CAAC;AAIH,QAAA,MAAM,eAAe;WAEV,MAAM;;qBArZP,SAAS;;gBA+d2V,GAAG;;;;;;;;;kKAxC/W,CAAC;AAIH,KAAK,eAAe,GAAG,OAAO,eAAe,GAAG;IAC9C,OAAO,EAAE,OAAO,kBAAkB,CAAC;IACnC,KAAK,EAAE,OAAO,gBAAgB,CAAC;IAC/B,OAAO,EAAE,OAAO,kBAAkB,CAAC;IACnC,IAAI,EAAE,OAAO,eAAe,CAAC;IAC7B,IAAI,EAAE,OAAO,eAAe,CAAC;CAC9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,WAAW,EAAsB,eAAe,CAAC"}

package/dist/components/SwitchSelector/index.cjs CHANGED Viewed

@@ -6,12 +6,14 @@ const require$$0 = require("react");
 const classVarianceAuthority = require("class-variance-authority");
 require("../../hooks/useScrollBlockage/useScrollBlockageStore.cjs");
 require("../../hooks/useAsync/useAsyncStateStore.cjs");
-require("../Auth/AuthProvider/index.cjs");
 require("../../libs/intlayer-api/auth.cjs");
 require("../../libs/intlayer-api/dictionary.cjs");
 require("../../libs/intlayer-api/organization.cjs");
 require("../../libs/intlayer-api/project.cjs");
+require("../../libs/intlayer-api/stripe.cjs");
 require("../../libs/intlayer-api/user.cjs");
+require("@intlayer/config/client");
+require("../Toaster/Toast.cjs");
 const hooks_useItemSelector = require("../../hooks/useItemSelector.cjs");
 require("@intlayer/dictionaries-entry");
 require("deepmerge");

package/dist/components/SwitchSelector/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sources":["../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useRef, type ReactNode, type HTMLAttributes, useState } from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n content: ReactNode;\n value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n { content: 'Off', value: false },\n { content: 'On', value: true },\n];\n\ntype SwitchSelectorProps<T = boolean> = {\n choices?: SwitchSelectorChoices<T>;\n value?: T;\n defaultValue?: T;\n onChange?: (choice: T) => void;\n className?: string;\n} & VariantProps<typeof switchSelectorVariant> &\n VariantProps<typeof choiceVariant>;\n\nconst switchSelectorVariant = cva(\n 'flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]',\n {\n variants: {\n color: {\n primary:\n 'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n secondary:\n 'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n destructive:\n 'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n neutral:\n 'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n },\n },\n defaultVariants: {\n color: 'primary',\n },\n }\n);\n\nconst choiceVariant = cva(\n 'z-1 text-sm font-medium transition-all duration-300 ease-in-out aria-selected:cursor-default aria-selected:text-text-dark motion-reduce:transition-none dark:aria-selected:text-text',\n {\n variants: {\n size: {\n sm: 'py-1 px-2 text-xs',\n md: 'p-2 text-sm',\n lg: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary:\n 'bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark',\n secondary:\n 'bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark',\n destructive:\n 'bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark',\n neutral:\n 'bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text',\n light: 'bg-white aria-selected:text-black',\n dark: 'bg-neutral-800 aria-selected:text-white',\n text: 'bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text',\n },\n },\n }\n);\n\n/*\n \n * Component that allows the user to select one of the provided choices.\n \n Example:\n * ```jsx\n * <SwitchSelector\n * choices={[\n * { content: 'Option 1', value: 'option1' },\n * { content: 'Option 2', value: 'option2' },\n * { content: 'Option 3', value: 'option3' },\n * ]}\n * value=\"option1\"\n * onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n choices = defaultChoices as SwitchSelectorChoices<T>,\n value,\n defaultValue,\n onChange,\n color = 'primary',\n size = 'md',\n className,\n}: SwitchSelectorProps<T>) => {\n const [valueState, setValue] = useState<T>(\n value ?? defaultValue ?? choices[0].value\n );\n const optionsRefs = useRef<HTMLButtonElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition } = useItemSelector(optionsRefs);\n\n const handleChange = (newValue: T) => {\n setValue(newValue);\n onChange?.(newValue);\n };\n\n return (\n <div\n className={switchSelectorVariant({\n color,\n className,\n })}\n role=\"tablist\"\n >\n <div className=\"relative flex size-full flex-row items-center justify-center\">\n {choices.map((choice, index) => {\n const { content, value, ...buttonProps } = choice;\n\n const isKeyOfKey =\n typeof value === 'string' \|\| typeof value === 'number';\n\n const isSelected = value === valueState;\n\n return (\n <button\n {...buttonProps}\n className={cn(\n choiceVariant({\n size,\n })\n )}\n key={isKeyOfKey ? value : index}\n role=\"tab\"\n onClick={() => handleChange(value)}\n aria-selected={isSelected}\n disabled={isSelected}\n ref={(el) => {\n optionsRefs.current[index] = el!;\n }}\n >\n {content}\n </button>\n );\n })}\n {choiceIndicatorPosition && (\n <div\n className={cn(\n indicatorVariant({\n color,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n />\n )}\n </div>\n </div>\n );\n};\n"],"names":["cva","useState","useRef","useItemSelector","jsx","jsxs","value","createElement","cn"],"mappings":"~~;;;;;;;;;;;;;;;;;;~~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"}
1	+ {"version":3,"file":"index.cjs","sources":["../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useRef, type ReactNode, type HTMLAttributes, useState } from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n content: ReactNode;\n value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n { content: 'Off', value: false },\n { content: 'On', value: true },\n];\n\ntype SwitchSelectorProps<T = boolean> = {\n choices?: SwitchSelectorChoices<T>;\n value?: T;\n defaultValue?: T;\n onChange?: (choice: T) => void;\n className?: string;\n} & VariantProps<typeof switchSelectorVariant> &\n VariantProps<typeof choiceVariant>;\n\nconst switchSelectorVariant = cva(\n 'flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]',\n {\n variants: {\n color: {\n primary:\n 'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n secondary:\n 'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n destructive:\n 'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n neutral:\n 'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n },\n },\n defaultVariants: {\n color: 'primary',\n },\n }\n);\n\nconst choiceVariant = cva(\n 'z-1 text-sm font-medium transition-all duration-300 ease-in-out aria-selected:cursor-default aria-selected:text-text-dark motion-reduce:transition-none dark:aria-selected:text-text',\n {\n variants: {\n size: {\n sm: 'py-1 px-2 text-xs',\n md: 'p-2 text-sm',\n lg: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary:\n 'bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark',\n secondary:\n 'bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark',\n destructive:\n 'bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark',\n neutral:\n 'bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text',\n light: 'bg-white aria-selected:text-black',\n dark: 'bg-neutral-800 aria-selected:text-white',\n text: 'bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text',\n },\n },\n }\n);\n\n/*\n \n * Component that allows the user to select one of the provided choices.\n \n Example:\n * ```jsx\n * <SwitchSelector\n * choices={[\n * { content: 'Option 1', value: 'option1' },\n * { content: 'Option 2', value: 'option2' },\n * { content: 'Option 3', value: 'option3' },\n * ]}\n * value=\"option1\"\n * onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n choices = defaultChoices as SwitchSelectorChoices<T>,\n value,\n defaultValue,\n onChange,\n color = 'primary',\n size = 'md',\n className,\n}: SwitchSelectorProps<T>) => {\n const [valueState, setValue] = useState<T>(\n value ?? defaultValue ?? choices[0].value\n );\n const optionsRefs = useRef<HTMLButtonElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition } = useItemSelector(optionsRefs);\n\n const handleChange = (newValue: T) => {\n setValue(newValue);\n onChange?.(newValue);\n };\n\n return (\n <div\n className={switchSelectorVariant({\n color,\n className,\n })}\n role=\"tablist\"\n >\n <div className=\"relative flex size-full flex-row items-center justify-center\">\n {choices.map((choice, index) => {\n const { content, value, ...buttonProps } = choice;\n\n const isKeyOfKey =\n typeof value === 'string' \|\| typeof value === 'number';\n\n const isSelected = value === valueState;\n\n return (\n <button\n {...buttonProps}\n className={cn(\n choiceVariant({\n size,\n })\n )}\n key={isKeyOfKey ? value : index}\n role=\"tab\"\n onClick={() => handleChange(value)}\n aria-selected={isSelected}\n disabled={isSelected}\n ref={(el) => {\n optionsRefs.current[index] = el!;\n }}\n >\n {content}\n </button>\n );\n })}\n {choiceIndicatorPosition && (\n <div\n className={cn(\n indicatorVariant({\n color,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n />\n )}\n </div>\n </div>\n );\n};\n"],"names":["cva","useState","useRef","useItemSelector","jsx","jsxs","value","createElement","cn"],"mappings":"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"}

package/dist/components/SwitchSelector/index.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
 import { ReactNode, HTMLAttributes } from 'react';
 export type SwitchSelectorChoice<T = boolean> = {
     content: ReactNode;
     value: T;

package/dist/components/SwitchSelector/index.mjs CHANGED Viewed

@@ -4,12 +4,14 @@ import { useState, useRef, createElement } from "react";
 import { cva } from "class-variance-authority";
 import "../../hooks/useScrollBlockage/useScrollBlockageStore.mjs";
 import "../../hooks/useAsync/useAsyncStateStore.mjs";
-import "../Auth/AuthProvider/index.mjs";
 import "../../libs/intlayer-api/auth.mjs";
 import "../../libs/intlayer-api/dictionary.mjs";
 import "../../libs/intlayer-api/organization.mjs";
 import "../../libs/intlayer-api/project.mjs";
+import "../../libs/intlayer-api/stripe.mjs";
 import "../../libs/intlayer-api/user.mjs";
+import "@intlayer/config/client";
+import "../Toaster/Toast.mjs";
 import { useItemSelector } from "../../hooks/useItemSelector.mjs";
 import "@intlayer/dictionaries-entry";
 import "deepmerge";

package/dist/components/SwitchSelector/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","sources":["../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useRef, type ReactNode, type HTMLAttributes, useState } from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n content: ReactNode;\n value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n { content: 'Off', value: false },\n { content: 'On', value: true },\n];\n\ntype SwitchSelectorProps<T = boolean> = {\n choices?: SwitchSelectorChoices<T>;\n value?: T;\n defaultValue?: T;\n onChange?: (choice: T) => void;\n className?: string;\n} & VariantProps<typeof switchSelectorVariant> &\n VariantProps<typeof choiceVariant>;\n\nconst switchSelectorVariant = cva(\n 'flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]',\n {\n variants: {\n color: {\n primary:\n 'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n secondary:\n 'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n destructive:\n 'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n neutral:\n 'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n },\n },\n defaultVariants: {\n color: 'primary',\n },\n }\n);\n\nconst choiceVariant = cva(\n 'z-1 text-sm font-medium transition-all duration-300 ease-in-out aria-selected:cursor-default aria-selected:text-text-dark motion-reduce:transition-none dark:aria-selected:text-text',\n {\n variants: {\n size: {\n sm: 'py-1 px-2 text-xs',\n md: 'p-2 text-sm',\n lg: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary:\n 'bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark',\n secondary:\n 'bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark',\n destructive:\n 'bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark',\n neutral:\n 'bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text',\n light: 'bg-white aria-selected:text-black',\n dark: 'bg-neutral-800 aria-selected:text-white',\n text: 'bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text',\n },\n },\n }\n);\n\n/*\n \n * Component that allows the user to select one of the provided choices.\n \n Example:\n * ```jsx\n * <SwitchSelector\n * choices={[\n * { content: 'Option 1', value: 'option1' },\n * { content: 'Option 2', value: 'option2' },\n * { content: 'Option 3', value: 'option3' },\n * ]}\n * value=\"option1\"\n * onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n choices = defaultChoices as SwitchSelectorChoices<T>,\n value,\n defaultValue,\n onChange,\n color = 'primary',\n size = 'md',\n className,\n}: SwitchSelectorProps<T>) => {\n const [valueState, setValue] = useState<T>(\n value ?? defaultValue ?? choices[0].value\n );\n const optionsRefs = useRef<HTMLButtonElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition } = useItemSelector(optionsRefs);\n\n const handleChange = (newValue: T) => {\n setValue(newValue);\n onChange?.(newValue);\n };\n\n return (\n <div\n className={switchSelectorVariant({\n color,\n className,\n })}\n role=\"tablist\"\n >\n <div className=\"relative flex size-full flex-row items-center justify-center\">\n {choices.map((choice, index) => {\n const { content, value, ...buttonProps } = choice;\n\n const isKeyOfKey =\n typeof value === 'string' \|\| typeof value === 'number';\n\n const isSelected = value === valueState;\n\n return (\n <button\n {...buttonProps}\n className={cn(\n choiceVariant({\n size,\n })\n )}\n key={isKeyOfKey ? value : index}\n role=\"tab\"\n onClick={() => handleChange(value)}\n aria-selected={isSelected}\n disabled={isSelected}\n ref={(el) => {\n optionsRefs.current[index] = el!;\n }}\n >\n {content}\n </button>\n );\n })}\n {choiceIndicatorPosition && (\n <div\n className={cn(\n indicatorVariant({\n color,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n />\n )}\n </div>\n </div>\n );\n};\n"],"names":["jsx","jsxs","value"],"mappings":"~~;;;;;;;;;;;;;;;;~~AAaA,MAAM,iBAAiD;AAAA,EACrD,EAAE,SAAS,OAAO,OAAO,MAAM;AAAA,EAC/B,EAAE,SAAS,MAAM,OAAO,KAAK;AAC/B;AAWA,MAAM,wBAAwB;AAAA,EAC5B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,OAAO;AAAA,IACT;AAAA,EACF;AACF;AAEA,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEA,MAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;AAmBO,MAAM,iBAAiB,CAAK;AAAA,EACjC,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AACF,MAA8B;AACtB,QAAA,CAAC,YAAY,QAAQ,IAAI;AAAA,IAC7B,SAAS,gBAAgB,QAAQ,CAAC,EAAE;AAAA,EAAA;AAEhC,QAAA,cAAc,OAA4B,CAAA,CAAE;AAC5C,QAAA,eAAe,OAA8B,IAAI;AACvD,QAAM,EAAE,wBAAA,IAA4B,gBAAgB,WAAW;AAEzD,QAAA,eAAe,CAAC,aAAgB;AACpC,aAAS,QAAQ;AACjB,eAAW,QAAQ;AAAA,EAAA;AAInB,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,sBAAsB;AAAA,QAC/B;AAAA,QACA;AAAA,MAAA,CACD;AAAA,MACD,MAAK;AAAA,MAEL,UAAAC,kCAAA,KAAC,OAAI,EAAA,WAAU,gEACZ,UAAA;AAAA,QAAQ,QAAA,IAAI,CAAC,QAAQ,UAAU;AAC9B,gBAAM,EAAE,SAAS,OAAAC,QAAO,GAAG,YAAgB,IAAA;AAE3C,gBAAM,aACJ,OAAOA,WAAU,YAAY,OAAOA,WAAU;AAEhD,gBAAM,aAAaA,WAAU;AAG3B,iBAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAG;AAAA,cACJ,WAAW;AAAA,gBACT,cAAc;AAAA,kBACZ;AAAA,gBAAA,CACD;AAAA,cACH;AAAA,cACA,KAAK,aAAaA,SAAQ;AAAA,cAC1B,MAAK;AAAA,cACL,SAAS,MAAM,aAAaA,MAAK;AAAA,cACjC,iBAAe;AAAA,cACf,UAAU;AAAA,cACV,KAAK,CAAC,OAAO;AACC,4BAAA,QAAQ,KAAK,IAAI;AAAA,cAC/B;AAAA,YAAA;AAAA,YAEC;AAAA,UAAA;AAAA,QACH,CAEH;AAAA,QACA,2BACCF,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT,iBAAiB;AAAA,gBACf;AAAA,cAAA,CACD;AAAA,YACH;AAAA,YACA,OAAO;AAAA,YACP,KAAK;AAAA,UAAA;AAAA,QACP;AAAA,MAAA,GAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
1	+ {"version":3,"file":"index.mjs","sources":["../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useRef, type ReactNode, type HTMLAttributes, useState } from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n content: ReactNode;\n value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n { content: 'Off', value: false },\n { content: 'On', value: true },\n];\n\ntype SwitchSelectorProps<T = boolean> = {\n choices?: SwitchSelectorChoices<T>;\n value?: T;\n defaultValue?: T;\n onChange?: (choice: T) => void;\n className?: string;\n} & VariantProps<typeof switchSelectorVariant> &\n VariantProps<typeof choiceVariant>;\n\nconst switchSelectorVariant = cva(\n 'flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]',\n {\n variants: {\n color: {\n primary:\n 'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n secondary:\n 'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n destructive:\n 'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n neutral:\n 'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n },\n },\n defaultVariants: {\n color: 'primary',\n },\n }\n);\n\nconst choiceVariant = cva(\n 'z-1 text-sm font-medium transition-all duration-300 ease-in-out aria-selected:cursor-default aria-selected:text-text-dark motion-reduce:transition-none dark:aria-selected:text-text',\n {\n variants: {\n size: {\n sm: 'py-1 px-2 text-xs',\n md: 'p-2 text-sm',\n lg: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary:\n 'bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark',\n secondary:\n 'bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark',\n destructive:\n 'bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark',\n neutral:\n 'bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text',\n light: 'bg-white aria-selected:text-black',\n dark: 'bg-neutral-800 aria-selected:text-white',\n text: 'bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text',\n },\n },\n }\n);\n\n/*\n \n * Component that allows the user to select one of the provided choices.\n \n Example:\n * ```jsx\n * <SwitchSelector\n * choices={[\n * { content: 'Option 1', value: 'option1' },\n * { content: 'Option 2', value: 'option2' },\n * { content: 'Option 3', value: 'option3' },\n * ]}\n * value=\"option1\"\n * onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n choices = defaultChoices as SwitchSelectorChoices<T>,\n value,\n defaultValue,\n onChange,\n color = 'primary',\n size = 'md',\n className,\n}: SwitchSelectorProps<T>) => {\n const [valueState, setValue] = useState<T>(\n value ?? defaultValue ?? choices[0].value\n );\n const optionsRefs = useRef<HTMLButtonElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition } = useItemSelector(optionsRefs);\n\n const handleChange = (newValue: T) => {\n setValue(newValue);\n onChange?.(newValue);\n };\n\n return (\n <div\n className={switchSelectorVariant({\n color,\n className,\n })}\n role=\"tablist\"\n >\n <div className=\"relative flex size-full flex-row items-center justify-center\">\n {choices.map((choice, index) => {\n const { content, value, ...buttonProps } = choice;\n\n const isKeyOfKey =\n typeof value === 'string' \|\| typeof value === 'number';\n\n const isSelected = value === valueState;\n\n return (\n <button\n {...buttonProps}\n className={cn(\n choiceVariant({\n size,\n })\n )}\n key={isKeyOfKey ? value : index}\n role=\"tab\"\n onClick={() => handleChange(value)}\n aria-selected={isSelected}\n disabled={isSelected}\n ref={(el) => {\n optionsRefs.current[index] = el!;\n }}\n >\n {content}\n </button>\n );\n })}\n {choiceIndicatorPosition && (\n <div\n className={cn(\n indicatorVariant({\n color,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n />\n )}\n </div>\n </div>\n );\n};\n"],"names":["jsx","jsxs","value"],"mappings":";;;;;;;;;;;;;;;;;;AAaA,MAAM,iBAAiD;AAAA,EACrD,EAAE,SAAS,OAAO,OAAO,MAAM;AAAA,EAC/B,EAAE,SAAS,MAAM,OAAO,KAAK;AAC/B;AAWA,MAAM,wBAAwB;AAAA,EAC5B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,OAAO;AAAA,IACT;AAAA,EACF;AACF;AAEA,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEA,MAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;AAmBO,MAAM,iBAAiB,CAAK;AAAA,EACjC,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AACF,MAA8B;AACtB,QAAA,CAAC,YAAY,QAAQ,IAAI;AAAA,IAC7B,SAAS,gBAAgB,QAAQ,CAAC,EAAE;AAAA,EAAA;AAEhC,QAAA,cAAc,OAA4B,CAAA,CAAE;AAC5C,QAAA,eAAe,OAA8B,IAAI;AACvD,QAAM,EAAE,wBAAA,IAA4B,gBAAgB,WAAW;AAEzD,QAAA,eAAe,CAAC,aAAgB;AACpC,aAAS,QAAQ;AACjB,eAAW,QAAQ;AAAA,EAAA;AAInB,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,sBAAsB;AAAA,QAC/B;AAAA,QACA;AAAA,MAAA,CACD;AAAA,MACD,MAAK;AAAA,MAEL,UAAAC,kCAAA,KAAC,OAAI,EAAA,WAAU,gEACZ,UAAA;AAAA,QAAQ,QAAA,IAAI,CAAC,QAAQ,UAAU;AAC9B,gBAAM,EAAE,SAAS,OAAAC,QAAO,GAAG,YAAgB,IAAA;AAE3C,gBAAM,aACJ,OAAOA,WAAU,YAAY,OAAOA,WAAU;AAEhD,gBAAM,aAAaA,WAAU;AAG3B,iBAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAG;AAAA,cACJ,WAAW;AAAA,gBACT,cAAc;AAAA,kBACZ;AAAA,gBAAA,CACD;AAAA,cACH;AAAA,cACA,KAAK,aAAaA,SAAQ;AAAA,cAC1B,MAAK;AAAA,cACL,SAAS,MAAM,aAAaA,MAAK;AAAA,cACjC,iBAAe;AAAA,cACf,UAAU;AAAA,cACV,KAAK,CAAC,OAAO;AACC,4BAAA,QAAQ,KAAK,IAAI;AAAA,cAC/B;AAAA,YAAA;AAAA,YAEC;AAAA,UAAA;AAAA,QACH,CAEH;AAAA,QACA,2BACCF,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT,iBAAiB;AAAA,gBACf;AAAA,cAAA,CACD;AAAA,YACH;AAAA,YACA,OAAO;AAAA,YACP,KAAK;AAAA,UAAA;AAAA,QACP;AAAA,MAAA,GAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/TabSelector/TabSelector.cjs CHANGED Viewed

@@ -6,12 +6,14 @@ const classVarianceAuthority = require("class-variance-authority");
 const require$$0 = require("react");
 require("../../hooks/useScrollBlockage/useScrollBlockageStore.cjs");
 require("../../hooks/useAsync/useAsyncStateStore.cjs");
-require("../Auth/AuthProvider/index.cjs");
 require("../../libs/intlayer-api/auth.cjs");
 require("../../libs/intlayer-api/dictionary.cjs");
 require("../../libs/intlayer-api/organization.cjs");
 require("../../libs/intlayer-api/project.cjs");
+require("../../libs/intlayer-api/stripe.cjs");
 require("../../libs/intlayer-api/user.cjs");
+require("@intlayer/config/client");
+require("../Toaster/Toast.cjs");
 const hooks_useItemSelector = require("../../hooks/useItemSelector.cjs");
 require("@intlayer/dictionaries-entry");
 require("deepmerge");
@@ -36,17 +38,17 @@ const tabSelectorVariant = classVarianceAuthority.cva(
   }
 );
 const indicatorVariant = classVarianceAuthority.cva(
-  "absolute top-0 z-[-1] h-full w-auto rounded-lg opacity-10 transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none",
+  "absolute top-0 z-[-1] h-full w-auto rounded-lg transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none",
   {
     variants: {
       color: {
-        primary: "bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark",
-        secondary: "bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark",
-        destructive: "bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark",
-        neutral: "bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text",
-        light: "bg-white aria-selected:text-black",
-        dark: "bg-neutral-800 aria-selected:text-white",
-        text: "bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text"
+        primary: "bg-primary/10 aria-selected:text-text dark:bg-primary-dark/10 dark:aria-selected:text-text-dark",
+        secondary: "bg-secondary/10 aria-selected:text-text dark:bg-secondary-dark/10 dark:aria-selected:text-text-dark",
+        destructive: "bg-destructive/10 aria-selected:text-text dark:bg-destructive-dark/10 dark:aria-selected:text-text-dark",
+        neutral: "bg-neutral/10 aria-selected:text-white dark:bg-neutral-dark/10 dark:aria-selected:text-text",
+        light: "bg-white/10 aria-selected:text-black",
+        dark: "bg-neutral-800/10 aria-selected:text-white",
+        text: "bg-text/10 aria-selected:text-text-dark dark:bg-text-dark/10 dark:aria-selected:text-text"
       }
     }
   }
@@ -75,6 +77,8 @@ const TabSelector = ({
         }),
         className
       ),
+      "aria-orientation": "horizontal",
+      "aria-multiselectable": "false",
       role: "tablist",
       children: [
         tabs.map((Tab, index) => {
@@ -98,7 +102,8 @@ const TabSelector = ({
             }),
             style: choiceIndicatorPosition,
             ref: indicatorRef
-          }
+          },
+          `${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`
         )
       ]
     }

package/dist/components/TabSelector/TabSelector.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabSelector.cjs","sources":["../../../src/components/TabSelector/TabSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n useRef,\n type HTMLAttributes,\n type ReactElement,\n cloneElement,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nconst tabSelectorVariant = cva(\n 'relative flex size-full flex-row items-center gap-2',\n {\n variants: {\n color: {\n primary:\n 'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n secondary:\n 'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n destructive:\n 'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n neutral:\n 'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n },\n },\n defaultVariants: {\n color: 'primary',\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-lg ~~opacity-10~~ transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary:\n 'bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark',\n secondary:\n 'bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark',\n destructive:\n 'bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark',\n neutral:\n 'bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text',\n light: 'bg-white aria-selected:text-black',\n dark: 'bg-neutral-800 aria-selected:text-white',\n text: 'bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text',\n },\n },\n }\n);\n\~~ntype~~ TabProps = HTMLAttributes<HTMLElement> & {\n key: string \| number;\n};\n\ntype TabSelectorProps<T extends TabProps> = {\n tabs: ReactElement<T>[];\n selectedChoice: T['key'];\n onTabClick?: (choice: T['key']) => void;\n hoverable?: boolean;\n} & HTMLAttributes<HTMLElement> &\n VariantProps<typeof tabSelectorVariant>;\n\n/*\n \n * Component that allows the user to select one of the provided choices.\n \n Example:\n * ```jsx\n * <TabSelector\n * selectedChoice=\"option1\"\n * onTabClick={(choice) => console.log(choice)}\n * hoverable={true}\n * >\n * <Button key=\"option1\"/>\n * <Button key=\"option2\"/>\n * <Button key=\"option3\"/>\n * </TabSelector>\n * ```\n */\nexport const TabSelector = <T extends TabProps>({\n tabs,\n selectedChoice,\n onTabClick,\n color = 'primary',\n hoverable = false,\n className,\n}: TabSelectorProps<T>) => {\n const optionsRefs = useRef<HTMLElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition } = useItemSelector(\n optionsRefs,\n undefined,\n hoverable\n );\n\n return (\n <div\n className={cn(\n tabSelectorVariant({\n color,\n }),\n className\n )}\n role=\"tablist\"\n >\n {tabs.map((Tab, index) => {\n const key = Tab.key!;\n\n const isSelected = selectedChoice === key;\n\n return cloneElement(Tab, {\n key: key ?? index,\n role: 'tab',\n onClick: () => onTabClick?.(key),\n 'aria-selected': isSelected,\n ref: (el: HTMLElement) => {\n optionsRefs.current[index] = el!;\n },\n } as unknown as T);\n })}\n {choiceIndicatorPosition && (\n <div\n className={indicatorVariant({\n color,\n })}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n />\n )}\n </div>\n );\n};\n"],"names":["cva","useRef","useItemSelector","jsxs","cn","cloneElement","jsx"],"mappings":"~~;;;;;;;;;;;;;;;;;;~~AAYA,MAAM,qBAAqBA,uBAAA;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,OAAO;AAAA,IACT;AAAA,EACF;AACF;AAEA,MAAM,mBAAmBA,uBAAA;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;AA+BO,MAAM,cAAc,CAAqB;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AACF,MAA2B;AACnB,QAAA,cAAcC,kBAAsB,CAAA,CAAE;AACtC,QAAA,eAAeA,kBAA8B,IAAI;AACjD,QAAA,EAAE,4BAA4BC,sBAAA;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAIA,SAAAC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA;AAAA,QACT,mBAAmB;AAAA,UACjB;AAAA,QAAA,CACD;AAAA,QACD;AAAA,MACF;AAAA,MACA,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAK,KAAA,IAAI,CAAC,KAAK,UAAU;AACxB,gBAAM,MAAM,IAAI;AAEhB,gBAAM,aAAa,mBAAmB;AAEtC,iBAAOC,WAAAA,aAAa,KAAK;AAAA,YACvB,KAAK,OAAO;AAAA,YACZ,MAAM;AAAA,YACN,SAAS,MAAM,aAAa,GAAG;AAAA,YAC/B,iBAAiB;AAAA,YACjB,KAAK,CAAC,OAAoB;AACZ,0BAAA,QAAQ,KAAK,IAAI;AAAA,YAC/B;AAAA,UAAA,CACe;AAAA,QAAA,CAClB;AAAA,QACA,2BACCC,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,iBAAiB;AAAA,cAC1B;AAAA,YAAA,CACD;AAAA,YACD,OAAO;AAAA,YACP,KAAK;AAAA,UAAA;AAAA,~~QACP~~;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;;"}
1	+ {"version":3,"file":"TabSelector.cjs","sources":["../../../src/components/TabSelector/TabSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n useRef,\n type HTMLAttributes,\n type ReactElement,\n cloneElement,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nconst tabSelectorVariant = cva(\n 'relative flex size-full flex-row items-center gap-2',\n {\n variants: {\n color: {\n primary:\n 'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n secondary:\n 'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n destructive:\n 'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n neutral:\n 'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n },\n },\n defaultVariants: {\n color: 'primary',\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-lg transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary:\n 'bg-primary/10 aria-selected:text-text dark:bg-primary-dark/10 dark:aria-selected:text-text-dark',\n secondary:\n 'bg-secondary/10 aria-selected:text-text dark:bg-secondary-dark/10 dark:aria-selected:text-text-dark',\n destructive:\n 'bg-destructive/10 aria-selected:text-text dark:bg-destructive-dark/10 dark:aria-selected:text-text-dark',\n neutral:\n 'bg-neutral/10 aria-selected:text-white dark:bg-neutral-dark/10 dark:aria-selected:text-text',\n light: 'bg-white/10 aria-selected:text-black',\n dark: 'bg-neutral-800/10 aria-selected:text-white',\n text: 'bg-text/10 aria-selected:text-text-dark dark:bg-text-dark/10 dark:aria-selected:text-text',\n },\n },\n }\n);\n\nexport type TabProps = HTMLAttributes<HTMLElement> & {\n key: string \| number;\n};\n\ntype TabSelectorProps<T extends TabProps> = {\n tabs: ReactElement<T>[];\n selectedChoice: T['key'];\n onTabClick?: (choice: T['key']) => void;\n hoverable?: boolean;\n} & HTMLAttributes<HTMLElement> &\n VariantProps<typeof tabSelectorVariant>;\n\n/*\n \n * Component that allows the user to select one of the provided choices.\n \n Example:\n * ```jsx\n * <TabSelector\n * selectedChoice=\"option1\"\n * onTabClick={(choice) => console.log(choice)}\n * hoverable={true}\n * >\n * <Button key=\"option1\"/>\n * <Button key=\"option2\"/>\n * <Button key=\"option3\"/>\n * </TabSelector>\n * ```\n */\nexport const TabSelector = <T extends TabProps>({\n tabs,\n selectedChoice,\n onTabClick,\n color = 'primary',\n hoverable = false,\n className,\n}: TabSelectorProps<T>) => {\n const optionsRefs = useRef<HTMLElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition } = useItemSelector(\n optionsRefs,\n undefined,\n hoverable\n );\n\n return (\n <div\n className={cn(\n tabSelectorVariant({\n color,\n }),\n className\n )}\n aria-orientation=\"horizontal\"\n aria-multiselectable=\"false\"\n role=\"tablist\"\n >\n {tabs.map((Tab, index) => {\n const key = Tab.key!;\n\n const isSelected = selectedChoice === key;\n\n return cloneElement(Tab, {\n key: key ?? index,\n role: 'tab',\n onClick: () => onTabClick?.(key),\n 'aria-selected': isSelected,\n ref: (el: HTMLElement) => {\n optionsRefs.current[index] = el!;\n },\n } as unknown as T);\n })}\n {choiceIndicatorPosition && (\n <div\n className={indicatorVariant({\n color,\n })}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n key={`${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`}\n />\n )}\n </div>\n );\n};\n"],"names":["cva","useRef","useItemSelector","jsxs","cn","cloneElement","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;AAYA,MAAM,qBAAqBA,uBAAA;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,OAAO;AAAA,IACT;AAAA,EACF;AACF;AAEA,MAAM,mBAAmBA,uBAAA;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;AA+BO,MAAM,cAAc,CAAqB;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AACF,MAA2B;AACnB,QAAA,cAAcC,kBAAsB,CAAA,CAAE;AACtC,QAAA,eAAeA,kBAA8B,IAAI;AACjD,QAAA,EAAE,4BAA4BC,sBAAA;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAIA,SAAAC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA;AAAA,QACT,mBAAmB;AAAA,UACjB;AAAA,QAAA,CACD;AAAA,QACD;AAAA,MACF;AAAA,MACA,oBAAiB;AAAA,MACjB,wBAAqB;AAAA,MACrB,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAK,KAAA,IAAI,CAAC,KAAK,UAAU;AACxB,gBAAM,MAAM,IAAI;AAEhB,gBAAM,aAAa,mBAAmB;AAEtC,iBAAOC,WAAAA,aAAa,KAAK;AAAA,YACvB,KAAK,OAAO;AAAA,YACZ,MAAM;AAAA,YACN,SAAS,MAAM,aAAa,GAAG;AAAA,YAC/B,iBAAiB;AAAA,YACjB,KAAK,CAAC,OAAoB;AACZ,0BAAA,QAAQ,KAAK,IAAI;AAAA,YAC/B;AAAA,UAAA,CACe;AAAA,QAAA,CAClB;AAAA,QACA,2BACCC,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,iBAAiB;AAAA,cAC1B;AAAA,YAAA,CACD;AAAA,YACD,OAAO;AAAA,YACP,KAAK;AAAA,UAAA;AAAA,UACA,GAAG,cAAc,GAAG,KAAK,UAAU,KAAK,IAAI,CAAC,QAAQ,IAAI,GAAG,CAAC,CAAC;AAAA,QACrE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;;"}

package/dist/components/TabSelector/TabSelector.d.ts CHANGED Viewed

@@ -1,10 +1,9 @@
 import { VariantProps } from 'class-variance-authority';
 import { HTMLAttributes, ReactElement } from 'react';
 declare const tabSelectorVariant: (props?: ({
     color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type TabProps = HTMLAttributes<HTMLElement> & {
+export type TabProps = HTMLAttributes<HTMLElement> & {
     key: string | number;
 };
 type TabSelectorProps<T extends TabProps> = {

package/dist/components/TabSelector/TabSelector.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabSelector.d.ts","sourceRoot":"","sources":["../../../src/components/TabSelector/TabSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,YAAY,EAElB,MAAM,OAAO,CAAC;AAIf,QAAA,MAAM,kBAAkB;;8EAsBvB,CAAC;AAuBF,~~KAAK~~,QAAQ,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;~~IAC5C~~,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACtB,CAAC;AAEF,KAAK,gBAAgB,CAAC,CAAC,SAAS,QAAQ,IAAI;IAC1C,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,cAAc,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IACzB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,cAAc,CAAC,WAAW,CAAC,GAC7B,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAE1C;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,QAAQ,sEAO3C,gBAAgB,CAAC,CAAC,CAAC,~~4CA6CrB~~,CAAC"}
1	+ {"version":3,"file":"TabSelector.d.ts","sourceRoot":"","sources":["../../../src/components/TabSelector/TabSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,YAAY,EAElB,MAAM,OAAO,CAAC;AAIf,QAAA,MAAM,kBAAkB;;8EAsBvB,CAAC;AAuBF,MAAM,MAAM,QAAQ,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACnD,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACtB,CAAC;AAEF,KAAK,gBAAgB,CAAC,CAAC,SAAS,QAAQ,IAAI;IAC1C,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,cAAc,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IACzB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,cAAc,CAAC,WAAW,CAAC,GAC7B,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAE1C;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,QAAQ,sEAO3C,gBAAgB,CAAC,CAAC,CAAC,4CAgDrB,CAAC"}

package/dist/components/TabSelector/TabSelector.mjs CHANGED Viewed

@@ -4,12 +4,14 @@ import { cva } from "class-variance-authority";
 import { useRef, cloneElement } from "react";
 import "../../hooks/useScrollBlockage/useScrollBlockageStore.mjs";
 import "../../hooks/useAsync/useAsyncStateStore.mjs";
-import "../Auth/AuthProvider/index.mjs";
 import "../../libs/intlayer-api/auth.mjs";
 import "../../libs/intlayer-api/dictionary.mjs";
 import "../../libs/intlayer-api/organization.mjs";
 import "../../libs/intlayer-api/project.mjs";
+import "../../libs/intlayer-api/stripe.mjs";
 import "../../libs/intlayer-api/user.mjs";
+import "@intlayer/config/client";
+import "../Toaster/Toast.mjs";
 import { useItemSelector } from "../../hooks/useItemSelector.mjs";
 import "@intlayer/dictionaries-entry";
 import "deepmerge";
@@ -34,17 +36,17 @@ const tabSelectorVariant = cva(
   }
 );
 const indicatorVariant = cva(
-  "absolute top-0 z-[-1] h-full w-auto rounded-lg opacity-10 transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none",
+  "absolute top-0 z-[-1] h-full w-auto rounded-lg transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none",
   {
     variants: {
       color: {
-        primary: "bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark",
-        secondary: "bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark",
-        destructive: "bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark",
-        neutral: "bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text",
-        light: "bg-white aria-selected:text-black",
-        dark: "bg-neutral-800 aria-selected:text-white",
-        text: "bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text"
+        primary: "bg-primary/10 aria-selected:text-text dark:bg-primary-dark/10 dark:aria-selected:text-text-dark",
+        secondary: "bg-secondary/10 aria-selected:text-text dark:bg-secondary-dark/10 dark:aria-selected:text-text-dark",
+        destructive: "bg-destructive/10 aria-selected:text-text dark:bg-destructive-dark/10 dark:aria-selected:text-text-dark",
+        neutral: "bg-neutral/10 aria-selected:text-white dark:bg-neutral-dark/10 dark:aria-selected:text-text",
+        light: "bg-white/10 aria-selected:text-black",
+        dark: "bg-neutral-800/10 aria-selected:text-white",
+        text: "bg-text/10 aria-selected:text-text-dark dark:bg-text-dark/10 dark:aria-selected:text-text"
       }
     }
   }
@@ -73,6 +75,8 @@ const TabSelector = ({
         }),
         className
       ),
+      "aria-orientation": "horizontal",
+      "aria-multiselectable": "false",
       role: "tablist",
       children: [
         tabs.map((Tab, index) => {
@@ -96,7 +100,8 @@ const TabSelector = ({
             }),
             style: choiceIndicatorPosition,
             ref: indicatorRef
-          }
+          },
+          `${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`
         )
       ]
     }

package/dist/components/TabSelector/TabSelector.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabSelector.mjs","sources":["../../../src/components/TabSelector/TabSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n useRef,\n type HTMLAttributes,\n type ReactElement,\n cloneElement,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nconst tabSelectorVariant = cva(\n 'relative flex size-full flex-row items-center gap-2',\n {\n variants: {\n color: {\n primary:\n 'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n secondary:\n 'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n destructive:\n 'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n neutral:\n 'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n },\n },\n defaultVariants: {\n color: 'primary',\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-lg ~~opacity-10~~ transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary:\n 'bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark',\n secondary:\n 'bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark',\n destructive:\n 'bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark',\n neutral:\n 'bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text',\n light: 'bg-white aria-selected:text-black',\n dark: 'bg-neutral-800 aria-selected:text-white',\n text: 'bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text',\n },\n },\n }\n);\n\~~ntype~~ TabProps = HTMLAttributes<HTMLElement> & {\n key: string \| number;\n};\n\ntype TabSelectorProps<T extends TabProps> = {\n tabs: ReactElement<T>[];\n selectedChoice: T['key'];\n onTabClick?: (choice: T['key']) => void;\n hoverable?: boolean;\n} & HTMLAttributes<HTMLElement> &\n VariantProps<typeof tabSelectorVariant>;\n\n/*\n \n * Component that allows the user to select one of the provided choices.\n \n Example:\n * ```jsx\n * <TabSelector\n * selectedChoice=\"option1\"\n * onTabClick={(choice) => console.log(choice)}\n * hoverable={true}\n * >\n * <Button key=\"option1\"/>\n * <Button key=\"option2\"/>\n * <Button key=\"option3\"/>\n * </TabSelector>\n * ```\n */\nexport const TabSelector = <T extends TabProps>({\n tabs,\n selectedChoice,\n onTabClick,\n color = 'primary',\n hoverable = false,\n className,\n}: TabSelectorProps<T>) => {\n const optionsRefs = useRef<HTMLElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition } = useItemSelector(\n optionsRefs,\n undefined,\n hoverable\n );\n\n return (\n <div\n className={cn(\n tabSelectorVariant({\n color,\n }),\n className\n )}\n role=\"tablist\"\n >\n {tabs.map((Tab, index) => {\n const key = Tab.key!;\n\n const isSelected = selectedChoice === key;\n\n return cloneElement(Tab, {\n key: key ?? index,\n role: 'tab',\n onClick: () => onTabClick?.(key),\n 'aria-selected': isSelected,\n ref: (el: HTMLElement) => {\n optionsRefs.current[index] = el!;\n },\n } as unknown as T);\n })}\n {choiceIndicatorPosition && (\n <div\n className={indicatorVariant({\n color,\n })}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n />\n )}\n </div>\n );\n};\n"],"names":["jsxs","jsx"],"mappings":"~~;;;;;;;;;;;;;;;;~~AAYA,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,OAAO;AAAA,IACT;AAAA,EACF;AACF;AAEA,MAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;AA+BO,MAAM,cAAc,CAAqB;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AACF,MAA2B;AACnB,QAAA,cAAc,OAAsB,CAAA,CAAE;AACtC,QAAA,eAAe,OAA8B,IAAI;AACjD,QAAA,EAAE,4BAA4B;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAIA,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,mBAAmB;AAAA,UACjB;AAAA,QAAA,CACD;AAAA,QACD;AAAA,MACF;AAAA,MACA,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAK,KAAA,IAAI,CAAC,KAAK,UAAU;AACxB,gBAAM,MAAM,IAAI;AAEhB,gBAAM,aAAa,mBAAmB;AAEtC,iBAAO,aAAa,KAAK;AAAA,YACvB,KAAK,OAAO;AAAA,YACZ,MAAM;AAAA,YACN,SAAS,MAAM,aAAa,GAAG;AAAA,YAC/B,iBAAiB;AAAA,YACjB,KAAK,CAAC,OAAoB;AACZ,0BAAA,QAAQ,KAAK,IAAI;AAAA,YAC/B;AAAA,UAAA,CACe;AAAA,QAAA,CAClB;AAAA,QACA,2BACCC,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,iBAAiB;AAAA,cAC1B;AAAA,YAAA,CACD;AAAA,YACD,OAAO;AAAA,YACP,KAAK;AAAA,UAAA;AAAA,~~QACP~~;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
1	+ {"version":3,"file":"TabSelector.mjs","sources":["../../../src/components/TabSelector/TabSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n useRef,\n type HTMLAttributes,\n type ReactElement,\n cloneElement,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nconst tabSelectorVariant = cva(\n 'relative flex size-full flex-row items-center gap-2',\n {\n variants: {\n color: {\n primary:\n 'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n secondary:\n 'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n destructive:\n 'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n neutral:\n 'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n },\n },\n defaultVariants: {\n color: 'primary',\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-lg transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary:\n 'bg-primary/10 aria-selected:text-text dark:bg-primary-dark/10 dark:aria-selected:text-text-dark',\n secondary:\n 'bg-secondary/10 aria-selected:text-text dark:bg-secondary-dark/10 dark:aria-selected:text-text-dark',\n destructive:\n 'bg-destructive/10 aria-selected:text-text dark:bg-destructive-dark/10 dark:aria-selected:text-text-dark',\n neutral:\n 'bg-neutral/10 aria-selected:text-white dark:bg-neutral-dark/10 dark:aria-selected:text-text',\n light: 'bg-white/10 aria-selected:text-black',\n dark: 'bg-neutral-800/10 aria-selected:text-white',\n text: 'bg-text/10 aria-selected:text-text-dark dark:bg-text-dark/10 dark:aria-selected:text-text',\n },\n },\n }\n);\n\nexport type TabProps = HTMLAttributes<HTMLElement> & {\n key: string \| number;\n};\n\ntype TabSelectorProps<T extends TabProps> = {\n tabs: ReactElement<T>[];\n selectedChoice: T['key'];\n onTabClick?: (choice: T['key']) => void;\n hoverable?: boolean;\n} & HTMLAttributes<HTMLElement> &\n VariantProps<typeof tabSelectorVariant>;\n\n/*\n \n * Component that allows the user to select one of the provided choices.\n \n Example:\n * ```jsx\n * <TabSelector\n * selectedChoice=\"option1\"\n * onTabClick={(choice) => console.log(choice)}\n * hoverable={true}\n * >\n * <Button key=\"option1\"/>\n * <Button key=\"option2\"/>\n * <Button key=\"option3\"/>\n * </TabSelector>\n * ```\n */\nexport const TabSelector = <T extends TabProps>({\n tabs,\n selectedChoice,\n onTabClick,\n color = 'primary',\n hoverable = false,\n className,\n}: TabSelectorProps<T>) => {\n const optionsRefs = useRef<HTMLElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition } = useItemSelector(\n optionsRefs,\n undefined,\n hoverable\n );\n\n return (\n <div\n className={cn(\n tabSelectorVariant({\n color,\n }),\n className\n )}\n aria-orientation=\"horizontal\"\n aria-multiselectable=\"false\"\n role=\"tablist\"\n >\n {tabs.map((Tab, index) => {\n const key = Tab.key!;\n\n const isSelected = selectedChoice === key;\n\n return cloneElement(Tab, {\n key: key ?? index,\n role: 'tab',\n onClick: () => onTabClick?.(key),\n 'aria-selected': isSelected,\n ref: (el: HTMLElement) => {\n optionsRefs.current[index] = el!;\n },\n } as unknown as T);\n })}\n {choiceIndicatorPosition && (\n <div\n className={indicatorVariant({\n color,\n })}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n key={`${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`}\n />\n )}\n </div>\n );\n};\n"],"names":["jsxs","jsx"],"mappings":";;;;;;;;;;;;;;;;;;AAYA,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,OAAO;AAAA,IACT;AAAA,EACF;AACF;AAEA,MAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;AA+BO,MAAM,cAAc,CAAqB;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AACF,MAA2B;AACnB,QAAA,cAAc,OAAsB,CAAA,CAAE;AACtC,QAAA,eAAe,OAA8B,IAAI;AACjD,QAAA,EAAE,4BAA4B;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAIA,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,mBAAmB;AAAA,UACjB;AAAA,QAAA,CACD;AAAA,QACD;AAAA,MACF;AAAA,MACA,oBAAiB;AAAA,MACjB,wBAAqB;AAAA,MACrB,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAK,KAAA,IAAI,CAAC,KAAK,UAAU;AACxB,gBAAM,MAAM,IAAI;AAEhB,gBAAM,aAAa,mBAAmB;AAEtC,iBAAO,aAAa,KAAK;AAAA,YACvB,KAAK,OAAO;AAAA,YACZ,MAAM;AAAA,YACN,SAAS,MAAM,aAAa,GAAG;AAAA,YAC/B,iBAAiB;AAAA,YACjB,KAAK,CAAC,OAAoB;AACZ,0BAAA,QAAQ,KAAK,IAAI;AAAA,YAC/B;AAAA,UAAA,CACe;AAAA,QAAA,CAClB;AAAA,QACA,2BACCC,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,iBAAiB;AAAA,cAC1B;AAAA,YAAA,CACD;AAAA,YACD,OAAO;AAAA,YACP,KAAK;AAAA,UAAA;AAAA,UACA,GAAG,cAAc,GAAG,KAAK,UAAU,KAAK,IAAI,CAAC,QAAQ,IAAI,GAAG,CAAC,CAAC;AAAA,QACrE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/Tag/index.cjs ADDED Viewed

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../jsx-runtime-DvCoRj5u.cjs");
+const classVarianceAuthority = require("class-variance-authority");
+const require$$0 = require("react");
+const containerVariants = classVarianceAuthority.cva("backdrop-blur w-fit", {
+  variants: {
+    roundedSize: {
+      none: "rounded-none",
+      sm: "rounded-sm",
+      md: "rounded-md",
+      lg: "rounded-lg",
+      xl: "rounded-xl",
+      "2xl": "rounded-2xl",
+      "3xl": "rounded-3xl",
+      full: "rounded-full"
+    },
+    color: {
+      success: "bg-success/10 dark:bg-success-dark/10 border-success dark:border-success-dark text-success dark:text-success-dark",
+      error: "bg-error/10 dark:bg-error-dark/10 border-error dark:border-error-dark text-error dark:text-error-dark",
+      warning: "bg-warning/10 dark:bg-warning-dark/10 border-warning dark:border-warning-dark text-warning dark:text-warning-dark",
+      neutral: "bg-neutral/10 dark:bg-neutral-dark/10 border-neutral dark:border-neutral-dark text-neutral dark:text-neutral-dark",
+      info: "bg-info/10 dark:bg-info-dark/10 border-info dark:border-info-dark text-info dark:text-info-dark",
+      text: "bg-text/10 dark:bg-text-dark/10 border-text dark:border-text-dark text-text dark:text-text-dark"
+    },
+    size: {
+      sm: "py-0.5 px-2 text-sm border-[1.5px]",
+      md: "py-1 px-2 text-base border-2",
+      lg: "py-2 px-3 text-lg border-2",
+      xl: "py-4 px-5 text-xl border-2"
+    },
+    border: {
+      none: "",
+      with: "border-text dark:border-text-dark border-[1.5px]"
+    },
+    background: {
+      none: "bg-none",
+      with: ""
+    }
+  },
+  defaultVariants: {
+    roundedSize: "full",
+    border: "none",
+    color: "text",
+    size: "md"
+  }
+});
+const Tag = require$$0.forwardRef(
+  ({
+    children,
+    color,
+    roundedSize,
+    size,
+    border,
+    background,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      "div",
+      {
+        ref,
+        className: containerVariants({
+          color,
+          roundedSize,
+          size,
+          border,
+          background,
+          className
+        }),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Tag.displayName = "Tag";
+exports.Tag = Tag;
+//# sourceMappingURL=index.cjs.map