softable-pixels-web 1.0.4 → 1.0.6

package/dist/{InfoSummary-DVuk2_3H.js.map → InfoSummary-DSOwr7Q1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"InfoSummary-DVuk2_3H.js","names":["SummaryHeader: React.FC<Props>","SummaryCaption: React.FC<Props>","SummaryHighlight: React.FC<Props>","SummaryItem: React.FC<SummaryItemProps>","InfoSummary: React.FC<InfoSummaryProps>"],"sources":["../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHeader/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHeader/index.tsx","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryCaption/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryCaption/index.tsx","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHighlight/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHighlight/index.tsx","../src/components/toolkit/InfoSummary/components/SummaryItem/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/index.tsx","../src/components/toolkit/InfoSummary/styles.ts","../src/components/toolkit/InfoSummary/index.tsx"],"sourcesContent":["// Types\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryHeaderStyles(): StyleMap {\n  return {\n    container: {\n      width: '100%',\n      minHeight: '1rem',\n\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'flex-end',\n\n      gap: '0.125rem'\n    },\n\n    iconContainer: {\n      display: 'flex',\n      alignItems: 'flex-start'\n    },\n\n    textContainer: {\n      flex: '1',\n      maxWidth: '8rem',\n\n      display: 'flex',\n      alignItems: 'flex-start',\n\n      __rules: {\n        '& > p': {\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis'\n        }\n      }\n    }\n  }\n}\n","// External Libraries\nimport type React from 'react'\nimport type { ReactNode } from 'react'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryHeaderStyles } from './styles'\n\ninterface Props {\n  title: string\n  icon?: ReactNode\n}\n\nexport const SummaryHeader: React.FC<Props> = ({ icon, title }) => {\n  const { styles } = useThemedStyles({}, createSummaryHeaderStyles)\n\n  return (\n    <header style={styles.container}>\n      {icon ? <div style={styles.iconContainer}>{icon}</div> : null}\n\n      <div style={styles.textContainer}>\n        <Typography\n          variant=\"b1\"\n          fontWeight=\"bold\"\n          lineHeight=\"100%\"\n          fontSize=\"0.75rem\"\n        >\n          {title}\n        </Typography>\n      </div>\n    </header>\n  )\n}\n","// Types\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryCaptionStyles(): StyleMap {\n  return {\n    container: {\n      width: '100%',\n      minHeight: '0.625rem',\n\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyItems: 'start',\n\n      columnGap: '0.125rem'\n    },\n\n    textContainer: {\n      flex: '1',\n      maxWidth: '8rem',\n\n      display: 'flex',\n      alignItems: 'center',\n\n      __rules: {\n        '& > p': {\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis'\n        }\n      }\n    }\n  }\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryCaptionStyles } from './styles'\n\ninterface Props {\n  loading?: boolean\n  captionText?: string\n}\n\nexport const SummaryCaption: React.FC<Props> = ({ loading, captionText }) => {\n  // Hooks\n  const { styles } = useThemedStyles({}, createSummaryCaptionStyles)\n\n  return (\n    <div style={styles.container}>\n      <div style={styles.textContainer}>\n        <Typography\n          variant=\"b3\"\n          lineHeight=\"100%\"\n          isLoading={loading}\n          fontSize=\"0.625rem\"\n          color=\"var(--px-text-secondary)\"\n        >\n          {captionText}\n        </Typography>\n      </div>\n    </div>\n  )\n}\n","// Types\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryHighlightStyles(): StyleMap {\n  return {\n    container: {\n      width: '100%',\n      minHeight: '1rem',\n\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'flex-end',\n\n      columnGap: '0.125rem'\n    },\n\n    iconContainer: {\n      display: 'flex',\n      alignItems: 'flex-start'\n    },\n\n    textContainer: {\n      flex: '1',\n      maxWidth: '8rem',\n\n      display: 'flex',\n      alignItems: 'flex-start',\n\n      __rules: {\n        '& > p': {\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n          lineHeight: '1'\n        }\n      }\n    }\n  }\n}\n","// External Libraries\nimport type React from 'react'\nimport type { ReactNode } from 'react'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryHighlightStyles } from './styles'\n\ninterface Props {\n  loading?: boolean\n  highlightText?: string\n  highlightIcon?: ReactNode\n}\n\nexport const SummaryHighlight: React.FC<Props> = ({\n  loading,\n  highlightText,\n  highlightIcon\n}) => {\n  // Hooks\n  const { styles } = useThemedStyles({}, createSummaryHighlightStyles)\n\n  return (\n    <div style={styles.container}>\n      {highlightIcon ? (\n        <div style={styles.iconContainer}>{highlightIcon}</div>\n      ) : null}\n\n      <div style={styles.textContainer}>\n        <Typography\n          variant=\"b1\"\n          lineHeight=\"100%\"\n          fontSize=\"0.875rem\"\n          fontWeight=\"normal\"\n          isLoading={loading}\n        >\n          {highlightText}\n        </Typography>\n      </div>\n    </div>\n  )\n}\n","// Types\nimport type { SummaryItemProps } from './types'\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryItemStyles(props: SummaryItemProps): StyleMap {\n  return {\n    container: {\n      height: '100%',\n      borderRight: props.isLast ? 'none' : '2px solid var(--border-secondary)'\n    },\n\n    content: {\n      minWidth: '8rem',\n      height: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'space-between',\n\n      paddingBlock: '0.5rem',\n      paddingInline: '1rem'\n    }\n  }\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { SummaryHeader } from './components/SummaryHeader'\nimport { SummaryCaption } from './components/SummaryCaption'\nimport { SummaryHighlight } from './components/SummaryHighlight'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SummaryItemProps } from './types'\n\n// Styles\nimport { createSummaryItemStyles } from './styles'\n\nexport const SummaryItem: React.FC<SummaryItemProps> = props => {\n  // Hooks\n  const { styles } = useThemedStyles(props, createSummaryItemStyles)\n\n  return (\n    <li style={styles.container}>\n      <article style={styles.content}>\n        <SummaryHeader icon={props.item.titleIcon} title={props.item.title} />\n\n        <SummaryHighlight\n          loading={props.loading}\n          highlightText={props.item.highlight}\n          highlightIcon={props.item.highlightIcon}\n        />\n\n        <SummaryCaption\n          loading={props.loading}\n          captionText={props.item.caption}\n        />\n      </article>\n    </li>\n  )\n}\n","// Types\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createInfoSummaryStyles(): StyleMap {\n  return {\n    section: {\n      height: '5.5rem',\n      minHeight: '5.5rem',\n\n      width: 'fit-content',\n\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'flex-start',\n\n      backgroundColor: 'var(--px-background-card-primary)',\n\n      borderRadius: '10px',\n      paddingBlock: 'var(--px-space-sm)'\n    },\n\n    summaryListContainer: {\n      width: '100%',\n      height: '100%',\n\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'flex-start'\n    }\n  }\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { SummaryItem } from './components/SummaryItem'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { InfoSummaryProps } from './types'\n\n// Styles\nimport { createInfoSummaryStyles } from './styles'\n\nexport * from './types'\n\nexport const InfoSummary: React.FC<InfoSummaryProps> = ({ infos, loading }) => {\n  // Hooks\n  const { styles } = useThemedStyles({}, createInfoSummaryStyles)\n\n  // Functions\n  function renderSummaryItems() {\n    return (\n      <ul style={styles.summaryListContainer}>\n        {infos.map((info, index) => (\n          <SummaryItem\n            item={info}\n            key={info.id}\n            loading={loading}\n            isLast={index === infos.length - 1}\n          />\n        ))}\n      </ul>\n    )\n  }\n\n  return <section style={styles.section}>{renderSummaryItems()}</section>\n}\n"],"mappings":"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"}
+{"version":3,"file":"InfoSummary-DSOwr7Q1.js","names":["SummaryHeader: React.FC<Props>","SummaryCaption: React.FC<Props>","SummaryHighlight: React.FC<Props>","SummaryItem: React.FC<SummaryItemProps>","InfoSummary: React.FC<InfoSummaryProps>"],"sources":["../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHeader/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHeader/index.tsx","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryCaption/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryCaption/index.tsx","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHighlight/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHighlight/index.tsx","../src/components/toolkit/InfoSummary/components/SummaryItem/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/index.tsx","../src/components/toolkit/InfoSummary/styles.ts","../src/components/toolkit/InfoSummary/index.tsx"],"sourcesContent":["// Types\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryHeaderStyles(): StyleMap {\n  return {\n    container: {\n      width: '100%',\n      minHeight: '1rem',\n\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'flex-end',\n\n      gap: '0.125rem'\n    },\n\n    iconContainer: {\n      display: 'flex',\n      alignItems: 'flex-start'\n    },\n\n    textContainer: {\n      flex: '1',\n      maxWidth: '8rem',\n\n      display: 'flex',\n      alignItems: 'flex-start',\n\n      __rules: {\n        '& > p': {\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis'\n        }\n      }\n    }\n  }\n}\n","// External Libraries\nimport type React from 'react'\nimport type { ReactNode } from 'react'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryHeaderStyles } from './styles'\n\ninterface Props {\n  title: string\n  icon?: ReactNode\n}\n\nexport const SummaryHeader: React.FC<Props> = ({ icon, title }) => {\n  const { styles } = useThemedStyles({}, createSummaryHeaderStyles)\n\n  return (\n    <header style={styles.container}>\n      {icon ? <div style={styles.iconContainer}>{icon}</div> : null}\n\n      <div style={styles.textContainer}>\n        <Typography\n          variant=\"b1\"\n          fontWeight=\"bold\"\n          lineHeight=\"100%\"\n          fontSize=\"0.75rem\"\n        >\n          {title}\n        </Typography>\n      </div>\n    </header>\n  )\n}\n","// Types\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryCaptionStyles(): StyleMap {\n  return {\n    container: {\n      width: '100%',\n      minHeight: '0.625rem',\n\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyItems: 'start',\n\n      columnGap: '0.125rem'\n    },\n\n    textContainer: {\n      flex: '1',\n      maxWidth: '8rem',\n\n      display: 'flex',\n      alignItems: 'center',\n\n      __rules: {\n        '& > p': {\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis'\n        }\n      }\n    }\n  }\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryCaptionStyles } from './styles'\n\ninterface Props {\n  loading?: boolean\n  captionText?: string\n}\n\nexport const SummaryCaption: React.FC<Props> = ({ loading, captionText }) => {\n  // Hooks\n  const { styles } = useThemedStyles({}, createSummaryCaptionStyles)\n\n  return (\n    <div style={styles.container}>\n      <div style={styles.textContainer}>\n        <Typography\n          variant=\"b3\"\n          lineHeight=\"100%\"\n          isLoading={loading}\n          fontSize=\"0.625rem\"\n          color=\"var(--px-text-secondary)\"\n        >\n          {captionText}\n        </Typography>\n      </div>\n    </div>\n  )\n}\n","// Types\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryHighlightStyles(): StyleMap {\n  return {\n    container: {\n      width: '100%',\n      minHeight: '1rem',\n\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'flex-end',\n\n      columnGap: '0.125rem'\n    },\n\n    iconContainer: {\n      display: 'flex',\n      alignItems: 'flex-start'\n    },\n\n    textContainer: {\n      flex: '1',\n      maxWidth: '8rem',\n\n      display: 'flex',\n      alignItems: 'flex-start',\n\n      __rules: {\n        '& > p': {\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n          lineHeight: '1'\n        }\n      }\n    }\n  }\n}\n","// External Libraries\nimport type React from 'react'\nimport type { ReactNode } from 'react'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryHighlightStyles } from './styles'\n\ninterface Props {\n  loading?: boolean\n  highlightText?: string\n  highlightIcon?: ReactNode\n}\n\nexport const SummaryHighlight: React.FC<Props> = ({\n  loading,\n  highlightText,\n  highlightIcon\n}) => {\n  // Hooks\n  const { styles } = useThemedStyles({}, createSummaryHighlightStyles)\n\n  return (\n    <div style={styles.container}>\n      {highlightIcon ? (\n        <div style={styles.iconContainer}>{highlightIcon}</div>\n      ) : null}\n\n      <div style={styles.textContainer}>\n        <Typography\n          variant=\"b1\"\n          lineHeight=\"100%\"\n          fontSize=\"0.875rem\"\n          fontWeight=\"normal\"\n          isLoading={loading}\n        >\n          {highlightText}\n        </Typography>\n      </div>\n    </div>\n  )\n}\n","// Types\nimport type { SummaryItemProps } from './types'\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryItemStyles(props: SummaryItemProps): StyleMap {\n  return {\n    container: {\n      height: '100%',\n      borderRight: props.isLast ? 'none' : '2px solid var(--border-secondary)'\n    },\n\n    content: {\n      minWidth: '8rem',\n      height: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'space-between',\n\n      paddingBlock: '0.5rem',\n      paddingInline: '1rem'\n    }\n  }\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { SummaryHeader } from './components/SummaryHeader'\nimport { SummaryCaption } from './components/SummaryCaption'\nimport { SummaryHighlight } from './components/SummaryHighlight'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SummaryItemProps } from './types'\n\n// Styles\nimport { createSummaryItemStyles } from './styles'\n\nexport const SummaryItem: React.FC<SummaryItemProps> = props => {\n  // Hooks\n  const { styles } = useThemedStyles(props, createSummaryItemStyles)\n\n  return (\n    <li style={styles.container}>\n      <article style={styles.content}>\n        <SummaryHeader icon={props.item.titleIcon} title={props.item.title} />\n\n        <SummaryHighlight\n          loading={props.loading}\n          highlightText={props.item.highlight}\n          highlightIcon={props.item.highlightIcon}\n        />\n\n        <SummaryCaption\n          loading={props.loading}\n          captionText={props.item.caption}\n        />\n      </article>\n    </li>\n  )\n}\n","// Types\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createInfoSummaryStyles(): StyleMap {\n  return {\n    section: {\n      height: '5.5rem',\n      minHeight: '5.5rem',\n\n      width: 'fit-content',\n\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'flex-start',\n\n      backgroundColor: 'var(--px-background-card-primary)',\n\n      borderRadius: '10px',\n      paddingBlock: 'var(--px-space-sm)'\n    },\n\n    summaryListContainer: {\n      width: '100%',\n      height: '100%',\n\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'flex-start'\n    }\n  }\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { SummaryItem } from './components/SummaryItem'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { InfoSummaryProps } from './types'\n\n// Styles\nimport { createInfoSummaryStyles } from './styles'\n\nexport * from './types'\n\nexport const InfoSummary: React.FC<InfoSummaryProps> = ({ infos, loading }) => {\n  // Hooks\n  const { styles } = useThemedStyles({}, createInfoSummaryStyles)\n\n  // Functions\n  function renderSummaryItems() {\n    return (\n      <ul style={styles.summaryListContainer}>\n        {infos.map((info, index) => (\n          <SummaryItem\n            item={info}\n            key={info.id}\n            loading={loading}\n            isLast={index === infos.length - 1}\n          />\n        ))}\n      </ul>\n    )\n  }\n\n  return <section style={styles.section}>{renderSummaryItems()}</section>\n}\n"],"mappings":"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"}

