@moduix/solid 1.0.0

package/dist/components/json-tree-view/JsonTreeView_module.css

@@ -0,0 +1,163 @@
+@layer moduix.components {
+  .root-jp1ege {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    color: var(--moduix-color-foreground);
+    font-family: var(--moduix-font-mono);
+    font-size: var(--moduix-text-xs);
+    line-height: var(--moduix-line-height-text-xs);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .root-jp1ege[data-disabled] {
+    opacity: var(--moduix-opacity-disabled);
+  }
+
+  .tree-a99RSA, .root-jp1ege :where([data-scope="json-tree-view"][data-part="branch"]) {
+    gap: var(--moduix-spacing-1);
+    flex-direction: column;
+    min-width: 0;
+    display: flex;
+  }
+
+  .root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-control"], [data-scope="json-tree-view"][data-part="item"]) {
+    z-index: 0;
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    min-height: calc(var(--moduix-line-height-text-xs) + (var(--moduix-spacing-0-5) * 2));
+    align-items: center;
+    gap: var(--moduix-spacing-0-5);
+    border-radius: var(--moduix-radius-xs);
+    padding-block: var(--moduix-spacing-0-5);
+    color: inherit;
+    cursor: pointer;
+    font: inherit;
+    text-align: start;
+    transition: color var(--moduix-transition-default),
+      opacity var(--moduix-transition-default);
+    -webkit-user-select: none;
+    user-select: none;
+    background-color: #0000;
+    border: 0;
+    outline: none;
+    padding-inline-start: calc(var(--moduix-spacing-1) + var(--moduix-spacing-1) + ((var(--depth, 1) - 1) * 1rem));
+    padding-inline-end: var(--moduix-spacing-1);
+    display: flex;
+    position: relative;
+  }
+
+  .root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-control"], [data-scope="json-tree-view"][data-part="item"]):before {
+    z-index: -1;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 var(--moduix-border-width-sm) transparent;
+    content: "";
+    pointer-events: none;
+    transition: background-color var(--moduix-transition-default),
+        box-shadow var(--moduix-transition-default);
+    background-color: #0000;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: calc(var(--moduix-spacing-1) + ((var(--depth, 1) - 1) * 1rem));
+    inset-inline-end: 0;
+  }
+
+  :is(.root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-control"], [data-scope="json-tree-view"][data-part="item"]):not([data-disabled]):hover, .root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-control"], [data-scope="json-tree-view"][data-part="item"])[data-selected]):before {
+    background-color: color-mix(in oklab,
+          var(--moduix-color-accent) 72%,
+          var(--moduix-color-background));
+  }
+
+  :is(.root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-control"], [data-scope="json-tree-view"][data-part="item"]):focus-visible, .root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-control"], [data-scope="json-tree-view"][data-part="item"])[data-focus]):before {
+    box-shadow: inset 0 0 0 var(--moduix-border-width-sm) var(--moduix-color-ring);
+  }
+
+  .root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-control"], [data-scope="json-tree-view"][data-part="item"])[data-disabled] {
+    color: var(--moduix-color-muted-foreground);
+    cursor: default;
+  }
+
+  .root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-indicator"]) {
+    width: var(--moduix-spacing-3);
+    height: var(--moduix-spacing-3);
+    flex: 0 0 var(--moduix-spacing-3);
+    color: color-mix(in oklab,
+      var(--moduix-color-muted-foreground) 42%,
+      var(--moduix-color-foreground));
+    transition: transform var(--moduix-transition-default);
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-indicator"])[data-state="open"] {
+    transform: rotate(90deg);
+  }
+
+  .root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-indicator"]) svg {
+    width: var(--moduix-spacing-3);
+    height: var(--moduix-spacing-3);
+  }
+
+  .root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-text"], [data-scope="json-tree-view"][data-part="item-text"]) {
+    overflow-wrap: anywhere;
+    min-width: 0;
+  }
+
+  .root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-content"]) {
+    gap: var(--moduix-spacing-1);
+    flex-direction: column;
+    min-width: 0;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .root-jp1ege :where([data-kind="key"]) {
+    color: color-mix(in oklab, var(--moduix-color-chart-1) 72%, var(--moduix-color-foreground));
+    font-weight: var(--moduix-weight-medium);
+  }
+
+  .root-jp1ege :where([data-kind="colon"], [data-kind="brace"], [data-kind="preview-text"]) {
+    color: var(--moduix-color-muted-foreground);
+  }
+
+  .root-jp1ege :where([data-kind="brace"]) {
+    font-weight: var(--moduix-weight-medium);
+  }
+
+  .root-jp1ege :where([data-kind="preview"][data-type="string"]) {
+    color: color-mix(in oklab, var(--moduix-color-success) 78%, var(--moduix-color-foreground));
+  }
+
+  .root-jp1ege :where([data-kind="preview"][data-type="number"], [data-kind="preview"][data-type="bigint"]) {
+    color: color-mix(in oklab, var(--moduix-color-chart-3) 78%, var(--moduix-color-foreground));
+  }
+
+  .root-jp1ege :where([data-kind="preview"][data-type="boolean"]) {
+    color: color-mix(in oklab, var(--moduix-color-chart-4) 74%, var(--moduix-color-foreground));
+    font-weight: var(--moduix-weight-medium);
+  }
+
+  .root-jp1ege :where([data-kind="preview"][data-type="null"], [data-kind="preview"][data-type="undefined"]) {
+    color: var(--moduix-color-muted-foreground);
+    font-style: italic;
+    font-weight: var(--moduix-weight-medium);
+  }
+
+  .root-jp1ege :where([data-kind="preview"][data-type="error"], [data-kind="error-stack"], [data-kind="operator"]) {
+    color: var(--moduix-color-destructive);
+  }
+
+  .root-jp1ege :where([data-kind="preview"][data-type="function"], [data-kind="function-type"], [data-kind="function-body"]) {
+    color: color-mix(in oklab, var(--moduix-color-chart-5) 72%, var(--moduix-color-foreground));
+    font-style: italic;
+  }
+
+  .root-jp1ege :where([data-kind="constructor"]) {
+    color: var(--moduix-color-muted-foreground);
+    font-weight: var(--moduix-weight-medium);
+  }
+}
+

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

