@moduix/solid-tailwind 1.0.0

package/dist/components/segment-group/SegmentGroup.js

@@ -0,0 +1,205 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { useFieldContext } from "@ark-ui/solid/field";
+import { useFieldsetContext } from "@ark-ui/solid/fieldset";
+import { SegmentGroup, useSegmentGroup, useSegmentGroupContext, useSegmentGroupItemContext } from "@ark-ui/solid/segment-group";
+import { For, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+function omitUndefined(props) {
+    return Object.fromEntries(Object.entries(props).filter(([, value])=>void 0 !== value));
+}
+function SegmentGroup_useSegmentGroup(props) {
+    const field = useFieldContext();
+    const fieldset = useFieldsetContext();
+    return useSegmentGroup(()=>{
+        const machineProps = 'function' == typeof props ? props() : props;
+        return omitUndefined({
+            disabled: field?.()?.disabled ?? fieldset?.()?.disabled,
+            invalid: field?.()?.invalid ?? fieldset?.()?.invalid,
+            readOnly: field?.()?.readOnly,
+            required: field?.()?.required,
+            ...omitUndefined(machineProps ?? {})
+        });
+    });
+}
+function SegmentGroupRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'defaultValue',
+        'disabled',
+        'form',
+        'id',
+        'ids',
+        'invalid',
+        'name',
+        'onValueChange',
+        'orientation',
+        'readOnly',
+        'required',
+        'value'
+    ]);
+    const segmentGroup = SegmentGroup_useSegmentGroup(()=>omitUndefined({
+            defaultValue: local.defaultValue,
+            disabled: local.disabled,
+            form: local.form,
+            id: local.id,
+            ids: local.ids,
+            invalid: local.invalid,
+            name: local.name,
+            onValueChange: local.onValueChange,
+            orientation: local.orientation ?? 'horizontal',
+            readOnly: local.readOnly,
+            required: local.required,
+            value: local.value
+        }));
+    return createComponent(SegmentGroup.RootProvider, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        value: segmentGroup,
+        "data-slot": "segment-group-root",
+        get ["class"] () {
+            return cn('group/segment-group relative isolate box-border inline-flex max-w-full items-stretch gap-1 rounded-lg border border-border bg-muted p-1 text-foreground data-disabled:opacity-50 data-invalid:border-destructive data-[orientation=vertical]:flex-col', local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function SegmentGroupRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(SegmentGroup.RootProvider, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "segment-group-root-provider",
+        get ["class"] () {
+            return cn('group/segment-group relative isolate box-border inline-flex max-w-full items-stretch gap-1 rounded-lg border border-border bg-muted p-1 text-foreground data-disabled:opacity-50 data-invalid:border-destructive data-[orientation=vertical]:flex-col', local.class);
+        }
+    }, others));
+}
+function SegmentGroupLabel(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(SegmentGroup.Label, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "segment-group-label",
+        get ["class"] () {
+            return cn('relative z-1 text-sm leading-5 font-semibold text-inherit select-none', local.class);
+        }
+    }, others));
+}
+function SegmentGroupItem(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return createComponent(SegmentGroup.Item, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "segment-group-item",
+        get ["class"] () {
+            return cn('relative z-1 box-border inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md px-3.5 text-sm leading-5 font-medium whitespace-nowrap text-muted-foreground outline-0 transition-[color,opacity] duration-200 ease-in-out select-none group-data-disabled/segment-group:!opacity-100 data-disabled:cursor-default data-disabled:opacity-50 data-focus-visible:outline-1 data-focus-visible:-outline-offset-1 data-focus-visible:outline-ring data-invalid:data-focus-visible:outline-destructive data-readonly:cursor-default data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-[state=checked]:text-foreground [@media(hover:hover)]:[&:not([data-readonly]):not([data-disabled]):hover]:text-foreground', local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function SegmentGroupItemControl(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(SegmentGroup.ItemControl, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "segment-group-item-control",
+        get ["class"] () {
+            return cn('hidden', local.class);
+        }
+    }, others));
+}
+function SegmentGroupItemText(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(SegmentGroup.ItemText, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "segment-group-item-text",
+        get ["class"] () {
+            return cn('relative z-1', local.class);
+        }
+    }, others));
+}
+function SegmentGroupIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(SegmentGroup.Indicator, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "segment-group-indicator",
+        get ["class"] () {
+            return cn('pointer-events-none absolute top-[var(--top)] left-[var(--left)] z-0 h-[var(--height)] w-[var(--width)] rounded-md bg-background shadow-sm !duration-200 !ease-in-out', local.class);
+        }
+    }, others));
+}
+function SegmentGroupItems(props) {
+    return createComponent(For, {
+        get each () {
+            return props.items;
+        },
+        children: (item)=>createComponent(SegmentGroupItem, {
+                get value () {
+                    return item.value;
+                },
+                get disabled () {
+                    return item.disabled;
+                },
+                get children () {
+                    return [
+                        createComponent(SegmentGroupItemText, {
+                            get children () {
+                                return item.label;
+                            }
+                        }),
+                        createComponent(SegmentGroupItemControl, {}),
+                        createComponent(SegmentGroup.ItemHiddenInput, {})
+                    ];
+                }
+            })
+    });
+}
+const SegmentGroup_SegmentGroup = Object.assign(SegmentGroupRoot, {
+    Root: SegmentGroupRoot,
+    RootProvider: SegmentGroupRootProvider,
+    Context: SegmentGroup.Context,
+    ItemContext: SegmentGroup.ItemContext,
+    Label: SegmentGroupLabel,
+    Item: SegmentGroupItem,
+    ItemHiddenInput: SegmentGroup.ItemHiddenInput,
+    ItemControl: SegmentGroupItemControl,
+    ItemText: SegmentGroupItemText,
+    Indicator: SegmentGroupIndicator,
+    Items: SegmentGroupItems
+});
+export { SegmentGroup_SegmentGroup as SegmentGroup, SegmentGroup_useSegmentGroup as useSegmentGroup, useSegmentGroupContext, useSegmentGroupItemContext };

