@vrugd/ui 0.1.6 → 0.1.8

package/dist/index.d.ts

@@ -56,4 +56,28 @@ type SectionProps = React.HTMLAttributes<HTMLElement> & {
 };
 declare function Section({ size, className, children, ...props }: SectionProps): React.JSX.Element;
 
-export { Button, type ButtonProps, Card, type CardProps, Container, type ContainerProps, Glass, type GlassProps, Hero, type HeroProps, type NavItem, Navbar, type NavbarProps, Section, type SectionProps, Text, type TextProps, cn };
+type RevealVariant = "fade" | "up" | "down" | "scale";
+type RevealProps = {
+    as?: keyof React.JSX.IntrinsicElements;
+    variant?: RevealVariant;
+    delayMs?: number;
+    once?: boolean;
+    className?: string;
+    children: React.ReactNode;
+};
+declare function Reveal({ as, variant, delayMs, once, className, children, }: RevealProps): React.JSX.Element;
+
+type HeadingAs = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+type HeadingSize = "display" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+type HeadingTone = "default" | "muted";
+type HeadingProps = {
+    as?: HeadingAs;
+    size?: HeadingSize;
+    tone?: HeadingTone;
+    balance?: boolean;
+    className?: string;
+    children: React.ReactNode;
+};
+declare function Heading({ as, size, tone, balance, className, children, }: HeadingProps): React.JSX.Element;
+
+export { Button, type ButtonProps, Card, type CardProps, Container, type ContainerProps, Glass, type GlassProps, Heading, type HeadingProps, Hero, type HeroProps, type NavItem, Navbar, type NavbarProps, Reveal, type RevealProps, Section, type SectionProps, Text, type TextProps, cn };

package/dist/index.js

@@ -171,13 +171,111 @@ function Section({
 }) {
   return /* @__PURE__ */ jsx8("section", { className: cn(sizeMap2[size], className), ...props, children: /* @__PURE__ */ jsx8(Container, { size: "xl", children }) });
 }
