@moduix/solid-tailwind 1.0.0

package/dist/components/floating-panel/FloatingPanel.jsx

@@ -0,0 +1,186 @@
+import { ark } from "@ark-ui/solid/factory";
+import { FloatingPanel, useFloatingPanel, useFloatingPanelContext } from "@ark-ui/solid/floating-panel";
+import { For, children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { GripIcon, MaximizeIcon, MinusIcon, RestoreIcon } from "../../internal/icons/ui/Icons.jsx";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.jsx";
+import { CloseButton } from "../close-button/index.jsx";
+const DEFAULT_CLOSE_BUTTON_LABEL = 'Close panel';
+const resizeTriggerAxes = [
+    'n',
+    'e',
+    's',
+    'w',
+    'ne',
+    'se',
+    'sw',
+    'nw'
+];
+function FloatingPanelRoot(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'closeOnEscape',
+        'lazyMount',
+        'persistRect',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <FloatingPanel.Root closeOnEscape={local.closeOnEscape ?? true} lazyMount={local.lazyMount ?? true} persistRect={local.persistRect ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </FloatingPanel.Root>
+    </OverlayPortalProvider>;
+}
+function FloatingPanelRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <FloatingPanel.RootProvider lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </FloatingPanel.RootProvider>
+    </OverlayPortalProvider>;
+}
+function FloatingPanelTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <FloatingPanel.Trigger asChild={local.asChild} data-slot="floating-panel-trigger" class={cn(!local.asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3 py-1 text-md leading-6 text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 data-[state=open]:bg-accent motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class)} {...others}/>;
+}
+function FloatingPanelPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <FloatingPanel.Positioner data-slot="floating-panel-positioner" class={cn('z-[var(--z-index)] outline-0', local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function FloatingPanelContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <FloatingPanel.Content data-slot="floating-panel-content" class={cn('relative box-border flex min-h-40 min-w-64 origin-[var(--transform-origin)] flex-col overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-lg outline-0 data-behind:opacity-[0.55] data-minimized:min-h-0 data-[state=closed]:pointer-events-none data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none', local.class)} {...others}/>;
+}
+function FloatingPanelDragTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <FloatingPanel.DragTrigger data-slot="floating-panel-drag-trigger" class={cn('block', local.class)} {...others}/>;
+}
+function FloatingPanelHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <FloatingPanel.Header data-slot="floating-panel-header" class={cn('box-border flex min-h-control-xl cursor-grab items-center justify-between gap-3 border-b border-border bg-muted px-3 py-2 select-none data-[dragging]:cursor-grabbing data-[minimized]:border-b-transparent', local.class)} {...others}/>;
+}
+function FloatingPanelTitle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <FloatingPanel.Title data-slot="floating-panel-title" class={cn('inline-flex min-w-0 items-center gap-2 text-sm font-semibold text-popover-foreground', local.class)} {...others}/>;
+}
+function FloatingPanelControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <FloatingPanel.Control data-slot="floating-panel-control" class={cn('inline-flex flex-none items-center gap-1', local.class)} {...others}/>;
+}
+function FloatingPanelStageTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'asChild',
+        'children',
+        'class',
+        'stage'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const shouldRenderDefaultIcon = ()=>null == local.children && !local.asChild;
+    return <FloatingPanel.StageTrigger aria-label={local['aria-label']} asChild={local.asChild} data-slot="floating-panel-stage-trigger" class={cn(!local.asChild && 'box-border inline-flex size-control-sm cursor-pointer items-center justify-center rounded-sm border border-border bg-background text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [&>svg]:size-4 [@media(hover:hover)]:hover:bg-accent', local.class)} stage={local.stage} {...others}>
+      {resolvedChildren()}
+      {shouldRenderDefaultIcon() && 'minimized' === local.stage ? <MinusIcon/> : null}
+      {shouldRenderDefaultIcon() && 'maximized' === local.stage ? <MaximizeIcon/> : null}
+      {shouldRenderDefaultIcon() && 'default' === local.stage ? <RestoreIcon/> : null}
+    </FloatingPanel.StageTrigger>;
+}
+function FloatingPanelCloseTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <FloatingPanel.CloseTrigger asChild={local.asChild} data-slot="floating-panel-close-trigger" class={cn(!local.asChild && 'box-border inline-flex size-control-sm cursor-pointer items-center justify-center rounded-sm border border-border bg-background text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [&>svg]:size-4 [@media(hover:hover)]:hover:bg-accent', local.class)} {...others}/>;
+}
+function FloatingPanelCloseIcon(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <FloatingPanel.CloseTrigger asChild={(triggerProps)=><CloseButton.Root {...triggerProps()} data-slot="floating-panel-close-icon" aria-label={local['aria-label'] ?? DEFAULT_CLOSE_BUTTON_LABEL} aria-labelledby={local['aria-labelledby']} class={cn('box-border inline-flex size-control-sm cursor-pointer items-center justify-center rounded-sm border border-border bg-background p-0 text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring active:bg-accent data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [&>svg]:size-4 [@media(hover:hover)]:hover:bg-accent', local.class)}>
+          {resolvedChildren()}
+        </CloseButton.Root>} {...others}/>;
+}
+function FloatingPanelBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <FloatingPanel.Body data-slot="floating-panel-body" class={cn('min-h-0 flex-auto overflow-auto p-4 text-sm text-popover-foreground data-minimized:hidden', local.class)} {...others}/>;
+}
+function FloatingPanelFooter(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    const floatingPanel = useFloatingPanelContext();
+    return <ark.div {...others} data-slot="floating-panel-footer" data-minimized={floatingPanel().getContentProps()['data-minimized']} class={cn('flex flex-none items-center justify-end gap-2 border-t border-border px-3 py-2 text-xs text-muted-foreground data-minimized:hidden', local.class)}/>;
+}
+function FloatingPanelResizeTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <FloatingPanel.ResizeTrigger data-slot="floating-panel-resize-trigger" class={cn('absolute data-disabled:pointer-events-none data-[axis=e]:inset-y-3 data-[axis=e]:-right-1 data-[axis=e]:w-2 data-[axis=n]:inset-x-3 data-[axis=n]:-top-1 data-[axis=n]:h-2 data-[axis=ne]:-top-1.5 data-[axis=ne]:-right-1.5 data-[axis=ne]:size-3 data-[axis=nw]:-top-1.5 data-[axis=nw]:-left-1.5 data-[axis=nw]:size-3 data-[axis=s]:inset-x-3 data-[axis=s]:-bottom-1 data-[axis=s]:h-2 data-[axis=se]:-right-1.5 data-[axis=se]:-bottom-1.5 data-[axis=se]:size-3 data-[axis=sw]:-bottom-1.5 data-[axis=sw]:-left-1.5 data-[axis=sw]:size-3 data-[axis=w]:inset-y-3 data-[axis=w]:-left-1 data-[axis=w]:w-2', local.class)} {...others}/>;
+}
+function FloatingPanelResizeTriggerGroup(props) {
+    return <For each={props.axes ?? resizeTriggerAxes}>
+      {(axis)=><FloatingPanelResizeTrigger axis={axis}/>}
+    </For>;
+}
+function FloatingPanelDragIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <span aria-hidden="true" data-slot="floating-panel-drag-indicator" class={cn('inline-flex flex-none items-center justify-center text-muted-foreground [&>svg]:size-4', local.class)} {...others}>
+      {resolvedChildren() ?? <GripIcon/>}
+    </span>;
+}
+const FloatingPanel_FloatingPanel = Object.assign(FloatingPanelRoot, {
+    Context: FloatingPanel.Context,
+    Root: FloatingPanelRoot,
+    RootProvider: FloatingPanelRootProvider,
+    Trigger: FloatingPanelTrigger,
+    Positioner: FloatingPanelPositioner,
+    Content: FloatingPanelContent,
+    DragTrigger: FloatingPanelDragTrigger,
+    Header: FloatingPanelHeader,
+    Title: FloatingPanelTitle,
+    Control: FloatingPanelControl,
+    StageTrigger: FloatingPanelStageTrigger,
+    CloseTrigger: FloatingPanelCloseTrigger,
+    CloseIcon: FloatingPanelCloseIcon,
+    Body: FloatingPanelBody,
+    Footer: FloatingPanelFooter,
+    ResizeTrigger: FloatingPanelResizeTrigger,
+    ResizeTriggerGroup: FloatingPanelResizeTriggerGroup,
+    DragIndicator: FloatingPanelDragIndicator,
+    useFloatingPanel: useFloatingPanel,
+    useFloatingPanelContext: useFloatingPanelContext
+});
+export { FloatingPanel_FloatingPanel as FloatingPanel, resizeTriggerAxes, useFloatingPanel, useFloatingPanelContext };

