@rxdrag/website-lib 0.0.151 → 0.0.153

package/components/CarouselPagination.astro

@@ -1,76 +1,97 @@
----
-export interface ClassNames {
-  /** bullet 按钮 class */
-  bullet?: string;
-  /** 激活态 bullet 追加的 class */
-  bulletActive?: string;
-}
-
-export interface Props {
-  class?: string;
-  /** 分页类型 */
-  type?: "bullets" | "fraction" | "progressbar";
-  /** 主体形式 */
-  variant?: "dots" | "numbers" | "lines";
-  /** 样式类名配置 */
-  classNames?: ClassNames;
-}
-
-const variantDefaults: Record<string, ClassNames> = {
-  dots: {
-    bullet: "w-2.5 h-2.5 rounded-full bg-white/40 hover:bg-white/60",
-    bulletActive: "bg-white",
-  },
-  lines: {
-    bullet: "w-6 h-1 rounded-sm bg-white/40 hover:bg-white/60",
-    bulletActive: "w-8 bg-white",
-  },
-  numbers: {
-    bullet: "min-w-8 h-8 px-2 rounded-full bg-white/10 text-white/50 text-xs font-medium tracking-wider hover:bg-white/20",
-    bulletActive: "bg-white/10 text-white",
-  },
-};
-
-const {
-  class: className,
-  type = "bullets",
-  variant = "dots",
-  classNames = {},
-} = Astro.props;
-
-const defaults = variantDefaults[variant] || variantDefaults.dots;
-const mergedClassNames = {
-  bullet: classNames.bullet || defaults.bullet,
-  bulletActive: classNames.bulletActive || defaults.bulletActive,
-};
----
-
-<div
-  class:list={["carousel-pagination-wrapper flex items-center gap-2 pointer-events-auto", className]}
-  data-carousel-pagination
-  data-bullet-class={mergedClassNames.bullet}
-  data-bullet-active-class={mergedClassNames.bulletActive}
->
-  {type === "bullets" && (
-    <div class="carousel-pagination flex items-center gap-2" role="tablist" aria-label="Slide navigation"></div>
-  )}
-
-  {type === "fraction" && (
-    <div class="carousel-fraction flex items-center gap-1 text-sm font-medium text-white">
-      <span class="carousel-fraction-current">1</span>
-      <span class="carousel-fraction-separator opacity-50">/</span>
-      <span class="carousel-fraction-total">1</span>
-    </div>
-  )}
-
-  {type === "progressbar" && (
-    <div class="carousel-progressbar w-[100px] h-1 bg-white/20 rounded overflow-hidden">
-      <div class="carousel-progress-bar h-full bg-white transition-[width] duration-300 w-0"></div>
-    </div>
-  )}
-</div>
-
-<style>
-  .carousel-pagination { counter-reset: carouselPage; }
-  .carousel-pagination :global(.carousel-bullet) { counter-increment: carouselPage; }
-</style>
+---
+export interface ClassNames {
+  /** bullet 按钮 class */
+  bullet?: string;
+  /** 激活态 bullet 追加的 class */
+  bulletActive?: string;
+}
+
+export interface Props {
+  class?: string;
+  /** 分页类型 */
+  type?: "bullets" | "fraction" | "progressbar";
+  /** 主体形式 */
+  variant?: "dots" | "numbers" | "lines";
+  /** bullets 数量（提供则 SSR 直接渲染，避免客户端初始化延时） */
+  count?: number;
+  /** 样式类名配置 */
+  classNames?: ClassNames;
+}
+
+const variantDefaults: Record<string, ClassNames> = {
+  dots: {
+    bullet: "w-2.5 h-2.5 rounded-full bg-white/40 hover:bg-white/60",
+    bulletActive: "bg-white",
+  },
+  lines: {
+    bullet: "w-6 h-1 rounded-sm bg-white/40 hover:bg-white/60",
+    bulletActive: "w-8 bg-white",
+  },
+  numbers: {
+    bullet: "min-w-8 h-8 px-2 rounded-full bg-white/10 text-white/50 text-xs font-medium tracking-wider hover:bg-white/20",
+    bulletActive: "bg-white/10 text-white",
+  },
+};
+
+const {
+  class: className,
+  type = "bullets",
+  variant = "dots",
+  count,
+  classNames = {},
+} = Astro.props;
+
+const defaults = variantDefaults[variant] || variantDefaults.dots;
+const mergedClassNames = {
+  bullet: classNames.bullet || defaults.bullet,
+  bulletActive: classNames.bulletActive || defaults.bulletActive,
+};
+---
+
+<div
+  class:list={["carousel-pagination-wrapper flex items-center gap-2 pointer-events-auto", className]}
+  data-carousel-pagination
+  data-bullet-class={mergedClassNames.bullet}
+  data-bullet-active-class={mergedClassNames.bulletActive}
+>
+  {type === "bullets" && (
+    <div class="carousel-pagination flex items-center gap-2" role="tablist" aria-label="Slide navigation">
+      {typeof count === "number" && count > 0 && (
+        Array.from({ length: count }, (_, i) => (
+          <button
+            class:list={[
+              "carousel-bullet",
+              mergedClassNames.bullet,
+              i === 0 && "carousel-bullet-active",
+              i === 0 && mergedClassNames.bulletActive,
+            ]}
+            type="button"
+            role="tab"
+            aria-current={i === 0 ? "true" : "false"}
+            aria-selected={i === 0 ? "true" : "false"}
+            aria-label={`Go to slide ${i + 1}`}
+          />
+        ))
+      )}
+    </div>
+  )}
+
+  {type === "fraction" && (
+    <div class="carousel-fraction flex items-center gap-1 text-sm font-medium text-white">
+      <span class="carousel-fraction-current">1</span>
+      <span class="carousel-fraction-separator opacity-50">/</span>
+      <span class="carousel-fraction-total">1</span>
+    </div>
+  )}
+
+  {type === "progressbar" && (
+    <div class="carousel-progressbar w-[100px] h-1 bg-white/20 rounded overflow-hidden">
+      <div class="carousel-progress-bar h-full bg-white transition-[width] duration-300 w-0"></div>
+    </div>
+  )}
+</div>
+
+<style>
+  .carousel-pagination { counter-reset: carouselPage; }
+  .carousel-pagination :global(.carousel-bullet) { counter-increment: carouselPage; }
+</style>

