@rimelight/ui 0.0.4 → 0.0.6

package/src/components/sidebar/Sidebar.astro

@@ -1,231 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-import Sheet from "../sheet/Sheet.astro";
-import SheetContent from "../sheet/SheetContent.astro";
-import SheetDescription from "../sheet/SheetDescription.astro";
-import SheetHeader from "../sheet/SheetHeader.astro";
-import SheetTitle from "../sheet/SheetTitle.astro";
-
-export interface SidebarProps extends HTMLAttributes<"div"> {
-  /**
-   * The side of the viewport the sidebar appears on
-   * @default "left"
-   */
-  side?: "left" | "right";
-  /**
-   * The visual variant of the sidebar
-   * @default "sidebar"
-   */
-  variant?: "sidebar" | "floating" | "inset";
-  /**
-   * How the sidebar collapses
-   * @default "offcanvas"
-   */
-  collapsible?: "offcanvas" | "icon" | "none";
-}
-
-type Props = SidebarProps;
-
-export const sidebar = cv({
-  base: "starwind-sidebar group peer text-sidebar-foreground hidden md:block",
-});
-
-export const sidebarGap = cv({
-  base: [
-    "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
-    "group-data-[collapsible=offcanvas]:w-0",
-    "group-data-[side=right]:rotate-180",
-  ],
-  variants: {
-    variant: {
-      sidebar: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
-      floating: "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem)]",
-      inset: "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem)]",
-    },
-  },
-  defaultVariants: {
-    variant: "sidebar",
-  },
-});
-
-export const sidebarContainer = cv({
-  base: [
-    "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
-  ],
-  variants: {
-    side: {
-      left: "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]",
-      right: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-    },
-    variant: {
-      sidebar: [
-        "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
-        "group-data-[side=left]:border-r group-data-[side=right]:border-l",
-      ],
-      floating: "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem+2px)]",
-      inset: "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem+2px)]",
-    },
-  },
-  defaultVariants: {
-    side: "left",
-    variant: "sidebar",
-  },
-});
-
-export const sidebarInner = cv({
-  base: "bg-sidebar flex h-full w-full flex-col",
-  variants: {
-    variant: {
-      sidebar: "",
-      floating: "border-sidebar-border rounded-lg b shadow-sm",
-      inset: "border-sidebar-border rounded-lg b shadow-sm",
-    },
-  },
-  defaultVariants: {
-    variant: "sidebar",
-  },
-});
-
-export const sidebarMobileContent = cv({
-  base: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
-});
-
-const {
-  side = "left",
-  variant = "sidebar",
-  collapsible = "offcanvas",
-  class: className,
-  ...rest
-} = Astro.props;
-
-const SIDEBAR_WIDTH_MOBILE = "18rem";
----
-
-{/* Non-collapsible sidebar */}
-{
-  collapsible === "none" ? (
-    <div
-      class:list={[
-        "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
-        className,
-      ]}
-      {...rest}
-      data-slot="sidebar"
-    >
-      <slot />
-    </div>
-  ) : (
-    <>
-      {/* Desktop sidebar */}
-      <div
-        class:list={[sidebar(), className]}
-        data-state="expanded"
-        data-collapsible=""
-        data-collapsible-mode={collapsible}
-        data-variant={variant}
-        data-side={side}
-        data-slot="sidebar"
-      >
-        {/* Gap placeholder for layout */}
-        <div data-slot="sidebar-gap" class={sidebarGap({ variant })} />
-
-        {/* Fixed sidebar container */}
-        <div class={sidebarContainer({ side, variant })} {...rest} data-slot="sidebar-container">
-          <div data-slot="sidebar-inner" class={sidebarInner({ variant })}>
-            <slot />
-          </div>
-        </div>
-      </div>
-
-      {/* Mobile sidebar (Sheet) */}
-      <Sheet class="md:hidden" data-slot="sidebar-mobile">
-        <SheetContent
-          side={side}
-          class={sidebarMobileContent()}
-          style={{ "--sidebar-width": SIDEBAR_WIDTH_MOBILE }}
-        >
-          <SheetHeader class="sr-only">
-            <SheetTitle>Sidebar</SheetTitle>
-            <SheetDescription>Mobile navigation sidebar</SheetDescription>
-          </SheetHeader>
-          <div class="flex h-full w-full flex-col">
-            <slot />
-          </div>
-        </SheetContent>
-      </Sheet>
-    </>
-  )
-}
-
-<script>
-  class SidebarHandler {
-    private sidebar: HTMLElement;
-    private provider: HTMLElement;
-    private collapsibleMode: string;
-    private boundUpdateState: () => void;
-
-    constructor(sidebar: HTMLElement) {
-      this.sidebar = sidebar;
-      this.provider = sidebar.closest<HTMLElement>('[data-slot="sidebar-provider"]')!;
-      this.collapsibleMode =
-        sidebar.dataset.collapsibleMode ||
-        (sidebar.closest("[data-collapsible]") as HTMLElement)?.dataset.collapsible ||
-        "offcanvas";
-      sidebar.dataset.collapsibleMode = this.collapsibleMode;
-
-      this.boundUpdateState = this.updateState.bind(this);
-      this.init();
-    }
-
-    private init() {
-      this.updateState();
-      this.provider.addEventListener("sidebar:change", this.boundUpdateState);
-      this.provider.addEventListener("sidebar:mobile-change", this.boundUpdateState);
-    }
-
-    private updateState() {
-      const state = this.provider.getAttribute("data-state") || "expanded";
-      this.sidebar.setAttribute("data-state", state);
-
-      if (state === "collapsed") {
-        this.sidebar.setAttribute("data-collapsible", this.collapsibleMode);
-      } else {
-        this.sidebar.setAttribute("data-collapsible", "");
-      }
-
-      this.syncSidebarMenuTooltips();
-    }
-
-    private syncSidebarMenuTooltips() {
-      const hasEnabledSidebar = Array.from(
-        document.querySelectorAll<HTMLElement>(
-          '[data-slot="sidebar"][data-collapsible-mode="icon"][data-state="collapsed"]',
-        ),
-      ).some((sidebar) => getComputedStyle(sidebar).display !== "none");
-
-      if (hasEnabledSidebar) {
-        document.documentElement.setAttribute("data-starwind-sidebar-tooltips", "enabled");
-      } else {
-        document.documentElement.removeAttribute("data-starwind-sidebar-tooltips");
-      }
-    }
-  }
-
-  const sidebarInstances = new WeakMap<HTMLElement, SidebarHandler>();
-
-  const setupSidebars = () => {
-    document.querySelectorAll<HTMLElement>('[data-slot="sidebar"]').forEach((sidebar) => {
-      if (sidebarInstances.has(sidebar)) return;
-      const provider = sidebar.closest<HTMLElement>('[data-slot="sidebar-provider"]');
-      if (!provider) return;
-      sidebarInstances.set(sidebar, new SidebarHandler(sidebar));
-    });
-  };
-
-  setupSidebars();
-  document.addEventListener("astro:after-swap", setupSidebars);
-  document.addEventListener("starwind:init", setupSidebars);
-</script>
-

