@rimelight/ui 0.0.1

package/src/components/select/SelectContent.astro

@@ -0,0 +1,94 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * Side of the tooltip
+   * @default bottom
+   */
+  side?: "top" | "bottom";
+  /**
+   * Alignment of the dropdown
+   * @default start
+   */
+  align?: "start" | "center" | "end";
+  /**
+   * Offset distance in pixels
+   * @default 4
+   */
+  sideOffset?: number;
+  /**
+   * Open and close animation duration in milliseconds
+   * @default 150
+   */
+  animationDuration?: number;
+  /**
+   * Size of the select content
+   * @default md
+   */
+  size?: "sm" | "md" | "lg";
+};
+
+export const selectContent = cv({
+  base: [
+    "starwind-select-content",
+    "bg-popover text-popover-foreground absolute z-50 min-w-6xl rounded-md b shadow-md",
+    "data-[state=open]:animate-in fade-in zoom-in-95 overflow-hidden will-change-transform",
+    "data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out zoom-out-95",
+  ],
+  variants: {
+    side: {
+      bottom: "slide-in-from-top-2 slide-out-to-top-2 top-full",
+      top: "slide-in-from-bottom-2 slide-out-to-bottom-2 bottom-full",
+    },
+    align: {
+      start: "slide-in-from-left-1 slide-out-to-left-1 left-0",
+      center: "left-1/2 -translate-x-1/2",
+      end: "slide-in-from-right-1 slide-out-to-right-1 right-0",
+    },
+    size: {
+      sm: "text-sm [&_[data-slot=select-label]]:text-xs",
+      md: "text-base [&_[data-slot=select-label]]:text-sm",
+      lg: "text-lg [&_[data-slot=select-label]]:text-base",
+    },
+  },
+  defaultVariants: { side: "bottom", align: "start", size: "md" },
+});
+
+export const selectContentInner = cv({
+  base: "max-h-3xl w-full min-w-(--select-trigger-width) overflow-y-auto p-5xs",
+});
+
+const {
+  class: className,
+  side = "bottom",
+  align = "start",
+  size = "md",
+  sideOffset = 4,
+  animationDuration = 150,
+  ...rest
+} = Astro.props;
+---
+
+<div
+  class:list={[selectContent({ side, align, size }), className]}
+  role="listbox"
+  data-side={side}
+  data-align={align}
+  data-state="closed"
+  tabindex="-1"
+  style={{
+    // hide the content initially. Script will remove this
+    display: "none",
+    animationDuration: `${animationDuration}ms`,
+    marginTop: side === "bottom" ? `${sideOffset}px` : undefined,
+    marginBottom: side === "top" ? `${sideOffset}px` : undefined,
+  }}
+  {...rest}
+  data-slot="select-content"
+>
+  <div class={selectContentInner()}>
+    <slot />
+  </div>
+</div>

package/src/components/select/SelectGroup.astro

@@ -0,0 +1,9 @@
+---
+/**
+ * This current doesn't do anything
+ */
+
+type Props = { children: any };
+---
+
+<slot />

package/src/components/select/SelectItem.astro

@@ -0,0 +1,51 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+import IconCheck from "~icons/lucide/check";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * The value associated with this select item
+   */
+  value: string;
+  /**
+   * Whether this select item is disabled and cannot be selected
+   */
+  disabled?: boolean;
+};
+
+export const selectItem = cv({
+  base: [
+    "relative flex w-full cursor-default items-center rounded-sm py-5xs pr-2xl pl-3xs outline-none select-none",
+    "data-[active]:bg-accent data-[active]:text-accent-foreground",
+    "data-[disabled]:pointer-events-none data-[disabled]:op-50",
+    "not-aria-selected:[&_svg]:hidden aria-selected:[&_svg]:flex",
+  ],
+});
+
+export const selectItemIcon = cv({
+  base: "absolute right-3xs flex size-4 items-center justify-center",
+});
+
+const { class: className, value, disabled, ...rest } = Astro.props;
+---
+
+<div
+  class:list={[selectItem(), className]}
+  data-value={value}
+  data-disabled={disabled}
+  aria-selected="false"
+  role="option"
+  tabindex="0"
+  {...rest}
+  data-slot="select-item"
+>
+  <span>
+    <slot />
+  </span>
+  <span class={selectItemIcon()}>
+    <slot name="icon">
+      <IconCheck class="size-4" />
+    </slot>
+  </span>
+</div>

package/src/components/select/SelectLabel.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const selectLabel = cv({ base: "text-muted-foreground py-5xs pr-2xl pl-3xs" });
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={[selectLabel(), className]} {...rest} data-slot="select-label">
+  <slot />
+</div>

package/src/components/select/SelectSearch.astro

