@rimelight/ui 0.0.37 → 0.0.39

package/src/components/separator/RLASeparator.astro

@@ -0,0 +1,83 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { SeparatorProps } from "./separator"
+import { resolveTheme } from "../../utils/resolveTheme"
+import separatorThemeDefault, { createSeparatorTheme } from "./separator.theme"
+const separatorTheme = resolveTheme(separatorThemeDefault, createSeparatorTheme)
+import RLAAvatar from "../avatar/RLAAvatar.astro"
+import { cx } from "css-variants"
+
+
+const separator = scv(separatorTheme)
+
+const {
+  orientation = "horizontal",
+  color = "neutral",
+  size = "xs",
+  type = "solid",
+  label,
+  icon,
+  avatar,
+  position = "center",
+  decorative = true,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as SeparatorProps & {
+  color?: string
+  size?: "xs" | "sm" | "md" | "lg" | "xl"
+  type?: "solid" | "dashed" | "dotted"
+  position?: "start" | "center" | "end"
+}
+
+const classes = resolveClasses(separator, {
+  orientation,
+  color: color as "neutral",
+  size: size as "xs",
+  type: type as "solid",
+  position: position as "center"
+}, useUi("separator", uiProp), className)
+---
+<div
+  class={classes.root}
+  data-slot="root"
+  role={decorative ? "none" : "separator"}
+  aria-orientation={decorative ? undefined : orientation}
+  {...rest}
+>
+  <div class={classes.border} />
+
+  {(label || icon || avatar || Astro.slots.has("default")) && (
+    <>
+      <div class={classes.container} data-slot="container">
+        <slot name="avatar">
+          {avatar && (
+            <RLAAvatar 
+              {...(typeof avatar === 'string' ? { src: avatar } : avatar)} 
+              size={classes.avatarSize as any} 
+              class={classes.avatar} 
+              data-slot="avatar" 
+            />
+          )}
+        </slot>
+        
+        <slot name="icon">
+          {icon && (
+            <span class={classes.icon} data-slot="icon">
+              <span class={cx(icon)} aria-hidden="true" />
+            </span>
+          )}
+        </slot>
+
+        <span class={classes.label} data-slot="label">
+          {label}
+          <slot />
+        </span>
+      </div>
+
+      <div class={classes.border} />
+    </>
+  )}
+</div>

package/src/components/separator/separator.theme.ts

@@ -0,0 +1,147 @@
+import { colorConfig } from "../../config/color.config"
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createSeparatorTheme = (colors: readonly string[] = colorConfig.colors) =>
+  defineTheme({
+    slots: ["root", "border", "container", "icon", "avatar", "avatarSize", "label"],
+    base: {
+      root: "flex items-center align-center text-center",
+      border: "",
+      container: "font-medium text-default flex",
+      icon: "shrink-0 size-5",
+      avatar: "shrink-0",
+      avatarSize: "2xs",
+      label: "text-sm"
+    },
+    variants: {
+      color: {
+        ...Object.fromEntries(colors.map((color) => [color, { border: `border-${color}` }])),
+        neutral: { border: "border-default" }
+      },
+      orientation: {
+        horizontal: {
+          root: "w-full flex-row",
+          border: "w-full",
+          container: "whitespace-nowrap"
+        },
+        vertical: {
+          root: "h-full flex-col",
+          border: "h-full",
+          container: ""
+        }
+      },
+      size: {
+        xs: {},
+        sm: {},
+        md: {},
+        lg: {},
+        xl: {}
+      },
+      position: {
+        start: {},
+        center: {},
+        end: {}
+      },
+      type: {
+        solid: {
+          border: "border-solid"
+        },
+        dashed: {
+          border: "border-dashed"
+        },
+        dotted: {
+          border: "border-dotted"
+        }
+      }
+    },
+    compoundVariants: [
+      {
+        orientation: "horizontal",
+        position: "start",
+        classNames: { container: "me-3" }
+      },
+      {
+        orientation: "horizontal",
+        position: "center",
+        classNames: { container: "mx-3" }
+      },
+      {
+        orientation: "horizontal",
+        position: "end",
+        classNames: { container: "ms-3" }
+      },
+      {
+        orientation: "vertical",
+        position: "start",
+        classNames: { container: "mb-2" }
+      },
+      {
+        orientation: "vertical",
+        position: "center",
+        classNames: { container: "my-2" }
+      },
+      {
+        orientation: "vertical",
+        position: "end",
+        classNames: { container: "mt-2" }
+      },
+      {
+        orientation: "horizontal",
+        size: "xs",
+        classNames: { border: "border-t" }
+      },
+      {
+        orientation: "horizontal",
+        size: "sm",
+        classNames: { border: "border-t-[2px]" }
+      },
+      {
+        orientation: "horizontal",
+        size: "md",
+        classNames: { border: "border-t-[3px]" }
+      },
+      {
+        orientation: "horizontal",
+        size: "lg",
+        classNames: { border: "border-t-[4px]" }
+      },
+      {
+        orientation: "horizontal",
+        size: "xl",
+        classNames: { border: "border-t-[5px]" }
+      },
+      {
+        orientation: "vertical",
+        size: "xs",
+        classNames: { border: "border-s" }
+      },
+      {
+        orientation: "vertical",
+        size: "sm",
+        classNames: { border: "border-s-[2px]" }
+      },
+      {
+        orientation: "vertical",
+        size: "md",
+        classNames: { border: "border-s-[3px]" }
+      },
+      {
+        orientation: "vertical",
+        size: "lg",
+        classNames: { border: "border-s-[4px]" }
+      },
+      {
+        orientation: "vertical",
+        size: "xl",
+        classNames: { border: "border-s-[5px]" }
+      }
+    ],
+    defaultVariants: {
+      color: "neutral",
+      size: "xs",
+      type: "solid",
+      orientation: "horizontal"
+    }
+  })
+
+export default createSeparatorTheme()

package/src/components/share/RLAShare.astro

@@ -0,0 +1,60 @@
+---
+import RLAButton from "../button/RLAButton.astro"
+import type { ButtonProps } from "../button/button"
+
+interface Props extends Omit<ButtonProps, "href" | "label" | "leadingIcon" | "trailingIcon" | "loading" | "loadingAuto" | "square" | "active" | "activeColor" | "activeVariant"> {}
+
+const {
+  ...rest
+} = Astro.props
+---
+
+<RLAButton
+  id="rl-share"
+  color="neutral"
+  variant="outline"
+  size="sm"
+  leadingIcon="share"
+  label="Share"
+  {...rest}
+/>
+
+<script>
+  function setupShare() {
+    const shareBtn = document.getElementById("rl-share") as (HTMLButtonElement & { rlShareRegistered?: boolean }) | null;
+    if (!shareBtn) return;
+
+    if (shareBtn.rlShareRegistered) return;
+    shareBtn.rlShareRegistered = true;
+
+    shareBtn.addEventListener("click", async () => {
+      if (navigator.share) {
+        try {
+          await navigator.share({ title: document.title, url: window.location.href });
+        } catch (err) {
+          const error = err as { name?: string };
+          if (error.name !== "AbortError") {
+            console.error("Share failed:", err);
+          }
+        }
+      } else {
+        try {
+          await navigator.clipboard.writeText(window.location.href);
+          const labelEl = shareBtn.querySelector('[data-slot="label"]');
+          if (labelEl) {
+            const origText = labelEl.textContent;
+            labelEl.textContent = "Link Copied!";
+            setTimeout(() => {
+              labelEl.textContent = origText;
+            }, 2000);
+          }
+        } catch (err) {
+          console.error("Failed to copy link:", err);
+        }
+      }
+    });
+  }
+
+  setupShare();
+  document.addEventListener("astro:after-swap", setupShare);
+</script>