@moduix/solid 1.0.0

package/dist/components/popover/Popover.jsx

@@ -0,0 +1,156 @@
+import { ark } from "@ark-ui/solid/factory";
+import { Popover, usePopover, usePopoverContext } from "@ark-ui/solid/popover";
+import { clsx } from "clsx";
+import { children, splitProps } from "solid-js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.jsx";
+import { CloseButton } from "../close-button/index.jsx";
+import Popover_module from "./Popover.module.jsx";
+const DEFAULT_CLOSE_BUTTON_LABEL = 'Close popover';
+function PopoverRoot(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'modal',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    const resolvedPortalled = ()=>local.modal || local.portalled;
+    return <OverlayPortalProvider portalled={resolvedPortalled()} portalRef={local.portalRef}>
+      <Popover.Root lazyMount={local.lazyMount ?? true} modal={local.modal} portalled={resolvedPortalled()} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </Popover.Root>
+    </OverlayPortalProvider>;
+}
+function PopoverRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalRef',
+        'unmountOnExit',
+        'value'
+    ]);
+    return <OverlayPortalProvider portalled={props.value().portalled} portalRef={local.portalRef}>
+      <Popover.RootProvider value={local.value} lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </Popover.RootProvider>
+    </OverlayPortalProvider>;
+}
+function PopoverAnchor(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Popover.Anchor data-slot="popover-anchor" class={local.class} {...others}/>;
+}
+function PopoverTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Popover.Trigger asChild={local.asChild} data-slot="popover-trigger" class={clsx(!local.asChild && Popover_module.trigger, local.class)} {...others}/>;
+}
+function PopoverIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Popover.Indicator data-slot="popover-indicator" class={local.class} {...others}/>;
+}
+function PopoverPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <Popover.Positioner data-slot="popover-positioner" class={clsx(Popover_module.positioner, local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function PopoverContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Popover.Content data-slot="popover-content" class={clsx(Popover_module.content, local.class)} {...others}/>;
+}
+function PopoverArrow(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Popover.Arrow data-slot="popover-arrow" class={clsx(Popover_module.arrow, local.class)} {...others}>
+      {resolvedChildren() ?? <PopoverArrowTip/>}
+    </Popover.Arrow>;
+}
+function PopoverArrowTip(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Popover.ArrowTip data-slot="popover-arrow-tip" class={clsx(Popover_module.arrowTip, local.class)} {...others}/>;
+}
+function PopoverTitle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Popover.Title data-slot="popover-title" class={clsx(Popover_module.title, local.class)} {...others}/>;
+}
+function PopoverDescription(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Popover.Description data-slot="popover-description" class={clsx(Popover_module.description, local.class)} {...others}/>;
+}
+function PopoverCloseTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Popover.CloseTrigger asChild={local.asChild} data-slot="popover-close-trigger" class={clsx(!local.asChild && Popover_module.closeTrigger, local.class)} {...others}/>;
+}
+function PopoverCloseIcon(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Popover.CloseTrigger asChild={(triggerProps)=><CloseButton.Root {...triggerProps()} data-slot="popover-close-icon" aria-label={local['aria-label'] ?? DEFAULT_CLOSE_BUTTON_LABEL} aria-labelledby={local['aria-labelledby']} class={clsx(Popover_module.closeIcon, local.class)}>
+          {resolvedChildren()}
+        </CloseButton.Root>} {...others}/>;
+}
+function PopoverHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="popover-header" class={clsx(Popover_module.header, local.class)} {...others}/>;
+}
+function PopoverBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="popover-body" class={clsx(Popover_module.body, local.class)} {...others}/>;
+}
+function PopoverFooter(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="popover-footer" class={clsx(Popover_module.footer, local.class)} {...others}/>;
+}
+const Popover_Popover = Object.assign(PopoverRoot, {
+    Root: PopoverRoot,
+    RootProvider: PopoverRootProvider,
+    Context: Popover.Context,
+    Anchor: PopoverAnchor,
+    Trigger: PopoverTrigger,
+    Indicator: PopoverIndicator,
+    Positioner: PopoverPositioner,
+    Content: PopoverContent,
+    Arrow: PopoverArrow,
+    ArrowTip: PopoverArrowTip,
+    Title: PopoverTitle,
+    Description: PopoverDescription,
+    CloseTrigger: PopoverCloseTrigger,
+    CloseIcon: PopoverCloseIcon,
+    Header: PopoverHeader,
+    Body: PopoverBody,
+    Footer: PopoverFooter
+});
+export { Popover_Popover as Popover, usePopover, usePopoverContext };