@@ -0,0 +1 @@
+export * from './JsonTreeView.js';

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

@@ -0,0 +1 @@
+export * from "./JsonTreeView.js";

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

@@ -0,0 +1 @@
+export * from "./JsonTreeView.jsx";

package/dist/components/kbd/Kbd.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+declare function KbdRoot(props: HTMLArkProps<'kbd'>): import("solid-js").JSX.Element;
+declare function KbdGroupPart(props: HTMLArkProps<'span'>): import("solid-js").JSX.Element;
+declare const Kbd: typeof KbdRoot & {
+    Root: typeof KbdRoot;
+    Group: typeof KbdGroupPart;
+};
+export { Kbd };

package/dist/components/kbd/Kbd.js

@@ -0,0 +1,37 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import Kbd_module from "./Kbd.module.js";
+function KbdRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.kbd, mergeProps({
+        "data-scope": "kbd",
+        "data-part": "root",
+        "data-slot": "kbd-root",
+        get ["class"] () {
+            return clsx(Kbd_module.root, local.class);
+        }
+    }, others));
+}
+function KbdGroupPart(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        role: "group",
+        "data-scope": "kbd",
+        "data-part": "group",
+        "data-slot": "kbd-group",
+        get ["class"] () {
+            return clsx(Kbd_module.group, local.class);
+        }
+    }, others));
+}
+const Kbd = Object.assign(KbdRoot, {
+    Root: KbdRoot,
+    Group: KbdGroupPart
+});
+export { Kbd };

package/dist/components/kbd/Kbd.jsx

@@ -0,0 +1,21 @@
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import Kbd_module from "./Kbd.module.jsx";
+function KbdRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.kbd data-scope="kbd" data-part="root" data-slot="kbd-root" class={clsx(Kbd_module.root, local.class)} {...others}/>;
+}
+function KbdGroupPart(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.span role="group" data-scope="kbd" data-part="group" data-slot="kbd-group" class={clsx(Kbd_module.group, local.class)} {...others}/>;
+}
+const Kbd = Object.assign(KbdRoot, {
+    Root: KbdRoot,
+    Group: KbdGroupPart
+});
+export { Kbd };

package/dist/components/kbd/Kbd.module.js

@@ -0,0 +1,6 @@
+import "./Kbd_module.css";
+const Kbd_module = {
+    root: "root-wOrSS2",
+    group: "group-EgI1Yb"
+};
+export default Kbd_module;

package/dist/components/kbd/Kbd.module.jsx

@@ -0,0 +1,6 @@
+import "./Kbd_module.css";
+const Kbd_module = {
+    root: "root-wOrSS2",
+    group: "group-EgI1Yb"
+};
+export default Kbd_module;

package/dist/components/kbd/Kbd_module.css

