@moduix/solid-tailwind 1.0.0

package/dist/components/button/Button.jsx

@@ -0,0 +1,75 @@
+import { useFocusVisible } from "@ark-ui/solid";
+import { ark } from "@ark-ui/solid/factory";
+import { cva } from "class-variance-authority";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+const buttonVariants = cva("inline-flex cursor-pointer items-center justify-center gap-2 rounded-md border text-sm font-medium no-underline outline-0 appearance-none transition-[background-color,border-color,color,opacity,transform] duration-200 ease-in-out select-none whitespace-nowrap data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 data-loading:cursor-progress motion-reduce:transition-none motion-safe:[&:not([data-variant='link']):active]:translate-y-px [&:focus[data-focus-visible]]:-outline-offset-1 [&:focus[data-focus-visible]]:outline-2 [&:focus[data-focus-visible]]:outline-ring [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0", {
+    variants: {
+        variant: {
+            default: 'border-primary bg-primary text-primary-foreground hover:bg-[color-mix(in_srgb,var(--color-primary)_88%,black)]',
+            outline: 'border-border bg-background text-foreground hover:bg-accent',
+            secondary: 'border-secondary bg-secondary text-secondary-foreground hover:bg-accent',
+            destructive: 'border-destructive bg-destructive text-destructive-foreground hover:brightness-[0.96]',
+            'destructive-outline': 'border-destructive bg-background text-destructive hover:bg-destructive hover:text-destructive-foreground',
+            ghost: 'border-transparent bg-transparent text-foreground hover:bg-accent',
+            link: 'border-transparent bg-transparent text-primary underline underline-offset-[0.25em] hover:text-foreground'
+        },
+        size: {
+            xs: 'min-h-control-xs px-2.5 py-0.5 text-xs',
+            sm: 'min-h-control-sm px-3 py-1 text-sm',
+            md: 'min-h-control-md px-4 py-1 text-sm',
+            lg: 'min-h-control-lg px-5 py-1.5 text-md',
+            xl: 'min-h-control-xl px-6 py-2 text-lg',
+            'icon-sm': 'size-control-sm min-w-control-sm gap-0 p-0',
+            'icon-md': 'size-control-md min-w-control-md gap-0 p-0',
+            'icon-lg': 'size-control-lg min-w-control-lg gap-0 p-0'
+        }
+    },
+    compoundVariants: [
+        {
+            variant: 'link',
+            class: 'min-h-0 py-0'
+        }
+    ],
+    defaultVariants: {
+        variant: 'default',
+        size: 'md'
+    }
+});
+const ArkButton = ark.button;
+function ButtonRoot(props) {
+    const focusVisible = useFocusVisible();
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'disabled',
+        'loading',
+        'onClick',
+        'onClickCapture',
+        'size',
+        'type',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'variant',
+        'aria-busy',
+        'aria-disabled'
+    ]);
+    const isDisabled = ()=>local.disabled || local.loading || true === local['aria-disabled'] || 'true' === local['aria-disabled'];
+    const handleClickCapture = (event)=>{
+        if (isDisabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        local.onClickCapture?.(event);
+    };
+    return <ArkButton asChild={local.asChild} {...others} type={local.asChild ? local.type : local.type ?? 'button'} disabled={local.asChild ? void 0 : isDisabled()} aria-busy={local.loading ? true : local['aria-busy']} aria-disabled={isDisabled() ? true : local['aria-disabled']} oncapture:click={handleClickCapture} onClick={local.onClick} data-scope={local['data-scope'] ?? 'button'} data-part={local['data-part'] ?? 'root'} data-slot={local['data-slot'] ?? 'button-root'} data-variant={local.variant ?? 'default'} data-size={local.size ?? 'md'} data-disabled={isDisabled() ? '' : void 0} data-focus-visible={focusVisible() ? '' : void 0} data-loading={local.loading ? '' : void 0} class={cn(buttonVariants({
+        variant: local.variant,
+        size: local.size
+    }), local.class)}/>;
+}
+const Button = Object.assign(ButtonRoot, {
+    Root: ButtonRoot
+});
+export { Button };

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

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

package/dist/components/button/index.js

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

package/dist/components/button/index.jsx

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

