@moduix/solid 1.0.0

package/dist/components/number-input/NumberInput.jsx

@@ -0,0 +1,98 @@
+import { NumberInput, useNumberInput, useNumberInputContext } from "@ark-ui/solid/number-input";
+import { clsx } from "clsx";
+import { children, splitProps } from "solid-js";
+import { MinusIcon, PlusIcon } from "../../internal/icons/ui/Icons.jsx";
+import NumberInput_module from "./NumberInput.module.jsx";
+function NumberInputRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'value'
+    ]);
+    return <NumberInput.Root asChild={local.asChild} value={local.value} data-slot="number-input-root" class={clsx(NumberInput_module.root, local.class)} {...others}>
+      {local.children}
+    </NumberInput.Root>;
+}
+function NumberInputRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'value'
+    ]);
+    return <NumberInput.RootProvider asChild={local.asChild} value={local.value} data-slot="number-input-root-provider" class={clsx(NumberInput_module.root, local.class)} {...others}>
+      {local.children}
+    </NumberInput.RootProvider>;
+}
+function NumberInputLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <NumberInput.Label data-slot="number-input-label" class={clsx(NumberInput_module.label, local.class)} {...others}/>;
+}
+function NumberInputScrubber(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <NumberInput.Scrubber data-slot="number-input-scrubber" class={clsx(NumberInput_module.scrubber, local.class)} {...others}/>;
+}
+function NumberInputControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <NumberInput.Control data-slot="number-input-control" class={clsx(NumberInput_module.control, local.class)} {...others}/>;
+}
+function NumberInputDecrementTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <NumberInput.DecrementTrigger data-slot="number-input-decrement-trigger" class={clsx(NumberInput_module.decrementTrigger, local.class)} {...others}>
+      {resolvedChildren() ?? <MinusIcon/>}
+    </NumberInput.DecrementTrigger>;
+}
+function NumberInputInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <NumberInput.Input data-slot="number-input-input" class={clsx(NumberInput_module.input, local.class)} {...others}/>;
+}
+function NumberInputIncrementTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <NumberInput.IncrementTrigger data-slot="number-input-increment-trigger" class={clsx(NumberInput_module.incrementTrigger, local.class)} {...others}>
+      {resolvedChildren() ?? <PlusIcon/>}
+    </NumberInput.IncrementTrigger>;
+}
+function NumberInputValueText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <NumberInput.ValueText data-slot="number-input-value-text" class={clsx(NumberInput_module.valueText, local.class)} {...others}/>;
+}
+function NumberInputField(props) {
+    return <NumberInputControl {...props}>
+      <NumberInputDecrementTrigger/>
+      <NumberInputInput/>
+      <NumberInputIncrementTrigger/>
+    </NumberInputControl>;
+}
+const NumberInput_NumberInput = Object.assign(NumberInputRoot, {
+    Root: NumberInputRoot,
+    RootProvider: NumberInputRootProvider,
+    Context: NumberInput.Context,
+    Label: NumberInputLabel,
+    Scrubber: NumberInputScrubber,
+    Control: NumberInputControl,
+    Field: NumberInputField,
+    DecrementTrigger: NumberInputDecrementTrigger,
+    Input: NumberInputInput,
+    IncrementTrigger: NumberInputIncrementTrigger,
+    ValueText: NumberInputValueText
+});
+export { NumberInput_NumberInput as NumberInput, useNumberInput, useNumberInputContext };

package/dist/components/number-input/NumberInput.module.js

@@ -0,0 +1,12 @@
+import "./NumberInput_module.css";
+const NumberInput_module = {
+    root: "root-J5l339",
+    label: "label-V0iygT",
+    scrubber: "scrubber-ZbVoIs",
+    control: "control-IKvJFM",
+    decrementTrigger: "decrementTrigger-gr_J6_",
+    incrementTrigger: "incrementTrigger-AZRSzr",
+    input: "input-MggWIT",
+    valueText: "valueText-lP90vp"
+};
+export default NumberInput_module;

package/dist/components/number-input/NumberInput.module.jsx