package/src/components/sidebar/SidebarContent.astro

@@ -1,25 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-export interface SidebarContentProps extends HTMLAttributes<"div"> {}
-type Props = SidebarContentProps;
-
-export const sidebarContent = cv({
-  base: [
-    "flex min-h-0 flex-1 flex-col gap-5xs overflow-auto",
-    "group-data-[collapsible=icon]:overflow-hidden",
-  ],
-});
-
-const { class: className, ...rest } = Astro.props;
----
-
-<div
-  class:list={[sidebarContent(), className]}
-  data-sidebar="content"
-  {...rest}
-  data-slot="sidebar-content"
->
-  <slot />
-</div>

package/src/components/sidebar/SidebarFooter.astro

@@ -1,22 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-export interface SidebarFooterProps extends HTMLAttributes<"div"> {}
-type Props = SidebarFooterProps;
-
-export const sidebarFooter = cv({
-  base: "flex flex-col gap-5xs p-5xs",
-});
-
-const { class: className, ...rest } = Astro.props;
----
-
-<div
-  class:list={[sidebarFooter(), className]}
-  data-sidebar="footer"
-  {...rest}
-  data-slot="sidebar-footer"
->
-  <slot />
-</div>

package/src/components/sidebar/SidebarGroup.astro

@@ -1,22 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-export interface SidebarGroupProps extends HTMLAttributes<"div"> {}
-type Props = SidebarGroupProps;
-
-export const sidebarGroup = cv({
-  base: "relative flex w-full min-w-0 flex-col p-5xs",
-});
-
-const { class: className, ...rest } = Astro.props;
----
-
-<div
-  class:list={[sidebarGroup(), className]}
-  data-sidebar="group"
-  {...rest}
-  data-slot="sidebar-group"
->
-  <slot />
-</div>