@@ -0,0 +1,49 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+import IconSearch from "~icons/lucide/search";
+
+type Props = Omit<HTMLAttributes<"input">, "type" | "autocomplete"> & {
+  /**
+   * The text to display when no results are found
+   * @default "No results found."
+   */
+  emptyText?: string;
+};
+
+export const selectSearch = cv({
+  base: [
+    "placeholder:text-muted-foreground flex w-full border-0 bg-transparent px-0 py-2xl",
+    "ring-0 outline-none disabled:cursor-not-allowed disabled:op-50",
+  ],
+});
+
+const {
+  class: className,
+  placeholder = "Search...",
+  emptyText = "No results found.",
+  ...rest
+} = Astro.props;
+---
+
+<div
+  data-slot="select-search-wrapper"
+  class="-mx-5xs -mt-5xs mb-5xs flex items-center gap-3xs border-b px-3xs"
+>
+  <slot name="icon">
+    <IconSearch class="text-muted-foreground size-4.5 shrink-0" />
+  </slot>
+  <input
+    type="text"
+    class:list={[selectSearch(), className]}
+    placeholder={placeholder}
+    autocomplete="off"
+    aria-label={placeholder}
+    {...rest}
+    data-slot="select-search"
+  />
+</div>
+
+<div class="text-muted-foreground hidden py-6 text-center text-sm" data-slot="select-empty">
+  <slot name="empty">{emptyText}</slot>
+</div>

package/src/components/select/SelectSeparator.astro

@@ -0,0 +1,12 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const selectSeparator = cv({ base: "bg-muted -mx-5xs my-5xs h-6xs" });
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={[selectSeparator(), className]} {...rest} data-slot="select-separator"></div>

package/src/components/select/SelectTrigger.astro

