@moduix/solid 1.0.0

package/dist/components/toggle/Toggle_module.css

@@ -0,0 +1,169 @@
+@layer moduix.components {
+  .root-FOmqpM {
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    gap: var(--moduix-toggle-content-gap, var(--moduix-spacing-2));
+    min-height: var(--moduix-toggle-size-md, var(--moduix-size-md));
+    border-style: solid;
+    border-width: var(--moduix-toggle-border-width, var(--moduix-border-width-sm));
+    border-radius: var(--moduix-toggle-radius, var(--moduix-radius-md));
+    padding-block: var(--moduix-toggle-padding-y-md, var(--moduix-spacing-1));
+    padding-inline: var(--moduix-toggle-padding-x-md, var(--moduix-spacing-4));
+    color: var(--moduix-toggle-color, var(--moduix-color-foreground));
+    appearance: none;
+    font: inherit;
+    font-size: var(--moduix-toggle-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-toggle-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-toggle-line-height, var(--moduix-line-height-text-sm));
+    -webkit-user-select: none;
+    user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color var(--moduix-toggle-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-toggle-transition, var(--moduix-transition-default)),
+      color var(--moduix-toggle-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-toggle-transition, var(--moduix-transition-default));
+    background-color: #0000;
+    border-color: #0000;
+    margin: 0;
+    display: inline-flex;
+  }
+
+  .root-FOmqpM:focus-visible {
+    outline: var(--moduix-toggle-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-toggle-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: var(--moduix-toggle-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
+  }
+
+  .root-FOmqpM[data-disabled] {
+    opacity: var(--moduix-toggle-disabled-opacity, var(--moduix-opacity-disabled));
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .root-FOmqpM > :where(svg), .root-FOmqpM [data-slot="toggle-indicator"] > :where(svg) {
+    width: var(--moduix-toggle-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-toggle-icon-size, var(--moduix-spacing-4));
+    flex-shrink: 0;
+    display: block;
+  }
+
+  .root-FOmqpM[data-variant="default"] {
+    border-color: var(--moduix-toggle-default-border-color, var(--moduix-color-secondary));
+    background-color: var(--moduix-toggle-default-bg, var(--moduix-color-secondary));
+    color: var(--moduix-toggle-default-color, var(--moduix-toggle-color, var(--moduix-color-secondary-foreground)));
+  }
+
+  @media (hover: hover) {
+    .root-FOmqpM[data-variant="default"][data-state="off"]:not([data-disabled]):hover {
+      background-color: var(--moduix-toggle-default-bg-hover, var(--moduix-color-accent));
+    }
+  }
+
+  .root-FOmqpM[data-variant="default"][data-state="off"]:not([data-disabled]):active {
+    background-color: var(--moduix-toggle-default-bg-active, var(--moduix-color-accent));
+  }
+
+  .root-FOmqpM[data-variant="default"][data-state="on"] {
+    border-color: var(--moduix-toggle-default-border-color-pressed, var(--moduix-color-primary));
+    background-color: var(--moduix-toggle-default-bg-pressed, var(--moduix-color-primary));
+    color: var(--moduix-toggle-default-color-pressed, var(--moduix-color-primary-foreground));
+  }
+
+  .root-FOmqpM[data-variant="outline"] {
+    border-color: var(--moduix-toggle-outline-border-color, var(--moduix-color-border));
+    background-color: var(--moduix-toggle-outline-bg, var(--moduix-color-background));
+    color: var(--moduix-toggle-outline-color, var(--moduix-toggle-color, var(--moduix-color-foreground)));
+  }
+
+  @media (hover: hover) {
+    .root-FOmqpM[data-variant="outline"][data-state="off"]:not([data-disabled]):hover {
+      background-color: var(--moduix-toggle-outline-bg-hover, var(--moduix-color-accent));
+    }
+  }
+
+  .root-FOmqpM[data-variant="outline"][data-state="off"]:not([data-disabled]):active {
+    background-color: var(--moduix-toggle-outline-bg-active, var(--moduix-color-accent));
+  }
+
+  .root-FOmqpM[data-variant="outline"][data-state="on"] {
+    border-color: var(--moduix-toggle-outline-border-color-pressed, var(--moduix-color-primary));
+    background-color: var(--moduix-toggle-outline-bg-pressed, var(--moduix-color-primary));
+    color: var(--moduix-toggle-outline-color-pressed, var(--moduix-color-primary-foreground));
+  }
+
+  .root-FOmqpM[data-variant="ghost"] {
+    border-color: var(--moduix-toggle-ghost-border-color, transparent);
+    background-color: var(--moduix-toggle-ghost-bg, transparent);
+    color: var(--moduix-toggle-ghost-color, var(--moduix-toggle-color, var(--moduix-color-foreground)));
+  }
+
+  @media (hover: hover) {
+    .root-FOmqpM[data-variant="ghost"][data-state="off"]:not([data-disabled]):hover {
+      background-color: var(--moduix-toggle-ghost-bg-hover, var(--moduix-color-accent));
+    }
+  }
+
+  .root-FOmqpM[data-variant="ghost"][data-state="off"]:not([data-disabled]):active {
+    background-color: var(--moduix-toggle-ghost-bg-active, var(--moduix-color-accent));
+  }
+
+  .root-FOmqpM[data-variant="ghost"][data-state="on"] {
+    background-color: var(--moduix-toggle-ghost-bg-pressed, var(--moduix-color-accent));
+    color: var(--moduix-toggle-ghost-color-pressed, var(--moduix-color-foreground));
+  }
+
+  .root-FOmqpM[data-size="xs"] {
+    min-height: var(--moduix-toggle-size-xs, var(--moduix-size-xs));
+    padding-block: var(--moduix-toggle-padding-y-xs, var(--moduix-spacing-0-5));
+    padding-inline: var(--moduix-toggle-padding-x-xs, var(--moduix-spacing-2-5));
+    font-size: var(--moduix-toggle-font-size-xs, var(--moduix-text-xs));
+    line-height: var(--moduix-toggle-line-height-xs, var(--moduix-line-height-text-xs));
+  }
+
+  .root-FOmqpM[data-size="sm"] {
+    min-height: var(--moduix-toggle-size-sm, var(--moduix-size-sm));
+    padding-block: var(--moduix-toggle-padding-y-sm, var(--moduix-spacing-1));
+    padding-inline: var(--moduix-toggle-padding-x-sm, var(--moduix-spacing-3));
+  }
+
+  .root-FOmqpM[data-size="lg"] {
+    min-height: var(--moduix-toggle-size-lg, var(--moduix-size-lg));
+    padding-block: var(--moduix-toggle-padding-y-lg, var(--moduix-spacing-1-5));
+    padding-inline: var(--moduix-toggle-padding-x-lg, var(--moduix-spacing-5));
+    font-size: var(--moduix-toggle-font-size-lg, var(--moduix-text-md));
+    line-height: var(--moduix-toggle-line-height-lg, var(--moduix-line-height-text-md));
+  }
+
+  .root-FOmqpM[data-size="icon-sm"], .root-FOmqpM[data-size="icon-md"], .root-FOmqpM[data-size="icon-lg"] {
+    gap: 0;
+    padding: 0;
+  }
+
+  .root-FOmqpM[data-size="icon-sm"] {
+    width: var(--moduix-toggle-size-icon-sm, var(--moduix-size-sm));
+    min-width: var(--moduix-toggle-size-icon-sm, var(--moduix-size-sm));
+    height: var(--moduix-toggle-size-icon-sm, var(--moduix-size-sm));
+  }
+
+  .root-FOmqpM[data-size="icon-md"] {
+    width: var(--moduix-toggle-size-icon-md, var(--moduix-size-md));
+    min-width: var(--moduix-toggle-size-icon-md, var(--moduix-size-md));
+    height: var(--moduix-toggle-size-icon-md, var(--moduix-size-md));
+  }
+
+  .root-FOmqpM[data-size="icon-lg"] {
+    width: var(--moduix-toggle-size-icon-lg, var(--moduix-size-lg));
+    min-width: var(--moduix-toggle-size-icon-lg, var(--moduix-size-lg));
+    height: var(--moduix-toggle-size-icon-lg, var(--moduix-size-lg));
+  }
+
+  .indicator-zhyTn2 {
+    color: inherit;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+}
+

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

@@ -0,0 +1,2 @@
+export { Toggle, useToggleContext } from './Toggle.js';
+export type { ToggleRootProps, ToggleSize, ToggleVariant } from './Toggle.js';

package/dist/components/toggle/index.js

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

package/dist/components/toggle/index.jsx

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

package/dist/components/toggle-group/ToggleGroup.d.ts

@@ -0,0 +1,26 @@
+import { ToggleGroup as ToggleGroupPrimitive, useToggleGroup, useToggleGroupContext } from '@ark-ui/solid/toggle-group';
+import type { ComponentProps } from 'solid-js';
+import type { ToggleSize, ToggleVariant } from '../toggle/Toggle.js';
+type ToggleGroupRootProps = ComponentProps<typeof ToggleGroupPrimitive.Root> & {
+    variant?: ToggleVariant;
+    size?: ToggleSize;
+};
+type ToggleGroupRootProviderProps = ComponentProps<typeof ToggleGroupPrimitive.RootProvider> & {
+    variant?: ToggleVariant;
+    size?: ToggleSize;
+};
+type ToggleGroupItemProps = ComponentProps<typeof ToggleGroupPrimitive.Item> & {
+    variant?: ToggleVariant;
+    size?: ToggleSize;
+};
+declare function ToggleGroupRoot(props: ToggleGroupRootProps): import("solid-js").JSX.Element;
+declare function ToggleGroupRootProvider(props: ToggleGroupRootProviderProps): import("solid-js").JSX.Element;
+declare function ToggleGroupItem(props: ToggleGroupItemProps): import("solid-js").JSX.Element;
+declare const ToggleGroup: typeof ToggleGroupRoot & {
+    Root: typeof ToggleGroupRoot;
+    RootProvider: typeof ToggleGroupRootProvider;
+    Context: (props: ToggleGroupPrimitive.ContextProps) => import("solid-js").JSX.Element;
+    Item: typeof ToggleGroupItem;
+};
+export { ToggleGroup, useToggleGroup, useToggleGroupContext };
+export type { ToggleGroupItemProps, ToggleGroupRootProps, ToggleGroupRootProviderProps, ToggleSize, ToggleVariant, };

package/dist/components/toggle-group/ToggleGroup.js

@@ -0,0 +1,125 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { ToggleGroup, useToggleGroup, useToggleGroupContext } from "@ark-ui/solid/toggle-group";
+import { clsx } from "clsx";
+import { createContext, splitProps, useContext } from "solid-js";
+import Toggle_module from "../toggle/Toggle.module.js";
+import ToggleGroup_module from "./ToggleGroup.module.js";
+const defaultToggleGroupStyles = {
+    variant: ()=>'default',
+    size: ()=>'md'
+};
+const ToggleGroupStyleContext = createContext(defaultToggleGroupStyles);
+function ToggleGroupRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'size',
+        'variant'
+    ]);
+    const variant = ()=>local.variant ?? 'default';
+    const size = ()=>local.size ?? 'md';
+    return createComponent(ToggleGroupStyleContext.Provider, {
+        value: {
+            variant,
+            size
+        },
+        get children () {
+            return createComponent(ToggleGroup.Root, mergeProps({
+                get asChild () {
+                    return local.asChild;
+                }
+            }, others, {
+                "data-slot": "toggle-group-root",
+                get ["data-variant"] () {
+                    return variant();
+                },
+                get ["data-size"] () {
+                    return size();
+                },
+                get ["class"] () {
+                    return clsx(ToggleGroup_module.root, local.class);
+                },
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function ToggleGroupRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'size',
+        'variant'
+    ]);
+    const variant = ()=>local.variant ?? 'default';
+    const size = ()=>local.size ?? 'md';
+    return createComponent(ToggleGroupStyleContext.Provider, {
+        value: {
+            variant,
+            size
+        },
+        get children () {
+            return createComponent(ToggleGroup.RootProvider, mergeProps({
+                get asChild () {
+                    return local.asChild;
+                }
+            }, others, {
+                "data-slot": "toggle-group-root-provider",
+                get ["data-variant"] () {
+                    return variant();
+                },
+                get ["data-size"] () {
+                    return size();
+                },
+                get ["class"] () {
+                    return clsx(ToggleGroup_module.root, local.class);
+                },
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function ToggleGroupItem(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'size',
+        'variant'
+    ]);
+    const inherited = useContext(ToggleGroupStyleContext);
+    const variant = ()=>local.variant ?? inherited.variant();
+    const size = ()=>local.size ?? inherited.size();
+    return createComponent(ToggleGroup.Item, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-slot": "toggle-group-item",
+        get ["data-variant"] () {
+            return variant();
+        },
+        get ["data-size"] () {
+            return size();
+        },
+        get ["class"] () {
+            return clsx(Toggle_module.root, ToggleGroup_module.item, local.class);
+        },
+        get children () {
+            return local.children;
+        }
+    }));
+}
+const ToggleGroup_ToggleGroup = Object.assign(ToggleGroupRoot, {
+    Root: ToggleGroupRoot,
+    RootProvider: ToggleGroupRootProvider,
+    Context: ToggleGroup.Context,
+    Item: ToggleGroupItem
+});
+export { ToggleGroup_ToggleGroup as ToggleGroup, useToggleGroup, useToggleGroupContext };

package/dist/components/toggle-group/ToggleGroup.jsx

@@ -0,0 +1,70 @@
+import { ToggleGroup, useToggleGroup, useToggleGroupContext } from "@ark-ui/solid/toggle-group";
+import { clsx } from "clsx";
+import { createContext, splitProps, useContext } from "solid-js";
+import Toggle_module from "../toggle/Toggle.module.jsx";
+import ToggleGroup_module from "./ToggleGroup.module.jsx";
+const defaultToggleGroupStyles = {
+    variant: ()=>'default',
+    size: ()=>'md'
+};
+const ToggleGroupStyleContext = createContext(defaultToggleGroupStyles);
+function ToggleGroupRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'size',
+        'variant'
+    ]);
+    const variant = ()=>local.variant ?? 'default';
+    const size = ()=>local.size ?? 'md';
+    return <ToggleGroupStyleContext.Provider value={{
+        variant,
+        size
+    }}>
+      <ToggleGroup.Root asChild={local.asChild} {...others} data-slot="toggle-group-root" data-variant={variant()} data-size={size()} class={clsx(ToggleGroup_module.root, local.class)}>
+        {local.children}
+      </ToggleGroup.Root>
+    </ToggleGroupStyleContext.Provider>;
+}
+function ToggleGroupRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'size',
+        'variant'
+    ]);
+    const variant = ()=>local.variant ?? 'default';
+    const size = ()=>local.size ?? 'md';
+    return <ToggleGroupStyleContext.Provider value={{
+        variant,
+        size
+    }}>
+      <ToggleGroup.RootProvider asChild={local.asChild} {...others} data-slot="toggle-group-root-provider" data-variant={variant()} data-size={size()} class={clsx(ToggleGroup_module.root, local.class)}>
+        {local.children}
+      </ToggleGroup.RootProvider>
+    </ToggleGroupStyleContext.Provider>;
+}
+function ToggleGroupItem(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'size',
+        'variant'
+    ]);
+    const inherited = useContext(ToggleGroupStyleContext);
+    const variant = ()=>local.variant ?? inherited.variant();
+    const size = ()=>local.size ?? inherited.size();
+    return <ToggleGroup.Item asChild={local.asChild} {...others} data-slot="toggle-group-item" data-variant={variant()} data-size={size()} class={clsx(Toggle_module.root, ToggleGroup_module.item, local.class)}>
+      {local.children}
+    </ToggleGroup.Item>;
+}
+const ToggleGroup_ToggleGroup = Object.assign(ToggleGroupRoot, {
+    Root: ToggleGroupRoot,
+    RootProvider: ToggleGroupRootProvider,
+    Context: ToggleGroup.Context,
+    Item: ToggleGroupItem
+});
+export { ToggleGroup_ToggleGroup as ToggleGroup, useToggleGroup, useToggleGroupContext };