package/dist/components/floating-panel/index.d.ts

@@ -0,0 +1,2 @@
+export { FloatingPanel, resizeTriggerAxes, useFloatingPanel, useFloatingPanelContext, } from './FloatingPanel.js';
+export type { FloatingPanelRootProps, FloatingPanelRootProviderProps } from './FloatingPanel.js';

package/dist/components/floating-panel/index.js

@@ -0,0 +1 @@
+export { FloatingPanel, resizeTriggerAxes, useFloatingPanel, useFloatingPanelContext } from "./FloatingPanel.js";

package/dist/components/floating-panel/index.jsx

@@ -0,0 +1 @@
+export { FloatingPanel, resizeTriggerAxes, useFloatingPanel, useFloatingPanelContext } from "./FloatingPanel.jsx";

package/dist/components/heading/Heading.d.ts

@@ -0,0 +1,20 @@
+import { ark } from '@ark-ui/solid/factory';
+import type { ComponentProps } from 'solid-js';
+type HeadingSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type HeadingWeight = 'regular' | 'medium' | 'semibold' | 'bold';
+type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+type HeadingRootProps = ComponentProps<typeof ark.h1> & {
+    as?: HeadingElement;
+    size?: HeadingSize;
+    weight?: HeadingWeight;
+    'data-scope'?: string;
+    'data-part'?: string;
+    'data-slot'?: string;
+    'data-size'?: string;
+    'data-weight'?: string;
+};
+declare function HeadingRoot(props: HeadingRootProps): import("solid-js").JSX.Element;
+declare const Heading: typeof HeadingRoot & {
+    Root: typeof HeadingRoot;
+};
+export { Heading };