package/dist/components/popover/Popover.module.js

@@ -0,0 +1,20 @@
+import "./Popover_module.css";
+const Popover_module = {
+    trigger: "trigger-TuNfDY",
+    closeTrigger: "closeTrigger-g6dVFQ",
+    positioner: "positioner-gqEojT",
+    content: "content-QiLEpj",
+    "popover-enter": "popover-enter-Kmc_ZV",
+    popoverEnter: "popover-enter-Kmc_ZV",
+    "popover-exit": "popover-exit-AUr4tl",
+    popoverExit: "popover-exit-AUr4tl",
+    body: "body-aMDFGV",
+    closeIcon: "closeIcon-oldPto",
+    header: "header-q59Ek4",
+    arrow: "arrow-B6fVya",
+    arrowTip: "arrowTip-HpILQT",
+    title: "title-o5I9x8",
+    description: "description-ZrOS9P",
+    footer: "footer-laX930"
+};
+export default Popover_module;

package/dist/components/popover/Popover.module.jsx

@@ -0,0 +1,20 @@
+import "./Popover_module.css";
+const Popover_module = {
+    trigger: "trigger-TuNfDY",
+    closeTrigger: "closeTrigger-g6dVFQ",
+    positioner: "positioner-gqEojT",
+    content: "content-QiLEpj",
+    "popover-enter": "popover-enter-Kmc_ZV",
+    popoverEnter: "popover-enter-Kmc_ZV",
+    "popover-exit": "popover-exit-AUr4tl",
+    popoverExit: "popover-exit-AUr4tl",
+    body: "body-aMDFGV",
+    closeIcon: "closeIcon-oldPto",
+    header: "header-q59Ek4",
+    arrow: "arrow-B6fVya",
+    arrowTip: "arrowTip-HpILQT",
+    title: "title-o5I9x8",
+    description: "description-ZrOS9P",
+    footer: "footer-laX930"
+};
+export default Popover_module;

package/dist/components/popover/Popover_module.css

