@rdna/radiants 0.1.1 → 0.1.3

package/components/core/NumberField/NumberField.tsx

@@ -0,0 +1,224 @@
+'use client';
+
+import React from 'react';
+import { NumberField as BaseNumberField } from '@base-ui/react/number-field';
+import { cva } from 'class-variance-authority';
+import { Plus, Minus } from '../../../icons/generated';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface RootProps {
+  children: React.ReactNode;
+  className?: string;
+  /** The default value (uncontrolled) */
+  defaultValue?: number;
+  /** The controlled value */
+  value?: number;
+  /** Callback when the value changes */
+  onValueChange?: (value: number | null, eventDetails: unknown) => void;
+  /** Minimum allowed value */
+  min?: number;
+  /** Maximum allowed value */
+  max?: number;
+  /** Step increment */
+  step?: number;
+  /** Whether the field is disabled */
+  disabled?: boolean;
+  /** Whether the field is required */
+  required?: boolean;
+  /** Whether the field is read-only */
+  readOnly?: boolean;
+  /** Name for form submission */
+  name?: string;
+}
+
+interface InputProps {
+  className?: string;
+  placeholder?: string;
+}
+
+interface IncrementProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+interface DecrementProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+interface GroupProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface ScrubAreaProps {
+  children: React.ReactNode;
+  className?: string;
+  /** Orientation for scrubbing direction */
+  direction?: 'horizontal' | 'vertical';
+}
+
+interface ScrubAreaCursorProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+// ============================================================================
+// CVA Variants
+// ============================================================================
+
+const numberInputVariants = cva(
+  `font-sans bg-page text-main
+   placeholder:text-mute text-center
+   focus:bg-card
+   focus-visible:outline-none
+   disabled:opacity-50 disabled:cursor-not-allowed
+   h-8 px-2 text-sm w-full min-w-0`
+);
+
+const stepButtonVariants = cva(
+  `flex items-center justify-center
+   bg-accent border-line
+   text-accent-inv font-sans text-sm
+   hover:bg-inv hover:text-flip
+   focus-visible:outline-none
+   disabled:opacity-50 disabled:cursor-not-allowed
+   h-8 w-8 shrink-0 cursor-pointer select-none`
+);
+
+// ============================================================================
+// Components
+// ============================================================================
+
+/**
+ * Root container for the number field.
+ * Manages value state and passes config to child components via Base UI context.
+ */
+function Root({
+  children,
+  className = '',
+  defaultValue,
+  value,
+  onValueChange,
+  min,
+  max,
+  step,
+  disabled,
+  required,
+  readOnly,
+  name,
+}: RootProps): React.ReactNode {
+  return (
+    <BaseNumberField.Root
+      data-rdna="numberfield"
+      defaultValue={defaultValue}
+      value={value}
+      onValueChange={onValueChange}
+      min={min}
+      max={max}
+      step={step}
+      disabled={disabled}
+      required={required}
+      readOnly={readOnly}
+      name={name}
+      className={className || undefined}
+    >
+      {children}
+    </BaseNumberField.Root>
+  );
+}
+
+/**
+ * The numeric input element.
+ */
+function Input({ className = '', placeholder }: InputProps): React.ReactNode {
+  return (
+    <BaseNumberField.Input
+      className={numberInputVariants({ className })}
+      placeholder={placeholder}
+    />
+  );
+}
+
+/**
+ * Increment button — increases value by step.
+ */
+function Increment({ children, className = '' }: IncrementProps): React.ReactNode {
+  return (
+    <BaseNumberField.Increment
+      className={stepButtonVariants({ className: `border-l ${className}`.trim() })}
+    >
+      {children ?? <Plus size={14} />}
+    </BaseNumberField.Increment>
+  );
+}
+
+/**
+ * Decrement button — decreases value by step.
+ */
+function Decrement({ children, className = '' }: DecrementProps): React.ReactNode {
+  return (
+    <BaseNumberField.Decrement
+      className={stepButtonVariants({ className: `border-r ${className}`.trim() })}
+    >
+      {children ?? <Minus size={14} />}
+    </BaseNumberField.Decrement>
+  );
+}
+
+/**
+ * Groups the decrement, input, and increment into a single visual unit.
+ */
+function Group({ children, className = '' }: GroupProps): React.ReactNode {
+  return (
+    <BaseNumberField.Group
+      className={`flex items-center pixel-rounded-xs ${className}`.trim()}
+    >
+      {children}
+    </BaseNumberField.Group>
+  );
+}
+
+/**
+ * Scrub area — allows click-and-drag to adjust value.
+ */
+function ScrubArea({ children, className = '', direction }: ScrubAreaProps): React.ReactNode {
+  return (
+    <BaseNumberField.ScrubArea
+      direction={direction}
+      className={`cursor-ew-resize ${className}`.trim()}
+    >
+      {children}
+    </BaseNumberField.ScrubArea>
+  );
+}
+
+/**
+ * Custom cursor rendered inside the scrub area during scrubbing.
+ */
+function ScrubAreaCursor({ children, className = '' }: ScrubAreaCursorProps): React.ReactNode {
+  return (
+    <BaseNumberField.ScrubAreaCursor className={className || undefined}>
+      {children}
+    </BaseNumberField.ScrubAreaCursor>
+  );
+}
+
+// ============================================================================
+// Export
+// ============================================================================
+
+export const NumberField = {
+  Root,
+  Input,
+  Increment,
+  Decrement,
+  Group,
+  ScrubArea,
+  ScrubAreaCursor,
+};
+
+export default NumberField;