package/dist/components/heading/Heading.js

@@ -0,0 +1,82 @@
+import { Dynamic, createComponent, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { cva } from "class-variance-authority";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+const Heading_elements = {
+    h1: ark.h1,
+    h2: ark.h2,
+    h3: ark.h3,
+    h4: ark.h4,
+    h5: ark.h5,
+    h6: ark.h6
+};
+const defaultSizes = {
+    h1: '2xl',
+    h2: 'xl',
+    h3: 'lg',
+    h4: 'md',
+    h5: 'sm',
+    h6: 'xs'
+};
+const headingVariants = cva('m-0 text-foreground tracking-normal text-balance wrap-anywhere', {
+    variants: {
+        size: {
+            xs: 'text-sm',
+            sm: 'text-md',
+            md: 'text-lg',
+            lg: 'text-xl',
+            xl: 'text-2xl',
+            '2xl': 'text-3xl'
+        },
+        weight: {
+            regular: 'font-regular',
+            medium: 'font-medium',
+            semibold: 'font-semibold',
+            bold: 'font-bold'
+        }
+    }
+});
+function HeadingRoot(props) {
+    const [local, others] = splitProps(props, [
+        'as',
+        'asChild',
+        'size',
+        'weight',
+        'class',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'data-size',
+        'data-weight'
+    ]);
+    const Element = ()=>Heading_elements[local.as ?? 'h1'];
+    return createComponent(Dynamic, mergeProps({
+        get component () {
+            return Element();
+        },
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "heading",
+        "data-part": "root",
+        "data-slot": "heading-root",
+        get ["data-size"] () {
+            return local.size;
+        },
+        get ["data-weight"] () {
+            return local.weight ?? 'semibold';
+        },
+        get ["class"] () {
+            return cn(headingVariants({
+                size: local.size ?? defaultSizes[local.as ?? 'h1'],
+                weight: local.weight ?? 'semibold'
+            }), local.class);
+        }
+    }));
+}
+const Heading = Object.assign(HeadingRoot, {
+    Root: HeadingRoot
+});
+export { Heading };

package/dist/components/heading/Heading.jsx

@@ -0,0 +1,62 @@
+import { ark } from "@ark-ui/solid/factory";
+import { cva } from "class-variance-authority";
+import { splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { cn } from "../../internal/cn.jsx";
+const Heading_elements = {
+    h1: ark.h1,
+    h2: ark.h2,
+    h3: ark.h3,
+    h4: ark.h4,
+    h5: ark.h5,
+    h6: ark.h6
+};
+const defaultSizes = {
+    h1: '2xl',
+    h2: 'xl',
+    h3: 'lg',
+    h4: 'md',
+    h5: 'sm',
+    h6: 'xs'
+};
+const headingVariants = cva('m-0 text-foreground tracking-normal text-balance wrap-anywhere', {
+    variants: {
+        size: {
+            xs: 'text-sm',
+            sm: 'text-md',
+            md: 'text-lg',
+            lg: 'text-xl',
+            xl: 'text-2xl',
+            '2xl': 'text-3xl'
+        },
+        weight: {
+            regular: 'font-regular',
+            medium: 'font-medium',
+            semibold: 'font-semibold',
+            bold: 'font-bold'
+        }
+    }
+});
+function HeadingRoot(props) {
+    const [local, others] = splitProps(props, [
+        'as',
+        'asChild',
+        'size',
+        'weight',
+        'class',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'data-size',
+        'data-weight'
+    ]);
+    const Element = ()=>Heading_elements[local.as ?? 'h1'];
+    return <Dynamic component={Element()} asChild={local.asChild} {...others} data-scope="heading" data-part="root" data-slot="heading-root" data-size={local.size} data-weight={local.weight ?? 'semibold'} class={cn(headingVariants({
+        size: local.size ?? defaultSizes[local.as ?? 'h1'],
+        weight: local.weight ?? 'semibold'
+    }), local.class)}/>;
+}
+const Heading = Object.assign(HeadingRoot, {
+    Root: HeadingRoot
+});
+export { Heading };

package/dist/components/heading/index.d.ts

@@ -0,0 +1 @@
+export * from './Heading.js';

package/dist/components/heading/index.js

@@ -0,0 +1 @@
+export * from "./Heading.js";

package/dist/components/heading/index.jsx

@@ -0,0 +1 @@
+export * from "./Heading.jsx";

package/dist/components/highlight/Highlight.d.ts

@@ -0,0 +1,12 @@
+import { Highlight as HighlightPrimitive } from '@ark-ui/solid/highlight';
+import type { ComponentProps } from 'solid-js';
+type HighlightRootProps = ComponentProps<typeof HighlightPrimitive> & {
+    'data-scope'?: string;
+    'data-part'?: string;
+    'data-slot'?: string;
+};
+declare function HighlightRoot(props: HighlightRootProps): import("solid-js").JSX.Element;
+declare const Highlight: typeof HighlightRoot & {
+    Root: typeof HighlightRoot;
+};
+export { Highlight };

package/dist/components/highlight/Highlight.js

@@ -0,0 +1,24 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { Highlight } from "@ark-ui/solid/highlight";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+function HighlightRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'data-scope',
+        'data-part',
+        'data-slot'
+    ]);
+    return createComponent(Highlight, mergeProps(others, {
+        "data-scope": "highlight",
+        "data-part": "root",
+        "data-slot": "highlight-root",
+        get ["class"] () {
+            return cn('rounded-xs bg-[color-mix(in_oklab,var(--color-warning)_40%,var(--color-accent))] [box-decoration-break:clone] px-1 py-px font-medium text-foreground no-underline shadow-none [-webkit-box-decoration-break:clone]', local.class);
+        }
+    }));
+}
+const Highlight_Highlight = Object.assign(HighlightRoot, {
+    Root: HighlightRoot
+});
+export { Highlight_Highlight as Highlight };

