@rimelight/ui 0.0.5 → 0.0.7

package/src/components/select/SelectContent.astro

@@ -1,94 +0,0 @@
----
-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

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

package/src/components/select/SelectItem.astro

@@ -1,51 +0,0 @@
----
-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

@@ -1,14 +0,0 @@
----
-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

@@ -1,49 +0,0 @@
----
-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

@@ -1,12 +0,0 @@
----
-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

@@ -1,56 +0,0 @@
----
-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

@@ -1,13 +0,0 @@
-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

@@ -1,19 +0,0 @@
----
-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

@@ -1,36 +0,0 @@
----
-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

@@ -1,15 +0,0 @@
----
-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

@@ -1,15 +0,0 @@
----
-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

@@ -1,89 +0,0 @@
----
-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

@@ -1,16 +0,0 @@
----
-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

@@ -1,16 +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 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

@@ -1,16 +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 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

@@ -1,16 +0,0 @@
----
-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

@@ -1,15 +0,0 @@
----
-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>
-