@moduix/solid-tailwind 1.0.0

package/dist/components/carousel/Carousel.js

@@ -0,0 +1,218 @@
+import { createComponent, insert, mergeProps, template } from "solid-js/web";
+import { Carousel, useCarousel, useCarouselContext } from "@ark-ui/solid/carousel";
+import { For, children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { ChevronLeftIcon, ChevronRightIcon } from "../../internal/icons/ui/Icons.js";
+var _tmpl$ = /*#__PURE__*/ template('<span class="inline-flex items-center justify-center">');
+function CarouselRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Carousel.Root, mergeProps({
+        "data-slot": "carousel-root",
+        get ["class"] () {
+            return cn('group/carousel flex w-full min-w-0 flex-col gap-3 data-[orientation=vertical]:h-96 data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch', local.class);
+        }
+    }, others));
+}
+function CarouselRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Carousel.RootProvider, mergeProps({
+        "data-slot": "carousel-root-provider",
+        get ["class"] () {
+            return cn('group/carousel flex w-full min-w-0 flex-col gap-3 data-[orientation=vertical]:h-96 data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch', local.class);
+        }
+    }, others));
+}
+function CarouselControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Carousel.Control, mergeProps({
+        "data-slot": "carousel-control",
+        get ["class"] () {
+            return cn('flex min-w-0 items-center gap-3 data-[orientation=vertical]:flex-col data-[orientation=vertical]:justify-between', local.class);
+        }
+    }, others));
+}
+function CarouselItemGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Carousel.ItemGroup, mergeProps({
+        "data-slot": "carousel-item-group",
+        get ["class"] () {
+            return cn('flex min-h-0 min-w-0 flex-1 [scrollbar-width:none] overscroll-x-contain overscroll-y-auto scroll-smooth rounded-xl outline-0 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring data-dragging:cursor-grabbing data-dragging:select-none data-[orientation=vertical]:h-full data-[orientation=vertical]:overscroll-x-auto data-[orientation=vertical]:overscroll-y-contain motion-reduce:scroll-auto [&::-webkit-scrollbar]:hidden', local.class);
+        }
+    }, others));
+}
+function CarouselItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Carousel.Item, mergeProps({
+        "data-slot": "carousel-item",
+        get ["class"] () {
+            return cn('box-border min-h-0 min-w-0', local.class);
+        }
+    }, others));
+}
+function CarouselPrevTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Carousel.PrevTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "carousel-prev-trigger",
+        get ["class"] () {
+            return cn('focus-visible:outline-offset-0.5 inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-foreground data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-foreground [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? (()=>{
+                var _el$ = _tmpl$();
+                insert(_el$, createComponent(ChevronLeftIcon, {
+                    class: "group-data-[orientation=vertical]/carousel:rotate-90 group-data-[orientation=horizontal]/carousel:rtl:rotate-180"
+                }));
+                return _el$;
+            })();
+        }
+    }));
+}
+function CarouselNextTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Carousel.NextTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "carousel-next-trigger",
+        get ["class"] () {
+            return cn('focus-visible:outline-offset-0.5 inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-foreground data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-foreground [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? (()=>{
+                var _el$2 = _tmpl$();
+                insert(_el$2, createComponent(ChevronRightIcon, {
+                    class: "group-data-[orientation=vertical]/carousel:rotate-90 group-data-[orientation=horizontal]/carousel:rtl:rotate-180"
+                }));
+                return _el$2;
+            })();
+        }
+    }));
+}
+function CarouselIndicatorGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Carousel.IndicatorGroup, mergeProps({
+        "data-slot": "carousel-indicator-group",
+        get ["class"] () {
+            return cn('flex items-center justify-center gap-2 data-[orientation=vertical]:flex-col', local.class);
+        }
+    }, others));
+}
+function CarouselIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Carousel.Indicator, mergeProps({
+        "data-slot": "carousel-indicator",
+        get ["class"] () {
+            return cn('focus-visible:outline-offset-0.5 size-2 cursor-pointer rounded-full border-0 bg-muted p-0 opacity-90 transition-[width,height,background-color,opacity] duration-150 focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-current:w-6 data-current:bg-primary data-current:opacity-100 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-readonly:cursor-not-allowed data-readonly:opacity-50 data-[orientation=vertical]:data-current:h-6 data-[orientation=vertical]:data-current:w-2 motion-reduce:transition-none forced-colors:bg-[ButtonText] forced-colors:data-current:bg-[Highlight] [&:not(:disabled):not([data-disabled]):not([data-readonly]):not([data-current]):hover]:bg-muted-foreground', local.class);
+        }
+    }, others));
+}
+function CarouselIndicators(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'children',
+        'indicatorClassName'
+    ]);
+    return createComponent(Carousel.Context, {
+        children: (api)=>createComponent(CarouselIndicatorGroup, mergeProps({
+                get ["class"] () {
+                    return local.class;
+                }
+            }, others, {
+                get children () {
+                    return createComponent(For, {
+                        get each () {
+                            return api().pageSnapPoints;
+                        },
+                        children: (_, index)=>createComponent(CarouselIndicator, {
+                                get index () {
+                                    return index();
+                                },
+                                get ["class"] () {
+                                    return local.indicatorClassName;
+                                }
+                            })
+                    });
+                }
+            }))
+    });
+}
+function CarouselAutoplayTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Carousel.AutoplayTrigger, mergeProps({
+        "data-slot": "carousel-autoplay-trigger",
+        get ["class"] () {
+            return cn('focus-visible:outline-offset-0.5 inline-flex size-control-md min-w-12 shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-foreground data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-foreground [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', local.class);
+        }
+    }, others));
+}
+function CarouselAutoplayIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Carousel.AutoplayIndicator, mergeProps({
+        "data-slot": "carousel-autoplay-indicator",
+        get ["class"] () {
+            return cn('inline-flex min-w-4 items-center justify-center text-xs font-medium uppercase', local.class);
+        }
+    }, others));
+}
+function CarouselProgressText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Carousel.ProgressText, mergeProps({
+        "data-slot": "carousel-progress-text",
+        dir: "ltr",
+        get ["class"] () {
+            return cn('text-sm text-muted-foreground tabular-nums [unicode-bidi:isolate]', local.class);
+        }
+    }, others));
+}
+const Carousel_Carousel = Object.assign(CarouselRoot, {
+    Root: CarouselRoot,
+    RootProvider: CarouselRootProvider,
+    Context: Carousel.Context,
+    Control: CarouselControl,
+    ItemGroup: CarouselItemGroup,
+    Item: CarouselItem,
+    PrevTrigger: CarouselPrevTrigger,
+    NextTrigger: CarouselNextTrigger,
+    IndicatorGroup: CarouselIndicatorGroup,
+    Indicator: CarouselIndicator,
+    Indicators: CarouselIndicators,
+    AutoplayTrigger: CarouselAutoplayTrigger,
+    AutoplayIndicator: CarouselAutoplayIndicator,
+    ProgressText: CarouselProgressText
+});
+export { Carousel_Carousel as Carousel, useCarousel, useCarouselContext };