@@ -0,0 +1,12 @@
+import "./NumberInput_module.css";
+const NumberInput_module = {
+    root: "root-J5l339",
+    label: "label-V0iygT",
+    scrubber: "scrubber-ZbVoIs",
+    control: "control-IKvJFM",
+    decrementTrigger: "decrementTrigger-gr_J6_",
+    incrementTrigger: "incrementTrigger-AZRSzr",
+    input: "input-MggWIT",
+    valueText: "valueText-lP90vp"
+};
+export default NumberInput_module;

package/dist/components/number-input/NumberInput_module.css

@@ -0,0 +1,161 @@
+@layer moduix.components {
+  .root-J5l339 {
+    align-items: flex-start;
+    gap: var(--moduix-number-input-gap, var(--moduix-spacing-1));
+    width: var(--moduix-number-input-width, auto);
+    max-width: var(--moduix-number-input-max-width, none);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .root-J5l339[data-disabled] {
+    opacity: var(--moduix-number-input-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .label-V0iygT {
+    color: var(--moduix-number-input-label-color, var(--moduix-color-foreground));
+    font-size: var(--moduix-number-input-label-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-number-input-label-line-height, var(--moduix-line-height-text-sm));
+    font-weight: var(--moduix-number-input-label-font-weight, var(--moduix-weight-medium));
+  }
+
+  .scrubber-ZbVoIs {
+    align-items: center;
+    gap: var(--moduix-number-input-scrubber-gap, var(--moduix-spacing-2));
+    color: var(--moduix-number-input-scrubber-color, var(--moduix-color-foreground));
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: ew-resize;
+    display: inline-flex;
+  }
+
+  .scrubber-ZbVoIs[data-disabled] {
+    cursor: default;
+  }
+
+  .control-IKvJFM {
+    align-items: stretch;
+    display: inline-flex;
+  }
+
+  .decrementTrigger-gr_J6_, .incrementTrigger-AZRSzr {
+    --_number-input-focus-ring-width: var(--moduix-number-input-focus-ring-width, var(--moduix-number-input-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))));
+    box-sizing: border-box;
+    width: var(--moduix-number-input-control-height, var(--moduix-size-md));
+    min-width: var(--moduix-number-input-control-height, var(--moduix-size-md));
+    height: var(--moduix-number-input-control-height, var(--moduix-size-md));
+    border: var(--moduix-number-input-border-width, var(--moduix-border-width-sm))
+      var(--moduix-number-input-border-style, solid)
+      var(--moduix-number-input-border-color, var(--moduix-color-border));
+    background-color: var(--moduix-number-input-button-bg, var(--moduix-color-background));
+    color: var(--moduix-number-input-button-color, var(--moduix-color-foreground));
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: pointer;
+    transition: background-color var(--moduix-transition-default),
+      border-color var(--moduix-transition-default),
+      color var(--moduix-transition-default),
+      opacity var(--moduix-transition-default);
+    outline: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    display: inline-flex;
+  }
+
+  @media (hover: hover) {
+    :is(.decrementTrigger-gr_J6_, .incrementTrigger-AZRSzr):hover {
+      background-color: var(--moduix-number-input-button-bg-hover, var(--moduix-color-accent));
+    }
+  }
+
+  :is(.decrementTrigger-gr_J6_, .incrementTrigger-AZRSzr):active {
+    background-color: var(--moduix-number-input-button-bg-active, var(--moduix-number-input-button-bg-hover, var(--moduix-color-accent)));
+  }
+
+  :is(.decrementTrigger-gr_J6_, .incrementTrigger-AZRSzr):focus-visible, :is(.decrementTrigger-gr_J6_, .incrementTrigger-AZRSzr)[data-focus] {
+    outline: var(--_number-input-focus-ring-width) solid
+        var(--moduix-number-input-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: calc(var(--_number-input-focus-ring-width) * -1);
+    z-index: 1;
+  }
+
+  :is(.decrementTrigger-gr_J6_, .incrementTrigger-AZRSzr):is([data-disabled], :disabled) {
+    pointer-events: none;
+  }
+
+  :is(.decrementTrigger-gr_J6_, .incrementTrigger-AZRSzr)[data-invalid], .root-J5l339[data-invalid] :is(.decrementTrigger-gr_J6_, .incrementTrigger-AZRSzr) {
+    border-color: var(--moduix-number-input-border-color-invalid, var(--moduix-color-destructive));
+  }
+
+  :is(.decrementTrigger-gr_J6_, .incrementTrigger-AZRSzr) > svg {
+    width: var(--moduix-number-input-icon-size, var(--moduix-spacing-3-5));
+    height: var(--moduix-number-input-icon-size, var(--moduix-spacing-3-5));
+    flex-shrink: 0;
+  }
+
+  .decrementTrigger-gr_J6_ {
+    border-inline-end: 0;
+    border-start-start-radius: var(--moduix-number-input-radius, var(--moduix-radius-md));
+    border-end-start-radius: var(--moduix-number-input-radius, var(--moduix-radius-md));
+  }
+
+  .incrementTrigger-AZRSzr {
+    border-inline-start: 0;
+    border-start-end-radius: var(--moduix-number-input-radius, var(--moduix-radius-md));
+    border-end-end-radius: var(--moduix-number-input-radius, var(--moduix-radius-md));
+  }
+
+  .input-MggWIT {
+    --_number-input-focus-ring-width: var(--moduix-number-input-focus-ring-width, var(--moduix-number-input-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))));
+    box-sizing: border-box;
+    width: var(--moduix-number-input-input-width, 6rem);
+    height: var(--moduix-number-input-control-height, var(--moduix-size-md));
+    border-top: var(--moduix-number-input-border-width, var(--moduix-border-width-sm))
+      var(--moduix-number-input-border-style, solid)
+      var(--moduix-number-input-border-color, var(--moduix-color-border));
+    border-bottom: var(--moduix-number-input-border-width, var(--moduix-border-width-sm))
+      var(--moduix-number-input-border-style, solid)
+      var(--moduix-number-input-border-color, var(--moduix-color-border));
+    padding: var(--moduix-number-input-input-padding-y, var(--moduix-spacing-1))
+      var(--moduix-number-input-input-padding-x, var(--moduix-spacing-3));
+    background-color: var(--moduix-number-input-input-bg, var(--moduix-color-background));
+    color: var(--moduix-number-input-input-color, var(--moduix-color-foreground));
+    font: inherit;
+    font-size: var(--moduix-number-input-input-font-size, var(--moduix-text-md));
+    line-height: var(--moduix-number-input-input-line-height, var(--moduix-line-height-text-md));
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+    outline: var(--_number-input-focus-ring-width) solid transparent;
+    outline-offset: calc(var(--_number-input-focus-ring-width) * -1);
+    transition: border-color var(--moduix-transition-default),
+      outline-color var(--moduix-transition-default),
+      opacity var(--moduix-transition-default);
+    border-inline: 0;
+    border-radius: 0;
+    margin: 0;
+  }
+
+  .input-MggWIT:focus-visible, .input-MggWIT[data-focus] {
+    outline-color: var(--moduix-number-input-focus-ring-color, var(--moduix-color-ring));
+    z-index: 1;
+  }
+
+  .input-MggWIT[data-invalid], .root-J5l339[data-invalid] .input-MggWIT {
+    border-top-color: var(--moduix-number-input-border-color-invalid, var(--moduix-color-destructive));
+    border-bottom-color: var(--moduix-number-input-border-color-invalid, var(--moduix-color-destructive));
+  }
+
+  :is(.input-MggWIT[data-invalid], .root-J5l339[data-invalid] .input-MggWIT):focus-visible, :is(.input-MggWIT[data-invalid], .root-J5l339[data-invalid] .input-MggWIT)[data-focus] {
+    outline-color: var(--moduix-number-input-border-color-invalid, var(--moduix-color-destructive));
+  }
+
+  .valueText-lP90vp {
+    color: var(--moduix-number-input-value-text-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-number-input-value-text-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-number-input-value-text-line-height, var(--moduix-line-height-text-sm));
+    font-variant-numeric: tabular-nums;
+  }
+}
+