package/dist/components/segment-group/SegmentGroup.jsx

@@ -0,0 +1,126 @@
+import { useFieldContext } from "@ark-ui/solid/field";
+import { useFieldsetContext } from "@ark-ui/solid/fieldset";
+import { SegmentGroup, useSegmentGroup, useSegmentGroupContext, useSegmentGroupItemContext } from "@ark-ui/solid/segment-group";
+import { For, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+function omitUndefined(props) {
+    return Object.fromEntries(Object.entries(props).filter(([, value])=>void 0 !== value));
+}
+function SegmentGroup_useSegmentGroup(props) {
+    const field = useFieldContext();
+    const fieldset = useFieldsetContext();
+    return useSegmentGroup(()=>{
+        const machineProps = 'function' == typeof props ? props() : props;
+        return omitUndefined({
+            disabled: field?.()?.disabled ?? fieldset?.()?.disabled,
+            invalid: field?.()?.invalid ?? fieldset?.()?.invalid,
+            readOnly: field?.()?.readOnly,
+            required: field?.()?.required,
+            ...omitUndefined(machineProps ?? {})
+        });
+    });
+}
+function SegmentGroupRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'defaultValue',
+        'disabled',
+        'form',
+        'id',
+        'ids',
+        'invalid',
+        'name',
+        'onValueChange',
+        'orientation',
+        'readOnly',
+        'required',
+        'value'
+    ]);
+    const segmentGroup = SegmentGroup_useSegmentGroup(()=>omitUndefined({
+            defaultValue: local.defaultValue,
+            disabled: local.disabled,
+            form: local.form,
+            id: local.id,
+            ids: local.ids,
+            invalid: local.invalid,
+            name: local.name,
+            onValueChange: local.onValueChange,
+            orientation: local.orientation ?? 'horizontal',
+            readOnly: local.readOnly,
+            required: local.required,
+            value: local.value
+        }));
+    return <SegmentGroup.RootProvider asChild={local.asChild} value={segmentGroup} data-slot="segment-group-root" class={cn('group/segment-group relative isolate box-border inline-flex max-w-full items-stretch gap-1 rounded-lg border border-border bg-muted p-1 text-foreground data-disabled:opacity-50 data-invalid:border-destructive data-[orientation=vertical]:flex-col', local.class)} {...others}>
+      {local.children}
+    </SegmentGroup.RootProvider>;
+}
+function SegmentGroupRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <SegmentGroup.RootProvider asChild={local.asChild} data-slot="segment-group-root-provider" class={cn('group/segment-group relative isolate box-border inline-flex max-w-full items-stretch gap-1 rounded-lg border border-border bg-muted p-1 text-foreground data-disabled:opacity-50 data-invalid:border-destructive data-[orientation=vertical]:flex-col', local.class)} {...others}/>;
+}
+function SegmentGroupLabel(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <SegmentGroup.Label asChild={local.asChild} data-slot="segment-group-label" class={cn('relative z-1 text-sm leading-5 font-semibold text-inherit select-none', local.class)} {...others}/>;
+}
+function SegmentGroupItem(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return <SegmentGroup.Item asChild={local.asChild} data-slot="segment-group-item" class={cn('relative z-1 box-border inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md px-3.5 text-sm leading-5 font-medium whitespace-nowrap text-muted-foreground outline-0 transition-[color,opacity] duration-200 ease-in-out select-none group-data-disabled/segment-group:!opacity-100 data-disabled:cursor-default data-disabled:opacity-50 data-focus-visible:outline-1 data-focus-visible:-outline-offset-1 data-focus-visible:outline-ring data-invalid:data-focus-visible:outline-destructive data-readonly:cursor-default data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-[state=checked]:text-foreground [@media(hover:hover)]:[&:not([data-readonly]):not([data-disabled]):hover]:text-foreground', local.class)} {...others}>
+      {local.children}
+    </SegmentGroup.Item>;
+}
+function SegmentGroupItemControl(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <SegmentGroup.ItemControl asChild={local.asChild} data-slot="segment-group-item-control" class={cn('hidden', local.class)} {...others}/>;
+}
+function SegmentGroupItemText(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <SegmentGroup.ItemText asChild={local.asChild} data-slot="segment-group-item-text" class={cn('relative z-1', local.class)} {...others}/>;
+}
+function SegmentGroupIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <SegmentGroup.Indicator asChild={local.asChild} data-slot="segment-group-indicator" class={cn('pointer-events-none absolute top-[var(--top)] left-[var(--left)] z-0 h-[var(--height)] w-[var(--width)] rounded-md bg-background shadow-sm !duration-200 !ease-in-out', local.class)} {...others}/>;
+}
+function SegmentGroupItems(props) {
+    return <For each={props.items}>
+      {(item)=><SegmentGroupItem value={item.value} disabled={item.disabled}>
+          <SegmentGroupItemText>{item.label}</SegmentGroupItemText>
+          <SegmentGroupItemControl/>
+          <SegmentGroup.ItemHiddenInput/>
+        </SegmentGroupItem>}
+    </For>;
+}
+const SegmentGroup_SegmentGroup = Object.assign(SegmentGroupRoot, {
+    Root: SegmentGroupRoot,
+    RootProvider: SegmentGroupRootProvider,
+    Context: SegmentGroup.Context,
+    ItemContext: SegmentGroup.ItemContext,
+    Label: SegmentGroupLabel,
+    Item: SegmentGroupItem,
+    ItemHiddenInput: SegmentGroup.ItemHiddenInput,
+    ItemControl: SegmentGroupItemControl,
+    ItemText: SegmentGroupItemText,
+    Indicator: SegmentGroupIndicator,
+    Items: SegmentGroupItems
+});
+export { SegmentGroup_SegmentGroup as SegmentGroup, SegmentGroup_useSegmentGroup as useSegmentGroup, useSegmentGroupContext, useSegmentGroupItemContext };