package/dist/components/carousel/Carousel.jsx

@@ -0,0 +1,121 @@
+import { Carousel, useCarousel, useCarouselContext } from "@ark-ui/solid/carousel";
+import { For, children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { ChevronLeftIcon, ChevronRightIcon } from "../../internal/icons/ui/Icons.jsx";
+function CarouselRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Carousel.Root data-slot="carousel-root" class={cn('group/carousel flex w-full min-w-0 flex-col gap-3 data-[orientation=vertical]:h-96 data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch', local.class)} {...others}/>;
+}
+function CarouselRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Carousel.RootProvider data-slot="carousel-root-provider" class={cn('group/carousel flex w-full min-w-0 flex-col gap-3 data-[orientation=vertical]:h-96 data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch', local.class)} {...others}/>;
+}
+function CarouselControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Carousel.Control data-slot="carousel-control" class={cn('flex min-w-0 items-center gap-3 data-[orientation=vertical]:flex-col data-[orientation=vertical]:justify-between', local.class)} {...others}/>;
+}
+function CarouselItemGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Carousel.ItemGroup data-slot="carousel-item-group" class={cn('flex min-h-0 min-w-0 flex-1 [scrollbar-width:none] overscroll-x-contain overscroll-y-auto scroll-smooth rounded-xl outline-0 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring data-dragging:cursor-grabbing data-dragging:select-none data-[orientation=vertical]:h-full data-[orientation=vertical]:overscroll-x-auto data-[orientation=vertical]:overscroll-y-contain motion-reduce:scroll-auto [&::-webkit-scrollbar]:hidden', local.class)} {...others}/>;
+}
+function CarouselItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Carousel.Item data-slot="carousel-item" class={cn('box-border min-h-0 min-w-0', local.class)} {...others}/>;
+}
+function CarouselPrevTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Carousel.PrevTrigger asChild={local.asChild} data-slot="carousel-prev-trigger" class={cn('focus-visible:outline-offset-0.5 inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-foreground data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-foreground [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', local.class)} {...others}>
+      {resolvedChildren() ?? <span class="inline-flex items-center justify-center">
+          <ChevronLeftIcon class="group-data-[orientation=vertical]/carousel:rotate-90 group-data-[orientation=horizontal]/carousel:rtl:rotate-180"/>
+        </span>}
+    </Carousel.PrevTrigger>;
+}
+function CarouselNextTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Carousel.NextTrigger asChild={local.asChild} data-slot="carousel-next-trigger" class={cn('focus-visible:outline-offset-0.5 inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-foreground data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-foreground [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', local.class)} {...others}>
+      {resolvedChildren() ?? <span class="inline-flex items-center justify-center">
+          <ChevronRightIcon class="group-data-[orientation=vertical]/carousel:rotate-90 group-data-[orientation=horizontal]/carousel:rtl:rotate-180"/>
+        </span>}
+    </Carousel.NextTrigger>;
+}
+function CarouselIndicatorGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Carousel.IndicatorGroup data-slot="carousel-indicator-group" class={cn('flex items-center justify-center gap-2 data-[orientation=vertical]:flex-col', local.class)} {...others}/>;
+}
+function CarouselIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Carousel.Indicator data-slot="carousel-indicator" class={cn('focus-visible:outline-offset-0.5 size-2 cursor-pointer rounded-full border-0 bg-muted p-0 opacity-90 transition-[width,height,background-color,opacity] duration-150 focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-current:w-6 data-current:bg-primary data-current:opacity-100 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-readonly:cursor-not-allowed data-readonly:opacity-50 data-[orientation=vertical]:data-current:h-6 data-[orientation=vertical]:data-current:w-2 motion-reduce:transition-none forced-colors:bg-[ButtonText] forced-colors:data-current:bg-[Highlight] [&:not(:disabled):not([data-disabled]):not([data-readonly]):not([data-current]):hover]:bg-muted-foreground', local.class)} {...others}/>;
+}
+function CarouselIndicators(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'children',
+        'indicatorClassName'
+    ]);
+    return <Carousel.Context>
+      {(api)=><CarouselIndicatorGroup class={local.class} {...others}>
+          <For each={api().pageSnapPoints}>
+            {(_, index)=><CarouselIndicator index={index()} class={local.indicatorClassName}/>}
+          </For>
+        </CarouselIndicatorGroup>}
+    </Carousel.Context>;
+}
+function CarouselAutoplayTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Carousel.AutoplayTrigger data-slot="carousel-autoplay-trigger" class={cn('focus-visible:outline-offset-0.5 inline-flex size-control-md min-w-12 shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-foreground data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-foreground [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', local.class)} {...others}/>;
+}
+function CarouselAutoplayIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Carousel.AutoplayIndicator data-slot="carousel-autoplay-indicator" class={cn('inline-flex min-w-4 items-center justify-center text-xs font-medium uppercase', local.class)} {...others}/>;
+}
+function CarouselProgressText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Carousel.ProgressText data-slot="carousel-progress-text" dir="ltr" class={cn('text-sm text-muted-foreground tabular-nums [unicode-bidi:isolate]', local.class)} {...others}/>;
+}
+const Carousel_Carousel = Object.assign(CarouselRoot, {
+    Root: CarouselRoot,
+    RootProvider: CarouselRootProvider,
+    Context: Carousel.Context,
+    Control: CarouselControl,
+    ItemGroup: CarouselItemGroup,
+    Item: CarouselItem,
+    PrevTrigger: CarouselPrevTrigger,
+    NextTrigger: CarouselNextTrigger,
+    IndicatorGroup: CarouselIndicatorGroup,
+    Indicator: CarouselIndicator,
+    Indicators: CarouselIndicators,
+    AutoplayTrigger: CarouselAutoplayTrigger,
+    AutoplayIndicator: CarouselAutoplayIndicator,
+    ProgressText: CarouselProgressText
+});
+export { Carousel_Carousel as Carousel, useCarousel, useCarouselContext };

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

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