package/dist/components/number-input/index.d.ts

@@ -0,0 +1 @@
+export { NumberInput, useNumberInput, useNumberInputContext } from './NumberInput.js';

package/dist/components/number-input/index.js

@@ -0,0 +1 @@
+export { NumberInput, useNumberInput, useNumberInputContext } from "./NumberInput.js";

package/dist/components/number-input/index.jsx

@@ -0,0 +1 @@
+export { NumberInput, useNumberInput, useNumberInputContext } from "./NumberInput.jsx";

package/dist/components/pagination/Pagination.d.ts

@@ -0,0 +1,28 @@
+import { Pagination as PaginationPrimitive, usePagination, usePaginationContext } from '@ark-ui/solid/pagination';
+import type { ComponentProps } from 'solid-js';
+declare function PaginationRoot(props: ComponentProps<typeof PaginationPrimitive.Root>): import("solid-js").JSX.Element;
+declare function PaginationRootProvider(props: ComponentProps<typeof PaginationPrimitive.RootProvider>): import("solid-js").JSX.Element;
+declare function PaginationItem(props: ComponentProps<typeof PaginationPrimitive.Item>): import("solid-js").JSX.Element;
+declare function PaginationEllipsis(props: ComponentProps<typeof PaginationPrimitive.Ellipsis>): import("solid-js").JSX.Element;
+declare function PaginationPrevTrigger(props: ComponentProps<typeof PaginationPrimitive.PrevTrigger>): import("solid-js").JSX.Element;
+declare function PaginationNextTrigger(props: ComponentProps<typeof PaginationPrimitive.NextTrigger>): import("solid-js").JSX.Element;
+declare function PaginationFirstTrigger(props: ComponentProps<typeof PaginationPrimitive.FirstTrigger>): import("solid-js").JSX.Element;
+declare function PaginationLastTrigger(props: ComponentProps<typeof PaginationPrimitive.LastTrigger>): import("solid-js").JSX.Element;
+declare const PaginationContext: (props: PaginationPrimitive.ContextProps) => import("solid-js").JSX.Element;
+declare function PaginationItems(): import("solid-js").JSX.Element;
+type PaginationComponent = typeof PaginationRoot & {
+    Root: typeof PaginationRoot;
+    RootProvider: typeof PaginationRootProvider;
+    Item: typeof PaginationItem;
+    Ellipsis: typeof PaginationEllipsis;
+    PrevTrigger: typeof PaginationPrevTrigger;
+    NextTrigger: typeof PaginationNextTrigger;
+    FirstTrigger: typeof PaginationFirstTrigger;
+    LastTrigger: typeof PaginationLastTrigger;
+    Context: typeof PaginationContext;
+    Items: typeof PaginationItems;
+    usePagination: typeof usePagination;
+    usePaginationContext: typeof usePaginationContext;
+};
+declare const Pagination: PaginationComponent;
+export { Pagination, usePagination, usePaginationContext };

