@a4ui/core 0.1.0

package/dist/ui/Pagination.d.ts

@@ -0,0 +1,9 @@
+import { JSX } from 'solid-js';
+interface PaginationProps {
+    page: number;
+    totalPages: number;
+    onChange: (page: number) => void;
+    summary?: JSX.Element;
+}
+export declare function Pagination(props: PaginationProps): JSX.Element;
+export {};

package/dist/ui/Popover.d.ts

@@ -0,0 +1,7 @@
+import { JSX, ParentProps } from 'solid-js';
+interface PopoverProps extends ParentProps {
+    trigger: JSX.Element;
+    class?: string;
+}
+export declare function Popover(props: PopoverProps): JSX.Element;
+export {};

package/dist/ui/Progress.d.ts

@@ -0,0 +1,9 @@
+import { JSX } from 'solid-js';
+interface ProgressProps {
+    value: number;
+    max?: number;
+    label?: string;
+    class?: string;
+}
+export declare function Progress(props: ProgressProps): JSX.Element;
+export {};

package/dist/ui/RadioGroup.d.ts

@@ -0,0 +1,15 @@
+import { JSX } from 'solid-js';
+export interface RadioOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface RadioGroupProps {
+    value: string;
+    onChange: (value: string) => void;
+    options: RadioOption[];
+    label?: string;
+    class?: string;
+}
+export declare function RadioGroup(props: RadioGroupProps): JSX.Element;
+export {};

package/dist/ui/SegmentedControl.d.ts

@@ -0,0 +1,13 @@
+import { JSX } from 'solid-js';
+export interface SegmentedOption {
+    value: string;
+    label: string;
+}
+interface SegmentedControlProps {
+    value: string;
+    onChange: (value: string) => void;
+    options: SegmentedOption[];
+    class?: string;
+}
+export declare function SegmentedControl(props: SegmentedControlProps): JSX.Element;
+export {};

package/dist/ui/Select.d.ts

@@ -0,0 +1,8 @@
+import { JSX, ParentProps } from 'solid-js';
+interface SelectProps extends ParentProps, Omit<JSX.SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'> {
+    value: string;
+    onChange: (value: string) => void;
+    class?: string;
+}
+export declare function Select(props: SelectProps): JSX.Element;
+export {};

package/dist/ui/Separator.d.ts

@@ -0,0 +1,7 @@
+import { JSX } from 'solid-js';
+interface SeparatorProps {
+    orientation?: 'horizontal' | 'vertical';
+    class?: string;
+}
+export declare function Separator(props: SeparatorProps): JSX.Element;
+export {};

package/dist/ui/Skeleton.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'solid-js';
+interface SkeletonProps {
+    class?: string;
+}
+export declare function Skeleton(props: SkeletonProps): JSX.Element;
+export {};

package/dist/ui/Slider.d.ts

@@ -0,0 +1,12 @@
+import { JSX } from 'solid-js';
+interface SliderProps {
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+    class?: string;
+}
+export declare function Slider(props: SliderProps): JSX.Element;
+export {};

package/dist/ui/Spinner.d.ts

@@ -0,0 +1,7 @@
+import { JSX } from 'solid-js';
+interface SpinnerProps {
+    class?: string;
+    label?: string;
+}
+export declare function Spinner(props: SpinnerProps): JSX.Element;
+export {};

package/dist/ui/Stat.d.ts

@@ -0,0 +1,16 @@
+import { JSX } from 'solid-js';
+export type StatTone = 'primary' | 'success' | 'danger' | 'neutral';
+interface StatProps {
+    label: string;
+    /** Numeric value — count-up tweens toward it on mount and on change. */
+    value: number;
+    /** Format the (animating) number for display. Default: rounded integer. */
+    format?: (n: number) => string;
+    icon?: JSX.Element;
+    tone?: StatTone;
+    /** Entrance stagger delay in seconds (for a row of stats). */
+    delay?: number;
+    class?: string;
+}
+export declare function Stat(props: StatProps): JSX.Element;
+export {};

package/dist/ui/Switch.d.ts

@@ -0,0 +1,10 @@
+import { JSX } from 'solid-js';
+interface SwitchProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    label?: string;
+    disabled?: boolean;
+    class?: string;
+}
+export declare function Switch(props: SwitchProps): JSX.Element;
+export {};