package/dist/components/carousel/index.js

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

package/dist/components/carousel/index.jsx

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

package/dist/components/chart/Chart.d.ts

@@ -0,0 +1,34 @@
+import { type HTMLArkProps } from '@ark-ui/solid/factory';
+import type { ChartRenderer, ChartRendererHostOptions, ChartTooltipBodyContext, ChartValue } from '@tanstack/charts';
+import { type JSX } from 'solid-js';
+type ChartTooltipBodyRenderContext<TDatum = unknown, TXValue extends ChartValue = ChartValue, TYValue extends ChartValue = ChartValue> = ChartTooltipBodyContext<TDatum, TXValue, TYValue> & {
+    defaultBody: JSX.Element;
+};
+type ChartTooltipBodyRenderProps<TDatum = unknown, TXValue extends ChartValue = ChartValue, TYValue extends ChartValue = ChartValue> = {
+    renderTooltipBody?: (context: ChartTooltipBodyRenderContext<TDatum, TXValue, TYValue>) => JSX.Element;
+};
+type ChartPlotProps<TDatum, TXValue extends ChartValue = ChartValue, TYValue extends ChartValue = ChartValue> = Omit<ChartRendererHostOptions<TDatum, TXValue, TYValue>, 'onTooltipBodyChange' | 'renderer'> & ChartTooltipBodyRenderProps<TDatum, TXValue, TYValue> & {
+    class?: string;
+    style?: JSX.CSSProperties;
+    motion?: boolean;
+    renderer?: ChartRenderer<NoInfer<TDatum>, NoInfer<TXValue>, NoInfer<TYValue>>;
+};
+declare function ChartRoot(props: HTMLArkProps<'figure'>): JSX.Element;
+declare function ChartPlot<TDatum, TXValue extends ChartValue = ChartValue, TYValue extends ChartValue = ChartValue>(props: ChartPlotProps<TDatum, TXValue, TYValue>): JSX.Element;
+declare function ChartHeader(props: HTMLArkProps<'figcaption'>): JSX.Element;
+declare function ChartTitle(props: HTMLArkProps<'h3'>): JSX.Element;
+declare function ChartDescription(props: HTMLArkProps<'p'>): JSX.Element;
+declare function ChartLegend(props: HTMLArkProps<'ul'>): JSX.Element;
+declare function ChartLegendItem(props: HTMLArkProps<'li'> & {
+    color?: string;
+}): JSX.Element;
+declare const Chart: typeof ChartRoot & {
+    Root: typeof ChartRoot;
+    Plot: typeof ChartPlot;
+    Header: typeof ChartHeader;
+    Title: typeof ChartTitle;
+    Description: typeof ChartDescription;
+    Legend: typeof ChartLegend;
+    LegendItem: typeof ChartLegendItem;
+};
+export { Chart };