@vertesia/ui 1.0.0-dev.20260227.112605Z → 1.0.0-dev.20260331.091034Z

package/src/core/components/Switch.tsx

@@ -1,30 +0,0 @@
-import { Switch as UISwitch } from "@headlessui/react";
-
-const sizes = {
-    'sm': ['h-5 w-8', 'size-3', 'translate-x-4'],
-    'md': ['h-6 w-11', 'size-4', 'translate-x-6'],
-    'lg': ['h-8 w-16', 'size-6', 'translate-x-9'],
-}
-
-interface SwitchProps {
-    size?: 'sm' | 'md' | 'lg'
-    value: boolean;
-    onChange: (value: boolean) => void;
-    children?: React.ReactNode;
-    className?: string;
-    disabled?: boolean;
-}
-export function Switch({ value, onChange, size = 'md', children, className, disabled }: SwitchProps) {
-    const sizeClass = sizes[size];
-    return (
-        <UISwitch checked={value} onChange={() => onChange(!value)} disabled={disabled} className={`flex items-center ${className} ${disabled ? 'cursor-not-allowed opacity-50' : 'hover:cursor-pointer'}`}>
-            <div className={`${value ? 'bg-primary' : 'bg-muted/50'} relative inline-flex ${sizeClass[0]} items-center rounded-full border-1`}>
-                <span
-                    className={`${value ? sizeClass[2] : 'translate-x-1'
-                        } inline-block ${sizeClass[1]} transform rounded-full bg-white transition`}
-                />
-            </div>
-            {children && <span className="px-2">{children}</span>}
-        </UISwitch>
-    )
-}

package/src/widgets/popover/Popover.tsx