@@ -0,0 +1,196 @@
+@layer moduix.components {
+  .trigger-TuNfDY, .closeTrigger-g6dVFQ {
+    box-sizing: border-box;
+    min-height: var(--moduix-popover-control-height, var(--moduix-size-md));
+    padding: var(--moduix-popover-control-padding-y, var(--moduix-spacing-1))
+      var(--moduix-popover-control-padding-x, var(--moduix-spacing-3-5));
+    border: var(--moduix-popover-control-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-popover-control-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-popover-control-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-popover-control-bg, var(--moduix-color-background));
+    color: var(--moduix-popover-control-color, var(--moduix-color-foreground));
+    font: inherit;
+    font-size: var(--moduix-popover-control-font-size, var(--moduix-text-md));
+    line-height: var(--moduix-popover-control-line-height, var(--moduix-line-height-text-md));
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: pointer;
+    transition: background-color var(--moduix-popover-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-popover-transition, var(--moduix-transition-default)),
+      color var(--moduix-popover-transition, var(--moduix-transition-default));
+    outline: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    display: inline-flex;
+  }
+
+  @media (hover: hover) {
+    :is(.trigger-TuNfDY, .closeTrigger-g6dVFQ):hover {
+      background-color: var(--moduix-popover-control-bg-hover, var(--moduix-color-accent));
+    }
+  }
+
+  :is(.trigger-TuNfDY, .closeTrigger-g6dVFQ):active, :is(.trigger-TuNfDY, .closeTrigger-g6dVFQ)[data-state="open"]:not([data-value]), :is(.trigger-TuNfDY, .closeTrigger-g6dVFQ)[data-state="open"][data-current] {
+    background-color: var(--moduix-popover-control-bg-active, var(--moduix-popover-control-bg-hover, var(--moduix-color-accent)));
+  }
+
+  :is(.trigger-TuNfDY, .closeTrigger-g6dVFQ):focus-visible {
+    outline: var(--moduix-popover-focus-ring-width, var(--moduix-popover-control-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))))
+        solid var(--moduix-popover-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: calc(var(--moduix-popover-focus-ring-width, var(--moduix-popover-control-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))) *
+          -1);
+  }
+
+  :is(.trigger-TuNfDY, .closeTrigger-g6dVFQ)[data-disabled], :is(.trigger-TuNfDY, .closeTrigger-g6dVFQ)[disabled] {
+    pointer-events: none;
+    opacity: var(--moduix-popover-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .positioner-gqEojT {
+    z-index: var(--z-index, var(--moduix-z-popup));
+    max-width: var(--available-width);
+    outline: 0;
+  }
+
+  .content-QiLEpj {
+    --_popover-close-icon-size-effective: var(--moduix-popover-close-icon-size, var(--moduix-spacing-7));
+    --_popover-close-icon-offset-effective: var(--moduix-popover-close-icon-offset, var(--moduix-spacing-3));
+    --_popover-header-padding-inline-end-effective: var(--moduix-popover-header-padding-inline-end, calc(var(--_popover-close-icon-size-effective) + var(--_popover-close-icon-offset-effective)));
+    z-index: calc(var(--moduix-z-popup) + var(--layer-index, 0));
+    box-sizing: border-box;
+    width: var(--moduix-popover-width, auto);
+    height: var(--moduix-popover-height, auto);
+    min-width: min(var(--moduix-popover-min-width, 16rem), var(--available-width));
+    max-width: min(var(--moduix-popover-max-width, 28rem), var(--available-width));
+    max-height: min(var(--moduix-popover-max-height, 24rem), var(--available-height, 100dvh));
+    overflow-wrap: anywhere;
+    padding: var(--moduix-popover-padding-y, var(--moduix-spacing-4))
+      var(--moduix-popover-padding-x, var(--moduix-spacing-4));
+    border-radius: var(--moduix-popover-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-popover-bg, var(--moduix-color-popover));
+    color: var(--moduix-popover-color, var(--moduix-color-popover-foreground));
+    outline: var(--moduix-popover-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-popover-border-color, var(--moduix-color-border));
+    box-shadow: var(--moduix-popover-shadow, var(--moduix-shadow-lg));
+    transform-origin: var(--transform-origin);
+    border: 0;
+    position: relative;
+    overflow: visible;
+  }
+
+  .content-QiLEpj[data-state="open"] {
+    animation: popover-enter-Kmc_ZV
+        var(--moduix-popover-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-fast))
+            var(--moduix-popup-motion-easing, ease))
+        both;
+  }
+
+  .content-QiLEpj[data-state="closed"] {
+    animation: popover-exit-AUr4tl
+        var(--moduix-popover-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-fast))
+            var(--moduix-popup-motion-easing, ease))
+        both;
+  }
+
+  .content-QiLEpj:has( > .body-aMDFGV) {
+    flex-direction: column;
+    display: flex;
+  }
+
+  .content-QiLEpj:has( > .body-aMDFGV) > .body-aMDFGV {
+    min-block-size: 0;
+    overflow: auto;
+  }
+
+  .content-QiLEpj:has(.closeIcon-oldPto) .header-q59Ek4 {
+    padding-inline-end: var(--_popover-header-padding-inline-end-effective);
+  }
+
+  .arrow-B6fVya {
+    --arrow-size: var(--moduix-popover-arrow-size, var(--moduix-spacing-2-5));
+    --arrow-background: var(--moduix-popover-bg, var(--moduix-color-popover));
+  }
+
+  .arrowTip-HpILQT {
+    border-top: var(--moduix-popover-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-popover-arrow-stroke-color, var(--moduix-popover-border-color, var(--moduix-color-border)));
+    border-left: var(--moduix-popover-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-popover-arrow-stroke-color, var(--moduix-popover-border-color, var(--moduix-color-border)));
+  }
+
+  .title-o5I9x8 {
+    color: var(--moduix-popover-title-color, var(--moduix-popover-color, var(--moduix-color-popover-foreground)));
+    font-size: var(--moduix-popover-title-font-size, var(--moduix-text-md));
+    font-weight: var(--moduix-popover-title-font-weight, var(--moduix-weight-semibold));
+    line-height: var(--moduix-popover-title-line-height, var(--moduix-line-height-text-md));
+    margin: 0;
+  }
+
+  .description-ZrOS9P {
+    margin: var(--moduix-popover-description-margin, 0);
+    color: var(--moduix-popover-description-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-popover-description-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-popover-description-line-height, var(--moduix-line-height-text-sm));
+  }
+
+  .closeIcon-oldPto {
+    --moduix-close-button-size: var(--_popover-close-icon-size-effective);
+    --moduix-close-button-radius: var(--moduix-popover-close-icon-radius, var(--moduix-radius-sm));
+    --moduix-close-button-icon-size: var(--moduix-popover-close-icon-glyph-size, var(--moduix-spacing-3-5));
+    --moduix-close-button-bg: var(--moduix-popover-close-icon-bg, transparent);
+    --moduix-close-button-bg-hover: var(--moduix-popover-close-icon-bg-hover, var(--moduix-color-accent));
+    --moduix-close-button-color: var(--moduix-popover-close-icon-color, var(--moduix-color-muted-foreground));
+    --moduix-close-button-color-hover: var(--moduix-popover-close-icon-color-hover, var(--moduix-popover-color, var(--moduix-color-popover-foreground)));
+    --moduix-close-button-focus-ring-color: var(--moduix-popover-close-icon-focus-ring-color, var(--moduix-color-ring));
+    position: absolute;
+    inset-block-start: var(--_popover-close-icon-offset-effective);
+    inset-inline-end: var(--_popover-close-icon-offset-effective);
+  }
+
+  .header-q59Ek4 {
+    gap: var(--moduix-popover-header-gap, var(--moduix-spacing-1));
+    display: grid;
+  }
+
+  .body-aMDFGV {
+    margin: var(--moduix-popover-body-margin, 0);
+  }
+
+  .footer-laX930 {
+    align-items: center;
+    justify-content: var(--moduix-popover-footer-justify, flex-end);
+    gap: var(--moduix-popover-footer-gap, var(--moduix-spacing-2));
+    margin: var(--moduix-popover-footer-margin, var(--moduix-spacing-3) 0 0);
+    display: flex;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .trigger-TuNfDY, .closeTrigger-g6dVFQ {
+      transition: none;
+    }
+
+    .content-QiLEpj[data-state="open"], .content-QiLEpj[data-state="closed"] {
+      animation: none;
+    }
+  }
+
+  @keyframes popover-enter-Kmc_ZV {
+    from {
+      opacity: var(--moduix-popover-content-starting-opacity, var(--moduix-popup-motion-starting-opacity, 0));
+      translate: var(--moduix-popover-content-starting-translate-x, var(--moduix-popup-motion-starting-translate-x, 0))
+        var(--moduix-popover-content-starting-translate-y, var(--moduix-popup-motion-starting-translate-y, 0));
+      scale: var(--moduix-popover-content-starting-scale, var(--moduix-popup-motion-starting-scale, var(--moduix-scale-popup)));
+    }
+  }
+
+  @keyframes popover-exit-AUr4tl {
+    to {
+      opacity: var(--moduix-popover-content-ending-opacity, var(--moduix-popup-motion-ending-opacity, 0));
+      translate: var(--moduix-popover-content-ending-translate-x, var(--moduix-popup-motion-ending-translate-x, 0))
+        var(--moduix-popover-content-ending-translate-y, var(--moduix-popup-motion-ending-translate-y, 0));
+      scale: var(--moduix-popover-content-ending-scale, var(--moduix-popup-motion-ending-scale, var(--moduix-scale-popup)));
+    }
+  }
+}
+

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

