draft-components 3.5.0 → 4.0.0

package/dist/components/password-input/password-input.js

@@ -1,18 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useState } from 'react';
+import { useState } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 import { TextInput } from '../text-input/index.js';
 import { Tooltip } from '../tooltip/index.js';
 import { EyeIcon } from '../hero-icons/24/outline/eye-icon.js';
 import { EyeSlashIcon } from '../hero-icons/24/outline/eye-slash-icon.js';
 import { Spinner } from '../spinner/index.js';
+import { Button } from '../button/index.js';
 const getDefaultTooltipText = (visible) => (visible
     ? 'Hide password'
     : 'Show password');
 const renderToggleButtonDefaultIcon = (visible) => (visible
-    ? _jsx(EyeIcon, { width: "1.25em", height: "1.25em" })
-    : _jsx(EyeSlashIcon, { width: "1.25em", height: "1.25em" }));
-export const PasswordInput = forwardRef(function PasswordInput({ className, loading = false, defaultVisible = false, getTooltipText = getDefaultTooltipText, renderToggleButtonIcon = renderToggleButtonDefaultIcon, onClickToggleButton, ...props }, ref) {
+    ? _jsx(EyeSlashIcon, { width: "1.25em", height: "1.25em" })
+    : _jsx(EyeIcon, { width: "1.25em", height: "1.25em" }));
+export function PasswordInput({ className, loading = false, defaultVisible = false, getTooltipText = getDefaultTooltipText, renderToggleButtonIcon = renderToggleButtonDefaultIcon, onClickToggleButton, ...props }) {
     const [visible, setVisible] = useState(defaultVisible);
     const handleClickToggleButton = (event) => {
         setVisible(!visible);
@@ -20,7 +21,8 @@ export const PasswordInput = forwardRef(function PasswordInput({ className, load
             onClickToggleButton(event);
         }
     };
-    return (_jsx(TextInput, { ...props, ref: ref, className: classNames('dc-password-input', className), type: visible ? 'text' : 'password', readOnly: loading ?? props.readOnly, slotRight: () => (_jsx(Tooltip, { content: getTooltipText(visible), children: _jsx("button", { className: "dc-password-input__toggle-button", type: "button", disabled: loading, onClick: handleClickToggleButton, children: loading
+    return (_jsx(TextInput, { ...props, className: classNames('dc-password-input', className), type: visible ? 'text' : 'password', readOnly: loading ?? props.readOnly, slotRight: () => (_jsx(Tooltip, { title: getTooltipText(visible), children: (props) => (_jsx(Button, { ...props, className: "dc-password-input__toggle-button", buttonStyle: "plain", onClick: handleClickToggleButton, children: loading
                     ? _jsx(Spinner, { width: "1.15em" })
-                    : renderToggleButtonIcon(visible) }) })) }));
-});
+                    : renderToggleButtonIcon(visible) })) })) }));
+}
+//# sourceMappingURL=password-input.js.map

package/dist/components/password-input/password-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-input.js","sourceRoot":"","sources":["../../../src/components/password-input/password-input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0C,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAuB,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC1E,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAY5C,MAAM,qBAAqB,GAAG,CAAC,OAAgB,EAAE,EAAE,CAAC,CAAC,OAAO;IAC1D,CAAC,CAAC,eAAe;IACjB,CAAC,CAAC,eAAe,CAAC,CAAC;AAErB,MAAM,6BAA6B,GAAG,CAAC,OAAgB,EAAE,EAAE,CAAC,CAAC,OAAO;IAClE,CAAC,CAAC,KAAC,YAAY,IAAC,KAAK,EAAC,QAAQ,EAAC,MAAM,EAAC,QAAQ,GAAG;IACjD,CAAC,CAAC,KAAC,OAAO,IAAC,KAAK,EAAC,QAAQ,EAAC,MAAM,EAAC,QAAQ,GAAG,CAAC,CAAC;AAEhD,MAAM,UAAU,aAAa,CAAC,EAC5B,SAAS,EACT,OAAO,GAAG,KAAK,EACf,cAAc,GAAG,KAAK,EACtB,cAAc,GAAG,qBAAqB,EACtC,sBAAsB,GAAG,6BAA6B,EACtD,mBAAmB,EACnB,GAAG,KAAK,EACW;IACnB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEvD,MAAM,uBAAuB,GAAyC,CAAC,KAAK,EAAE,EAAE;QAC9E,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC;QACrB,IAAI,OAAO,mBAAmB,KAAK,UAAU,EAAE,CAAC;YAC9C,mBAAmB,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,OACJ,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC,EACrD,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,EACnC,QAAQ,EAAE,OAAO,IAAI,KAAK,CAAC,QAAQ,EACnC,SAAS,EAAE,GAAG,EAAE,CAAC,CACf,KAAC,OAAO,IAAC,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,YACpC,CAAC,KAAK,EAAE,EAAE,CAAC,CACV,KAAC,MAAM,OACD,KAAK,EACT,SAAS,EAAC,kCAAkC,EAC5C,WAAW,EAAC,OAAO,EACnB,OAAO,EAAE,uBAAuB,YAE/B,OAAO;oBACN,CAAC,CAAC,KAAC,OAAO,IAAC,KAAK,EAAC,QAAQ,GAAG;oBAC5B,CAAC,CAAC,sBAAsB,CAAC,OAAO,CAAC,GAC5B,CACV,GACO,CACX,GACD,CACH,CAAC;AACJ,CAAC"}

package/dist/components/popover/index.js

@@ -1 +1,2 @@
 export * from './popover.js';
+//# sourceMappingURL=index.js.map

package/dist/components/popover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/popover/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/components/popover/popover.css

@@ -1,98 +1,71 @@
 .dc-popover {
-  --dc-popover-text-color: var(--dc-primary-text-color);
-  --dc-popover-transition-duration: 100ms;
-  --dc-popover-bg: white;
-  --dc-popover-shadow:
-    0 0 0 1px rgb(var(--dc-black-rgb) / 7.5%),
+  --font: var(--dc-text-sm);
+  --padding: 12px 16px;
+  --color: var(--dc-text-color-primary);
+  --background: var(--dc-white);
+  --radius: 8px;
+  --shadow: 0 0 0 1px rgb(var(--dc-black-rgb) / 7.5%),
     0 -1px 0 0 rgb(var(--dc-black-rgb) / 5%),
     var(--dc-shadow-lg);
 
+  position: absolute;
   top: 0;
   left: 0;
   z-index: var(--dc-overlay-z-index);
   box-sizing: border-box;
-  padding: 1px;
+  width: -moz-max-content;
+  width: max-content;
+  padding: var(--padding);
+  overflow: auto;
+  font: var(--font);
+  color: var(--color);
   color-scheme: light;
+  scrollbar-width: thin;
+  background: var(--background);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
 }
 
-.dc-popover-modal {
-  box-sizing: border-box;
-  max-width: 448px;
-  padding: 12px 16px;
-  font: var(--dc-text-sm);
-  color: var(--dc-popover-text-color);
-  background: var(--dc-popover-bg);
-  border-radius: 8px;
-  box-shadow: var(--dc-popover-shadow);
-}
-
-.dc-popover_closed .dc-popover-modal {
-  opacity: 0;
-  transition: var(--dc-popover-transition-duration) ease;
-  transition-property: opacity, transform;
-  transform: scale(0.95);
-}
-
-.dc-popover_opened .dc-popover-modal {
-  opacity: 1;
-  transform: scale(1);
-}
-
-.dc-popover[data-position="top-start"] .dc-popover-modal {
-  transform-origin: bottom left;
-}
-
-.dc-popover[data-position="top-center"] .dc-popover-modal {
-  transform-origin: bottom center;
-}
+@keyframes dc-popover-enter {
+  from {
+    opacity: 0;
+  }
 
-.dc-popover[data-position="top-right"] .dc-popover-modal {
-  transform-origin: bottom left;
+  to {
+    opacity: 1;
+  }
 }
 
-.dc-popover[data-position="right-start"] .dc-popover-modal {
-  transform-origin: left top;
+.dc-popover[data-animation="enter"] {
+  animation: dc-popover-enter 50ms ease forwards;
 }
 
-.dc-popover[data-position="right-center"] .dc-popover-modal {
-  transform-origin: left center;
-}
-
-.dc-popover[data-position="right-right"] .dc-popover-modal {
-  transform-origin: left bottom;
-}
-
-.dc-popover[data-position="bottom-start"] .dc-popover-modal {
-  transform-origin: top left;
-}
+@keyframes dc-popover-leave {
+  from {
+    opacity: 1;
+  }
 
-.dc-popover[data-position="bottom-center"] .dc-popover-modal {
-  transform-origin: top center;
+  to {
+    opacity: 0;
+  }
 }
 
-.dc-popover[data-position="bottom-right"] .dc-popover-modal {
-  transform-origin: top left;
+.dc-popover[data-animation="leave"] {
+  animation: dc-popover-leave 50ms ease forwards;
 }
 
-.dc-popover[data-position="left-start"] .dc-popover-modal {
-  transform-origin: right top;
-}
-
-.dc-popover[data-position="left-center"] .dc-popover-modal {
-  transform-origin: right center;
-}
-
-.dc-popover[data-position="left-right"] .dc-popover-modal {
-  transform-origin: right bottom;
+@media (prefers-reduced-motion) {
+  .dc-popover[data-animation="enter"]
+  .dc-popover[data-animation="leave"] {
+    animation-duration: 0ms !important;
+  }
 }
 
 .dark .dc-popover,
 .dark.dc-popover {
-  --dc-popover-border-color: var(--dc-gray-700);
-  --dc-popover-bg: var(--dc-gray-800);
-  --dc-popover-shadow:
-    0 0 0 1px var(--dc-gray-700),
-    var(--dc-shadow-lg);
+  --border-color: var(--dc-neutral-700);
+  --background: var(--dc-neutral-800);
+  --shadow: 0 0 0 1px var(--dc-neutral-700), var(--dc-shadow-lg);
 
   color-scheme: dark;
 }

package/dist/components/popover/popover.d.ts

@@ -1,51 +1,30 @@
-import { ComponentPropsWithoutRef, ReactNode, RefCallback } from 'react';
-import { type PositionerProps } from '../positioner/index.js';
-export type PopoverRef = {
-    open(): void;
-    close(): void;
-    toggle(): void;
-};
-export type PopoverAnchorRenderFn = (props: {
-    ref: RefCallback<HTMLElement>;
-}, context: {
-    isOpen: boolean;
-    openPopover: () => void;
-    closePopover: () => void;
-    togglePopover: () => void;
-}) => ReactNode;
-type PopoverHTMLProps = ComponentPropsWithoutRef<'div'>;
-export type PopoverPlacement = PositionerProps['placement'];
-export type PopoverAlignment = PositionerProps['alignment'];
-export type PopoverOpenCallback = () => void;
-export type PopoverCloseCallback = () => void;
-export type PopoverProps = {
-    defaultIsOpen?: boolean;
-    isOpen?: boolean;
+import { type ElementPlacement } from '../../lib/calc-element-position.js';
+import { type ComponentProps, type JSX, type RefCallback, type RefObject } from 'react';
+export { type ElementPlacement as PopoverPlacement };
+export type PopoverCloseHandler = () => void;
+export type PopoverUnmountHandler = () => void;
+export type PopoverRenderAnchor = (props: {
+    ref: RefCallback<HTMLElement | null>;
+}) => JSX.Element;
+type PopoverHTMLProps = ComponentProps<'div'>;
+type PopoverCommonProps = {
+    placement?: ElementPlacement;
+    anchorPadding?: number;
+    viewportPadding?: number;
+    openAnimationDuration?: number;
+    closeAnimationDuration?: number;
     shouldTrapFocus?: boolean;
-    shouldFocusAnchorAfterEscPress?: boolean;
-    transitionDurationMs?: number;
-    anchorGap?: number;
-    viewportGap?: number;
-    placement?: PopoverPlacement;
-    alignment?: PopoverAlignment;
-    anchor: ReactNode | PopoverAnchorRenderFn;
-    children: ReactNode;
-    onOpen?: PopoverOpenCallback;
-    onClose?: PopoverCloseCallback;
-} & PopoverHTMLProps;
-export declare const Popover: import("react").ForwardRefExoticComponent<{
-    defaultIsOpen?: boolean;
+    shouldLockBodyScroll?: boolean;
+    shouldCloseOnEsc?: boolean;
+    shouldCloseOnClickOutside?: boolean;
     isOpen?: boolean;
-    shouldTrapFocus?: boolean;
-    shouldFocusAnchorAfterEscPress?: boolean;
-    transitionDurationMs?: number;
-    anchorGap?: number;
-    viewportGap?: number;
-    placement?: PopoverPlacement;
-    alignment?: PopoverAlignment;
-    anchor: ReactNode | PopoverAnchorRenderFn;
-    children: ReactNode;
-    onOpen?: PopoverOpenCallback;
-    onClose?: PopoverCloseCallback;
-} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<PopoverRef>>;
-export {};
+    onClose?: PopoverCloseHandler;
+    onUnmount?: PopoverUnmountHandler;
+};
+type PopoverBaseProps = PopoverCommonProps & ({
+    anchorRef: RefObject<HTMLElement | null>;
+} | {
+    renderAnchor: PopoverRenderAnchor;
+});
+export type PopoverProps = PopoverBaseProps & Omit<PopoverHTMLProps, keyof PopoverBaseProps>;
+export declare function Popover({ className, role, 'aria-modal': ariaModal, placement, anchorPadding, viewportPadding, shouldTrapFocus, shouldLockBodyScroll, shouldCloseOnEsc, shouldCloseOnClickOutside, children, isOpen, onClose, onUnmount, ...props }: PopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/popover/popover.js

@@ -1,91 +1,110 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cloneElement, forwardRef, useCallback, useImperativeHandle, useRef, useState, } from 'react';
-import { classNames, focusElement, isReactElementWithRef, mergeRefs } from '../../lib/react-helpers.js';
-import { useMountTransition } from '../../hooks/use-mount-transition.js';
-import { useEscKeyDown } from '../../hooks/use-esc-key-down.js';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames, tryToFocusElement } from '../../lib/react-helpers.js';
+import { observeElementMove } from '../../lib/observe-element-move.js';
+import { calcElementPosition } from '../../lib/calc-element-position.js';
+import { deleteKeys } from '../../lib/helpers.js';
+import { useRefCallback } from '../../hooks/use-ref-callback.js';
 import { useFocusTrap } from '../../hooks/use-focus-trap.js';
-import { usePageClick } from './use-page-click.js';
-import { Positioner, } from '../positioner/index.js';
-export const Popover = forwardRef(function Popover({ shouldTrapFocus = true, shouldFocusAnchorAfterEscPress = true, transitionDurationMs = 100, placement = 'bottom', alignment = 'start', anchorGap, viewportGap, anchor, className, children, onOpen, onClose, ...props }, ref) {
-    const [defaultIsOpen, setDefaultIsOpen] = useState(props.defaultIsOpen ?? false);
-    const anchorRef = useRef(null);
-    const contentRef = useRef(null);
-    const isOpen = props.isOpen ?? defaultIsOpen;
-    const { isMounted, className: transitionClass } = useMountTransition({
-        durationMs: transitionDurationMs,
-        isShown: isOpen,
-        enterFrom: 'dc-popover_closed',
-        enterTo: 'dc-popover_opened',
-    });
-    const openPopover = useCallback(() => {
-        setDefaultIsOpen(true);
-        onOpen?.();
-    }, [onOpen]);
-    const closePopover = useCallback(() => {
-        setDefaultIsOpen(false);
-        onClose?.();
-    }, [onClose]);
-    const togglePopover = useCallback(() => {
-        if (isOpen) {
-            closePopover();
+import { useLockBodyScroll } from '../../hooks/use-lock-body-scroll.js';
+import { useCloseOnEsc } from '../../hooks/use-close-on-esc.js';
+import { useCloseOnClickOutside } from '../../hooks/use-close-on-click-outside.js';
+import { useEffect, useRef, useState } from 'react';
+import { Portal } from '../portal/portal.js';
+export {};
+export function Popover({ className, role = 'dialog', 'aria-modal': ariaModal = true, placement = 'bottom-start', anchorPadding = 4, viewportPadding = 4, shouldTrapFocus = true, shouldLockBodyScroll = true, shouldCloseOnEsc = true, shouldCloseOnClickOutside = true, children = null, isOpen = false, onClose, onUnmount, ...props }) {
+    const [isMounted, setIsMounted] = useState(isOpen);
+    const defaultAnchorRef = useRef(null);
+    const popoverRef = useRef(null);
+    const isAnchorRefProvided = 'anchorRef' in props;
+    let anchorRef;
+    if (isAnchorRefProvided) {
+        anchorRef = props.anchorRef;
+    }
+    else {
+        anchorRef = defaultAnchorRef;
+    }
+    const close = useRefCallback(() => {
+        if (typeof onClose === 'function') {
+            onClose();
         }
-        else {
-            openPopover();
+    });
+    const unmount = useRefCallback(() => {
+        setIsMounted(false);
+        if (typeof onUnmount === 'function') {
+            onUnmount();
         }
-    }, [isOpen, closePopover, openPopover]);
-    useImperativeHandle(ref, () => ({
-        open: openPopover,
-        close: closePopover,
-        toggle: togglePopover,
-    }), [openPopover, closePopover, togglePopover]);
-    usePageClick((event) => {
-        const target = event.target;
+    });
+    useEffect(() => {
         const anchor = anchorRef.current;
-        const content = contentRef.current;
-        if (target instanceof Node
-            && !anchor?.contains(target)
-            && !content?.contains(target)) {
-            closePopover();
-        }
-    }, { isEnabled: isOpen });
-    useEscKeyDown(() => {
-        closePopover();
-        if (shouldFocusAnchorAfterEscPress && anchorRef.current) {
-            focusElement(anchorRef.current);
+        const popover = popoverRef.current;
+        if (!anchor || !popover) {
+            return;
         }
-    }, { isEnabled: isOpen });
-    useFocusTrap(contentRef, { isEnabled: shouldTrapFocus && isOpen });
-    const renderAnchor = ({ setRef }) => {
-        if (typeof anchor === 'function') {
-            return anchor({
-                ref: mergeRefs(setRef, anchorRef),
-            }, {
-                isOpen: isOpen || isMounted,
-                openPopover,
-                closePopover,
-                togglePopover,
+        if (isOpen) {
+            setIsMounted((isMounted) => {
+                if (isMounted) {
+                    return isMounted;
+                }
+                popover.dataset.animation = 'enter';
+                return !isMounted;
             });
+            const positionPopover = () => {
+                popover.style.removeProperty('max-width');
+                popover.style.removeProperty('max-height');
+                const result = calcElementPosition(anchor, popover, {
+                    placement,
+                    anchorPadding,
+                    viewportPadding,
+                });
+                popover.style.setProperty('top', `${result.y}px`);
+                popover.style.setProperty('left', `${result.x}px`);
+                popover.style.setProperty('max-width', `${result.maxWidth}px`);
+                popover.style.setProperty('max-height', `${result.maxHeight}px`);
+            };
+            positionPopover();
+            return observeElementMove(anchor, positionPopover);
         }
-        if (isReactElementWithRef(anchor)) {
-            return cloneElement(anchor, {
-                ref: mergeRefs(setRef, anchorRef, anchor.ref),
-                onClick: (event) => {
-                    togglePopover();
-                    anchor.props.onClick?.(event);
-                },
-            });
+        else {
+            popover.dataset.animation = 'leave';
+            popover.addEventListener('animationend', unmount);
+            return () => {
+                popover.removeEventListener('animationend', unmount);
+            };
         }
-        return anchor;
-    };
-    const renderContent = ({ setRef: portalRef, style: portalStyle, }) => {
-        if (isOpen || isMounted) {
-            delete props.defaultIsOpen;
-            delete props.isOpen;
-            return (_jsx("div", { ref: portalRef, style: {
-                    '--dc-popover-transition-duration': `${transitionDurationMs}ms`,
-                    ...portalStyle,
-                }, className: classNames('dc-popover', transitionClass), children: _jsx("div", { ...props, ref: contentRef, className: classNames('dc-popover-modal', className), children: children }) }));
+    }, [
+        anchorRef,
+        isOpen,
+        placement,
+        anchorPadding,
+        viewportPadding,
+        unmount,
+    ]);
+    useFocusTrap(popoverRef, {
+        disabled: !shouldTrapFocus || !isMounted,
+    });
+    useLockBodyScroll({
+        disabled: !shouldLockBodyScroll || !isMounted,
+    });
+    useCloseOnEsc(close, {
+        disabled: !shouldCloseOnEsc || !isMounted,
+    });
+    useCloseOnClickOutside(close, {
+        ref: popoverRef,
+        disabled: !shouldCloseOnClickOutside || !isMounted,
+        shouldIgnoreClick: (node) => anchorRef.current ? anchorRef.current.contains(node) : false,
+    });
+    useEffect(() => {
+        if (isOpen) {
+            const prevFocusedElement = document.activeElement;
+            return () => {
+                tryToFocusElement(prevFocusedElement);
+            };
         }
-    };
-    return (_jsx(Positioner, { position: "absolute", placement: placement, alignment: alignment, anchorGap: anchorGap, viewportGap: viewportGap, renderAnchor: renderAnchor, renderContent: renderContent }));
-});
+    }, [isOpen]);
+    return (_jsxs(_Fragment, { children: [!isAnchorRefProvided && props.renderAnchor({
+                ref: (el) => {
+                    defaultAnchorRef.current = el;
+                },
+            }), (isOpen || isMounted) && (_jsx(Portal, { children: _jsx("div", { className: classNames('dc-popover', className), ref: popoverRef, role: role, "aria-modal": ariaModal, ...isAnchorRefProvided ? deleteKeys(props, 'anchorRef') : deleteKeys(props, 'renderAnchor'), children: children }) }))] }));
+}
+//# sourceMappingURL=popover.js.map

package/dist/components/popover/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/components/popover/popover.tsx"],"names":[],"mappings":"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"}

package/dist/components/portal/index.js

@@ -1 +1,2 @@
 export * from './portal.js';
+//# sourceMappingURL=index.js.map

package/dist/components/portal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/portal/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/components/portal/portal-context.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export declare function usePortalRoot(): HTMLElement;
 export declare function PortalRootProvider(props: {
     children?: ReactNode;

package/dist/components/portal/portal-context.js

@@ -19,3 +19,4 @@ export function PortalRootProvider(props) {
     const { getPortalRoot, children } = props;
     return (_jsx(PortalContext.Provider, { value: getPortalRoot, children: children }));
 }
+//# sourceMappingURL=portal-context.js.map

package/dist/components/portal/portal-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal-context.js","sourceRoot":"","sources":["../../../src/components/portal/portal-context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAElE,IAAI,IAAI,GAAuB,IAAI,CAAC;AACpC,MAAM,aAAa,GAAG,GAAgB,EAAE;IACtC,IAAI,IAAI,IAAI,IAAI,EAAE,CAAC;QACjB,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,CAAC,EAAE,GAAG,aAAa,CAAC;QACxB,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,aAAa,CAAC;QACpC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,aAAa,CAAC,aAAa,CAAC,CAAC;AAEnD,MAAM,UAAU,aAAa;IAC3B,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAC1C,OAAO,OAAO,EAAE,CAAC;AACnB,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,KAGlC;IACC,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC1C,OAAO,CACL,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa,YACzC,QAAQ,GACc,CAC1B,CAAC;AACJ,CAAC"}

package/dist/components/portal/portal.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export type PortalProps = {
     children: ReactNode;
 };

package/dist/components/portal/portal.js

@@ -1,6 +1,8 @@
+import {} from 'react';
 import { createPortal } from 'react-dom';
 import { usePortalRoot } from './portal-context.js';
 export function Portal({ children }) {
     const container = usePortalRoot();
     return createPortal(children, container);
 }
+//# sourceMappingURL=portal.js.map

package/dist/components/portal/portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal.js","sourceRoot":"","sources":["../../../src/components/portal/portal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAMpD,MAAM,UAAU,MAAM,CAAC,EAAE,QAAQ,EAAe;IAC9C,MAAM,SAAS,GAAG,aAAa,EAAE,CAAC;IAClC,OAAO,YAAY,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;AAC3C,CAAC"}

package/dist/components/radio/index.js

@@ -1 +1,2 @@
 export * from './radio.js';
+//# sourceMappingURL=index.js.map

package/dist/components/radio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/radio/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/components/radio/radio.css

@@ -1,17 +1,17 @@
 .dc-radio {
-  --dc-radio-size: 20px;
-  --dc-radio-color-bg: var(--dc-control-bg);
-  --dc-radio-color-bg-checked: var(--dc-control-primary-color);
-  --dc-radio-color-border: var(--dc-control-border-color);
-  --dc-radio-color-border-checked: var(--dc-control-primary-color);
-  --dc-radio-color-icon: var(--dc-control-on-primary-color);
-  --dc-radio-color-focus-ring: var(--dc-focus-ring-color);
+  --size: 20px;
+  --background: var(--dc-white);
+  --background-checked: var(--dc-blue-500);
+  --border-color: var(--dc-neutral-300);
+  --border-color-checked: rgb(var(--dc-black-rgb) / 10%);
+  --icon-color: var(--dc-white);
+  --focus-ring-color: var(--dc-focus-ring-color);
 
   position: relative;
   display: inline-block;
   flex-shrink: 0;
-  width: var(--dc-radio-size);
-  height: var(--dc-radio-size);
+  width: var(--size);
+  height: var(--size);
   text-align: left;
   color-scheme: light;
 }
@@ -23,9 +23,9 @@
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
+  clip: rect(0, 0, 0, 0);
 }
 
 .dc-radio__check {
@@ -34,11 +34,11 @@
   left: 0;
   box-sizing: border-box;
   display: inline-block;
-  width: var(--dc-radio-size);
-  height: var(--dc-radio-size);
+  width: var(--size);
+  height: var(--size);
   vertical-align: middle;
-  background: var(--dc-radio-color-bg);
-  border: 1px solid var(--dc-radio-color-border);
+  background: var(--background);
+  border: 1px solid var(--border-color);
   border-radius: 50%;
   transition: opacity 0.2s;
 }
@@ -47,12 +47,12 @@
   display: none;
   width: 100%;
   height: 100%;
-  color: var(--dc-radio-color-icon);
+  color: var(--icon-color);
 }
 
 .dc-radio__input:checked + .dc-radio__check {
-  background: var(--dc-radio-color-bg-checked);
-  border-color: var(--dc-radio-color-border-checked);
+  background: var(--background-checked);
+  border-color: var(--border-color-checked);
 }
 
 .dc-radio__input:checked + .dc-radio__check .dc-radio__icon {
@@ -68,20 +68,16 @@
   outline: none;
 }
 
-.dc-radio__input:focus + .dc-radio__check::after {
-  position: absolute;
-  inset: -3px;
-  pointer-events: none;
-  content: "";
-  border-radius: 50%;
-  box-shadow: 0 0 0 3px var(--dc-radio-color-focus-ring);
-}
-
-.dc-radio__input:focus:not(:focus-visible) + .dc-radio__check::after {
-  content: none;
+.dc-radio__input:focus-visible + .dc-radio__check {
+  outline: 2px solid var(--focus-ring-color);
+  outline-offset: 2px;
 }
 
 .dark .dc-radio,
 .dark.dc-radio {
+  --background: var(--dc-neutral-800);
+  --border-color: var(--dc-neutral-600);
+  --border-color-checked: rgb(var(--dc-white-rgb) / 10%);
+
   color-scheme: dark;
 }