package/dist/Input-CTx0xk1z.js

@@ -0,0 +1,398 @@
+import { t as Icon } from "./Icon-CzUEwDPp.js";
+import { n as useThemedStyles, t as Typography } from "./Typography-CTfrQCqI.js";
+import { useCallback, useId, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/commons/Label/style.ts
+const LABEL_VARIANTS = {
+	b1: {
+		fontSize: "1rem",
+		lineHeight: "1.5rem"
+	},
+	b2: {
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem"
+	},
+	b3: {
+		fontSize: "0.75rem",
+		lineHeight: "1rem"
+	}
+};
+function createLabelStyles(props) {
+	const { labelColor, labelWeight, labelVariant = "b2", requiredColor } = props;
+	return {
+		label: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: "0.25rem",
+			fontWeight: labelWeight,
+			...LABEL_VARIANTS[labelVariant] ?? {},
+			...labelColor ? { color: labelColor } : {}
+		},
+		required: {
+			color: requiredColor,
+			lineHeight: "inherit",
+			fontSize: "inherit",
+			fontWeight: "inherit"
+		}
+	};
+}
+
+//#endregion
+//#region src/components/commons/Label/index.tsx
+const Label = (props) => {
+	const { htmlFor, label, required, requiredColor, labelColor, labelWeight, labelVariant = "b2" } = props;
+	const { styles } = useThemedStyles(props, createLabelStyles, {
+		pick: (p) => [
+			p.labelColor,
+			p.labelWeight,
+			p.labelVariant,
+			p.requiredColor
+		],
+		override: props.styles,
+		applyCommonProps: true
+	});
+	return /* @__PURE__ */ jsx("label", {
+		htmlFor,
+		style: styles.label,
+		children: /* @__PURE__ */ jsxs(Typography, {
+			variant: labelVariant,
+			styles: { text: {
+				minWidth: "fit-content",
+				color: labelColor,
+				fontWeight: labelWeight
+			} },
+			children: [label, required ? /* @__PURE__ */ jsx(Typography, {
+				as: "span",
+				variant: "b2",
+				styles: { text: {
+					color: requiredColor,
+					marginLeft: "0.125rem"
+				} },
+				children: "*"
+			}) : null]
+		})
+	});
+};
+
+//#endregion
+//#region src/components/commons/inputs/Input/hooks/useInput/index.ts
+const useInput = ({ value: controlledValue, defaultValue = "", onChange }) => {
+	const inputRef = useRef(null);
+	const [internalValue, setInternalValue] = useState(defaultValue);
+	const [showPassword, setShowPassword] = useState(false);
+	const isControlled = controlledValue !== void 0;
+	const currentValue = isControlled ? controlledValue : internalValue;
+	const handleChange = useCallback((e) => {
+		const value = e.target.value;
+		if (!isControlled) setInternalValue(value);
+		onChange?.(value);
+	}, [isControlled, onChange]);
+	const togglePasswordVisibility = useCallback(() => {
+		setShowPassword((prev) => !prev);
+	}, []);
+	return {
+		inputRef,
+		focusInput: useCallback(() => {
+			inputRef.current?.focus();
+		}, []),
+		isControlled,
+		currentValue,
+		showPassword,
+		handleChange,
+		togglePasswordVisibility
+	};
+};
+
+//#endregion
+//#region src/components/commons/inputs/Input/styles.ts
+const INPUT_STYLES = {
+	width: {
+		auto: { width: "auto" },
+		full: { width: "100%" },
+		md: { width: "12rem" },
+		lg: { width: "16rem" },
+		xl: { width: "20rem" },
+		"2xl": { width: "24rem" }
+	},
+	radius: {
+		none: { borderRadius: "0px" },
+		sm: { borderRadius: "0.125rem" },
+		md: { borderRadius: "0.375rem" },
+		lg: { borderRadius: "0.5rem" },
+		full: { borderRadius: "9999px" }
+	},
+	size: {
+		sm: {
+			wrapper: { minHeight: "2rem" },
+			input: {
+				padding: "0.5rem 0.75rem",
+				lineHeight: "1rem",
+				fontSize: "0.75rem"
+			},
+			label: {
+				fontSize: "0.75rem",
+				lineHeight: "1rem",
+				marginBottom: "0.25rem"
+			},
+			description: {
+				fontSize: "0.75rem",
+				lineHeight: "1rem",
+				marginTop: "0.25rem"
+			},
+			error: {
+				fontSize: "0.75rem",
+				lineHeight: "1rem",
+				marginTop: "0.25rem"
+			}
+		},
+		md: {
+			wrapper: { minHeight: "2.5rem" },
+			input: {
+				padding: "0.5rem 0.75rem",
+				lineHeight: "1.25rem",
+				fontSize: "0.875rem"
+			},
+			label: {
+				fontSize: "0.875rem",
+				lineHeight: "1.25rem",
+				marginBottom: "0.375rem"
+			},
+			description: {
+				fontSize: "0.75rem",
+				lineHeight: "1rem",
+				marginTop: "0.375rem"
+			},
+			error: {
+				fontSize: "0.75rem",
+				lineHeight: "1rem",
+				marginTop: "0.375rem"
+			}
+		},
+		lg: {
+			wrapper: { minHeight: "3rem" },
+			input: {
+				padding: "0.75rem 1rem",
+				lineHeight: "1.5rem",
+				fontSize: "1rem",
+				width: "16rem"
+			},
+			label: {
+				fontSize: "0.875rem",
+				lineHeight: "1.25rem",
+				marginBottom: "0.5rem"
+			},
+			description: {
+				fontSize: "0.875rem",
+				lineHeight: "1.25rem",
+				marginTop: "0.5rem"
+			},
+			error: {
+				fontSize: "0.875rem",
+				lineHeight: "1.25rem",
+				marginTop: "0.5rem"
+			}
+		}
+	},
+	variant: { bordered: {
+		wrapper: { border: "1px solid var(--px-border-primary)" },
+		input: {
+			backgroundColor: "transparent",
+			color: "var(--px-text-primary)",
+			"::placeholder": { color: "var(--px-text-secondary)" }
+		},
+		label: { color: "var(--px-text-primary)" },
+		button: {
+			color: "var(--px-text-secondary)",
+			":hover": { color: "var(--px-text-primary)" }
+		}
+	} },
+	state: {
+		default: {
+			input: {},
+			ring: { boxShadow: "0 0 0 2px var(--px-color-info)" }
+		},
+		invalid: {
+			wrapper: {
+				borderColor: "var(--px-color-invalid)",
+				__rules: { "&:focus-within": { boxShadow: "0 0 0 1px var(--px-background), 0 0 0 3px var(--px-color-invalid)" } }
+			},
+			input: { color: "var(--px-color-invalid)" },
+			error: { color: "var(--px-color-invalid)" }
+		},
+		disabled: {
+			wrapper: {
+				opacity: .6,
+				cursor: "not-allowed",
+				backgroundColor: "#f9fafb"
+			},
+			input: { cursor: "not-allowed" },
+			label: { cursor: "not-allowed" }
+		}
+	}
+};
+function createInputStyles(props) {
+	const { size = "md", variant = "bordered", radius = "md", isDisabled = false, isInvalid = false, focusedRingColor } = props;
+	const focusRingColor = focusedRingColor || "var(--px-color-info)";
+	return {
+		wrapper: {
+			position: "relative",
+			display: "flex",
+			alignItems: "center",
+			...INPUT_STYLES.size[size]?.wrapper ?? {},
+			...INPUT_STYLES.variant[variant]?.wrapper ?? {},
+			...INPUT_STYLES.radius[radius] ?? {},
+			__rules: { "&:focus-within": { boxShadow: `0 0 0 1px var(--px-background), 0 0 0 3px ${focusRingColor}` } },
+			...isDisabled ? INPUT_STYLES.state.disabled.wrapper : {},
+			...isInvalid ? INPUT_STYLES.state.invalid.wrapper : {}
+		},
+		input: {
+			flex: 1,
+			backgroundColor: "transparent",
+			outline: "none",
+			width: "100%",
+			...INPUT_STYLES.size[size]?.input ?? {},
+			...INPUT_STYLES.variant[variant]?.input ?? {},
+			...INPUT_STYLES.state.default.input ?? {},
+			...isDisabled ? INPUT_STYLES.state.disabled.input : {},
+			...isInvalid ? INPUT_STYLES.state.invalid.input : {}
+		},
+		label: {
+			...INPUT_STYLES.size[size]?.label ?? {},
+			...INPUT_STYLES.variant[variant]?.label ?? {},
+			...isDisabled ? INPUT_STYLES.state.disabled.label : {}
+		},
+		error: {
+			display: "block",
+			...INPUT_STYLES.size[size]?.error ?? {},
+			...INPUT_STYLES.state.invalid.error ?? {}
+		},
+		button: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			padding: "0.25rem",
+			cursor: "pointer",
+			...INPUT_STYLES.variant[variant]?.button ?? {},
+			...INPUT_STYLES.radius[radius] ?? {},
+			...isDisabled ? {
+				cursor: "not-allowed",
+				opacity: .5
+			} : {}
+		},
+		startContent: {
+			display: "flex",
+			alignItems: "center",
+			padding: "0.25rem"
+		}
+	};
+}
+
+//#endregion
+//#region src/components/commons/inputs/Input/index.tsx
+const Input = (props) => {
+	const { id, type, label, width, fullWidth, required, isDisabled, minLength, maxLength, placeholder, requiredColor, labelColor, labelWeight, labelVariant, startContent, endContent, errorMessage, onChange, value, defaultValue, size, radius, variant, isInvalid, ...nativeInputProps } = props;
+	const { inputRef, currentValue, showPassword, handleChange, togglePasswordVisibility } = useInput({
+		size,
+		value,
+		radius,
+		variant,
+		isInvalid,
+		fullWidth,
+		isDisabled,
+		defaultValue,
+		onChange
+	});
+	const reactId = useId();
+	const inputId = useMemo(() => {
+		return id || `input-${reactId}`;
+	}, [id, reactId]);
+	const containerWidth = getWidth();
+	const { styles, classes } = useThemedStyles(props, createInputStyles, {
+		pick: (p) => [
+			p.size,
+			p.variant,
+			p.radius,
+			p.isDisabled,
+			p.isInvalid,
+			p.focusedRingColor
+		],
+		override: props.styles,
+		applyCommonProps: true
+	});
+	function getType() {
+		if (type === "password" && showPassword) return "text";
+		return type;
+	}
+	function getWidth() {
+		if (fullWidth) return { width: "100%" };
+		if (width) return INPUT_STYLES.width[width] || { width: "auto" };
+		return { width: "auto" };
+	}
+	function renderLabel() {
+		if (!label) return null;
+		return /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-3",
+			children: /* @__PURE__ */ jsx(Label, {
+				htmlFor: inputId,
+				label,
+				required,
+				styles: { label: styles.label },
+				requiredColor,
+				labelColor,
+				labelWeight,
+				labelVariant
+			})
+		});
+	}
+	function renderEndContent() {
+		return /* @__PURE__ */ jsx(Fragment, { children: type === "password" ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			style: styles.button,
+			onClick: togglePasswordVisibility,
+			children: showPassword ? /* @__PURE__ */ jsx(Icon, { name: "general-eye-off" }) : /* @__PURE__ */ jsx(Icon, { name: "general-eye" })
+		}) : endContent });
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		style: containerWidth,
+		children: [
+			renderLabel(),
+			/* @__PURE__ */ jsxs("div", {
+				style: styles.wrapper,
+				className: classes.wrapper,
+				children: [
+					startContent && /* @__PURE__ */ jsx("div", {
+						style: styles.startContent,
+						children: startContent
+					}),
+					/* @__PURE__ */ jsx("div", {
+						style: { flex: 1 },
+						children: /* @__PURE__ */ jsx("input", {
+							ref: inputRef,
+							id: inputId,
+							type: getType(),
+							value: currentValue,
+							style: styles.input,
+							className: classes.input,
+							disabled: isDisabled,
+							minLength,
+							maxLength,
+							placeholder: placeholder ?? "Digite aqui...",
+							onChange: handleChange,
+							...nativeInputProps
+						})
+					}),
+					renderEndContent() && /* @__PURE__ */ jsx("div", { children: renderEndContent() })
+				]
+			}),
+			errorMessage ? /* @__PURE__ */ jsx("div", {
+				style: styles.error,
+				children: errorMessage
+			}) : null
+		]
+	});
+};
+
+//#endregion
+export { Input as t };
+//# sourceMappingURL=Input-CTx0xk1z.js.map