package/dist/components/toggle-group/ToggleGroup.module.js

@@ -0,0 +1,6 @@
+import "./ToggleGroup_module.css";
+const ToggleGroup_module = {
+    root: "root-HI0WAX",
+    item: "item-RRrFoz"
+};
+export default ToggleGroup_module;

package/dist/components/toggle-group/ToggleGroup.module.jsx

@@ -0,0 +1,6 @@
+import "./ToggleGroup_module.css";
+const ToggleGroup_module = {
+    root: "root-HI0WAX",
+    item: "item-RRrFoz"
+};
+export default ToggleGroup_module;

package/dist/components/toggle-group/ToggleGroup_module.css

@@ -0,0 +1,49 @@
+@layer moduix.components {
+  .root-HI0WAX {
+    box-sizing: border-box;
+    overscroll-behavior-inline: contain;
+    scrollbar-width: none;
+    --moduix-toggle-color: var(--moduix-toggle-group-color, var(--moduix-color-foreground));
+    align-items: center;
+    gap: var(--moduix-toggle-group-gap, var(--moduix-border-width-sm));
+    max-inline-size: 100%;
+    padding: var(--moduix-toggle-group-padding, var(--moduix-border-width-md));
+    border: var(--moduix-toggle-group-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-toggle-group-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-toggle-group-radius, var(--moduix-radius-lg));
+    background-color: var(--moduix-toggle-group-bg, var(--moduix-color-muted));
+    color: var(--moduix-toggle-group-color, var(--moduix-color-foreground));
+    display: inline-flex;
+    overflow-x: auto;
+  }
+
+  .root-HI0WAX::-webkit-scrollbar {
+    display: none;
+  }
+
+  .root-HI0WAX[data-orientation="vertical"] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .root-HI0WAX[data-orientation="vertical"] > .item-RRrFoz {
+    justify-content: flex-start;
+    width: 100%;
+  }
+
+  .root-HI0WAX[data-variant="ghost"] {
+    padding: var(--moduix-toggle-group-padding, var(--moduix-toggle-group-ghost-padding, 0));
+    border-color: var(--moduix-toggle-group-border-color, var(--moduix-toggle-group-ghost-border-color, transparent));
+    background-color: var(--moduix-toggle-group-bg, var(--moduix-toggle-group-ghost-bg, transparent));
+  }
+
+  .root-HI0WAX[data-variant="outline"] {
+    background-color: var(--moduix-toggle-group-bg, var(--moduix-toggle-group-outline-bg, var(--moduix-color-background)));
+  }
+
+  .item-RRrFoz {
+    border-radius: var(--moduix-toggle-group-item-radius, var(--moduix-radius-md));
+    flex: none;
+  }
+}
+

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