package/src/components/sidebar/SidebarGroupContent.astro

@@ -1,22 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-export interface SidebarGroupContentProps extends HTMLAttributes<"div"> {}
-type Props = SidebarGroupContentProps;
-
-export const sidebarGroupContent = cv({
-  base: "w-full text-sm",
-});
-
-const { class: className, ...rest } = Astro.props;
----
-
-<div
-  class:list={[sidebarGroupContent(), className]}
-  data-sidebar="group-content"
-  {...rest}
-  data-slot="sidebar-group-content"
->
-  <slot />
-</div>

package/src/components/sidebar/SidebarGroupLabel.astro

@@ -1,53 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-export interface SidebarGroupLabelProps extends HTMLAttributes<"div"> {
-  /**
-   * Render as a child element wrapper instead of a div
-   */
-  asChild?: boolean;
-}
-
-
-export const sidebarGroupLabel = cv({
-  base: [
-    "text-sidebar-foreground/70 ring-sidebar-outline",
-    "flex h-3xl shrink-0 items-center rounded-md px-2 text-sm font-medium",
-    "outline-hidden transition-[margin,opacity] duration-200 ease-linear",
-    "focus-visible:ring-2",
-    "[&>svg]:size-4.5 [&>svg]:shrink-0",
-    "group-data-[collapsible=icon]:-mt-10 group-data-[collapsible=icon]:op-0",
-  ],
-});
-
-const { asChild = false, class: className, ...rest } = Astro.props;
-
-let hasChildren = false;
-if (Astro.slots.has("default")) {
-  hasChildren = true;
-}
----
-
-{
-  asChild && hasChildren ? (
-    <div
-      class:list={[sidebarGroupLabel(), className]}
-      data-sidebar="group-label"
-      data-as-child
-      {...rest}
-      data-slot="sidebar-group-label"
-    >
-      <slot />
-    </div>
-  ) : (
-    <div
-      class:list={[sidebarGroupLabel(), className]}
-      data-sidebar="group-label"
-      {...rest}
-      data-slot="sidebar-group-label"
-    >
-      <slot />
-    </div>
-  )
-}

package/src/components/sidebar/SidebarHeader.astro

@@ -1,22 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-export interface SidebarHeaderProps extends HTMLAttributes<"div"> {}
-type Props = SidebarHeaderProps;
-
-export const sidebarHeader = cv({
-  base: "flex flex-col gap-5xs p-5xs",
-});
-
-const { class: className, ...rest } = Astro.props;
----
-
-<div
-  class:list={[sidebarHeader(), className]}
-  data-sidebar="header"
-  {...rest}
-  data-slot="sidebar-header"
->
-  <slot />
-</div>

package/src/components/sidebar/SidebarInput.astro

@@ -1,24 +0,0 @@
----
-import type { ComponentProps } from "astro/types";
-import { cv } from "css-variants";
-
-// eslint-disable-next-line typescript/consistent-type-imports
-import Input from "../input/Input.astro";
-
-const sidebarInput = cv({
-  base: "bg-background focus-visible:ring-sidebar-outline h-10 w-full shadow-none focus-visible:ring-2",
-});
-
-type Props = ComponentProps<typeof Input>;
-
-const { size = "md", class: className, ...rest } = Astro.props;
----
-
-<Input
-  size={size}
-  class:list={[sidebarInput(), className]}
-  data-sidebar="input"
-  {...rest}
-  data-slot="sidebar-input"
-/>
-