package/dist/Input-CTx0xk1z.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input-CTx0xk1z.js","names":["LABEL_VARIANTS: Record<string, CSSProperties>"],"sources":["../src/components/commons/Label/style.ts","../src/components/commons/Label/index.tsx","../src/components/commons/inputs/Input/hooks/useInput/index.ts","../src/components/commons/inputs/Input/styles.ts","../src/components/commons/inputs/Input/index.tsx"],"sourcesContent":["// External libraries\nimport type { CSSProperties } from 'react'\n\n// Types\nimport type { LabelProps } from './types'\nimport { StyleMap } from '@hooks/useThemedStyles/types'\n\nconst LABEL_VARIANTS: Record<string, CSSProperties> = {\n  b1: {\n    fontSize: '1rem',\n    lineHeight: '1.5rem',\n  },\n  b2: {\n    fontSize: '0.875rem',\n    lineHeight: '1.25rem',\n  },\n  b3: {\n    fontSize: '0.75rem',\n    lineHeight: '1rem',\n  },\n}\n\nexport function createLabelStyles(props: LabelProps): StyleMap {\n  const { labelColor, labelWeight, labelVariant = 'b2', requiredColor } = props\n\n  return {\n    label: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: '0.25rem',\n      fontWeight: labelWeight,\n\n      ...(LABEL_VARIANTS[labelVariant] ?? {}),\n\n      ...(labelColor ? { color: labelColor } : {}),\n    },\n\n    required: {\n      color: requiredColor,\n      lineHeight: 'inherit',\n      fontSize: 'inherit',\n      fontWeight: 'inherit',\n    },\n  }\n}\n","// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Types\nimport type { LabelProps } from './types'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createLabelStyles } from './style'\n\nexport const Label = (props: LabelProps) => {\n  const {\n    htmlFor,\n    label,\n    required,\n    requiredColor,\n    labelColor,\n    labelWeight,\n    labelVariant = 'b2',\n  } = props\n\n  const { styles } = useThemedStyles(props, createLabelStyles, {\n    pick: p => [p.labelColor, p.labelWeight, p.labelVariant, p.requiredColor],\n    override: props.styles,\n    applyCommonProps: true,\n  })\n\n  return (\n    <label htmlFor={htmlFor} style={styles.label}>\n      <Typography\n        variant={labelVariant}\n        styles={{\n          text: {\n            minWidth: 'fit-content',\n            color: labelColor,\n            fontWeight: labelWeight,\n          },\n        }}\n      >\n        {label}\n\n        {required ? (\n          <Typography\n            as=\"span\"\n            variant=\"b2\"\n            styles={{ text: { color: requiredColor, marginLeft: '0.125rem' } }}\n          >\n            *\n          </Typography>\n        ) : null}\n      </Typography>\n    </label>\n  )\n}\n","// External Libraries\nimport { useState, useRef, useCallback } from 'react'\n\n// Types\nimport type { InputProps } from '../../types'\n\nexport const useInput = ({\n  value: controlledValue,\n  defaultValue = '',\n  onChange,\n}: Partial<InputProps>) => {\n  // Refs\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  // States\n  const [internalValue, setInternalValue] = useState(defaultValue)\n  const [showPassword, setShowPassword] = useState(false)\n\n  // Constants\n  const isControlled = controlledValue !== undefined\n  const currentValue = isControlled ? controlledValue : internalValue\n\n  // Functions\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = e.target.value\n\n      if (!isControlled) setInternalValue(value)\n      onChange?.(value)\n    },\n    [isControlled, onChange],\n  )\n\n  const togglePasswordVisibility = useCallback(() => {\n    setShowPassword(prev => !prev)\n  }, [])\n\n  const focusInput = useCallback(() => {\n    inputRef.current?.focus()\n  }, [])\n\n  return {\n    inputRef,\n    focusInput,\n    isControlled,\n    currentValue,\n    showPassword,\n    handleChange,\n    togglePasswordVisibility,\n  }\n}\n","// External libraries\nimport type { CSSProperties } from 'react'\n\n// Types\nimport { StyleMap } from '@hooks/useThemedStyles/types'\nimport { InputProps } from './types'\n\nexport const INPUT_STYLES = {\n  width: {\n    auto: { width: 'auto' },\n    full: { width: '100%' },\n    md: { width: '12rem' },\n    lg: { width: '16rem' },\n    xl: { width: '20rem' },\n    '2xl': { width: '24rem' },\n  } as Record<string, CSSProperties>,\n  radius: {\n    none: { borderRadius: '0px' },\n    sm: { borderRadius: '0.125rem' },\n    md: { borderRadius: '0.375rem' },\n    lg: { borderRadius: '0.5rem' },\n    full: { borderRadius: '9999px' },\n  } as Record<string, CSSProperties>,\n  size: {\n    sm: {\n      wrapper: { minHeight: '2rem' },\n      input: {\n        padding: '0.5rem 0.75rem',\n        lineHeight: '1rem',\n        fontSize: '0.75rem',\n      },\n      label: {\n        fontSize: '0.75rem',\n        lineHeight: '1rem',\n        marginBottom: '0.25rem',\n      },\n      description: {\n        fontSize: '0.75rem',\n        lineHeight: '1rem',\n        marginTop: '0.25rem',\n      },\n      error: {\n        fontSize: '0.75rem',\n        lineHeight: '1rem',\n        marginTop: '0.25rem',\n      },\n    } as Record<string, CSSProperties>,\n    md: {\n      wrapper: { minHeight: '2.5rem' },\n      input: {\n        padding: '0.5rem 0.75rem',\n        lineHeight: '1.25rem',\n        fontSize: '0.875rem',\n      },\n      label: {\n        fontSize: '0.875rem',\n        lineHeight: '1.25rem',\n        marginBottom: '0.375rem',\n      },\n      description: {\n        fontSize: '0.75rem',\n        lineHeight: '1rem',\n        marginTop: '0.375rem',\n      },\n      error: {\n        fontSize: '0.75rem',\n        lineHeight: '1rem',\n        marginTop: '0.375rem',\n      },\n    } as Record<string, CSSProperties>,\n    lg: {\n      wrapper: { minHeight: '3rem' },\n      input: {\n        padding: '0.75rem 1rem',\n        lineHeight: '1.5rem',\n        fontSize: '1rem',\n        width: '16rem',\n      },\n      label: {\n        fontSize: '0.875rem',\n        lineHeight: '1.25rem',\n        marginBottom: '0.5rem',\n      },\n      description: {\n        fontSize: '0.875rem',\n        lineHeight: '1.25rem',\n        marginTop: '0.5rem',\n      },\n      error: {\n        fontSize: '0.875rem',\n        lineHeight: '1.25rem',\n        marginTop: '0.5rem',\n      },\n    } as Record<string, CSSProperties>,\n  },\n  variant: {\n    bordered: {\n      wrapper: { border: '1px solid var(--px-border-primary)' },\n      input: {\n        backgroundColor: 'transparent',\n        color: 'var(--px-text-primary)',\n        '::placeholder': {\n          color: 'var(--px-text-secondary)',\n        },\n      },\n      label: { color: 'var(--px-text-primary)' },\n      button: { color: 'var(--px-text-secondary)', ':hover': { color: 'var(--px-text-primary)' } },\n    } as Record<string, CSSProperties>,\n  },\n  state: {\n    default: {\n      input: {},\n      ring: {\n        boxShadow: '0 0 0 2px var(--px-color-info)',\n      },\n    },\n    invalid: {\n      wrapper: {\n        borderColor: 'var(--px-color-invalid)',\n        __rules: {\n          '&:focus-within': {\n            boxShadow: '0 0 0 1px var(--px-background), 0 0 0 3px var(--px-color-invalid)',\n          },\n        },\n      },\n      input: {\n        color: 'var(--px-color-invalid)',\n      },\n      error: {\n        color: 'var(--px-color-invalid)',\n      },\n    },\n\n    disabled: {\n      wrapper: {\n        opacity: 0.6,\n        cursor: 'not-allowed',\n        backgroundColor: '#f9fafb',\n      },\n      input: {\n        cursor: 'not-allowed',\n      },\n      label: {\n        cursor: 'not-allowed',\n      },\n    },\n  } as Record<string, Partial<StyleMap>>,\n}\n\nexport function createInputStyles(props: InputProps): StyleMap {\n  const {\n    size = 'md',\n    variant = 'bordered',\n    radius = 'md',\n    isDisabled = false,\n    isInvalid = false,\n    focusedRingColor,\n  } = props\n\n  const focusRingColor = focusedRingColor || 'var(--px-color-info)'\n\n  return {\n    wrapper: {\n      position: 'relative',\n      display: 'flex',\n      alignItems: 'center',\n\n      ...(INPUT_STYLES.size[size]?.wrapper ?? {}),\n      ...(INPUT_STYLES.variant[variant]?.wrapper ?? {}),\n      ...(INPUT_STYLES.radius[radius] ?? {}),\n\n      __rules: {\n        '&:focus-within': {\n          boxShadow: `0 0 0 1px var(--px-background), 0 0 0 3px ${focusRingColor}`,\n        },\n      },\n\n      ...(isDisabled ? INPUT_STYLES.state.disabled.wrapper : {}),\n      ...(isInvalid ? INPUT_STYLES.state.invalid.wrapper : {}),\n    },\n\n    input: {\n      flex: 1,\n      backgroundColor: 'transparent',\n      outline: 'none',\n      width: '100%',\n\n      ...(INPUT_STYLES.size[size]?.input ?? {}),\n\n      ...(INPUT_STYLES.variant[variant]?.input ?? {}),\n      ...(INPUT_STYLES.state.default.input ?? {}),\n\n      ...(isDisabled ? INPUT_STYLES.state.disabled.input : {}),\n      ...(isInvalid ? INPUT_STYLES.state.invalid.input : {}),\n    },\n\n    label: {\n      ...(INPUT_STYLES.size[size]?.label ?? {}),\n      ...(INPUT_STYLES.variant[variant]?.label ?? {}),\n\n      ...(isDisabled ? INPUT_STYLES.state.disabled.label : {}),\n    },\n\n    error: {\n      display: 'block',\n\n      ...(INPUT_STYLES.size[size]?.error ?? {}),\n      ...(INPUT_STYLES.state.invalid.error ?? {}),\n    },\n\n    button: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      padding: '0.25rem',\n      cursor: 'pointer',\n\n      ...(INPUT_STYLES.variant[variant]?.button ?? {}),\n      ...(INPUT_STYLES.radius[radius] ?? {}),\n\n      ...(isDisabled ? { cursor: 'not-allowed', opacity: 0.5 } : {}),\n    },\n\n    startContent: {\n      display: 'flex',\n      alignItems: 'center',\n      padding: '0.25rem',\n    },\n  }\n}\n","// External Libraries\nimport { useId, useMemo } from 'react'\n\n// Components\nimport { Label } from '../../Label'\nimport { Icon } from '@components/toolkit/Icon'\n\n// Types\nimport type { InputProps } from './types'\n\n// Hooks\nimport { useInput } from './hooks/useInput'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createInputStyles, INPUT_STYLES } from './styles'\n\nexport const Input = (props: InputProps) => {\n  // Hooks\n  const {\n    id,\n    type,\n    label,\n    width,\n    fullWidth,\n    required,\n    isDisabled,\n    minLength,\n    maxLength,\n    placeholder,\n    requiredColor,\n    labelColor,\n    labelWeight,\n    labelVariant,\n    startContent,\n    endContent,\n    errorMessage,\n    onChange,\n    value,\n    defaultValue,\n    size,\n    radius,\n    variant,\n    isInvalid,\n    ...nativeInputProps\n  } = props\n\n  const {\n    inputRef,\n    currentValue,\n    showPassword,\n    handleChange,\n    togglePasswordVisibility,\n  } = useInput({\n    size,\n    value,\n    radius,\n    variant,\n    isInvalid,\n    fullWidth,\n    isDisabled,\n    defaultValue,\n    onChange,\n  })\n\n  // Constants\n  const reactId = useId()\n  const inputId = useMemo(() => {\n    return id || `input-${reactId}`\n  }, [id, reactId])\n  const containerWidth = getWidth()\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(props, createInputStyles, {\n    pick: p => [\n      p.size,\n      p.variant,\n      p.radius,\n      p.isDisabled,\n      p.isInvalid,\n      p.focusedRingColor,\n    ],\n    override: props.styles,\n    applyCommonProps: true,\n  })\n\n  // Functions\n  function getType() {\n    if (type === 'password' && showPassword) return 'text'\n    return type\n  }\n\n  function getWidth() {\n    if (fullWidth) return { width: '100%' }\n    if (width) return INPUT_STYLES.width[width] || { width: 'auto' }\n    return { width: 'auto' }\n  }\n\n  function renderLabel() {\n    if (!label) return null\n\n    return (\n      <div className=\"flex items-center gap-3\">\n        <Label\n          htmlFor={inputId}\n          label={label}\n          required={required}\n          styles={{ label: styles.label }}\n          requiredColor={requiredColor}\n          labelColor={labelColor}\n          labelWeight={labelWeight}\n          labelVariant={labelVariant}\n        />\n      </div>\n    )\n  }\n\n  function renderEndContent() {\n    return (\n      <>\n        {type === 'password' ? (\n          <button\n            type=\"button\"\n            style={styles.button}\n            onClick={togglePasswordVisibility}\n          >\n            {showPassword ? (\n              <Icon name={'general-eye-off'} />\n            ) : (\n              <Icon name={'general-eye'} />\n            )}\n          </button>\n        ) : (\n          endContent\n        )}\n      </>\n    )\n  }\n\n  return (\n    <div style={containerWidth}>\n      {renderLabel()}\n      <div style={styles.wrapper} className={classes.wrapper}>\n        {startContent && <div style={styles.startContent}>{startContent}</div>}\n        <div style={{ flex: 1 }}>\n          <input\n            ref={inputRef}\n            id={inputId}\n            type={getType()}\n            value={currentValue}\n            style={styles.input}\n            className={classes.input}\n            disabled={isDisabled}\n            minLength={minLength}\n            maxLength={maxLength}\n            placeholder={placeholder ?? 'Digite aqui...'}\n            onChange={handleChange}\n            {...nativeInputProps}\n          />\n        </div>\n        {renderEndContent() && <div>{renderEndContent()}</div>}\n      </div>\n\n      {errorMessage ? <div style={styles.error}>{errorMessage}</div> : null}\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/{TabSwitch-COP-ySAl.js → TabSwitch-Bewsxeqz.js}