package/dist/components/card/Card.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+type CardRootProps = HTMLArkProps<'div'> & {
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'elevated' | 'outline' | 'subtle';
+};
+declare function CardRoot(props: CardRootProps): import("solid-js").JSX.Element;
+declare function CardHeader(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function CardBody(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function CardMedia(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function CardBackground(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function CardFooter(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function CardTitle(props: HTMLArkProps<'h3'>): import("solid-js").JSX.Element;
+declare function CardDescription(props: HTMLArkProps<'p'>): import("solid-js").JSX.Element;
+declare function CardAction(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function CardLink(props: HTMLArkProps<'a'>): import("solid-js").JSX.Element;
+declare const Card: typeof CardRoot & {
+    Root: typeof CardRoot;
+    Header: typeof CardHeader;
+    Body: typeof CardBody;
+    Media: typeof CardMedia;
+    Background: typeof CardBackground;
+    Footer: typeof CardFooter;
+    Title: typeof CardTitle;
+    Description: typeof CardDescription;
+    Action: typeof CardAction;
+    Link: typeof CardLink;
+};
+export { Card };

package/dist/components/card/Card.js

@@ -0,0 +1,210 @@
+import { 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 cardRootVariants = cva('group/card relative flex w-full min-w-0 flex-col rounded-lg text-card-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring has-[>[data-slot=card-background]]:isolate [&:has(>[data-slot=card-background])>*:not([data-slot=card-background])]:z-1 [&:has([data-slot=card-link])_:is(a,button,input,select,textarea,[role=button],[role=checkbox],[role=menuitem],[role=switch],[tabindex]:not([tabindex=-1])):not([data-slot=card-link])]:relative [&:has([data-slot=card-link])_:is(a,button,input,select,textarea,[role=button],[role=checkbox],[role=menuitem],[role=switch],[tabindex]:not([tabindex=-1])):not([data-slot=card-link])]:z-1', {
+    variants: {
+        variant: {
+            elevated: 'border-0 bg-card shadow-md',
+            outline: 'border border-border bg-card',
+            subtle: 'border-0 bg-muted'
+        }
+    },
+    defaultVariants: {
+        variant: 'outline'
+    }
+});
+function CardRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'size',
+        'variant'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-scope": "card",
+        "data-part": "root",
+        "data-slot": "card-root",
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
+        get ["data-variant"] () {
+            return local.variant ?? 'outline';
+        },
+        get ["class"] () {
+            return cn(cardRootVariants({
+                variant: local.variant
+            }), local.class);
+        }
+    }, others));
+}
+function CardHeader(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-scope": "card",
+        "data-part": "header",
+        "data-slot": "card-header",
+        get ["class"] () {
+            return cn('grid min-w-0 grid-cols-[minmax(0,1fr)_auto] gap-x-2 gap-y-1 px-6 pt-6 group-data-[size=lg]/card:px-8 group-data-[size=lg]/card:pt-8 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:pt-4', local.class);
+        }
+    }, others));
+}
+function CardBody(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-scope": "card",
+        "data-part": "body",
+        "data-slot": "card-body",
+        get ["class"] () {
+            return cn('min-w-0 px-6 pt-4 pb-6 text-sm wrap-anywhere text-muted-foreground group-data-[size=lg]/card:px-8 group-data-[size=lg]/card:pb-8 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:pb-4 first:pt-6 group-data-[size=lg]/card:first:pt-8 group-data-[size=sm]/card:first:pt-4', local.class);
+        }
+    }, others));
+}
+function CardMedia(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-scope": "card",
+        "data-part": "media",
+        "data-slot": "card-media",
+        get ["class"] () {
+            return cn('min-w-0 overflow-hidden rounded-ss-[inherit] rounded-se-[inherit] [&>:is(img,picture,video,canvas,svg,iframe)]:w-full [&>picture]:block [&>picture>img]:w-full', local.class);
+        }
+    }, others));
+}
+function CardBackground(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-scope": "card",
+        "data-part": "background",
+        "data-slot": "card-background",
+        get ["class"] () {
+            return cn('absolute inset-0 z-0 overflow-hidden rounded-[inherit] [&>:is(img,picture,video,canvas,svg,iframe)]:size-full [&>:is(img,picture,video,canvas,svg,iframe)]:object-cover [&>picture]:block [&>picture>img]:size-full [&>picture>img]:object-cover', local.class);
+        }
+    }, others));
+}
+function CardFooter(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-scope": "card",
+        "data-part": "footer",
+        "data-slot": "card-footer",
+        get ["class"] () {
+            return cn('flex min-w-0 flex-wrap items-center gap-2 px-6 pb-6 group-data-[size=lg]/card:px-8 group-data-[size=lg]/card:pb-8 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:pb-4', local.class);
+        }
+    }, others));
+}
+function CardTitle(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(ark.h3, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-scope": "card",
+        "data-part": "title",
+        "data-slot": "card-title",
+        get ["class"] () {
+            return cn('col-start-1 min-w-0 text-lg font-semibold wrap-anywhere group-data-[size=lg]/card:text-xl group-data-[size=sm]/card:text-md', local.class);
+        }
+    }, others));
+}
+function CardDescription(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(ark.p, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-scope": "card",
+        "data-part": "description",
+        "data-slot": "card-description",
+        get ["class"] () {
+            return cn('col-start-1 min-w-0 text-sm wrap-anywhere text-muted-foreground', local.class);
+        }
+    }, others));
+}
+function CardAction(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-scope": "card",
+        "data-part": "action",
+        "data-slot": "card-action",
+        get ["class"] () {
+            return cn('relative z-1 col-start-2 row-span-2 row-start-1 inline-flex items-start justify-end gap-2 justify-self-end', local.class);
+        }
+    }, others));
+}
+function CardLink(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(ark.a, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-scope": "card",
+        "data-part": "link",
+        "data-slot": "card-link",
+        get ["class"] () {
+            return cn('static text-inherit no-underline after:absolute after:inset-0 after:z-0 after:rounded-lg focus-visible:outline-0 focus-visible:after:outline-2 focus-visible:after:outline-offset-1 focus-visible:after:outline-ring', local.class);
+        }
+    }, others));
+}
+const Card = Object.assign(CardRoot, {
+    Root: CardRoot,
+    Header: CardHeader,
+    Body: CardBody,
+    Media: CardMedia,
+    Background: CardBackground,
+    Footer: CardFooter,
+    Title: CardTitle,
+    Description: CardDescription,
+    Action: CardAction,
+    Link: CardLink
+});
+export { Card };

