@rimelight/ui 0.0.37 → 0.0.39

package/src/themes/accordion.theme.ts

@@ -1,39 +0,0 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createAccordionTheme = () =>
-  defineTheme({
-    slots: [
-      "root",
-      "item",
-      "header",
-      "trigger",
-      "content",
-      "body",
-      "leadingIcon",
-      "trailingIcon",
-      "label"
-    ],
-    base: {
-      root: "w-full",
-      item: "border-b border-default last:border-b-0",
-      header: "flex",
-      trigger:
-        "group flex w-full flex-1 items-center gap-1.5 font-medium text-sm py-3.5 px-4 focus-visible:outline-primary min-w-0 cursor-pointer list-none [&::-webkit-details-marker]:hidden",
-      content: "overflow-hidden focus:outline-none pt-1 px-4",
-      body: "text-sm pb-3.5 text-astro-gray-200",
-      leadingIcon: "shrink-0 size-5 text-astro-gray-300",
-      trailingIcon:
-        "shrink-0 size-5 ms-auto rotate-0 transition-transform duration-200 group-open:rotate-180 text-astro-gray-300",
-      label: "text-start break-words text-astro-gray-100"
-    },
-    variants: {
-      disabled: {
-        true: {
-          trigger: "cursor-not-allowed opacity-50 select-none"
-        }
-      }
-    },
-    defaultVariants: {}
-  })
-
-export default createAccordionTheme()

package/src/themes/app.theme.ts

@@ -1,13 +0,0 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createAppTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createAppTheme()

package/src/themes/aspect-ratio.theme.ts

@@ -1,13 +0,0 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createAspectRatioTheme = (_colors: readonly string[] = defaultColors) =>
-  defineTheme({
-    slots: ["root", "content"],
-    base: {
-      root: "relative w-full overflow-hidden",
-      content: "absolute inset-0 h-full w-full object-cover"
-    }
-  })
-
-export default createAspectRatioTheme()

package/src/themes/audio.theme.ts

@@ -1,13 +0,0 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createAudioTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createAudioTheme()

package/src/themes/avatar-group.theme.ts

@@ -1,12 +0,0 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createAvatarGroupTheme = (_colors: readonly string[] = defaultColors) =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: "flex -space-x-3 hover:space-x-0 transition-all duration-300 [&_[data-slot=root]]:ring-2 [&_[data-slot=root]]:ring-background [&_[data-slot=root]]:transition-all"
-    }
-  })
-
-export default createAvatarGroupTheme()

package/src/themes/avatar.theme.ts

