softable-pixels-web 1.2.39 → 1.2.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,6 @@
1
1
  import { n as styled, t as useThemedStyles } from "./useThemedStyles-Dco_54KA.js";
2
2
  import { t as Typography } from "./Typography-CcQTHV-F.js";
3
- import { t as Switch } from "./Switch-D3Eitmnj.js";
3
+ import { t as Switch } from "./Switch-BQhkSPJw.js";
4
4
  import { t as BasePopover } from "./BasePopover-CY-9StFD.js";
5
5
  import { useEffect, useMemo, useRef, useState } from "react";
6
6
  import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -325,4 +325,4 @@ const ContextMenu = (props) => {
325
325
 
326
326
  //#endregion
327
327
  export { types_exports as n, ContextMenu as t };
328
- //# sourceMappingURL=ContextMenu-_72bEVKL.js.map
328
+ //# sourceMappingURL=ContextMenu-CG3Anq1A.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ContextMenu-_72bEVKL.js","names":["floatingOptions: FloatingOptions","DividerRow: React.FC"],"sources":["../src/components/commons/toolkit/ContextMenu/components/Menu/components/ItemRow/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/components/ItemRow/index.tsx","../src/components/commons/toolkit/ContextMenu/components/Menu/components/CustomRow/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/components/CustomRow/index.tsx","../src/components/commons/toolkit/ContextMenu/components/Menu/components/DividerRow/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/components/DividerRow/index.tsx","../src/components/commons/toolkit/ContextMenu/components/Menu/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/index.tsx","../src/components/commons/toolkit/ContextMenu/utils/normalizeMenuOptions.ts","../src/components/commons/toolkit/ContextMenu/types.ts","../src/components/commons/toolkit/ContextMenu/styles.ts","../src/components/commons/toolkit/ContextMenu/index.tsx"],"sourcesContent":["// Types\nimport type { ItemRowProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createItemRowStyles<T>({ item, active }: ItemRowProps<T>) {\n return styled({\n button: {\n width: '100%',\n textAlign: 'left',\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n\n gap: '0.5rem',\n borderRadius: '0.5rem',\n paddingInline: '0.5rem',\n paddingBlock: '0.25rem',\n\n userSelect: 'none',\n cursor: item.disabled ? 'not-allowed' : 'pointer',\n\n backgroundColor:\n item.disabled || active\n ? 'var(--px-background-card-hover)'\n : 'transparent',\n\n __rules: {\n '&:hover': {\n transition: 'all 200ms',\n backgroundColor: 'var(--px-background-card-hover) !important'\n }\n }\n },\n containerIcon: {\n width: '1rem',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center'\n }\n })\n}\n","// External Libraries\nimport { type MouseEvent, useEffect, useRef, useState } from 'react'\n\n// Components\nimport { Menu } from '../..'\nimport { Switch } from '@components/commons/toolkit/Switch'\nimport { Typography } from '@components/commons/toolkit/Typography'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ItemRowProps } from './types'\nimport type { FloatingOptions } from '@hooks/useFloating/types'\n\n// Styles\nimport { createItemRowStyles } from './styles'\n\nexport const ItemRow = <T extends string>(props: ItemRowProps<T>) => {\n const { item, depth, width, onHover, onSelect } = props\n const isGroup = item.type === 'group'\n\n const [subOpen, setSubOpen] = useState(false)\n const closeTimer = useRef<number | null>(null)\n const anchorRef = useRef<HTMLButtonElement | null>(null)\n const floatingOptions: FloatingOptions = {\n offsetX: 10,\n offsetY: -4,\n strategy: 'fixed',\n keepInViewport: true,\n placement: 'right-start'\n }\n\n // Hooks\n const { styles, classes } = useThemedStyles(props, createItemRowStyles, {\n applyCommonProps: true,\n override: props.styles,\n pick: p => [p.active]\n })\n\n // Functions\n function handleMouseEnter() {\n onHover(item.id, isGroup)\n\n if (!isGroup) return\n clearTimer()\n setSubOpen(true)\n }\n\n function handleMouseLeave() {\n if (!isGroup) return\n scheduleClose()\n }\n\n function handleClick(e?: MouseEvent<HTMLButtonElement>) {\n e?.stopPropagation()\n e?.preventDefault()\n if (isGroup) return\n onSelect(item)\n }\n\n function clearTimer() {\n if (closeTimer.current) window.clearTimeout(closeTimer.current)\n closeTimer.current = null\n }\n\n function scheduleClose() {\n clearTimer()\n closeTimer.current = window.setTimeout(() => setSubOpen(false), 150)\n }\n\n function renderMenuType() {\n if (item.type === 'switch') {\n return (\n <Switch\n fitContent\n checked={item.checked}\n onChange={() => handleClick()}\n />\n )\n } else {\n return (\n <>\n {item.shortcut ? <span>{item.shortcut}</span> : null}\n\n {isGroup ? <span>›</span> : null}\n </>\n )\n }\n }\n\n // UseEffects\n // biome-ignore lint/correctness/useExhaustiveDependencies: <Not needed>\n useEffect(() => {\n return () => clearTimer()\n }, [])\n\n return (\n <>\n <button\n ref={anchorRef}\n type=\"button\"\n role=\"menuitem\"\n style={styles.button}\n className={classes.button}\n disabled={!!item.disabled}\n aria-disabled={item.disabled || undefined}\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n {item.icon ? (\n <span style={styles.containerIcon}>{item.icon ?? null}</span>\n ) : null}\n\n <Typography variant=\"b2\">{item.label}</Typography>\n\n {renderMenuType()}\n </button>\n\n {isGroup ? (\n <BasePopover\n // biome-ignore lint/suspicious/noExplicitAny: <Not needed>\n anchorRef={anchorRef as any}\n open={subOpen}\n closeOnEscape={false}\n closeOnOutsideClick={false}\n floatingOptions={floatingOptions}\n dismissScope={props.dismissScope}\n onMouseEnter={() => {\n clearTimer()\n setSubOpen(true)\n }}\n onMouseLeave={() => {\n scheduleClose()\n }}\n onOpenChange={setSubOpen}\n >\n <Menu\n width={width}\n depth={depth + 1}\n activeId={undefined}\n items={item.children}\n onHover={onHover}\n onSelect={onSelect}\n />\n </BasePopover>\n ) : null}\n </>\n )\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createCustomRowStyles() {\n return styled({\n container: {\n padding: '0.25rem'\n }\n })\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CustomRowProps } from './types'\n\n// Styles\nimport { createCustomRowStyles } from './styles'\n\nexport const CustomRow = <T extends string>(props: CustomRowProps<T>) => {\n const { item, close } = props\n\n // Hooks\n const { styles } = useThemedStyles(props, createCustomRowStyles)\n\n return <div style={styles.container}>{item.render({ close })}</div>\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createDividerRowStyles() {\n return styled({\n container: {\n border: 0,\n display: 'flex',\n marginBlock: '0.1rem',\n borderTop: '1px solid var(--px-border-primary)'\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createDividerRowStyles } from './styles'\n\nexport const DividerRow: React.FC = props => {\n // Hooks\n const { styles } = useThemedStyles(props, createDividerRowStyles)\n\n return <hr style={styles.container} />\n}\n","// Types\nimport type { MenuProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createMenuStyles<T>({ width }: MenuProps<T>) {\n return styled({\n container: {\n width,\n flexShrink: 0\n }\n })\n}\n","// Components\nimport { ItemRow } from './components/ItemRow'\nimport { CustomRow } from './components/CustomRow'\nimport { DividerRow } from './components/DividerRow'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { MenuProps } from './types'\n\n// Styles\nimport { createMenuStyles } from './styles'\n\nexport const Menu = <T extends string>(props: MenuProps<T>) => {\n const { items, depth, activeId, width = 240, onHover, onSelect } = props\n\n const { styles } = useThemedStyles(props, createMenuStyles, {\n applyCommonProps: true,\n override: props.styles,\n pick: p => [p.items, p.width, p.activeId, p.onSelect, p.onHover]\n })\n\n // Functions\n function renderItems() {\n return items.map(item => {\n if (item.type === 'divider') return <DividerRow key={item.id} />\n if (item.type === 'custom')\n return <CustomRow key={item.id} item={item} close={close} />\n\n return (\n <ItemRow\n key={item.id}\n item={item}\n depth={depth}\n width={width}\n active={activeId === item.id}\n dismissScope={props.dismissScope}\n onHover={onHover}\n onSelect={onSelect}\n />\n )\n })\n }\n\n return (\n <div style={styles.container} role={depth === 0 ? 'menu' : undefined}>\n {renderItems()}\n </div>\n )\n}\n","// Types\nimport type { MenuOption, MenuOptionInput } from '../types'\n\nexport function normalizeMenuOptions<T>(\n options: MenuOptionInput<T>[]\n): MenuOption<T>[] {\n return options.map(opt => {\n if ('children' in opt) {\n return {\n id: opt.id,\n label: opt.label,\n icon: opt.icon,\n shortcut: opt.shortcut,\n disabled: opt.disabled,\n className: opt.className,\n type: 'group' as const,\n children: normalizeMenuOptions(opt.children)\n }\n }\n return opt as MenuOption<T>\n })\n}\n","// External Libraries\nimport type { ReactNode } from 'react'\n\n// Hooks\nimport type { Placement } from '@hooks/useFloating/types'\n\n// Styles\nimport type { createContextMenuStyles } from './styles'\n\n// Types\nimport type { TypeStyles } from '@hooks/useThemedStyles/types'\n\ninterface BaseOption<T> {\n id: T\n icon?: ReactNode\n label?: ReactNode\n disabled?: boolean\n className?: string\n shortcut?: ReactNode\n closeOnSelect?: boolean\n}\n\nexport type MenuActionOption<T> = BaseOption<T> & {\n type: 'action'\n closeOnSelect?: boolean\n}\n\nexport type MenuSwitchOption<T> = BaseOption<T> & {\n type: 'switch'\n checked: boolean\n closeOnSelect?: boolean\n onCheckedChange: (next: boolean) => void\n}\n\nexport interface MenuDividerOption<T> {\n id: T\n type: 'divider'\n}\n\nexport interface MenuCustomOption<T> extends BaseOption<T> {\n type: 'custom'\n render: (ctx: { close: () => void }) => ReactNode\n}\n\nexport interface MenuGroupInput<T> extends BaseOption<T> {\n type?: 'group'\n children: MenuOptionInput<T>[]\n}\n\nexport type MenuOptionInput<T> =\n | MenuGroupInput<T>\n | MenuActionOption<T>\n | MenuSwitchOption<T>\n | MenuCustomOption<T>\n | MenuDividerOption<T>\n\nexport interface MenuGroup<T> extends BaseOption<T> {\n type: 'group'\n children: MenuOption<T>[]\n}\n\nexport type MenuOption<T> =\n | MenuGroup<T>\n | MenuActionOption<T>\n | MenuSwitchOption<T>\n | MenuCustomOption<T>\n | MenuDividerOption<T>\n\nexport interface ContextMenuProps<T> {\n trigger: ReactNode\n options: MenuOptionInput<T>[]\n\n offsetX?: number\n offsetY?: number\n columnWidth?: number\n placement?: Placement\n\n onSelect: (actionId: T) => void\n\n styles?: TypeStyles<typeof createContextMenuStyles>\n}\n","// Types\nimport type { ContextMenuProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createContextMenuStyles<T>(_props: ContextMenuProps<T>) {\n return styled({\n trigger: {\n width: 'fit-content',\n height: 'fit-content',\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n cursor: 'pointer'\n }\n })\n}\n","// External Libraries\nimport { useMemo, useRef, useState } from 'react'\n\n// Components\nimport { Menu } from './components/Menu'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { normalizeMenuOptions } from './utils'\n\n// Types\nimport type { ContextMenuProps, MenuOption } from './types'\nimport type { PopoverTriggerRenderProps } from '../Popover/types'\n\nexport * as ContextMenuTypes from './types'\n\n// Styles\nimport { createContextMenuStyles } from './styles'\n\nexport const ContextMenu = <T extends string>(props: ContextMenuProps<T>) => {\n const {\n trigger,\n options,\n offsetX = 0,\n offsetY = 8,\n columnWidth = 240,\n placement = 'bottom-start',\n onSelect\n } = props\n\n // Refs\n const scopeRef = useRef<string>(makeScopeId())\n\n // States\n const [open, setOpen] = useState(false)\n\n const items = useMemo(() => normalizeMenuOptions(options), [options])\n const floatingOptions = useMemo(\n () => ({\n offsetX,\n offsetY,\n placement\n }),\n [offsetX, offsetY, placement]\n )\n\n // Hooks\n const { styles } = useThemedStyles(props, createContextMenuStyles, {\n applyCommonProps: true,\n override: props.styles,\n pick: p => [p.options, p.columnWidth, p.placement]\n })\n\n // Functions\n function makeScopeId() {\n if (typeof crypto !== 'undefined' && crypto.randomUUID)\n return crypto.randomUUID()\n return `scope_${Math.random().toString(16).slice(2)}`\n }\n\n function handleSelect(item: MenuOption<T>, close: () => void) {\n if (item.type === 'action') {\n onSelect(item.id)\n if (item.closeOnSelect ?? true) close()\n }\n\n if (item.type === 'switch') {\n item.onCheckedChange(!item.checked)\n if (item.closeOnSelect ?? false) close()\n }\n }\n\n function renderTrigger({\n ref,\n ariaExpanded,\n onClick\n }: PopoverTriggerRenderProps) {\n return (\n // biome-ignore lint/a11y/noStaticElementInteractions: <Not needed>\n // biome-ignore lint/a11y/useKeyWithClickEvents: <Not needed>\n <span\n ref={ref as any}\n style={styles.trigger}\n aria-expanded={ariaExpanded}\n onClick={onClick}\n >\n {trigger}\n </span>\n )\n }\n\n return (\n <BasePopover\n open={open}\n minWidth=\"fit-content\"\n floatingOptions={floatingOptions}\n dismissScope={scopeRef.current}\n trigger={renderTrigger}\n onOpenChange={setOpen}\n >\n <Menu\n depth={0}\n items={items}\n onHover={() => {}}\n width={columnWidth}\n dismissScope={scopeRef.current}\n onSelect={item =>\n handleSelect(item as MenuOption<T>, () => setOpen(false))\n }\n />\n </BasePopover>\n )\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"ContextMenu-CG3Anq1A.js","names":["floatingOptions: FloatingOptions","DividerRow: React.FC"],"sources":["../src/components/commons/toolkit/ContextMenu/components/Menu/components/ItemRow/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/components/ItemRow/index.tsx","../src/components/commons/toolkit/ContextMenu/components/Menu/components/CustomRow/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/components/CustomRow/index.tsx","../src/components/commons/toolkit/ContextMenu/components/Menu/components/DividerRow/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/components/DividerRow/index.tsx","../src/components/commons/toolkit/ContextMenu/components/Menu/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/index.tsx","../src/components/commons/toolkit/ContextMenu/utils/normalizeMenuOptions.ts","../src/components/commons/toolkit/ContextMenu/types.ts","../src/components/commons/toolkit/ContextMenu/styles.ts","../src/components/commons/toolkit/ContextMenu/index.tsx"],"sourcesContent":["// Types\nimport type { ItemRowProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createItemRowStyles<T>({ item, active }: ItemRowProps<T>) {\n return styled({\n button: {\n width: '100%',\n textAlign: 'left',\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n\n gap: '0.5rem',\n borderRadius: '0.5rem',\n paddingInline: '0.5rem',\n paddingBlock: '0.25rem',\n\n userSelect: 'none',\n cursor: item.disabled ? 'not-allowed' : 'pointer',\n\n backgroundColor:\n item.disabled || active\n ? 'var(--px-background-card-hover)'\n : 'transparent',\n\n __rules: {\n '&:hover': {\n transition: 'all 200ms',\n backgroundColor: 'var(--px-background-card-hover) !important'\n }\n }\n },\n containerIcon: {\n width: '1rem',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center'\n }\n })\n}\n","// External Libraries\nimport { type MouseEvent, useEffect, useRef, useState } from 'react'\n\n// Components\nimport { Menu } from '../..'\nimport { Switch } from '@components/commons/toolkit/Switch'\nimport { Typography } from '@components/commons/toolkit/Typography'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ItemRowProps } from './types'\nimport type { FloatingOptions } from '@hooks/useFloating/types'\n\n// Styles\nimport { createItemRowStyles } from './styles'\n\nexport const ItemRow = <T extends string>(props: ItemRowProps<T>) => {\n const { item, depth, width, onHover, onSelect } = props\n const isGroup = item.type === 'group'\n\n const [subOpen, setSubOpen] = useState(false)\n const closeTimer = useRef<number | null>(null)\n const anchorRef = useRef<HTMLButtonElement | null>(null)\n const floatingOptions: FloatingOptions = {\n offsetX: 10,\n offsetY: -4,\n strategy: 'fixed',\n keepInViewport: true,\n placement: 'right-start'\n }\n\n // Hooks\n const { styles, classes } = useThemedStyles(props, createItemRowStyles, {\n applyCommonProps: true,\n override: props.styles,\n pick: p => [p.active]\n })\n\n // Functions\n function handleMouseEnter() {\n onHover(item.id, isGroup)\n\n if (!isGroup) return\n clearTimer()\n setSubOpen(true)\n }\n\n function handleMouseLeave() {\n if (!isGroup) return\n scheduleClose()\n }\n\n function handleClick(e?: MouseEvent<HTMLButtonElement>) {\n e?.stopPropagation()\n e?.preventDefault()\n if (isGroup) return\n onSelect(item)\n }\n\n function clearTimer() {\n if (closeTimer.current) window.clearTimeout(closeTimer.current)\n closeTimer.current = null\n }\n\n function scheduleClose() {\n clearTimer()\n closeTimer.current = window.setTimeout(() => setSubOpen(false), 150)\n }\n\n function renderMenuType() {\n if (item.type === 'switch') {\n return (\n <Switch\n fitContent\n checked={item.checked}\n onChange={() => handleClick()}\n />\n )\n } else {\n return (\n <>\n {item.shortcut ? <span>{item.shortcut}</span> : null}\n\n {isGroup ? <span>›</span> : null}\n </>\n )\n }\n }\n\n // UseEffects\n // biome-ignore lint/correctness/useExhaustiveDependencies: <Not needed>\n useEffect(() => {\n return () => clearTimer()\n }, [])\n\n return (\n <>\n <button\n ref={anchorRef}\n type=\"button\"\n role=\"menuitem\"\n style={styles.button}\n className={classes.button}\n disabled={!!item.disabled}\n aria-disabled={item.disabled || undefined}\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n {item.icon ? (\n <span style={styles.containerIcon}>{item.icon ?? null}</span>\n ) : null}\n\n <Typography variant=\"b2\">{item.label}</Typography>\n\n {renderMenuType()}\n </button>\n\n {isGroup ? (\n <BasePopover\n // biome-ignore lint/suspicious/noExplicitAny: <Not needed>\n anchorRef={anchorRef as any}\n open={subOpen}\n closeOnEscape={false}\n closeOnOutsideClick={false}\n floatingOptions={floatingOptions}\n dismissScope={props.dismissScope}\n onMouseEnter={() => {\n clearTimer()\n setSubOpen(true)\n }}\n onMouseLeave={() => {\n scheduleClose()\n }}\n onOpenChange={setSubOpen}\n >\n <Menu\n width={width}\n depth={depth + 1}\n activeId={undefined}\n items={item.children}\n onHover={onHover}\n onSelect={onSelect}\n />\n </BasePopover>\n ) : null}\n </>\n )\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createCustomRowStyles() {\n return styled({\n container: {\n padding: '0.25rem'\n }\n })\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CustomRowProps } from './types'\n\n// Styles\nimport { createCustomRowStyles } from './styles'\n\nexport const CustomRow = <T extends string>(props: CustomRowProps<T>) => {\n const { item, close } = props\n\n // Hooks\n const { styles } = useThemedStyles(props, createCustomRowStyles)\n\n return <div style={styles.container}>{item.render({ close })}</div>\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createDividerRowStyles() {\n return styled({\n container: {\n border: 0,\n display: 'flex',\n marginBlock: '0.1rem',\n borderTop: '1px solid var(--px-border-primary)'\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createDividerRowStyles } from './styles'\n\nexport const DividerRow: React.FC = props => {\n // Hooks\n const { styles } = useThemedStyles(props, createDividerRowStyles)\n\n return <hr style={styles.container} />\n}\n","// Types\nimport type { MenuProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createMenuStyles<T>({ width }: MenuProps<T>) {\n return styled({\n container: {\n width,\n flexShrink: 0\n }\n })\n}\n","// Components\nimport { ItemRow } from './components/ItemRow'\nimport { CustomRow } from './components/CustomRow'\nimport { DividerRow } from './components/DividerRow'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { MenuProps } from './types'\n\n// Styles\nimport { createMenuStyles } from './styles'\n\nexport const Menu = <T extends string>(props: MenuProps<T>) => {\n const { items, depth, activeId, width = 240, onHover, onSelect } = props\n\n const { styles } = useThemedStyles(props, createMenuStyles, {\n applyCommonProps: true,\n override: props.styles,\n pick: p => [p.items, p.width, p.activeId, p.onSelect, p.onHover]\n })\n\n // Functions\n function renderItems() {\n return items.map(item => {\n if (item.type === 'divider') return <DividerRow key={item.id} />\n if (item.type === 'custom')\n return <CustomRow key={item.id} item={item} close={close} />\n\n return (\n <ItemRow\n key={item.id}\n item={item}\n depth={depth}\n width={width}\n active={activeId === item.id}\n dismissScope={props.dismissScope}\n onHover={onHover}\n onSelect={onSelect}\n />\n )\n })\n }\n\n return (\n <div style={styles.container} role={depth === 0 ? 'menu' : undefined}>\n {renderItems()}\n </div>\n )\n}\n","// Types\nimport type { MenuOption, MenuOptionInput } from '../types'\n\nexport function normalizeMenuOptions<T>(\n options: MenuOptionInput<T>[]\n): MenuOption<T>[] {\n return options.map(opt => {\n if ('children' in opt) {\n return {\n id: opt.id,\n label: opt.label,\n icon: opt.icon,\n shortcut: opt.shortcut,\n disabled: opt.disabled,\n className: opt.className,\n type: 'group' as const,\n children: normalizeMenuOptions(opt.children)\n }\n }\n return opt as MenuOption<T>\n })\n}\n","// External Libraries\nimport type { ReactNode } from 'react'\n\n// Hooks\nimport type { Placement } from '@hooks/useFloating/types'\n\n// Styles\nimport type { createContextMenuStyles } from './styles'\n\n// Types\nimport type { TypeStyles } from '@hooks/useThemedStyles/types'\n\ninterface BaseOption<T> {\n id: T\n icon?: ReactNode\n label?: ReactNode\n disabled?: boolean\n className?: string\n shortcut?: ReactNode\n closeOnSelect?: boolean\n}\n\nexport type MenuActionOption<T> = BaseOption<T> & {\n type: 'action'\n closeOnSelect?: boolean\n}\n\nexport type MenuSwitchOption<T> = BaseOption<T> & {\n type: 'switch'\n checked: boolean\n closeOnSelect?: boolean\n onCheckedChange: (next: boolean) => void\n}\n\nexport interface MenuDividerOption<T> {\n id: T\n type: 'divider'\n}\n\nexport interface MenuCustomOption<T> extends BaseOption<T> {\n type: 'custom'\n render: (ctx: { close: () => void }) => ReactNode\n}\n\nexport interface MenuGroupInput<T> extends BaseOption<T> {\n type?: 'group'\n children: MenuOptionInput<T>[]\n}\n\nexport type MenuOptionInput<T> =\n | MenuGroupInput<T>\n | MenuActionOption<T>\n | MenuSwitchOption<T>\n | MenuCustomOption<T>\n | MenuDividerOption<T>\n\nexport interface MenuGroup<T> extends BaseOption<T> {\n type: 'group'\n children: MenuOption<T>[]\n}\n\nexport type MenuOption<T> =\n | MenuGroup<T>\n | MenuActionOption<T>\n | MenuSwitchOption<T>\n | MenuCustomOption<T>\n | MenuDividerOption<T>\n\nexport interface ContextMenuProps<T> {\n trigger: ReactNode\n options: MenuOptionInput<T>[]\n\n offsetX?: number\n offsetY?: number\n columnWidth?: number\n placement?: Placement\n\n onSelect: (actionId: T) => void\n\n styles?: TypeStyles<typeof createContextMenuStyles>\n}\n","// Types\nimport type { ContextMenuProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createContextMenuStyles<T>(_props: ContextMenuProps<T>) {\n return styled({\n trigger: {\n width: 'fit-content',\n height: 'fit-content',\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n cursor: 'pointer'\n }\n })\n}\n","// External Libraries\nimport { useMemo, useRef, useState } from 'react'\n\n// Components\nimport { Menu } from './components/Menu'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { normalizeMenuOptions } from './utils'\n\n// Types\nimport type { ContextMenuProps, MenuOption } from './types'\nimport type { PopoverTriggerRenderProps } from '../Popover/types'\n\nexport * as ContextMenuTypes from './types'\n\n// Styles\nimport { createContextMenuStyles } from './styles'\n\nexport const ContextMenu = <T extends string>(props: ContextMenuProps<T>) => {\n const {\n trigger,\n options,\n offsetX = 0,\n offsetY = 8,\n columnWidth = 240,\n placement = 'bottom-start',\n onSelect\n } = props\n\n // Refs\n const scopeRef = useRef<string>(makeScopeId())\n\n // States\n const [open, setOpen] = useState(false)\n\n const items = useMemo(() => normalizeMenuOptions(options), [options])\n const floatingOptions = useMemo(\n () => ({\n offsetX,\n offsetY,\n placement\n }),\n [offsetX, offsetY, placement]\n )\n\n // Hooks\n const { styles } = useThemedStyles(props, createContextMenuStyles, {\n applyCommonProps: true,\n override: props.styles,\n pick: p => [p.options, p.columnWidth, p.placement]\n })\n\n // Functions\n function makeScopeId() {\n if (typeof crypto !== 'undefined' && crypto.randomUUID)\n return crypto.randomUUID()\n return `scope_${Math.random().toString(16).slice(2)}`\n }\n\n function handleSelect(item: MenuOption<T>, close: () => void) {\n if (item.type === 'action') {\n onSelect(item.id)\n if (item.closeOnSelect ?? true) close()\n }\n\n if (item.type === 'switch') {\n item.onCheckedChange(!item.checked)\n if (item.closeOnSelect ?? false) close()\n }\n }\n\n function renderTrigger({\n ref,\n ariaExpanded,\n onClick\n }: PopoverTriggerRenderProps) {\n return (\n // biome-ignore lint/a11y/noStaticElementInteractions: <Not needed>\n // biome-ignore lint/a11y/useKeyWithClickEvents: <Not needed>\n <span\n ref={ref as any}\n style={styles.trigger}\n aria-expanded={ariaExpanded}\n onClick={onClick}\n >\n {trigger}\n </span>\n )\n }\n\n return (\n <BasePopover\n open={open}\n minWidth=\"fit-content\"\n floatingOptions={floatingOptions}\n dismissScope={scopeRef.current}\n trigger={renderTrigger}\n onOpenChange={setOpen}\n >\n <Menu\n depth={0}\n items={items}\n onHover={() => {}}\n width={columnWidth}\n dismissScope={scopeRef.current}\n onSelect={item =>\n handleSelect(item as MenuOption<T>, () => setOpen(false))\n }\n />\n </BasePopover>\n )\n}\n"],"mappings":"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"}
@@ -3,14 +3,15 @@ import { t as Typography } from "./Typography-CcQTHV-F.js";
3
3
  import { jsx, jsxs } from "react/jsx-runtime";
4
4
 
5
5
  //#region src/components/commons/toolkit/Switch/styles.ts
6
- function createSwitchThumbStyles({ checked, fitContent, colorActive, colorInactive, colorIndicator }) {
6
+ function createSwitchThumbStyles({ checked, disabled, fitContent, colorActive, colorInactive, colorIndicator }) {
7
7
  return styled({
8
8
  wrapper: {
9
9
  width: fitContent ? "fit-content" : "100%",
10
10
  display: "flex",
11
11
  alignItems: "center",
12
12
  justifyContent: "space-between",
13
- columnGap: "0.5rem"
13
+ columnGap: "0.5rem",
14
+ opacity: disabled ? .5 : 1
14
15
  },
15
16
  container: {
16
17
  width: "2.5rem",
@@ -21,6 +22,7 @@ function createSwitchThumbStyles({ checked, fitContent, colorActive, colorInacti
21
22
  marginLeft: "0.5rem",
22
23
  borderRadius: "2rem",
23
24
  padding: "0.125rem",
25
+ cursor: disabled ? "not-allowed" : "pointer",
24
26
  transition: "background-color 0.5s",
25
27
  backgroundColor: checked ? colorActive ?? "var(--px-color-success)" : colorInactive ?? "var(--px-color-disabled)"
26
28
  },
@@ -45,9 +47,10 @@ const Switch = (props) => {
45
47
  const { label, checked, onChange } = props;
46
48
  const { styles } = useThemedStyles(props, createSwitchThumbStyles, {
47
49
  applyCommonProps: true,
48
- pick: (p) => [p.checked]
50
+ pick: (p) => [p.checked, p.disabled]
49
51
  });
50
52
  function handleChange(e) {
53
+ if (props.disabled) return;
51
54
  e.stopPropagation();
52
55
  e.preventDefault();
53
56
  onChange?.(!checked);
@@ -68,4 +71,4 @@ const Switch = (props) => {
68
71
 
69
72
  //#endregion
70
73
  export { Switch as t };
71
- //# sourceMappingURL=Switch-D3Eitmnj.js.map
74
+ //# sourceMappingURL=Switch-BQhkSPJw.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Switch-BQhkSPJw.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'\n\nexport function createSwitchThumbStyles({\n checked,\n disabled,\n fitContent,\n colorActive,\n colorInactive,\n colorIndicator\n}: SwitchThumbProps) {\n return styled({\n wrapper: {\n width: fitContent ? 'fit-content' : '100%',\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n\n columnGap: '0.5rem',\n opacity: disabled ? 0.5 : 1\n },\n container: {\n width: '2.5rem',\n height: '1.5rem',\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 cursor: disabled ? 'not-allowed' : 'pointer',\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: '1.25rem',\n width: '1.25rem',\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(1rem)' : 'translateX(0)',\n willChange: 'transform'\n }\n })\n}\n","// External Libraries\n/** biome-ignore-all lint/a11y/noStaticElementInteractions: Not Needed */\n/** biome-ignore-all lint/a11y/useKeyWithClickEvents: Not Needed */\nimport type React from 'react'\nimport type { MouseEvent } from 'react'\n\n// Components\nimport { Typography } from '../Typography'\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 const { label, checked, onChange } = props\n\n // Hooks\n const { styles } = useThemedStyles(props, createSwitchThumbStyles, {\n applyCommonProps: true,\n pick: p => [p.checked, p.disabled]\n })\n\n // Functions\n function handleChange(e: MouseEvent<HTMLSpanElement>) {\n if (props.disabled) return\n\n e.stopPropagation()\n e.preventDefault()\n\n onChange?.(!checked)\n }\n\n return (\n <div style={styles.wrapper}>\n {label ? (\n <Typography variant=\"b2\" color=\"var(px-text-primary)\">\n {label}\n </Typography>\n ) : null}\n\n <span style={styles.container} onClick={handleChange}>\n <span style={styles.indicator} />\n </span>\n </div>\n )\n}\n"],"mappings":";;;;;AAMA,SAAgB,wBAAwB,EACtC,SACA,UACA,YACA,aACA,eACA,kBACmB;AACnB,QAAO,OAAO;EACZ,SAAS;GACP,OAAO,aAAa,gBAAgB;GAEpC,SAAS;GACT,YAAY;GACZ,gBAAgB;GAEhB,WAAW;GACX,SAAS,WAAW,KAAM;GAC3B;EACD,WAAW;GACT,OAAO;GACP,QAAQ;GAER,UAAU;GAEV,SAAS;GACT,YAAY;GACZ,YAAY;GAEZ,cAAc;GACd,SAAS;GACT,QAAQ,WAAW,gBAAgB;GAEnC,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,qBAAqB;GAC1C,YAAY;GACb;EACF,CAAC;;;;;AC1CJ,MAAaA,UAAqC,UAAS;CACzD,MAAM,EAAE,OAAO,SAAS,aAAa;CAGrC,MAAM,EAAE,WAAW,gBAAgB,OAAO,yBAAyB;EACjE,kBAAkB;EAClB,OAAM,MAAK,CAAC,EAAE,SAAS,EAAE,SAAS;EACnC,CAAC;CAGF,SAAS,aAAa,GAAgC;AACpD,MAAI,MAAM,SAAU;AAEpB,IAAE,iBAAiB;AACnB,IAAE,gBAAgB;AAElB,aAAW,CAAC,QAAQ;;AAGtB,QACE,qBAAC;EAAI,OAAO,OAAO;aAChB,QACC,oBAAC;GAAW,SAAQ;GAAK,OAAM;aAC5B;IACU,GACX,MAEJ,oBAAC;GAAK,OAAO,OAAO;GAAW,SAAS;aACtC,oBAAC,UAAK,OAAO,OAAO,YAAa;IAC5B;GACH"}
@@ -1,2 +1,2 @@
1
- import { n as types_d_exports, t as ContextMenu } from "./index-Bo6Mz8jJ.js";
1
+ import { n as types_d_exports, t as ContextMenu } from "./index-R4SFv1ug.js";
2
2
  export { ContextMenu, types_d_exports as ContextMenuTypes };
@@ -1,10 +1,10 @@
1
1
  import "./useThemedStyles-Dco_54KA.js";
2
2
  import "./Typography-CcQTHV-F.js";
3
- import "./Switch-D3Eitmnj.js";
3
+ import "./Switch-BQhkSPJw.js";
4
4
  import "./useDismiss-Dpzg5Xpf.js";
5
5
  import "./useFloating-D-2IDIWG.js";
6
6
  import "./Popover-BV_1hBez.js";
7
7
  import "./BasePopover-CY-9StFD.js";
8
- import { n as types_exports, t as ContextMenu } from "./ContextMenu-_72bEVKL.js";
8
+ import { n as types_exports, t as ContextMenu } from "./ContextMenu-CG3Anq1A.js";
9
9
 
10
10
  export { ContextMenu, types_exports as ContextMenuTypes };
@@ -5,6 +5,7 @@ interface SwitchThumbProps {
5
5
  fitContent?: boolean;
6
6
  label?: string;
7
7
  checked: boolean;
8
+ disabled?: boolean;
8
9
  colorIndicator?: string;
9
10
  colorActive?: string;
10
11
  colorInactive?: string;
@@ -15,4 +16,4 @@ interface SwitchThumbProps {
15
16
  declare const Switch: React.FC<SwitchThumbProps>;
16
17
  //#endregion
17
18
  export { Switch as t };
18
- //# sourceMappingURL=index-DoLWDzDX.d.ts.map
19
+ //# sourceMappingURL=index-DjfLWx6f.d.ts.map
@@ -1,6 +1,6 @@
1
1
  import { a as TextProps } from "./styleProps-Bq2PkDym.js";
2
2
  import { r as TypeStyles } from "./useThemedStyles-DoHwc6h5.js";
3
- import * as react_jsx_runtime1 from "react/jsx-runtime";
3
+ import * as react_jsx_runtime0 from "react/jsx-runtime";
4
4
 
5
5
  //#region src/components/commons/inputs/TextArea/styles.d.ts
6
6
  declare function createTextAreaStyles(props: TextAreaProps): {
@@ -67,7 +67,7 @@ interface TextAreaProps {
67
67
  }
68
68
  //#endregion
69
69
  //#region src/components/commons/inputs/TextArea/index.d.ts
70
- declare const TextArea: (props: TextAreaProps) => react_jsx_runtime1.JSX.Element;
70
+ declare const TextArea: (props: TextAreaProps) => react_jsx_runtime0.JSX.Element;
71
71
  //#endregion
72
72
  export { TextArea as t };
73
- //# sourceMappingURL=index-D6on4J-S.d.ts.map
73
+ //# sourceMappingURL=index-Q90gI7Q2.d.ts.map
@@ -1,7 +1,7 @@
1
1
  import { r as TypeStyles } from "./useThemedStyles-DoHwc6h5.js";
2
2
  import { n as Placement } from "./types-CsM6b8c5.js";
3
3
  import { ReactNode } from "react";
4
- import * as react_jsx_runtime0 from "react/jsx-runtime";
4
+ import * as react_jsx_runtime1 from "react/jsx-runtime";
5
5
 
6
6
  //#region src/components/commons/toolkit/ContextMenu/styles.d.ts
7
7
  declare function createContextMenuStyles<T>(_props: ContextMenuProps<T>): {
@@ -68,7 +68,7 @@ interface ContextMenuProps<T> {
68
68
  }
69
69
  //#endregion
70
70
  //#region src/components/commons/toolkit/ContextMenu/index.d.ts
71
- declare const ContextMenu: <T extends string>(props: ContextMenuProps<T>) => react_jsx_runtime0.JSX.Element;
71
+ declare const ContextMenu: <T extends string>(props: ContextMenuProps<T>) => react_jsx_runtime1.JSX.Element;
72
72
  //#endregion
73
73
  export { types_d_exports as n, ContextMenu as t };
74
- //# sourceMappingURL=index-Bo6Mz8jJ.d.ts.map
74
+ //# sourceMappingURL=index-R4SFv1ug.d.ts.map
package/dist/index.d.ts CHANGED
@@ -10,7 +10,7 @@ import { t as Input } from "./index-qPJuO65u.js";
10
10
  import { t as SearchInput } from "./index-MyZ_XVsH.js";
11
11
  import { n as types_d_exports$6, t as Select } from "./index-j6W-PwB7.js";
12
12
  import { t as index_d_exports } from "./index-CriBmhqv.js";
13
- import { t as TextArea } from "./index-D6on4J-S.js";
13
+ import { t as TextArea } from "./index-Q90gI7Q2.js";
14
14
  import { t as Popover } from "./index-tivXt3ba.js";
15
15
  import { t as BasePopover } from "./index-BKsKKh1p.js";
16
16
  import { t as Breadcrumb } from "./index-CBHEtmuG.js";
@@ -20,11 +20,11 @@ import { t as Checkbox } from "./index-DlP2AWaD.js";
20
20
  import { r as types_d_exports } from "./types-Db3dpdVw.js";
21
21
  import { Chip } from "./chip.js";
22
22
  import { t as ChipList } from "./index-CdGHX8AR.js";
23
- import { n as types_d_exports$2, t as ContextMenu } from "./index-Bo6Mz8jJ.js";
23
+ import { n as types_d_exports$2, t as ContextMenu } from "./index-R4SFv1ug.js";
24
24
  import { InfoSummary, InfoSummaryItem, InfoSummaryProps } from "./info-summary.js";
25
25
  import { t as Pagination } from "./index-D5kC89SC.js";
26
26
  import { ScrollPaginationContainer } from "./scroll-pagination-container.js";
27
- import { t as Switch } from "./index-DoLWDzDX.js";
27
+ import { t as Switch } from "./index-DjfLWx6f.js";
28
28
  import { n as types_d_exports$7, t as TabSwitch } from "./index-BQRzf4rc.js";
29
29
  import { Typography } from "./typography.js";
30
30
  import { a as ThemeName, c as ThemeRegistry, i as ThemeMode, l as ThemeTokens, n as useTheme, o as ThemePersistence, r as ThemeContextData, s as ThemeProviderProps, t as ThemeProvider } from "./index-DPmfBsga.js";
package/dist/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import "./useThemedStyles-Dco_54KA.js";
2
2
  import { t as Typography } from "./Typography-CcQTHV-F.js";
3
- import { t as Switch } from "./Switch-D3Eitmnj.js";
3
+ import { t as Switch } from "./Switch-BQhkSPJw.js";
4
4
  import { t as useDismiss } from "./useDismiss-Dpzg5Xpf.js";
5
5
  import { t as useFloating } from "./useFloating-D-2IDIWG.js";
6
6
  import { n as types_exports$5, t as Popover } from "./Popover-BV_1hBez.js";
@@ -13,7 +13,7 @@ import { n as types_exports$8, t as TabSwitch } from "./TabSwitch-UPXOZTf4.js";
13
13
  import { t as CheckItem } from "./CheckItem-CE27veSs.js";
14
14
  import { t as InfoSummary } from "./InfoSummary-D8x-t44q.js";
15
15
  import { t as BasePopover } from "./BasePopover-CY-9StFD.js";
16
- import { n as types_exports$2, t as ContextMenu } from "./ContextMenu-_72bEVKL.js";
16
+ import { n as types_exports$2, t as ContextMenu } from "./ContextMenu-CG3Anq1A.js";
17
17
  import { n as types_exports, t as Chip } from "./Chip-0yO5bwim.js";
18
18
  import "./Label-CBUa-x13.js";
19
19
  import "./ErrorMessage-6pG4hFId.js";
package/dist/switch.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { t as Switch } from "./index-DoLWDzDX.js";
1
+ import { t as Switch } from "./index-DjfLWx6f.js";
2
2
  export { Switch };
package/dist/switch.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import "./useThemedStyles-Dco_54KA.js";
2
2
  import "./Typography-CcQTHV-F.js";
3
- import { t as Switch } from "./Switch-D3Eitmnj.js";
3
+ import { t as Switch } from "./Switch-BQhkSPJw.js";
4
4
 
5
5
  export { Switch };
@@ -1,2 +1,2 @@
1
- import { t as TextArea } from "./index-D6on4J-S.js";
1
+ import { t as TextArea } from "./index-Q90gI7Q2.js";
2
2
  export { TextArea };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "softable-pixels-web",
3
- "version": "1.2.39",
3
+ "version": "1.2.40",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "author": "softable",
@@ -1 +0,0 @@
1
- {"version":3,"file":"Switch-D3Eitmnj.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'\n\nexport function createSwitchThumbStyles({\n checked,\n fitContent,\n colorActive,\n colorInactive,\n colorIndicator\n}: SwitchThumbProps) {\n return styled({\n wrapper: {\n width: fitContent ? 'fit-content' : '100%',\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n\n columnGap: '0.5rem'\n },\n container: {\n width: '2.5rem',\n height: '1.5rem',\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: '1.25rem',\n width: '1.25rem',\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(1rem)' : 'translateX(0)',\n willChange: 'transform'\n }\n })\n}\n","// External Libraries\n/** biome-ignore-all lint/a11y/noStaticElementInteractions: Not Needed */\n/** biome-ignore-all lint/a11y/useKeyWithClickEvents: Not Needed */\nimport type React from 'react'\nimport type { MouseEvent } from 'react'\n\n// Components\nimport { Typography } from '../Typography'\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 const { label, checked, onChange } = props\n\n // Hooks\n const { styles } = useThemedStyles(props, createSwitchThumbStyles, {\n applyCommonProps: true,\n pick: p => [p.checked]\n })\n\n // Functions\n function handleChange(e: MouseEvent<HTMLSpanElement>) {\n e.stopPropagation()\n e.preventDefault()\n\n onChange?.(!checked)\n }\n\n return (\n <div style={styles.wrapper}>\n {label ? (\n <Typography variant=\"b2\" color=\"var(px-text-primary)\">\n {label}\n </Typography>\n ) : null}\n\n <span style={styles.container} onClick={handleChange}>\n <span style={styles.indicator} />\n </span>\n </div>\n )\n}\n"],"mappings":";;;;;AAMA,SAAgB,wBAAwB,EACtC,SACA,YACA,aACA,eACA,kBACmB;AACnB,QAAO,OAAO;EACZ,SAAS;GACP,OAAO,aAAa,gBAAgB;GAEpC,SAAS;GACT,YAAY;GACZ,gBAAgB;GAEhB,WAAW;GACZ;EACD,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,qBAAqB;GAC1C,YAAY;GACb;EACF,CAAC;;;;;ACvCJ,MAAaA,UAAqC,UAAS;CACzD,MAAM,EAAE,OAAO,SAAS,aAAa;CAGrC,MAAM,EAAE,WAAW,gBAAgB,OAAO,yBAAyB;EACjE,kBAAkB;EAClB,OAAM,MAAK,CAAC,EAAE,QAAQ;EACvB,CAAC;CAGF,SAAS,aAAa,GAAgC;AACpD,IAAE,iBAAiB;AACnB,IAAE,gBAAgB;AAElB,aAAW,CAAC,QAAQ;;AAGtB,QACE,qBAAC;EAAI,OAAO,OAAO;aAChB,QACC,oBAAC;GAAW,SAAQ;GAAK,OAAM;aAC5B;IACU,GACX,MAEJ,oBAAC;GAAK,OAAO,OAAO;GAAW,SAAS;aACtC,oBAAC,UAAK,OAAO,OAAO,YAAa;IAC5B;GACH"}