50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T2d56,"use client" import * as React from "react" import { Switch as SwitchPrimitive } from "@base-ui/react/switch" import { IconCheck } from "@tabler/icons-react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "cn" import { Spinner } from "@/components/ui/spinner" import { prefersReducedMotion } from "@/lib/motion" const switchVariants = cva( "group/switch peer relative inline-flex h-(--switch-h) w-(--switch-w) shrink-0 cursor-pointer items-center rounded-full bg-foreground/20 p-0.5 transition-[background-color,box-shadow] duration-200 ease-out-quint outline-none select-none [--switch-dir:1] [--switch-stretch:0px] [--switch-thumb-w:var(--switch-thumb)] [--switch-x:0px] after:absolute after:-inset-1.5 focus-visible:ring-3 focus-visible:ring-focus-ring focus-visible:outline-hidden aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-dragging:[--switch-x:var(--switch-drag)] data-invalid:ring-3 data-invalid:ring-destructive/20 data-pending:cursor-progress data-readonly:cursor-default data-[drag=off]:bg-foreground/20 data-[drag=on]:bg-primary data-shake:motion-safe:animate-button-shake rtl:[--switch-dir:-1] dark:bg-foreground/25 dark:data-[drag=off]:bg-foreground/25 dark:data-[drag=on]:bg-primary forced-colors:border pointer-coarse:after:-inset-3 data-checked:bg-primary data-checked:[--switch-x:calc(var(--switch-w)-var(--switch-thumb-w)-4px-var(--switch-stretch))] dark:data-checked:bg-primary forced-colors:data-checked:bg-highlight data-disabled:cursor-not-allowed data-disabled:opacity-50 [&:active:not([data-disabled]):not([data-readonly]):not([data-pending])]:[--switch-stretch:4px]", { variants: { variant: { default: "", ios: "bg-foreground/10 inset-ring-(length:--hairline) inset-ring-foreground/5 [--switch-thumb-w:calc(var(--switch-thumb)*1.5)] data-[drag=off]:bg-foreground/10 data-[drag=on]:bg-success dark:bg-foreground/20 dark:data-[drag=off]:bg-foreground/20 dark:data-[drag=on]:bg-success forced-colors:border data-checked:bg-success data-checked:inset-ring-transparent dark:data-checked:bg-success", }, size: { sm: "[--switch-h:1rem] [--switch-thumb:0.75rem] [--switch-w:1.75rem]", default: "[--switch-h:1.25rem] [--switch-thumb:1rem] [--switch-w:2.25rem]", lg: "[--switch-h:1.5rem] [--switch-thumb:1.25rem] [--switch-w:2.75rem]", }, }, compoundVariants: [ { variant: "ios", size: "sm", className: "[--switch-h:1.5rem] [--switch-thumb:1.25rem] [--switch-w:3.5rem]", }, { variant: "ios", size: "default", className: "[--switch-h:1.75rem] [--switch-thumb:1.5rem] [--switch-w:4rem]", }, { variant: "ios", size: "lg", className: "[--switch-h:2rem] [--switch-thumb:1.75rem] [--switch-w:4.5rem]", }, ], defaultVariants: { variant: "default", size: "default", }, } ) type SwitchProps = Omit & VariantProps & { icons?: boolean onCheckedChange?: ( checked: boolean, eventDetails: SwitchPrimitive.Root.ChangeEventDetails ) => unknown } function isThenable(value: unknown): value is PromiseLike { return ( typeof value === "object" && value !== null && typeof (value as PromiseLike).then === "function" ) } function useThumbDrag( rootRef: React.RefObject, canDrag: () => boolean ) { const drag = React.useRef<{ id: number startX: number from: boolean max: number moved: boolean position: number } | null>(null) const suppressClick = React.useRef(false) const pendingToggle = React.useRef(false) const onPointerDown = (event: React.PointerEvent) => { const root = rootRef.current if (!root || event.button !== 0 || !canDrag()) { return } drag.current = { id: event.pointerId, startX: event.clientX, from: root.hasAttribute("data-checked"), max: 0, moved: false, position: 0, } } const onPointerMove = (event: React.PointerEvent) => { const state = drag.current const root = rootRef.current if (!state || !root || event.pointerId !== state.id) { return } const rtl = getComputedStyle(root).direction === "rtl" const delta = (event.clientX - state.startX) * (rtl ? -1 : 1) if (!state.moved && Math.abs(delta) < 3) { return } if (!state.moved) { const thumb = root.querySelector("[data-slot=switch-thumb]") state.max = Math.max(0, root.clientWidth - (thumb?.offsetWidth ?? 0) - 4) state.moved = true root.setPointerCapture?.(event.pointerId) root.setAttribute("data-dragging", "") } const base = state.from ? state.max : 0 state.position = Math.min(state.max, Math.max(0, base + delta)) root.setAttribute( "data-drag", state.position > state.max / 2 ? "on" : "off" ) root.style.setProperty("--switch-drag", `${state.position}px`) } const finish = (event: React.PointerEvent) => { const state = drag.current const root = rootRef.current drag.current = null if (!state || !root || !state.moved) { return } root.removeAttribute("data-dragging") root.removeAttribute("data-drag") root.style.removeProperty("--switch-drag") if (root.hasPointerCapture?.(event.pointerId)) { root.releasePointerCapture(event.pointerId) } const to = state.position > state.max / 2 suppressClick.current = true pendingToggle.current = to !== state.from && event.type === "pointerup" setTimeout(() => { suppressClick.current = false if (pendingToggle.current) { pendingToggle.current = false root.click() } }, 0) } const onClickCapture = (event: React.MouseEvent) => { if (suppressClick.current) { event.preventDefault() event.stopPropagation() } } return { onPointerDown, onPointerMove, onPointerUp: finish, onPointerCancel: finish, onClickCapture, } } function Switch({ className, size = "default", variant = "default", icons = false, checked: checkedProp, defaultChecked = false, onCheckedChange, disabled, readOnly, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onClickCapture, onAnimationEnd, ref, ...props }: SwitchProps) { const rootRef = React.useRef(null) const [internal, setInternal] = React.useState(defaultChecked) const [pending, setPending] = React.useState(false) const controlled = checkedProp !== undefined const checked = controlled ? checkedProp : internal const latest = React.useRef(0) const blocked = Boolean(disabled || readOnly || pending) const dragHandlers = useThumbDrag(rootRef, () => !blocked) const setRef = React.useCallback( (node: HTMLElement | null) => { rootRef.current = node if (typeof ref === "function") { return ref(node) } if (ref) { ref.current = node } return undefined }, [ref] ) const handleChange = ( next: boolean, details: SwitchPrimitive.Root.ChangeEventDetails ) => { if (pending) { details.cancel() return } if (!controlled) { setInternal(next) } const result = onCheckedChange?.(next, details) if (!isThenable(result)) { return } const id = ++latest.current setPending(true) Promise.resolve(result).then( () => { if (latest.current === id) { setPending(false) } }, () => { if (latest.current !== id) { return } setPending(false) if (!controlled) { setInternal(!next) } const root = rootRef.current if (root && !prefersReducedMotion()) { root.removeAttribute("data-shake") void root.offsetWidth root.setAttribute("data-shake", "") } } ) } return ( cn( switchVariants({ variant, size }), typeof className === "function" ? className(state) : className ) } onPointerDown={(event) => { onPointerDown?.(event) if (!event.defaultPrevented) { dragHandlers.onPointerDown(event) } }} onPointerMove={(event) => { onPointerMove?.(event) dragHandlers.onPointerMove(event) }} onPointerUp={(event) => { onPointerUp?.(event) dragHandlers.onPointerUp(event) }} onPointerCancel={(event) => { onPointerCancel?.(event) dragHandlers.onPointerCancel(event) }} onClickCapture={(event) => { onClickCapture?.(event) dragHandlers.onClickCapture(event) }} onAnimationEnd={(event) => { onAnimationEnd?.(event) if (event.target === event.currentTarget) { event.currentTarget.removeAttribute("data-shake") } }} {...props} data-slot="switch" > {icons ? ( ) } export { Switch, switchVariants } export type { SwitchProps } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react@^1.8.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react@^1.8.0"}]]}]}],["$","li","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tabler/icons-react"}]]}]}],["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}]]}]}],["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"cn"}]]}]}]]}],["$","$L50",null,{"namespace":"@hextaui","registryDependencies":["https://hextaui.com/r/theme.json","https://hextaui.com/r/motion.json","https://hextaui.com/r/spinner.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/switch.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]