@@ -0,0 +1,2 @@
+export { Popover, usePopover, usePopoverContext } from './Popover.js';
+export type { PopoverRootProps, PopoverRootProviderProps } from './Popover.js';

package/dist/components/popover/index.js

@@ -0,0 +1 @@
+export { Popover, usePopover, usePopoverContext } from "./Popover.js";

package/dist/components/popover/index.jsx

@@ -0,0 +1 @@
+export { Popover, usePopover, usePopoverContext } from "./Popover.jsx";

package/dist/components/progress-circular/ProgressCircular.d.ts

@@ -0,0 +1,28 @@
+import { Progress as ProgressPrimitive, useProgress, useProgressContext } from '@ark-ui/solid/progress';
+import type { ComponentProps } from 'solid-js';
+declare function ProgressCircularRoot(props: ComponentProps<typeof ProgressPrimitive.Root>): import("solid-js").JSX.Element;
+declare function ProgressCircularRootProvider(props: ComponentProps<typeof ProgressPrimitive.RootProvider>): import("solid-js").JSX.Element;
+declare function ProgressCircularLabel(props: ComponentProps<typeof ProgressPrimitive.Label>): import("solid-js").JSX.Element;
+declare function ProgressCircularValueText(props: ComponentProps<typeof ProgressPrimitive.ValueText>): import("solid-js").JSX.Element;
+declare function ProgressCircularCircle(props: ComponentProps<typeof ProgressPrimitive.Circle>): import("solid-js").JSX.Element;
+declare function ProgressCircularCircleTrack(props: ComponentProps<typeof ProgressPrimitive.CircleTrack>): import("solid-js").JSX.Element;
+declare function ProgressCircularCircleRange(props: ComponentProps<typeof ProgressPrimitive.CircleRange>): import("solid-js").JSX.Element;
+type ProgressCircularRingProps = Omit<ComponentProps<typeof ProgressPrimitive.Circle>, 'asChild' | 'children'>;
+declare function ProgressCircularRing(props: ProgressCircularRingProps): import("solid-js").JSX.Element;
+declare function ProgressCircularView(props: ComponentProps<typeof ProgressPrimitive.View>): import("solid-js").JSX.Element;
+type ProgressCircularComponent = typeof ProgressCircularRoot & {
+    Root: typeof ProgressCircularRoot;
+    RootProvider: typeof ProgressCircularRootProvider;
+    Context: typeof ProgressPrimitive.Context;
+    Label: typeof ProgressCircularLabel;
+    ValueText: typeof ProgressCircularValueText;
+    Circle: typeof ProgressCircularCircle;
+    CircleTrack: typeof ProgressCircularCircleTrack;
+    CircleRange: typeof ProgressCircularCircleRange;
+    Ring: typeof ProgressCircularRing;
+    View: typeof ProgressCircularView;
+    useProgress: typeof useProgress;
+    useProgressContext: typeof useProgressContext;
+};
+declare const ProgressCircular: ProgressCircularComponent;
+export { ProgressCircular };

