@skiddph/prui 0.3.0 → 0.4.0

package/dist/core/button.d.ts

@@ -1,14 +1,19 @@
 import { PropsMeta } from './props-meta';
+import { SurfaceProps } from './surface';
 import * as React from "react";
-export type ButtonVariant = "primary" | "default" | "ghost" | "danger";
+export type ButtonVariant = "primary" | "default" | "ghost" | "danger" | "outline" | "soft" | "link";
 export type ButtonSize = "sm" | "md" | "lg" | "icon";
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, SurfaceProps {
     variant?: ButtonVariant;
     size?: ButtonSize;
     /** Render the single child instead of a button element. */
     asChild?: boolean;
     /** Show a spinner and disable the button. */
     loading?: boolean;
+    /** Strip the skin: keep structure and behavior, style it yourself. */
+    unstyled?: boolean;
+    /** Stretch to the parent's full width. */
+    fullWidth?: boolean;
 }
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export declare const buttonPropsMeta: PropsMeta;

package/dist/core/button.js

@@ -1,58 +1,71 @@
-import { jsx as r, jsxs as b, Fragment as g } from "react/jsx-runtime";
-import * as n from "react";
-import { Loader2 as h } from "lucide-react";
+import { jsx as n, jsxs as j, Fragment as B } from "react/jsx-runtime";
+import * as o from "react";
+import { Loader2 as R } from "lucide-react";
 import { cn as i } from "./cn.js";
