@rimelight/ui 0.0.5 → 0.0.7

package/src/components/sidebar/SidebarMenuItem.astro

@@ -1,22 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-export interface SidebarMenuItemProps extends HTMLAttributes<"li"> {}
-type Props = SidebarMenuItemProps;
-
-export const sidebarMenuItem = cv({
-  base: "group/menu-item relative",
-});
-
-const { class: className, ...rest } = Astro.props;
----
-
-<li
-  class:list={[sidebarMenuItem(), className]}
-  data-sidebar="menu-item"
-  {...rest}
-  data-slot="sidebar-menu-item"
->
-  <slot />
-</li>

package/src/components/sidebar/SidebarMenuSkeleton.astro

@@ -1,43 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-import Skeleton from "../skeleton/Skeleton.astro";
-
-const sidebarMenuSkeleton = cv({
-  base: "flex h-8 items-center gap-md rounded-md px-2",
-});
-
-export interface SidebarMenuSkeletonProps extends HTMLAttributes<"div"> {
-  /**
-   * Whether to show the icon skeleton
-   * @default false
-   */
-  showIcon?: boolean;
-  /**
-   * Width of the text skeleton (random 50-90% if not specified)
-   */
-  width?: string;
-}
-
-type Props = SidebarMenuSkeletonProps;
-
-const { showIcon = false, width, class: className, ...rest } = Astro.props;
-
-const skeletonWidth = width || `${Math.floor(Math.random() * 40) + 50}%`;
----
-
-<div
-  class:list={[sidebarMenuSkeleton(), className]}
-  data-sidebar="menu-skeleton"
-  {...rest}
-  data-slot="sidebar-menu-skeleton"
->
-  {showIcon && <Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
-  <Skeleton
-    class="h-4 max-w-(--skeleton-width) flex-1"
-    style={`--skeleton-width: ${skeletonWidth}`}
-    data-sidebar="menu-skeleton-text"
-  />
-</div>
-

package/src/components/sidebar/SidebarMenuSub.astro

@@ -1,25 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-export interface SidebarMenuSubProps extends HTMLAttributes<"ul"> {}
-type Props = SidebarMenuSubProps;
-
-export const sidebarMenuSub = cv({
-  base: [
-    "border-sidebar-border mx-4.5 flex min-w-0 translate-x-px flex-col gap-5xs b-l px-2.5 py-6xs",
-    "group-data-[collapsible=icon]:hidden",
-  ],
-});
-
-const { class: className, ...rest } = Astro.props;
----
-
-<ul
-  class:list={[sidebarMenuSub(), className]}
-  data-sidebar="menu-sub"
-  {...rest}
-  data-slot="sidebar-menu-sub"
->
-  <slot />
-</ul>

package/src/components/sidebar/SidebarMenuSubButton.astro

@@ -1,52 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-type VariantProps<T extends (...args: any) => any> = NonNullable<Parameters<T>[0]>;
-
-export interface SidebarMenuSubButtonProps extends HTMLAttributes<"a">, VariantProps<typeof sidebarMenuSubButton> {
-  /**
-   * Whether the menu sub item is currently active
-   */
-  isActive?: boolean;
-}
-
-type Props = SidebarMenuSubButtonProps;
-
-export const sidebarMenuSubButton = cv({
-  base: [
-    "text-sidebar-foreground ring-sidebar-outline",
-    "flex h-3xs min-w-0 -translate-x-px items-center gap-md overflow-hidden rounded-md px-2.5",
-    "outline-hidden",
-    "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-    "focus-visible:ring-2",
-    "active:bg-sidebar-accent active:text-sidebar-accent-foreground",
-    "disabled:pointer-events-none disabled:op-50",
-    "aria-disabled:pointer-events-none aria-disabled:op-50",
-    "[&>svg]:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-    "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-  ],
-  variants: {
-    size: {
-      sm: "text-sm",
-      md: "text-base",
-    },
-  },
-  defaultVariants: {
-    size: "md",
-  },
-});
-
-const { size, isActive = false, class: className, ...rest } = Astro.props;
----
-
-<a
-  class:list={[sidebarMenuSubButton({ size }), className]}
-  data-sidebar="menu-sub-button"
-  data-size={size || "md"}
-  data-active={isActive}
-  {...rest}
-  data-slot="sidebar-menu-sub-button"
->
-  <slot />
-</a>

package/src/components/sidebar/SidebarMenuSubItem.astro

@@ -1,17 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-
-export interface SidebarMenuSubItemProps extends HTMLAttributes<"li"> {}
-type Props = SidebarMenuSubItemProps;
-
-const { class: className, ...rest } = Astro.props;
----
-
-<li
-  class:list={["group/menu-sub-item relative", className]}
-  data-sidebar="menu-sub-item"
-  {...rest}
-  data-slot="sidebar-menu-sub-item"
->
-  <slot />
-</li>

package/src/components/sidebar/SidebarProvider.astro

@@ -1,215 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-export interface SidebarProviderProps extends HTMLAttributes<"div"> {
-  /**
-   * Default open state of the sidebar
-   * @default true
-   */
-  defaultOpen?: boolean;
-  /**
-   * Keyboard shortcut to toggle the sidebar
-   * @default "b"
-   */
-  keyboardShortcut?: string;
-}
-
-type Props = SidebarProviderProps;
-
-export const sidebarProvider = cv({
-  base: [
-    "starwind-sidebar-provider",
-    "group/sidebar-wrapper flex min-h-svh w-full",
-    "has-data-[variant=inset]:bg-sidebar",
-  ],
-});
-
-const {
-  defaultOpen = true,
-  keyboardShortcut = "b",
-  class: className,
-  style,
-  ...rest
-} = Astro.props;
-
-const SIDEBAR_WIDTH = "18rem";
-const SIDEBAR_WIDTH_ICON = "3.5rem";
-
-// Parse style prop to extract CSS variable overrides
-const styleObj = typeof style === "string" ? {} : ((style as Record<string, string>) ?? {});
-const mergedStyle = {
-  "--sidebar-width": styleObj["--sidebar-width"] ?? SIDEBAR_WIDTH,
-  "--sidebar-width-icon": styleObj["--sidebar-width-icon"] ?? SIDEBAR_WIDTH_ICON,
-  ...styleObj,
-};
----
-
-<div
-  class:list={[sidebarProvider(), className]}
-  data-state={defaultOpen ? "expanded" : "collapsed"}
-  data-mobile-open="false"
-  data-keyboard-shortcut={keyboardShortcut}
-  style={mergedStyle}
-  {...rest}
-  data-slot="sidebar-provider"
->
-  <slot />
-</div>
-
-<script>
-  class SidebarController {
-    private provider: HTMLElement;
-    private boundKeyHandler: (e: KeyboardEvent) => void;
-    private boundResizeHandler: () => void;
-    private wasMobile: boolean = false;
-
-    constructor(provider: HTMLElement) {
-      this.provider = provider;
-      this.boundKeyHandler = this.handleKeydown.bind(this);
-      this.boundResizeHandler = this.handleResize.bind(this);
-      this.wasMobile = this.isMobile();
-      this.setupKeyboardShortcut();
-      this.setupCustomEvents();
-      this.setupResizeListener();
-    }
-
-    private handleKeydown(e: KeyboardEvent) {
-      // Skip if focus is in an editable element
-      const target = e.target as HTMLElement | null;
-      if (target) {
-        const tagName = target.tagName.toLowerCase();
-        if (
-          tagName === "input" ||
-          tagName === "textarea" ||
-          tagName === "select" ||
-          target.isContentEditable ||
-          target.closest("[contenteditable='true']")
-        ) {
-          return;
-        }
-      }
-
-      const shortcut = this.provider.getAttribute("data-keyboard-shortcut") || "b";
-      if (e.key === shortcut && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault();
-        this.toggle();
-      }
-    }
-
-    private setupKeyboardShortcut() {
-      document.removeEventListener("keydown", this.boundKeyHandler);
-      document.addEventListener("keydown", this.boundKeyHandler);
-    }
-
-    private setupCustomEvents() {
-      this.provider.addEventListener("sidebar:toggle", () => this.toggle());
-      this.provider.addEventListener("sidebar:open", () => this.setOpen(true));
-      this.provider.addEventListener("sidebar:close", () => this.setOpen(false));
-      this.provider.addEventListener("sidebar:toggle-mobile", () => this.toggleMobile());
-      this.provider.addEventListener("sidebar:open-mobile", () => this.setMobileOpen(true));
-      this.provider.addEventListener("sidebar:close-mobile", () => this.setMobileOpen(false));
-    }
-
-    private handleResize() {
-      const isMobileNow = this.isMobile();
-      // Close mobile sheet when transitioning from mobile to desktop
-      if (this.wasMobile && !isMobileNow) {
-        this.setMobileOpen(false);
-      }
-      this.wasMobile = isMobileNow;
-    }
-
-    private setupResizeListener() {
-      window.removeEventListener("resize", this.boundResizeHandler);
-      window.addEventListener("resize", this.boundResizeHandler);
-    }
-
-    isMobile(): boolean {
-      // Check if desktop sidebar is hidden (has display: none from hidden class)
-      const desktopSidebar = this.provider.querySelector<HTMLElement>('[data-slot="sidebar"]');
-      if (!desktopSidebar) return false;
-      return getComputedStyle(desktopSidebar).display === "none";
-    }
-
-    getState(): "expanded" | "collapsed" {
-      return this.provider.getAttribute("data-state") as "expanded" | "collapsed";
-    }
-
-    isOpen(): boolean {
-      return this.getState() === "expanded";
-    }
-
-    isMobileOpen(): boolean {
-      return this.provider.getAttribute("data-mobile-open") === "true";
-    }
-
-    toggle() {
-      if (this.isMobile()) {
-        this.toggleMobile();
-      } else {
-        this.setOpen(!this.isOpen());
-      }
-    }
-
-    setOpen(open: boolean) {
-      const state = open ? "expanded" : "collapsed";
-      this.provider.setAttribute("data-state", state);
-      this.provider.dispatchEvent(new CustomEvent("sidebar:change", { detail: { open, state } }));
-    }
-
-    toggleMobile() {
-      // Check the actual dialog state instead of our tracked state
-      const mobileSheet = this.provider.querySelector<HTMLElement>(".starwind-sheet");
-      const dialogContent = mobileSheet?.querySelector<HTMLElement>(".starwind-dialog-content");
-      const isCurrentlyOpen = dialogContent?.dataset.state === "open";
-
-      this.setMobileOpen(!isCurrentlyOpen);
-    }
-
-    setMobileOpen(open: boolean) {
-      this.provider.setAttribute("data-mobile-open", String(open));
-
-      // Find the mobile sidebar Sheet and use Dialog's programmatic API
-      const mobileSheet = this.provider.querySelector<HTMLElement>(".starwind-sheet");
-      if (mobileSheet) {
-        const eventName = open ? "dialog:open" : "dialog:close";
-        mobileSheet.dispatchEvent(new CustomEvent(eventName));
-      }
-
-      this.provider.dispatchEvent(new CustomEvent("sidebar:mobile-change", { detail: { open } }));
-    }
-
-    destroy() {
-      document.removeEventListener("keydown", this.boundKeyHandler);
-      window.removeEventListener("resize", this.boundResizeHandler);
-    }
-  }
-
-  const sidebarInstances = new WeakMap<HTMLElement, SidebarController>();
-  const trackedProviders = new Set<HTMLElement>();
-
-  const cleanupSidebars = () => {
-    // Destroy controllers for providers no longer in DOM
-    for (const provider of trackedProviders) {
-      if (!document.contains(provider)) {
-        sidebarInstances.get(provider)?.destroy();
-        trackedProviders.delete(provider);
-      }
-    }
-  };
-
-  const setupSidebars = () => {
-    document.querySelectorAll<HTMLElement>(".starwind-sidebar-provider").forEach((provider) => {
-      if (!sidebarInstances.has(provider)) {
-        sidebarInstances.set(provider, new SidebarController(provider));
-        trackedProviders.add(provider);
-      }
-    });
-  };
-
-  setupSidebars();
-  document.addEventListener("astro:before-swap", cleanupSidebars);
-  document.addEventListener("astro:after-swap", setupSidebars);
-  document.addEventListener("starwind:init", setupSidebars);
-</script>

package/src/components/sidebar/SidebarRail.astro

@@ -1,72 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-export interface SidebarRailProps extends HTMLAttributes<"button"> {}
-type Props = SidebarRailProps;
-
-export const sidebarRail = cv({
-  base: [
-    "starwind-sidebar-rail",
-    "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear sm:flex",
-    "group-data-[side=left]:-right-4 group-data-[side=right]:left-0",
-    "after:absolute after:inset-y-0 after:left-1/2 after:w-6xs",
-    "hover:after:bg-sidebar-border",
-    "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
-    "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize",
-    "[[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-    "hover:group-data-[collapsible=offcanvas]:bg-sidebar",
-    "group-data-[collapsible=offcanvas]:translate-x-0",
-    "group-data-[collapsible=offcanvas]:after:left-full",
-    "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-    "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-  ],
-});
-
-const { class: className, ...rest } = Astro.props;
----
-
-<button
-  type="button"
-  class:list={[sidebarRail(), className]}
-  data-sidebar="rail"
-  aria-label="Toggle Sidebar"
-  tabindex="-1"
-  {...rest}
-  data-slot="sidebar-rail"></button>
-
-<script>
-  class SidebarRailHandler {
-    private rail: HTMLElement;
-    private provider: HTMLElement | null;
-
-    constructor(rail: HTMLElement) {
-      this.rail = rail;
-      this.provider = rail.closest<HTMLElement>('[data-slot="sidebar-provider"]');
-      this.init();
-    }
-
-    private init() {
-      this.rail.addEventListener("click", this.handleClick.bind(this));
-    }
-
-    private handleClick() {
-      if (this.provider) {
-        this.provider.dispatchEvent(new CustomEvent("sidebar:toggle"));
-      }
-    }
-  }
-
-  const railInstances = new WeakMap<HTMLElement, SidebarRailHandler>();
-
-  const setupSidebarRails = () => {
-    document.querySelectorAll<HTMLElement>(".starwind-sidebar-rail").forEach((rail) => {
-      if (railInstances.has(rail)) return;
-      railInstances.set(rail, new SidebarRailHandler(rail));
-    });
-  };
-
-  setupSidebarRails();
-  document.addEventListener("astro:after-swap", setupSidebarRails);
-  document.addEventListener("starwind:init", setupSidebarRails);
-</script>

package/src/components/sidebar/SidebarSeparator.astro

@@ -1,25 +0,0 @@
----
-import type { ComponentProps } from "astro/types";
-import { cv } from "css-variants";
-
-// eslint-disable-next-line typescript/consistent-type-imports
-import Separator from "../separator/Separator.astro";
-
-const sidebarSeparator = cv({
-  base: "bg-sidebar-border mx-5xs w-auto",
-});
-
-export interface SidebarSeparatorProps extends ComponentProps<typeof Separator> {}
-type Props = SidebarSeparatorProps;
-
-const { orientation = "horizontal", class: className, ...rest } = Astro.props;
----
-
-<Separator
-  orientation={orientation}
-  class:list={[sidebarSeparator(), className]}
-  data-sidebar="separator"
-  {...rest}
-  data-slot="sidebar-separator"
-/>
-

package/src/components/sidebar/SidebarTrigger.astro

@@ -1,69 +0,0 @@
----
-import type { ComponentProps } from "astro/types";
-import { cv } from "css-variants";
-import IconPanelLeft from "~icons/lucide/panel-left";
-
-const sidebarTrigger = cv({
-  base: "starwind-sidebar-trigger",
-});
-
-// eslint-disable-next-line typescript/consistent-type-imports
-import Button from "../button/Button.astro";
-
-export interface SidebarTriggerProps extends ComponentProps<typeof Button> {}
-type Props = SidebarTriggerProps;
-
-const { class: className, size = "icon-sm", variant = "ghost", ...rest } = Astro.props;
----
-
-<Button
-  variant={variant}
-  size={size}
-  class:list={[sidebarTrigger(), className]}
-  data-sidebar="trigger"
-  aria-label="Toggle Sidebar"
-  {...rest}
-  data-slot="sidebar-trigger"
->
-  <slot name="icon">
-    <IconPanelLeft />
-  </slot>
-  <span class="sr-only">Toggle Sidebar</span>
-</Button>
-
-<script>
-  class SidebarTriggerHandler {
-    private trigger: HTMLElement;
-    private provider: HTMLElement | null;
-
-    constructor(trigger: HTMLElement) {
-      this.trigger = trigger;
-      this.provider = trigger.closest<HTMLElement>('[data-slot="sidebar-provider"]');
-      this.init();
-    }
-
-    private init() {
-      this.trigger.addEventListener("click", this.handleClick.bind(this));
-    }
-
-    private handleClick() {
-      if (this.provider) {
-        this.provider.dispatchEvent(new CustomEvent("sidebar:toggle"));
-      }
-    }
-  }
-
-  const triggerInstances = new WeakMap<HTMLElement, SidebarTriggerHandler>();
-
-  const setupSidebarTriggers = () => {
-    document.querySelectorAll<HTMLElement>(".starwind-sidebar-trigger").forEach((trigger) => {
-      if (triggerInstances.has(trigger)) return;
-      triggerInstances.set(trigger, new SidebarTriggerHandler(trigger));
-    });
-  };
-
-  setupSidebarTriggers();
-  document.addEventListener("astro:after-swap", setupSidebarTriggers);
-  document.addEventListener("starwind:init", setupSidebarTriggers);
-</script>
-

package/src/components/skeleton/Skeleton.astro

@@ -1,14 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-type Props = HTMLAttributes<"div">;
-
-const { class: className, ...rest } = Astro.props;
-
-export const skeleton = cv({
-  base: "bg-muted animate-pulse rounded-md",
-});
----
-
-<div class:list={[skeleton(), className]} {...rest} data-slot="skeleton"></div>