package/components/core/Pattern/Pattern.meta.ts

@@ -0,0 +1,77 @@
+import { defineComponentMeta } from "@rdna/preview/define-component-meta";
+
+type PatternName =
+  | "solid" | "empty" | "checkerboard" | "checkerboard-alt"
+  | "pinstripe-v" | "pinstripe-v-wide" | "pinstripe-h" | "pinstripe-h-wide"
+  | "diagonal" | "diagonal-dots" | "diagonal-right"
+  | "grid" | "brick" | "shelf" | "columns" | "stagger" | "diamond"
+  | "confetti" | "weave" | "brick-diagonal" | "brick-diagonal-alt"
+  | "caret" | "trellis" | "arch" | "cross" | "sawtooth" | "chevron"
+  | "basket" | "tweed" | "dust" | "mist"
+  | "scatter" | "scatter-alt" | "scatter-pair"
+  | "rain" | "rain-cluster" | "spray" | "spray-grid" | "spray-mixed"
+  | "fill-75" | "fill-75-rows" | "fill-75-sweep" | "fill-75-offset"
+  | "fill-75-inv" | "fill-75-bars"
+  | "fill-81" | "fill-88" | "fill-88-alt" | "fill-94" | "fill-94-alt" | "fill-97";
+
+interface PatternProps {
+  pat?: PatternName;
+  color?: string;
+  bg?: string;
+  scale?: 1 | 2 | 3 | 4;
+}
+
+export const PatternMeta = defineComponentMeta<PatternProps>()({
+  name: "Pattern",
+  description:
+    "Renders a recolorable 8x8 tiling pattern from the System 6 pattern library. Uses CSS mask-image so any color paints through the pattern shape.",
+  props: {
+    pat: {
+      type: "enum",
+      values: [
+        "solid", "empty", "checkerboard", "checkerboard-alt",
+        "pinstripe-v", "pinstripe-v-wide", "pinstripe-h", "pinstripe-h-wide",
+        "diagonal", "diagonal-dots", "diagonal-right",
+        "grid", "brick", "shelf", "columns", "stagger", "diamond",
+        "confetti", "weave", "brick-diagonal", "brick-diagonal-alt",
+        "caret", "trellis", "arch", "cross", "sawtooth", "chevron",
+        "basket", "tweed", "dust", "mist",
+        "scatter", "scatter-alt", "scatter-pair",
+        "rain", "rain-cluster", "spray", "spray-grid", "spray-mixed",
+        "fill-75", "fill-75-rows", "fill-75-sweep", "fill-75-offset",
+        "fill-75-inv", "fill-75-bars",
+        "fill-81", "fill-88", "fill-88-alt", "fill-94", "fill-94-alt", "fill-97",
+      ],
+      description: "Pattern name from the registry",
+    },
+    color: {
+      type: "string",
+      description: "Dot/foreground color. Any CSS color value. Defaults to var(--color-main)",
+    },
+    bg: {
+      type: "string",
+      description: "Background color behind the pattern. Defaults to transparent (overlay mode)",
+    },
+    scale: {
+      type: "enum",
+      values: [1, 2, 3, 4],
+      default: 1,
+      description: "Scale multiplier: 1=8px, 2=16px, 3=24px, 4=32px",
+    },
+  },
+  slots: {
+    children: { description: "Content rendered on top of the pattern (when using bg mode)" },
+  },
+  examples: [
+    { name: "Basic checkerboard", code: '<Pattern pat="checkerboard" className="w-20 h-20" />' },
+    { name: "Colored diagonal", code: '<Pattern pat="diagonal" color="var(--color-accent)" className="w-20 h-20" />' },
+    { name: "With background", code: '<Pattern pat="brick" color="white" bg="var(--color-accent)" className="w-20 h-20" />' },
+    { name: "Scaled up", code: '<Pattern pat="grid" scale={2} className="w-20 h-20" />' },
+  ],
+  registry: {
+    category: "layout",
+    tags: ["pattern", "texture", "pixel", "fill"],
+    renderMode: "inline",
+    exampleProps: { pat: "checkerboard" },
+  },
+});