package/dist/components/segment-group/index.d.ts

@@ -0,0 +1 @@
+export { SegmentGroup, useSegmentGroup, useSegmentGroupContext, useSegmentGroupItemContext, } from './SegmentGroup.js';

package/dist/components/segment-group/index.js

@@ -0,0 +1 @@
+export { SegmentGroup, useSegmentGroup, useSegmentGroupContext, useSegmentGroupItemContext } from "./SegmentGroup.js";

package/dist/components/segment-group/index.jsx

@@ -0,0 +1 @@
+export { SegmentGroup, useSegmentGroup, useSegmentGroupContext, useSegmentGroupItemContext } from "./SegmentGroup.jsx";

package/dist/components/select/Select.d.ts

@@ -0,0 +1,57 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+import { Select as SelectPrimitive, type SelectRootComponent as ArkSelectRootComponent, type SelectRootProviderComponent as ArkSelectRootProviderComponent, useSelect, useSelectContext, useSelectItemContext } from '@ark-ui/solid/select';
+import type { ComponentProps, JSX } from 'solid-js';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
+type SelectFieldProps = Omit<ComponentProps<typeof SelectPrimitive.Control>, 'asChild' | 'children'> & {
+    clearLabel?: string;
+    indicator?: JSX.Element;
+    placeholder?: ComponentProps<typeof SelectPrimitive.ValueText>['placeholder'];
+};
+declare function SelectLabel(props: ComponentProps<typeof SelectPrimitive.Label>): JSX.Element;
+declare function SelectControl(props: ComponentProps<typeof SelectPrimitive.Control>): JSX.Element;
+declare function SelectTrigger(props: ComponentProps<typeof SelectPrimitive.Trigger>): JSX.Element;
+declare function SelectValueText(props: ComponentProps<typeof SelectPrimitive.ValueText>): JSX.Element;
+declare function SelectClearTrigger(props: ComponentProps<typeof SelectPrimitive.ClearTrigger>): JSX.Element;
+declare function SelectIndicator(props: ComponentProps<typeof SelectPrimitive.Indicator>): JSX.Element;
+declare function SelectField(props: SelectFieldProps): JSX.Element;
+declare function SelectPositioner(props: ComponentProps<typeof SelectPrimitive.Positioner>): JSX.Element;
+declare function SelectContent(props: ComponentProps<typeof SelectPrimitive.Content>): JSX.Element;
+declare function SelectList(props: ComponentProps<typeof SelectPrimitive.List>): JSX.Element;
+declare function SelectItemGroup(props: ComponentProps<typeof SelectPrimitive.ItemGroup>): JSX.Element;
+declare function SelectItemGroupLabel(props: ComponentProps<typeof SelectPrimitive.ItemGroupLabel>): JSX.Element;
+declare function SelectItem(props: ComponentProps<typeof SelectPrimitive.Item>): JSX.Element;
+declare function SelectItemText(props: ComponentProps<typeof SelectPrimitive.ItemText>): JSX.Element;
+declare function SelectItemIndicator(props: ComponentProps<typeof SelectPrimitive.ItemIndicator>): JSX.Element;
+declare function SelectItemTextContent(props: HTMLArkProps<'span'>): JSX.Element;
+declare function SelectItemTextIcon(props: HTMLArkProps<'span'>): JSX.Element;
+declare function SelectItemTextLabel(props: HTMLArkProps<'span'>): JSX.Element;
+type SelectComponent = ArkSelectRootComponent<OverlayPortalProps> & {
+    Root: ArkSelectRootComponent<OverlayPortalProps>;
+    RootProvider: ArkSelectRootProviderComponent<OverlayPortalProps>;
+    Context: typeof SelectPrimitive.Context;
+    HiddenSelect: typeof SelectPrimitive.HiddenSelect;
+    ItemContext: typeof SelectPrimitive.ItemContext;
+    useSelect: typeof useSelect;
+    useSelectContext: typeof useSelectContext;
+    useSelectItemContext: typeof useSelectItemContext;
+    Label: typeof SelectLabel;
+    Control: typeof SelectControl;
+    Field: typeof SelectField;
+    Trigger: typeof SelectTrigger;
+    ValueText: typeof SelectValueText;
+    ClearTrigger: typeof SelectClearTrigger;
+    Indicator: typeof SelectIndicator;
+    Positioner: typeof SelectPositioner;
+    Content: typeof SelectContent;
+    List: typeof SelectList;
+    ItemGroup: typeof SelectItemGroup;
+    ItemGroupLabel: typeof SelectItemGroupLabel;
+    Item: typeof SelectItem;
+    ItemText: typeof SelectItemText;
+    ItemIndicator: typeof SelectItemIndicator;
+    ItemTextContent: typeof SelectItemTextContent;
+    ItemTextIcon: typeof SelectItemTextIcon;
+    ItemTextLabel: typeof SelectItemTextLabel;
+};
+declare const Select: SelectComponent;
+export { Select, useSelect, useSelectContext, useSelectItemContext };