package/src/components/sidebar/SidebarInset.astro

@@ -1,22 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-export interface SidebarInsetProps extends HTMLAttributes<"main"> {}
-type Props = SidebarInsetProps;
-
-export const sidebarInset = cv({
-  base: [
-    "bg-background relative flex w-full flex-1 flex-col",
-    "md:peer-data-[variant=inset]:m-2xl md:peer-data-[variant=inset]:ml-0",
-    "md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm",
-    "md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2xl",
-  ],
-});
-
-const { class: className, ...rest } = Astro.props;
----
-
-<main class:list={[sidebarInset(), className]} {...rest} data-slot="sidebar-inset">
-  <slot />
-</main>

package/src/components/sidebar/SidebarMenu.astro

@@ -1,22 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-export interface SidebarMenuProps extends HTMLAttributes<"ul"> {}
-type Props = SidebarMenuProps;
-
-export const sidebarMenu = cv({
-  base: "flex w-full min-w-0 flex-col gap-5xs",
-});
-
-const { class: className, ...rest } = Astro.props;
----
-
-<ul
-  class:list={[sidebarMenu(), className]}
-  data-sidebar="menu"
-  {...rest}
-  data-slot="sidebar-menu"
->
-  <slot />
-</ul>

package/src/components/sidebar/SidebarMenuAction.astro

@@ -1,63 +0,0 @@
----
-import type { ComponentProps } from "astro/types";
-import { cv } from "css-variants";
-
-// eslint-disable-next-line typescript/consistent-type-imports
-import Button from "../button/Button.astro";
-
-export interface SidebarMenuActionProps extends ComponentProps<typeof Button> {
-  /**
-   * When true, shows the action only when the menu item is hovered
-   * @default false
-   */
-  showOnHover?: boolean;
-}
-
-type Props = SidebarMenuActionProps;
-
-export const sidebarMenuAction = cv({
-  base: [
-    "text-sidebar-foreground ring-sidebar-outline",
-    "absolute top-xs right-2xs flex aspect-square w-2xs items-center justify-center rounded-md p-0",
-    "outline-hidden transition-transform",
-    "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-    "peer-hover/menu-button:text-sidebar-accent-foreground",
-    "[&>svg]:size-4 [&>svg]:shrink-0",
-    "after:absolute after:-inset-2 md:after:hidden",
-    "peer-data-[size=sm]/menu-button:top-2xs",
-    "peer-data-[size=default]/menu-button:top-xs",
-    "peer-data-[size=lg]/menu-button:top-sm",
-    "group-data-[collapsible=icon]:hidden",
-  ],
-  variants: {
-    showOnHover: {
-      true: [
-        "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-        "group-focus-within/menu-item:op-100 group-hover/menu-item:op-100",
-        "data-[state=open]:op-100",
-        "md:op-0",
-      ],
-    },
-  },
-});
-
-const {
-  showOnHover = false,
-  variant = "ghost",
-  size = "icon-sm",
-  class: className,
-  ...rest
-} = Astro.props;
----
-
-<Button
-  variant={variant}
-  size={size}
-  class:list={[sidebarMenuAction({ showOnHover }), className]}
-  data-sidebar="menu-action"
-  {...rest}
-  data-slot="sidebar-menu-action"
->
-  <slot />
-</Button>
-

package/src/components/sidebar/SidebarMenuBadge.astro

@@ -1,31 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-export interface SidebarMenuBadgeProps extends HTMLAttributes<"div"> {}
-type Props = SidebarMenuBadgeProps;
-
-export const sidebarMenuBadge = cv({
-  base: [
-    "text-sidebar-foreground pointer-events-none absolute right-2xs flex h-2xs min-w-2xs",
-    "items-center justify-center rounded-md px-2xs text-xs font-medium tabular-nums select-none",
-    "peer-hover/menu-button:text-sidebar-accent-foreground",
-    "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-    "peer-data-[size=sm]/menu-button:top-2xs",
-    "peer-data-[size=default]/menu-button:top-xs",
-    "peer-data-[size=lg]/menu-button:top-sm",
-    "group-data-[collapsible=icon]:hidden",
-  ],
-});
-
-const { class: className, ...rest } = Astro.props;
----
-
-<div
-  class:list={[sidebarMenuBadge(), className]}
-  data-sidebar="menu-badge"
-  {...rest}
-  data-slot="sidebar-menu-badge"
->
-  <slot />
-</div>