package/components/core/Pattern/Pattern.schema.json

@@ -0,0 +1,105 @@
+{
+  "name": "Pattern",
+  "description": "Renders a recolorable 8x8 tiling pattern from the System 6 pattern library. Uses CSS mask-image so any color paints through the pattern shape.",
+  "props": {
+    "pat": {
+      "type": "enum",
+      "values": [
+        "solid",
+        "empty",
+        "checkerboard",
+        "checkerboard-alt",
+        "pinstripe-v",
+        "pinstripe-v-wide",
+        "pinstripe-h",
+        "pinstripe-h-wide",
+        "diagonal",
+        "diagonal-dots",
+        "diagonal-right",
+        "grid",
+        "brick",
+        "shelf",
+        "columns",
+        "stagger",
+        "diamond",
+        "confetti",
+        "weave",
+        "brick-diagonal",
+        "brick-diagonal-alt",
+        "caret",
+        "trellis",
+        "arch",
+        "cross",
+        "sawtooth",
+        "chevron",
+        "basket",
+        "tweed",
+        "dust",
+        "mist",
+        "scatter",
+        "scatter-alt",
+        "scatter-pair",
+        "rain",
+        "rain-cluster",
+        "spray",
+        "spray-grid",
+        "spray-mixed",
+        "fill-75",
+        "fill-75-rows",
+        "fill-75-sweep",
+        "fill-75-offset",
+        "fill-75-inv",
+        "fill-75-bars",
+        "fill-81",
+        "fill-88",
+        "fill-88-alt",
+        "fill-94",
+        "fill-94-alt",
+        "fill-97"
+      ],
+      "description": "Pattern name from the registry"
+    },
+    "color": {
+      "type": "string",
+      "description": "Dot/foreground color. Any CSS color value. Defaults to var(--color-main)"
+    },
+    "bg": {
+      "type": "string",
+      "description": "Background color behind the pattern. Defaults to transparent (overlay mode)"
+    },
+    "scale": {
+      "type": "enum",
+      "values": [
+        1,
+        2,
+        3,
+        4
+      ],
+      "default": 1,
+      "description": "Scale multiplier: 1=8px, 2=16px, 3=24px, 4=32px"
+    }
+  },
+  "slots": {
+    "children": {
+      "description": "Content rendered on top of the pattern (when using bg mode)"
+    }
+  },
+  "examples": [
+    {
+      "name": "Basic checkerboard",
+      "code": "<Pattern pat=\"checkerboard\" className=\"w-20 h-20\" />"
+    },
+    {
+      "name": "Colored diagonal",
+      "code": "<Pattern pat=\"diagonal\" color=\"var(--color-accent)\" className=\"w-20 h-20\" />"
+    },
+    {
+      "name": "With background",
+      "code": "<Pattern pat=\"brick\" color=\"white\" bg=\"var(--color-accent)\" className=\"w-20 h-20\" />"
+    },
+    {
+      "name": "Scaled up",
+      "code": "<Pattern pat=\"grid\" scale={2} className=\"w-20 h-20\" />"
+    }
+  ]
+}

package/components/core/Pattern/Pattern.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import React from 'react';
+
+export interface PatternProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Pattern name from the registry */
+  pat: string;
+  /** Dot/foreground color — any CSS color value. Defaults to var(--color-main) */
+  color?: string;
+  /** Background color behind the pattern. Defaults to transparent (overlay mode) */
+  bg?: string;
+  /** Scale multiplier: 1 = 8px, 2 = 16px, 3 = 24px, 4 = 32px */
+  scale?: 1 | 2 | 3 | 4;
+}
+
+const SCALE_CLASSES: Record<number, string> = {
+  2: 'rdna-pat--2x',
+  3: 'rdna-pat--3x',
+  4: 'rdna-pat--4x',
+};
+
+export function Pattern({
+  pat,
+  color,
+  bg,
+  scale,
+  className = '',
+  style,
+  ...rest
+}: PatternProps) {
+  const patClass = `rdna-pat--${pat}`;
+  const scaleClass = scale ? SCALE_CLASSES[scale] ?? '' : '';
+
+  if (bg) {
+    // Two-tone: bg div + masked fg div
+    return (
+      <div
+        className={className}
+        style={{ position: 'relative', backgroundColor: bg, ...style }}
+        {...rest}
+      >
+        <div
+          className={`rdna-pat ${patClass} ${scaleClass}`}
+          style={{
+            position: 'absolute',
+            inset: 0,
+            ...(color ? { '--pat-color': color, backgroundColor: color } as React.CSSProperties : {}),
+          }}
+        />
+      </div>
+    );
+  }
+
+  // Single layer: pattern overlay (transparent bg)
+  return (
+    <div
+      className={`rdna-pat ${patClass} ${scaleClass} ${className}`}
+      style={{
+        ...(color ? { '--pat-color': color, backgroundColor: color } as React.CSSProperties : {}),
+        ...style,
+      }}
+      {...rest}
+    />
+  );
+}

