softable-pixels-web 1.1.16 → 1.1.18

package/dist/{Label-BVkidQlv.js → Label-BHq2knad.js}

@@ -1,7 +1,7 @@
-import { t as Typography } from "./Typography-CHkdzH2K.js";
+import { t as Typography } from "./Typography-BkFV7BhK.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/components/commons/Label/index.tsx
+//#region src/components/commons/toolkit/Label/index.tsx
 const Label = (props) => {
 	const { label, color, htmlFor, required, requiredColor, variant = "b2", ...rest } = props;
 	return /* @__PURE__ */ jsx("label", {
@@ -22,4 +22,4 @@ const Label = (props) => {
 
 //#endregion
 export { Label as t };
-//# sourceMappingURL=Label-BVkidQlv.js.map
+//# sourceMappingURL=Label-BHq2knad.js.map

package/dist/Label-BHq2knad.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label-BHq2knad.js","names":["Label: React.FC<LabelProps>"],"sources":["../src/components/commons/toolkit/Label/index.tsx"],"sourcesContent":["// Components\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Types\nimport type { LabelProps } from './types'\n\nexport const Label: React.FC<LabelProps> = props => {\n  const {\n    label,\n    color,\n    htmlFor,\n    required,\n    requiredColor,\n    variant = 'b2',\n    ...rest\n  } = props\n\n  return (\n    <label htmlFor={htmlFor}>\n      <Typography\n        variant={variant}\n        color={color ?? 'var(px-text-primary)'}\n        {...rest}\n      >\n        {label}\n\n        {required ? (\n          <Typography\n            as=\"span\"\n            variant=\"b2\"\n            color={requiredColor ?? 'var(--px-text-error)'}\n          >\n            {' '}\n            *\n          </Typography>\n        ) : null}\n      </Typography>\n    </label>\n  )\n}\n"],"mappings":";;;;AAMA,MAAaA,SAA8B,UAAS;CAClD,MAAM,EACJ,OACA,OACA,SACA,UACA,eACA,UAAU,MACV,GAAG,SACD;AAEJ,QACE,oBAAC;EAAe;YACd,qBAAC;GACU;GACT,OAAO,SAAS;GAChB,GAAI;cAEH,OAEA,WACC,qBAAC;IACC,IAAG;IACH,SAAQ;IACR,OAAO,iBAAiB;eAEvB,KAAI;KAEM,GACX;IACO;GACP"}

package/dist/Popover-CeU8aanh.js

@@ -0,0 +1,138 @@
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-CrarDyWc.js";
+import { t as useDismiss } from "./useDismiss-CAEk_GV-.js";
+import { t as useFloating } from "./useFloating-cvZUo5wI.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+
+//#region src/components/commons/toolkit/Popover/styles.ts
+function createPopoverStyles({ hideShadow = false }) {
+	return styled({
+		popoverNode: {
+			position: "fixed",
+			left: 0,
+			top: 0,
+			zIndex: 10,
+			padding: "0.25rem",
+			backgroundColor: "var(--px-bg)",
+			boxShadow: hideShadow ? "none" : "var(--px-ring-1)",
+			borderRadius: "var(--px-radius-xl)"
+		},
+		trigger: {
+			width: "fit-content",
+			height: "fit-content"
+		}
+	});
+}
+
+//#endregion
+//#region src/components/commons/toolkit/Popover/types.ts
+var types_exports = {};
+
+//#endregion
+//#region src/components/commons/toolkit/Popover/index.tsx
+const Popover = (props) => {
+	const { portalId, anchorRef, floatingOptions, closeOnEscape = true, open: controlledOpen, closeOnOutsideClick = true, trigger, content, onOpenChange, onMouseEnter, onMouseLeave } = props;
+	const triggerRef = useRef(null);
+	const popoverRef = useRef(null);
+	const resolvedAnchorRef = anchorRef ?? triggerRef;
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+	const [widthTrigger, setWidthTrigger] = useState(triggerRef.current?.offsetWidth ?? 0);
+	const [portalEl, setPortalEl] = useState(null);
+	const open = controlledOpen ?? uncontrolledOpen;
+	const { styles } = useThemedStyles(props, createPopoverStyles, {
+		applyCommonProps: true,
+		override: props.styles,
+		commonSlot: "popoverNode",
+		pick: (p) => [
+			p.open,
+			p.content,
+			p.trigger
+		]
+	});
+	const { floatingRef, update } = useFloating(resolvedAnchorRef, {
+		offsetY: 6,
+		strategy: "fixed",
+		keepInViewport: true,
+		placement: "bottom-start",
+		...floatingOptions
+	});
+	function setOpen(v) {
+		onOpenChange?.(v);
+		if (controlledOpen === void 0) setUncontrolledOpen(v);
+	}
+	const close = useCallback(() => setOpen(false), [setOpen]);
+	useDismiss({
+		open,
+		closeOnEscape,
+		closeOnOutsideClick,
+		refs: [resolvedAnchorRef, popoverRef],
+		onClose: close
+	});
+	useEffect(() => {
+		if (typeof document === "undefined") return;
+		if (!portalId) {
+			setPortalEl(null);
+			return;
+		}
+		const found = document.getElementById(portalId);
+		setPortalEl(found);
+		if (!found) {
+			const obs = new MutationObserver(() => {
+				const el = document.getElementById(portalId);
+				if (el) {
+					setPortalEl(el);
+					obs.disconnect();
+				}
+			});
+			obs.observe(document.documentElement, {
+				childList: true,
+				subtree: true
+			});
+			return () => obs.disconnect();
+		}
+	}, [portalId]);
+	const portalContainer = useMemo(() => {
+		if (typeof document === "undefined") return null;
+		return portalEl ?? document.body;
+	}, [portalEl]);
+	useEffect(() => {
+		if (open) requestAnimationFrame(update);
+		setWidthTrigger(triggerRef.current?.offsetWidth ?? 0);
+	}, [open, update]);
+	useEffect(() => {
+		const handleResize = () => {
+			setWidthTrigger(triggerRef.current?.offsetWidth ?? 0);
+		};
+		window.addEventListener("resize", handleResize);
+		return () => {
+			window.removeEventListener("resize", handleResize);
+		};
+	}, []);
+	const triggerNode = trigger?.({
+		ariaExpanded: open,
+		ref: triggerRef,
+		onClick: () => setOpen(!open)
+	}) ?? null;
+	const popoverNode = open ? /* @__PURE__ */ jsx("div", {
+		ref: (el) => {
+			popoverRef.current = el;
+			floatingRef(el);
+		},
+		role: "dialog",
+		style: styles.popoverNode,
+		onMouseEnter,
+		onMouseLeave,
+		onMouseDownCapture: (e) => e.stopPropagation(),
+		onPointerDownCapture: (e) => e.stopPropagation(),
+		children: content({
+			close,
+			widthTrigger
+		})
+	}) : null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [triggerNode, typeof document !== "undefined" ? createPortal(popoverNode, portalContainer ?? document.body) : null] });
+};
+
+//#endregion
+export { types_exports as n, Popover as t };
+//# sourceMappingURL=Popover-CeU8aanh.js.map

package/dist/Popover-CeU8aanh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover-CeU8aanh.js","names":["Popover: React.FC<PopoverProps>"],"sources":["../src/components/commons/toolkit/Popover/styles.ts","../src/components/commons/toolkit/Popover/types.ts","../src/components/commons/toolkit/Popover/index.tsx"],"sourcesContent":["// Types\nimport type { PopoverProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createPopoverStyles({ hideShadow = false }: PopoverProps) {\n  return styled({\n    popoverNode: {\n      position: 'fixed',\n      left: 0,\n      top: 0,\n\n      zIndex: 10,\n\n      padding: '0.25rem',\n\n      backgroundColor: 'var(--px-bg)',\n      boxShadow: hideShadow ? 'none' : 'var(--px-ring-1)',\n\n      borderRadius: 'var(--px-radius-xl)'\n    },\n\n    trigger: {\n      width: 'fit-content',\n      height: 'fit-content'\n    }\n  })\n}\n","// External Libraries\nimport type { MouseEventHandler, ReactNode, RefObject } from 'react'\n\n// Types\nimport type { createPopoverStyles } from './styles'\nimport type { FloatingOptions } from '@hooks/useFloating/types'\nimport type { PaddingProps } from '@hooks/useThemedStyles/types'\n\nexport type PopoverTriggerRenderProps = {\n  ariaExpanded: boolean\n  ref: RefObject<HTMLElement>\n  onClick: () => void\n}\n\nexport interface PopoverProps extends PaddingProps {\n  open?: boolean\n  portalId?: string\n  hideShadow?: boolean\n  closeOnEscape?: boolean\n  closeOnOutsideClick?: boolean\n  floatingOptions?: FloatingOptions\n  anchorRef?: RefObject<HTMLElement>\n\n  onOpenChange?: (v: boolean) => void\n  onMouseEnter?: MouseEventHandler<HTMLDivElement>\n  onMouseLeave?: MouseEventHandler<HTMLDivElement>\n  content: (ctx: { close: () => void; widthTrigger: number }) => ReactNode\n  trigger?: (props: PopoverTriggerRenderProps) => ReactNode\n\n  styles?: Partial<ReturnType<typeof createPopoverStyles>>\n}\n","// External Libraries\n/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n/** biome-ignore-all lint/correctness/useExhaustiveDependencies: <Not needed> */\nimport type React from 'react'\nimport { createPortal } from 'react-dom'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\n// Hooks\nimport { useDismiss } from '@hooks/useDismiss'\nimport { useFloating } from '@hooks/useFloating'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { PopoverProps } from './types'\n\n// Styles\nimport { createPopoverStyles } from './styles'\n\nexport * as PopoverTypes from './types'\n\nexport const Popover: React.FC<PopoverProps> = props => {\n  const {\n    portalId,\n    anchorRef,\n    floatingOptions,\n    closeOnEscape = true,\n    open: controlledOpen,\n    closeOnOutsideClick = true,\n    trigger,\n    content,\n    onOpenChange,\n    onMouseEnter,\n    onMouseLeave\n  } = props\n\n  // Refs\n  const triggerRef = useRef<HTMLElement | null>(null)\n  const popoverRef = useRef<HTMLDivElement | null>(null)\n  const resolvedAnchorRef = (anchorRef ?? triggerRef) as any\n\n  // States\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(false)\n  const [widthTrigger, setWidthTrigger] = useState(\n    triggerRef.current?.offsetWidth ?? 0\n  )\n  const [portalEl, setPortalEl] = useState<HTMLElement | null>(null)\n\n  const open = controlledOpen ?? uncontrolledOpen\n\n  // Hooks\n  const { styles } = useThemedStyles(props, createPopoverStyles, {\n    applyCommonProps: true,\n    override: props.styles,\n    commonSlot: 'popoverNode',\n    pick: p => [p.open, p.content, p.trigger]\n  })\n\n  const { floatingRef, update } = useFloating(resolvedAnchorRef, {\n    offsetY: 6,\n    strategy: 'fixed',\n    keepInViewport: true,\n    placement: 'bottom-start',\n    ...floatingOptions\n  })\n\n  // Functions\n  function setOpen(v: boolean) {\n    onOpenChange?.(v)\n    if (controlledOpen === undefined) setUncontrolledOpen(v)\n  }\n\n  const close = useCallback(() => setOpen(false), [setOpen])\n\n  useDismiss({\n    open,\n    closeOnEscape,\n    closeOnOutsideClick,\n    refs: [resolvedAnchorRef, popoverRef],\n    onClose: close\n  })\n\n  // UseEffects\n  useEffect(() => {\n    if (typeof document === 'undefined') return\n\n    if (!portalId) {\n      setPortalEl(null)\n      return\n    }\n\n    const found = document.getElementById(portalId) as HTMLElement | null\n    setPortalEl(found)\n\n    if (!found) {\n      const obs = new MutationObserver(() => {\n        const el = document.getElementById(portalId) as HTMLElement | null\n        if (el) {\n          setPortalEl(el)\n          obs.disconnect()\n        }\n      })\n      obs.observe(document.documentElement, { childList: true, subtree: true })\n      return () => obs.disconnect()\n    }\n\n    return\n  }, [portalId])\n\n  const portalContainer = useMemo(() => {\n    if (typeof document === 'undefined') return null\n    return portalEl ?? document.body\n  }, [portalEl])\n\n  useEffect(() => {\n    if (open) requestAnimationFrame(update)\n\n    setWidthTrigger(triggerRef.current?.offsetWidth ?? 0)\n  }, [open, update])\n\n  useEffect(() => {\n    const handleResize = () => {\n      setWidthTrigger(triggerRef.current?.offsetWidth ?? 0)\n    }\n\n    window.addEventListener('resize', handleResize)\n\n    return () => {\n      window.removeEventListener('resize', handleResize)\n    }\n  }, [])\n\n  const triggerNode =\n    trigger?.({\n      ariaExpanded: open,\n      ref: triggerRef as any,\n      onClick: () => setOpen(!open)\n    }) ?? null\n\n  const popoverNode = open ? (\n    <div\n      ref={el => {\n        popoverRef.current = el\n        floatingRef(el)\n      }}\n      role=\"dialog\"\n      style={styles.popoverNode}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      onMouseDownCapture={e => e.stopPropagation()}\n      onPointerDownCapture={e => e.stopPropagation()}\n    >\n      {content({ close, widthTrigger })}\n    </div>\n  ) : null\n\n  return (\n    <>\n      {triggerNode}\n      {typeof document !== 'undefined'\n        ? createPortal(popoverNode, portalContainer ?? document.body)\n        : null}\n    </>\n  )\n}\n"],"mappings":"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"}

package/dist/{Select-DFPwAzYG.js → Select-CkeZfibD.js}

@@ -1,11 +1,12 @@
-import { n as styled, t as useThemedStyles } from "./useThemedStyles-D4si38PM.js";
-import { t as Icon } from "./Icon-kjpHbCbF.js";
-import { t as Label } from "./Label-BVkidQlv.js";
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-CrarDyWc.js";
+import { t as Icon } from "./Icon-KzwFJI_k.js";
+import { t as BasePopover } from "./BasePopover-DaG1Bad1.js";
+import { t as Label } from "./Label-BHq2knad.js";
 import { useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/commons/inputs/Select/components/OptionItem/styles.ts
-function createOptionsStyles(_props) {
+function createOptionsStyles({ isSelected }) {
 	return styled({
 		container: {
 			width: "100%",
@@ -16,8 +17,9 @@ function createOptionsStyles(_props) {
 			padding: "0.5rem 0.75rem",
 			cursor: "pointer",
 			transition: "background-color 0.2s ease-out",
+			backgroundColor: isSelected ? "var(--px-background-card-hover)" : "transparent",
 			__rules: {
-				"&:hover": { backgroundColor: "var(--px-background-card-hover)" },
+				"&:hover": { backgroundColor: "var(--px-background-card-hover) !important" },
 				"&:focus": {
 					outlineOffset: "-1px",
 					outline: "2px solid var(--px-color-primary)"
@@ -118,8 +120,8 @@ function createSelectStyles(props) {
 			boxShadow: "var(--px-shadow-default)",
 			borderColor: props.errorMessage ? "var(--px-color-error)" : "var(--px-border-primary)",
 			__rules: { "&:focus-within": {
-				outlineOffset: "-1px",
-				outline: `2px solid var(${props.errorMessage ? "--px-color-error" : "--px-color-primary"})`
+				outlineOffset: "-1px !important",
+				outline: `2px solid var(${props.errorMessage ? "--px-color-error" : "--px-color-primary"}) !important`
 			} }
 		},
 		text: {
@@ -142,28 +144,14 @@ function createSelectStyles(props) {
 			fontFamily: "inherit",
 			color: "var(--px-text-error)"
 		},
-		panel: {
-			width: "100%",
-			height: "12rem",
-			display: "flex",
-			flexDirection: "column",
-			position: "absolute",
-			top: "calc(100% + 0.25rem)",
-			left: "0",
-			zIndex: 10,
-			overflowY: "auto",
-			overscrollBehavior: "contain",
-			borderWidth: 1,
-			rowGap: "0.25rem",
-			padding: "0.25rem",
-			borderRadius: "0.5rem",
-			backgroundColor: "var(--px-bg)",
-			boxShadow: "var(--px-shadow-default)",
-			borderColor: "var(--px-border-primary)"
-		}
+		panel: { width: "100%" }
 	});
 }
 
+//#endregion
+//#region src/components/commons/inputs/Select/types.ts
+var types_exports = {};
+
 //#endregion
 //#region src/components/commons/inputs/Select/index.tsx
 const Select = (props) => {
@@ -189,6 +177,32 @@ const Select = (props) => {
 		if (hiddenCount > 0) result += ` +${hiddenCount}`;
 		return result;
 	}
+	function renderTrigger({ ref, ariaExpanded, onClick }) {
+		return /* @__PURE__ */ jsxs("button", {
+			ref,
+			dir: "ltr",
+			type: "button",
+			role: "combobox",
+			style: styles.content,
+			"aria-autocomplete": "none",
+			"aria-label": props.label,
+			className: classes.content,
+			"aria-expanded": ariaExpanded,
+			onClick,
+			children: [
+				props.value.length ? props.startIcon : null,
+				/* @__PURE__ */ jsx("span", {
+					id: "text-content",
+					style: styles.text,
+					children: renderContent()
+				}),
+				/* @__PURE__ */ jsx(Icon, {
+					size: "sm",
+					name: "chevrons-down"
+				})
+			]
+		});
+	}
 	return /* @__PURE__ */ jsxs("div", {
 		style: styles.container,
 		children: [
@@ -198,37 +212,24 @@ const Select = (props) => {
 				requiredColor: props.requiredColor,
 				...props.labelConfig
 			}),
-			/* @__PURE__ */ jsxs("button", {
-				dir: "ltr",
-				type: "button",
-				role: "combobox",
-				"aria-expanded": open,
-				style: styles.content,
-				"aria-autocomplete": "none",
-				"aria-label": props.label,
-				className: classes.content,
-				onClick: togglePanel,
-				children: [
-					props.startIcon,
-					/* @__PURE__ */ jsx("span", {
-						id: "text-content",
-						style: styles.text,
-						children: renderContent()
-					}),
-					/* @__PURE__ */ jsx(Icon, {
-						size: "sm",
-						name: "chevrons-down"
-					})
-				]
+			/* @__PURE__ */ jsx(BasePopover, {
+				open,
+				portalId: props.portalId,
+				trigger: renderTrigger,
+				onOpenChange: togglePanel,
+				floatingOptions: {
+					viewportMargin: 0,
+					strategy: props.strategy
+				},
+				children: /* @__PURE__ */ jsx("div", {
+					style: styles.panel,
+					children: props.options.map((option) => /* @__PURE__ */ jsx(OptionItem, {
+						option,
+						isSelected: props.value.includes(option.value),
+						onClick: handleOptionClick
+					}, option.value))
+				})
 			}),
-			open ? /* @__PURE__ */ jsx("div", {
-				style: styles.panel,
-				children: props.options.map((option) => /* @__PURE__ */ jsx(OptionItem, {
-					option,
-					isSelected: props.value.includes(option.value),
-					onClick: handleOptionClick
-				}, option.value))
-			}) : null,
 			props.errorMessage ? /* @__PURE__ */ jsx("span", {
 				style: styles.error,
 				children: props.errorMessage
@@ -238,5 +239,5 @@ const Select = (props) => {
 };
 
 //#endregion
-export { Select as t };
-//# sourceMappingURL=Select-DFPwAzYG.js.map
+export { types_exports as n, Select as t };
+//# sourceMappingURL=Select-CkeZfibD.js.map

package/dist/Select-CkeZfibD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select-CkeZfibD.js","names":["OptionItem: React.FC<OptionItemProps>","Select: React.FC<SelectProps>"],"sources":["../src/components/commons/inputs/Select/components/OptionItem/styles.ts","../src/components/commons/inputs/Select/components/OptionItem/index.tsx","../src/components/commons/inputs/Select/hooks/useSelect/index.ts","../src/components/commons/inputs/Select/styles.ts","../src/components/commons/inputs/Select/types.ts","../src/components/commons/inputs/Select/index.tsx"],"sourcesContent":["import { styled } from '@hooks/useThemedStyles/types'\nimport type { OptionItemProps } from './types'\n\nexport function createOptionsStyles({ isSelected }: OptionItemProps) {\n  return styled({\n    container: {\n      width: '100%',\n\n      display: 'flex',\n      alignItems: 'center',\n      textAlign: 'left',\n\n      borderRadius: '0.25rem',\n      padding: '0.5rem 0.75rem',\n\n      cursor: 'pointer',\n      transition: 'background-color 0.2s ease-out',\n\n      backgroundColor: isSelected\n        ? 'var(--px-background-card-hover)'\n        : 'transparent',\n\n      __rules: {\n        '&:hover': {\n          backgroundColor: 'var(--px-background-card-hover) !important'\n        },\n\n        '&:focus': {\n          outlineOffset: '-1px',\n          outline: '2px solid var(--px-color-primary)'\n        }\n      }\n    },\n\n    text: {\n      flex: 1,\n\n      fontSize: '1rem',\n      fontWeight: 500,\n      lineHeight: '1.5rem',\n      fontFamily: 'inherit',\n      color: 'var(--px-text-primary)',\n\n      overflow: 'hidden',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis'\n    }\n  })\n}\n","/** biome-ignore-all lint/a11y/useSemanticElements: It's a custom select component */\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { OptionItemProps } from './types'\n\n// Styles\nimport { createOptionsStyles } from './styles'\n\nexport const OptionItem: React.FC<OptionItemProps> = props => {\n  // Hooks\n  const { styles, classes } = useThemedStyles(props, createOptionsStyles)\n\n  // Functions\n  function handleClick() {\n    props.onClick(props.option.value)\n  }\n\n  return (\n    <button\n      type=\"button\"\n      role=\"option\"\n      style={styles.container}\n      className={classes.container}\n      aria-label={props.option.label}\n      aria-selected={props.isSelected}\n      onClick={handleClick}\n    >\n      <span style={styles.text}>{props.option.label}</span>\n    </button>\n  )\n}\n","// External Libraries\nimport { useState } from 'react'\n\n// Types\nimport type { SelectProps } from '../../types'\n\nexport function useSelect({\n  value,\n  multiple,\n  canClear,\n  onChange\n}: SelectProps) {\n  // States\n  const [open, setOpen] = useState(false)\n\n  // Functions\n  function handleOptionClick(option: string) {\n    const isAlreadySelected = value.includes(option)\n\n    if (!multiple) {\n      if (isAlreadySelected) {\n        if (canClear) onChange([])\n      } else onChange([option])\n\n      setOpen(false)\n      return\n    }\n\n    if (isAlreadySelected) {\n      if (value.length === 1) {\n        if (canClear) onChange([])\n      } else onChange(value.filter(v => v !== option))\n    } else onChange([...value, option])\n  }\n\n  function togglePanel() {\n    setOpen(prev => !prev)\n  }\n\n  function closePanel() {\n    setOpen(false)\n  }\n\n  return { open, togglePanel, closePanel, handleOptionClick }\n}\n","import { styled } from '@hooks/useThemedStyles/types'\nimport type { SelectProps } from './types'\n\nexport function createSelectStyles(props: SelectProps) {\n  return styled({\n    container: {\n      width: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n\n      position: 'relative',\n\n      rowGap: '0.375rem'\n    },\n\n    content: {\n      width: '100%',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n\n      borderWidth: 1,\n      columnGap: '0.25rem',\n      borderRadius: '0.5rem',\n      padding: '0.625rem 0.875rem',\n\n      opacity: props.disabled ? 0.5 : 1,\n      cursor: props.disabled ? 'not-allowed' : 'pointer',\n      boxShadow: 'var(--px-shadow-default)',\n      borderColor: props.errorMessage\n        ? 'var(--px-color-error)'\n        : 'var(--px-border-primary)',\n\n      __rules: {\n        '&:focus-within': {\n          outlineOffset: '-1px !important',\n          outline: `2px solid var(${props.errorMessage ? '--px-color-error' : '--px-color-primary'}) !important`\n        }\n      }\n    },\n\n    text: {\n      flex: 1,\n\n      textAlign: 'left',\n\n      overflow: 'hidden',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis',\n\n      fontSize: '1rem',\n      lineHeight: '1.5rem',\n      fontFamily: 'inherit',\n      fontWeight: props.value.length ? 500 : 400,\n      color: props.value.length\n        ? 'var(--px-text-primary)'\n        : 'var(--px-text-secondary)'\n    },\n\n    error: {\n      display: 'block',\n      fontWeight: 400,\n      lineHeight: '1rem',\n      fontSize: '0.75rem',\n      fontFamily: 'inherit',\n      color: 'var(--px-text-error)'\n    },\n\n    panel: {\n      width: '100%'\n    }\n  })\n}\n","import type {\n  StylesOf,\n  TextProps,\n  LayoutProps,\n  MarginProps\n} from '@hooks/useThemedStyles/types'\nimport type { createSelectStyles } from './styles'\nimport type { FloatingOptions } from '@hooks/useFloating/types'\nimport type { PopoverProps } from '@components/commons/toolkit/Popover/types'\n\nexport interface SelectProps extends LayoutProps, MarginProps {\n  label: string\n  value: string[]\n  placeholder?: string\n  options: SelectOption[]\n\n  portalId?: PopoverProps['portalId']\n  strategy: FloatingOptions['strategy']\n\n  canClear?: boolean\n  multiple?: boolean\n  required?: boolean\n  disabled?: boolean\n  hideLabel?: boolean\n  errorMessage?: string\n  maxVisibleItems?: number\n\n  startIcon?: React.ReactNode\n  styles?: StylesOf<typeof createSelectStyles>\n\n  requiredColor?: string\n  labelConfig?: TextProps\n\n  onChange: (value: string[]) => void\n}\n\nexport interface SelectOption {\n  label: string\n  value: string\n}\n","/** biome-ignore-all lint/a11y/useSemanticElements: It's a custom select component */\n// External Libraries\nimport type React from 'react'\nimport { useMemo } from 'react'\n\n// Components\nimport { OptionItem } from './components/OptionItem'\nimport { Icon } from '@components/commons/toolkit/Icon'\nimport { Label } from '@components/commons/toolkit/Label'\n\n// Hooks\nimport { useSelect } from './hooks/useSelect'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SelectProps } from './types'\nimport type { PopoverTriggerRenderProps } from '@components/commons/toolkit/Popover/types'\n\n// Styles\nimport { createSelectStyles } from './styles'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\n\nexport * as SelectTypes from './types'\n\nexport const Select: React.FC<SelectProps> = props => {\n  // Hooks\n  const { open, togglePanel, handleOptionClick } = useSelect(props)\n  const { styles, classes } = useThemedStyles(props, createSelectStyles, {\n    pick: p => [p.disabled, p.errorMessage, p.value],\n    override: props.styles,\n    applyCommonProps: true,\n    commonSlot: 'container'\n  })\n\n  // Constants\n  const maxVisible = props.maxVisibleItems ?? Infinity\n  const optionsMap = useMemo(\n    () => new Map(props.options.map(option => [option.value, option.label])),\n    [props.options]\n  )\n\n  // Functions\n  function renderContent() {\n    if (!props.value?.length) return props.placeholder\n\n    const resolvedValues = props.value.map(val => optionsMap.get(val) ?? val)\n\n    const visibleItems = resolvedValues.slice(0, maxVisible)\n    const hiddenCount = resolvedValues.length - visibleItems.length\n\n    let result = visibleItems.join(', ')\n    if (hiddenCount > 0) result += ` +${hiddenCount}`\n\n    return result\n  }\n\n  function renderTrigger({\n    ref,\n    ariaExpanded,\n    onClick\n  }: PopoverTriggerRenderProps) {\n    return (\n      <button\n        ref={ref as any}\n        dir=\"ltr\"\n        type=\"button\"\n        role=\"combobox\"\n        style={styles.content}\n        aria-autocomplete=\"none\"\n        aria-label={props.label}\n        className={classes.content}\n        aria-expanded={ariaExpanded}\n        onClick={onClick}\n      >\n        {props.value.length ? props.startIcon : null}\n\n        <span id=\"text-content\" style={styles.text}>\n          {renderContent()}\n        </span>\n\n        <Icon size=\"sm\" name=\"chevrons-down\" />\n      </button>\n    )\n  }\n\n  return (\n    <div style={styles.container}>\n      {props.hideLabel ? null : (\n        <Label\n          label={props.label}\n          required={props.required}\n          requiredColor={props.requiredColor}\n          {...props.labelConfig}\n        />\n      )}\n\n      <BasePopover\n        open={open}\n        portalId={props.portalId}\n        trigger={renderTrigger}\n        onOpenChange={togglePanel}\n        floatingOptions={{ viewportMargin: 0, strategy: props.strategy }}\n      >\n        <div style={styles.panel}>\n          {props.options.map(option => (\n            <OptionItem\n              key={option.value}\n              option={option}\n              isSelected={props.value.includes(option.value)}\n              onClick={handleOptionClick}\n            />\n          ))}\n        </div>\n      </BasePopover>\n\n      {props.errorMessage ? (\n        <span style={styles.error}>{props.errorMessage}</span>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/{Switch-ZmanGt2r.js → Switch-DJNZbvzy.js}

@@ -1,4 +1,4 @@
-import { n as styled, t as useThemedStyles } from "./useThemedStyles-D4si38PM.js";
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-CrarDyWc.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/commons/toolkit/Switch/styles.ts
@@ -46,4 +46,4 @@ const Switch = (props) => {
 
 //#endregion
 export { Switch as t };
-//# sourceMappingURL=Switch-ZmanGt2r.js.map
+//# sourceMappingURL=Switch-DJNZbvzy.js.map

package/dist/{Switch-ZmanGt2r.js.map → Switch-DJNZbvzy.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Switch-ZmanGt2r.js","names":["Switch: React.FC<SwitchThumbProps>"],"sources":["../src/components/commons/toolkit/Switch/styles.ts","../src/components/commons/toolkit/Switch/index.tsx"],"sourcesContent":["// Types\nimport type { SwitchThumbProps } from './types'\n\n// Styles\nimport { styled } from '@hooks/useThemedStyles/types'\nexport function createSwitchThumbStyles({\n  checked,\n  colorActive,\n  colorInactive,\n  colorIndicator\n}: SwitchThumbProps) {\n  return styled({\n    container: {\n      width: '2.5rem',\n      height: '1.25rem',\n\n      position: 'relative',\n\n      display: 'inline-flex',\n      alignItems: 'center',\n      marginLeft: '0.5rem',\n\n      borderRadius: '2rem',\n      padding: '0.125rem',\n\n      transition: 'background-color 0.5s',\n      backgroundColor: checked\n        ? (colorActive ?? 'var(--px-color-success)')\n        : (colorInactive ?? 'var(--px-color-disabled)')\n    },\n\n    indicator: {\n      height: '1rem',\n      width: '1rem',\n\n      position: 'absolute',\n      left: '0.125rem',\n      top: '0.125rem',\n\n      borderRadius: '9999px',\n      backgroundColor: colorIndicator ?? 'var(--px-surface)',\n\n      transition: 'transform 0.5s',\n      transform: checked ? 'translateX(1.25rem)' : 'translateX(0)',\n      willChange: 'transform'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SwitchThumbProps } from './types'\n\n// Styles\nimport { createSwitchThumbStyles } from './styles'\n\nexport const Switch: React.FC<SwitchThumbProps> = props => {\n  // Hooks\n  const { styles } = useThemedStyles(props, createSwitchThumbStyles, {\n    applyCommonProps: true,\n    pick: p => [p.checked]\n  })\n\n  return (\n    <span style={styles.container}>\n      <span style={styles.indicator} />\n    </span>\n  )\n}\n"],"mappings":";;;;AAKA,SAAgB,wBAAwB,EACtC,SACA,aACA,eACA,kBACmB;AACnB,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GACP,QAAQ;GAER,UAAU;GAEV,SAAS;GACT,YAAY;GACZ,YAAY;GAEZ,cAAc;GACd,SAAS;GAET,YAAY;GACZ,iBAAiB,UACZ,eAAe,4BACf,iBAAiB;GACvB;EAED,WAAW;GACT,QAAQ;GACR,OAAO;GAEP,UAAU;GACV,MAAM;GACN,KAAK;GAEL,cAAc;GACd,iBAAiB,kBAAkB;GAEnC,YAAY;GACZ,WAAW,UAAU,wBAAwB;GAC7C,YAAY;GACb;EACF,CAAC;;;;;AClCJ,MAAaA,UAAqC,UAAS;CAEzD,MAAM,EAAE,WAAW,gBAAgB,OAAO,yBAAyB;EACjE,kBAAkB;EAClB,OAAM,MAAK,CAAC,EAAE,QAAQ;EACvB,CAAC;AAEF,QACE,oBAAC;EAAK,OAAO,OAAO;YAClB,oBAAC,UAAK,OAAO,OAAO,YAAa;GAC5B"}
+{"version":3,"file":"Switch-DJNZbvzy.js","names":["Switch: React.FC<SwitchThumbProps>"],"sources":["../src/components/commons/toolkit/Switch/styles.ts","../src/components/commons/toolkit/Switch/index.tsx"],"sourcesContent":["// Types\nimport type { SwitchThumbProps } from './types'\n\n// Styles\nimport { styled } from '@hooks/useThemedStyles/types'\nexport function createSwitchThumbStyles({\n  checked,\n  colorActive,\n  colorInactive,\n  colorIndicator\n}: SwitchThumbProps) {\n  return styled({\n    container: {\n      width: '2.5rem',\n      height: '1.25rem',\n\n      position: 'relative',\n\n      display: 'inline-flex',\n      alignItems: 'center',\n      marginLeft: '0.5rem',\n\n      borderRadius: '2rem',\n      padding: '0.125rem',\n\n      transition: 'background-color 0.5s',\n      backgroundColor: checked\n        ? (colorActive ?? 'var(--px-color-success)')\n        : (colorInactive ?? 'var(--px-color-disabled)')\n    },\n\n    indicator: {\n      height: '1rem',\n      width: '1rem',\n\n      position: 'absolute',\n      left: '0.125rem',\n      top: '0.125rem',\n\n      borderRadius: '9999px',\n      backgroundColor: colorIndicator ?? 'var(--px-surface)',\n\n      transition: 'transform 0.5s',\n      transform: checked ? 'translateX(1.25rem)' : 'translateX(0)',\n      willChange: 'transform'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SwitchThumbProps } from './types'\n\n// Styles\nimport { createSwitchThumbStyles } from './styles'\n\nexport const Switch: React.FC<SwitchThumbProps> = props => {\n  // Hooks\n  const { styles } = useThemedStyles(props, createSwitchThumbStyles, {\n    applyCommonProps: true,\n    pick: p => [p.checked]\n  })\n\n  return (\n    <span style={styles.container}>\n      <span style={styles.indicator} />\n    </span>\n  )\n}\n"],"mappings":";;;;AAKA,SAAgB,wBAAwB,EACtC,SACA,aACA,eACA,kBACmB;AACnB,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GACP,QAAQ;GAER,UAAU;GAEV,SAAS;GACT,YAAY;GACZ,YAAY;GAEZ,cAAc;GACd,SAAS;GAET,YAAY;GACZ,iBAAiB,UACZ,eAAe,4BACf,iBAAiB;GACvB;EAED,WAAW;GACT,QAAQ;GACR,OAAO;GAEP,UAAU;GACV,MAAM;GACN,KAAK;GAEL,cAAc;GACd,iBAAiB,kBAAkB;GAEnC,YAAY;GACZ,WAAW,UAAU,wBAAwB;GAC7C,YAAY;GACb;EACF,CAAC;;;;;AClCJ,MAAaA,UAAqC,UAAS;CAEzD,MAAM,EAAE,WAAW,gBAAgB,OAAO,yBAAyB;EACjE,kBAAkB;EAClB,OAAM,MAAK,CAAC,EAAE,QAAQ;EACvB,CAAC;AAEF,QACE,oBAAC;EAAK,OAAO,OAAO;YAClB,oBAAC,UAAK,OAAO,OAAO,YAAa;GAC5B"}

package/dist/{TabSwitch-2WIjQ2Ie.js → TabSwitch-DlXdgLPc.js}

@@ -1,5 +1,5 @@
-import { n as styled, t as useThemedStyles } from "./useThemedStyles-D4si38PM.js";
-import { t as Typography } from "./Typography-CHkdzH2K.js";
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-CrarDyWc.js";
+import { t as Typography } from "./Typography-BkFV7BhK.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { motion } from "framer-motion";
 
@@ -120,4 +120,4 @@ const TabSwitch = (props) => {
 
 //#endregion
 export { TabSwitch as t };
-//# sourceMappingURL=TabSwitch-2WIjQ2Ie.js.map
+//# sourceMappingURL=TabSwitch-DlXdgLPc.js.map

package/dist/{TabSwitch-2WIjQ2Ie.js.map → TabSwitch-DlXdgLPc.js.map}

@@ -1 +1 @@
-{"version":3,"file":"TabSwitch-2WIjQ2Ie.js","names":[],"sources":["../src/components/commons/toolkit/TabSwitch/components/TabSwitchItem/styles.ts","../src/components/commons/toolkit/TabSwitch/components/TabSwitchItem/index.tsx","../src/components/commons/toolkit/TabSwitch/styles.ts","../src/components/commons/toolkit/TabSwitch/index.tsx"],"sourcesContent":["// External Libraries\nimport { styled } from '@hooks/useThemedStyles/types'\n\ninterface Params {\n  disabled?: boolean\n  selected?: boolean\n  selectedColor?: string\n  variant: 'default' | 'underline'\n}\n\nexport function createTabSwitchItemStyles({\n  variant,\n  disabled,\n  selected,\n  selectedColor\n}: Params) {\n  const accent = selectedColor ?? 'var(--px-color-primary)'\n\n  return styled({\n    item: {\n      minHeight: '1.25rem',\n      position: 'relative',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 4,\n      background: 'transparent',\n      border: 0,\n      padding: '8px 10px',\n      cursor: disabled ? 'not-allowed' : 'pointer',\n      opacity: disabled ? 0.5 : 1,\n      userSelect: 'none',\n      whiteSpace: 'nowrap',\n      __rules: { '& > p': { zIndex: 1 } }\n    },\n\n    selectedBg:\n      variant === 'default'\n        ? {\n            position: 'absolute',\n            inset: 0,\n            borderRadius: 6,\n            border: '1px solid var(--px-border-primary)',\n            background: selected ? accent : 'transparent'\n          }\n        : {\n            position: 'absolute',\n            left: 0,\n            right: 0,\n            bottom: -2,\n            height: 2,\n            background: selected ? accent : 'transparent'\n          }\n  })\n}\n","// External Libraries\nimport { motion } from 'framer-motion'\n\n// Components\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SwitchOption } from '../../types'\n\n// Styles\nimport { createTabSwitchItemStyles } from './styles'\n\ntype Props<T> = {\n  option: SwitchOption<T>\n  selected: boolean\n  layoutId?: string\n  disabled?: boolean\n  selectedColor?: string\n  selectedLabelColor?: string\n  variant: 'default' | 'underline'\n  onClick: (value: T) => void\n}\n\nexport const SwitchItem = <T,>(props: Props<T>) => {\n  const { option, disabled, selected, layoutId, onClick } = props\n\n  const { styles, classes } = useThemedStyles(\n    props,\n    createTabSwitchItemStyles,\n    {\n      pick: p => [p.variant, p.selectedColor, p.selectedLabelColor, p.selected]\n    }\n  )\n\n  const isDisabled = disabled || option.disabled\n\n  return (\n    <button\n      type=\"button\"\n      style={styles.item}\n      className={classes.item}\n      tabIndex={isDisabled ? -1 : 0}\n      onClick={() => !isDisabled && onClick(option.value)}\n    >\n      {selected ? (\n        <motion.div\n          layoutId={layoutId || 'pixel-tabswitch-selected'}\n          style={styles.selectedBg}\n        />\n      ) : null}\n\n      {option.icon ? (\n        <span style={{ display: 'inline-flex' }}>{option.icon}</span>\n      ) : null}\n\n      <Typography variant=\"b1\" fontWeight=\"bold\">\n        {option.label}\n      </Typography>\n    </button>\n  )\n}\n","// Types\nimport type { TabSwitchProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createTabSwitchStyles<T>(props: TabSwitchProps<T>) {\n  const { fitContent } = props\n\n  return styled({\n    container: {\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      color: 'var(--px-text-primary, #4b5563)',\n      width: fitContent ? 'fit-content' : '100%',\n      borderBottom: '1px solid var(--px-border-primary, #e5e7eb)',\n      gap: 0,\n      __rules: { '& svg': { zIndex: 1 } }\n    }\n  })\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Components\nimport { SwitchItem } from './components/TabSwitchItem'\n\n// Types\nimport type { TabSwitchProps } from './types'\n\n// Styles\nimport { createTabSwitchStyles } from './styles'\n\nexport * from './types'\n\nexport const TabSwitch = <T,>(props: TabSwitchProps<T>) => {\n  {\n    const {\n      options,\n      disabled,\n      layoutId,\n      currentValue,\n      variant = 'default',\n      onChange\n    } = props\n\n    const { styles, classes } = useThemedStyles(props, createTabSwitchStyles, {\n      pick: p => [p.disabled, p.currentValue],\n      override: props.styles,\n      applyCommonProps: true\n    })\n\n    return (\n      <div style={styles.container} className={classes.container}>\n        {options.map(opt => (\n          <SwitchItem\n            key={String(opt.value)}\n            option={opt}\n            variant={variant}\n            layoutId={layoutId}\n            disabled={disabled}\n            selectedColor={props.selectedColor}\n            selected={currentValue === opt.value}\n            selectedLabelColor={props.selectedLabelColor}\n            onClick={onChange}\n          />\n        ))}\n      </div>\n    )\n  }\n}\n"],"mappings":";;;;;;AAUA,SAAgB,0BAA0B,EACxC,SACA,UACA,UACA,iBACS;CACT,MAAM,SAAS,iBAAiB;AAEhC,QAAO,OAAO;EACZ,MAAM;GACJ,WAAW;GACX,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,YAAY;GACZ,QAAQ;GACR,SAAS;GACT,QAAQ,WAAW,gBAAgB;GACnC,SAAS,WAAW,KAAM;GAC1B,YAAY;GACZ,YAAY;GACZ,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE;GACpC;EAED,YACE,YAAY,YACR;GACE,UAAU;GACV,OAAO;GACP,cAAc;GACd,QAAQ;GACR,YAAY,WAAW,SAAS;GACjC,GACD;GACE,UAAU;GACV,MAAM;GACN,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,YAAY,WAAW,SAAS;GACjC;EACR,CAAC;;;;;AC3BJ,MAAa,cAAkB,UAAoB;CACjD,MAAM,EAAE,QAAQ,UAAU,UAAU,UAAU,YAAY;CAE1D,MAAM,EAAE,QAAQ,YAAY,gBAC1B,OACA,2BACA,EACE,OAAM,MAAK;EAAC,EAAE;EAAS,EAAE;EAAe,EAAE;EAAoB,EAAE;EAAS,EAC1E,CACF;CAED,MAAM,aAAa,YAAY,OAAO;AAEtC,QACE,qBAAC;EACC,MAAK;EACL,OAAO,OAAO;EACd,WAAW,QAAQ;EACnB,UAAU,aAAa,KAAK;EAC5B,eAAe,CAAC,cAAc,QAAQ,OAAO,MAAM;;GAElD,WACC,oBAAC,OAAO;IACN,UAAU,YAAY;IACtB,OAAO,OAAO;KACd,GACA;GAEH,OAAO,OACN,oBAAC;IAAK,OAAO,EAAE,SAAS,eAAe;cAAG,OAAO;KAAY,GAC3D;GAEJ,oBAAC;IAAW,SAAQ;IAAK,YAAW;cACjC,OAAO;KACG;;GACN;;;;;ACzDb,SAAgB,sBAAyB,OAA0B;CACjE,MAAM,EAAE,eAAe;AAEvB,QAAO,OAAO,EACZ,WAAW;EACT,SAAS;EACT,eAAe;EACf,YAAY;EACZ,OAAO;EACP,OAAO,aAAa,gBAAgB;EACpC,cAAc;EACd,KAAK;EACL,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE;EACpC,EACF,CAAC;;;;;ACJJ,MAAa,aAAiB,UAA6B;CACzD;EACE,MAAM,EACJ,SACA,UACA,UACA,cACA,UAAU,WACV,aACE;EAEJ,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,uBAAuB;GACxE,OAAM,MAAK,CAAC,EAAE,UAAU,EAAE,aAAa;GACvC,UAAU,MAAM;GAChB,kBAAkB;GACnB,CAAC;AAEF,SACE,oBAAC;GAAI,OAAO,OAAO;GAAW,WAAW,QAAQ;aAC9C,QAAQ,KAAI,QACX,oBAAC;IAEC,QAAQ;IACC;IACC;IACA;IACV,eAAe,MAAM;IACrB,UAAU,iBAAiB,IAAI;IAC/B,oBAAoB,MAAM;IAC1B,SAAS;MARJ,OAAO,IAAI,MAAM,CAStB,CACF;IACE"}
+{"version":3,"file":"TabSwitch-DlXdgLPc.js","names":[],"sources":["../src/components/commons/toolkit/TabSwitch/components/TabSwitchItem/styles.ts","../src/components/commons/toolkit/TabSwitch/components/TabSwitchItem/index.tsx","../src/components/commons/toolkit/TabSwitch/styles.ts","../src/components/commons/toolkit/TabSwitch/index.tsx"],"sourcesContent":["// External Libraries\nimport { styled } from '@hooks/useThemedStyles/types'\n\ninterface Params {\n  disabled?: boolean\n  selected?: boolean\n  selectedColor?: string\n  variant: 'default' | 'underline'\n}\n\nexport function createTabSwitchItemStyles({\n  variant,\n  disabled,\n  selected,\n  selectedColor\n}: Params) {\n  const accent = selectedColor ?? 'var(--px-color-primary)'\n\n  return styled({\n    item: {\n      minHeight: '1.25rem',\n      position: 'relative',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 4,\n      background: 'transparent',\n      border: 0,\n      padding: '8px 10px',\n      cursor: disabled ? 'not-allowed' : 'pointer',\n      opacity: disabled ? 0.5 : 1,\n      userSelect: 'none',\n      whiteSpace: 'nowrap',\n      __rules: { '& > p': { zIndex: 1 } }\n    },\n\n    selectedBg:\n      variant === 'default'\n        ? {\n            position: 'absolute',\n            inset: 0,\n            borderRadius: 6,\n            border: '1px solid var(--px-border-primary)',\n            background: selected ? accent : 'transparent'\n          }\n        : {\n            position: 'absolute',\n            left: 0,\n            right: 0,\n            bottom: -2,\n            height: 2,\n            background: selected ? accent : 'transparent'\n          }\n  })\n}\n","// External Libraries\nimport { motion } from 'framer-motion'\n\n// Components\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SwitchOption } from '../../types'\n\n// Styles\nimport { createTabSwitchItemStyles } from './styles'\n\ntype Props<T> = {\n  option: SwitchOption<T>\n  selected: boolean\n  layoutId?: string\n  disabled?: boolean\n  selectedColor?: string\n  selectedLabelColor?: string\n  variant: 'default' | 'underline'\n  onClick: (value: T) => void\n}\n\nexport const SwitchItem = <T,>(props: Props<T>) => {\n  const { option, disabled, selected, layoutId, onClick } = props\n\n  const { styles, classes } = useThemedStyles(\n    props,\n    createTabSwitchItemStyles,\n    {\n      pick: p => [p.variant, p.selectedColor, p.selectedLabelColor, p.selected]\n    }\n  )\n\n  const isDisabled = disabled || option.disabled\n\n  return (\n    <button\n      type=\"button\"\n      style={styles.item}\n      className={classes.item}\n      tabIndex={isDisabled ? -1 : 0}\n      onClick={() => !isDisabled && onClick(option.value)}\n    >\n      {selected ? (\n        <motion.div\n          layoutId={layoutId || 'pixel-tabswitch-selected'}\n          style={styles.selectedBg}\n        />\n      ) : null}\n\n      {option.icon ? (\n        <span style={{ display: 'inline-flex' }}>{option.icon}</span>\n      ) : null}\n\n      <Typography variant=\"b1\" fontWeight=\"bold\">\n        {option.label}\n      </Typography>\n    </button>\n  )\n}\n","// Types\nimport type { TabSwitchProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createTabSwitchStyles<T>(props: TabSwitchProps<T>) {\n  const { fitContent } = props\n\n  return styled({\n    container: {\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      color: 'var(--px-text-primary, #4b5563)',\n      width: fitContent ? 'fit-content' : '100%',\n      borderBottom: '1px solid var(--px-border-primary, #e5e7eb)',\n      gap: 0,\n      __rules: { '& svg': { zIndex: 1 } }\n    }\n  })\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Components\nimport { SwitchItem } from './components/TabSwitchItem'\n\n// Types\nimport type { TabSwitchProps } from './types'\n\n// Styles\nimport { createTabSwitchStyles } from './styles'\n\nexport * from './types'\n\nexport const TabSwitch = <T,>(props: TabSwitchProps<T>) => {\n  {\n    const {\n      options,\n      disabled,\n      layoutId,\n      currentValue,\n      variant = 'default',\n      onChange\n    } = props\n\n    const { styles, classes } = useThemedStyles(props, createTabSwitchStyles, {\n      pick: p => [p.disabled, p.currentValue],\n      override: props.styles,\n      applyCommonProps: true\n    })\n\n    return (\n      <div style={styles.container} className={classes.container}>\n        {options.map(opt => (\n          <SwitchItem\n            key={String(opt.value)}\n            option={opt}\n            variant={variant}\n            layoutId={layoutId}\n            disabled={disabled}\n            selectedColor={props.selectedColor}\n            selected={currentValue === opt.value}\n            selectedLabelColor={props.selectedLabelColor}\n            onClick={onChange}\n          />\n        ))}\n      </div>\n    )\n  }\n}\n"],"mappings":";;;;;;AAUA,SAAgB,0BAA0B,EACxC,SACA,UACA,UACA,iBACS;CACT,MAAM,SAAS,iBAAiB;AAEhC,QAAO,OAAO;EACZ,MAAM;GACJ,WAAW;GACX,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,YAAY;GACZ,QAAQ;GACR,SAAS;GACT,QAAQ,WAAW,gBAAgB;GACnC,SAAS,WAAW,KAAM;GAC1B,YAAY;GACZ,YAAY;GACZ,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE;GACpC;EAED,YACE,YAAY,YACR;GACE,UAAU;GACV,OAAO;GACP,cAAc;GACd,QAAQ;GACR,YAAY,WAAW,SAAS;GACjC,GACD;GACE,UAAU;GACV,MAAM;GACN,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,YAAY,WAAW,SAAS;GACjC;EACR,CAAC;;;;;AC3BJ,MAAa,cAAkB,UAAoB;CACjD,MAAM,EAAE,QAAQ,UAAU,UAAU,UAAU,YAAY;CAE1D,MAAM,EAAE,QAAQ,YAAY,gBAC1B,OACA,2BACA,EACE,OAAM,MAAK;EAAC,EAAE;EAAS,EAAE;EAAe,EAAE;EAAoB,EAAE;EAAS,EAC1E,CACF;CAED,MAAM,aAAa,YAAY,OAAO;AAEtC,QACE,qBAAC;EACC,MAAK;EACL,OAAO,OAAO;EACd,WAAW,QAAQ;EACnB,UAAU,aAAa,KAAK;EAC5B,eAAe,CAAC,cAAc,QAAQ,OAAO,MAAM;;GAElD,WACC,oBAAC,OAAO;IACN,UAAU,YAAY;IACtB,OAAO,OAAO;KACd,GACA;GAEH,OAAO,OACN,oBAAC;IAAK,OAAO,EAAE,SAAS,eAAe;cAAG,OAAO;KAAY,GAC3D;GAEJ,oBAAC;IAAW,SAAQ;IAAK,YAAW;cACjC,OAAO;KACG;;GACN;;;;;ACzDb,SAAgB,sBAAyB,OAA0B;CACjE,MAAM,EAAE,eAAe;AAEvB,QAAO,OAAO,EACZ,WAAW;EACT,SAAS;EACT,eAAe;EACf,YAAY;EACZ,OAAO;EACP,OAAO,aAAa,gBAAgB;EACpC,cAAc;EACd,KAAK;EACL,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE;EACpC,EACF,CAAC;;;;;ACJJ,MAAa,aAAiB,UAA6B;CACzD;EACE,MAAM,EACJ,SACA,UACA,UACA,cACA,UAAU,WACV,aACE;EAEJ,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,uBAAuB;GACxE,OAAM,MAAK,CAAC,EAAE,UAAU,EAAE,aAAa;GACvC,UAAU,MAAM;GAChB,kBAAkB;GACnB,CAAC;AAEF,SACE,oBAAC;GAAI,OAAO,OAAO;GAAW,WAAW,QAAQ;aAC9C,QAAQ,KAAI,QACX,oBAAC;IAEC,QAAQ;IACC;IACC;IACA;IACV,eAAe,MAAM;IACrB,UAAU,iBAAiB,IAAI;IAC/B,oBAAoB,MAAM;IAC1B,SAAS;MARJ,OAAO,IAAI,MAAM,CAStB,CACF;IACE"}

package/dist/TextArea-Oqw0zh_x.js

@@ -0,0 +1,135 @@
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-CrarDyWc.js";
+import { t as Icon } from "./Icon-KzwFJI_k.js";
+import { t as Typography } from "./Typography-BkFV7BhK.js";
+import { t as Label } from "./Label-BHq2knad.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/commons/inputs/TextArea/styles.ts
+function createTextAreaStyles(props) {
+	const { height = "8rem", readOnly, startIcon } = props;
+	return styled({
+		container: {
+			width: "100%",
+			display: "flex",
+			flexDirection: "column",
+			rowGap: "0.375rem"
+		},
+		iconContainer: {
+			position: "absolute",
+			left: "0.75rem",
+			top: "1.375rem",
+			transform: "translateY(-50%)"
+		},
+		textArea: {
+			height,
+			width: "100%",
+			paddingBlock: "0.75rem",
+			paddingInline: "0.875rem",
+			borderWidth: 1,
+			borderRadius: "0.5rem",
+			resize: "none",
+			fontWeight: "400",
+			fontSize: "1rem",
+			color: "var(--px-text-primary)",
+			borderColor: props.errorMessage ? "var(--px-color-error)" : "var(--px-border-primary)",
+			outlineOffset: "-1px",
+			cursor: readOnly ? "default" : void 0,
+			paddingLeft: startIcon ? "2.5rem" : void 0,
+			__rules: {
+				"&::placeholder": {
+					fontWeight: 400,
+					color: "var(--px-text-secondary)"
+				},
+				"&:focus-within": {
+					outlineOffset: "-1px",
+					outline: `2px solid var(${props.errorMessage ? "--px-color-error" : "--px-color-primary"})`
+				}
+			}
+		},
+		error: {
+			display: "block",
+			fontWeight: 400,
+			lineHeight: "1rem",
+			fontSize: "0.75rem",
+			fontFamily: "inherit",
+			color: "var(--px-text-error)"
+		}
+	});
+}
+
+//#endregion
+//#region src/components/commons/inputs/TextArea/index.tsx
+const TextArea = (props) => {
+	const { value, disabled, readOnly, maxLength, hideMaxLength, textMaxLength, placeholder, errorMessage, label, required, requiredColor, labelConfig, startIcon, iconColor } = props;
+	const inputId = useId();
+	const { styles, classes } = useThemedStyles(props, createTextAreaStyles, {
+		pick: (p) => [
+			p.height,
+			p.readOnly,
+			p.startIcon,
+			p.placeholderColor,
+			p.focusedRingColor
+		],
+		override: props.styles,
+		applyCommonProps: true
+	});
+	function handleChange(e) {
+		if (disabled || readOnly) return;
+		props.onChange?.(e.target.value);
+	}
+	function renderLabel() {
+		if (!label) return null;
+		return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Label, {
+			label,
+			htmlFor: inputId,
+			required,
+			requiredColor,
+			...labelConfig
+		}) });
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		style: styles.container,
+		children: [
+			renderLabel(),
+			/* @__PURE__ */ jsxs("div", {
+				style: { position: "relative" },
+				children: [startIcon && /* @__PURE__ */ jsx("div", {
+					style: styles.iconContainer,
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: startIcon,
+						color: iconColor ? iconColor : "var(--px-text-primary)"
+					})
+				}), /* @__PURE__ */ jsx("textarea", {
+					value,
+					disabled,
+					readOnly,
+					maxLength,
+					placeholder,
+					style: styles.textArea,
+					className: classes.textArea,
+					onChange: handleChange
+				})]
+			}),
+			maxLength && !hideMaxLength ? /* @__PURE__ */ jsxs(Typography, {
+				variant: "b2",
+				styles: { text: { marginLeft: "auto" } },
+				children: [
+					value?.length,
+					"/",
+					maxLength,
+					" ",
+					textMaxLength
+				]
+			}) : null,
+			errorMessage ? /* @__PURE__ */ jsx("span", {
+				style: styles.error,
+				children: errorMessage
+			}) : null
+		]
+	});
+};
+
+//#endregion
+export { TextArea as t };
+//# sourceMappingURL=TextArea-Oqw0zh_x.js.map

package/dist/TextArea-Oqw0zh_x.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea-Oqw0zh_x.js","names":[],"sources":["../src/components/commons/inputs/TextArea/styles.ts","../src/components/commons/inputs/TextArea/index.tsx"],"sourcesContent":["// Types\nimport { styled } from '@hooks/useThemedStyles/types'\nimport type { TextAreaProps } from './types'\n\nexport function createTextAreaStyles(props: TextAreaProps) {\n  const { height = '8rem', readOnly, startIcon } = props\n\n  return styled({\n    container: {\n      width: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n\n      rowGap: '0.375rem'\n    },\n    iconContainer: {\n      position: 'absolute',\n      left: '0.75rem',\n      top: '1.375rem',\n      transform: 'translateY(-50%)'\n    },\n    textArea: {\n      height,\n      width: '100%',\n      paddingBlock: '0.75rem',\n      paddingInline: '0.875rem',\n      borderWidth: 1,\n      borderRadius: '0.5rem',\n      resize: 'none',\n\n      fontWeight: '400',\n      fontSize: '1rem',\n      color: 'var(--px-text-primary)',\n\n      borderColor: props.errorMessage\n        ? 'var(--px-color-error)'\n        : 'var(--px-border-primary)',\n      outlineOffset: '-1px',\n\n      cursor: readOnly ? 'default' : undefined,\n      paddingLeft: startIcon ? '2.5rem' : undefined,\n\n      __rules: {\n        '&::placeholder': {\n          fontWeight: 400,\n          color: 'var(--px-text-secondary)'\n        },\n        '&:focus-within': {\n          outlineOffset: '-1px',\n          outline: `2px solid var(${props.errorMessage ? '--px-color-error' : '--px-color-primary'})`\n        }\n      }\n    },\n    error: {\n      display: 'block',\n      fontWeight: 400,\n      lineHeight: '1rem',\n      fontSize: '0.75rem',\n      fontFamily: 'inherit',\n      color: 'var(--px-text-error)'\n    }\n  })\n}\n","// External Libraries\nimport { useId } from 'react'\n\n// Types\nimport type { TextAreaProps } from './types'\n\n// Components\nimport { Label } from '@components/commons/toolkit/Label'\nimport { Icon } from '@components/commons/toolkit/Icon'\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createTextAreaStyles } from './styles'\n\nexport const TextArea = (props: TextAreaProps) => {\n  const {\n    value,\n    disabled,\n    readOnly,\n    maxLength,\n    hideMaxLength,\n    textMaxLength,\n    placeholder,\n    errorMessage,\n\n    label,\n    required,\n    requiredColor,\n    labelConfig,\n\n    startIcon,\n    iconColor\n  } = props\n\n  // Hooks\n  const inputId = useId()\n\n  const { styles, classes } = useThemedStyles(props, createTextAreaStyles, {\n    pick: p => [\n      p.height,\n      p.readOnly,\n      p.startIcon,\n      p.placeholderColor,\n      p.focusedRingColor\n    ],\n    override: props.styles,\n    applyCommonProps: true\n  })\n\n  // Functions\n  function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {\n    if (disabled || readOnly) return\n    props.onChange?.(e.target.value)\n  }\n\n  function renderLabel() {\n    if (!label) return null\n\n    return (\n      <div>\n        <Label\n          label={label}\n          htmlFor={inputId}\n          required={required}\n          requiredColor={requiredColor}\n          {...labelConfig}\n        />\n      </div>\n    )\n  }\n\n  return (\n    <div style={styles.container}>\n      {renderLabel()}\n\n      <div style={{ position: 'relative' }}>\n        {startIcon && (\n          <div style={styles.iconContainer}>\n            <Icon\n              name={startIcon}\n              color={iconColor ? iconColor : 'var(--px-text-primary)'}\n            />\n          </div>\n        )}\n\n        <textarea\n          value={value}\n          disabled={disabled}\n          readOnly={readOnly}\n          maxLength={maxLength}\n          placeholder={placeholder}\n          style={styles.textArea}\n          className={classes.textArea}\n          onChange={handleChange}\n        />\n      </div>\n\n      {maxLength && !hideMaxLength ? (\n        <Typography variant=\"b2\" styles={{ text: { marginLeft: 'auto' } }}>\n          {value?.length}/{maxLength} {textMaxLength}\n        </Typography>\n      ) : null}\n\n      {errorMessage ? <span style={styles.error}>{errorMessage}</span> : null}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAIA,SAAgB,qBAAqB,OAAsB;CACzD,MAAM,EAAE,SAAS,QAAQ,UAAU,cAAc;AAEjD,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GAEP,SAAS;GACT,eAAe;GAEf,QAAQ;GACT;EACD,eAAe;GACb,UAAU;GACV,MAAM;GACN,KAAK;GACL,WAAW;GACZ;EACD,UAAU;GACR;GACA,OAAO;GACP,cAAc;GACd,eAAe;GACf,aAAa;GACb,cAAc;GACd,QAAQ;GAER,YAAY;GACZ,UAAU;GACV,OAAO;GAEP,aAAa,MAAM,eACf,0BACA;GACJ,eAAe;GAEf,QAAQ,WAAW,YAAY;GAC/B,aAAa,YAAY,WAAW;GAEpC,SAAS;IACP,kBAAkB;KAChB,YAAY;KACZ,OAAO;KACR;IACD,kBAAkB;KAChB,eAAe;KACf,SAAS,iBAAiB,MAAM,eAAe,qBAAqB,qBAAqB;KAC1F;IACF;GACF;EACD,OAAO;GACL,SAAS;GACT,YAAY;GACZ,YAAY;GACZ,UAAU;GACV,YAAY;GACZ,OAAO;GACR;EACF,CAAC;;;;;AC7CJ,MAAa,YAAY,UAAyB;CAChD,MAAM,EACJ,OACA,UACA,UACA,WACA,eACA,eACA,aACA,cAEA,OACA,UACA,eACA,aAEA,WACA,cACE;CAGJ,MAAM,UAAU,OAAO;CAEvB,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,sBAAsB;EACvE,OAAM,MAAK;GACT,EAAE;GACF,EAAE;GACF,EAAE;GACF,EAAE;GACF,EAAE;GACH;EACD,UAAU,MAAM;EAChB,kBAAkB;EACnB,CAAC;CAGF,SAAS,aAAa,GAA2C;AAC/D,MAAI,YAAY,SAAU;AAC1B,QAAM,WAAW,EAAE,OAAO,MAAM;;CAGlC,SAAS,cAAc;AACrB,MAAI,CAAC,MAAO,QAAO;AAEnB,SACE,oBAAC,mBACC,oBAAC;GACQ;GACP,SAAS;GACC;GACK;GACf,GAAI;IACJ,GACE;;AAIV,QACE,qBAAC;EAAI,OAAO,OAAO;;GAChB,aAAa;GAEd,qBAAC;IAAI,OAAO,EAAE,UAAU,YAAY;eACjC,aACC,oBAAC;KAAI,OAAO,OAAO;eACjB,oBAAC;MACC,MAAM;MACN,OAAO,YAAY,YAAY;OAC/B;MACE,EAGR,oBAAC;KACQ;KACG;KACA;KACC;KACE;KACb,OAAO,OAAO;KACd,WAAW,QAAQ;KACnB,UAAU;MACV;KACE;GAEL,aAAa,CAAC,gBACb,qBAAC;IAAW,SAAQ;IAAK,QAAQ,EAAE,MAAM,EAAE,YAAY,QAAQ,EAAE;;KAC9D,OAAO;KAAO;KAAE;KAAU;KAAE;;KAClB,GACX;GAEH,eAAe,oBAAC;IAAK,OAAO,OAAO;cAAQ;KAAoB,GAAG;;GAC/D"}

package/dist/{ThemeContext-bVaozqut.js → ThemeContext-DhXvmWKO.js}

@@ -539,4 +539,4 @@ function useTheme() {
 
 //#endregion
 export { useTheme as n, ThemeProvider as t };
-//# sourceMappingURL=ThemeContext-bVaozqut.js.map
+//# sourceMappingURL=ThemeContext-DhXvmWKO.js.map