@@ -1,6 +1,6 @@
-import { n as useThemedStyles, t as Typography } from "./Typography-DRln739F.js";
-import { motion } from "framer-motion";
+import { n as useThemedStyles, t as Typography } from "./Typography-CTfrQCqI.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
 
 //#region src/components/toolkit/TabSwitch/components/TabSwitchItem/styles.ts
 function createTabSwitchItemStyles({ variant, disabled, selected, selectedColor }) {
@@ -123,4 +123,4 @@ const TabSwitch = (props) => {
 
 //#endregion
 export { TabSwitch as t };
-//# sourceMappingURL=TabSwitch-COP-ySAl.js.map
+//# sourceMappingURL=TabSwitch-Bewsxeqz.js.map

package/dist/{TabSwitch-COP-ySAl.js.map → TabSwitch-Bewsxeqz.js.map}

@@ -1 +1 @@
-{"version":3,"file":"TabSwitch-COP-ySAl.js","names":[],"sources":["../src/components/toolkit/TabSwitch/components/TabSwitchItem/styles.ts","../src/components/toolkit/TabSwitch/components/TabSwitchItem/index.tsx","../src/components/toolkit/TabSwitch/styles.ts","../src/components/toolkit/TabSwitch/index.tsx"],"sourcesContent":["// External Libraries\nimport type { StyleMap } 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): StyleMap {\n  const accent = selectedColor ?? 'var(--px-color-primary)'\n\n  return {\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/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 type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createTabSwitchStyles<T>(props: TabSwitchProps<T>): StyleMap {\n  const { fitContent } = props\n\n  return {\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-primaryder, #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.fitContent, p.selectedLabelColor, p.variant],\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,iBACmB;CACnB,MAAM,SAAS,iBAAiB;AAEhC,QAAO;EACL,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;;;;;AC3BH,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,OAAoC;CAC3E,MAAM,EAAE,eAAe;AAEvB,QAAO,EACL,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;;;;;ACJH,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;IAAC,EAAE;IAAY,EAAE;IAAoB,EAAE;IAAQ;GAC1D,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-Bewsxeqz.js","names":[],"sources":["../src/components/toolkit/TabSwitch/components/TabSwitchItem/styles.ts","../src/components/toolkit/TabSwitch/components/TabSwitchItem/index.tsx","../src/components/toolkit/TabSwitch/styles.ts","../src/components/toolkit/TabSwitch/index.tsx"],"sourcesContent":["// External Libraries\nimport type { StyleMap } 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): StyleMap {\n  const accent = selectedColor ?? 'var(--px-color-primary)'\n\n  return {\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/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 type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createTabSwitchStyles<T>(props: TabSwitchProps<T>): StyleMap {\n  const { fitContent } = props\n\n  return {\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-primaryder, #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.fitContent, p.selectedLabelColor, p.variant],\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,iBACmB;CACnB,MAAM,SAAS,iBAAiB;AAEhC,QAAO;EACL,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;;;;;AC3BH,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,OAAoC;CAC3E,MAAM,EAAE,eAAe;AAEvB,QAAO,EACL,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;;;;;ACJH,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;IAAC,EAAE;IAAY,EAAE;IAAoB,EAAE;IAAQ;GAC1D,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/{ThemeContext-DiTV3IJz.js → ThemeContext-BAcoPRJ-.js}

@@ -80,6 +80,7 @@ const defaultThemes = {
 			success: "#0EB24C",
 			warning: "#f59e0b",
 			error: "#ef4444",
+			invalid: "#f87171",
 			info: "#06b6d4",
 			background: {
 				primary: "#FFFFFF",
@@ -89,16 +90,15 @@ const defaultThemes = {
 				}
 			},
 			button: {
-				primary: {
+				filled: {
 					label: "#FFFFFF",
-					background: "#003566",
-					disabled_background: "#FFFFFF"
+					background: "#0EB24C"
 				},
-				secondary: {
-					label: "#FFFFFF",
-					background: "#5A595B",
-					disabled_background: "#FFFFFF"
-				}
+				outlined: {
+					label: "#0EB24C",
+					borderColor: "#0EB24C"
+				},
+				ghost: { label: "#6C6C6C" }
 			},
 			surface: "#FBFBFB",
 			border: {
@@ -128,6 +128,7 @@ const defaultThemes = {
 			success: "#0EB24C",
 			warning: "#f59e0b",
 			error: "#ef4444",
+			invalid: "#f87171",
 			info: "#06b6d4",
 			background: {
 				primary: "#090909",
@@ -137,16 +138,15 @@ const defaultThemes = {
 				}
 			},
 			button: {
-				primary: {
+				filled: {
 					label: "#FFFFFF",
-					background: "#003566",
-					disabled_background: "#FFFFFF"
+					background: "#0EB24C"
 				},
-				secondary: {
-					label: "#FFFFFF",
-					background: "#5A595B",
-					disabled_background: "#FFFFFF"
-				}
+				outlined: {
+					label: "#0EB24C",
+					borderColor: "#0EB24C"
+				},
+				ghost: { label: "#6C6C6C" }
 			},
 			surface: "#090909",
 			border: {
@@ -359,16 +359,24 @@ function themeToCssVars(theme) {
 		"--px-color-success": theme.colors.success,
 		"--px-color-warning": theme.colors.warning,
 		"--px-color-error": theme.colors.error,
+		"--px-color-invalid": theme.colors.invalid,
 		"--px-color-info": theme.colors.info,
+		"--px-scrollbar": theme.colors.scrollbar,
 		"--px-bg": theme.colors.background.primary,
 		"--px-surface": theme.colors.surface,
 		"--px-background-card-primary": theme.colors.background.card.primary,
+		"--px-background-card-secondary": theme.colors.background.card.secondary,
 		"--px-border-primary": theme.colors.border.primary,
 		"--px-border-secondary": theme.colors.border.secondary,
 		"--px-text-primary": theme.colors.text.primary,
 		"--px-text-secondary": theme.colors.text.secondary,
 		"--px-text-disabled": theme.colors.text.disabled,
 		"--px-text-inverse": theme.colors.text.inverse,
+		"--px-btn-filled-bg": theme.colors.button.filled.background,
+		"--px-btn-filled-label": theme.colors.button.filled.label,
+		"--px-btn-outlined-border": theme.colors.button.outlined.borderColor,
+		"--px-btn-outlined-label": theme.colors.button.outlined.label,
+		"--px-btn-ghost-label": theme.colors.button.ghost.label,
 		"--px-space-xs": theme.spacing.xs,
 		"--px-space-sm": theme.spacing.sm,
 		"--px-space-md": theme.spacing.md,
@@ -548,4 +556,4 @@ function useTheme() {
 
 //#endregion
 export { useTheme as n, ThemeProvider as t };
-//# sourceMappingURL=ThemeContext-DiTV3IJz.js.map
+//# sourceMappingURL=ThemeContext-BAcoPRJ-.js.map