package/dist/ui/Table.d.ts

@@ -0,0 +1,11 @@
+import { JSX, ParentProps } from 'solid-js';
+interface TableProps extends ParentProps {
+    class?: string;
+}
+export declare function Table(props: TableProps): JSX.Element;
+export declare function TableHead(props: TableProps): JSX.Element;
+export declare function TableBody(props: TableProps): JSX.Element;
+export declare function TableRow(props: TableProps): JSX.Element;
+export declare function TableHeadCell(props: TableProps): JSX.Element;
+export declare function TableCell(props: TableProps): JSX.Element;
+export {};

package/dist/ui/Tabs.d.ts

@@ -0,0 +1,14 @@
+import { JSX } from 'solid-js';
+export interface TabItem {
+    value: string;
+    label: string;
+    content: JSX.Element;
+}
+interface TabsProps {
+    items: TabItem[];
+    value: string;
+    onChange: (value: string) => void;
+    class?: string;
+}
+export declare function Tabs(props: TabsProps): JSX.Element;
+export {};

package/dist/ui/Textarea.d.ts

@@ -0,0 +1,8 @@
+import { JSX } from 'solid-js';
+interface TextareaProps extends Omit<JSX.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onInput'> {
+    value: string;
+    onInput: (value: string) => void;
+    class?: string;
+}
+export declare function Textarea(props: TextareaProps): JSX.Element;
+export {};

package/dist/ui/Toast.d.ts

@@ -0,0 +1,9 @@
+import { JSX } from 'solid-js';
+export type ToastTone = 'success' | 'error' | 'info';
+export declare const toast: {
+    success: (title: string, description?: string) => void;
+    error: (title: string, description?: string) => void;
+    info: (title: string, description?: string) => void;
+};
+/** Mount once near the app root — hosts the toast viewport. */
+export declare function Toaster(): JSX.Element;

package/dist/ui/Toggle.d.ts

@@ -0,0 +1,8 @@
+import { JSX, ParentProps } from 'solid-js';
+interface ToggleProps extends ParentProps {
+    pressed: boolean;
+    onChange: (pressed: boolean) => void;
+    class?: string;
+}
+export declare function Toggle(props: ToggleProps): JSX.Element;
+export {};

package/dist/ui/ToggleGroup.d.ts

@@ -0,0 +1,13 @@
+import { JSX } from 'solid-js';
+export interface ToggleGroupOption {
+    value: string;
+    label: string;
+}
+interface ToggleGroupProps {
+    value: string | null;
+    onChange: (value: string | null) => void;
+    options: ToggleGroupOption[];
+    class?: string;
+}
+export declare function ToggleGroup(props: ToggleGroupProps): JSX.Element;
+export {};

package/dist/ui/Tooltip.d.ts

@@ -0,0 +1,7 @@
+import { JSX, ParentProps } from 'solid-js';
+interface TooltipProps extends ParentProps {
+    content: JSX.Element;
+    class?: string;
+}
+export declare function Tooltip(props: TooltipProps): JSX.Element;
+export {};

package/dist/ui/VirtualList.d.ts

@@ -0,0 +1,15 @@
+import { Accessor, JSX } from 'solid-js';
+interface VirtualListProps<T> {
+    /** The full data set. Only the visible slice is rendered. */
+    each: T[];
+    /** Estimated row size in px — a number, or a per-index function. */
+    estimateSize: number | ((index: number) => number);
+    /** Rows to render beyond the viewport on each side. Default 10. */
+    overscan?: number;
+    /** Scroll-container classes. MUST constrain height (e.g. "h-[65vh]"). */
+    class?: string;
+    /** Row renderer. `index` is an accessor so it stays reactive as rows recycle. */
+    children: (item: T, index: Accessor<number>) => JSX.Element;
+}
+export declare function VirtualList<T>(props: VirtualListProps<T>): JSX.Element;
+export {};

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@a4ui/core",
+  "version": "0.1.0",
+  "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
+  "type": "module",
+  "license": "MIT",
+  "author": "Luis Alfredo Rivera Acuña <1alfredorivera@gmail.com>",
+  "homepage": "https://a4uikit.github.io/a4ui/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/A4uikit/a4ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/A4uikit/a4ui/issues"
+  },
+  "keywords": [
+    "solid-js",
+    "solidjs",
+    "components",
+    "component-library",
+    "design-system",
+    "ui-kit",
+    "tailwindcss",
+    "kobalte",
+    "glassmorphism"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "preset.js"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./preset": "./preset.js",
+    "./styles.css": "./dist/styles.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "preview": "vite --config vite.preview.config.ts",
+    "preview:build": "vite build --config vite.preview.config.ts",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
+    "test:report": "playwright show-report",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.9.13"
+  },
+  "dependencies": {
+    "@kobalte/core": "^0.13.12",
+    "@tanstack/solid-virtual": "^3.13.33",
+    "clsx": "^2.1.1",
+    "lucide-solid": "^1.23.0",
+    "solid-motionone": "^1.0.4",
+    "solid-transition-group": "^0.3.0",
+    "tailwind-merge": "^3.6.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.61.1",
+    "eslint-plugin-solid": "^0.14.5",
+    "playwright-core": "^1.61.1",
+    "tailwindcss": "^3.4.19",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.3.0",
+    "vite-plugin-solid": "^2.11.12"
+  }
+}