package/dist/components/card/Card.jsx

@@ -0,0 +1,103 @@
+import { ark } from "@ark-ui/solid/factory";
+import { cva } from "class-variance-authority";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+const cardRootVariants = cva('group/card relative flex w-full min-w-0 flex-col rounded-lg text-card-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring has-[>[data-slot=card-background]]:isolate [&:has(>[data-slot=card-background])>*:not([data-slot=card-background])]:z-1 [&:has([data-slot=card-link])_:is(a,button,input,select,textarea,[role=button],[role=checkbox],[role=menuitem],[role=switch],[tabindex]:not([tabindex=-1])):not([data-slot=card-link])]:relative [&:has([data-slot=card-link])_:is(a,button,input,select,textarea,[role=button],[role=checkbox],[role=menuitem],[role=switch],[tabindex]:not([tabindex=-1])):not([data-slot=card-link])]:z-1', {
+    variants: {
+        variant: {
+            elevated: 'border-0 bg-card shadow-md',
+            outline: 'border border-border bg-card',
+            subtle: 'border-0 bg-muted'
+        }
+    },
+    defaultVariants: {
+        variant: 'outline'
+    }
+});
+function CardRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'size',
+        'variant'
+    ]);
+    return <ark.div asChild={local.asChild} data-scope="card" data-part="root" data-slot="card-root" data-size={local.size ?? 'md'} data-variant={local.variant ?? 'outline'} class={cn(cardRootVariants({
+        variant: local.variant
+    }), local.class)} {...others}/>;
+}
+function CardHeader(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.div asChild={local.asChild} data-scope="card" data-part="header" data-slot="card-header" class={cn('grid min-w-0 grid-cols-[minmax(0,1fr)_auto] gap-x-2 gap-y-1 px-6 pt-6 group-data-[size=lg]/card:px-8 group-data-[size=lg]/card:pt-8 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:pt-4', local.class)} {...others}/>;
+}
+function CardBody(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.div asChild={local.asChild} data-scope="card" data-part="body" data-slot="card-body" class={cn('min-w-0 px-6 pt-4 pb-6 text-sm wrap-anywhere text-muted-foreground group-data-[size=lg]/card:px-8 group-data-[size=lg]/card:pb-8 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:pb-4 first:pt-6 group-data-[size=lg]/card:first:pt-8 group-data-[size=sm]/card:first:pt-4', local.class)} {...others}/>;
+}
+function CardMedia(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.div asChild={local.asChild} data-scope="card" data-part="media" data-slot="card-media" class={cn('min-w-0 overflow-hidden rounded-ss-[inherit] rounded-se-[inherit] [&>:is(img,picture,video,canvas,svg,iframe)]:w-full [&>picture]:block [&>picture>img]:w-full', local.class)} {...others}/>;
+}
+function CardBackground(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.div asChild={local.asChild} data-scope="card" data-part="background" data-slot="card-background" class={cn('absolute inset-0 z-0 overflow-hidden rounded-[inherit] [&>:is(img,picture,video,canvas,svg,iframe)]:size-full [&>:is(img,picture,video,canvas,svg,iframe)]:object-cover [&>picture]:block [&>picture>img]:size-full [&>picture>img]:object-cover', local.class)} {...others}/>;
+}
+function CardFooter(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.div asChild={local.asChild} data-scope="card" data-part="footer" data-slot="card-footer" class={cn('flex min-w-0 flex-wrap items-center gap-2 px-6 pb-6 group-data-[size=lg]/card:px-8 group-data-[size=lg]/card:pb-8 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:pb-4', local.class)} {...others}/>;
+}
+function CardTitle(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.h3 asChild={local.asChild} data-scope="card" data-part="title" data-slot="card-title" class={cn('col-start-1 min-w-0 text-lg font-semibold wrap-anywhere group-data-[size=lg]/card:text-xl group-data-[size=sm]/card:text-md', local.class)} {...others}/>;
+}
+function CardDescription(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.p asChild={local.asChild} data-scope="card" data-part="description" data-slot="card-description" class={cn('col-start-1 min-w-0 text-sm wrap-anywhere text-muted-foreground', local.class)} {...others}/>;
+}
+function CardAction(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.div asChild={local.asChild} data-scope="card" data-part="action" data-slot="card-action" class={cn('relative z-1 col-start-2 row-span-2 row-start-1 inline-flex items-start justify-end gap-2 justify-self-end', local.class)} {...others}/>;
+}
+function CardLink(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.a asChild={local.asChild} data-scope="card" data-part="link" data-slot="card-link" class={cn('static text-inherit no-underline after:absolute after:inset-0 after:z-0 after:rounded-lg focus-visible:outline-0 focus-visible:after:outline-2 focus-visible:after:outline-offset-1 focus-visible:after:outline-ring', local.class)} {...others}/>;
+}
+const Card = Object.assign(CardRoot, {
+    Root: CardRoot,
+    Header: CardHeader,
+    Body: CardBody,
+    Media: CardMedia,
+    Background: CardBackground,
+    Footer: CardFooter,
+    Title: CardTitle,
+    Description: CardDescription,
+    Action: CardAction,
+    Link: CardLink
+});
+export { Card };

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

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