package/dist/components/pagination/Pagination.js

@@ -0,0 +1,220 @@
+import { className, createComponent, effect, insert, memo, mergeProps, template } from "solid-js/web";
+import { Pagination, usePagination, usePaginationContext } from "@ark-ui/solid/pagination";
+import { clsx } from "clsx";
+import { For, children, splitProps } from "solid-js";
+import { ChevronLeftIcon, ChevronRightIcon } from "../../internal/icons/ui/Icons.js";
+import Pagination_module from "./Pagination.module.js";
+var _tmpl$ = /*#__PURE__*/ template("<span aria-hidden>");
+function PaginationRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return createComponent(Pagination.Root, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "pagination-root",
+        get ["class"] () {
+            return clsx(Pagination_module.root, local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function PaginationRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return createComponent(Pagination.RootProvider, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "pagination-root-provider",
+        get ["class"] () {
+            return clsx(Pagination_module.root, local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function PaginationItem(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Pagination.Item, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "pagination-item",
+        get ["class"] () {
+            return clsx(Pagination_module.item, local.class);
+        }
+    }, others));
+}
+function PaginationEllipsis(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Pagination.Ellipsis, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "pagination-ellipsis",
+        get ["class"] () {
+            return clsx(Pagination_module.ellipsis, local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? (!local.asChild && '...');
+        }
+    }));
+}
+function EdgeIcon(props) {
+    return (()=>{
+        var _el$ = _tmpl$();
+        insert(_el$, (()=>{
+            var _c$ = memo(()=>'left' === props.side);
+            return ()=>_c$() ? createComponent(ChevronLeftIcon, {}) : createComponent(ChevronRightIcon, {});
+        })(), null);
+        insert(_el$, (()=>{
+            var _c$2 = memo(()=>'left' === props.side);
+            return ()=>_c$2() ? createComponent(ChevronLeftIcon, {}) : createComponent(ChevronRightIcon, {});
+        })(), null);
+        effect(()=>className(_el$, Pagination_module.edgeIcon));
+        return _el$;
+    })();
+}
+function PaginationPrevTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Pagination.PrevTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "pagination-prev-trigger",
+        get ["class"] () {
+            return clsx(Pagination_module.trigger, null == local.children && Pagination_module.iconTrigger, local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? (!local.asChild && createComponent(ChevronLeftIcon, {}));
+        }
+    }));
+}
+function PaginationNextTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Pagination.NextTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "pagination-next-trigger",
+        get ["class"] () {
+            return clsx(Pagination_module.trigger, null == local.children && Pagination_module.iconTrigger, local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? (!local.asChild && createComponent(ChevronRightIcon, {}));
+        }
+    }));
+}
+function PaginationFirstTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Pagination.FirstTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "pagination-first-trigger",
+        get ["class"] () {
+            return clsx(Pagination_module.trigger, null == local.children && Pagination_module.iconTrigger, local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? (!local.asChild && createComponent(EdgeIcon, {
+                side: "left"
+            }));
+        }
+    }));
+}
+function PaginationLastTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Pagination.LastTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "pagination-last-trigger",
+        get ["class"] () {
+            return clsx(Pagination_module.trigger, null == local.children && Pagination_module.iconTrigger, local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? (!local.asChild && createComponent(EdgeIcon, {
+                side: "right"
+            }));
+        }
+    }));
+}
+const PaginationContext = Pagination.Context;
+function PaginationItems() {
+    return createComponent(PaginationContext, {
+        children: (pagination)=>createComponent(For, {
+                get each () {
+                    return pagination().pages;
+                },
+                children: (page, index)=>'page' === page.type ? createComponent(PaginationItem, mergeProps(page, {
+                        get children () {
+                            return page.value;
+                        }
+                    })) : createComponent(PaginationEllipsis, {
+                        get index () {
+                            return index();
+                        }
+                    })
+            })
+    });
+}
+const Pagination_Pagination = Object.assign(PaginationRoot, {
+    Root: PaginationRoot,
+    RootProvider: PaginationRootProvider,
+    Item: PaginationItem,
+    Ellipsis: PaginationEllipsis,
+    PrevTrigger: PaginationPrevTrigger,
+    NextTrigger: PaginationNextTrigger,
+    FirstTrigger: PaginationFirstTrigger,
+    LastTrigger: PaginationLastTrigger,
+    Context: PaginationContext,
+    Items: PaginationItems,
+    usePagination: usePagination,
+    usePaginationContext: usePaginationContext
+});
+export { Pagination_Pagination as Pagination, usePagination, usePaginationContext };

