@moduix/react 1.1.0

package/dist/components/separator/Separator.d.ts

@@ -0,0 +1,14 @@
+//#region src/components/separator/Separator.d.ts
+declare const Separator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+  orientation?: "horizontal" | "vertical";
+  size?: "xs" | "sm" | "md" | "lg";
+  variant?: "solid" | "dashed" | "dotted";
+} & import("react").RefAttributes<HTMLSpanElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    orientation?: "horizontal" | "vertical";
+    size?: "xs" | "sm" | "md" | "lg";
+    variant?: "solid" | "dashed" | "dotted";
+  } & import("react").RefAttributes<HTMLSpanElement>>;
+};
+//#endregion
+export { Separator };

package/dist/components/separator/Separator.js

@@ -0,0 +1,27 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Separator_module_default from "./Separator.module.js";
+import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+//#region src/components/separator/Separator.tsx
+const SeparatorRoot = forwardRef(function SeparatorRoot({ asChild, className, orientation = "horizontal", role, size = "sm", variant = "solid", "aria-orientation": ariaOrientation, ...props }, ref) {
+	const resolvedRole = role ?? "separator";
+	return /* @__PURE__ */ jsx(ark.span, {
+		ref,
+		asChild,
+		role: resolvedRole,
+		"aria-orientation": ariaOrientation ?? (resolvedRole === "separator" ? orientation : void 0),
+		"data-scope": "separator",
+		"data-part": "root",
+		"data-slot": "separator-root",
+		"data-orientation": orientation,
+		"data-size": size,
+		"data-variant": variant,
+		className: clsx(Separator_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const Separator = Object.assign(SeparatorRoot, { Root: SeparatorRoot });
+//#endregion
+export { Separator };

package/dist/components/separator/Separator.module.js

@@ -0,0 +1,5 @@
+import './Separator.css';
+//#region src/components/separator/Separator.module.css
+var Separator_module_default = { "root": "cDoSda_root" };
+//#endregion
+export { Separator_module_default as default };

package/dist/components/sidebar/Sidebar.css

@@ -0,0 +1,341 @@
+@layer ui.components {
+  .gCbFta_root {
+    --splitter-width: var(--sidebar-width, 100%);
+    --splitter-height: var(--sidebar-height, 100dvh);
+    --splitter-min-height: var(--sidebar-min-height, 24rem);
+    --splitter-border-color: var(--sidebar-border-color, var(--color-border));
+    --splitter-border-width: var(--sidebar-border-width, var(--border-width-sm));
+    --splitter-radius: var(--sidebar-radius, 0);
+    --splitter-shadow: var(--sidebar-shadow, none);
+    --splitter-bg: var(--sidebar-inset-bg, var(--color-background));
+    --splitter-panel-padding: 0;
+    --splitter-panel-min-height: 0;
+    --splitter-resize-trigger-line-color: var(--sidebar-border-color, var(--color-border));
+    --splitter-resize-trigger-line-color-hover: var(--sidebar-resize-color-hover, color-mix(in oklab, var(--color-border) 72%, var(--color-muted-foreground)));
+    --splitter-resize-trigger-line-color-focus: var(--sidebar-resize-color-focus, color-mix(in oklab, var(--color-border) 72%, var(--color-muted-foreground)));
+    --splitter-resize-trigger-line-color-dragging: var(--sidebar-resize-color-dragging, color-mix(in oklab, var(--color-border) 72%, var(--color-muted-foreground)));
+    --splitter-resize-trigger-size: var(--sidebar-resize-hit-area, .75rem);
+    isolation: isolate;
+  }
+
+  .gCbFta_panel {
+    background-color: var(--sidebar-bg, var(--color-card));
+    color: var(--sidebar-color, var(--color-card-foreground));
+    transition: background-color var(--sidebar-transition, var(--transition-default)),
+      color var(--sidebar-transition, var(--transition-default));
+    flex-direction: column;
+    display: flex;
+    overflow: hidden;
+
+    &[data-state="collapsed"] {
+      & .gCbFta_header, & .gCbFta_footer, & .gCbFta_group {
+        padding-inline: var(--sidebar-collapsed-padding-x, var(--spacing-1));
+      }
+
+      & .gCbFta_header, & .gCbFta_footer {
+        justify-content: center;
+      }
+
+      & .gCbFta_content {
+        scrollbar-gutter: auto;
+        scrollbar-width: none;
+        overflow: hidden;
+      }
+
+      & .gCbFta_label, & .gCbFta_groupLabel {
+        white-space: nowrap;
+        clip-path: inset(50%);
+        border: 0;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+        position: absolute;
+        overflow: hidden;
+      }
+
+      & .gCbFta_menuSub {
+        display: none;
+      }
+
+      & .gCbFta_menuButton {
+        width: var(--sidebar-collapsed-item-size, var(--size-md));
+        min-height: var(--sidebar-collapsed-item-size, var(--size-md));
+        box-shadow: none;
+        background-color: #0000;
+        border-color: #0000;
+        justify-content: center;
+        margin-inline: auto;
+        padding-inline: 0;
+
+        & > :not(svg):not([data-sidebar-icon]):not([data-slot="sidebar-label"]) {
+          display: none;
+        }
+
+        & > svg, & > [data-sidebar-icon] {
+          margin-inline: auto;
+        }
+
+        @media (hover: hover) {
+          &:hover {
+            background-color: #0000;
+          }
+        }
+      }
+    }
+  }
+
+  .gCbFta_inset {
+    background-color: var(--sidebar-inset-bg, var(--color-background));
+    min-width: 0;
+    color: var(--sidebar-inset-color, var(--color-foreground));
+    position: relative;
+    overflow: auto;
+  }
+
+  .gCbFta_resizeTrigger {
+    z-index: 2;
+  }
+
+  .gCbFta_trigger {
+    box-sizing: border-box;
+    width: var(--sidebar-trigger-size, 1.75rem);
+    min-width: var(--sidebar-trigger-size, 1.75rem);
+    height: var(--sidebar-trigger-size, 1.75rem);
+    border-radius: var(--sidebar-trigger-radius, var(--radius-full));
+    color: var(--sidebar-muted-color, var(--color-muted-foreground));
+    appearance: none;
+    cursor: pointer;
+    transition: background-color var(--sidebar-transition, var(--transition-default)),
+      color var(--sidebar-transition, var(--transition-default)),
+      box-shadow var(--sidebar-transition, var(--transition-default));
+    background-color: #0000;
+    border: 0;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    display: inline-flex;
+
+    & > svg {
+      width: var(--sidebar-icon-size, 1rem);
+      height: var(--sidebar-icon-size, 1rem);
+    }
+
+    &:focus-visible {
+      outline: var(--sidebar-focus-ring-width, var(--border-width-md)) solid
+        var(--sidebar-focus-ring-color, var(--color-ring));
+      outline-offset: var(--sidebar-focus-ring-offset, var(--spacing-1));
+    }
+
+    &:disabled, &[aria-disabled="true"] {
+      opacity: var(--sidebar-disabled-opacity, var(--opacity-disabled));
+      pointer-events: none;
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--sidebar-accent-bg, var(--color-accent));
+        color: var(--sidebar-accent-color, var(--color-accent-foreground));
+      }
+    }
+  }
+
+  .gCbFta_trigger {
+    z-index: 4;
+    margin-block-start: var(--sidebar-trigger-offset-y, var(--spacing-4));
+    margin-inline: calc(var(--sidebar-trigger-size, 1.75rem) * -.5);
+    border: var(--sidebar-trigger-border-width, var(--border-width-sm)) solid
+      var(--sidebar-trigger-border-color, var(--color-border));
+    border-radius: var(--sidebar-trigger-radius, var(--radius-full));
+    background-color: var(--sidebar-trigger-bg, var(--color-background));
+    box-shadow: var(--sidebar-trigger-shadow, var(--shadow-sm));
+    align-self: flex-start;
+    position: relative;
+
+    &[data-side="left"][data-state="collapsed"] > svg, &[data-side="right"][data-state="expanded"] > svg {
+      transform: rotate(180deg);
+    }
+
+    & > svg {
+      transition: transform var(--sidebar-transition, var(--transition-default));
+    }
+  }
+
+  .gCbFta_label {
+    min-width: 0;
+  }
+
+  .gCbFta_header, .gCbFta_footer {
+    align-items: center;
+    gap: var(--sidebar-gap, var(--spacing-2));
+    padding: var(--sidebar-header-footer-padding, var(--spacing-3));
+    flex: none;
+    display: flex;
+  }
+
+  .gCbFta_header {
+    border-block-end: var(--sidebar-section-border-width, 0) solid
+      var(--sidebar-border-color, var(--color-border));
+  }
+
+  .gCbFta_footer {
+    border-block-start: var(--sidebar-section-border-width, 0) solid
+      var(--sidebar-border-color, var(--color-border));
+  }
+
+  .gCbFta_content {
+    overscroll-behavior: contain;
+    scrollbar-gutter: stable;
+    flex-direction: column;
+    flex: auto;
+    min-height: 0;
+    display: flex;
+    overflow: auto;
+  }
+
+  .gCbFta_group {
+    gap: var(--sidebar-group-gap, var(--spacing-1));
+    padding: var(--sidebar-group-padding, var(--spacing-3));
+    flex-direction: column;
+    display: flex;
+    position: relative;
+  }
+
+  .gCbFta_groupLabel {
+    min-width: 0;
+    padding-inline: var(--sidebar-group-label-padding-x, var(--spacing-2));
+    color: var(--sidebar-muted-color, var(--color-muted-foreground));
+    font-size: var(--sidebar-group-label-font-size, var(--text-xs));
+    font-weight: var(--sidebar-group-label-font-weight, var(--weight-medium));
+    line-height: var(--sidebar-group-label-line-height, var(--line-height-text-xs));
+    text-transform: var(--sidebar-group-label-text-transform, none);
+    margin: 0;
+  }
+
+  .gCbFta_menu, .gCbFta_menuSub {
+    gap: var(--sidebar-menu-gap, var(--spacing-1));
+    flex-direction: column;
+    width: 100%;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+  }
+
+  .gCbFta_menuItem, .gCbFta_menuSubItem {
+    min-width: 0;
+    position: relative;
+  }
+
+  .gCbFta_menuButton, .gCbFta_menuSubButton {
+    box-sizing: border-box;
+    border: var(--sidebar-menu-button-border-width, 0) solid transparent;
+    border-radius: var(--sidebar-menu-button-radius, var(--radius-md));
+    width: 100%;
+    min-width: 0;
+    color: var(--sidebar-color, var(--color-card-foreground));
+    appearance: none;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+    transition: background-color var(--sidebar-transition, var(--transition-default)),
+      border-color var(--sidebar-transition, var(--transition-default)),
+      color var(--sidebar-transition, var(--transition-default)),
+      box-shadow var(--sidebar-transition, var(--transition-default));
+    background-color: #0000;
+    align-items: center;
+    text-decoration: none;
+    display: flex;
+
+    & > svg {
+      width: var(--sidebar-icon-size, 1rem);
+      height: var(--sidebar-icon-size, 1rem);
+      flex: none;
+    }
+
+    & > [data-sidebar-icon] {
+      flex: none;
+    }
+
+    & > span:last-child {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
+      overflow: hidden;
+    }
+
+    &:focus-visible {
+      outline: var(--sidebar-focus-ring-width, var(--border-width-md)) solid
+        var(--sidebar-focus-ring-color, var(--color-ring));
+      outline-offset: var(--sidebar-focus-ring-offset, var(--spacing-1));
+    }
+
+    &:disabled, &[aria-disabled="true"] {
+      opacity: var(--sidebar-disabled-opacity, var(--opacity-disabled));
+      pointer-events: none;
+    }
+
+    &[data-active] {
+      background-color: var(--sidebar-accent-bg, var(--color-accent));
+      color: var(--sidebar-accent-color, var(--color-accent-foreground));
+      font-weight: var(--sidebar-active-font-weight, var(--weight-medium));
+    }
+
+    @media (hover: hover) {
+      &:hover:not(:disabled, [aria-disabled="true"]) {
+        background-color: var(--sidebar-accent-bg, var(--color-accent));
+        color: var(--sidebar-accent-color, var(--color-accent-foreground));
+      }
+    }
+  }
+
+  .gCbFta_menuButton {
+    gap: var(--sidebar-menu-button-gap, var(--spacing-2));
+    min-height: var(--sidebar-menu-button-height, var(--size-md));
+    padding-block: var(--sidebar-menu-button-padding-y, var(--spacing-1));
+    padding-inline: var(--sidebar-menu-button-padding-x, var(--spacing-2));
+    font-size: var(--sidebar-menu-button-font-size, var(--text-sm));
+    line-height: var(--sidebar-menu-button-line-height, var(--line-height-text-sm));
+
+    &[data-size="sm"] {
+      min-height: var(--sidebar-menu-button-height-sm, var(--size-sm));
+      font-size: var(--sidebar-menu-button-font-size-sm, var(--text-xs));
+    }
+
+    &[data-size="lg"] {
+      min-height: var(--sidebar-menu-button-height-lg, var(--size-lg));
+    }
+
+    & > [data-slot="collapsible-indicator"] {
+      margin-inline-start: auto;
+    }
+  }
+
+  .gCbFta_panel .gCbFta_menuButton {
+    justify-content: flex-start;
+  }
+
+  .gCbFta_menuSub {
+    border-inline-start: var(--sidebar-menu-sub-border-width, var(--border-width-sm)) solid
+      var(--sidebar-border-color, var(--color-border));
+    margin-block-start: var(--sidebar-menu-sub-margin-y, var(--spacing-1));
+    margin-inline-start: var(--sidebar-menu-sub-margin-x, var(--spacing-4));
+    padding-inline-start: var(--sidebar-menu-sub-padding-x, var(--spacing-2));
+  }
+
+  .gCbFta_menuSubButton {
+    gap: var(--sidebar-menu-sub-button-gap, var(--spacing-2));
+    min-height: var(--sidebar-menu-sub-button-height, var(--size-sm));
+    padding-inline: var(--sidebar-menu-sub-button-padding-x, var(--spacing-2));
+    font-size: var(--sidebar-menu-sub-button-font-size, var(--text-sm));
+    line-height: var(--sidebar-menu-sub-button-line-height, var(--line-height-text-sm));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .gCbFta_panel, .gCbFta_trigger, .gCbFta_menuButton, .gCbFta_menuSubButton {
+      transition: none;
+    }
+  }
+}

package/dist/components/sidebar/Sidebar.d.ts

@@ -0,0 +1,48 @@
+import { Splitter } from "../splitter/Splitter.js";
+import { ComponentProps } from "react";
+
+//#region src/components/sidebar/Sidebar.d.ts
+type SidebarSide = 'left' | 'right';
+type SidebarRootProps = Omit<ComponentProps<typeof Splitter.Root>, 'orientation' | 'panels'> & {
+  panelId?: string;
+  panels?: ComponentProps<typeof Splitter.Root>['panels'];
+  side?: SidebarSide;
+};
+type SidebarPanelProps = Omit<ComponentProps<typeof Splitter.Panel>, 'id'> & {
+  id?: ComponentProps<typeof Splitter.Panel>['id'];
+};
+type SidebarResizeTriggerProps = Omit<ComponentProps<typeof Splitter.ResizeTrigger>, 'id'> & {
+  id?: ComponentProps<typeof Splitter.ResizeTrigger>['id'];
+};
+declare function useSidebar(): {
+  collapsed: boolean;
+  side: SidebarSide;
+  state: string;
+  toggleSidebar: () => void;
+};
+declare const Sidebar: import("react").ForwardRefExoticComponent<Omit<SidebarRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<SidebarRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Panel: import("react").ForwardRefExoticComponent<Omit<SidebarPanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Inset: import("react").ForwardRefExoticComponent<Omit<SidebarPanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ResizeTrigger: import("react").ForwardRefExoticComponent<Omit<SidebarResizeTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Trigger: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLButtonElement>>;
+  Label: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+  Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
+  Content: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+  Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
+  Group: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
+  GroupLabel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLHeadingElement>>;
+  Menu: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLUListElement>>;
+  MenuItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLLIElement>>;
+  MenuButton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    active?: boolean;
+    size?: "sm" | "md" | "lg";
+  } & import("react").RefAttributes<HTMLButtonElement>>;
+  MenuSub: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLUListElement>>;
+  MenuSubItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLLIElement>>;
+  MenuSubButton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    active?: boolean;
+  } & import("react").RefAttributes<HTMLAnchorElement>>;
+};
+//#endregion
+export { Sidebar, useSidebar };