@intlayer/design-system 8.7.11-canary.0 → 8.7.12

package/dist/esm/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs

@@ -1,9 +1,9 @@
 import { Button, ButtonColor, ButtonTextAlign, ButtonVariant } from "../../Button/Button.mjs";
 import { Accordion } from "../../Accordion/Accordion.mjs";
 import { getIsEditableSection } from "../getIsEditableSection.mjs";
-import { internationalization } from "@intlayer/config/built";
 import { ChevronRight, Plus } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { internationalization } from "@intlayer/config/built";
 import { useIntlayer } from "react-intlayer";
 import { useEditedContentActions, useEditorLocale, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 import { getContentNodeByKeyPath, getEmptyNode, getNodeType } from "@intlayer/core/dictionaryManipulator";

package/dist/esm/components/SwitchSelector/index.mjs

@@ -24,7 +24,7 @@ let SwitchSelectorColor = /* @__PURE__ */ function(SwitchSelectorColor) {
 	SwitchSelectorColor["TEXT"] = "text";
 	return SwitchSelectorColor;
 }({});
-const switchSelectorVariant = cva("flex w-fit cursor-pointer flex-row gap-2 rounded-full border-[1.3px] p-[1.5px]", {
+const switchSelectorVariant = cva("flex h-fit w-fit cursor-pointer gap-2 border-[1.3px] p-[1.5px]", {
 	variants: {
 		color: {
 			[`primary`]: "border-primary text-primary",
@@ -35,6 +35,10 @@ const switchSelectorVariant = cva("flex w-fit cursor-pointer flex-row gap-2 roun
 			[`dark`]: "border-neutral-800 text-neutral-800",
 			[`text`]: "border-text text-text"
 		},
+		orientation: {
+			horizontal: "flex-row rounded-full",
+			vertical: "flex-col rounded-2xl"
+		},
 		disabled: {
 			true: "cursor-not-allowed opacity-50",
 			false: ""
@@ -42,6 +46,7 @@ const switchSelectorVariant = cva("flex w-fit cursor-pointer flex-row gap-2 roun
 	},
 	defaultVariants: {
 		color: `primary`,
+		orientation: "horizontal",
 		disabled: false
 	}
 });
@@ -51,23 +56,41 @@ let SwitchSelectorSize = /* @__PURE__ */ function(SwitchSelectorSize) {
 	SwitchSelectorSize["LG"] = "lg";
 	return SwitchSelectorSize;
 }({});
-const choiceVariant = cva("z-1 w-full flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-text-opposite motion-reduce:transition-none", {
-	variants: { size: {
-		[`sm`]: "px-2 py-1 text-xs",
-		[`md`]: "p-2 text-sm",
-		[`lg`]: "p-4 text-base"
-	} },
-	defaultVariants: { size: `md` }
+const choiceVariant = cva("z-1 w-full cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-text-opposite motion-reduce:transition-none", {
+	variants: {
+		size: {
+			[`sm`]: "px-2 py-1 text-xs",
+			[`md`]: "p-2 text-sm",
+			[`lg`]: "p-4 text-base"
+		},
+		orientation: {
+			horizontal: "flex-1",
+			vertical: ""
+		}
+	},
+	defaultVariants: {
+		size: `md`,
+		orientation: "horizontal"
+	}
+});
+const indicatorVariant = cva("absolute z-0 transition-all duration-300 ease-in-out motion-reduce:transition-none", {
+	variants: {
+		color: {
+			[`primary`]: "bg-primary data-[indicator=true]:text-text",
+			[`secondary`]: "bg-secondary data-[indicator=true]:text-text",
+			[`destructive`]: "bg-destructive data-[indicator=true]:text-text",
+			[`neutral`]: "bg-neutral data-[indicator=true]:text-white",
+			[`light`]: "bg-white data-[indicator=true]:text-black",
+			[`dark`]: "bg-neutral-800 data-[indicator=true]:text-white",
+			[`text`]: "bg-text data-[indicator=true]:text-text-opposite"
+		},
+		orientation: {
+			horizontal: "top-0 h-full w-auto rounded-full",
+			vertical: "left-0 h-auto w-full rounded-xl"
+		}
+	},
+	defaultVariants: { orientation: "horizontal" }
 });
-const indicatorVariant = cva("absolute top-0 z-0 h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none", { variants: { color: {
-	[`primary`]: "bg-primary data-[indicator=true]:text-text",
-	[`secondary`]: "bg-secondary data-[indicator=true]:text-text",
-	[`destructive`]: "bg-destructive data-[indicator=true]:text-text",
-	[`neutral`]: "bg-neutral data-[indicator=true]:text-white",
-	[`light`]: "bg-white data-[indicator=true]:text-black",
-	[`dark`]: "bg-neutral-800 data-[indicator=true]:text-white",
-	[`text`]: "bg-text data-[indicator=true]:text-text-opposite"
-} } });
 /**
 *
 * Component that allows the user to select one of the provided choices.
@@ -85,12 +108,16 @@ const indicatorVariant = cva("absolute top-0 z-0 h-full w-auto rounded-full tran
 * />
 * ```
 */
-const SwitchSelector = ({ choices = defaultChoices, value, defaultValue, onChange, color = "primary", size = "md", className, itemClassName, hoverable = true, disabled = false }) => {
+const SwitchSelector = ({ choices = defaultChoices, value, defaultValue, onChange, color = "primary", size = "md", className, itemClassName, hoverable = true, disabled = false, orientation = "horizontal" }) => {
 	const [valueState, setValue] = useState(value ?? defaultValue ?? choices[0].value);
 	const [hoveredIndex, setHoveredIndex] = useState(null);
 	const optionsRefs = useRef([]);
 	const indicatorRef = useRef(null);
-	const { choiceIndicatorPosition } = useItemSelector(optionsRefs, { isHoverable: hoverable });
+	const { choiceIndicatorPosition } = useItemSelector(optionsRefs, {
+		selector: (el) => el.getAttribute("data-indicator") === "true",
+		isHoverable: false,
+		orientation
+	});
 	const selectedIndex = choices.findIndex((choice) => choice.value === valueState);
 	const indicatorIndex = hoverable && hoveredIndex !== null ? hoveredIndex : selectedIndex;
 	const handleChange = (newValue) => {
@@ -105,12 +132,13 @@ const SwitchSelector = ({ choices = defaultChoices, value, defaultValue, onChang
 		className: switchSelectorVariant({
 			color,
 			disabled,
+			orientation,
 			className
 		}),
 		role: "tablist",
 		"aria-disabled": disabled ? "true" : void 0,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "relative flex size-full flex-row items-center justify-center",
+			className: cn("relative flex w-full items-center justify-center", orientation === "horizontal" ? "h-full flex-row" : "h-fit flex-col"),
 			children: [choices.map((choice, index) => {
 				const { content, value, ...buttonProps } = choice;
 				const isKeyOfKey = typeof value === "string" || typeof value === "number";
@@ -118,7 +146,10 @@ const SwitchSelector = ({ choices = defaultChoices, value, defaultValue, onChang
 				const isIndicatorOwner = index === indicatorIndex;
 				return /* @__PURE__ */ createElement("button", {
 					...buttonProps,
-					className: cn(choiceVariant({ size }), disabled && "cursor-not-allowed", itemClassName),
+					className: cn(choiceVariant({
+						size,
+						orientation
+					}), disabled && "cursor-not-allowed", itemClassName),
 					key: isKeyOfKey ? value : index,
 					role: "tab",
 					onClick: () => handleChange(value),
@@ -133,7 +164,10 @@ const SwitchSelector = ({ choices = defaultChoices, value, defaultValue, onChang
 					onMouseLeave: () => !disabled && setHoveredIndex(null)
 				}, content);
 			}), choiceIndicatorPosition && /* @__PURE__ */ jsx("div", {
-				className: cn(indicatorVariant({ color })),
+				className: cn(indicatorVariant({
+					color,
+					orientation
+				})),
 				style: choiceIndicatorPosition,
 				ref: indicatorRef
 			})]

package/dist/esm/components/SwitchSelector/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { useItemSelector } from '@hooks/useItemSelector';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type HTMLAttributes,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\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\nexport type SwitchSelectorProps<T = boolean> = {\n  choices?: SwitchSelectorChoices<T>;\n  value?: T;\n  defaultValue?: T;\n  onChange?: (choice: T) => void;\n  className?: string;\n  itemClassName?: string;\n  hoverable?: boolean;\n  disabled?: boolean;\n} & VariantProps<typeof switchSelectorVariant> &\n  VariantProps<typeof choiceVariant>;\n\nexport enum SwitchSelectorColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n}\n\nconst switchSelectorVariant = cva(\n  'flex w-fit cursor-pointer flex-row gap-2 rounded-full border-[1.3px] p-[1.5px]',\n  {\n    variants: {\n      color: {\n        [`${SwitchSelectorColor.PRIMARY}`]: 'border-primary text-primary',\n        [`${SwitchSelectorColor.SECONDARY}`]: 'border-secondary text-secondary',\n        [`${SwitchSelectorColor.DESTRUCTIVE}`]:\n          'border-destructive bg-destructive text-destructive',\n        [`${SwitchSelectorColor.NEUTRAL}`]: 'border-neutral text-neutral',\n        [`${SwitchSelectorColor.LIGHT}`]: 'border-white text-white',\n        [`${SwitchSelectorColor.DARK}`]: 'border-neutral-800 text-neutral-800',\n        [`${SwitchSelectorColor.TEXT}`]: 'border-text text-text',\n      },\n      disabled: {\n        true: 'cursor-not-allowed opacity-50',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      color: `${SwitchSelectorColor.PRIMARY}`,\n      disabled: false,\n    },\n  }\n);\n\nexport enum SwitchSelectorSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n}\n\nconst choiceVariant = cva(\n  'z-1 w-full flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-text-opposite motion-reduce:transition-none',\n  {\n    variants: {\n      size: {\n        [`${SwitchSelectorSize.SM}`]: 'px-2 py-1 text-xs',\n        [`${SwitchSelectorSize.MD}`]: 'p-2 text-sm',\n        [`${SwitchSelectorSize.LG}`]: 'p-4 text-base',\n      },\n    },\n    defaultVariants: {\n      size: `${SwitchSelectorSize.MD}`,\n    },\n  }\n);\n\nconst indicatorVariant = cva(\n  'absolute top-0 z-0 h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        [`${SwitchSelectorColor.PRIMARY}`]:\n          'bg-primary data-[indicator=true]:text-text',\n        [`${SwitchSelectorColor.SECONDARY}`]:\n          'bg-secondary data-[indicator=true]:text-text',\n        [`${SwitchSelectorColor.DESTRUCTIVE}`]:\n          'bg-destructive data-[indicator=true]:text-text',\n        [`${SwitchSelectorColor.NEUTRAL}`]:\n          'bg-neutral data-[indicator=true]:text-white',\n        [`${SwitchSelectorColor.LIGHT}`]:\n          'bg-white data-[indicator=true]:text-black',\n        [`${SwitchSelectorColor.DARK}`]:\n          'bg-neutral-800 data-[indicator=true]:text-white',\n        [`${SwitchSelectorColor.TEXT}`]:\n          'bg-text data-[indicator=true]:text-text-opposite',\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 = SwitchSelectorColor.PRIMARY,\n  size = SwitchSelectorSize.MD,\n  className,\n  itemClassName,\n  hoverable = true,\n  disabled = false,\n}: SwitchSelectorProps<T>) => {\n  const [valueState, setValue] = useState<T>(\n    value ?? defaultValue ?? choices[0].value\n  );\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);\n\n  const optionsRefs = useRef<HTMLButtonElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition } = useItemSelector(optionsRefs, {\n    isHoverable: hoverable,\n  });\n\n  const selectedIndex = choices.findIndex(\n    (choice) => choice.value === valueState\n  );\n\n  // The indicator follows hover if hoverable, otherwise the selected option\n  const indicatorIndex =\n    hoverable && hoveredIndex !== null ? hoveredIndex : selectedIndex;\n\n  const handleChange = (newValue: T) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  useEffect(() => {\n    if (value === undefined) return;\n    setValue(value);\n  }, [value]);\n\n  return (\n    <div\n      className={switchSelectorVariant({\n        color,\n        disabled,\n        className,\n      })}\n      role=\"tablist\"\n      aria-disabled={disabled ? 'true' : undefined}\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 = index === selectedIndex;\n          const isIndicatorOwner = index === indicatorIndex;\n\n          return (\n            <button\n              {...buttonProps}\n              className={cn(\n                choiceVariant({\n                  size,\n                }),\n                disabled && 'cursor-not-allowed',\n                itemClassName\n              )}\n              key={isKeyOfKey ? value : index}\n              role=\"tab\"\n              onClick={() => handleChange(value)}\n              aria-selected={isSelected ? 'true' : undefined}\n              data-indicator={isIndicatorOwner ? 'true' : undefined}\n              disabled={disabled || isSelected}\n              tabIndex={isSelected ? 0 : -1}\n              ref={(el) => {\n                optionsRefs.current[index] = el!;\n              }}\n              onMouseEnter={() => !disabled && setHoveredIndex(index)}\n              onMouseLeave={() => !disabled && setHoveredIndex(null)}\n            >\n              {content}\n            </button>\n          );\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"],"mappings":";;;;;;;;;AAmBA,MAAM,iBAAiD,CACrD;CAAE,SAAS;CAAO,OAAO;CAAO,EAChC;CAAE,SAAS;CAAM,OAAO;CAAM,CAC/B;AAcD,IAAY,sBAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;KACD;AAED,MAAM,wBAAwB,IAC5B,kFACA;CACE,UAAU;EACR,OAAO;IACJ,YAAmC;IACnC,cAAqC;IACrC,gBACC;IACD,YAAmC;IACnC,UAAiC;IACjC,SAAgC;IAChC,SAAgC;GAClC;EACD,UAAU;GACR,MAAM;GACN,OAAO;GACR;EACF;CACD,iBAAiB;EACf,OAAO;EACP,UAAU;EACX;CACF,CACF;AAED,IAAY,qBAAL;AACL;AACA;AACA;;KACD;AAED,MAAM,gBAAgB,IACpB,oMACA;CACE,UAAU,EACR,MAAM;GACH,OAA6B;GAC7B,OAA6B;GAC7B,OAA6B;EAC/B,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CACF;AAED,MAAM,mBAAmB,IACvB,gIACA,EACE,UAAU,EACR,OAAO;EACJ,YACC;EACD,cACC;EACD,gBACC;EACD,YACC;EACD,UACC;EACD,SACC;EACD,SACC;CACH,EACF,EACF,CACF;;;;;;;;;;;;;;;;;;AAmBD,MAAa,kBAAsB,EACjC,UAAU,gBACV,OACA,cACA,UACA,mBACA,aACA,WACA,eACA,YAAY,MACZ,WAAW,YACiB;CAC5B,MAAM,CAAC,YAAY,YAAY,SAC7B,SAAS,gBAAgB,QAAQ,GAAG,MACrC;CACD,MAAM,CAAC,cAAc,mBAAmB,SAAwB,KAAK;CAErE,MAAM,cAAc,OAA4B,EAAE,CAAC;CACnD,MAAM,eAAe,OAA8B,KAAK;CACxD,MAAM,EAAE,4BAA4B,gBAAgB,aAAa,EAC/D,aAAa,WACd,CAAC;CAEF,MAAM,gBAAgB,QAAQ,WAC3B,WAAW,OAAO,UAAU,WAC9B;CAGD,MAAM,iBACJ,aAAa,iBAAiB,OAAO,eAAe;CAEtD,MAAM,gBAAgB,aAAgB;AACpC,WAAS,SAAS;AAClB,aAAW,SAAS;;AAGtB,iBAAgB;AACd,MAAI,UAAU,OAAW;AACzB,WAAS,MAAM;IACd,CAAC,MAAM,CAAC;AAEX,QACE,oBAAC,OAAD;EACE,WAAW,sBAAsB;GAC/B;GACA;GACA;GACD,CAAC;EACF,MAAK;EACL,iBAAe,WAAW,SAAS;YAEnC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,QAAQ,KAAK,QAAQ,UAAU;IAC9B,MAAM,EAAE,SAAS,OAAO,GAAG,gBAAgB;IAE3C,MAAM,aACJ,OAAO,UAAU,YAAY,OAAO,UAAU;IAEhD,MAAM,aAAa,UAAU;IAC7B,MAAM,mBAAmB,UAAU;AAEnC,WACE,8BAAC,UAAD;KACE,GAAI;KACJ,WAAW,GACT,cAAc,EACZ,MACD,CAAC,EACF,YAAY,sBACZ,cACD;KACD,KAAK,aAAa,QAAQ;KAC1B,MAAK;KACL,eAAe,aAAa,MAAM;KAClC,iBAAe,aAAa,SAAS;KACrC,kBAAgB,mBAAmB,SAAS;KAC5C,UAAU,YAAY;KACtB,UAAU,aAAa,IAAI;KAC3B,MAAM,OAAO;AACX,kBAAY,QAAQ,SAAS;;KAE/B,oBAAoB,CAAC,YAAY,gBAAgB,MAAM;KACvD,oBAAoB,CAAC,YAAY,gBAAgB,KAAK;KAG/C,EADN,QACM;KAEX,EAED,2BACC,oBAAC,OAAD;IACE,WAAW,GACT,iBAAiB,EACf,OACD,CAAC,CACH;IACD,OAAO;IACP,KAAK;IACL,EAEA;;EACF"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ItemSelectorOrientation,\n  useItemSelector,\n} from '@hooks/useItemSelector';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type HTMLAttributes,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\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\nexport type SwitchSelectorProps<T = boolean> = {\n  choices?: SwitchSelectorChoices<T>;\n  value?: T;\n  defaultValue?: T;\n  onChange?: (choice: T) => void;\n  className?: string;\n  itemClassName?: string;\n  hoverable?: boolean;\n  disabled?: boolean;\n  orientation?: ItemSelectorOrientation;\n} & VariantProps<typeof switchSelectorVariant> &\n  VariantProps<typeof choiceVariant>;\n\nexport enum SwitchSelectorColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n}\n\nconst switchSelectorVariant = cva(\n  'flex h-fit w-fit cursor-pointer gap-2 border-[1.3px] p-[1.5px]',\n  {\n    variants: {\n      color: {\n        [`${SwitchSelectorColor.PRIMARY}`]: 'border-primary text-primary',\n        [`${SwitchSelectorColor.SECONDARY}`]: 'border-secondary text-secondary',\n        [`${SwitchSelectorColor.DESTRUCTIVE}`]:\n          'border-destructive bg-destructive text-destructive',\n        [`${SwitchSelectorColor.NEUTRAL}`]: 'border-neutral text-neutral',\n        [`${SwitchSelectorColor.LIGHT}`]: 'border-white text-white',\n        [`${SwitchSelectorColor.DARK}`]: 'border-neutral-800 text-neutral-800',\n        [`${SwitchSelectorColor.TEXT}`]: 'border-text text-text',\n      },\n      orientation: {\n        horizontal: 'flex-row rounded-full',\n        vertical: 'flex-col rounded-2xl',\n      },\n      disabled: {\n        true: 'cursor-not-allowed opacity-50',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      color: `${SwitchSelectorColor.PRIMARY}`,\n      orientation: 'horizontal',\n      disabled: false,\n    },\n  }\n);\n\nexport enum SwitchSelectorSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n}\n\nconst choiceVariant = cva(\n  'z-1 w-full cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-text-opposite motion-reduce:transition-none',\n  {\n    variants: {\n      size: {\n        [`${SwitchSelectorSize.SM}`]: 'px-2 py-1 text-xs',\n        [`${SwitchSelectorSize.MD}`]: 'p-2 text-sm',\n        [`${SwitchSelectorSize.LG}`]: 'p-4 text-base',\n      },\n      orientation: {\n        horizontal: 'flex-1',\n        vertical: '',\n      },\n    },\n    defaultVariants: {\n      size: `${SwitchSelectorSize.MD}`,\n      orientation: 'horizontal',\n    },\n  }\n);\n\nconst indicatorVariant = cva(\n  'absolute z-0 transition-all duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        [`${SwitchSelectorColor.PRIMARY}`]:\n          'bg-primary data-[indicator=true]:text-text',\n        [`${SwitchSelectorColor.SECONDARY}`]:\n          'bg-secondary data-[indicator=true]:text-text',\n        [`${SwitchSelectorColor.DESTRUCTIVE}`]:\n          'bg-destructive data-[indicator=true]:text-text',\n        [`${SwitchSelectorColor.NEUTRAL}`]:\n          'bg-neutral data-[indicator=true]:text-white',\n        [`${SwitchSelectorColor.LIGHT}`]:\n          'bg-white data-[indicator=true]:text-black',\n        [`${SwitchSelectorColor.DARK}`]:\n          'bg-neutral-800 data-[indicator=true]:text-white',\n        [`${SwitchSelectorColor.TEXT}`]:\n          'bg-text data-[indicator=true]:text-text-opposite',\n      },\n      orientation: {\n        horizontal: 'top-0 h-full w-auto rounded-full',\n        vertical: 'left-0 h-auto w-full rounded-xl',\n      },\n    },\n    defaultVariants: {\n      orientation: 'horizontal',\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 = SwitchSelectorColor.PRIMARY,\n  size = SwitchSelectorSize.MD,\n  className,\n  itemClassName,\n  hoverable = true,\n  disabled = false,\n  orientation = 'horizontal',\n}: SwitchSelectorProps<T>) => {\n  const [valueState, setValue] = useState<T>(\n    value ?? defaultValue ?? choices[0].value\n  );\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);\n\n  const optionsRefs = useRef<HTMLButtonElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition } = useItemSelector(optionsRefs, {\n    selector: (el) => el.getAttribute('data-indicator') === 'true',\n    isHoverable: false,\n    orientation,\n  });\n\n  const selectedIndex = choices.findIndex(\n    (choice) => choice.value === valueState\n  );\n\n  // The indicator follows hover if hoverable, otherwise the selected option\n  const indicatorIndex =\n    hoverable && hoveredIndex !== null ? hoveredIndex : selectedIndex;\n\n  const handleChange = (newValue: T) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  useEffect(() => {\n    if (value === undefined) return;\n    setValue(value);\n  }, [value]);\n\n  return (\n    <div\n      className={switchSelectorVariant({\n        color,\n        disabled,\n        orientation,\n        className,\n      })}\n      role=\"tablist\"\n      aria-disabled={disabled ? 'true' : undefined}\n    >\n      <div\n        className={cn(\n          'relative flex w-full items-center justify-center',\n          orientation === 'horizontal' ? 'h-full flex-row' : 'h-fit flex-col'\n        )}\n      >\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 = index === selectedIndex;\n          const isIndicatorOwner = index === indicatorIndex;\n\n          return (\n            <button\n              {...buttonProps}\n              className={cn(\n                choiceVariant({\n                  size,\n                  orientation,\n                }),\n                disabled && 'cursor-not-allowed',\n                itemClassName\n              )}\n              key={isKeyOfKey ? value : index}\n              role=\"tab\"\n              onClick={() => handleChange(value)}\n              aria-selected={isSelected ? 'true' : undefined}\n              data-indicator={isIndicatorOwner ? 'true' : undefined}\n              disabled={disabled || isSelected}\n              tabIndex={isSelected ? 0 : -1}\n              ref={(el) => {\n                optionsRefs.current[index] = el!;\n              }}\n              onMouseEnter={() => !disabled && setHoveredIndex(index)}\n              onMouseLeave={() => !disabled && setHoveredIndex(null)}\n            >\n              {content}\n            </button>\n          );\n        })}\n\n        {choiceIndicatorPosition && (\n          <div\n            className={cn(\n              indicatorVariant({\n                color,\n                orientation,\n              })\n            )}\n            style={choiceIndicatorPosition}\n            ref={indicatorRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/hooks/useAuth/useOAuth2.mjs

@@ -1,7 +1,7 @@
 'use client';
 
-import configuration from "@intlayer/config/built";
 import { useQuery } from "@tanstack/react-query";
+import configuration from "@intlayer/config/built";
 import { useConfiguration } from "@intlayer/editor-react";
 import { getOAuthAPI } from "@intlayer/api";
 

package/dist/esm/hooks/useAuth/useSession.mjs

@@ -2,8 +2,8 @@
 
 import { getAuthAPI } from "../../libs/auth.mjs";
 import { useQueryClient } from "../reactQuery.mjs";
-import configuration from "@intlayer/config/built";
 import { useQuery } from "@tanstack/react-query";
+import configuration from "@intlayer/config/built";
 import { useConfiguration } from "@intlayer/editor-react";
 
 //#region src/hooks/useAuth/useSession.ts

package/dist/esm/hooks/useItemSelector.mjs

@@ -72,14 +72,18 @@ const useItemSelector = (optionsRefs, { selector = selectorDefault, isHoverable
 		optionsRefs.current.forEach((option) => {
 			if (option) {
 				const observer = new MutationObserver((mutations) => {
-					for (const mutation of mutations) if (mutation.type === "attributes" && mutation.attributeName === "aria-selected") {
+					for (const mutation of mutations) if (mutation.type === "attributes" && (mutation.attributeName === "aria-selected" || mutation.attributeName === "data-active" || mutation.attributeName === "data-indicator")) {
 						calculatePosition();
 						break;
 					}
 				});
 				observer.observe(option, {
 					attributes: true,
-					attributeFilter: ["aria-selected"]
+					attributeFilter: [
+						"aria-selected",
+						"data-active",
+						"data-indicator"
+					]
 				});
 				mutationObservers.push(observer);
 			}
@@ -133,7 +137,8 @@ const useItemSelector = (optionsRefs, { selector = selectorDefault, isHoverable
 		selector,
 		hoveredItem,
 		itemsLength,
-		orientation
+		orientation,
+		isHoverable
 	]);
 	return {
 		choiceIndicatorPosition,

package/dist/esm/hooks/useItemSelector.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useItemSelector.mjs","names":[],"sources":["../../../src/hooks/useItemSelector.ts"],"sourcesContent":["'use client';\n\nimport { type RefObject, useEffect, useRef, useState } from 'react';\n\nexport type ItemSelectorOrientation = 'horizontal' | 'vertical';\n\ntype HorizontalStyleState = {\n  left: number;\n  width: number;\n  opacity: number;\n};\n\ntype VerticalStyleState = {\n  top: number;\n  height: number;\n  opacity: number;\n};\n\ntype StyleState = HorizontalStyleState | VerticalStyleState;\n\nconst selectorDefault = (option: HTMLElement) =>\n  option?.getAttribute('aria-selected') === 'true';\n\ntype Options = {\n  selector?: (option: HTMLElement, index: number) => boolean;\n  isHoverable?: boolean;\n  orientation?: ItemSelectorOrientation;\n};\n\nexport const useItemSelector = (\n  optionsRefs: RefObject<HTMLElement[]>,\n  {\n    selector = selectorDefault,\n    isHoverable = false,\n    orientation = 'horizontal',\n  }: Options = {\n    selector: selectorDefault,\n    isHoverable: false,\n    orientation: 'horizontal',\n  }\n) => {\n  const [choiceIndicatorPosition, setChoiceIndicatorPosition] =\n    useState<StyleState | null>(null);\n\n  const [hoveredItem, setHoveredItem] = useState<HTMLElement | null>(null);\n  const hideTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n  const lastPositionRef = useRef<StyleState | null>(null);\n\n  const itemsLength = optionsRefs.current.length;\n\n  const calculatePosition = () => {\n    let targetElement: HTMLElement | null = null;\n\n    if (hoveredItem) {\n      targetElement = hoveredItem;\n      // Clear any pending hide timeout when hovering over an item\n      if (hideTimeoutRef.current) {\n        clearTimeout(hideTimeoutRef.current);\n        hideTimeoutRef.current = null;\n      }\n    } else {\n      targetElement = optionsRefs.current.find(selector) ?? null;\n    }\n\n    if (!targetElement) {\n      // Keep previous position but set opacity to 0\n      if (orientation === 'vertical') {\n        setChoiceIndicatorPosition((prev) => {\n          const verticalPrev = prev as VerticalStyleState | null;\n          const newPosition: VerticalStyleState = {\n            top: verticalPrev?.top ?? 0,\n            height: verticalPrev?.height ?? 0,\n            opacity: 0,\n          };\n          lastPositionRef.current = newPosition;\n          return newPosition;\n        });\n      } else {\n        setChoiceIndicatorPosition((prev) => {\n          const horizontalPrev = prev as HorizontalStyleState | null;\n          const newPosition: HorizontalStyleState = {\n            left: horizontalPrev?.left ?? 0,\n            width: horizontalPrev?.width ?? 0,\n            opacity: 0,\n          };\n          lastPositionRef.current = newPosition;\n          return newPosition;\n        });\n      }\n      return;\n    }\n\n    if (orientation === 'vertical') {\n      const top = targetElement.offsetTop;\n      const height = targetElement.offsetHeight;\n\n      const newPosition = {\n        top,\n        height,\n        opacity: 1,\n      };\n      setChoiceIndicatorPosition(newPosition);\n      lastPositionRef.current = newPosition;\n    } else {\n      const left = targetElement.offsetLeft;\n      const width = targetElement.offsetWidth;\n\n      const newPosition = {\n        left,\n        width,\n        opacity: 1,\n      };\n      setChoiceIndicatorPosition(newPosition);\n      lastPositionRef.current = newPosition;\n    }\n  };\n\n  useEffect(() => {\n    calculatePosition();\n\n    // Event listeners for window events\n    window.addEventListener('resize', calculatePosition);\n    window.addEventListener('DOMContentLoaded', calculatePosition);\n\n    // MutationObserver to watch for 'aria-selected' changes\n    const mutationObservers: MutationObserver[] = [];\n\n    optionsRefs.current.forEach((option) => {\n      if (option) {\n        const observer = new MutationObserver((mutations) => {\n          for (const mutation of mutations) {\n            if (\n              mutation.type === 'attributes' &&\n              mutation.attributeName === 'aria-selected'\n            ) {\n              calculatePosition();\n              break;\n            }\n          }\n        });\n\n        observer.observe(option, {\n          attributes: true,\n          attributeFilter: ['aria-selected'],\n        });\n\n        mutationObservers.push(observer);\n      }\n    });\n\n    // ResizeObserver to watch for size changes\n    const resizeObservers: ResizeObserver[] = [];\n\n    const observeSize = (element: HTMLElement) => {\n      if (!element) return;\n      const resizeObserver = new ResizeObserver(() => {\n        calculatePosition();\n      });\n      resizeObserver.observe(element);\n      resizeObservers.push(resizeObserver);\n    };\n\n    // Observe the selected item\n    const selectedItem = optionsRefs.current.find(selector) ?? null;\n\n    if (selectedItem) {\n      observeSize(selectedItem);\n    }\n\n    // Observe the hovered item\n    if (hoveredItem) {\n      observeSize(hoveredItem);\n    }\n\n    // Add hover event listeners\n    const handleMouseEnter = (event: Event) => {\n      // Clear any pending hide timeout\n      if (hideTimeoutRef.current) {\n        clearTimeout(hideTimeoutRef.current);\n        hideTimeoutRef.current = null;\n      }\n      setHoveredItem(event.currentTarget as HTMLElement);\n    };\n\n    const handleMouseLeave = () => {\n      // Clear any existing timeout\n      if (hideTimeoutRef.current) {\n        clearTimeout(hideTimeoutRef.current);\n      }\n\n      // Keep the indicator at its current position for 150ms\n      // before removing the hovered item\n      hideTimeoutRef.current = setTimeout(() => {\n        setHoveredItem(null);\n      }, 150); // 150ms delay before hiding\n    };\n\n    if (isHoverable) {\n      optionsRefs.current.forEach((option) => {\n        option?.addEventListener('mouseenter', handleMouseEnter, {\n          passive: true,\n        });\n        option?.addEventListener('mouseleave', handleMouseLeave, {\n          passive: true,\n        });\n      });\n    }\n\n    return () => {\n      // Clear any pending hide timeout\n      if (hideTimeoutRef.current) {\n        clearTimeout(hideTimeoutRef.current);\n      }\n\n      // Cleanup window event listeners\n      window.removeEventListener('resize', calculatePosition);\n      window.removeEventListener('DOMContentLoaded', calculatePosition);\n\n      // Disconnect MutationObservers\n      mutationObservers.forEach((observer) => {\n        observer.disconnect();\n      });\n\n      // Disconnect ResizeObservers\n      resizeObservers.forEach((observer) => {\n        observer.disconnect();\n      });\n\n      // Remove hover event listeners\n      optionsRefs.current.forEach((option) => {\n        option?.removeEventListener('mouseenter', handleMouseEnter);\n        option?.removeEventListener('mouseleave', handleMouseLeave);\n      });\n    };\n  }, [optionsRefs, selector, hoveredItem, itemsLength, orientation]);\n\n  return { choiceIndicatorPosition, calculatePosition, orientation };\n};\n"],"mappings":";;;;;AAoBA,MAAM,mBAAmB,WACvB,QAAQ,aAAa,gBAAgB,KAAK;AAQ5C,MAAa,mBACX,aACA,EACE,WAAW,iBACX,cAAc,OACd,cAAc,iBACH;CACX,UAAU;CACV,aAAa;CACb,aAAa;CACd,KACE;CACH,MAAM,CAAC,yBAAyB,8BAC9B,SAA4B,KAAK;CAEnC,MAAM,CAAC,aAAa,kBAAkB,SAA6B,KAAK;CACxE,MAAM,iBAAiB,OAA8B,KAAK;CAC1D,MAAM,kBAAkB,OAA0B,KAAK;CAEvD,MAAM,cAAc,YAAY,QAAQ;CAExC,MAAM,0BAA0B;EAC9B,IAAI,gBAAoC;AAExC,MAAI,aAAa;AACf,mBAAgB;AAEhB,OAAI,eAAe,SAAS;AAC1B,iBAAa,eAAe,QAAQ;AACpC,mBAAe,UAAU;;QAG3B,iBAAgB,YAAY,QAAQ,KAAK,SAAS,IAAI;AAGxD,MAAI,CAAC,eAAe;AAElB,OAAI,gBAAgB,WAClB,6BAA4B,SAAS;IACnC,MAAM,eAAe;IACrB,MAAM,cAAkC;KACtC,KAAK,cAAc,OAAO;KAC1B,QAAQ,cAAc,UAAU;KAChC,SAAS;KACV;AACD,oBAAgB,UAAU;AAC1B,WAAO;KACP;OAEF,6BAA4B,SAAS;IACnC,MAAM,iBAAiB;IACvB,MAAM,cAAoC;KACxC,MAAM,gBAAgB,QAAQ;KAC9B,OAAO,gBAAgB,SAAS;KAChC,SAAS;KACV;AACD,oBAAgB,UAAU;AAC1B,WAAO;KACP;AAEJ;;AAGF,MAAI,gBAAgB,YAAY;GAI9B,MAAM,cAAc;IAClB,KAJU,cAAc;IAKxB,QAJa,cAAc;IAK3B,SAAS;IACV;AACD,8BAA2B,YAAY;AACvC,mBAAgB,UAAU;SACrB;GAIL,MAAM,cAAc;IAClB,MAJW,cAAc;IAKzB,OAJY,cAAc;IAK1B,SAAS;IACV;AACD,8BAA2B,YAAY;AACvC,mBAAgB,UAAU;;;AAI9B,iBAAgB;AACd,qBAAmB;AAGnB,SAAO,iBAAiB,UAAU,kBAAkB;AACpD,SAAO,iBAAiB,oBAAoB,kBAAkB;EAG9D,MAAM,oBAAwC,EAAE;AAEhD,cAAY,QAAQ,SAAS,WAAW;AACtC,OAAI,QAAQ;IACV,MAAM,WAAW,IAAI,kBAAkB,cAAc;AACnD,UAAK,MAAM,YAAY,UACrB,KACE,SAAS,SAAS,gBAClB,SAAS,kBAAkB,iBAC3B;AACA,yBAAmB;AACnB;;MAGJ;AAEF,aAAS,QAAQ,QAAQ;KACvB,YAAY;KACZ,iBAAiB,CAAC,gBAAgB;KACnC,CAAC;AAEF,sBAAkB,KAAK,SAAS;;IAElC;EAGF,MAAM,kBAAoC,EAAE;EAE5C,MAAM,eAAe,YAAyB;AAC5C,OAAI,CAAC,QAAS;GACd,MAAM,iBAAiB,IAAI,qBAAqB;AAC9C,uBAAmB;KACnB;AACF,kBAAe,QAAQ,QAAQ;AAC/B,mBAAgB,KAAK,eAAe;;EAItC,MAAM,eAAe,YAAY,QAAQ,KAAK,SAAS,IAAI;AAE3D,MAAI,aACF,aAAY,aAAa;AAI3B,MAAI,YACF,aAAY,YAAY;EAI1B,MAAM,oBAAoB,UAAiB;AAEzC,OAAI,eAAe,SAAS;AAC1B,iBAAa,eAAe,QAAQ;AACpC,mBAAe,UAAU;;AAE3B,kBAAe,MAAM,cAA6B;;EAGpD,MAAM,yBAAyB;AAE7B,OAAI,eAAe,QACjB,cAAa,eAAe,QAAQ;AAKtC,kBAAe,UAAU,iBAAiB;AACxC,mBAAe,KAAK;MACnB,IAAI;;AAGT,MAAI,YACF,aAAY,QAAQ,SAAS,WAAW;AACtC,WAAQ,iBAAiB,cAAc,kBAAkB,EACvD,SAAS,MACV,CAAC;AACF,WAAQ,iBAAiB,cAAc,kBAAkB,EACvD,SAAS,MACV,CAAC;IACF;AAGJ,eAAa;AAEX,OAAI,eAAe,QACjB,cAAa,eAAe,QAAQ;AAItC,UAAO,oBAAoB,UAAU,kBAAkB;AACvD,UAAO,oBAAoB,oBAAoB,kBAAkB;AAGjE,qBAAkB,SAAS,aAAa;AACtC,aAAS,YAAY;KACrB;AAGF,mBAAgB,SAAS,aAAa;AACpC,aAAS,YAAY;KACrB;AAGF,eAAY,QAAQ,SAAS,WAAW;AACtC,YAAQ,oBAAoB,cAAc,iBAAiB;AAC3D,YAAQ,oBAAoB,cAAc,iBAAiB;KAC3D;;IAEH;EAAC;EAAa;EAAU;EAAa;EAAa;EAAY,CAAC;AAElE,QAAO;EAAE;EAAyB;EAAmB;EAAa"}
+{"version":3,"file":"useItemSelector.mjs","names":[],"sources":["../../../src/hooks/useItemSelector.ts"],"sourcesContent":["'use client';\n\nimport { type RefObject, useEffect, useRef, useState } from 'react';\n\nexport type ItemSelectorOrientation = 'horizontal' | 'vertical';\n\ntype HorizontalStyleState = {\n  left: number;\n  width: number;\n  opacity: number;\n};\n\ntype VerticalStyleState = {\n  top: number;\n  height: number;\n  opacity: number;\n};\n\ntype StyleState = HorizontalStyleState | VerticalStyleState;\n\nconst selectorDefault = (option: HTMLElement) =>\n  option?.getAttribute('aria-selected') === 'true';\n\ntype Options = {\n  selector?: (option: HTMLElement, index: number) => boolean;\n  isHoverable?: boolean;\n  orientation?: ItemSelectorOrientation;\n};\n\nexport const useItemSelector = (\n  optionsRefs: RefObject<HTMLElement[]>,\n  {\n    selector = selectorDefault,\n    isHoverable = false,\n    orientation = 'horizontal',\n  }: Options = {\n    selector: selectorDefault,\n    isHoverable: false,\n    orientation: 'horizontal',\n  }\n) => {\n  const [choiceIndicatorPosition, setChoiceIndicatorPosition] =\n    useState<StyleState | null>(null);\n\n  const [hoveredItem, setHoveredItem] = useState<HTMLElement | null>(null);\n  const hideTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n  const lastPositionRef = useRef<StyleState | null>(null);\n\n  const itemsLength = optionsRefs.current.length;\n\n  const calculatePosition = () => {\n    let targetElement: HTMLElement | null = null;\n\n    if (hoveredItem) {\n      targetElement = hoveredItem;\n      // Clear any pending hide timeout when hovering over an item\n      if (hideTimeoutRef.current) {\n        clearTimeout(hideTimeoutRef.current);\n        hideTimeoutRef.current = null;\n      }\n    } else {\n      targetElement = optionsRefs.current.find(selector) ?? null;\n    }\n\n    if (!targetElement) {\n      // Keep previous position but set opacity to 0\n      if (orientation === 'vertical') {\n        setChoiceIndicatorPosition((prev) => {\n          const verticalPrev = prev as VerticalStyleState | null;\n          const newPosition: VerticalStyleState = {\n            top: verticalPrev?.top ?? 0,\n            height: verticalPrev?.height ?? 0,\n            opacity: 0,\n          };\n          lastPositionRef.current = newPosition;\n          return newPosition;\n        });\n      } else {\n        setChoiceIndicatorPosition((prev) => {\n          const horizontalPrev = prev as HorizontalStyleState | null;\n          const newPosition: HorizontalStyleState = {\n            left: horizontalPrev?.left ?? 0,\n            width: horizontalPrev?.width ?? 0,\n            opacity: 0,\n          };\n          lastPositionRef.current = newPosition;\n          return newPosition;\n        });\n      }\n      return;\n    }\n\n    if (orientation === 'vertical') {\n      const top = targetElement.offsetTop;\n      const height = targetElement.offsetHeight;\n\n      const newPosition = {\n        top,\n        height,\n        opacity: 1,\n      };\n      setChoiceIndicatorPosition(newPosition);\n      lastPositionRef.current = newPosition;\n    } else {\n      const left = targetElement.offsetLeft;\n      const width = targetElement.offsetWidth;\n\n      const newPosition = {\n        left,\n        width,\n        opacity: 1,\n      };\n      setChoiceIndicatorPosition(newPosition);\n      lastPositionRef.current = newPosition;\n    }\n  };\n\n  useEffect(() => {\n    calculatePosition();\n\n    // Event listeners for window events\n    window.addEventListener('resize', calculatePosition);\n    window.addEventListener('DOMContentLoaded', calculatePosition);\n\n    // MutationObserver to watch for 'aria-selected' changes\n    const mutationObservers: MutationObserver[] = [];\n\n    optionsRefs.current.forEach((option) => {\n      if (option) {\n        const observer = new MutationObserver((mutations) => {\n          for (const mutation of mutations) {\n            if (\n              mutation.type === 'attributes' &&\n              (mutation.attributeName === 'aria-selected' ||\n                mutation.attributeName === 'data-active' ||\n                mutation.attributeName === 'data-indicator')\n            ) {\n              calculatePosition();\n              break;\n            }\n          }\n        });\n\n        observer.observe(option, {\n          attributes: true,\n          attributeFilter: ['aria-selected', 'data-active', 'data-indicator'],\n        });\n\n        mutationObservers.push(observer);\n      }\n    });\n\n    // ResizeObserver to watch for size changes\n    const resizeObservers: ResizeObserver[] = [];\n\n    const observeSize = (element: HTMLElement) => {\n      if (!element) return;\n      const resizeObserver = new ResizeObserver(() => {\n        calculatePosition();\n      });\n      resizeObserver.observe(element);\n      resizeObservers.push(resizeObserver);\n    };\n\n    // Observe the selected item\n    const selectedItem = optionsRefs.current.find(selector) ?? null;\n\n    if (selectedItem) {\n      observeSize(selectedItem);\n    }\n\n    // Observe the hovered item\n    if (hoveredItem) {\n      observeSize(hoveredItem);\n    }\n\n    // Add hover event listeners\n    const handleMouseEnter = (event: Event) => {\n      // Clear any pending hide timeout\n      if (hideTimeoutRef.current) {\n        clearTimeout(hideTimeoutRef.current);\n        hideTimeoutRef.current = null;\n      }\n      setHoveredItem(event.currentTarget as HTMLElement);\n    };\n\n    const handleMouseLeave = () => {\n      // Clear any existing timeout\n      if (hideTimeoutRef.current) {\n        clearTimeout(hideTimeoutRef.current);\n      }\n\n      // Keep the indicator at its current position for 150ms\n      // before removing the hovered item\n      hideTimeoutRef.current = setTimeout(() => {\n        setHoveredItem(null);\n      }, 150); // 150ms delay before hiding\n    };\n\n    if (isHoverable) {\n      optionsRefs.current.forEach((option) => {\n        option?.addEventListener('mouseenter', handleMouseEnter, {\n          passive: true,\n        });\n        option?.addEventListener('mouseleave', handleMouseLeave, {\n          passive: true,\n        });\n      });\n    }\n\n    return () => {\n      // Clear any pending hide timeout\n      if (hideTimeoutRef.current) {\n        clearTimeout(hideTimeoutRef.current);\n      }\n\n      // Cleanup window event listeners\n      window.removeEventListener('resize', calculatePosition);\n      window.removeEventListener('DOMContentLoaded', calculatePosition);\n\n      // Disconnect MutationObservers\n      mutationObservers.forEach((observer) => {\n        observer.disconnect();\n      });\n\n      // Disconnect ResizeObservers\n      resizeObservers.forEach((observer) => {\n        observer.disconnect();\n      });\n\n      // Remove hover event listeners\n      optionsRefs.current.forEach((option) => {\n        option?.removeEventListener('mouseenter', handleMouseEnter);\n        option?.removeEventListener('mouseleave', handleMouseLeave);\n      });\n    };\n  }, [\n    optionsRefs,\n    selector,\n    hoveredItem,\n    itemsLength,\n    orientation,\n    isHoverable,\n  ]);\n\n  return { choiceIndicatorPosition, calculatePosition, orientation };\n};\n"],"mappings":"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"}

package/dist/types/components/Badge/index.d.ts

@@ -43,9 +43,9 @@ declare enum BadgeSize {
  * @description Defines the styling variants for different badge combinations
  */
 declare const badgeVariants: (props?: {
-  color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "error" | "success" | "custom";
+  color?: "text" | "error" | "custom" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "success";
   variant?: "none" | "default" | "hoverable" | "outline";
-  size?: "sm" | "md" | "lg";
+  size?: "lg" | "md" | "sm";
 } & _$class_variance_authority_types0.ClassProp) => string;
 /**
  * Badge component props interface

package/dist/types/components/Button/Button.d.ts

@@ -60,11 +60,11 @@ declare enum ButtonTextAlign {
  * Enhanced button variants with improved accessibility and focus states
  */
 declare const buttonVariants: (props?: {
-  size?: "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
-  color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text-inverse" | "error" | "success" | "custom" | "card" | "current";
-  roundedSize?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "4xl" | "5xl";
-  variant?: "input" | "none" | "default" | "invisible-link" | "hoverable" | "outline" | "link" | "fade";
-  textAlign?: "left" | "center" | "right";
+  size?: "lg" | "md" | "sm" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
+  color?: "text" | "error" | "custom" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text-inverse" | "success" | "card" | "current";
+  roundedSize?: "lg" | "none" | "md" | "sm" | "xl" | "2xl" | "3xl" | "full" | "4xl" | "5xl";
+  variant?: "none" | "default" | "input" | "invisible-link" | "hoverable" | "link" | "outline" | "fade";
+  textAlign?: "left" | "right" | "center";
   isFullWidth?: boolean;
 } & _$class_variance_authority_types0.ClassProp) => string;
 /**

package/dist/types/components/CollapsibleTable/CollapsibleTable.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/CollapsibleTable/CollapsibleTable.d.ts
 declare const collapsibleTableVariants: (props?: {
   size?: "sm" | "md" | "lg" | "xl" | "full";
-  variant?: "default" | "dark" | "ghost" | "outlined";
+  variant?: "default" | "ghost" | "dark" | "outlined";
   spacing?: "none" | "sm" | "md" | "lg" | "auto";
 } & _$class_variance_authority_types0.ClassProp) => string;
 interface CollapsibleTableProps extends Omit<HTMLAttributes<HTMLElement>, 'title'>, VariantProps<typeof collapsibleTableVariants> {

package/dist/types/components/Command/index.d.ts

@@ -29,7 +29,7 @@ declare const Command: {
     ref?: React.Ref<HTMLInputElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof _$react.InputHTMLAttributes<HTMLInputElement> | "asChild">, "type" | "onChange" | "value"> & {
+  }, "key" | "asChild" | keyof _$react.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
   } & _$react.RefAttributes<HTMLInputElement>>;

package/dist/types/components/Container/index.d.ts

@@ -8,13 +8,13 @@ import { VariantProps } from "class-variance-authority";
  * Provides flexible styling options for background, padding, borders, and layout
  */
 declare const containerVariants: (props?: {
-  roundedSize?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "4xl";
-  transparency?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  roundedSize?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full";
+  transparency?: "none" | "sm" | "md" | "lg" | "xl" | "full" | "xs";
   padding?: "none" | "sm" | "md" | "lg" | "xl" | "2xl";
-  separator?: "both" | "without" | "x" | "y";
-  border?: "with" | "none";
-  borderColor?: "error" | "success" | "text" | "primary" | "secondary" | "neutral" | "card" | "warning";
-  background?: "with" | "none" | "hoverable";
+  separator?: "without" | "x" | "y" | "both";
+  border?: "none" | "with";
+  borderColor?: "primary" | "secondary" | "neutral" | "card" | "text" | "error" | "warning" | "success";
+  background?: "none" | "with" | "hoverable";
   gap?: "none" | "sm" | "md" | "lg" | "xl" | "2xl";
 } & _$class_variance_authority_types0.ClassProp) => string;
 /** Available rounded corner sizes for the container */

package/dist/types/components/Input/Checkbox.d.ts

@@ -5,9 +5,9 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/Input/Checkbox.d.ts
 declare const checkboxVariants: (props?: {
   variant?: "default";
-  size?: "xs" | "sm" | "md" | "lg";
-  color?: "error" | "success" | "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "custom";
-  validationStyleEnabled?: "enabled" | "disabled";
+  size?: "sm" | "md" | "lg" | "xs";
+  color?: "primary" | "secondary" | "neutral" | "text" | "error" | "success" | "destructive" | "custom" | "dark" | "light";
+  validationStyleEnabled?: "disabled" | "enabled";
 } & _$class_variance_authority_types0.ClassProp) => string;
 declare enum CheckboxSize {
   XS = "xs",

package/dist/types/components/Input/Input.d.ts

@@ -6,7 +6,7 @@ import { VariantProps } from "class-variance-authority";
 declare const inputVariants: (props?: {
   variant?: "default" | "invisible";
   size?: "sm" | "md" | "lg";
-  validationStyleEnabled?: "enabled" | "disabled";
+  validationStyleEnabled?: "disabled" | "enabled";
 } & _$class_variance_authority_types0.ClassProp) => string;
 declare enum InputVariant {
   DEFAULT = "default",

package/dist/types/components/Link/Link.d.ts

@@ -54,9 +54,9 @@ declare enum LinkUnderlined {
 }
 declare const linkVariants: (props?: {
   variant?: "default" | "invisible-link" | "button" | "button-outlined" | "hoverable";
-  roundedSize?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full";
-  color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text-inverse" | "error" | "success" | "custom";
-  size?: "sm" | "md" | "lg" | "xl" | "custom";
+  roundedSize?: "lg" | "none" | "md" | "sm" | "xl" | "2xl" | "3xl" | "full";
+  color?: "text" | "error" | "custom" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text-inverse" | "success";
+  size?: "lg" | "md" | "custom" | "sm" | "xl";
   underlined?: boolean | LinkUnderlined.DEFAULT;
 } & _$class_variance_authority_types0.ClassProp) => string;
 type LinkProps = DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> & VariantProps<typeof linkVariants> & {

package/dist/types/components/Pagination/Pagination.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/Pagination/Pagination.d.ts
 declare const paginationVariants: (props?: {
   size?: "sm" | "md" | "lg";
-  color?: "text" | "primary" | "secondary" | "destructive" | "neutral";
+  color?: "primary" | "secondary" | "neutral" | "text" | "destructive";
   variant?: "default" | "bordered" | "ghost";
 } & _$class_variance_authority_types0.ClassProp) => string;
 declare enum PaginationSize {

package/dist/types/components/SwitchSelector/index.d.ts

@@ -2,6 +2,7 @@ import { HTMLAttributes, ReactNode } from "react";
 import * as _$class_variance_authority_types0 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ItemSelectorOrientation } from "@hooks/useItemSelector";
 
 //#region src/components/SwitchSelector/index.d.ts
 type SwitchSelectorChoice<T = boolean> = {
@@ -18,6 +19,7 @@ type SwitchSelectorProps<T = boolean> = {
   itemClassName?: string;
   hoverable?: boolean;
   disabled?: boolean;
+  orientation?: ItemSelectorOrientation;
 } & VariantProps<typeof switchSelectorVariant> & VariantProps<typeof choiceVariant>;
 declare enum SwitchSelectorColor {
   PRIMARY = "primary",
@@ -30,6 +32,7 @@ declare enum SwitchSelectorColor {
 }
 declare const switchSelectorVariant: (props?: {
   color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark";
+  orientation?: "horizontal" | "vertical";
   disabled?: boolean;
 } & _$class_variance_authority_types0.ClassProp) => string;
 declare enum SwitchSelectorSize {
@@ -38,7 +41,8 @@ declare enum SwitchSelectorSize {
   LG = "lg"
 }
 declare const choiceVariant: (props?: {
-  size?: "sm" | "md" | "lg";
+  size?: "lg" | "md" | "sm";
+  orientation?: "horizontal" | "vertical";
 } & _$class_variance_authority_types0.ClassProp) => string;
 /**
  *
@@ -67,7 +71,8 @@ declare const SwitchSelector: <T>({
   className,
   itemClassName,
   hoverable,
-  disabled
+  disabled,
+  orientation
 }: SwitchSelectorProps<T>) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { SwitchSelector, SwitchSelectorChoice, SwitchSelectorChoices, SwitchSelectorColor, SwitchSelectorProps, SwitchSelectorSize };

package/dist/types/components/SwitchSelector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/SwitchSelector/index.tsx"],"mappings":";;;;;;KAaY,oBAAA;EACV,OAAA,EAAS,SAAA;EACT,KAAA,EAAO,CAAA;AAAA,IACL,cAAA,CAAe,iBAAA;AAAA,KACP,qBAAA,MAA2B,oBAAA,CAAqB,CAAA;AAAA,KAOhD,mBAAA;EACV,OAAA,GAAU,qBAAA,CAAsB,CAAA;EAChC,KAAA,GAAQ,CAAA;EACR,YAAA,GAAe,CAAA;EACf,QAAA,IAAY,MAAA,EAAQ,CAAA;EACpB,SAAA;EACA,aAAA;EACA,SAAA;EACA,QAAA;AAAA,IACE,YAAA,QAAoB,qBAAA,IACtB,YAAA,QAAoB,aAAA;AAAA,aAEV,mBAAA;EACV,OAAA;EACA,SAAA;EACA,WAAA;EACA,OAAA;EACA,KAAA;EACA,IAAA;EACA,IAAA;AAAA;AAAA,cAGI,qBAAA,GAAqB,KAAA;;;IAwB1B,iCAAA,CAAA,SAAA;AAAA,aAEW,kBAAA;EACV,EAAA;EACA,EAAA;EACA,EAAA;AAAA;AAAA,cAGI,aAAA,GAAa,KAAA;;IAclB,iCAAA,CAAA,SAAA;;;;;;;;;;;;;;;;;;cA2CY,cAAA;EAAsB,OAAA;EAAA,KAAA;EAAA,YAAA;EAAA,QAAA;EAAA,KAAA;EAAA,IAAA;EAAA,SAAA;EAAA,aAAA;EAAA,SAAA;EAAA;AAAA,GAWhC,mBAAA,CAAoB,CAAA,MAAE,oBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/SwitchSelector/index.tsx"],"mappings":";;;;;;;KAgBY,oBAAA;EACV,OAAA,EAAS,SAAA;EACT,KAAA,EAAO,CAAA;AAAA,IACL,cAAA,CAAe,iBAAA;AAAA,KACP,qBAAA,MAA2B,oBAAA,CAAqB,CAAA;AAAA,KAOhD,mBAAA;EACV,OAAA,GAAU,qBAAA,CAAsB,CAAA;EAChC,KAAA,GAAQ,CAAA;EACR,YAAA,GAAe,CAAA;EACf,QAAA,IAAY,MAAA,EAAQ,CAAA;EACpB,SAAA;EACA,aAAA;EACA,SAAA;EACA,QAAA;EACA,WAAA,GAAc,uBAAA;AAAA,IACZ,YAAA,QAAoB,qBAAA,IACtB,YAAA,QAAoB,aAAA;AAAA,aAEV,mBAAA;EACV,OAAA;EACA,SAAA;EACA,WAAA;EACA,OAAA;EACA,KAAA;EACA,IAAA;EACA,IAAA;AAAA;AAAA,cAGI,qBAAA,GAAqB,KAAA;;;;IA6B1B,iCAAA,CAAA,SAAA;AAAA,aAEW,kBAAA;EACV,EAAA;EACA,EAAA;EACA,EAAA;AAAA;AAAA,cAGI,aAAA,GAAa,KAAA;;;IAmBlB,iCAAA,CAAA,SAAA;;;;;;;;;;;;;;;;;;cAkDY,cAAA;EAAsB,OAAA;EAAA,KAAA;EAAA,YAAA;EAAA,QAAA;EAAA,KAAA;EAAA,IAAA;EAAA,SAAA;EAAA,aAAA;EAAA,SAAA;EAAA,QAAA;EAAA;AAAA,GAYhC,mBAAA,CAAoB,CAAA,MAAE,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/types/components/Tab/Tab.d.ts

@@ -5,7 +5,7 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/Tab/Tab.d.ts
 declare const tabContainerVariant: (props?: {
-  background?: "with" | "without";
+  background?: "without" | "with";
   variant?: "default" | "bordered" | "ghost";
 } & _$class_variance_authority_types0.ClassProp) => string;
 type TabProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof tabContainerVariant> & {

package/dist/types/components/TabSelector/TabSelector.d.ts

@@ -15,7 +15,7 @@ declare enum TabSelectorColor {
   TEXT = "text"
 }
 declare const tabSelectorVariant: (props?: {
-  color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark";
+  color?: "primary" | "secondary" | "neutral" | "text" | "destructive" | "dark" | "light";
 } & _$class_variance_authority_types0.ClassProp) => string;
 type TabSelectorItemProps = HTMLAttributes<HTMLElement> & {
   key: string | number;

package/dist/types/components/Tag/index.d.ts

@@ -185,9 +185,9 @@ declare enum TagBackground {
   WITH = "with"
 }
 declare const containerVariants: (props?: {
-  roundedSize?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full";
-  color?: "text" | "primary" | "neutral" | "error" | "success" | "warning" | "blue" | "yellow" | "green" | "red" | "orange" | "purple" | "pink" | "brown" | "gray" | "black" | "white";
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  roundedSize?: "lg" | "none" | "md" | "sm" | "xl" | "2xl" | "3xl" | "full";
+  color?: "text" | "error" | "primary" | "neutral" | "success" | "warning" | "blue" | "yellow" | "green" | "red" | "orange" | "purple" | "pink" | "brown" | "gray" | "black" | "white";
+  size?: "lg" | "md" | "sm" | "xl" | "xs";
   border?: "none" | "with";
   background?: "none" | "with";
 } & _$class_variance_authority_types0.ClassProp) => string;

package/dist/types/components/Toaster/Toast.d.ts

@@ -25,7 +25,7 @@ declare const ToastViewport: FC<ComponentProps<typeof ToastPrimitives.Viewport>>
  * ```
  */
 declare const toastVariants: (props?: {
-  variant?: "error" | "default" | "success";
+  variant?: "error" | "success" | "default";
 } & _$class_variance_authority_types0.ClassProp) => string;
 /**
  * Toast Component

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intlayer/design-system",
-  "version": "8.7.11-canary.0",
+  "version": "8.7.12",
   "private": false,
   "description": "Intlayer design system, including UI components used in the Intlayer editor, website, and visual editor/CMS.",
   "keywords": [
@@ -421,12 +421,12 @@
   "dependencies": {
     "@better-auth/passkey": "1.6.9",
     "@better-auth/sso": "1.6.9",
-    "@intlayer/api": "8.7.11-canary.0",
-    "@intlayer/config": "8.7.11-canary.0",
-    "@intlayer/core": "8.7.11-canary.0",
-    "@intlayer/dictionaries-entry": "8.7.11-canary.0",
-    "@intlayer/editor-react": "8.7.11-canary.0",
-    "@intlayer/types": "8.7.11-canary.0",
+    "@intlayer/api": "8.7.12",
+    "@intlayer/config": "8.7.12",
+    "@intlayer/core": "8.7.12",
+    "@intlayer/dictionaries-entry": "8.7.12",
+    "@intlayer/editor-react": "8.7.12",
+    "@intlayer/types": "8.7.12",
     "@radix-ui/react-dialog": "1.1.15",
     "@radix-ui/react-select": "2.2.6",
     "@radix-ui/react-slot": "1.2.4",
@@ -435,12 +435,12 @@
     "better-auth": "1.6.9",
     "class-variance-authority": "0.7.1",
     "cmdk": "1.1.1",
-    "react-intlayer": "8.7.11-canary.0",
+    "react-intlayer": "8.7.12",
     "rollup-preserve-directives": "1.1.3",
     "zod": "4.3.6"
   },
   "devDependencies": {
-    "@intlayer/backend": "8.7.11-canary.0",
+    "@intlayer/backend": "8.7.12",
     "@shikijs/transformers": "4.0.2",
     "@storybook/addon-a11y": "8.6.14",
     "@storybook/addon-essentials": "8.6.14",
@@ -470,7 +470,7 @@
     "@utils/ts-config-types": "1.0.4",
     "clsx": "2.1.1",
     "fast-glob": "3.3.3",
-    "intlayer": "8.7.11-canary.0",
+    "intlayer": "8.7.12",
     "rimraf": "6.1.3",
     "shiki": "4.0.2",
     "storybook": "8.6.17",
@@ -478,26 +478,26 @@
     "tsdown": "0.21.10",
     "typescript": "6.0.3",
     "vite": "8.0.10",
-    "vite-intlayer": "8.7.11-canary.0",
+    "vite-intlayer": "8.7.12",
     "vite-plugin-dts": "4.5.4",
     "vitest": "4.1.5"
   },
   "peerDependencies": {
     "@better-fetch/fetch": "1.1.21",
     "@hookform/resolvers": "5.2.2",
-    "@intlayer/backend": "8.7.11-canary.0",
+    "@intlayer/backend": "8.7.12",
     "@monaco-editor/react": "4.7.0",
     "@shikijs/transformers": "4.0.2",
     "@tanstack/react-query": "5.100.6",
     "@tanstack/react-query-devtools": "5.100.6",
     "framer-motion": "12.38.0",
     "fuse.js": "7.3.0",
-    "intlayer": "8.7.11-canary.0",
+    "intlayer": "8.7.12",
     "lucide-react": "1.12.0",
     "react": ">=16.0.0",
     "react-dom": ">=16.0.0",
     "react-hook-form": "7.74.0",
-    "react-intlayer": "8.7.11-canary.0",
+    "react-intlayer": "8.7.12",
     "shiki": "4.0.2",
     "tailwindcss": "4.2.4"
   },