@@ -1,84 +0,0 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createAvatarTheme = (colors: readonly string[] = defaultColors) =>
-  defineTheme({
-    slots: ["root", "image", "fallback", "icon", "badge"],
-    base: {
-      root: "inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle relative",
-      image: "h-full w-full rounded-[inherit] object-cover",
-      fallback: "font-medium truncate",
-      icon: "shrink-0",
-      badge: "absolute rounded-full ring-2 ring-bg"
-    },
-    variants: {
-      color: {
-        ...Object.fromEntries(
-          colors.map((color) => [
-            color,
-            {
-              root: `bg-${color}/10`,
-              fallback: `text-${color}`,
-              icon: `text-${color}`
-            }
-          ])
-        ),
-        neutral: {
-          root: "bg-elevated",
-          fallback: "text-foreground",
-          icon: "text-muted"
-        }
-      },
-      size: {
-        "3xs": {
-          root: "size-4 text-[8px]",
-          badge: "size-1.5"
-        },
-        "2xs": {
-          root: "size-5 text-[10px]",
-          badge: "size-2"
-        },
-        "xs": {
-          root: "size-6 text-xs",
-          badge: "size-2"
-        },
-        "sm": {
-          root: "size-7 text-sm",
-          badge: "size-2.5"
-        },
-        "md": {
-          root: "size-8 text-base",
-          badge: "size-3"
-        },
-        "lg": {
-          root: "size-9 text-lg",
-          badge: "size-3"
-        },
-        "xl": {
-          root: "size-10 text-xl",
-          badge: "size-3.5"
-        },
-        "2xl": {
-          root: "size-11 text-[22px]",
-          badge: "size-4"
-        },
-        "3xl": {
-          root: "size-12 text-2xl",
-          badge: "size-4"
-        }
-      },
-      badgePosition: {
-        "top-right": { badge: "top-0 right-0" },
-        "bottom-right": { badge: "bottom-0 right-0" },
-        "top-left": { badge: "top-0 left-0" },
-        "bottom-left": { badge: "bottom-0 left-0" }
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      color: "neutral",
-      badgePosition: "bottom-right"
-    }
-  })
-
-export default createAvatarTheme()

package/src/themes/badge.theme.ts

@@ -1,168 +0,0 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createBadgeTheme = (colors: readonly string[] = defaultColors) =>
-  defineTheme({
-    slots: ["root", "label", "leadingIcon", "leadingAvatar", "leadingAvatarSize", "trailingIcon"],
-    base: {
-      root: "font-medium inline-flex items-center gap-1.5 transition-all duration-150 select-none",
-      label: "truncate",
-      leadingIcon: "shrink-0",
-      leadingAvatar: "shrink-0",
-      leadingAvatarSize: "",
-      trailingIcon: "shrink-0"
-    },
-    variants: {
-      variant: {
-        solid: { root: "" },
-        outline: { root: "" },
-        soft: { root: "" },
-        subtle: { root: "" }
-      },
-      color: {
-        ...Object.fromEntries(colors.map((color) => [color, { root: "" }])),
-        neutral: { root: "" }
-      } as Record<string, { root: string }>,
-      size: {
-        xs: {
-          root: "text-[8px]/3 px-1 py-0.5 gap-1 rounded-sm",
-          leadingIcon: "size-3",
-          leadingAvatarSize: "3xs",
-          trailingIcon: "size-3"
-        },
-        sm: {
-          root: "text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm",
-          leadingIcon: "size-3",
-          leadingAvatarSize: "3xs",
-          trailingIcon: "size-3"
-        },
-        md: {
-          root: "text-xs px-2 py-1 gap-1 rounded-md",
-          leadingIcon: "size-4",
-          leadingAvatarSize: "3xs",
-          trailingIcon: "size-4"
-        },
-        lg: {
-          root: "text-sm px-2 py-1 gap-1.5 rounded-md",
-          leadingIcon: "size-5",
-          leadingAvatarSize: "2xs",
-          trailingIcon: "size-5"
-        },
-        xl: {
-          root: "text-base px-2.5 py-1 gap-1.5 rounded-md",
-          leadingIcon: "size-6",
-          leadingAvatarSize: "2xs",
-          trailingIcon: "size-6"
-        }
-      },
-      shape: {
-        square: { root: "rounded-sm" },
-        rounded: { root: "rounded-md" },
-        pill: { root: "rounded-full" }
-      },
-      square: {
-        true: { root: "" }
-      },
-      theme: {
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
-      }
-    },
-    compoundVariants: [
-      ...colors.map((color) => ({
-        variant: "solid" as const,
-        color,
-        classNames: {
-          root: "rl-color-" + color + " bg-[var(--rl-bg)] text-white"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "outline" as const,
-        color,
-        classNames: {
-          root:
-            "rl-color-" +
-            color +
-            " text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/50"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "soft" as const,
-        color,
-        classNames: {
-          root: "rl-color-" + color + " bg-[var(--rl-bg)]/10 text-[var(--rl-text)]"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "subtle" as const,
-        color,
-        classNames: {
-          root:
-            "rl-color-" +
-            color +
-            " bg-[var(--rl-bg)]/10 text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25"
-        }
-      })),
-      {
-        color: "neutral",
-        variant: "solid",
-        classNames: {
-          root: "text-inverted bg-inverted"
-        }
-      },
-      {
-        color: "neutral",
-        variant: "outline",
-        classNames: {
-          root: "ring ring-inset ring-accented text-default bg-default"
-        }
-      },
-      {
-        color: "neutral",
-        variant: "soft",
-        classNames: {
-          root: "text-default bg-elevated"
-        }
-      },
-      {
-        color: "neutral",
-        variant: "subtle",
-        classNames: {
-          root: "ring ring-inset ring-accented text-default bg-elevated"
-        }
-      },
-      {
-        size: "xs",
-        square: true,
-        classNames: { root: "p-0.5" }
-      },
-      {
-        size: "sm",
-        square: true,
-        classNames: { root: "p-1" }
-      },
-      {
-        size: "md",
-        square: true,
-        classNames: { root: "p-1" }
-      },
-      {
-        size: "lg",
-        square: true,
-        classNames: { root: "p-1" }
-      },
-      {
-        size: "xl",
-        square: true,
-        classNames: { root: "p-1" }
-      }
-    ],
-    defaultVariants: {
-      variant: "solid",
-      color: "primary",
-      size: "md",
-      shape: "pill"
-    }
-  })
-
-export default createBadgeTheme()

package/src/themes/banner.theme.ts

@@ -1,49 +0,0 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createBannerTheme = () =>
-  defineTheme({
-    slots: ["root", "content", "container", "center", "left", "side", "actions", "dismiss"],
-    base: {
-      root: "w-full",
-      content: "w-full",
-      container:
-        "relative flex flex-row items-center min-h-12 md:h-14 px-xs sm:px-md md:px-xl lg:px-xl text-sm gap-2",
-      left: "absolute left-0 inset-y-0 flex items-center px-4 max-w-[30%] truncate",
-      center: "absolute left-1/2 -translate-x-1/2 max-w-[50%] truncate text-center",
-      side: "flex-none flex items-center gap-2",
-      actions: "flex-none flex items-center gap-2xs",
-      dismiss:
-        "flex-none flex items-center justify-center size-8 rounded-md hover:bg-black/10 dark:hover:bg-white/10 transition-colors cursor-pointer"
-    },
-    variants: {
-      contain: {
-        true: {
-          container: "mx-auto max-w-90rem"
-        },
-        false: {
-          container: "max-w-none"
-        }
-      },
-      sticky: {
-        true: {
-          root: "sticky top-0 inset-x-0 z-50"
-        },
-        false: {
-          root: ""
-        }
-      },
-      fixed: {
-        true: {
-          root: "fixed left-0 right-0 transition-[top,opacity] duration-200 ease-in-out"
-        },
-        false: {}
-      }
-    },
-    defaultVariants: {
-      contain: true,
-      sticky: false,
-      fixed: true
-    }
-  })
-
-export default createBannerTheme()

package/src/themes/breadcrumb.theme.ts

@@ -1,17 +0,0 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createBreadcrumbTheme = (_colors: readonly string[] = defaultColors) =>
-  defineTheme({
-    slots: ["root", "list", "item", "link", "separator", "page"],
-    base: {
-      root: "aria-label='breadcrumb'",
-      list: "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-      item: "flex items-center gap-1.5",
-      link: "transition-colors hover:text-foreground cursor-pointer decoration-none text-current",
-      separator: "flex size-3.5 items-center justify-center [&_svg]:size-3.5 opacity-60",
-      page: "font-normal text-foreground"
-    }
-  })
-
-export default createBreadcrumbTheme()

package/src/themes/browser-mockup.theme.ts

@@ -1,13 +0,0 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createBrowserMockupTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createBrowserMockupTheme()

package/src/themes/button.theme.ts

@@ -1,223 +0,0 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createButtonTheme = (colors: readonly string[] = defaultColors) =>
-  defineTheme({
-    slots: ["root", "label", "leadingIcon", "leadingAvatar", "leadingAvatarSize", "trailingIcon"],
-    base: {
-      root: [
-        "group inline-flex items-center justify-center font-medium ws-nowrap no-underline disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75",
-        "transition-colors outline-none",
-        "aria-invalid:border-error-500 aria-invalid:ring-error-500/20"
-      ],
-      label: "truncate",
-      leadingIcon: "shrink-0 flex items-center justify-center",
-      leadingAvatar: "shrink-0",
-      leadingAvatarSize: "",
-      trailingIcon: "shrink-0 flex items-center justify-center"
-    },
-    variants: {
-      variant: {
-        solid: { root: "" },
-        outline: { root: "" },
-        soft: { root: "" },
-        subtle: { root: "" },
-        ghost: { root: "" },
-        link: { root: "" }
-      },
-      color: {
-        ...Object.fromEntries(colors.map((color) => [color, { root: "" }])),
-        neutral: { root: "" }
-      } as Record<string, { root: string | string[] }>,
-      size: {
-        xs: {
-          root: "text-xs gap-1 [&_svg]:size-4",
-          leadingIcon: "size-4",
-          leadingAvatarSize: "3xs",
-          trailingIcon: "size-4"
-        },
-        sm: {
-          root: "text-sm gap-1.5 [&_svg]:size-4",
-          leadingIcon: "size-4",
-          leadingAvatarSize: "2xs",
-          trailingIcon: "size-4"
-        },
-        md: {
-          root: "text-base gap-2 [&_svg]:size-5",
-          leadingIcon: "size-5",
-          leadingAvatarSize: "xs",
-          trailingIcon: "size-5"
-        },
-        lg: {
-          root: "text-lg gap-2.5 [&_svg]:size-5",
-          leadingIcon: "size-5",
-          leadingAvatarSize: "sm",
-          trailingIcon: "size-5"
-        },
-        xl: {
-          root: "text-2xl gap-3 [&_svg]:size-7",
-          leadingIcon: "size-7",
-          leadingAvatarSize: "lg",
-          trailingIcon: "size-7"
-        }
-      },
-      block: {
-        true: { root: "w-full justify-center", trailingIcon: "ms-auto" }
-      },
-      square: {
-        true: {},
-        false: {}
-      },
-      rounded: {
-        true: { root: "rounded-full" },
-        false: { root: "rounded-md" }
-      },
-      leading: { true: {} },
-      trailing: { true: {} },
-      loading: { true: {} },
-      active: {
-        true: { root: "" },
-        false: { root: "" }
-      },
-      theme: {
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
-      }
-    },
-    compoundVariants: [
-      ...colors.map((color) => ({
-        variant: "solid" as const,
-        color,
-        classNames: {
-          root:
-            "rl-color-" +
-            color +
-            " bg-[var(--rl-bg)] text-white hover:bg-[var(--rl-bg-hover)] active:bg-[var(--rl-bg-hover)] disabled:bg-[var(--rl-bg)] aria-disabled:bg-[var(--rl-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--rl-ring)]"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "outline" as const,
-        color,
-        classNames: {
-          root:
-            "rl-color-" +
-            color +
-            " ring ring-inset ring-[var(--rl-border)]/50 text-[var(--rl-text)] hover:bg-[var(--rl-bg)]/10 active:bg-[var(--rl-bg)]/10 disabled:bg-transparent aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--rl-ring)]"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "soft" as const,
-        color,
-        classNames: {
-          root:
-            "rl-color-" +
-            color +
-            " text-[var(--rl-text)] bg-[var(--rl-bg)]/10 hover:bg-[var(--rl-bg)]/15 active:bg-[var(--rl-bg)]/15 focus:outline-none focus-visible:bg-[var(--rl-bg)]/15 disabled:bg-[var(--rl-bg)]/10 aria-disabled:bg-[var(--rl-bg)]/10"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "subtle" as const,
-        color,
-        classNames: {
-          root:
-            "rl-color-" +
-            color +
-            " text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25 bg-[var(--rl-bg)]/10 hover:bg-[var(--rl-bg)]/15 active:bg-[var(--rl-bg)]/15 disabled:bg-[var(--rl-bg)]/10 aria-disabled:bg-[var(--rl-bg)]/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--rl-ring)]"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "ghost" as const,
-        color,
-        classNames: {
-          root:
-            "rl-color-" +
-            color +
-            " text-[var(--rl-text)] hover:bg-[var(--rl-bg)]/10 active:bg-[var(--rl-bg)]/10 focus:outline-none focus-visible:bg-[var(--rl-bg)]/10 disabled:bg-transparent aria-disabled:bg-transparent"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "link" as const,
-        color,
-        classNames: {
-          root:
-            "rl-color-" +
-            color +
-            " text-[var(--rl-text)] hover:text-[var(--rl-text)]/75 active:text-[var(--rl-text)]/75 disabled:text-[var(--rl-text)] aria-disabled:text-[var(--rl-text)] focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--rl-ring)]"
-        }
-      })),
-      {
-        color: "neutral",
-        variant: "solid",
-        classNames: {
-          root: "text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted"
-        }
-      },
-      {
-        color: "neutral",
-        variant: "outline",
-        classNames: {
-          root: "ring ring-inset ring-current text-default bg-transparent hover:bg-elevated active:bg-elevated disabled:bg-transparent aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"
-        }
-      },
-      {
-        color: "neutral",
-        variant: "soft",
-        classNames: {
-          root: "text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated"
-        }
-      },
-      {
-        color: "neutral",
-        variant: "subtle",
-        classNames: {
-          root: "ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"
-        }
-      },
-      {
-        color: "neutral",
-        variant: "ghost",
-        classNames: {
-          root: "text-default hover:bg-hover active:bg-hover/80 focus:outline-none focus-visible:bg-hover hover:disabled:bg-transparent hover:aria-disabled:bg-transparent"
-        }
-      },
-      {
-        color: "neutral",
-        variant: "link",
-        classNames: {
-          root: "text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted"
-        }
-      },
-      { square: false, size: "xs", classNames: { root: "px-2 py-1" } },
-      { square: true, size: "xs", classNames: { root: "p-1" } },
-      { square: false, size: "sm", classNames: { root: "px-2.5 py-1.5" } },
-      { square: true, size: "sm", classNames: { root: "p-1.5" } },
-      { square: false, size: "md", classNames: { root: "px-3 py-2" } },
-      { square: true, size: "md", classNames: { root: "p-2" } },
-      { square: false, size: "lg", classNames: { root: "px-3.5 py-2.5" } },
-      { square: true, size: "lg", classNames: { root: "p-2.5" } },
-      { square: false, size: "xl", classNames: { root: "px-5 py-3.5" } },
-      { square: true, size: "xl", classNames: { root: "p-3.5" } },
-      {
-        loading: true,
-        leading: true,
-        classNames: {
-          leadingIcon: "animate-spin"
-        }
-      },
-      {
-        loading: true,
-        leading: false,
-        trailing: true,
-        classNames: {
-          trailingIcon: "animate-spin"
-        }
-      }
-    ],
-    defaultVariants: {
-      variant: "solid",
-      color: "primary",
-      size: "md"
-    }
-  })
-
-export default createButtonTheme()

package/src/themes/calendar.theme.ts

@@ -1,13 +0,0 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createCalendarTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createCalendarTheme()