@moduix/solid 1.0.0

package/dist/components/segment-group/SegmentGroup_module.css

@@ -0,0 +1,127 @@
+@layer moduix.components {
+  .root-Bd4lNR {
+    box-sizing: border-box;
+    isolation: isolate;
+    max-inline-size: var(--moduix-segment-group-max-width, 100%);
+    align-items: stretch;
+    gap: var(--moduix-segment-group-gap, var(--moduix-spacing-1));
+    padding: var(--moduix-segment-group-padding, var(--moduix-spacing-1));
+    border: var(--moduix-segment-group-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-segment-group-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-segment-group-radius, var(--moduix-radius-lg));
+    background-color: var(--moduix-segment-group-bg, var(--moduix-color-muted));
+    color: var(--moduix-segment-group-color, var(--moduix-color-foreground));
+    display: inline-flex;
+    position: relative;
+  }
+
+  .root-Bd4lNR[data-orientation="vertical"] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .root-Bd4lNR[data-disabled] {
+    opacity: var(--moduix-segment-group-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .root-Bd4lNR:not([data-disabled]) .item-YWqgii[data-disabled] {
+    opacity: var(--moduix-segment-group-item-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .root-Bd4lNR[data-invalid] {
+    border-color: var(--moduix-segment-group-border-color-invalid, var(--moduix-color-destructive));
+  }
+
+  .label-shCFGn {
+    z-index: 1;
+    color: var(--moduix-segment-group-label-color, var(--moduix-segment-group-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-segment-group-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-segment-group-label-font-weight, var(--moduix-weight-semibold));
+    line-height: var(--moduix-segment-group-label-line-height, var(--moduix-line-height-text-sm));
+    -webkit-user-select: none;
+    user-select: none;
+    position: relative;
+  }
+
+  .item-YWqgii {
+    box-sizing: border-box;
+    z-index: 1;
+    justify-content: center;
+    align-items: center;
+    gap: var(--moduix-segment-group-item-gap, var(--moduix-spacing-2));
+    min-height: var(--moduix-segment-group-item-height, var(--moduix-size-sm));
+    border-radius: var(--moduix-segment-group-item-radius, var(--moduix-radius-md));
+    padding-inline: var(--moduix-segment-group-item-padding-x, var(--moduix-spacing-3-5));
+    color: var(--moduix-segment-group-item-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-segment-group-item-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-segment-group-item-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-segment-group-item-line-height, var(--moduix-line-height-text-sm));
+    -webkit-user-select: none;
+    user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: color var(--moduix-segment-group-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-segment-group-transition, var(--moduix-transition-default));
+    outline: 0;
+    display: inline-flex;
+    position: relative;
+  }
+
+  @media (hover: hover) {
+    .item-YWqgii:hover:not([data-readonly], [data-disabled]) {
+      color: var(--moduix-segment-group-item-color-hover, var(--moduix-color-foreground));
+    }
+
+    .item-YWqgii:hover:not([data-readonly], [data-disabled])[data-state="checked"] {
+      color: var(--moduix-segment-group-item-color-hover, var(--moduix-segment-group-item-color-checked, var(--moduix-color-foreground)));
+    }
+  }
+
+  .item-YWqgii[data-state="checked"] {
+    color: var(--moduix-segment-group-item-color-checked, var(--moduix-color-foreground));
+  }
+
+  .item-YWqgii[data-focus-visible] {
+    outline: var(--moduix-segment-group-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-segment-group-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: var(--moduix-segment-group-focus-ring-offset, var(--moduix-border-width-sm));
+  }
+
+  .item-YWqgii[data-invalid][data-focus-visible] {
+    outline-color: var(--moduix-segment-group-focus-ring-color-invalid, var(--moduix-color-destructive));
+  }
+
+  .item-YWqgii[data-readonly], .item-YWqgii[data-disabled] {
+    cursor: default;
+  }
+
+  .item-YWqgii[data-orientation="vertical"] {
+    justify-content: flex-start;
+    inline-size: 100%;
+  }
+
+  .itemControl-pbg2uY {
+    display: none;
+  }
+
+  .itemText-aBveL1 {
+    z-index: 1;
+    position: relative;
+  }
+
+  .indicator-hgTUcL {
+    --transition-duration: var(--moduix-segment-group-indicator-transition-duration, var(--moduix-duration-normal));
+    --transition-timing-function: var(--moduix-segment-group-indicator-transition-timing-function, var(--moduix-ease-in-out));
+    z-index: 0;
+    top: var(--top);
+    left: var(--left);
+    width: var(--width);
+    height: var(--height);
+    border-radius: var(--moduix-segment-group-indicator-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-segment-group-indicator-bg, var(--moduix-color-background));
+    box-shadow: var(--moduix-segment-group-indicator-shadow, var(--moduix-shadow-sm));
+    pointer-events: none;
+    position: absolute;
+  }
+}
+

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,59 @@
+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 SelectRootComponent = ArkSelectRootComponent<OverlayPortalProps>;
+type SelectRootProviderComponent = ArkSelectRootProviderComponent<OverlayPortalProps>;
+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 = SelectRootComponent & {
+    Root: SelectRootComponent;
+    RootProvider: SelectRootProviderComponent;
+    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 };

package/dist/components/select/Select.js

@@ -0,0 +1,392 @@
+import { createComponent, memo, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { Select, useSelect, useSelectContext, useSelectItemContext } from "@ark-ui/solid/select";
+import { clsx } from "clsx";
+import { children, splitProps } from "solid-js";
+import { CheckIcon, ChevronUpDownIcon } from "../../internal/icons/ui/Icons.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+import { CloseButton } from "../close-button/index.js";
+import Select_module from "./Select.module.js";
+const Select_SelectRoot = function(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(Select.Root, mergeProps({
+                get asChild () {
+                    return local.asChild;
+                },
+                "data-slot": "select-root",
+                get ["class"] () {
+                    return clsx(Select_module.root, local.class);
+                },
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+};
+const Select_SelectRootProvider = function(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(Select.RootProvider, mergeProps({
+                get asChild () {
+                    return local.asChild;
+                },
+                "data-slot": "select-root-provider",
+                get ["class"] () {
+                    return clsx(Select_module.root, local.class);
+                },
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+};
+function SelectLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Select.Label, mergeProps({
+        "data-slot": "select-label",
+        get ["class"] () {
+            return clsx(Select_module.label, local.class);
+        }
+    }, others));
+}
+function SelectControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Select.Control, mergeProps({
+        "data-slot": "select-control",
+        get ["class"] () {
+            return clsx(Select_module.control, local.class);
+        }
+    }, others));
+}
+function SelectTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Select.Trigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "select-trigger",
+        get ["class"] () {
+            return clsx(!local.asChild && Select_module.trigger, local.class);
+        }
+    }, others));
+}
+function SelectValueText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Select.ValueText, mergeProps({
+        "data-slot": "select-value-text",
+        get ["class"] () {
+            return clsx(Select_module.valueText, local.class);
+        }
+    }, others));
+}
+function SelectClearTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const triggerClass = clsx(Select_module.clearTrigger, local.class);
+    if (local.asChild) return createComponent(Select.ClearTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        get ["aria-label"] () {
+            return local['aria-label'];
+        },
+        get ["aria-labelledby"] () {
+            return local['aria-labelledby'];
+        },
+        "data-slot": "select-clear-trigger",
+        class: triggerClass
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+    return createComponent(Select.ClearTrigger, mergeProps({
+        asChild: (triggerProps)=>{
+            const resolvedProps = triggerProps();
+            return createComponent(CloseButton.Root, mergeProps(resolvedProps, {
+                get ["aria-label"] () {
+                    return local['aria-label'] ?? (null == local['aria-labelledby'] ? 'Clear selection' : void 0);
+                },
+                get ["aria-labelledby"] () {
+                    return local['aria-labelledby'];
+                },
+                get children () {
+                    return resolvedChildren();
+                }
+            }));
+        },
+        "data-slot": "select-clear-trigger",
+        class: triggerClass
+    }, others));
+}
+function SelectIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Select.Indicator, mergeProps({
+        "data-slot": "select-indicator",
+        get ["class"] () {
+            return clsx(Select_module.indicator, local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(ChevronUpDownIcon, {});
+        }
+    }));
+}
+function SelectField(props) {
+    const [local, others] = splitProps(props, [
+        'clearLabel',
+        'indicator',
+        'placeholder'
+    ]);
+    return createComponent(SelectControl, mergeProps(others, {
+        get children () {
+            return [
+                createComponent(SelectTrigger, {
+                    get children () {
+                        return createComponent(SelectValueText, {
+                            get placeholder () {
+                                return local.placeholder;
+                            }
+                        });
+                    }
+                }),
+                memo(()=>memo(()=>!!local.clearLabel)() && createComponent(SelectClearTrigger, {
+                        get ["aria-label"] () {
+                            return local.clearLabel;
+                        }
+                    })),
+                createComponent(SelectIndicator, {
+                    get children () {
+                        return local.indicator;
+                    }
+                })
+            ];
+        }
+    }));
+}
+function SelectPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(Select.Positioner, mergeProps({
+                "data-slot": "select-positioner",
+                get ["class"] () {
+                    return clsx(Select_module.positioner, local.class);
+                }
+            }, others));
+        }
+    });
+}
+function SelectContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Select.Content, mergeProps({
+        "data-slot": "select-content",
+        get ["class"] () {
+            return clsx(Select_module.content, local.class);
+        }
+    }, others));
+}
+function SelectList(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Select.List, mergeProps({
+        "data-slot": "select-list",
+        get ["class"] () {
+            return clsx(Select_module.list, local.class);
+        }
+    }, others));
+}
+function SelectItemGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Select.ItemGroup, mergeProps({
+        "data-slot": "select-item-group",
+        get ["class"] () {
+            return clsx(Select_module.itemGroup, local.class);
+        }
+    }, others));
+}
+function SelectItemGroupLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Select.ItemGroupLabel, mergeProps({
+        "data-slot": "select-item-group-label",
+        get ["class"] () {
+            return clsx(Select_module.itemGroupLabel, local.class);
+        }
+    }, others));
+}
+function SelectItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Select.Item, mergeProps({
+        "data-slot": "select-item",
+        get ["class"] () {
+            return clsx(Select_module.item, local.class);
+        }
+    }, others));
+}
+function SelectItemText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Select.ItemText, mergeProps({
+        "data-slot": "select-item-text",
+        get ["class"] () {
+            return clsx(Select_module.itemText, local.class);
+        }
+    }, others));
+}
+function SelectItemIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Select.ItemIndicator, mergeProps({
+        "data-slot": "select-item-indicator",
+        get ["class"] () {
+            return clsx(Select_module.itemIndicator, local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(CheckIcon, {});
+        }
+    }));
+}
+function SelectItemTextContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        "data-slot": "select-item-text-content",
+        get ["class"] () {
+            return clsx(Select_module.itemTextContent, local.class);
+        }
+    }, others));
+}
+function SelectItemTextIcon(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        "data-slot": "select-item-text-icon",
+        get ["class"] () {
+            return clsx(Select_module.itemTextIcon, local.class);
+        }
+    }, others));
+}
+function SelectItemTextLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        "data-slot": "select-item-text-label",
+        get ["class"] () {
+            return clsx(Select_module.itemTextLabel, local.class);
+        }
+    }, others));
+}
+const Select_Select = Object.assign(Select_SelectRoot, {
+    Root: Select_SelectRoot,
+    RootProvider: Select_SelectRootProvider,
+    Context: Select.Context,
+    HiddenSelect: Select.HiddenSelect,
+    ItemContext: Select.ItemContext,
+    useSelect: useSelect,
+    useSelectContext: useSelectContext,
+    useSelectItemContext: useSelectItemContext,
+    Label: SelectLabel,
+    Control: SelectControl,
+    Field: SelectField,
+    Trigger: SelectTrigger,
+    ValueText: SelectValueText,
+    ClearTrigger: SelectClearTrigger,
+    Indicator: SelectIndicator,
+    Positioner: SelectPositioner,
+    Content: SelectContent,
+    List: SelectList,
+    ItemGroup: SelectItemGroup,
+    ItemGroupLabel: SelectItemGroupLabel,
+    Item: SelectItem,
+    ItemText: SelectItemText,
+    ItemIndicator: SelectItemIndicator,
+    ItemTextContent: SelectItemTextContent,
+    ItemTextIcon: SelectItemTextIcon,
+    ItemTextLabel: SelectItemTextLabel
+});
+export { Select_Select as Select, useSelect, useSelectContext, useSelectItemContext };