@rxdrag/website-lib 0.0.151 → 0.0.153

package/components/GlassBorder.astro

@@ -0,0 +1,104 @@
+---
+export interface Props {
+  class?: string;
+  color?: string;
+  width?: number | string;
+  opacity?: number;
+  shadowRatio?: number;
+  angle?: number | string;
+}
+
+const {
+  class: className,
+  color = "255 255 255",
+  opacity = 0.6,
+  width = 1,
+  shadowRatio = 1,
+  angle,
+} = Astro.props;
+
+const num = (v: number | string) =>
+  typeof v === "number" ? v : parseFloat(v) || 0;
+
+const gradientId = `hl-grad-${Math.random().toString(36).slice(2, 8)}`;
+const rectId = `hl-rect-${Math.random().toString(36).slice(2, 8)}`;
+const hlColorComma = color.trim().split(/\s+/).join(",");
+const hlWidth = num(width);
+const r = 0;
+const a0 = Math.max(0, Math.min(1, opacity));
+const a1 = a0 * (2 / 3);
+const a2 = a0 * (1 / 20);
+
+const ratio = (() => {
+  const n = typeof shadowRatio === "number" ? shadowRatio : parseFloat(String(shadowRatio));
+  if (!Number.isFinite(n)) return 1;
+  return Math.max(0, n);
+})();
+
+const stop42 = Math.max(0, Math.min(100, 50 - 8 * ratio));
+const stop49 = Math.max(0, Math.min(100, 50 - 1 * ratio));
+const stop54 = Math.max(0, Math.min(100, 50 + 4 * ratio));
+
+const angleDeg = (() => {
+  if (angle === undefined || angle === null || angle === "") return undefined;
+  if (typeof angle === "number") return `${angle}`;
+  const s = String(angle).trim();
+  if (!s) return undefined;
+  const n = parseFloat(s);
+  if (!Number.isFinite(n)) return undefined;
+  return `${n}`;
+})();
+---
+
+<svg class={className} aria-hidden="true" style="overflow: visible;">
+  <defs>
+    <linearGradient
+      id={gradientId}
+      x1="0%"
+      y1="0%"
+      x2="100%"
+      y2="105%"
+      gradientTransform={angleDeg ? `rotate(${angleDeg} 0.5 0.5)` : undefined}
+    >
+      <stop offset="0%" stop-color={`rgba(${hlColorComma}, ${a0})`}></stop>
+      <stop offset={`${stop42}%`} stop-color={`rgba(${hlColorComma}, ${a1})`}></stop>
+      <stop offset={`${stop49}%`} stop-color={`rgba(${hlColorComma}, ${a2})`}></stop>
+      <stop offset="50%" stop-color={`rgba(${hlColorComma}, ${a2})`}></stop>
+      <stop offset={`${stop54}%`} stop-color={`rgba(${hlColorComma}, ${a1})`}></stop>
+      <stop offset="100%" stop-color={`rgba(${hlColorComma}, ${a0})`}></stop>
+    </linearGradient>
+  </defs>
+  <rect
+    id={rectId}
+    x={hlWidth / 2}
+    y={hlWidth / 2}
+    width={`calc(100% - ${hlWidth}px)`}
+    height={`calc(100% - ${hlWidth}px)`}
+    rx={r}
+    ry={r}
+    fill="none"
+    stroke={`url(#${gradientId})`}
+    stroke-width={hlWidth}></rect>
+</svg>
+
+<script is:inline define:vars={{ rectId }}>
+  const rect = document.getElementById(rectId);
+  if (!rect) {
+    // noop
+  } else {
+    const updateRadius = () => {
+      let host = rect.ownerSVGElement?.parentElement;
+      if (host?.hasAttribute("data-bg-group")) host = host.parentElement;
+      if (!host) return;
+      const cs = getComputedStyle(host);
+      const v = cs.borderTopLeftRadius || cs.borderRadius || "0px";
+      const n = parseFloat(v);
+      const r = Number.isFinite(n) ? n : 0;
+      rect.setAttribute("rx", String(r));
+      rect.setAttribute("ry", String(r));
+    };
+
+    updateRadius();
+    window.addEventListener("resize", updateRadius);
+  }
+</script>