package/src/components/sidebar/SidebarMenuButton.astro

@@ -1,124 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-type VariantProps<T extends (...args: any) => any> = NonNullable<Parameters<T>[0]>;
-
-import Tooltip from "../tooltip/Tooltip.astro";
-import TooltipContent from "../tooltip/TooltipContent.astro";
-import TooltipTrigger from "../tooltip/TooltipTrigger.astro";
-
-export interface SidebarMenuButtonProps
-  extends HTMLAttributes<"button">,
-    Omit<HTMLAttributes<"a">, "type">,
-    VariantProps<typeof sidebarMenuButton> {
-  /**
-   * Render as a child element wrapper instead of a button
-   */
-  asChild?: boolean;
-  /**
-   * Whether the menu item is currently active
-   */
-  isActive?: boolean;
-  /**
-   * Tooltip text to show when sidebar is collapsed
-   */
-  tooltip?: string;
-}
-
-
-export const sidebarMenuButton = cv({
-  base: [
-    "peer/menu-button flex w-full items-center gap-3 overflow-hidden rounded-md p-2xl text-left",
-    "ring-sidebar-outline outline-hidden transition-[width,height,padding]",
-    "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",
-    "group-has-data-[sidebar=menu-action]/menu-item:pr-8",
-    "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[active=true]:font-medium",
-    "data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground",
-    "group-data-[collapsible=icon]:size-10! group-data-[collapsible=icon]:p-2.5!",
-    "[&>span:last-child]:truncate [&>svg]:size-4.5 [&>svg]:shrink-0",
-  ],
-  variants: {
-    variant: {
-      default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-      outline: [
-        "bg-background shadow-sidebar-border shadow-xs",
-        "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-sidebar-accent",
-      ],
-    },
-    size: {
-      default: "h-3xl text-base",
-      sm: "h-3xs text-sm",
-      lg: "h-3xl text-lg group-data-[collapsible=icon]:p-0!",
-    },
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "default",
-  },
-});
-
-const {
-  asChild = false,
-  isActive = false,
-  tooltip,
-  variant,
-  size,
-  class: className,
-  ...rest
-} = Astro.props;
-
-const Tag = Astro.props.href ? "a" : "button";
-
-const buttonClasses = sidebarMenuButton({ variant, size });
-const buttonDataAttrs = {
-  "data-slot": "sidebar-menu-button",
-  "data-sidebar": "menu-button",
-  "data-size": size || "default",
-  "data-active": isActive,
-};
----
-
-{
-  tooltip ? (
-    <Tooltip openDelay={0} closeDelay={0} class="starwind-sidebar-menu-button-tooltip w-full">
-      <TooltipTrigger>
-        {asChild ? (
-          <div class:list={[buttonClasses, className]} {...buttonDataAttrs} data-as-child>
-            <slot />
-          </div>
-        ) : (
-          <Tag class:list={[buttonClasses, className]} {...buttonDataAttrs} {...rest}>
-            <slot />
-          </Tag>
-        )}
-      </TooltipTrigger>
-      <TooltipContent
-        side="right"
-        align="center"
-        class="starwind-sidebar-tooltip-content ws-nowrap"
-      >
-        {tooltip}
-      </TooltipContent>
-    </Tooltip>
-  ) : asChild ? (
-    <div class:list={[buttonClasses, className]} {...buttonDataAttrs} data-as-child>
-      <slot />
-    </div>
-  ) : (
-    <Tag class:list={[buttonClasses, className]} {...buttonDataAttrs} {...rest}>
-      <slot />
-    </Tag>
-  )
-}
-
-<style is:global>
-  :root:not([data-starwind-sidebar-tooltips="enabled"]) .starwind-sidebar-tooltip-content {
-    display: none !important;
-  }
-</style>
-