@vrugd/ui 0.1.1

package/dist/index.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+
+declare function cn(...parts: Array<string | false | null | undefined>): string;
+
+type ContainerProps = React.HTMLAttributes<HTMLDivElement> & {
+    size?: "sm" | "md" | "lg" | "xl";
+};
+declare function Container({ size, className, ...props }: ContainerProps): React.JSX.Element;
+
+type TextProps = React.HTMLAttributes<HTMLElement> & {
+    as?: "p" | "span" | "div";
+    tone?: "default" | "muted";
+    size?: "sm" | "md" | "lg";
+};
+declare function Text({ as, tone, size, className, ...props }: TextProps): React.JSX.Element;
+
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: "solid" | "soft" | "ghost";
+    size?: "sm" | "md" | "lg";
+};
+declare function Button({ variant, size, className, ...props }: ButtonProps): React.JSX.Element;
+
+type CardProps = React.HTMLAttributes<HTMLDivElement> & {
+    tone?: "default" | "elevated";
+};
+declare function Card({ tone, className, ...props }: CardProps): React.JSX.Element;
+
+type GlassProps = React.HTMLAttributes<HTMLDivElement> & {
+    blur?: "sm" | "md" | "lg";
+};
+declare function Glass({ blur, className, ...props }: GlassProps): React.JSX.Element;
+
+type NavItem = {
+    label: string;
+    href: string;
+};
+type NavbarProps = {
+    brand?: React.ReactNode;
+    items?: NavItem[];
+    right?: React.ReactNode;
+    className?: string;
+};
+declare function Navbar({ brand, items, right, className }: NavbarProps): React.JSX.Element;
+
+type HeroProps = {
+    eyebrow?: string;
+    title: string;
+    description?: string;
+    actions?: React.ReactNode;
+    className?: string;
+};
+declare function Hero({ eyebrow, title, description, actions, className }: HeroProps): React.JSX.Element;
+
+type SectionProps = React.HTMLAttributes<HTMLElement> & {
+    size?: "md" | "lg" | "xl";
+};
+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 };

package/dist/index.js