@@ -0,0 +1,56 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+import IconChevronDown from "~icons/lucide/chevron-down";
+
+type VariantProps<T extends (...args: any) => any> = NonNullable<Parameters<T>[0]>;
+
+type Props = Omit<HTMLAttributes<"button">, "role" | "type"> &
+  VariantProps<typeof selectTrigger> & {
+    /**
+     * The content to be rendered inside the select trigger
+     */
+    children: any;
+  };
+
+export const selectTrigger = cv({
+  base: [
+    "starwind-select-trigger",
+    "border-input dark:bg-input/30 text-foreground ring-offset-background flex items-center justify-between gap-2 rounded-md b bg-transparent shadow-xs",
+    "focus-visible:border-outline focus-visible:ring-outline/50 transition-[color,box-shadow] outline-none focus-visible:ring-3",
+    "disabled:cursor-not-allowed disabled:op-50 [&>span]:line-clamp-1",
+    "aria-invalid:border-error aria-invalid:focus:ring-error/40 aria-invalid:focus:ring-3",
+  ],
+  variants: {
+    size: {
+      sm: "h-2xl px-3xs text-sm",
+      md: "h-3xl px-xs text-base",
+      lg: "h-3xl px-2xl text-lg",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+const { class: className, size, ...rest } = Astro.props;
+---
+
+<button
+  class:list={[selectTrigger({ size }), className]}
+  type="button"
+  role="combobox"
+  aria-label="Select field"
+  aria-controls=""
+  aria-expanded="false"
+  aria-haspopup="listbox"
+  aria-autocomplete="none"
+  data-state="closed"
+  {...rest}
+  data-slot="select-trigger"
+>
+  <slot />
+  <slot name="icon">
+    <IconChevronDown class="size-4 op-50" />
+  </slot>
+</button>

package/src/components/select/SelectTypes.ts

@@ -0,0 +1,13 @@
+export interface SelectChangeEvent extends CustomEvent {
+  detail: {
+    value: string
+    selectId: string
+    label: string
+  }
+}
+
+export interface SelectEvent extends CustomEvent {
+  detail:
+    | { value: string; selectId: string; selectName?: string }
+    | { value: string; selectId?: string; selectName: string }
+}

package/src/components/select/SelectValue.astro

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"span"> & {
+  /**
+   * The text to display when no value is selected
+   */
+  placeholder?: string;
+};
+
+export const selectValue = cv({ base: "pointer-events-none" });
+
+const { placeholder = "select", class: className, ...rest } = Astro.props;
+---
+
+<span class:list={[selectValue(), className]} {...rest} data-slot="select-value">
+  {placeholder}
+</span>

package/src/components/separator/Separator.astro

@@ -0,0 +1,36 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = Omit<HTMLAttributes<"div">, "role" | "aria-orientation"> & {
+  /**
+   * The orientation of the separator.
+   * @default "horizontal"
+   */
+  orientation?: "horizontal" | "vertical";
+};
+
+export const separator = cv({
+  base: "bg-border shrink-0",
+  variants: {
+    orientation: {
+      horizontal: "h-6xs w-full",
+      vertical: "h-full w-6xs",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+});
+
+const { class: className, orientation = "horizontal", ...rest } = Astro.props;
+---
+
+<div
+  role="separator"
+  aria-orientation={orientation}
+  class:list={[separator({ orientation }), className]}
+  {...rest}
+  data-slot="separator"
+>
+</div>

package/src/components/sheet/Sheet.astro

@@ -0,0 +1,15 @@
+---
+import type { ComponentProps } from "astro/types";
+
+// eslint-disable-next-line typescript/consistent-type-imports
+import Dialog from "../dialog/Dialog.astro";
+
+type Props = ComponentProps<typeof Dialog>;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<Dialog class:list={["starwind-sheet", className]} {...rest} data-slot="sheet">
+  <slot />
+</Dialog>
+

package/src/components/sheet/SheetClose.astro

@@ -0,0 +1,15 @@
+---
+import type { ComponentProps } from "astro/types";
+
+// eslint-disable-next-line typescript/consistent-type-imports
+import DialogClose from "../dialog/DialogClose.astro";
+
+type Props = ComponentProps<typeof DialogClose>;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<DialogClose class:list={["starwind-sheet-close", className]} {...rest}>
+  <slot />
+</DialogClose>
+

package/src/components/sheet/SheetContent.astro

@@ -0,0 +1,89 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+import IconX from "~icons/lucide/x";
+
+type Props = HTMLAttributes<"dialog"> & {
+  /**
+   * Side of the page the sheet opens from
+   */
+  side?: "top" | "right" | "bottom" | "left";
+};
+
+const { side = "right", class: className, ...rest } = Astro.props;
+
+export const dialogBackdrop = cv({
+  base: [
+    "starwind-dialog-backdrop fixed inset-0 top-0 left-0 z-50 hidden h-screen w-screen bg-black/80",
+    "data-[state=open]:animate-in fade-in",
+    "data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out",
+    "data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  ],
+});
+
+export const sheetContent = cv({
+  base: [
+    "starwind-dialog-content",
+    "bg-background fixed z-50 flex-col gap-lg shadow-lg transition ease-in-out open:flex",
+    "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards",
+    "data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  ],
+  variants: {
+    side: {
+      right: [
+        "slide-out-to-right slide-in-from-right",
+        "inset-y-0 right-0 left-auto h-full max-h-[100dvh] w-3/4 border-l sm:max-w-sm",
+      ],
+      left: [
+        "slide-out-to-left slide-in-from-left",
+        "inset-y-0 right-auto left-0 h-full max-h-[100dvh] w-3/4 border-r sm:max-w-sm",
+      ],
+      top: [
+        "slide-out-to-top slide-in-from-top",
+        "inset-x-0 top-0 bottom-auto h-auto w-full max-w-screen border-b",
+      ],
+      bottom: [
+        "slide-out-to-bottom slide-in-from-bottom",
+        "inset-x-0 top-auto bottom-0 h-auto w-full max-w-screen border-t",
+      ],
+    },
+  },
+  defaultVariants: {
+    side: "right",
+  },
+});
+
+export const sheetCloseButton = cv({
+  base: [
+    "starwind-dialog-close",
+    "absolute top-2xl right-2xl rounded-xs [&>svg]:op-70 hover:[&>svg]:op-100",
+    "focus-visible:ring-outline/50 transition-[color,box-shadow] outline-none focus-visible:ring-3",
+  ],
+});
+---
+
+<!-- dialog overlay -->
+<slot name="backdrop">
+  <div class={dialogBackdrop()} data-state="closed" data-slot="dialog-backdrop"></div>
+</slot>
+
+<dialog
+  class:list={[sheetContent({ side }), className]}
+  data-state="closed"
+  data-close-duration="300"
+  {...rest}
+  data-slot="sheet-content"
+>
+  <slot />
+  <button
+    type="button"
+    class={sheetCloseButton()}
+    data-slot="sheet-close"
+    aria-label="Close dialog"
+  >
+    <slot name="icon">
+      <IconX class="size-5 transition-opacity" />
+    </slot>
+    <span class="sr-only">Close</span>
+  </button>
+</dialog>

package/src/components/sheet/SheetDescription.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"p">;
+
+const { class: className, ...rest } = Astro.props;
+
+export const sheetDescription = cv({
+  base: ["text-muted-foreground text-sm"],
+});
+---
+
+<p class:list={[sheetDescription(), className]} {...rest} data-slot="sheet-description">
+  <slot />
+</p>

package/src/components/sheet/SheetFooter.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div">;
+
+const { class: className, ...rest } = Astro.props;
+
+export const sheetFooter = cv({
+  base: ["mt-auto flex flex-col gap-3xs p-2xl"],
+});
+---
+
+<div class:list={[sheetFooter(), className]} {...rest} data-slot="sheet-footer">
+  <slot />
+</div>

package/src/components/sheet/SheetHeader.astro

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

package/src/components/sheet/SheetTitle.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"h2">;
+
+const { class: className, ...rest } = Astro.props;
+
+export const sheetTitle = cv({
+  base: ["starwind-sheet-title", "text-foreground font-heading font-semibold"],
+});
+---
+
+<h2 class:list={[sheetTitle(), className]} {...rest} data-slot="sheet-title">
+  <slot />
+</h2>

package/src/components/sheet/SheetTrigger.astro

@@ -0,0 +1,15 @@
+---
+import type { ComponentProps } from "astro/types";
+
+// eslint-disable-next-line typescript/consistent-type-imports
+import DialogTrigger from "../dialog/DialogTrigger.astro";
+
+type Props = ComponentProps<typeof DialogTrigger>;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<DialogTrigger class:list={["starwind-sheet-trigger", className]} {...rest}>
+  <slot />
+</DialogTrigger>
+