package/components/core/Popover/Popover.meta.ts

@@ -0,0 +1,44 @@
+import { defineComponentMeta } from "@rdna/preview/define-component-meta";
+
+interface PopoverProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: string;
+  position?: string;
+}
+
+export const PopoverMeta = defineComponentMeta<PopoverProps>()({
+  name: "Popover",
+  description:
+    "Floating panel anchored to a trigger element. Supports keyboard navigation and focus management.",
+  subcomponents: ["PopoverTrigger", "PopoverContent"],
+  props: {
+    open: {
+      type: "boolean",
+    },
+    defaultOpen: {
+      type: "boolean",
+    },
+    onOpenChange: {
+      type: "string",
+      description: "Callback fired when popover opens or closes",
+    },
+    position: {
+      type: "string",
+      description: "Preferred popover placement relative to trigger",
+    },
+  },
+  slots: {},
+  examples: [
+    {
+      name: "Basic popover",
+      code: "<Popover.Root>\n  <PopoverTrigger>Open</PopoverTrigger>\n  <PopoverContent>Popover content here</PopoverContent>\n</Popover.Root>",
+    },
+  ],
+  registry: {
+    category: "overlay",
+    tags: ["popup", "tooltip", "float"],
+    renderMode: "custom",
+    controlledProps: ["position"],
+  },
+});

package/components/core/Popover/Popover.schema.json

@@ -1,46 +1,31 @@
 {
   "name": "Popover",
-  "description": "Floating content panel anchored to a trigger element. Supports controlled and uncontrolled states with keyboard accessibility and click-outside dismissal.",
-  "subcomponents": ["PopoverTrigger", "PopoverContent"],
+  "description": "Floating panel anchored to a trigger element. Supports keyboard navigation and focus management.",
+  "subcomponents": [
+    "PopoverTrigger",
+    "PopoverContent"
+  ],
   "props": {
     "open": {
-      "type": "boolean",
-      "description": "Controlled open state for the popover"
+      "type": "boolean"
     },
     "defaultOpen": {
-      "type": "boolean",
-      "default": false,
-      "description": "Default open state for uncontrolled usage"
+      "type": "boolean"
     },
     "onOpenChange": {
-      "type": "function",
-      "description": "Callback when open state changes"
+      "type": "string",
+      "description": "Callback fired when popover opens or closes"
     },
     "position": {
-      "type": "enum",
-      "values": ["top", "bottom", "left", "right"],
-      "default": "bottom",
-      "description": "Position of the popover relative to the trigger"
+      "type": "string",
+      "description": "Preferred popover placement relative to trigger"
     }
   },
-  "slots": {
-    "children": {
-      "description": "Popover subcomponents (PopoverTrigger, PopoverContent)"
-    }
-  },
-  "variants": {},
+  "slots": {},
   "examples": [
     {
       "name": "Basic popover",
-      "code": "<Popover>\n  <PopoverTrigger asChild>\n    <Button>Open Popover</Button>\n  </PopoverTrigger>\n  <PopoverContent>\n    <p>Popover content goes here.</p>\n  </PopoverContent>\n</Popover>"
-    },
-    {
-      "name": "Controlled popover",
-      "code": "<Popover open={isOpen} onOpenChange={setIsOpen}>\n  <PopoverTrigger asChild>\n    <Button>Info</Button>\n  </PopoverTrigger>\n  <PopoverContent>\n    <p>Some helpful information.</p>\n  </PopoverContent>\n</Popover>"
-    },
-    {
-      "name": "Popover with position",
-      "code": "<Popover position=\"right\">\n  <PopoverTrigger asChild>\n    <Button variant=\"outline\">More Options</Button>\n  </PopoverTrigger>\n  <PopoverContent align=\"start\">\n    <p>Additional options appear to the right.</p>\n  </PopoverContent>\n</Popover>"
+      "code": "<Popover.Root>\n  <PopoverTrigger>Open</PopoverTrigger>\n  <PopoverContent>Popover content here</PopoverContent>\n</Popover.Root>"
     }
   ]
 }