@@ -1,171 +0,0 @@
-import { flip, offset, shift } from "@floating-ui/dom";
-import {
-    FloatingFocusManager,
-    FloatingPortal,
-    Middleware,
-    Placement,
-    UseClickProps,
-    UseDismissProps,
-    UseHoverProps,
-    UseTransitionStylesProps,
-    autoUpdate,
-    safePolygon,
-    useClick,
-    useDismiss,
-    useFloating,
-    useHover,
-    useInteractions,
-    useTransitionStyles
-} from "@floating-ui/react";
-import clsx from "clsx";
-import { CSSProperties, ReactElement, ReactNode, useState } from "react";
-import { PopoverContext } from "./context";
-import { defineSlot, processSlots } from "./slots";
-
-
-
-function computeElementProps<T extends { enabled?: boolean }>(value: undefined | boolean | T) {
-    if (!value) return { enabled: false } as T;
-    return (typeof value === 'boolean' ? { enabled: value } : value) as T
-}
-
-function getHoverProps(props: PopoverTriggerProps | undefined) {
-    return props?.hover === true ? {
-        enabled: true,
-        handleClose: safePolygon({ blockPointerEvents: true }),
-        restMs: 0,
-    } : props?.hover
-}
-
-function getClickProps(props: PopoverTriggerProps | undefined) {
-    return props && !props.hover && !props.click ? {
-        enabled: true,
-    } : props?.click
-}
-
-interface BasePopoverProps {
-    strategy?: "fixed" | "absolute"
-    placement?: Placement,
-    middleware?: Middleware[],
-    zIndex?: number,
-    dismiss?: boolean | UseDismissProps,
-    offset?: number
-}
-
-interface PopoverProps extends BasePopoverProps {
-    children: ReactNode | Iterable<ReactNode>
-}
-/**
- * The component is instantiated when all interactions are known
- * @param param0
- * @returns
- */
-export function Popover(props: PopoverProps) {
-
-    const slots: { trigger?: ReactElement, content?: ReactElement } = {};
-    processSlots(props.children, slots);
-
-    if (!slots.content) {
-        throw new Error('Popover must provide a content slot')
-    }
-
-    const triggerProps = slots.trigger?.props as PopoverTriggerProps;
-    const contentProps = slots.content.props as PopoverContentProps;
-
-    // wait for the trigger to be defined
-    return <ResolvedPopover {...props}
-        trigger={triggerProps}
-        content={contentProps}
-    />
-}
-
-
-interface ResolvedPopoverProps extends BasePopoverProps {
-    trigger?: PopoverTriggerProps
-    content: PopoverContentProps
-}
-function ResolvedPopover({ middleware, offset: defaultOffset, trigger, dismiss = true, content, placement, strategy, zIndex = 40 }: ResolvedPopoverProps) {
-    const [isOpen, setIsOpen] = useState(false)
-    const floating = useFloating({
-        open: isOpen,
-        placement,
-        strategy,
-        onOpenChange: setIsOpen,
-        middleware: middleware || [offset(defaultOffset || 4), shift(), flip()],
-        whileElementsMounted: autoUpdate // stick to the anchor when resizing / scrolling
-    })
-
-
-    const {
-        floatingStyles,
-        refs: { setReference, setFloating },
-        context,
-    } = floating;
-
-
-    const dismissInteraction = useDismiss(context, computeElementProps(dismiss))
-    const clickInteraction = useClick(context, computeElementProps(getClickProps(trigger)))
-    const hoverInteraction = useHover(context, computeElementProps(getHoverProps(trigger)))
-
-    const {
-        getReferenceProps,
-        getFloatingProps,
-    } = useInteractions([dismissInteraction, clickInteraction, hoverInteraction]);
-
-    const { isMounted, styles: transitionStyles } = useTransitionStyles(context, content.transition);
-
-    return (
-        <PopoverContext.Provider value={{
-            ...floating,
-            close: () => setIsOpen(false)
-        }}>
-            {trigger &&
-                <div className={clsx(trigger.className, "inline-block")} ref={setReference} {...getReferenceProps()}>
-                    {trigger.children}
-                </div>
-            }
-            <FloatingPortal>
-                {
-                    isMounted && (
-                        <div ref={setFloating}
-                            style={{ ...floatingStyles, zIndex: zIndex } as CSSProperties}
-                            {...getFloatingProps()}
-                        >
-                            <FloatingFocusManager context={context}>
-                                <div className={clsx(content.className, "bg-popover rounded-md text-popover-foreground max-w-md")} style={transitionStyles as CSSProperties}>
-                                    {content.children}
-                                </div>
-                            </FloatingFocusManager>
-                        </div>
-                    )
-                }
-            </FloatingPortal>
-        </PopoverContext.Provider>
-    )
-}
-
-
-
-interface PopoverTriggerProps {
-    children: ReactNode | ReactNode[]
-    className?: string
-    click?: boolean | UseClickProps
-    hover?: boolean | UseHoverProps
-}
-function PopoverTrigger(_props: PopoverTriggerProps) {
-    return null;
-}
-defineSlot('trigger', PopoverTrigger);
-
-interface PopoverContentProps {
-    className?: string
-    transition?: UseTransitionStylesProps
-    children: ReactNode | ReactNode[]
-}
-function PopoverContent(_props: PopoverContentProps) {
-    return null;
-}
-defineSlot('content', PopoverContent);
-
-Popover.Trigger = PopoverTrigger;
-Popover.Content = PopoverContent;

package/src/widgets/popover/context.ts

@@ -1,15 +0,0 @@
-import { UseFloatingReturn } from "@floating-ui/react";
-import { createContext, useContext } from "react";
-
-interface PopoverApi extends UseFloatingReturn {
-    close: () => void
-}
-const PopoverContext = createContext<PopoverApi>(undefined as any);
-
-export function usePopoverContext() {
-    return useContext(PopoverContext);
-}
-
-export {
-    PopoverContext
-}

package/src/widgets/popover/index.ts

@@ -1,2 +0,0 @@
-export * from "./Popover";
-export * from "./context";

package/src/widgets/popover/slots.ts

@@ -1,24 +0,0 @@
-import { Children, FunctionComponent, ReactElement, ReactNode, isValidElement } from "react";
-
-const __SLOT_NAME = Symbol('__SLOT_NAME')
-
-export function processOneSlot(child: ReactNode, out: ReactNode[], slots: Record<string, ReactElement>) {
-    let slotName: string | undefined;
-    if (isValidElement(child) && (slotName = (child as any).type[__SLOT_NAME])) {
-        slots[slotName] = child;
-    } else {
-        out.push(child);
-    }
-}
-export function processSlots(children: ReactNode | Iterable<ReactNode>, slots: Record<string, ReactElement>): ReactNode | ReactNode[] {
-    const out: ReactNode[] = [];
-
-    Children.forEach(children, child => {
-        processOneSlot(child, out, slots);
-    })
-    return out.length > 1 ? out : out[0];
-}
-
-export function defineSlot(name: string, component: FunctionComponent<any>) {
-    (component as any)[__SLOT_NAME] = name;
-}