package/dist/components/pagination/Pagination.jsx

@@ -0,0 +1,116 @@
+import { Pagination, usePagination, usePaginationContext } from "@ark-ui/solid/pagination";
+import { clsx } from "clsx";
+import { For, children, splitProps } from "solid-js";
+import { ChevronLeftIcon, ChevronRightIcon } from "../../internal/icons/ui/Icons.jsx";
+import Pagination_module from "./Pagination.module.jsx";
+function PaginationRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return <Pagination.Root asChild={local.asChild} data-slot="pagination-root" class={clsx(Pagination_module.root, local.class)} {...others}>
+      {local.children}
+    </Pagination.Root>;
+}
+function PaginationRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return <Pagination.RootProvider asChild={local.asChild} data-slot="pagination-root-provider" class={clsx(Pagination_module.root, local.class)} {...others}>
+      {local.children}
+    </Pagination.RootProvider>;
+}
+function PaginationItem(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Pagination.Item asChild={local.asChild} data-slot="pagination-item" class={clsx(Pagination_module.item, local.class)} {...others}/>;
+}
+function PaginationEllipsis(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Pagination.Ellipsis asChild={local.asChild} data-slot="pagination-ellipsis" class={clsx(Pagination_module.ellipsis, local.class)} {...others}>
+      {resolvedChildren() ?? (!local.asChild && '...')}
+    </Pagination.Ellipsis>;
+}
+function EdgeIcon(props) {
+    return <span class={Pagination_module.edgeIcon} aria-hidden>
+      {'left' === props.side ? <ChevronLeftIcon/> : <ChevronRightIcon/>}
+      {'left' === props.side ? <ChevronLeftIcon/> : <ChevronRightIcon/>}
+    </span>;
+}
+function PaginationPrevTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Pagination.PrevTrigger asChild={local.asChild} data-slot="pagination-prev-trigger" class={clsx(Pagination_module.trigger, null == local.children && Pagination_module.iconTrigger, local.class)} {...others}>
+      {resolvedChildren() ?? (!local.asChild && <ChevronLeftIcon/>)}
+    </Pagination.PrevTrigger>;
+}
+function PaginationNextTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Pagination.NextTrigger asChild={local.asChild} data-slot="pagination-next-trigger" class={clsx(Pagination_module.trigger, null == local.children && Pagination_module.iconTrigger, local.class)} {...others}>
+      {resolvedChildren() ?? (!local.asChild && <ChevronRightIcon/>)}
+    </Pagination.NextTrigger>;
+}
+function PaginationFirstTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Pagination.FirstTrigger asChild={local.asChild} data-slot="pagination-first-trigger" class={clsx(Pagination_module.trigger, null == local.children && Pagination_module.iconTrigger, local.class)} {...others}>
+      {resolvedChildren() ?? (!local.asChild && <EdgeIcon side="left"/>)}
+    </Pagination.FirstTrigger>;
+}
+function PaginationLastTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Pagination.LastTrigger asChild={local.asChild} data-slot="pagination-last-trigger" class={clsx(Pagination_module.trigger, null == local.children && Pagination_module.iconTrigger, local.class)} {...others}>
+      {resolvedChildren() ?? (!local.asChild && <EdgeIcon side="right"/>)}
+    </Pagination.LastTrigger>;
+}
+const PaginationContext = Pagination.Context;
+function PaginationItems() {
+    return <PaginationContext>
+      {(pagination)=><For each={pagination().pages}>
+          {(page, index)=>'page' === page.type ? <PaginationItem {...page}>{page.value}</PaginationItem> : <PaginationEllipsis index={index()}/>}
+        </For>}
+    </PaginationContext>;
+}
+const Pagination_Pagination = Object.assign(PaginationRoot, {
+    Root: PaginationRoot,
+    RootProvider: PaginationRootProvider,
+    Item: PaginationItem,
+    Ellipsis: PaginationEllipsis,
+    PrevTrigger: PaginationPrevTrigger,
+    NextTrigger: PaginationNextTrigger,
+    FirstTrigger: PaginationFirstTrigger,
+    LastTrigger: PaginationLastTrigger,
+    Context: PaginationContext,
+    Items: PaginationItems,
+    usePagination: usePagination,
+    usePaginationContext: usePaginationContext
+});
+export { Pagination_Pagination as Pagination, usePagination, usePaginationContext };

package/dist/components/pagination/Pagination.module.js

@@ -0,0 +1,10 @@
+import "./Pagination_module.css";
+const Pagination_module = {
+    root: "root-m3_o8c",
+    item: "item-TI2iyy",
+    trigger: "trigger-Z_SoJt",
+    ellipsis: "ellipsis-j46pnR",
+    iconTrigger: "iconTrigger-c2CUab",
+    edgeIcon: "edgeIcon-QA3FZr"
+};
+export default Pagination_module;