@@ -0,0 +1,2 @@
+export { ToggleGroup, useToggleGroup, useToggleGroupContext } from './ToggleGroup.js';
+export type { ToggleGroupItemProps, ToggleGroupRootProps, ToggleGroupRootProviderProps, ToggleSize, ToggleVariant, } from './ToggleGroup.js';

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

@@ -0,0 +1 @@
+export { ToggleGroup, useToggleGroup, useToggleGroupContext } from "./ToggleGroup.js";

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

@@ -0,0 +1 @@
+export { ToggleGroup, useToggleGroup, useToggleGroupContext } from "./ToggleGroup.jsx";

package/dist/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,29 @@
+import { Tooltip as TooltipPrimitive, useTooltip, useTooltipContext } from '@ark-ui/solid/tooltip';
+import type { ComponentProps, JSX } from 'solid-js';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
+type TooltipRootProps = ComponentProps<typeof TooltipPrimitive.Root> & OverlayPortalProps;
+type TooltipRootProviderProps = ComponentProps<typeof TooltipPrimitive.RootProvider> & OverlayPortalProps;
+type TooltipDisabledTriggerProps = JSX.IntrinsicElements['span'];
+declare function TooltipRoot(props: TooltipRootProps): JSX.Element;
+declare function TooltipRootProvider(props: TooltipRootProviderProps): JSX.Element;
+declare function TooltipTrigger(props: ComponentProps<typeof TooltipPrimitive.Trigger>): JSX.Element;
+declare function TooltipDisabledTrigger(props: TooltipDisabledTriggerProps): JSX.Element;
+declare function TooltipPositioner(props: ComponentProps<typeof TooltipPrimitive.Positioner>): JSX.Element;
+declare function TooltipContent(props: ComponentProps<typeof TooltipPrimitive.Content>): JSX.Element;
+declare function TooltipBody(props: ComponentProps<typeof TooltipPrimitive.Content>): JSX.Element;
+declare function TooltipArrow(props: ComponentProps<typeof TooltipPrimitive.Arrow>): JSX.Element;
+declare function TooltipArrowTip(props: ComponentProps<typeof TooltipPrimitive.ArrowTip>): JSX.Element;
+declare const Tooltip: typeof TooltipRoot & {
+    Root: typeof TooltipRoot;
+    RootProvider: typeof TooltipRootProvider;
+    Context: (props: TooltipPrimitive.ContextProps) => JSX.Element;
+    Trigger: typeof TooltipTrigger;
+    DisabledTrigger: typeof TooltipDisabledTrigger;
+    Body: typeof TooltipBody;
+    Positioner: typeof TooltipPositioner;
+    Content: typeof TooltipContent;
+    Arrow: typeof TooltipArrow;
+    ArrowTip: typeof TooltipArrowTip;
+};
+export { Tooltip, useTooltip, useTooltipContext };
+export type { TooltipRootProps, TooltipRootProviderProps };