@rimelight/ui 0.0.36 → 0.0.38

package/src/components/breadcrumb/RLABreadcrumb.astro

@@ -0,0 +1,62 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { BreadcrumbProps } from "./breadcrumb"
+import { resolveTheme } from "../../utils/resolveTheme"
+import breadcrumbThemeDefault, { createBreadcrumbTheme } from "./breadcrumb.theme"
+const breadcrumbTheme = resolveTheme(breadcrumbThemeDefault, createBreadcrumbTheme)
+import RLAIcon from "../icon/RLAIcon.astro"
+
+
+const breadcrumb = scv(breadcrumbTheme)
+
+const {
+  items,
+  separatorIcon = "chevronRight",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as BreadcrumbProps
+
+const classes = resolveClasses(breadcrumb, {}, useUi("breadcrumb", uiProp), className)
+---
+<nav class={classes.root} data-slot="breadcrumb-root" {...rest}>
+  <ol class={classes.list} data-slot="list">
+    {items ? (
+      items.map((item, idx) => (
+        <li class={classes.item} data-slot="item">
+          {item.href ? (
+            <a href={item.href} class={classes.link} data-slot="link">
+              {item.label}
+            </a>
+          ) : (
+            <span class={classes.page} data-slot="page">
+              {item.label}
+            </span>
+          )}
+          {idx < items.length - 1 && (
+            <span class={classes.separator} data-slot="separator" aria-hidden="true">
+              <RLAIcon name={separatorIcon} />
+            </span>
+          )}
+        </li>
+      ))
+    ) : (
+      <slot />
+    )}
+  </ol>
+</nav>
+
+{items && (
+  <script type="application/ld+json" is:inline set:html={JSON.stringify({
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    "itemListElement": items.map((item, idx) => ({
+      "@type": "ListItem",
+      "position": idx + 1,
+      "name": item.label,
+      "item": item.href ? new URL(item.href, Astro.site || "https://starter.rimelight.com").toString() : undefined
+    }))
+  })} />
+)}

package/src/components/breadcrumb/breadcrumb.theme.ts

@@ -0,0 +1,17 @@
+import { colorConfig } from "../../config/color.config"
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createBreadcrumbTheme = (_colors: readonly string[] = colorConfig.colors) =>
+  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/components/browser-mockup/RLABrowserMockup.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { BrowserMockupProps } from "./browser-mockup"
+import browserMockupTheme from "./browser-mockup.theme"
+
+
+const browserMockup = scv(browserMockupTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as BrowserMockupProps
+
+const classes = resolveClasses(browserMockup, {}, useUi("browserMockup", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

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

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

package/src/components/button/RLAButton.astro

@@ -0,0 +1,177 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { ButtonProps } from "./button"
+import { resolveTheme } from "../../utils/resolveTheme"
+import buttonThemeDefault, { createButtonTheme } from "./button.theme"
+const buttonTheme = resolveTheme(buttonThemeDefault, createButtonTheme)
+import RLAAvatar from "../avatar/RLAAvatar.astro"
+import RLALink from "../link/RLALink.astro"
+import RLAIcon from "../icon/RLAIcon.astro"
+
+
+const button = scv(buttonTheme)
+
+const {
+  variant = "solid",
+  color = "primary",
+  size = "md",
+  href,
+  to,
+  label,
+  leadingIcon,
+  trailingIcon,
+  avatar,
+  loading = false,
+  loadingAuto = false,
+  square = false,
+  rounded = false,
+  block = false,
+  active = false,
+  theme,
+  activeColor,
+  activeVariant,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ButtonProps & {
+  rounded?: boolean
+  activeColor?: string
+  activeVariant?: string
+}
+
+const isLeading = !!(leadingIcon || avatar || Astro.slots.has("leading") || loading)
+const isTrailing = !!(trailingIcon || Astro.slots.has("trailing")) || (loading && !isLeading)
+
+const showLeadingIcon = loading
+  ? "loaderCircle"
+  : leadingIcon
+
+const showTrailingIcon = loading
+  ? "loaderCircle"
+  : trailingIcon
+
+const leadingIconClass = loading ? "animate-spin" : ""
+const trailingIconClass = loading ? "animate-spin" : ""
+
+const classes = resolveClasses(button, {
+  variant: (active && activeVariant ? activeVariant : variant) as "solid",
+  color: (active && activeColor ? activeColor : color) as "neutral",
+  size,
+  block,
+  square: square || (!label && !Astro.slots.has("default")),
+  rounded,
+  leading: isLeading,
+  trailing: isTrailing,
+  loading,
+  active,
+  theme
+}, useUi("button", uiProp), className);
+
+const Tag = (href || to) ? RLALink : "button";
+
+const loadingAutoProps = loadingAuto ? { 'data-loading-auto': '' } : {};
+---
+<Tag
+  class={classes.root}
+  data-slot="root"
+  {...(Tag === RLALink ? { href, to, noExternalIcon: true } : {})}
+  {...loadingAutoProps}
+  {...rest}
+>
+  <slot name="leading" {...{ ui: classes }}>
+    {isLeading && (
+      <span class={classes.leadingIcon} data-slot="leading-icon">
+        {loading || leadingIcon ? (
+           <RLAIcon name={showLeadingIcon} class={leadingIconClass} />
+        ) : avatar ? (
+           <RLAAvatar
+              {...(typeof avatar === 'string' ? { src: avatar } : avatar)}
+              size={classes.leadingAvatarSize as any}
+              class={classes.leadingAvatar}
+              data-slot="leading-avatar"
+           />
+        ) : null}
+      </span>
+    )}
+  </slot>
+
+  {label !== undefined && label !== null && (
+    <span class={classes.label} data-slot="label">
+      {label}
+    </span>
+  )}
+  {!label && <slot />}
+
+  <slot name="trailing" {...{ ui: classes }}>
+    {isTrailing && (
+      <span class={classes.trailingIcon} data-slot="trailing-icon">
+        <RLAIcon name={showTrailingIcon} class={trailingIconClass} />
+      </span>
+    )}
+  </slot>
+</Tag>
+
+{loadingAuto && (
+  <script>
+    const loaderSvg = '<svg class="animate-spin w-full h-full" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" stroke-opacity="0.25"/><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>';
+
+    document.querySelectorAll('button[data-loading-auto]').forEach((button) => {
+      button.addEventListener('click', async (event) => {
+        if (button.getAttribute('data-loading') === 'true') return;
+
+        // Extract onclick attribute if available
+        const onClickAttr = button.getAttribute('onclick');
+        if (onClickAttr) {
+          // Temporarily disable default onclick execution to run it through our promise tracker
+          event.preventDefault();
+          event.stopImmediatePropagation();
+
+          // Construct a function to await the promise
+          try {
+            button.setAttribute('data-loading', 'true');
+            button.setAttribute('disabled', 'true');
+            
+            // To spin the icon dynamically:
+            let leadingIconSpan = button.querySelector('[data-slot="leading-icon"]');
+            let origHTML = '';
+            let isDynamicallyAdded = false;
+
+            if (!leadingIconSpan) {
+              isDynamicallyAdded = true;
+              leadingIconSpan = document.createElement('span');
+              leadingIconSpan.className = 'flex items-center justify-center shrink-0 w-4 h-4';
+              leadingIconSpan.setAttribute('data-slot', 'leading-icon');
+              leadingIconSpan.innerHTML = loaderSvg;
+              button.insertBefore(leadingIconSpan, button.firstChild);
+            } else {
+              origHTML = leadingIconSpan.innerHTML;
+              leadingIconSpan.innerHTML = loaderSvg;
+            }
+
+            // Execute the promise
+            const promiseFn = new Function('event', `
+              const fn = () => { ${onClickAttr} };
+              return fn();
+            `);
+            await promiseFn.call(button, event);
+
+            // Restore state
+            button.removeAttribute('data-loading');
+            button.removeAttribute('disabled');
+            if (isDynamicallyAdded && leadingIconSpan) {
+              leadingIconSpan.remove();
+            } else if (leadingIconSpan) {
+              leadingIconSpan.innerHTML = origHTML;
+            }
+          } catch (err) {
+            console.error(err);
+            button.removeAttribute('data-loading');
+            button.removeAttribute('disabled');
+          }
+        }
+      });
+    });
+  </script>
+)}

package/src/components/button/RLVButton.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { computed, useSlots, useAttrs } from "vue"
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { ButtonProps } from "./button"
+import { resolveTheme } from "../../utils/resolveTheme"
+import buttonThemeDefault, { createButtonTheme } from "./button.theme"
+const buttonTheme = resolveTheme(buttonThemeDefault, createButtonTheme)
+import RLVIcon from "../icon/RLVIcon.vue"
+const attrs = useAttrs()
+const button = scv(buttonTheme)
+
+const {
+  variant = "solid",
+  color = "primary",
+  size = "md",
+  href,
+  label,
+  leadingIcon,
+  trailingIcon,
+  loading = false,
+  square = false,
+  block = false,
+  active = false,
+  activeColor,
+  activeVariant,
+  ui: uiProp,
+  class: className
+} = defineProps<ButtonProps>()
+
+const slots = useSlots()
+
+const isLeading = computed(() => !!(leadingIcon || slots.leading) || loading)
+const isTrailing = computed(
+  () => !!(trailingIcon || slots.trailing) || (loading && !isLeading.value)
+)
+
+const showLeadingIcon = computed(() => {
+  if (loading) return "loaderCircle"
+  return leadingIcon
+})
+
+const showTrailingIcon = computed(() => {
+  if (loading) return "loaderCircle"
+  return trailingIcon
+})
+
+const leadingIconClass = computed(() => {
+  return loading && isLeading.value ? "animate-spin" : ""
+})
+
+const trailingIconClass = computed(() => {
+  return loading && isTrailing.value ? "animate-spin" : ""
+})
+
+defineSlots<{
+  default(props: { ui: Record<string, string> }): any
+  leading(props: { ui: Record<string, string> }): any
+  trailing(props: { ui: Record<string, string> }): any
+}>()
+
+const resolvedClasses = computed(() =>
+  resolveClasses(
+    button,
+    {
+      variant: active && activeVariant ? activeVariant : variant,
+      color: active && activeColor ? activeColor : color,
+      size,
+      block,
+      square: square || (!label && !slots.default),
+      leading: isLeading.value,
+      trailing: isTrailing.value,
+      loading,
+      active
+    },
+    useUi("button", uiProp),
+    className
+  )
+)
+
+const Tag = href ? "a" : "button"
+</script>
+
+<template>
+  <component v-bind="attrs" :is="Tag" :href="href" :class="resolvedClasses.root" data-slot="root">
+    <slot name="leading" :ui="resolvedClasses">
+      <span v-if="isLeading" :class="resolvedClasses.leadingIcon" data-slot="leading-icon">
+        <RLVIcon :name="showLeadingIcon" :class="leadingIconClass" />
+      </span>
+    </slot>
+
+    <span
+      v-if="label !== undefined && label !== null"
+      :class="resolvedClasses.label"
+      data-slot="label"
+    >
+      {{ label }}
+    </span>
+    <slot v-else />
+
+    <slot name="trailing" :ui="resolvedClasses">
+      <span v-if="isTrailing" :class="resolvedClasses.trailingIcon" data-slot="trailing-icon">
+        <RLVIcon :name="showTrailingIcon" :class="trailingIconClass" />
+      </span>
+    </slot>
+  </component>
+</template>

package/src/components/button/button.theme.ts

@@ -0,0 +1,226 @@
+import { colorConfig } from "../../config/color.config"
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createButtonTheme = (colors: readonly string[] = colorConfig.colors) => {
+  const colorVariants: Record<string, { root: string }> = { neutral: { root: "" } }
+  for (const c of colors) {
+    colorVariants[c] = { root: "" }
+  }
+
+  return 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: colorVariants,
+      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()