package/components/CarouselSlide.astro

@@ -1,15 +1,12 @@
 ---
 import type { BackgroundConfig } from "@rxdrag/website-lib-core";
 import Box from "@rxdrag/website-lib/components/Box.astro";
-import Container from "@rxdrag/website-lib/components/Container.astro";
 
 export interface Props {
   class?: string;
   className?: string;
   /** 背景配置 */
   backgrounds?: BackgroundConfig[];
-  /** 是否使用 Container 包裹内容 */
-  useContainer?: boolean;
   /** 内容垂直对齐：start | center | end */
   align?: "start" | "center" | "end";
   /** 内容水平对齐：start | center | end */
@@ -20,7 +17,6 @@ const {
   class: className,
   className: className2,
   backgrounds,
-  useContainer = true,
   align = "center",
   justify = "start",
 } = Astro.props;
@@ -41,23 +37,21 @@ const justifyClasses = {
 <div class="carousel-slide h-full" data-carousel-slide>
   <Box
     class:list={[
-      "w-full h-full flex flex-col",
+      "w-full h-full flex flex-col relative overflow-hidden",
       justifyClasses[justify],
       alignClasses[align],
     ]}
     backgrounds={backgrounds}
   >
-    {
-      useContainer ? (
-        <Container class:list={["h-full w-full slider-container relative overflow-hidden", className, className2]}>
-          <slot />
-        </Container>
-      ) : (
-        <div class:list={["w-full h-full slider-div relative overflow-hidden", className, className2]}>
-          <slot />
-        </div>
-      )
-    }
+    <div
+      class:list={[
+        "w-full h-full relative overflow-hidden",
+        className,
+        className2,
+      ]}
+    >
+      <slot />
+    </div>
   </Box>
 </div>
 

package/components/Collapse.astro

@@ -1,125 +1,125 @@
----
-interface Props {
-  class?: string;
-  triggerClass?: string;
-  panelClass?: string;
-  initialOpen?: boolean;
-}
-
-const {
-  class: className,
-  triggerClass,
-  panelClass,
-  initialOpen = false,
-} = Astro.props;
-
-const collapseId = crypto.randomUUID();
-const panelId = `collapse-panel-${collapseId}`;
-const rootId = `collapse-${collapseId}`;
----
-
-<div
-  class:list={["n-collapse", className]}
-  id={rootId}
-  data-open={initialOpen ? "true" : "false"}
->
-  <button
-    type="button"
-    class:list={["n-collapse__trigger", triggerClass]}
-    aria-expanded={initialOpen ? "true" : "false"}
-    aria-controls={panelId}
-  >
-    <slot name="trigger" />
-  </button>
-
-  <div
-    id={panelId}
-    class:list={["n-collapse__panel", panelClass]}
-    style={`height: ${initialOpen ? "auto" : "0px"};`}
-    aria-hidden={initialOpen ? "false" : "true"}
-  >
-    <slot />
-  </div>
-</div>
-
-<style>
-  .n-collapse__panel {
-    transition: height 0.35s ease;
-  }
-
-  .n-collapse__indicator {
-    transition: transform 0.25s ease;
-  }
-
-  .n-collapse[data-open="true"] .n-collapse__indicator {
-    transform: rotate(180deg);
-  }
-</style>
-
-<script is:inline>
-  // This component can appear multiple times per page.
-  // We install a single global initializer so it keeps working after Astro SPA navigation.
-  if (!window.__nCollapse) {
-    window.__nCollapse = {
-      initCollapseRoot(root) {
-        if (!root || root.dataset.nCollapseBound === "true") return;
-        root.dataset.nCollapseBound = "true";
-
-        const trigger = root.querySelector(":scope > .n-collapse__trigger");
-        const panel = root.querySelector(":scope > .n-collapse__panel");
-        if (!trigger || !panel) {
-          console.log("Collapse: trigger/panel not found", root);
-          return;
-        }
-
-        let open = root.dataset.open === "true";
-        if (open) {
-          panel.style.height = "auto";
-          trigger.setAttribute("aria-expanded", "true");
-          panel.setAttribute("aria-hidden", "false");
-        }
-
-        const setOpen = (next) => {
-          open = next;
-          root.dataset.open = open ? "true" : "false";
-          trigger.setAttribute("aria-expanded", open ? "true" : "false");
-          panel.setAttribute("aria-hidden", open ? "false" : "true");
-
-          if (open) {
-            panel.style.height = "auto";
-            const h = panel.scrollHeight;
-            panel.style.height = "0px";
-            panel.offsetHeight;
-            panel.style.height = h + "px";
-          } else {
-            const h = panel.scrollHeight;
-            panel.style.height = h + "px";
-            panel.offsetHeight;
-            panel.style.height = "0px";
-          }
-        };
-
-        const onTransitionEnd = (e) => {
-          if (e.target !== panel || e.propertyName !== "height") return;
-          if (open) panel.style.height = "auto";
-        };
-
-        trigger.addEventListener("click", () => setOpen(!open));
-        panel.addEventListener("transitionend", onTransitionEnd);
-      },
-      initAll() {
-        document.querySelectorAll(".n-collapse").forEach((el) => window.__nCollapse.initCollapseRoot(el));
-      },
-      listenersBound: false,
-    };
-  }
-
-  // Bind listeners once to support ClientRouter/ViewTransitions.
-  if (!window.__nCollapse.listenersBound) {
-    window.__nCollapse.listenersBound = true;
-    document.addEventListener("astro:page-load", () => window.__nCollapse.initAll());
-    document.addEventListener("astro:after-swap", () => window.__nCollapse.initAll());
-  }
-
-  window.__nCollapse.initAll();
-</script>
+---
+interface Props {
+  class?: string;
+  triggerClass?: string;
+  panelClass?: string;
+  initialOpen?: boolean;
+}
+
+const {
+  class: className,
+  triggerClass,
+  panelClass,
+  initialOpen = false,
+} = Astro.props;
+
+const collapseId = crypto.randomUUID();
+const panelId = `collapse-panel-${collapseId}`;
+const rootId = `collapse-${collapseId}`;
+---
+
+<div
+  class:list={["n-collapse", className]}
+  id={rootId}
+  data-open={initialOpen ? "true" : "false"}
+>
+  <button
+    type="button"
+    class:list={["n-collapse__trigger", triggerClass]}
+    aria-expanded={initialOpen ? "true" : "false"}
+    aria-controls={panelId}
+  >
+    <slot name="trigger" />
+  </button>
+
+  <div
+    id={panelId}
+    class:list={["n-collapse__panel", panelClass]}
+    style={`height: ${initialOpen ? "auto" : "0px"};`}
+    aria-hidden={initialOpen ? "false" : "true"}
+  >
+    <slot />
+  </div>
+</div>
+
+<style>
+  .n-collapse__panel {
+    transition: height 0.35s ease;
+  }
+
+  .n-collapse__indicator {
+    transition: transform 0.25s ease;
+  }
+
+  .n-collapse[data-open="true"] .n-collapse__indicator {
+    transform: rotate(180deg);
+  }
+</style>
+
+<script is:inline>
+  // This component can appear multiple times per page.
+  // We install a single global initializer so it keeps working after Astro SPA navigation.
+  if (!window.__nCollapse) {
+    window.__nCollapse = {
+      initCollapseRoot(root) {
+        if (!root || root.dataset.nCollapseBound === "true") return;
+        root.dataset.nCollapseBound = "true";
+
+        const trigger = root.querySelector(":scope > .n-collapse__trigger");
+        const panel = root.querySelector(":scope > .n-collapse__panel");
+        if (!trigger || !panel) {
+          console.log("Collapse: trigger/panel not found", root);
+          return;
+        }
+
+        let open = root.dataset.open === "true";
+        if (open) {
+          panel.style.height = "auto";
+          trigger.setAttribute("aria-expanded", "true");
+          panel.setAttribute("aria-hidden", "false");
+        }
+
+        const setOpen = (next) => {
+          open = next;
+          root.dataset.open = open ? "true" : "false";
+          trigger.setAttribute("aria-expanded", open ? "true" : "false");
+          panel.setAttribute("aria-hidden", open ? "false" : "true");
+
+          if (open) {
+            panel.style.height = "auto";
+            const h = panel.scrollHeight;
+            panel.style.height = "0px";
+            panel.offsetHeight;
+            panel.style.height = h + "px";
+          } else {
+            const h = panel.scrollHeight;
+            panel.style.height = h + "px";
+            panel.offsetHeight;
+            panel.style.height = "0px";
+          }
+        };
+
+        const onTransitionEnd = (e) => {
+          if (e.target !== panel || e.propertyName !== "height") return;
+          if (open) panel.style.height = "auto";
+        };
+
+        trigger.addEventListener("click", () => setOpen(!open));
+        panel.addEventListener("transitionend", onTransitionEnd);
+      },
+      initAll() {
+        document.querySelectorAll(".n-collapse").forEach((el) => window.__nCollapse.initCollapseRoot(el));
+      },
+      listenersBound: false,
+    };
+  }
+
+  // Bind listeners once to support ClientRouter/ViewTransitions.
+  if (!window.__nCollapse.listenersBound) {
+    window.__nCollapse.listenersBound = true;
+    document.addEventListener("astro:page-load", () => window.__nCollapse.initAll());
+    document.addEventListener("astro:after-swap", () => window.__nCollapse.initAll());
+  }
+
+  window.__nCollapse.initAll();
+</script>

package/components/CollapseIndicator.astro

@@ -1,20 +1,20 @@
----
-interface Props {
-  class?: string;
-}
-
-const { class: className } = Astro.props;
----
-
-<span class:list={["n-collapse__indicator", "h-5", "w-5", "flex-none", "text-foreground", className]} aria-hidden="true">
-  <svg
-    aria-hidden="true"
-    fill="currentColor"
-    focusable="false"
-    height="1.25rem"
-    viewBox="0 0 24 24"
-    width="1.25rem"
-  >
-    <path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"></path>
-  </svg>
-</span>
+---
+interface Props {
+  class?: string;
+}
+
+const { class: className } = Astro.props;
+---
+
+<span class:list={["n-collapse__indicator", "h-5", "w-5", "flex-none", "text-foreground", className]} aria-hidden="true">
+  <svg
+    aria-hidden="true"
+    fill="currentColor"
+    focusable="false"
+    height="1.25rem"
+    viewBox="0 0 24 24"
+    width="1.25rem"
+  >
+    <path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"></path>
+  </svg>
+</span>

package/components/Container.astro

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

package/components/Content.astro

@@ -0,0 +1,20 @@
+---
+import type { BackgroundConfig } from "@rxdrag/website-lib-core";
+import Frame from "./Frame.astro";
+
+interface Props {
+  class?: string;
+  className?: string;
+  backgrounds?: BackgroundConfig[];
+}
+
+const { className, class: originalClass, backgrounds, ...rest } = Astro.props;
+---
+
+<Frame
+  class:list={["text-content", className, originalClass]}
+  backgrounds={backgrounds}
+  {...rest}
+>
+  <slot />
+</Frame>