-const v = {
-  primary: "bg-[var(--prui-brand)] text-[var(--prui-brand-fg)] hover:brightness-110 active:brightness-95",
-  default: "bg-[var(--prui-raise)] text-[var(--prui-fg)] border border-[var(--prui-line)] hover:border-[var(--prui-dim)]",
-  ghost: "bg-transparent text-[var(--prui-fg)] hover:bg-[var(--prui-raise)]",
-  danger: "bg-[var(--prui-danger)] text-white hover:brightness-110 active:brightness-95"
-}, x = {
+import { resolveSurface as z, withSurface as E } from "./surface.js";
+const F = {
+  primary: "bg-[var(--prui-s-bg,var(--prui-brand))] text-[var(--prui-s-fg,var(--prui-brand-fg))] hover:brightness-110 active:brightness-95",
+  default: "bg-[var(--prui-s-bg,var(--prui-raise))] text-[var(--prui-s-fg,var(--prui-fg))] border border-[var(--prui-line)] hover:border-[var(--prui-dim)]",
+  ghost: "bg-[var(--prui-s-bg,transparent)] text-[var(--prui-s-fg,var(--prui-fg))] hover:bg-[var(--prui-raise)]",
+  danger: "bg-[var(--prui-s-bg,var(--prui-danger))] text-[var(--prui-s-fg,#fff)] hover:brightness-110 active:brightness-95",
+  outline: "bg-[var(--prui-s-bg,transparent)] text-[var(--prui-s-fg,var(--prui-brand))] border border-[var(--prui-s-border,var(--prui-brand))] hover:bg-[var(--prui-brand)]/10",
+  soft: "bg-[var(--prui-brand)]/12 text-[var(--prui-s-fg,var(--prui-brand))] hover:bg-[var(--prui-brand)]/20",
+  link: "bg-transparent text-[var(--prui-s-fg,var(--prui-brand))] underline-offset-4 hover:underline p-0"
+}, L = {
   sm: "h-7 px-2.5 text-xs gap-1.5",
   md: "h-9 px-3.5 text-sm gap-2",
   lg: "h-11 px-5 text-base gap-2",
   icon: "h-9 w-9 p-0"
-}, y = n.forwardRef(
-  ({ className: d, variant: p = "default", size: c = "md", asChild: u = !1, loading: e = !1, disabled: m, children: t, ...o }, f) => {
-    const s = i(
+}, M = o.forwardRef(
+  ({ className: u, style: d, variant: p = "default", size: f = "md", asChild: c = !1, loading: e = !1, disabled: m, unstyled: b, fullWidth: g, bg: v, fg: h, radius: x, texture: y, textureColor: N, elevation: w, children: r, ...s }, S) => {
+    const C = z({ bg: v, fg: h, radius: x, texture: y, textureColor: N, elevation: w }), k = i(
       "prui-button inline-flex items-center justify-center whitespace-nowrap font-medium select-none",
       "transition-[filter,background-color,border-color] duration-150 outline-none cursor-pointer",
       "focus-visible:ring-2 focus-visible:ring-[var(--prui-brand)] focus-visible:ring-offset-1",
       "disabled:pointer-events-none disabled:opacity-50",
-      v[p],
-      x[c],
-      d
-    );
-    if (u && n.isValidElement(t)) {
-      const a = t;
-      return n.cloneElement(a, {
-        className: i(s, a.props.className),
-        ...o,
-        children: e ? /* @__PURE__ */ r(l, {}) : a.props.children
+      g && "w-full",
+      "rounded-[var(--prui-s-radius,var(--prui-radius))]",
+      b ? [] : [F[p], L[f]],
+      u
+    ), t = E(k, d, C);
+    if (c && o.isValidElement(r)) {
+      const a = r;
+      return o.cloneElement(a, {
+        className: i(t.className, a.props.className),
+        style: { ...t.style ?? {}, ...a.props.style },
+        ...s,
+        children: e ? /* @__PURE__ */ n(l, {}) : a.props.children
       });
     }
-    return /* @__PURE__ */ r("button", { ref: f, className: s, disabled: m || e, "data-loading": e || void 0, ...o, children: e ? /* @__PURE__ */ b(g, { children: [
-      /* @__PURE__ */ r(l, {}),
-      t
-    ] }) : t });
+    return /* @__PURE__ */ n("button", { ref: S, className: t.className, style: t.style, disabled: m || e, "data-loading": e || void 0, ...s, children: e ? /* @__PURE__ */ j(B, { children: [
+      /* @__PURE__ */ n(l, {}),
+      r
+    ] }) : r });
   }
 );
-y.displayName = "Button";
+M.displayName = "Button";
 function l() {
-  return /* @__PURE__ */ r(h, { className: "h-4 w-4 animate-spin", "aria-hidden": !0 });
+  return /* @__PURE__ */ n(R, { className: "h-4 w-4 animate-spin", "aria-hidden": !0 });
 }
-const B = {
+const A = {
   name: "Button",
   props: [
-    { name: "variant", type: "'primary' | 'default' | 'ghost' | 'danger'", default: "'default'", control: "select", options: ["primary", "default", "ghost", "danger"] },
+    { name: "variant", type: "'primary' | 'default' | 'ghost' | 'danger' | 'outline' | 'soft' | 'link'", default: "'default'", control: "select", options: ["primary", "default", "ghost", "danger", "outline", "soft", "link"] },
     { name: "size", type: "'sm' | 'md' | 'lg' | 'icon'", default: "'md'", control: "select", options: ["sm", "md", "lg", "icon"] },
     { name: "asChild", type: "boolean", default: "false", control: "boolean" },
     { name: "loading", type: "boolean", default: "false", control: "boolean" },
     { name: "disabled", type: "boolean", default: "false", control: "boolean" },
+    { name: "unstyled", type: "boolean", default: "false", control: "boolean" },
+    { name: "fullWidth", type: "boolean", default: "false", control: "boolean" },
+    { name: "bg", type: "string (CSS color or var)", default: "theme default", control: "text" },
+    { name: "fg", type: "string (CSS color)", default: "theme default", control: "text" },
+    { name: "radius", type: "'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | length", default: "var(--prui-radius)", control: "text" },
+    { name: "texture", type: "'none' | 'dots' | 'grid' | 'stripes' | 'diagonal'", default: "'none'", control: "select", options: ["none", "dots", "grid", "stripes", "diagonal"] },
+    { name: "elevation", type: "'none' | 'sm' | 'md' | 'lg'", default: "'none'", control: "select", options: ["none", "sm", "md", "lg"] },
     { name: "children", type: "ReactNode", default: null, control: "text" }
   ]
 };
 export {
-  y as Button,
-  B as buttonPropsMeta
+  M as Button,
+  A as buttonPropsMeta
 };

package/dist/core/card.d.ts

@@ -1,12 +1,19 @@
+import { SurfaceProps } from './surface';
 import { PropsMeta } from './props-meta';
 import * as React from "react";
 export type BadgeVariant = "default" | "brand" | "ok" | "warn" | "danger" | "outline";
-export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, SurfaceProps {
     variant?: BadgeVariant;
 }
 export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
 export declare const badgePropsMeta: PropsMeta;
-export declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export type CardVariant = "default" | "outline" | "ghost" | "elevated";
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, SurfaceProps {
+    variant?: CardVariant;
+    /** Strip the skin: keep the box, style everything yourself. */
+    unstyled?: boolean;
+}
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
 export declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
 export declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/core/card.js

@@ -1,85 +1,100 @@
 import { jsx as t } from "react/jsx-runtime";
 import * as n from "react";
+import { resolveSurface as g, withSurface as x } from "./surface.js";
 import { cn as d } from "./cn.js";
-const g = {
+const w = {
   default: "bg-[var(--prui-raise)] text-[var(--prui-fg)] border-transparent",
   brand: "bg-[var(--prui-brand)]/15 text-[var(--prui-brand)] border-transparent",
   ok: "bg-[var(--prui-ok)]/15 text-[var(--prui-ok)] border-transparent",
   warn: "bg-[var(--prui-warn)]/15 text-[var(--prui-warn)] border-transparent",
   danger: "bg-[var(--prui-danger)]/15 text-[var(--prui-danger)] border-transparent",
   outline: "bg-transparent text-[var(--prui-fg)] border-[var(--prui-line)]"
-}, x = n.forwardRef(
-  ({ className: a, variant: e = "default", ...r }, i) => /* @__PURE__ */ t(
-    "span",
-    {
-      ref: i,
-      "data-variant": e,
-      className: d(
-        "prui-badge inline-flex items-center gap-1 rounded-[var(--prui-radius-full)] border px-2 py-0.5",
+}, y = n.forwardRef(
+  ({ className: a, style: e, variant: r = "default", bg: o, fg: i, radius: l, texture: p, textureColor: u, elevation: c, ...m }, f) => {
+    const v = g({ bg: o, fg: i, radius: l, texture: p, textureColor: u, elevation: c }), s = x(
+      d(
+        "prui-badge inline-flex items-center gap-1 rounded-[var(--prui-s-radius,var(--prui-radius-full))] border px-2 py-0.5",
         "text-xs font-medium whitespace-nowrap",
-        g[e],
+        w[r],
         a
       ),
-      ...r
-    }
-  )
+      e,
+      v
+    );
+    return /* @__PURE__ */ t(
+      "span",
+      {
+        ref: f,
+        "data-variant": r,
+        style: s.style,
+        className: s.className,
+        ...m
+      }
+    );
+  }
 );
-x.displayName = "Badge";
-const B = {
+y.displayName = "Badge";
+const z = {
   name: "Badge",
   props: [
     { name: "variant", type: "'default' | 'brand' | 'ok' | 'warn' | 'danger' | 'outline'", default: "'default'", control: "select", options: ["default", "brand", "ok", "warn", "danger", "outline"] },
     { name: "children", type: "ReactNode", default: null, control: "text" }
   ]
-}, b = n.forwardRef(
-  ({ className: a, ...e }, r) => /* @__PURE__ */ t(
-    "div",
-    {
-      ref: r,
-      className: d(
-        "prui-card rounded-[var(--prui-radius)] border border-[var(--prui-line)] bg-[var(--prui-surface)]",
+}, N = {
+  default: "border border-[var(--prui-line)]",
+  outline: "border border-[var(--prui-s-border,var(--prui-brand))] bg-transparent",
+  ghost: "border border-transparent bg-transparent",
+  elevated: "border border-[var(--prui-line)] prui-elev-md"
+}, C = n.forwardRef(
+  ({ className: a, style: e, variant: r = "default", unstyled: o, bg: i, fg: l, radius: p, texture: u, textureColor: c, elevation: m, ...f }, v) => {
+    const s = g({ bg: i, fg: l, radius: p, texture: u, textureColor: c, elevation: m }), b = x(
+      d(
+        "prui-card rounded-[var(--prui-s-radius,var(--prui-radius))]",
+        o ? [] : [N[r]],
         a
       ),
-      ...e
-    }
-  )
+      e,
+      s
+    );
+    return /* @__PURE__ */ t("div", { ref: v, className: b.className, style: b.style, ...f });
+  }
 );
-b.displayName = "Card";
-const w = n.forwardRef(
+C.displayName = "Card";
+const h = n.forwardRef(
   ({ className: a, ...e }, r) => /* @__PURE__ */ t("div", { ref: r, className: d("prui-card-header flex flex-col gap-1 p-4", a), ...e })
 );
-w.displayName = "CardHeader";
-const N = n.forwardRef(
+h.displayName = "CardHeader";
+const R = n.forwardRef(
   ({ className: a, ...e }, r) => /* @__PURE__ */ t("h3", { ref: r, className: d("prui-card-title text-base font-semibold text-[var(--prui-fg)]", a), ...e })
 );
-N.displayName = "CardTitle";
-const y = n.forwardRef(
+R.displayName = "CardTitle";
+const k = n.forwardRef(
   ({ className: a, ...e }, r) => /* @__PURE__ */ t("p", { ref: r, className: d("prui-card-description text-sm text-[var(--prui-dim)]", a), ...e })
 );
-y.displayName = "CardDescription";
-const C = n.forwardRef(
+k.displayName = "CardDescription";
+const j = n.forwardRef(
   ({ className: a, ...e }, r) => /* @__PURE__ */ t("div", { ref: r, className: d("prui-card-content p-4 pt-0", a), ...e })
 );
-C.displayName = "CardContent";
-const h = n.forwardRef(
+j.displayName = "CardContent";
+const S = n.forwardRef(
   ({ className: a, ...e }, r) => /* @__PURE__ */ t("div", { ref: r, className: d("prui-card-footer flex items-center p-4 pt-0", a), ...e })
 );
-h.displayName = "CardFooter";
-const F = {
+S.displayName = "CardFooter";
+const D = {
   name: "Card",
   props: [
     { name: "children", type: "ReactNode", default: null, control: "text" },
     { name: "className", type: "string", default: "undefined", control: "text" }
   ]
-}, R = {
+}, A = {
   sm: "h-6 w-6 text-[10px]",
   md: "h-8 w-8 text-xs",
   lg: "h-12 w-12 text-base"
-}, k = n.forwardRef(
-  ({ className: a, src: e, alt: r, fallback: i, size: s = "md", ...l }, p) => {
-    const [u, c] = n.useState(!1), f = e && !u, m = i ?? (r ? r.split(/\s+/).slice(0, 2).map((v) => {
-      var o;
-      return ((o = v[0]) == null ? void 0 : o.toUpperCase()) ?? "";
+}, B = n.forwardRef(
+  ({ className: a, src: e, alt: r, fallback: o, size: i = "md", ...l }, p) => {
+    const [u, c] = n.useState(!1), m = e && !u, f = o ?? (r ? r.split(/\s+/).slice(0, 2).map((v) => {
+      var s;
+      return ((s = v[0]) == null ? void 0 : s.toUpperCase()) ?? "";
     }).join("") : "");
     return /* @__PURE__ */ t(
       "span",
@@ -88,17 +103,17 @@ const F = {
         className: d(
           "prui-avatar relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden",
           "rounded-[var(--prui-radius-full)] bg-[var(--prui-raise)] text-[var(--prui-dim)] font-medium",
-          R[s],
+          A[i],
           a
         ),
         ...l,
-        children: f ? /* @__PURE__ */ t("img", { src: e, alt: r ?? "", className: "h-full w-full object-cover", onError: () => c(!0) }) : m
+        children: m ? /* @__PURE__ */ t("img", { src: e, alt: r ?? "", className: "h-full w-full object-cover", onError: () => c(!0) }) : f
       }
     );
   }
 );
-k.displayName = "Avatar";
-const M = {
+B.displayName = "Avatar";
+const H = {
   name: "Avatar",
   props: [
     { name: "src", type: "string", default: "undefined", control: "text" },
@@ -108,15 +123,15 @@ const M = {
   ]
 };
 export {
-  k as Avatar,
-  x as Badge,
-  b as Card,
-  C as CardContent,
-  y as CardDescription,
-  h as CardFooter,
-  w as CardHeader,
-  N as CardTitle,
-  M as avatarPropsMeta,
-  B as badgePropsMeta,
-  F as cardPropsMeta
+  B as Avatar,
+  y as Badge,
+  C as Card,
+  j as CardContent,
+  k as CardDescription,
+  S as CardFooter,
+  h as CardHeader,
+  R as CardTitle,
+  H as avatarPropsMeta,
+  z as badgePropsMeta,
+  D as cardPropsMeta
 };

package/dist/core/index.d.ts

@@ -1,5 +1,6 @@
 /** PRUI primitives layer: standard composition building blocks plus cn(). */
 export { cn } from './cn';
+export { resolveSurface, withSurface, type SurfaceProps, type SurfaceRadius, type SurfaceTexture, type SurfaceElevation } from './surface';
 export type { PropsMeta, PropMeta, PropControl } from './props-meta';
 export { Button, buttonPropsMeta, type ButtonProps, type ButtonVariant, type ButtonSize, } from './button';
 export { Input, inputPropsMeta, Textarea, textareaPropsMeta, type InputProps, type TextareaProps, } from './input';

package/dist/core/input.d.ts

@@ -1,8 +1,21 @@
+import { SurfaceProps } from './surface';
 import { PropsMeta } from './props-meta';
 import * as React from "react";
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+declare const inputSizeClasses: {
+    readonly sm: "h-8 px-2.5";
+    readonly md: "h-9 px-3";
+    readonly lg: "h-11 px-4 text-base";
+};
+export type InputSize = keyof typeof inputSizeClasses;
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, SurfaceProps {
+    /** Control height step; the native numeric size attribute is not exposed. */
+    size?: InputSize;
+    /** Visual variant: outlined (default) or filled. */
+    variant?: "default" | "filled";
+}
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export declare const inputPropsMeta: PropsMeta;
 export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export declare const textareaPropsMeta: PropsMeta;
+export {};

package/dist/core/input.js

@@ -1,31 +1,46 @@
-import { jsx as r } from "react/jsx-runtime";
-import * as n from "react";
-import { cn as o } from "./cn.js";
-const l = "prui-input w-full bg-[var(--prui-background)] text-[var(--prui-fg)] placeholder:text-[var(--prui-dim)] border border-[var(--prui-line)] rounded-[var(--prui-radius)] px-3 h-9 text-sm outline-none transition-colors focus:border-[var(--prui-brand)] focus:ring-2 focus:ring-[var(--prui-brand)]/30 disabled:opacity-50 disabled:cursor-not-allowed", u = n.forwardRef(
-  ({ className: e, type: t = "text", ...a }, p) => /* @__PURE__ */ r("input", { ref: p, type: t, className: o(l, e), ...a })
+import { jsx as o } from "react/jsx-runtime";
+import * as l from "react";
+import { resolveSurface as v, withSurface as h } from "./surface.js";
+import { cn as s } from "./cn.js";
+const u = "prui-f-control prui-input w-full bg-[var(--prui-s-bg,var(--prui-background))] text-[var(--prui-s-fg,var(--prui-fg))] placeholder:text-[var(--prui-dim)] border border-[var(--prui-line)] rounded-[var(--prui-s-radius,var(--prui-radius))] text-sm outline-none transition-colors focus:border-[var(--prui-brand)] focus:ring-2 focus:ring-[var(--prui-brand)]/30 disabled:opacity-50 disabled:cursor-not-allowed", w = {
+  sm: "h-8 px-2.5",
+  md: "h-9 px-3",
+  lg: "h-11 px-4 text-base"
+}, N = l.forwardRef(
+  ({ className: e, style: t, type: r = "text", size: a = "md", variant: i = "default", bg: p, fg: d, radius: c, texture: m, textureColor: f, elevation: x, ...b }, g) => {
+    const y = v({ bg: p, fg: d, radius: c, texture: m, textureColor: f, elevation: x }), n = h(
+      s(u, w[a], i === "filled" && "bg-[var(--prui-s-bg,var(--prui-raise))] border-transparent", e),
+      t,
+      y
+    );
+    return /* @__PURE__ */ o("input", { ref: g, type: r, className: n.className, style: n.style, ...b });
+  }
 );
-u.displayName = "Input";
-const c = {
+N.displayName = "Input";
+const S = {
   name: "Input",
   props: [
     { name: "type", type: "string", default: "'text'", control: "select", options: ["text", "password", "email", "number", "search"] },
+    { name: "size", type: "'sm' | 'md' | 'lg'", default: "'md'", control: "select", options: ["sm", "md", "lg"] },
+    { name: "variant", type: "'default' | 'filled'", default: "'default'", control: "select", options: ["default", "filled"] },
     { name: "value", type: "string", default: null, control: "text" },
     { name: "placeholder", type: "string", default: "undefined", control: "text" },
     { name: "disabled", type: "boolean", default: "false", control: "boolean" },
     { name: "onChange", type: "(e) => void", default: null, control: "none" }
   ]
-}, i = n.forwardRef(
-  ({ className: e, ...t }, a) => /* @__PURE__ */ r(
+}, z = l.forwardRef(
+  ({ className: e, style: t, ...r }, a) => /* @__PURE__ */ o(
     "textarea",
     {
       ref: a,
-      className: o(l, "h-auto min-h-20 py-2 resize-y", e),
-      ...t
+      style: t,
+      className: s(u, "h-auto min-h-20 py-2 resize-y", e),
+      ...r
     }
   )
 );
-i.displayName = "Textarea";
-const m = {
+z.displayName = "Textarea";
+const T = {
   name: "Textarea",
   props: [
     { name: "value", type: "string", default: null, control: "textarea" },
@@ -35,8 +50,8 @@ const m = {
   ]
 };
 export {
-  u as Input,
-  i as Textarea,
-  c as inputPropsMeta,
-  m as textareaPropsMeta
+  N as Input,
+  z as Textarea,
+  S as inputPropsMeta,
+  T as textareaPropsMeta
 };

package/dist/core/surface.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+/**
+ * Surface: an opt-in flexibility layer shared by the primitives. A surface
+ * accepts any CSS color or var() for background and foreground, a radius
+ * step (or raw length), a subtle background texture, and an elevation step.
+ * Nothing here changes the default look: every value degrades to the
+ * current theme's tokens through var() fallbacks inside the components.
+ */
+export type SurfaceRadius = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | (string & {});
+export type SurfaceTexture = "none" | "dots" | "grid" | "stripes" | "diagonal";
+export type SurfaceElevation = "none" | "sm" | "md" | "lg";
+export interface SurfaceProps {
+    /** Any CSS background value: color, gradient, or var(). */
+    bg?: string;
+    /** Any CSS color for text or icons on this surface. */
+    fg?: string;
+    /** Radius step name, or a raw CSS length like "12px". */
+    radius?: SurfaceRadius;
+    /** Subtle background pattern drawn with the texture color. */
+    texture?: SurfaceTexture;
+    /** Pattern color; defaults to the theme's --prui-line token. */
+    textureColor?: string;
+    /** Box shadow step. */
+    elevation?: SurfaceElevation;
+}
+export interface SurfaceResult {
+    style?: React.CSSProperties;
+    className?: string;
+}
+/**
+ * Resolve surface props into inline custom properties plus texture and
+ * elevation classes. Returns undefined when nothing is set, so components
+ * keep their original render path.
+ */
+export declare function resolveSurface(p?: SurfaceProps): SurfaceResult | undefined;
+/** Merge a surface result into a component's className and style. */
+export declare function withSurface(className: string, style: React.CSSProperties | undefined, surface: SurfaceResult | undefined): {
+    className: string;
+    style?: React.CSSProperties;
+};

package/dist/core/surface.js

@@ -0,0 +1,37 @@
+import "react";
+const s = {
+  none: "0px",
+  xs: "2px",
+  sm: "var(--prui-radius-1)",
+  md: "var(--prui-radius)",
+  lg: "var(--prui-radius-3)",
+  xl: "18px",
+  full: "9999px"
+}, u = {
+  sm: "prui-elev-sm",
+  md: "prui-elev-md",
+  lg: "prui-elev-lg"
+};
+function l(e) {
+  if (!e) return;
+  const i = {}, r = [];
+  if (e.bg && (i["--prui-s-bg"] = e.bg), e.fg && (i["--prui-s-fg"] = e.fg), e.radius && (i["--prui-s-radius"] = s[e.radius] ?? e.radius), e.textureColor && (i["--prui-tex-c"] = e.textureColor), e.texture && e.texture !== "none" && r.push(`prui-tex-${e.texture}`), e.elevation && e.elevation !== "none") {
+    const t = u[e.elevation];
+    t && r.push(t);
+  }
+  if (!(!r.length && !Object.keys(i).length))
+    return {
+      style: Object.keys(i).length ? i : void 0,
+      className: r.length ? r.join(" ") : void 0
+    };
+}
+function o(e, i, r) {
+  return r ? {
+    className: [e, r.className].filter(Boolean).join(" "),
+    style: { ...i, ...r.style }
+  } : { className: e, style: i };
+}
+export {
+  l as resolveSurface,
+  o as withSurface
+};