package/components/GlassRefraction.astro

@@ -0,0 +1,85 @@
+---
+interface Props {
+  class?: string;
+  className?: string;
+}
+
+const {
+  class: classAttr,
+  className,
+} = Astro.props;
+
+const filterId = `glass-refract-${Math.random().toString(36).slice(2)}`;
+---
+
+<div
+  class:list={["bg-glass-refraction", classAttr, className]}
+  style={`--glass-filter: url(#${filterId});`}
+>
+</div>
+<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" style="position:absolute;overflow:hidden">
+  <defs>
+    <filter id={filterId} x="0%" y="0%" width="100%" height="100%">
+      <feTurbulence type="turbulence" baseFrequency="0.006 0.012" numOctaves="2" seed="92" result="noise" />
+      <feGaussianBlur in="noise" stdDeviation="4" result="smoothNoise" />
+      <feDisplacementMap in="SourceGraphic" in2="smoothNoise" scale="10" xChannelSelector="R" yChannelSelector="G" />
+    </filter>
+  </defs>
+</svg>
+
+<style is:global>
+  .bg-glass-refraction {
+    --glass-tint-color: 255, 255, 255;
+    --glass-tint-opacity: 0.04;
+    --glass-frost-blur: 1px;
+    --glass-shadow-blur: 20px;
+    --glass-shadow-spread: -5px;
+    --glass-shadow-color: rgba(255, 255, 255, 0.1);
+
+    overflow: hidden;
+    isolation: isolate;
+    contain: paint;
+  }
+
+  .bg-glass-refraction::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    border-radius: inherit;
+    box-shadow: inset 0 0 var(--glass-shadow-blur) var(--glass-shadow-spread) var(--glass-shadow-color);
+    background-color: rgba(var(--glass-tint-color), var(--glass-tint-opacity));
+    transition: none;
+  }
+
+  .bg-glass-refraction::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    border-radius: inherit;
+    backdrop-filter: blur(var(--glass-frost-blur));
+    -webkit-backdrop-filter: blur(var(--glass-frost-blur));
+    filter: var(--glass-filter);
+    -webkit-filter: var(--glass-filter);
+    isolation: isolate;
+    transition: none;
+  }
+
+
+  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    .bg-glass-refraction::after {
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+      filter: none;
+      -webkit-filter: none;
+    }
+  }
+
+  @supports not (filter: url(#test)) {
+    .bg-glass-refraction::after {
+      filter: none;
+      -webkit-filter: none;
+    }
+  }
+</style>

package/components/GradientBorder.astro

@@ -0,0 +1,80 @@
+---
+import type {
+  GradientConfig,
+  GradientDirection,
+} from "@rxdrag/website-lib-core";
+
+export interface Props extends GradientConfig {
+  class?: string;
+  width?: number | string;
+}
+
+const {
+  class: className,
+  width = 2,
+  colors,
+  fromColor = "#1356da",
+  toColor = "#719fff",
+  viaColor,
+  angle,
+  direction = "to-r",
+} = Astro.props;
+
+const px = (v: number | string) => (typeof v === "number" ? `${v}px` : v);
+
+const deg = (v: number | string) => {
+  if (typeof v === "number") return `${v}deg`;
+  const s = `${v}`.trim();
+  if (!s) return "0deg";
+  return /deg|rad|turn|grad$/i.test(s) ? s : `${s}deg`;
+};
+
+const directionMap: Record<GradientDirection, string> = {
+  "to-r": "to right",
+  "to-l": "to left",
+  "to-t": "to top",
+  "to-b": "to bottom",
+  "to-tr": "to top right",
+  "to-tl": "to top left",
+  "to-br": "to bottom right",
+  "to-bl": "to bottom left",
+};
+
+const gradientColors = (() => {
+  if (colors?.length) return colors.join(", ");
+  return viaColor
+    ? `${fromColor}, ${viaColor}, ${toColor}`
+    : `${fromColor}, ${toColor}`;
+})();
+
+const gradientDirection =
+  angle !== undefined ? deg(angle) : directionMap[direction];
+
+const styleStr = [
+  `--gb-width:${px(width)}`,
+  `--gb-colors:${gradientColors}`,
+  `--gb-direction:${gradientDirection}`,
+].join(";");
+---
+
+<span class:list={["gb-root", className]} style={styleStr} aria-hidden="true"
+></span>
+
+<style>
+  .gb-root {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border-radius: inherit;
+    padding: var(--gb-width);
+    background: linear-gradient(var(--gb-direction), var(--gb-colors));
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    mask-composite: exclude;
+  }
+</style>

package/components/Grid.astro

@@ -1,34 +1,32 @@
----
-import type { HTMLAttributes } from "astro/types";
-import type { BackgroundConfig } from "@rxdrag/website-lib-core";
-import BaseBlock from "./BaseBlock.astro";
-
-/**
- * 网格
- *
- * 规范：被冻结（Frozen）的设计器原子组件
- * - 对外接口与 DOM 结构应保持稳定，不随业务随意增删/调整
- * - 允许通过原生属性透传（...rest）注入 id/style/data-*（如 data-aos-*）等通用能力
- */
-
-interface Props extends HTMLAttributes<'div'> {
-  // 布局方案名称（设计器用）
-  patternName?: string;
-  className?: string;
-  backgrounds?: BackgroundConfig[];
-}
-
-const { className, class: originalClass, backgrounds, ...rest } = Astro.props;
-
-//布局容器
----
-
-<BaseBlock
-  baseClass="relative grid gap-12"
-  className={className}
-  class={originalClass}
-  backgrounds={backgrounds}
-  {...rest}
->
-  <slot />
-</BaseBlock>
+---
+import type { HTMLAttributes } from "astro/types";
+import type { BackgroundConfig } from "@rxdrag/website-lib-core";
+import Frame from "./Frame.astro";
+
+/**
+ * 网格
+ *
+ * 规范：被冻结（Frozen）的设计器原子组件
+ * - 对外接口与 DOM 结构应保持稳定，不随业务随意增删/调整
+ * - 允许通过原生属性透传（...rest）注入 id/style/data-*（如 data-aos-*）等通用能力
+ */
+
+interface Props extends HTMLAttributes<"div"> {
+  // 布局方案名称（设计器用）
+  patternName?: string;
+  className?: string;
+  backgrounds?: BackgroundConfig[];
+}
+
+const { className, class: originalClass, backgrounds, ...rest } = Astro.props;
+
+//布局容器
+---
+
+<Frame
+  class:list={["relative grid", className, originalClass]}
+  backgrounds={backgrounds}
+  {...rest}
+>
+  <slot />
+</Frame>

package/components/GridCell.astro

@@ -1,32 +1,28 @@
----
-import type { HTMLAttributes } from "astro/types";
-import type {
-  BackgroundConfig,
-} from "@rxdrag/website-lib-core";
-import BaseBlock from "./BaseBlock.astro";
-
-/**
- * 网格单元
- *
- * 规范：被冻结（Frozen）的设计器原子组件
- * - 对外接口与 DOM 结构应保持稳定，不随业务随意增删/调整
- * - 允许通过原生属性透传（...rest）注入 id/style/data-*（如 data-aos-*）等通用能力
- */
-
-interface Props extends HTMLAttributes<'div'> {
-  className?: string;
-  backgrounds?: BackgroundConfig[];
-}
-
-const { className, class: originalClass, backgrounds, ...rest } = Astro.props;
----
-
-<BaseBlock
-  baseClass={["w-full", "h-full", "flex", "flex-col"]}
-  className={className}
-  class={originalClass}
-  backgrounds={backgrounds}
-  {...rest}
->
-  <slot />
-</BaseBlock>
+---
+import type { HTMLAttributes } from "astro/types";
+import type { BackgroundConfig } from "@rxdrag/website-lib-core";
+import Frame from "./Frame.astro";
+
+/**
+ * 网格单元
+ *
+ * 规范：被冻结（Frozen）的设计器原子组件
+ * - 对外接口与 DOM 结构应保持稳定，不随业务随意增删/调整
+ * - 允许通过原生属性透传（...rest）注入 id/style/data-*（如 data-aos-*）等通用能力
+ */
+
+interface Props extends HTMLAttributes<"div"> {
+  className?: string;
+  backgrounds?: BackgroundConfig[];
+}
+
+const { className, class: originalClass, backgrounds, ...rest } = Astro.props;
+---
+
+<Frame
+  class:list={[className, originalClass]}
+  backgrounds={backgrounds}
+  {...rest}
+>
+  <slot />
+</Frame>

package/components/Heading.astro

@@ -1,24 +1,24 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { headingLevelToTypographyClassName } from "@rxdrag/website-lib-core";
-
-interface Props extends HTMLAttributes<"h1" | "h2" | "h3" | "h4" | "h5" | "h6"> {
-  level: 1 | 2 | 3 | 4 | 5 | 6;
-  customSize?: boolean;
-  className?: string;
-}
-
-const { level, customSize = false, className, class: classAttr, ...rest } = Astro.props;
-
-if (typeof level !== "number" || level < 1 || level > 6) {
-  console.log("[Heading] invalid level", level);
-  throw new Error("Heading.astro: prop 'level' must be a number from 1 to 6");
-}
-
-const Tag = `h${level}`;
-const baseClassName = customSize ? undefined : headingLevelToTypographyClassName[level];
----
-
-<Tag class:list={[baseClassName, className, classAttr]} {...rest}>
-  <slot />
-</Tag>
+---
+import type { HTMLAttributes } from "astro/types";
+import { headingLevelToTypographyClassName } from "@rxdrag/website-lib-core";
+
+interface Props extends HTMLAttributes<"h1" | "h2" | "h3" | "h4" | "h5" | "h6"> {
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+  customSize?: boolean;
+  className?: string;
+}
+
+const { level =2, customSize = false, className, class: classAttr, ...rest } = Astro.props;
+
+if (typeof level !== "number" || level < 1 || level > 6) {
+  console.log("[Heading] invalid level", level);
+  throw new Error("Heading.astro: prop 'level' must be a number from 1 to 6");
+}
+
+const Tag = `h${level}`;
+const baseClassName = customSize ? undefined : headingLevelToTypographyClassName[level];
+---
+
+<Tag class:list={[baseClassName, className, classAttr]} {...rest}>
+  <slot />
+</Tag>

package/components/Icon.astro

@@ -1,30 +1,30 @@
----
-import {
-  Icon as CoreIcon,
-  Entify,
-  type Locals,
-} from "@rxdrag/website-lib-core";
-
-interface Props {
-  className?: string;
-  icon?: string;
-  svg?: string;
-}
-const { env, imageSizes } = Astro.locals as Locals;
-const { className, icon, svg, ...rest } = Astro.props;
-
-const localIconName = icon?.startsWith("local:") ? icon?.split(":")[1] : null;
-
-const rx = Entify.getInstance(env, imageSizes);
-
-const svgIcon =
-  !!rx && localIconName ? await rx.getIcon(localIconName) : undefined;
----
-
-<CoreIcon
-  className={className}
-  icon={localIconName ? undefined : icon}
-  svg={svgIcon?.code || svg}
-  {...rest}
-  client:only="react"
+---
+import {
+  Icon as CoreIcon,
+  Entify,
+  type Locals,
+} from "@rxdrag/website-lib-core";
+
+interface Props {
+  className?: string;
+  icon?: string;
+  svg?: string;
+}
+const { env, imageSizes } = Astro.locals as Locals;
+const { className, icon, svg, ...rest } = Astro.props;
+
+const localIconName = icon?.startsWith("local:") ? icon?.split(":")[1] : null;
+
+const rx = Entify.getInstance(env, imageSizes);
+
+const svgIcon =
+  !!rx && localIconName ? await rx.getIcon(localIconName) : undefined;
+---
+
+<CoreIcon
+  className={className}
+  icon={localIconName ? undefined : icon}
+  svg={svgIcon?.code || svg}
+  {...rest}
+  client:only="react"
 />