@@ -0,0 +1,184 @@
+// src/utils/cn.ts
+function cn(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+
+// src/components/Container.tsx
+import { jsx } from "react/jsx-runtime";
+var sizeMap = {
+  sm: "max-w-[860px]",
+  md: "max-w-[1040px]",
+  lg: "max-w-[1200px]",
+  xl: "max-w-[1380px]"
+};
+function Container({
+  size = "lg",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("mx-auto w-full px-5 sm:px-8", sizeMap[size], className), ...props });
+}
+
+// src/components/Text.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var sizeCls = {
+  sm: "text-[13px] leading-[1.65]",
+  md: "text-[15px] leading-[1.75]",
+  lg: "text-[17px] leading-[1.75]"
+};
+function Text({
+  as = "p",
+  tone = "default",
+  size = "md",
+  className,
+  ...props
+}) {
+  const Comp = as;
+  return /* @__PURE__ */ jsx2(
+    Comp,
+    {
+      className: cn(
+        sizeCls[size],
+        tone === "muted" ? "text-[rgb(var(--muted))]" : "text-[rgb(var(--fg))]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/Button.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var sizeCls2 = {
+  sm: "h-9 px-3 text-[13px]",
+  md: "h-10 px-4 text-[14px]",
+  lg: "h-12 px-5 text-[15px]"
+};
+function Button({
+  variant = "solid",
+  size = "md",
+  className,
+  ...props
+}) {
+  const base = "uikit-focus inline-flex items-center justify-center gap-2 rounded-[var(--r-sm)] font-semibold transition-[transform,background-color,box-shadow,opacity] duration-[var(--dur-2)] ease-[var(--ease)] active:scale-[0.98]";
+  const solid = "bg-[rgb(var(--accent))] text-white shadow-[var(--shadow-sm)] hover:shadow-[var(--shadow-md)]";
+  const soft = "bg-[rgba(var(--accent),0.12)] text-[rgb(var(--fg))] hover:bg-[rgba(var(--accent),0.18)]";
+  const ghost = "bg-transparent text-[rgb(var(--fg))] hover:bg-[rgba(0,0,0,0.06)] dark:hover:bg-[rgba(255,255,255,0.08)]";
+  const v = variant === "solid" ? solid : variant === "soft" ? soft : ghost;
+  return /* @__PURE__ */ jsx3("button", { className: cn(base, sizeCls2[size], v, className), ...props });
+}
+
+// src/components/Card.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Card({
+  tone = "default",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: cn(
+        "rounded-[var(--r-lg)] border border-[rgb(var(--border))] bg-[rgb(var(--surface))]",
+        tone === "elevated" ? "shadow-[var(--shadow-md)]" : "shadow-[var(--shadow-sm)]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/Glass.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var blurCls = {
+  sm: "backdrop-blur-[10px]",
+  md: "backdrop-blur-[16px]",
+  lg: "backdrop-blur-[22px]"
+};
+function Glass({
+  blur = "md",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: cn(
+        "rounded-[var(--r-lg)] border",
+        "bg-[var(--glass)] border-[var(--glass-border)] shadow-[var(--shadow-sm)]",
+        blurCls[blur],
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/Navbar.tsx
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+function Navbar({
+  brand = /* @__PURE__ */ jsx6("span", { className: "font-semibold", children: "Brand" }),
+  items = [],
+  right,
+  className
+}) {
+  return /* @__PURE__ */ jsx6("div", { className: cn("sticky top-0 z-50 py-3", className), children: /* @__PURE__ */ jsx6(Container, { size: "xl", children: /* @__PURE__ */ jsx6(Glass, { className: "px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6", children: [
+      /* @__PURE__ */ jsx6("div", { className: "flex items-center gap-2", children: brand }),
+      /* @__PURE__ */ jsx6("nav", { className: "hidden md:flex items-center gap-4 text-[13px] text-[rgb(var(--muted))]", children: items.map((it) => /* @__PURE__ */ jsx6(
+        "a",
+        {
+          href: it.href,
+          className: "uikit-focus rounded-[var(--r-sm)] px-2 py-1 hover:text-[rgb(var(--fg))] transition-colors",
+          children: it.label
+        },
+        it.href
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx6("div", { className: "flex items-center gap-2", children: right })
+  ] }) }) }) });
+}
+
+// src/components/Hero.tsx
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+function Hero({
+  eyebrow,
+  title,
+  description,
+  actions,
+  className
+}) {
+  return /* @__PURE__ */ jsx7("section", { className: cn("py-14 sm:py-20", className), children: /* @__PURE__ */ jsx7(Container, { size: "xl", children: /* @__PURE__ */ jsxs2("div", { className: "max-w-[840px]", children: [
+    eyebrow ? /* @__PURE__ */ jsx7("div", { className: "text-[12px] tracking-[0.18em] uppercase text-[rgb(var(--muted))]", children: eyebrow }) : null,
+    /* @__PURE__ */ jsx7("h1", { className: "mt-3 text-[40px] leading-[1.06] sm:text-[56px] font-[750] tracking-[-0.02em]", children: title }),
+    description ? /* @__PURE__ */ jsx7(Text, { className: "mt-4 max-w-[680px]", tone: "muted", size: "lg", children: description }) : null,
+    actions ? /* @__PURE__ */ jsx7("div", { className: "mt-7 flex flex-wrap items-center gap-3", children: actions }) : null
+  ] }) }) });
+}
+
+// src/components/Section.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var sizeMap2 = {
+  md: "py-10 sm:py-14",
+  lg: "py-14 sm:py-20",
+  xl: "py-16 sm:py-24"
+};
+function Section({
+  size = "lg",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8("section", { className: cn(sizeMap2[size], className), ...props, children: /* @__PURE__ */ jsx8(Container, { size: "xl", children }) });
+}
+export {
+  Button,
+  Card,
+  Container,
+  Glass,
+  Hero,
+  Navbar,
+  Section,
+  Text,
+  cn
+};

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@vrugd/ui",
+  "version": "0.1.1",
+  "private": false,
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": ["**/*.css"],
+  "files": ["dist", "src"],
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.10",
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.5.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean",
+    "prepublishOnly": "bun run build"
+  }
+}

package/src/components/Button.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { cn } from "../utils/cn";
+
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: "solid" | "soft" | "ghost";
+  size?: "sm" | "md" | "lg";
+};
+
+const sizeCls: Record<NonNullable<ButtonProps["size"]>, string> = {
+  sm: "h-9 px-3 text-[13px]",
+  md: "h-10 px-4 text-[14px]",
+  lg: "h-12 px-5 text-[15px]"
+};
+
+export function Button({
+  variant = "solid",
+  size = "md",
+  className,
+  ...props
+}: ButtonProps): React.JSX.Element {
+  const base =
+    "uikit-focus inline-flex items-center justify-center gap-2 rounded-[var(--r-sm)] font-semibold " +
+    "transition-[transform,background-color,box-shadow,opacity] duration-[var(--dur-2)] ease-[var(--ease)] " +
+    "active:scale-[0.98]";
+
+  const solid =
+    "bg-[rgb(var(--accent))] text-white shadow-[var(--shadow-sm)] hover:shadow-[var(--shadow-md)]";
+  const soft =
+    "bg-[rgba(var(--accent),0.12)] text-[rgb(var(--fg))] hover:bg-[rgba(var(--accent),0.18)]";
+  const ghost =
+    "bg-transparent text-[rgb(var(--fg))] hover:bg-[rgba(0,0,0,0.06)] dark:hover:bg-[rgba(255,255,255,0.08)]";
+
+  const v = variant === "solid" ? solid : variant === "soft" ? soft : ghost;
+
+  return <button className={cn(base, sizeCls[size], v, className)} {...props} />;
+}

package/src/components/Card.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { cn } from "../utils/cn";
+
+export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
+  tone?: "default" | "elevated";
+};
+
+export function Card({
+  tone = "default",
+  className,
+  ...props
+}: CardProps): React.JSX.Element {
+  return (
+    <div
+      className={cn(
+        "rounded-[var(--r-lg)] border border-[rgb(var(--border))] bg-[rgb(var(--surface))]",
+        tone === "elevated" ? "shadow-[var(--shadow-md)]" : "shadow-[var(--shadow-sm)]",
+        className
+      )}
+      {...props}
+    />
+  );
+}

package/src/components/Container.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { cn } from "../utils/cn";
+
+export type ContainerProps = React.HTMLAttributes<HTMLDivElement> & {
+  size?: "sm" | "md" | "lg" | "xl";
+};
+
+const sizeMap: Record<NonNullable<ContainerProps["size"]>, string> = {
+  sm: "max-w-[860px]",
+  md: "max-w-[1040px]",
+  lg: "max-w-[1200px]",
+  xl: "max-w-[1380px]"
+};
+
+export function Container({
+  size = "lg",
+  className,
+  ...props
+}: ContainerProps): React.JSX.Element {
+  return (
+    <div className={cn("mx-auto w-full px-5 sm:px-8", sizeMap[size], className)} {...props} />
+  );
+}

package/src/components/Glass.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { cn } from "../utils/cn";
+
+export type GlassProps = React.HTMLAttributes<HTMLDivElement> & {
+  blur?: "sm" | "md" | "lg";
+};
+
+const blurCls: Record<NonNullable<GlassProps["blur"]>, string> = {
+  sm: "backdrop-blur-[10px]",
+  md: "backdrop-blur-[16px]",
+  lg: "backdrop-blur-[22px]"
+};
+
+export function Glass({
+  blur = "md",
+  className,
+  ...props
+}: GlassProps): React.JSX.Element {
+  return (
+    <div
+      className={cn(
+        "rounded-[var(--r-lg)] border",
+        "bg-[var(--glass)] border-[var(--glass-border)] shadow-[var(--shadow-sm)]",
+        blurCls[blur],
+        className
+      )}
+      {...props}
+    />
+  );
+}

package/src/components/Hero.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { Container } from "./Container";
+import { Text } from "./Text";
+import { cn } from "../utils/cn";
+
+export type HeroProps = {
+  eyebrow?: string;
+  title: string;
+  description?: string;
+  actions?: React.ReactNode;
+  className?: string;
+};
+
+export function Hero({
+  eyebrow,
+  title,
+  description,
+  actions,
+  className
+}: HeroProps): React.JSX.Element {
+  return (
+    <section className={cn("py-14 sm:py-20", className)}>
+      <Container size="xl">
+        <div className="max-w-[840px]">
+          {eyebrow ? (
+            <div className="text-[12px] tracking-[0.18em] uppercase text-[rgb(var(--muted))]">
+              {eyebrow}
+            </div>
+          ) : null}
+
+          <h1 className="mt-3 text-[40px] leading-[1.06] sm:text-[56px] font-[750] tracking-[-0.02em]">
+            {title}
+          </h1>
+
+          {description ? (
+            <Text className="mt-4 max-w-[680px]" tone="muted" size="lg">
+              {description}
+            </Text>
+          ) : null}
+
+          {actions ? <div className="mt-7 flex flex-wrap items-center gap-3">{actions}</div> : null}
+        </div>
+      </Container>
+    </section>
+  );
+}

package/src/components/Navbar.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { cn } from "../utils/cn";
+import { Container } from "./Container";
+import { Glass } from "./Glass";
+
+export type NavItem = { label: string; href: string };
+
+export type NavbarProps = {
+  brand?: React.ReactNode;
+  items?: NavItem[];
+  right?: React.ReactNode;
+  className?: string;
+};
+
+export function Navbar({
+  brand = <span className="font-semibold">Brand</span>,
+  items = [],
+  right,
+  className
+}: NavbarProps): React.JSX.Element {
+  return (
+    <div className={cn("sticky top-0 z-50 py-3", className)}>
+      <Container size="xl">
+        <Glass className="px-4 py-3">
+          <div className="flex items-center justify-between gap-4">
+            <div className="flex items-center gap-6">
+              <div className="flex items-center gap-2">{brand}</div>
+              <nav className="hidden md:flex items-center gap-4 text-[13px] text-[rgb(var(--muted))]">
+                {items.map((it) => (
+                  <a
+                    key={it.href}
+                    href={it.href}
+                    className="uikit-focus rounded-[var(--r-sm)] px-2 py-1 hover:text-[rgb(var(--fg))] transition-colors"
+                  >
+                    {it.label}
+                  </a>
+                ))}
+              </nav>
+            </div>
+            <div className="flex items-center gap-2">{right}</div>
+          </div>
+        </Glass>
+      </Container>
+    </div>
+  );
+}

package/src/components/Section.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { cn } from "../utils/cn";
+import { Container } from "./Container";
+
+export type SectionProps = React.HTMLAttributes<HTMLElement> & {
+  size?: "md" | "lg" | "xl";
+};
+
+const sizeMap: Record<NonNullable<SectionProps["size"]>, string> = {
+  md: "py-10 sm:py-14",
+  lg: "py-14 sm:py-20",
+  xl: "py-16 sm:py-24"
+};
+
+export function Section({
+  size = "lg",
+  className,
+  children,
+  ...props
+}: SectionProps): React.JSX.Element {
+  return (
+    <section className={cn(sizeMap[size], className)} {...props}>
+      <Container size="xl">{children}</Container>
+    </section>
+  );
+}

package/src/components/Text.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { cn } from "../utils/cn";
+
+export type TextProps = React.HTMLAttributes<HTMLElement> & {
+  as?: "p" | "span" | "div";
+  tone?: "default" | "muted";
+  size?: "sm" | "md" | "lg";
+};
+
+const sizeCls: Record<NonNullable<TextProps["size"]>, string> = {
+  sm: "text-[13px] leading-[1.65]",
+  md: "text-[15px] leading-[1.75]",
+  lg: "text-[17px] leading-[1.75]"
+};
+
+export function Text({
+  as = "p",
+  tone = "default",
+  size = "md",
+  className,
+  ...props
+}: TextProps): React.JSX.Element {
+  const Comp = as;
+  return (
+    <Comp
+      className={cn(
+        sizeCls[size],
+        tone === "muted" ? "text-[rgb(var(--muted))]" : "text-[rgb(var(--fg))]",
+        className
+      )}
+      {...props}
+    />
+  );
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+export * from "./utils/cn";
+
+export * from "./components/Container";
+export * from "./components/Text";
+export * from "./components/Button";
+export * from "./components/Card";
+export * from "./components/Glass";
+export * from "./components/Navbar";
+export * from "./components/Hero";
+export * from "./components/Section";

package/src/styles/globals.css

@@ -0,0 +1,18 @@
+@import "./tokens.css";
+
+* { box-sizing: border-box; }
+html, body { height: 100%; }
+
+body {
+  margin: 0;
+  color: rgb(var(--fg));
+  background: rgb(var(--bg));
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+.uikit-focus:focus-visible {
+  outline: 3px solid rgba(var(--accent), 0.35);
+  outline-offset: 2px;
+  border-radius: var(--r-sm);
+}

package/src/styles/tokens.css

@@ -0,0 +1,35 @@
+:root {
+  --bg: 255 255 255;
+  --fg: 17 17 17;
+  --muted: 113 113 122;
+
+  --surface: 255 255 255;
+  --border: 228 228 231;
+
+  --accent: 10 132 255;
+
+  --r-sm: 12px;
+  --r-md: 16px;
+  --r-lg: 22px;
+
+  --shadow-sm: 0 1px 0 rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06);
+  --shadow-md: 0 1px 0 rgba(0,0,0,0.06), 0 16px 40px rgba(0,0,0,0.10);
+
+  --glass: rgba(255, 255, 255, 0.70);
+  --glass-border: rgba(255, 255, 255, 0.55);
+
+  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --dur-2: 240ms;
+}
+
+[data-theme="dark"] {
+  --bg: 10 10 11;
+  --fg: 245 245 246;
+  --muted: 161 161 170;
+
+  --surface: 18 18 20;
+  --border: 39 39 42;
+
+  --glass: rgba(20, 20, 22, 0.60);
+  --glass-border: rgba(255, 255, 255, 0.10);
+}

package/src/utils/cn.ts

@@ -0,0 +1,3 @@
+export function cn(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(" ");
+}