package/dist/components/highlight/Highlight.jsx

@@ -0,0 +1,16 @@
+import { Highlight } from "@ark-ui/solid/highlight";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+function HighlightRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'data-scope',
+        'data-part',
+        'data-slot'
+    ]);
+    return <Highlight {...others} data-scope="highlight" data-part="root" data-slot="highlight-root" class={cn('rounded-xs bg-[color-mix(in_oklab,var(--color-warning)_40%,var(--color-accent))] [box-decoration-break:clone] px-1 py-px font-medium text-foreground no-underline shadow-none [-webkit-box-decoration-break:clone]', local.class)}/>;
+}
+const Highlight_Highlight = Object.assign(HighlightRoot, {
+    Root: HighlightRoot
+});
+export { Highlight_Highlight as Highlight };

package/dist/components/highlight/index.d.ts

@@ -0,0 +1 @@
+export { Highlight } from './Highlight.js';

package/dist/components/highlight/index.js

@@ -0,0 +1 @@
+export { Highlight } from "./Highlight.js";

package/dist/components/highlight/index.jsx

@@ -0,0 +1 @@
+export { Highlight } from "./Highlight.jsx";

package/dist/components/hover-card/HoverCard.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+import { HoverCard as HoverCardPrimitive, useHoverCard, useHoverCardContext } from '@ark-ui/solid/hover-card';
+import type { ComponentProps } from 'solid-js';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
+type HoverCardRootProps = ComponentProps<typeof HoverCardPrimitive.Root> & OverlayPortalProps;
+type HoverCardRootProviderProps = ComponentProps<typeof HoverCardPrimitive.RootProvider> & OverlayPortalProps;
+declare function HoverCardRoot(props: HoverCardRootProps): import("solid-js").JSX.Element;
+declare function HoverCardRootProvider(props: HoverCardRootProviderProps): import("solid-js").JSX.Element;
+declare function HoverCardTrigger(props: ComponentProps<typeof HoverCardPrimitive.Trigger>): import("solid-js").JSX.Element;
+declare function HoverCardPositioner(props: ComponentProps<typeof HoverCardPrimitive.Positioner>): import("solid-js").JSX.Element;
+declare function HoverCardContent(props: ComponentProps<typeof HoverCardPrimitive.Content>): import("solid-js").JSX.Element;
+declare function HoverCardArrow(props: ComponentProps<typeof HoverCardPrimitive.Arrow>): import("solid-js").JSX.Element;
+declare function HoverCardArrowTip(props: ComponentProps<typeof HoverCardPrimitive.ArrowTip>): import("solid-js").JSX.Element;
+declare function HoverCardBody(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare const HoverCard: typeof HoverCardRoot & {
+    Root: typeof HoverCardRoot;
+    RootProvider: typeof HoverCardRootProvider;
+    Trigger: typeof HoverCardTrigger;
+    Positioner: typeof HoverCardPositioner;
+    Content: typeof HoverCardContent;
+    Arrow: typeof HoverCardArrow;
+    ArrowTip: typeof HoverCardArrowTip;
+    Body: typeof HoverCardBody;
+    Context: (props: HoverCardPrimitive.ContextProps) => import("solid-js").JSX.Element;
+};
+export { HoverCard, useHoverCard, useHoverCardContext };
+export type { HoverCardRootProps, HoverCardRootProviderProps };

package/dist/components/hover-card/HoverCard.js

@@ -0,0 +1,164 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { HoverCard, useHoverCard, useHoverCardContext } from "@ark-ui/solid/hover-card";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+function HoverCardRoot(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(HoverCard.Root, mergeProps({
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function HoverCardRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(HoverCard.RootProvider, mergeProps({
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function HoverCardTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(HoverCard.Trigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "hover-card-trigger",
+        get ["class"] () {
+            return cn(!local.asChild && 'inline-flex cursor-pointer items-center gap-1 text-primary underline decoration-primary/60 decoration-1 underline-offset-2 outline-0 transition-[color,text-decoration-color] duration-150 ease-in-out focus-visible:rounded-xs focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-[state=open]:decoration-primary motion-reduce:transition-none [@media(hover:hover)]:hover:decoration-primary', local.class);
+        }
+    }, others));
+}
+function HoverCardPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(HoverCard.Positioner, mergeProps({
+                "data-slot": "hover-card-positioner",
+                get ["class"] () {
+                    return cn('z-[var(--z-index,var(--moduix-z-popup))] max-w-[var(--available-width)] outline-0', local.class);
+                }
+            }, others));
+        }
+    });
+}
+function HoverCardContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(HoverCard.Content, mergeProps({
+        "data-slot": "hover-card-content",
+        get ["class"] () {
+            return cn('relative z-[calc(var(--moduix-z-popup)+var(--layer-index,0))] max-h-[min(24rem,var(--available-height,100dvh))] max-w-[min(24rem,var(--available-width))] min-w-[min(14rem,var(--available-width))] origin-[var(--transform-origin)] overflow-visible rounded-lg border border-border bg-popover p-2 wrap-anywhere text-popover-foreground shadow-lg outline-0 has-[>[data-slot=hover-card-body]]:flex has-[>[data-slot=hover-card-body]]:flex-col data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none has-[>[data-slot=hover-card-body]]:[&>[data-slot=hover-card-body]]:overflow-auto', local.class);
+        }
+    }, others));
+}
+function HoverCardArrow(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(HoverCard.Arrow, mergeProps({
+        "data-slot": "hover-card-arrow",
+        get ["class"] () {
+            return cn('[--arrow-background:var(--color-popover)] [--arrow-shadow-color:var(--color-border)] [--arrow-size:0.625rem]', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(HoverCardArrowTip, {});
+        }
+    }));
+}
+function HoverCardArrowTip(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(HoverCard.ArrowTip, mergeProps({
+        "data-slot": "hover-card-arrow-tip",
+        get ["class"] () {
+            return cn('border-t border-l border-border', local.class);
+        }
+    }, others));
+}
+function HoverCardBody(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "hover-card-body",
+        get ["class"] () {
+            return cn('min-h-0', local.class);
+        }
+    }, others));
+}
+const HoverCard_HoverCard = Object.assign(HoverCardRoot, {
+    Root: HoverCardRoot,
+    RootProvider: HoverCardRootProvider,
+    Trigger: HoverCardTrigger,
+    Positioner: HoverCardPositioner,
+    Content: HoverCardContent,
+    Arrow: HoverCardArrow,
+    ArrowTip: HoverCardArrowTip,
+    Body: HoverCardBody,
+    Context: HoverCard.Context
+});
+export { HoverCard_HoverCard as HoverCard, useHoverCard, useHoverCardContext };