+
+// src/components/Reveal.tsx
+import * as React from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function useInView(opts) {
+  const ref = React.useRef(null);
+  const [inView, setInView] = React.useState(false);
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const io = new IntersectionObserver(
+      (entries) => {
+        const hit = entries.some((e) => e.isIntersecting);
+        if (hit) {
+          setInView(true);
+          if (opts.once) io.disconnect();
+        } else if (!opts.once) {
+          setInView(false);
+        }
+      },
+      {
+        root: opts.root ?? null,
+        rootMargin: opts.rootMargin ?? "0px",
+        threshold: opts.threshold ?? 0.15
+      }
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, [opts.once, opts.root, opts.rootMargin, opts.threshold]);
+  return [ref, inView];
+}
+var variantClass = {
+  fade: { base: "uikit-reveal uikit-reveal--fade", shown: "uikit-reveal--shown" },
+  up: { base: "uikit-reveal uikit-reveal--up", shown: "uikit-reveal--shown" },
+  down: { base: "uikit-reveal uikit-reveal--down", shown: "uikit-reveal--shown" },
+  scale: { base: "uikit-reveal uikit-reveal--scale", shown: "uikit-reveal--shown" }
+};
+function Reveal({
+  as = "div",
+  variant = "up",
+  delayMs = 0,
+  once = true,
+  className,
+  children
+}) {
+  const [ref, inView] = useInView({ once, threshold: 0.18 });
+  const Tag = as;
+  return /* @__PURE__ */ jsx9(
+    Tag,
+    {
+      ref,
+      className: cn(
+        variantClass[variant].base,
+        inView && variantClass[variant].shown,
+        className
+      ),
+      style: { ["--uikit-delay"]: `${Math.max(0, delayMs)}ms` },
+      children
+    }
+  );
+}
+
+// src/components/Heading.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var sizeClass = {
+  display: "text-[44px] leading-[1.06] sm:text-[64px] font-[780] tracking-[-0.03em]",
+  h1: "text-[36px] leading-[1.08] sm:text-[48px] font-[760] tracking-[-0.02em]",
+  h2: "text-[28px] leading-[1.12] sm:text-[36px] font-[740] tracking-[-0.02em]",
+  h3: "text-[22px] leading-[1.2]  sm:text-[28px] font-[720] tracking-[-0.01em]",
+  h4: "text-[18px] leading-[1.25] sm:text-[22px] font-[700]",
+  h5: "text-[16px] leading-[1.35] font-[700]",
+  h6: "text-[14px] leading-[1.35] font-[700] uppercase tracking-[0.12em]"
+};
+function Heading({
+  as,
+  size = "h2",
+  tone = "default",
+  balance = true,
+  className,
+  children
+}) {
+  const Tag = as ?? (size === "display" ? "h1" : size);
+  return /* @__PURE__ */ jsx10(
+    Tag,
+    {
+      className: cn(
+        "text-[rgb(var(--fg))]",
+        tone === "muted" && "text-[rgb(var(--muted))]",
+        balance && "uikit-balance",
+        sizeClass[size],
+        className
+      ),
+      children
+    }
+  );
+}
 export {
   Button,
   Card,
   Container,
   Glass,
+  Heading,
   Hero,
   Navbar,
+  Reveal,
   Section,
   Text,
   cn

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vrugd/ui",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",

package/src/components/Heading.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+
+import { cn } from "../utils/cn";
+
+type HeadingAs = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+type HeadingSize = "display" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+type HeadingTone = "default" | "muted";
+
+export type HeadingProps = {
+  as?: HeadingAs;
+  size?: HeadingSize;
+  tone?: HeadingTone;
+  balance?: boolean; // 見出しの折り返しを綺麗に（対応ブラウザで）
+  className?: string;
+  children: React.ReactNode;
+};
+
+const sizeClass: Record<HeadingSize, string> = {
+  display:
+    "text-[44px] leading-[1.06] sm:text-[64px] font-[780] tracking-[-0.03em]",
+  h1: "text-[36px] leading-[1.08] sm:text-[48px] font-[760] tracking-[-0.02em]",
+  h2: "text-[28px] leading-[1.12] sm:text-[36px] font-[740] tracking-[-0.02em]",
+  h3: "text-[22px] leading-[1.2]  sm:text-[28px] font-[720] tracking-[-0.01em]",
+  h4: "text-[18px] leading-[1.25] sm:text-[22px] font-[700]",
+  h5: "text-[16px] leading-[1.35] font-[700]",
+  h6: "text-[14px] leading-[1.35] font-[700] uppercase tracking-[0.12em]",
+};
+
+export function Heading({
+  as,
+  size = "h2",
+  tone = "default",
+  balance = true,
+  className,
+  children,
+}: HeadingProps): React.JSX.Element {
+  const Tag: HeadingAs = as ?? (size === "display" ? "h1" : size);
+
+  return (
+    <Tag
+      className={cn(
+        "text-[rgb(var(--fg))]",
+        tone === "muted" && "text-[rgb(var(--muted))]",
+        balance && "uikit-balance",
+        sizeClass[size],
+        className,
+      )}
+    >
+      {children}
+    </Tag>
+  );
+}

package/src/components/Reveal.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../utils/cn";
+
+type RevealVariant = "fade" | "up" | "down" | "scale";
+
+export type RevealProps = {
+  as?: keyof React.JSX.IntrinsicElements;
+  variant?: RevealVariant;
+  delayMs?: number;
+  once?: boolean;
+  className?: string;
+  children: React.ReactNode;
+};
+
+function useInView<T extends Element>(
+  opts: IntersectionObserverInit & { once: boolean },
+): [React.RefObject<T | null>, boolean] {
+  const ref = React.useRef<T | null>(null);
+  const [inView, setInView] = React.useState(false);
+
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const io = new IntersectionObserver(
+      (entries) => {
+        const hit = entries.some((e) => e.isIntersecting);
+        if (hit) {
+          setInView(true);
+          if (opts.once) io.disconnect();
+        } else if (!opts.once) {
+          setInView(false);
+        }
+      },
+      {
+        root: opts.root ?? null,
+        rootMargin: opts.rootMargin ?? "0px",
+        threshold: opts.threshold ?? 0.15,
+      },
+    );
+
+    io.observe(el);
+    return () => io.disconnect();
+  }, [opts.once, opts.root, opts.rootMargin, opts.threshold]);
+
+  return [ref, inView];
+}
+
+const variantClass: Record<RevealVariant, { base: string; shown: string }> = {
+  fade: { base: "uikit-reveal uikit-reveal--fade", shown: "uikit-reveal--shown" },
+  up: { base: "uikit-reveal uikit-reveal--up", shown: "uikit-reveal--shown" },
+  down: { base: "uikit-reveal uikit-reveal--down", shown: "uikit-reveal--shown" },
+  scale: { base: "uikit-reveal uikit-reveal--scale", shown: "uikit-reveal--shown" },
+};
+
+export function Reveal({
+  as = "div",
+  variant = "up",
+  delayMs = 0,
+  once = true,
+  className,
+  children,
+}: RevealProps): React.JSX.Element {
+  const [ref, inView] = useInView<HTMLElement>({ once, threshold: 0.18 });
+
+  const Tag = as as unknown as React.ElementType;
+
+  return (
+    <Tag
+      ref={ref}
+      className={cn(
+        variantClass[variant].base,
+        inView && variantClass[variant].shown,
+        className,
+      )}
+      style={{ ["--uikit-delay" as never]: `${Math.max(0, delayMs)}ms` } as React.CSSProperties}
+    >
+      {children}
+    </Tag>
+  );
+}

package/src/index.ts

@@ -8,3 +8,5 @@ export * from "./components/Glass";
 export * from "./components/Navbar";
 export * from "./components/Hero";
 export * from "./components/Section";
+export * from "./components/Reveal";
+export * from "./components/Heading";