package/dist/components/progress-circular/ProgressCircular.js

@@ -0,0 +1,165 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { Progress, useProgress, useProgressContext } from "@ark-ui/solid/progress";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import ProgressCircular_module from "./ProgressCircular.module.js";
+function ProgressCircularRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return createComponent(Progress.Root, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "progress-circular-root",
+        get ["class"] () {
+            return clsx(ProgressCircular_module.root, local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function ProgressCircularRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return createComponent(Progress.RootProvider, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "progress-circular-root-provider",
+        get ["class"] () {
+            return clsx(ProgressCircular_module.root, local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function ProgressCircularLabel(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Progress.Label, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "progress-circular-label",
+        get ["class"] () {
+            return clsx(ProgressCircular_module.label, local.class);
+        }
+    }, others));
+}
+function ProgressCircularValueText(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Progress.ValueText, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "progress-circular-value-text",
+        get ["class"] () {
+            return clsx(ProgressCircular_module.valueText, local.class);
+        }
+    }, others));
+}
+function ProgressCircularCircle(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return createComponent(Progress.Circle, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "progress-circular-circle",
+        get ["class"] () {
+            return clsx(ProgressCircular_module.circle, local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function ProgressCircularCircleTrack(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Progress.CircleTrack, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "progress-circular-circle-track",
+        get ["class"] () {
+            return clsx(ProgressCircular_module.circleTrack, local.class);
+        }
+    }, others));
+}
+function ProgressCircularCircleRange(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Progress.CircleRange, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "progress-circular-circle-range",
+        get ["class"] () {
+            return clsx(ProgressCircular_module.circleRange, local.class);
+        }
+    }, others));
+}
+function ProgressCircularRing(props) {
+    return createComponent(ProgressCircularCircle, mergeProps(props, {
+        get children () {
+            return [
+                createComponent(ProgressCircularCircleTrack, {}),
+                createComponent(ProgressCircularCircleRange, {})
+            ];
+        }
+    }));
+}
+function ProgressCircularView(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Progress.View, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "progress-circular-view",
+        get ["class"] () {
+            return clsx(ProgressCircular_module.view, local.class);
+        }
+    }, others));
+}
+const ProgressCircular = Object.assign(ProgressCircularRoot, {
+    Root: ProgressCircularRoot,
+    RootProvider: ProgressCircularRootProvider,
+    Context: Progress.Context,
+    Label: ProgressCircularLabel,
+    ValueText: ProgressCircularValueText,
+    Circle: ProgressCircularCircle,
+    CircleTrack: ProgressCircularCircleTrack,
+    CircleRange: ProgressCircularCircleRange,
+    Ring: ProgressCircularRing,
+    View: ProgressCircularView,
+    useProgress: useProgress,
+    useProgressContext: useProgressContext
+});
+export { ProgressCircular };