@moduix/solid 1.0.0

package/dist/components/tree-view/TreeView_module.css

@@ -0,0 +1,310 @@
+@layer moduix.components {
+  .root-2ZXoMk {
+    box-sizing: border-box;
+    width: var(--moduix-tree-view-width, 20rem);
+    max-width: var(--moduix-tree-view-max-width, 100%);
+    gap: var(--moduix-tree-view-root-gap, var(--moduix-spacing-2));
+    min-width: 0;
+    color: var(--moduix-tree-view-color, var(--moduix-color-foreground));
+    flex-direction: column;
+    display: flex;
+  }
+
+  .root-2ZXoMk[data-disabled] {
+    opacity: var(--moduix-tree-view-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .label-kaE2OW {
+    color: var(--moduix-tree-view-label-color, var(--moduix-tree-view-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-tree-view-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-tree-view-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-tree-view-label-line-height, var(--moduix-line-height-text-sm));
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .tree-V7hDwy {
+    gap: var(--moduix-tree-view-row-gap, var(--moduix-spacing-1));
+    min-width: 0;
+    color: var(--moduix-tree-view-color, var(--moduix-color-foreground));
+    font-size: var(--moduix-tree-view-item-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-tree-view-item-line-height, var(--moduix-line-height-text-sm));
+    flex-direction: column;
+    display: flex;
+  }
+
+  .branch-HVLvxc {
+    gap: var(--moduix-tree-view-row-gap, var(--moduix-spacing-1));
+    flex-direction: column;
+    min-width: 0;
+    display: flex;
+    position: relative;
+  }
+
+  .branchControl-ositpp, .item-D7JZg4 {
+    z-index: 0;
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    min-height: var(--moduix-tree-view-item-min-height, var(--moduix-size-sm));
+    align-items: center;
+    gap: var(--moduix-tree-view-item-gap, var(--moduix-spacing-2));
+    border: var(--moduix-tree-view-item-border-width, 0) solid
+      var(--moduix-tree-view-item-border-color, transparent);
+    border-radius: var(--moduix-tree-view-item-radius, var(--moduix-radius-sm));
+    padding-block: var(--moduix-tree-view-item-padding-y, var(--moduix-spacing-1));
+    color: var(--moduix-tree-view-item-color, var(--moduix-tree-view-color, var(--moduix-color-foreground)));
+    cursor: pointer;
+    font: inherit;
+    text-align: start;
+    transition: color var(--moduix-tree-view-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-tree-view-transition, var(--moduix-transition-default));
+    -webkit-user-select: none;
+    user-select: none;
+    outline: none;
+    padding-inline-start: calc(var(--moduix-tree-view-item-padding-x, var(--moduix-spacing-2)) +
+        ((var(--depth, 1) - 1) * var(--moduix-tree-view-indent, 1rem)));
+    padding-inline-end: var(--moduix-tree-view-item-padding-x, var(--moduix-spacing-2));
+    text-decoration: none;
+    display: flex;
+    position: relative;
+  }
+
+  :is(.branchControl-ositpp, .item-D7JZg4):before {
+    z-index: -1;
+    border-radius: inherit;
+    background-color: var(--moduix-tree-view-item-bg, transparent);
+    content: "";
+    box-shadow: inset 0 0 0
+        var(--moduix-tree-view-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        transparent;
+    pointer-events: none;
+    transition: background-color var(--moduix-tree-view-transition, var(--moduix-transition-default)),
+        box-shadow var(--moduix-tree-view-transition, var(--moduix-transition-default));
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: calc(var(--moduix-tree-view-item-padding-x, var(--moduix-spacing-2)) +
+          ((var(--depth, 1) - 1) * var(--moduix-tree-view-indent, 1rem)));
+    inset-inline-end: 0;
+  }
+
+  :is(.branchControl-ositpp, .item-D7JZg4):not([data-disabled]):hover {
+    color: var(--moduix-tree-view-item-hover-color, var(--moduix-color-accent-foreground));
+  }
+
+  :is(.branchControl-ositpp, .item-D7JZg4):not([data-disabled]):hover:before {
+    background-color: var(--moduix-tree-view-item-hover-bg, var(--moduix-color-accent));
+  }
+
+  :is(:is(.branchControl-ositpp, .item-D7JZg4):focus-visible, :is(.branchControl-ositpp, .item-D7JZg4)[data-focus]):before {
+    box-shadow: inset 0 0 0
+          var(--moduix-tree-view-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+          var(--moduix-tree-view-focus-ring-color, var(--moduix-color-ring));
+  }
+
+  :is(.branchControl-ositpp, .item-D7JZg4)[data-selected] {
+    color: var(--moduix-tree-view-item-selected-color, var(--moduix-color-accent-foreground));
+  }
+
+  :is(.branchControl-ositpp, .item-D7JZg4)[data-selected]:before {
+    background-color: var(--moduix-tree-view-item-selected-bg, var(--moduix-color-accent));
+  }
+
+  :is(.branchControl-ositpp, .item-D7JZg4)[data-disabled] {
+    color: var(--moduix-tree-view-item-disabled-color, var(--moduix-color-muted-foreground));
+    cursor: default;
+    opacity: var(--moduix-tree-view-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .item-D7JZg4 {
+    padding-inline-start: calc(var(--moduix-tree-view-item-padding-x, var(--moduix-spacing-2)) + var(--moduix-spacing-1) +
+        var(--moduix-spacing-1) + ((var(--depth, 1) - 1) * var(--moduix-tree-view-indent, 1rem)));
+  }
+
+  .branchTrigger-_j6AJ6, .branchIndicator-f3bjVW, .itemIndicator-jfNuks {
+    width: var(--moduix-tree-view-indicator-size, var(--moduix-spacing-4));
+    height: var(--moduix-tree-view-indicator-size, var(--moduix-spacing-4));
+    flex: 0 0 var(--moduix-tree-view-indicator-size, var(--moduix-spacing-4));
+    color: var(--moduix-tree-view-indicator-color, currentColor);
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  :is(.branchTrigger-_j6AJ6, .branchIndicator-f3bjVW, .itemIndicator-jfNuks) svg {
+    width: var(--moduix-tree-view-indicator-icon-size, var(--moduix-spacing-3-5));
+    height: var(--moduix-tree-view-indicator-icon-size, var(--moduix-spacing-3-5));
+  }
+
+  .branchTrigger-_j6AJ6, .branchIndicator-f3bjVW {
+    transition: transform var(--moduix-tree-view-transition, var(--moduix-transition-default));
+  }
+
+  :is(.branchTrigger-_j6AJ6, .branchIndicator-f3bjVW)[data-state="open"] {
+    transform: rotate(90deg);
+  }
+
+  .branchText-u4kwmk, .itemText-L68sCp {
+    align-items: center;
+    gap: var(--moduix-tree-view-item-text-gap, var(--moduix-spacing-2));
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+    display: inline-flex;
+    overflow: hidden;
+  }
+
+  :is(.branchText-u4kwmk, .itemText-L68sCp) svg {
+    width: var(--moduix-tree-view-node-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-tree-view-node-icon-size, var(--moduix-spacing-4));
+    flex: 0 0 var(--moduix-tree-view-node-icon-size, var(--moduix-spacing-4));
+  }
+
+  .branchContent-WSjq4T {
+    gap: var(--moduix-tree-view-row-gap, var(--moduix-spacing-1));
+    flex-direction: column;
+    min-width: 0;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .branchContent-WSjq4T[data-state="open"] {
+    animation: tree-view-slide-down-sZeOA1 var(--moduix-tree-view-content-transition-duration, .15s) ease-out,
+        tree-view-fade-in-HIbSvG var(--moduix-tree-view-content-transition-duration, .15s) ease-out;
+  }
+
+  .branchContent-WSjq4T[data-state="closed"] {
+    animation: tree-view-slide-up-TuO_3N var(--moduix-tree-view-content-transition-duration, .15s) ease-out,
+        tree-view-fade-out-VVyj_v var(--moduix-tree-view-content-transition-duration, .15s) ease-out;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .branchContent-WSjq4T {
+      animation: none;
+    }
+  }
+
+  .branchIndentGuide-wtrLKH {
+    z-index: 1;
+    width: var(--moduix-tree-view-indent-guide-width, var(--moduix-border-width-sm));
+    background-color: var(--moduix-tree-view-indent-guide-color, var(--moduix-color-border));
+    pointer-events: none;
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    inset-inline-start: calc(var(--moduix-tree-view-item-padding-x, var(--moduix-spacing-2)) +
+        ((var(--depth, 1) - 1) * var(--moduix-tree-view-indent, 1rem)) +
+        (var(--moduix-tree-view-indicator-size, var(--moduix-spacing-4)) / 2));
+  }
+
+  .nodeCheckbox-BfAbe5 {
+    box-sizing: border-box;
+    width: var(--moduix-tree-view-checkbox-size, var(--moduix-spacing-4));
+    height: var(--moduix-tree-view-checkbox-size, var(--moduix-spacing-4));
+    flex: 0 0 var(--moduix-tree-view-checkbox-size, var(--moduix-spacing-4));
+    border: var(--moduix-tree-view-checkbox-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-tree-view-checkbox-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-tree-view-checkbox-radius, var(--moduix-radius-xs));
+    background-color: var(--moduix-tree-view-checkbox-bg, var(--moduix-color-background));
+    color: var(--moduix-tree-view-checkbox-color, var(--moduix-color-primary-foreground));
+    outline: var(--moduix-tree-view-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+      solid transparent;
+    outline-offset: var(--moduix-tree-view-checkbox-focus-ring-offset, var(--moduix-border-width-sm));
+    transition: background-color var(--moduix-tree-view-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-tree-view-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-tree-view-transition, var(--moduix-transition-default));
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .nodeCheckbox-BfAbe5[data-state="checked"], .nodeCheckbox-BfAbe5[data-state="indeterminate"] {
+    border-color: var(--moduix-tree-view-checkbox-checked-bg, var(--moduix-color-primary));
+    background-color: var(--moduix-tree-view-checkbox-checked-bg, var(--moduix-color-primary));
+  }
+
+  .nodeCheckbox-BfAbe5:focus-visible {
+    outline-color: var(--moduix-tree-view-focus-ring-color, var(--moduix-color-ring));
+  }
+
+  .nodeCheckbox-BfAbe5[data-disabled] {
+    cursor: default;
+    opacity: var(--moduix-tree-view-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .nodeCheckbox-BfAbe5 svg {
+    width: var(--moduix-tree-view-checkbox-icon-size, var(--moduix-spacing-3));
+    height: var(--moduix-tree-view-checkbox-icon-size, var(--moduix-spacing-3));
+  }
+
+  .nodeCheckboxIndicator-wzryi5 {
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .nodeRenameInput-TruWxA {
+    box-sizing: border-box;
+    border: var(--moduix-tree-view-rename-input-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-tree-view-rename-input-border-color, var(--moduix-color-ring));
+    border-radius: var(--moduix-tree-view-rename-input-radius, var(--moduix-radius-xs));
+    min-width: 0;
+    padding-block: var(--moduix-tree-view-rename-input-padding-y, 0);
+    padding-inline: var(--moduix-tree-view-rename-input-padding-x, var(--moduix-spacing-1));
+    background-color: var(--moduix-tree-view-rename-input-bg, var(--moduix-color-background));
+    color: var(--moduix-tree-view-rename-input-color, var(--moduix-color-foreground));
+    font: inherit;
+    outline: var(--moduix-tree-view-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--moduix-tree-view-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))) *
+        -1);
+    flex: 1;
+  }
+
+  .nodeRenameInput-TruWxA:focus-visible {
+    outline-color: var(--moduix-tree-view-focus-ring-color, var(--moduix-color-ring));
+  }
+
+  @keyframes tree-view-slide-down-sZeOA1 {
+    from {
+      height: 0;
+    }
+
+    to {
+      height: var(--height);
+    }
+  }
+
+  @keyframes tree-view-slide-up-TuO_3N {
+    from {
+      height: var(--height);
+    }
+
+    to {
+      height: 0;
+    }
+  }
+
+  @keyframes tree-view-fade-in-HIbSvG {
+    from {
+      opacity: .01;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes tree-view-fade-out-VVyj_v {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: .01;
+    }
+  }
+}
+

package/dist/components/tree-view/index.d.ts

@@ -0,0 +1 @@
+export { TreeView, createFileTreeCollection, createTreeCollection, useTreeView, useTreeViewContext, useTreeViewNodeContext, type TreeViewLoadChildrenDetails, type TreeViewNodeProps, type TreeViewNodeRenderProps, type TreeViewNodeState, type TreeViewNodeProviderProps, } from './TreeView.js';

package/dist/components/tree-view/index.js

@@ -0,0 +1 @@
+export { TreeView, createFileTreeCollection, createTreeCollection, useTreeView, useTreeViewContext, useTreeViewNodeContext } from "./TreeView.js";

package/dist/components/tree-view/index.jsx

@@ -0,0 +1 @@
+export { TreeView, createFileTreeCollection, createTreeCollection, useTreeView, useTreeViewContext, useTreeViewNodeContext } from "./TreeView.jsx";

package/dist/components/typeset/Typeset.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+type TypesetDataProps = {
+    'data-scope'?: string;
+    'data-part'?: string;
+    'data-slot'?: string;
+};
+type TypesetRootProps = HTMLArkProps<'div'> & TypesetDataProps;
+declare function TypesetRoot(props: TypesetRootProps): import("solid-js").JSX.Element;
+type TypesetScrollProps = HTMLArkProps<'div'> & TypesetDataProps;
+declare function TypesetScroll(props: TypesetScrollProps): import("solid-js").JSX.Element;
+declare const Typeset: typeof TypesetRoot & {
+    Root: typeof TypesetRoot;
+    Scroll: typeof TypesetScroll;
+};
+export { Typeset };

package/dist/components/typeset/Typeset.js

@@ -0,0 +1,68 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import Typeset_module from "./Typeset.module.js";
+function TypesetRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-scope',
+        'data-part',
+        'data-slot'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "typeset",
+        "data-part": "root",
+        "data-slot": "typeset",
+        get ["class"] () {
+            return clsx(Typeset_module.root, local.class);
+        }
+    }));
+}
+function TypesetScroll(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'asChild',
+        'class',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'role',
+        'tabIndex'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        get ["aria-label"] () {
+            return local['aria-label'];
+        },
+        get ["aria-labelledby"] () {
+            return local['aria-labelledby'];
+        },
+        "data-scope": "typeset",
+        "data-part": "scroll",
+        "data-slot": "typeset-scroll",
+        get ["class"] () {
+            return clsx(Typeset_module.scroll, local.class);
+        },
+        get role () {
+            return local.role ?? (local['aria-label'] || local['aria-labelledby'] ? 'region' : void 0);
+        },
+        get tabIndex () {
+            return local.tabIndex ?? 0;
+        }
+    }));
+}
+const Typeset = Object.assign(TypesetRoot, {
+    Root: TypesetRoot,
+    Scroll: TypesetScroll
+});
+export { Typeset };

package/dist/components/typeset/Typeset.jsx

@@ -0,0 +1,33 @@
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import Typeset_module from "./Typeset.module.jsx";
+function TypesetRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-scope',
+        'data-part',
+        'data-slot'
+    ]);
+    return <ark.div asChild={local.asChild} {...others} data-scope="typeset" data-part="root" data-slot="typeset" class={clsx(Typeset_module.root, local.class)}/>;
+}
+function TypesetScroll(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'asChild',
+        'class',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'role',
+        'tabIndex'
+    ]);
+    return <ark.div asChild={local.asChild} {...others} aria-label={local['aria-label']} aria-labelledby={local['aria-labelledby']} data-scope="typeset" data-part="scroll" data-slot="typeset-scroll" class={clsx(Typeset_module.scroll, local.class)} role={local.role ?? (local['aria-label'] || local['aria-labelledby'] ? 'region' : void 0)} tabIndex={local.tabIndex ?? 0}/>;
+}
+const Typeset = Object.assign(TypesetRoot, {
+    Root: TypesetRoot,
+    Scroll: TypesetScroll
+});
+export { Typeset };

package/dist/components/typeset/Typeset.module.js

@@ -0,0 +1,6 @@
+import "./Typeset_module.css";
+const Typeset_module = {
+    root: "root-DaHOOi",
+    scroll: "scroll-ZsvXUQ"
+};
+export default Typeset_module;

package/dist/components/typeset/Typeset.module.jsx

@@ -0,0 +1,6 @@
+import "./Typeset_module.css";
+const Typeset_module = {
+    root: "root-DaHOOi",
+    scroll: "scroll-ZsvXUQ"
+};
+export default Typeset_module;