@moduix/solid 1.0.0

package/dist/components/scroll-area/ScrollArea_module.css

@@ -0,0 +1,191 @@
+@layer moduix.components {
+  .root-FtAkRy {
+    box-sizing: border-box;
+    width: var(--moduix-scroll-area-width, 100%);
+    height: var(--moduix-scroll-area-height, 100%);
+    min-width: 0;
+    min-height: 0;
+    color: var(--moduix-scroll-area-color, var(--moduix-color-foreground));
+    position: relative;
+  }
+
+  .viewport-SrqU1k {
+    box-sizing: border-box;
+    border-radius: var(--moduix-scroll-area-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-scroll-area-bg, transparent);
+    scrollbar-width: none;
+    --_scroll-area-block-fade-mask: linear-gradient(to bottom,
+      transparent 0,
+      black
+        min(var(--moduix-scroll-area-fade-start-size, var(--moduix-scroll-area-fade-size, var(--moduix-spacing-10))),
+          var(--scroll-area-overflow-y-start, 0px)),
+      black
+        calc(100% -
+            min(var(--moduix-scroll-area-fade-end-size, var(--moduix-scroll-area-fade-size, var(--moduix-spacing-10))),
+              var(--scroll-area-overflow-y-end, 0px))),
+      transparent 100%);
+    outline: 0;
+    width: 100%;
+    min-width: 0;
+    height: 100%;
+    min-height: 0;
+  }
+
+  .viewport-SrqU1k::-webkit-scrollbar {
+    display: none;
+  }
+
+  .root-FtAkRy[data-fade] .viewport-SrqU1k {
+    -webkit-mask-image: var(--_scroll-area-block-fade-mask);
+    mask-image: var(--_scroll-area-block-fade-mask);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+  }
+
+  .viewport-SrqU1k:focus-visible {
+    outline: var(--moduix-scroll-area-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-scroll-area-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: var(--moduix-scroll-area-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
+  }
+
+  .content-PFPQ4z {
+    box-sizing: border-box;
+    padding: var(--moduix-scroll-area-content-padding, 0);
+    display: block;
+  }
+
+  .scrollbar-LN_VI4 {
+    --_scroll-area-scrollbar-margin: var(--moduix-scroll-area-scrollbar-margin, var(--moduix-spacing-1));
+    --_scroll-area-scrollbar-hit-area-size: var(--moduix-scroll-area-scrollbar-hit-area-size, var(--moduix-spacing-5));
+    box-sizing: border-box;
+    padding: var(--moduix-scroll-area-scrollbar-padding, 0);
+    border-radius: var(--moduix-scroll-area-scrollbar-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-scroll-area-scrollbar-bg, transparent);
+    opacity: var(--moduix-scroll-area-scrollbar-hidden-opacity, 0);
+    pointer-events: none;
+    -webkit-user-select: none;
+    user-select: none;
+    touch-action: none;
+    transition: opacity var(--moduix-scroll-area-transition, var(--moduix-transition-default)),
+      width var(--moduix-scroll-area-thumb-hover-transition, var(--moduix-transition-fast)),
+      height var(--moduix-scroll-area-thumb-hover-transition, var(--moduix-transition-fast));
+    justify-content: center;
+    display: flex;
+    position: absolute;
+  }
+
+  .scrollbar-LN_VI4:before {
+    content: "";
+    position: absolute;
+  }
+
+  .scrollbar-LN_VI4[data-orientation="vertical"] {
+    top: 0;
+    inset-inline-end: 0;
+    bottom: var(--corner-height, 0px);
+    width: var(--moduix-scroll-area-scrollbar-size, var(--moduix-spacing-1));
+    margin-block: var(--_scroll-area-scrollbar-margin);
+    margin-inline-end: var(--_scroll-area-scrollbar-margin);
+  }
+
+  .scrollbar-LN_VI4[data-orientation="vertical"]:before {
+    width: var(--_scroll-area-scrollbar-hit-area-size);
+    height: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .scrollbar-LN_VI4[data-orientation="vertical"]:not([data-overflow-y]) {
+    display: none;
+  }
+
+  .scrollbar-LN_VI4[data-orientation="vertical"]:hover, .scrollbar-LN_VI4[data-orientation="vertical"][data-dragging] {
+    width: calc(var(--moduix-scroll-area-scrollbar-size, var(--moduix-spacing-1)) +
+            var(--moduix-scroll-area-thumb-hover-increase, 2px));
+  }
+
+  .scrollbar-LN_VI4[data-orientation="horizontal"] {
+    inset-inline-start: 0;
+    inset-inline-end: var(--corner-width, 0px);
+    height: var(--moduix-scroll-area-scrollbar-size, var(--moduix-spacing-1));
+    margin-inline: var(--_scroll-area-scrollbar-margin);
+    flex-direction: column;
+    margin-block-end: var(--_scroll-area-scrollbar-margin);
+    bottom: 0;
+  }
+
+  .scrollbar-LN_VI4[data-orientation="horizontal"]:before {
+    width: 100%;
+    height: var(--_scroll-area-scrollbar-hit-area-size);
+    bottom: 50%;
+    left: 0;
+    right: 0;
+    transform: translateY(50%);
+  }
+
+  .scrollbar-LN_VI4[data-orientation="horizontal"]:not([data-overflow-x]) {
+    display: none;
+  }
+
+  .scrollbar-LN_VI4[data-orientation="horizontal"]:hover, .scrollbar-LN_VI4[data-orientation="horizontal"][data-dragging] {
+    height: calc(var(--moduix-scroll-area-scrollbar-size, var(--moduix-spacing-1)) +
+            var(--moduix-scroll-area-thumb-hover-increase, 2px));
+  }
+
+  .scrollbar-LN_VI4[data-hover], .scrollbar-LN_VI4[data-scrolling] {
+    opacity: var(--moduix-scroll-area-scrollbar-visible-opacity, 1);
+    pointer-events: auto;
+  }
+
+  .scrollbar-LN_VI4[data-scrolling] {
+    transition-duration: 0s;
+  }
+
+  .root-FtAkRy[data-variant="always"] .scrollbar-LN_VI4 {
+    opacity: var(--moduix-scroll-area-scrollbar-visible-opacity, 1);
+    pointer-events: auto;
+  }
+
+  .thumb-eKzpKM {
+    box-sizing: border-box;
+    border-radius: var(--moduix-scroll-area-thumb-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-scroll-area-thumb-bg, var(--moduix-color-border));
+  }
+
+  .thumb-eKzpKM[data-orientation="vertical"] {
+    width: 100%;
+    min-height: var(--moduix-scroll-area-thumb-min-size, var(--moduix-size-xs));
+  }
+
+  .thumb-eKzpKM[data-orientation="horizontal"] {
+    height: 100%;
+    min-width: var(--moduix-scroll-area-thumb-min-size, var(--moduix-size-xs));
+  }
+
+  .corner-dcr1vM {
+    box-sizing: border-box;
+    background-color: var(--moduix-scroll-area-corner-bg, var(--moduix-scroll-area-scrollbar-bg, transparent));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .scrollbar-LN_VI4 {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .root-FtAkRy[data-fade] .viewport-SrqU1k {
+      -webkit-mask-image: none;
+      mask-image: none;
+    }
+
+    .viewport-SrqU1k:focus-visible {
+      outline-color: highlight;
+    }
+
+    .thumb-eKzpKM {
+      background-color: buttontext;
+    }
+  }
+}
+

package/dist/components/scroll-area/index.d.ts

@@ -0,0 +1,2 @@
+export { ScrollArea, useScrollArea, useScrollAreaContext } from './ScrollArea.js';
+export type { ModuixScrollAreaRootProps, ModuixScrollAreaRootProviderProps } from './ScrollArea.js';

package/dist/components/scroll-area/index.js

@@ -0,0 +1 @@
+export { ScrollArea, useScrollArea, useScrollAreaContext } from "./ScrollArea.js";

package/dist/components/scroll-area/index.jsx

@@ -0,0 +1 @@
+export { ScrollArea, useScrollArea, useScrollAreaContext } from "./ScrollArea.jsx";

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

@@ -0,0 +1,33 @@
+import { SegmentGroup as SegmentGroupPrimitive, useSegmentGroup as useSegmentGroupPrimitive, useSegmentGroupContext, useSegmentGroupItemContext } from '@ark-ui/solid/segment-group';
+import type { ComponentProps, JSX } from 'solid-js';
+type SegmentGroupMachineProps = NonNullable<Parameters<typeof useSegmentGroupPrimitive>[0]>;
+type SegmentGroupOption = {
+    value: string;
+    label: JSX.Element;
+    disabled?: boolean;
+};
+declare function useSegmentGroup(props?: SegmentGroupMachineProps): import("@ark-ui/solid").UseSegmentGroupReturn;
+declare function SegmentGroupRoot(props: ComponentProps<typeof SegmentGroupPrimitive.Root>): JSX.Element;
+declare function SegmentGroupRootProvider(props: ComponentProps<typeof SegmentGroupPrimitive.RootProvider>): JSX.Element;
+declare function SegmentGroupLabel(props: ComponentProps<typeof SegmentGroupPrimitive.Label>): JSX.Element;
+declare function SegmentGroupItem(props: ComponentProps<typeof SegmentGroupPrimitive.Item>): JSX.Element;
+declare function SegmentGroupItemControl(props: ComponentProps<typeof SegmentGroupPrimitive.ItemControl>): JSX.Element;
+declare function SegmentGroupItemText(props: ComponentProps<typeof SegmentGroupPrimitive.ItemText>): JSX.Element;
+declare function SegmentGroupIndicator(props: ComponentProps<typeof SegmentGroupPrimitive.Indicator>): JSX.Element;
+declare function SegmentGroupItems(props: {
+    items: readonly SegmentGroupOption[];
+}): JSX.Element;
+declare const SegmentGroup: typeof SegmentGroupRoot & {
+    Root: typeof SegmentGroupRoot;
+    RootProvider: typeof SegmentGroupRootProvider;
+    Context: (props: SegmentGroupPrimitive.ContextProps) => JSX.Element;
+    ItemContext: (props: SegmentGroupPrimitive.ItemContextProps) => JSX.Element;
+    Label: typeof SegmentGroupLabel;
+    Item: typeof SegmentGroupItem;
+    ItemHiddenInput: (props: SegmentGroupPrimitive.ItemHiddenInputProps) => JSX.Element;
+    ItemControl: typeof SegmentGroupItemControl;
+    ItemText: typeof SegmentGroupItemText;
+    Indicator: typeof SegmentGroupIndicator;
+    Items: typeof SegmentGroupItems;
+};
+export { SegmentGroup, useSegmentGroup, useSegmentGroupContext, useSegmentGroupItemContext };

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

@@ -0,0 +1,206 @@
+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 { clsx } from "clsx";
+import { For, splitProps } from "solid-js";
+import SegmentGroup_module from "./SegmentGroup.module.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 clsx(SegmentGroup_module.root, 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 clsx(SegmentGroup_module.root, 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 clsx(SegmentGroup_module.label, 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 clsx(SegmentGroup_module.item, 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 clsx(SegmentGroup_module.itemControl, 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 clsx(SegmentGroup_module.itemText, 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 clsx(SegmentGroup_module.indicator, 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,127 @@
+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 { clsx } from "clsx";
+import { For, splitProps } from "solid-js";
+import SegmentGroup_module from "./SegmentGroup.module.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={clsx(SegmentGroup_module.root, 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={clsx(SegmentGroup_module.root, 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={clsx(SegmentGroup_module.label, 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={clsx(SegmentGroup_module.item, 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={clsx(SegmentGroup_module.itemControl, 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={clsx(SegmentGroup_module.itemText, 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={clsx(SegmentGroup_module.indicator, 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/SegmentGroup.module.js

@@ -0,0 +1,10 @@
+import "./SegmentGroup_module.css";
+const SegmentGroup_module = {
+    root: "root-Bd4lNR",
+    item: "item-YWqgii",
+    label: "label-shCFGn",
+    itemControl: "itemControl-pbg2uY",
+    itemText: "itemText-aBveL1",
+    indicator: "indicator-hgTUcL"
+};
+export default SegmentGroup_module;

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

@@ -0,0 +1,10 @@
+import "./SegmentGroup_module.css";
+const SegmentGroup_module = {
+    root: "root-Bd4lNR",
+    item: "item-YWqgii",
+    label: "label-shCFGn",
+    itemControl: "itemControl-pbg2uY",
+    itemText: "itemText-aBveL1",
+    indicator: "indicator-hgTUcL"
+};
+export default SegmentGroup_module;