package/preset.js

@@ -0,0 +1,166 @@
+// A4ui — Spatial Glass Tailwind preset.
+//
+// Spread into a consumer's Tailwind config so the semantic color names resolve
+// to the CSS variables shipped in `@a4ui/core/styles.css`, Tailwind alpha modifiers
+// (`bg-primary/90`, `ring-emerald-500/30`, …) keep working, and the glass
+// surface classes (.card / .bg-glass / .tile-glass / .glow-edge) are generated
+// by Tailwind — so ALL surface styling decisions live here, not in a hand-rolled
+// stylesheet. (The CSS variables, motion keyframes and starfield still ship as
+// `@a4ui/core/styles.css` — vars and @keyframes can't be Tailwind utilities.)
+//
+//   import a4ui from '@a4ui/core/preset'
+//   export default {
+//     presets: [a4ui],
+//     content: ['./src/**/*.{ts,tsx}', './node_modules/@a4ui/core/dist/**/*.js'],
+//   }
+
+import plugin from 'tailwindcss/plugin'
+
+// Frosted "space glass" surfaces. addComponents so they tree-shake like any
+// utility (emitted only when the class is found in scanned content — a4ui's own
+// components use them, so scanning ./node_modules/@a4ui/core/dist covers it).
+const glass = plugin(({ addComponents }) => {
+  addComponents({
+    // ---- Primary glass surface ----
+    '.card': {
+      position: 'relative',
+      background: 'hsl(var(--card) / 0.55)',
+      backdropFilter: 'blur(8px) saturate(150%)',
+      WebkitBackdropFilter: 'blur(8px) saturate(150%)',
+      border: '1px solid hsl(var(--foreground) / 0.16)',
+      borderRadius: 'var(--radius-xl, 1rem)',
+      boxShadow: '0 1px 2px hsl(var(--shadow) / 0.05), 0 4px 12px hsl(var(--shadow) / 0.1)',
+      transition: 'transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .2s ease',
+    },
+    "[data-theme='light'] .card": {
+      background: 'hsl(var(--card) / 0.72)',
+      border: '1px solid hsl(var(--border))',
+    },
+
+    // Cursor-following border glow (SpaceBackground updates --mx/--my on move).
+    '.card.glow-edge::before': {
+      content: "''",
+      position: 'absolute',
+      inset: '0',
+      borderRadius: 'inherit',
+      padding: '1px',
+      background:
+        'radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), hsl(199 89% 65% / .9), hsl(217 91% 60% / .25) 45%, transparent 70%)',
+      WebkitMask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
+      WebkitMaskComposite: 'xor',
+      maskComposite: 'exclude',
+      opacity: '0',
+      transition: 'opacity .35s ease',
+      pointerEvents: 'none',
+    },
+    '.card.glow-edge:hover::before': { opacity: '1' },
+    '@media (prefers-reduced-motion: reduce)': {
+      '.card.glow-edge::before': { display: 'none' },
+    },
+    // Light theme: the cyan glow is faint on white — thicker + more vivid.
+    "[data-theme='light'] .card.glow-edge::before": {
+      padding: '1.5px',
+      background:
+        'radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), hsl(199 98% 48% / 1), hsl(275 90% 58% / 0.55) 42%, transparent 72%)',
+    },
+
+    // ---- Floating overlay glass (menus, modals, drawers, toasts) ----
+    '.bg-glass': {
+      background: 'hsl(var(--card) / 0.72)',
+      backdropFilter: 'blur(14px) saturate(160%)',
+      WebkitBackdropFilter: 'blur(14px) saturate(160%)',
+      border: '1px solid hsl(var(--foreground) / 0.14)',
+    },
+    "[data-theme='light'] .bg-glass": {
+      background: 'hsl(var(--card) / 0.85)',
+      border: '1px solid hsl(var(--border))',
+    },
+
+    // ---- Nested tile inside an existing .card — tint only, no second blur ----
+    '.tile-glass': {
+      background: 'hsl(var(--foreground) / 0.055)',
+      border: '1px solid hsl(var(--foreground) / 0.09)',
+    },
+    "[data-theme='light'] .tile-glass": {
+      background: 'hsl(var(--foreground) / 0.035)',
+      borderColor: 'hsl(var(--foreground) / 0.09)',
+    },
+
+    // ---- CALM MODE (html.calm — visual effects OFF, or ?calm=1): opaque
+    //      surfaces, no blur. High-contrast / low-power / contrast-checkable. ----
+    'html.calm .glow-edge::before': { display: 'none !important' },
+    'html.calm .badge': {
+      backgroundColor: 'hsl(var(--muted)) !important',
+      color: 'hsl(var(--foreground)) !important',
+      '--tw-ring-color': 'hsl(var(--border)) !important',
+    },
+    'html.calm .card, html.calm .bg-glass': {
+      background: 'hsl(var(--card))',
+      backdropFilter: 'none',
+      WebkitBackdropFilter: 'none',
+    },
+    'html.calm .tile-glass': {
+      background: 'hsl(var(--muted))',
+      borderColor: 'hsl(var(--border))',
+    },
+
+    // ---- Fallback when backdrop-filter isn't applied (old browsers, macOS
+    //      "Reduce transparency"): make the glass opaque enough to read. ----
+    '@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))': {
+      '.card': { background: 'hsl(var(--card) / 0.92)' },
+      "[data-theme='light'] .card": { background: 'hsl(var(--card) / 0.96)' },
+      '.bg-glass': { background: 'hsl(var(--card) / 0.95)' },
+      "[data-theme='light'] .bg-glass": { background: 'hsl(var(--card) / 0.97)' },
+    },
+    '@media (prefers-reduced-transparency: reduce)': {
+      '.card': { background: 'hsl(var(--card) / 0.92)' },
+      "[data-theme='light'] .card": { background: 'hsl(var(--card) / 0.96)' },
+      '.bg-glass': { background: 'hsl(var(--card) / 0.95)' },
+      "[data-theme='light'] .bg-glass": { background: 'hsl(var(--card) / 0.97)' },
+    },
+  })
+})
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  theme: {
+    extend: {
+      colors: {
+        background: 'hsl(var(--background) / <alpha-value>)',
+        foreground: 'hsl(var(--foreground) / <alpha-value>)',
+        card: {
+          DEFAULT: 'hsl(var(--card) / <alpha-value>)',
+          foreground: 'hsl(var(--card-foreground) / <alpha-value>)',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
+          foreground: 'hsl(var(--muted-foreground) / <alpha-value>)',
+        },
+        border: 'hsl(var(--border) / <alpha-value>)',
+        input: 'hsl(var(--input) / <alpha-value>)',
+        primary: {
+          DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
+          foreground: 'hsl(var(--primary-foreground) / <alpha-value>)',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
+          foreground: 'hsl(var(--accent-foreground) / <alpha-value>)',
+        },
+        ring: 'hsl(var(--ring) / <alpha-value>)',
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
+          foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)',
+        },
+        'data-emit': 'hsl(var(--data-emit) / <alpha-value>)',
+        'data-received': 'hsl(var(--data-received) / <alpha-value>)',
+        'data-net': 'hsl(var(--data-net) / <alpha-value>)',
+      },
+      fontFamily: {
+        sans: ['"IBM Plex Sans"', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+        mono: ['"IBM Plex Mono"', 'ui-monospace', 'monospace'],
+      },
+      borderRadius: { xl: '1rem' },
+    },
+  },
+  plugins: [glass],
+}