@@ -0,0 +1,46 @@
+@layer moduix.components {
+  .root-wOrSS2[data-scope="kbd"][data-part="root"] {
+    box-sizing: border-box;
+    min-width: var(--moduix-kbd-min-width, var(--moduix-kbd-height, var(--moduix-size-xs)));
+    max-width: 100%;
+    min-height: var(--moduix-kbd-height, var(--moduix-size-xs));
+    border: var(--moduix-kbd-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-kbd-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-kbd-radius, var(--moduix-radius-sm));
+    padding: var(--moduix-kbd-padding-y, 0) var(--moduix-kbd-padding-x, var(--moduix-spacing-2));
+    background-color: var(--moduix-kbd-bg, var(--moduix-color-muted));
+    box-shadow: var(--moduix-kbd-shadow, inset 0 -1px 0 color-mix(in oklab, var(--moduix-color-foreground) 12%, transparent));
+    color: var(--moduix-kbd-color, var(--moduix-color-foreground));
+    font-family: var(--moduix-kbd-font-family, var(--moduix-font-mono)), monospace;
+    font-size: var(--moduix-kbd-font-size, var(--moduix-text-xs));
+    font-weight: var(--moduix-kbd-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-kbd-line-height, var(--moduix-line-height-text-xs));
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+    vertical-align: middle;
+    overflow-wrap: anywhere;
+    -webkit-user-select: none;
+    user-select: none;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .group-EgI1Yb[data-scope="kbd"][data-part="group"] {
+    box-sizing: border-box;
+    align-items: center;
+    gap: var(--moduix-kbd-group-gap, var(--moduix-spacing-1));
+    max-width: 100%;
+    box-shadow: none;
+    color: var(--moduix-kbd-group-separator-color, var(--moduix-color-muted-foreground));
+    font: inherit;
+    vertical-align: middle;
+    background: none;
+    border: 0;
+    flex-wrap: wrap;
+    padding: 0;
+    display: inline-flex;
+  }
+}
+

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

@@ -0,0 +1 @@
+export * from './Kbd.js';

package/dist/components/kbd/index.js

@@ -0,0 +1 @@
+export * from "./Kbd.js";

package/dist/components/kbd/index.jsx

@@ -0,0 +1 @@
+export * from "./Kbd.jsx";

package/dist/components/lightbox/Lightbox.d.ts

@@ -0,0 +1,60 @@
+import { Dialog as DialogPrimitive, useDialog, useDialogContext } from '@ark-ui/solid/dialog';
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+import type { ComponentProps } from 'solid-js';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
+type LightboxImageSelectDetails = {
+    alt?: string;
+    element: HTMLImageElement;
+    src: string;
+};
+type LightboxImageProps = ComponentProps<'img'> & {
+    closeOnClick?: boolean;
+};
+type LightboxRootProps = ComponentProps<typeof DialogPrimitive.Root> & OverlayPortalProps;
+type LightboxRootProviderProps = ComponentProps<typeof DialogPrimitive.RootProvider> & OverlayPortalProps;
+type LightboxBindProps = {
+    onImageSelect: (details: LightboxImageSelectDetails) => void;
+    selector: string;
+    rootRef?: HTMLElement | (() => HTMLElement | null | undefined);
+    rootSelector?: string;
+};
+declare function LightboxRoot(props: LightboxRootProps): import("solid-js").JSX.Element;
+declare function LightboxRootProvider(props: LightboxRootProviderProps): import("solid-js").JSX.Element;
+declare function LightboxTrigger(props: ComponentProps<typeof DialogPrimitive.Trigger>): import("solid-js").JSX.Element;
+declare function LightboxBackdrop(props: ComponentProps<typeof DialogPrimitive.Backdrop>): import("solid-js").JSX.Element;
+declare function LightboxPositioner(props: ComponentProps<typeof DialogPrimitive.Positioner>): import("solid-js").JSX.Element;
+declare function LightboxContent(props: ComponentProps<typeof DialogPrimitive.Content>): import("solid-js").JSX.Element;
+declare function LightboxTitle(props: ComponentProps<typeof DialogPrimitive.Title>): import("solid-js").JSX.Element;
+declare function LightboxDescription(props: ComponentProps<typeof DialogPrimitive.Description>): import("solid-js").JSX.Element;
+declare function LightboxCloseTrigger(props: ComponentProps<typeof DialogPrimitive.CloseTrigger>): import("solid-js").JSX.Element;
+type LightboxCloseIconProps = Omit<ComponentProps<typeof DialogPrimitive.CloseTrigger>, 'asChild'>;
+declare function LightboxCloseIcon(props: LightboxCloseIconProps): import("solid-js").JSX.Element;
+declare function LightboxImage(props: LightboxImageProps): import("solid-js").JSX.Element;
+declare function LightboxGallery(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function LightboxHeader(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function LightboxBody(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function LightboxFooter(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function LightboxBind(props: LightboxBindProps): import("solid-js").JSX.Element;
+type LightboxComponent = typeof LightboxRoot & {
+    Root: typeof LightboxRoot;
+    RootProvider: typeof LightboxRootProvider;
+    Trigger: typeof LightboxTrigger;
+    Backdrop: typeof LightboxBackdrop;
+    Positioner: typeof LightboxPositioner;
+    Content: typeof LightboxContent;
+    Title: typeof LightboxTitle;
+    Description: typeof LightboxDescription;
+    CloseTrigger: typeof LightboxCloseTrigger;
+    CloseIcon: typeof LightboxCloseIcon;
+    Header: typeof LightboxHeader;
+    Body: typeof LightboxBody;
+    Footer: typeof LightboxFooter;
+    Image: typeof LightboxImage;
+    Gallery: typeof LightboxGallery;
+    Bind: typeof LightboxBind;
+    useLightbox: typeof useDialog;
+    useLightboxContext: typeof useDialogContext;
+};
+declare const Lightbox: LightboxComponent;
+export { Lightbox, LightboxBind, LightboxGallery, LightboxImage, useDialog as useLightbox, useDialogContext as useLightboxContext, };
+export type { LightboxBindProps, LightboxImageSelectDetails };