package/dist/components/card/index.js

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

package/dist/components/card/index.jsx

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

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

@@ -0,0 +1,35 @@
+import { Carousel as CarouselPrimitive, useCarousel, useCarouselContext } from '@ark-ui/solid/carousel';
+import type { ComponentProps } from 'solid-js';
+declare function CarouselRoot(props: ComponentProps<typeof CarouselPrimitive.Root>): import("solid-js").JSX.Element;
+declare function CarouselRootProvider(props: ComponentProps<typeof CarouselPrimitive.RootProvider>): import("solid-js").JSX.Element;
+declare function CarouselControl(props: ComponentProps<typeof CarouselPrimitive.Control>): import("solid-js").JSX.Element;
+declare function CarouselItemGroup(props: ComponentProps<typeof CarouselPrimitive.ItemGroup>): import("solid-js").JSX.Element;
+declare function CarouselItem(props: ComponentProps<typeof CarouselPrimitive.Item>): import("solid-js").JSX.Element;
+declare function CarouselPrevTrigger(props: ComponentProps<typeof CarouselPrimitive.PrevTrigger>): import("solid-js").JSX.Element;
+declare function CarouselNextTrigger(props: ComponentProps<typeof CarouselPrimitive.NextTrigger>): import("solid-js").JSX.Element;
+declare function CarouselIndicatorGroup(props: ComponentProps<typeof CarouselPrimitive.IndicatorGroup>): import("solid-js").JSX.Element;
+declare function CarouselIndicator(props: ComponentProps<typeof CarouselPrimitive.Indicator>): import("solid-js").JSX.Element;
+type CarouselIndicatorsProps = ComponentProps<typeof CarouselPrimitive.IndicatorGroup> & {
+    indicatorClassName?: string;
+};
+declare function CarouselIndicators(props: CarouselIndicatorsProps): import("solid-js").JSX.Element;
+declare function CarouselAutoplayTrigger(props: ComponentProps<typeof CarouselPrimitive.AutoplayTrigger>): import("solid-js").JSX.Element;
+declare function CarouselAutoplayIndicator(props: ComponentProps<typeof CarouselPrimitive.AutoplayIndicator>): import("solid-js").JSX.Element;
+declare function CarouselProgressText(props: ComponentProps<typeof CarouselPrimitive.ProgressText>): import("solid-js").JSX.Element;
+declare const Carousel: typeof CarouselRoot & {
+    Root: typeof CarouselRoot;
+    RootProvider: typeof CarouselRootProvider;
+    Context: (props: CarouselPrimitive.ContextProps) => import("solid-js").JSX.Element;
+    Control: typeof CarouselControl;
+    ItemGroup: typeof CarouselItemGroup;
+    Item: typeof CarouselItem;
+    PrevTrigger: typeof CarouselPrevTrigger;
+    NextTrigger: typeof CarouselNextTrigger;
+    IndicatorGroup: typeof CarouselIndicatorGroup;
+    Indicator: typeof CarouselIndicator;
+    Indicators: typeof CarouselIndicators;
+    AutoplayTrigger: typeof CarouselAutoplayTrigger;
+    AutoplayIndicator: typeof CarouselAutoplayIndicator;
+    ProgressText: typeof CarouselProgressText;
+};
+export { Carousel, useCarousel, useCarouselContext };