@toyu-ui/define 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Juro Kapsiar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,79 @@
+<p align="center">
+  <h1><span color="blue">T</span><span color="cyan">Y</span>UI</h1>
+</p>
+
+<p align="center">
+  <strong>framework-neutral component library</strong>
+</p>
+
+<p align="center">
+  <a href="https://github.com/jurokapsiar/tyui"><img src="https://img.shields.io/badge/version-0.0.0-blue?style=flat-square" alt="Version" /></a>
+  <a href="https://yarnpkg.com/"><img src="https://img.shields.io/badge/Yarn-4.5.0-2C8EBB?style=flat-square&logo=yarn&logoColor=white" alt="Yarn" /></a>
+  <a href="https://nx.dev/"><img src="https://img.shields.io/badge/Nx-22.6.5-143055?style=flat-square&logo=nx&logoColor=white" alt="Nx" /></a>
+  <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-6.0.3-3178C6?style=flat-square&logo=typescript&logoColor=white" alt="TypeScript" /></a>
+  <a href="https://vite.dev/"><img src="https://img.shields.io/badge/Vite-7.1.11-646CFF?style=flat-square&logo=vite&logoColor=white" alt="Vite" /></a>
+  <a href="https://storybook.js.org/"><img src="https://img.shields.io/badge/Storybook-10.3.5-FF4785?style=flat-square&logo=storybook&logoColor=white" alt="Storybook" /></a>
+  <a href="https://lit.dev/"><img src="https://img.shields.io/badge/Lit-3.3.2-324FFF?style=flat-square&logo=lit&logoColor=white" alt="Lit" /></a>
+  <a href="https://www.solidjs.com/"><img src="https://img.shields.io/badge/Solid-1.9.13-2C4F7C?style=flat-square&logo=solid&logoColor=white" alt="Solid" /></a>
+  <a href="https://vitest.dev/"><img src="https://img.shields.io/badge/Vitest-4.1.5-6E9F18?style=flat-square&logo=vitest&logoColor=white" alt="Vitest" /></a>
+  <a href="https://playwright.dev/"><img src="https://img.shields.io/badge/Playwright-1.59.1-2EAD33?style=flat-square&logo=playwright&logoColor=white" alt="Playwright" /></a>
+</p>
+
+<p align="center">
+  <a href="#availability">Availability</a> &middot;
+  <a href="#architecture">Architecture</a> &middot;
+  <a href="#commands">Commands</a> &middot;
+  <a href="#specs-and-decisions">Specs And Decisions</a>
+</p>
+
+---
+
+**TYUI** is a framework-neutral component library. It is an experiment, not intended to be used by anybody really.
+
+Codex interviewed me, asked bunch of interesting questions about design systems, component libraries, accessibility. Used [APG patterns](https://www.w3.org/WAI/ARIA/apg/patterns/) and [Fluent UI React v9](https://react.fluentui.dev/) as a reference for behaviors, API and other aspects. Then implemented the specs.
+
+The library is intended to be AI firendly - agents should have access to all underlying information, component intnets, usage patterns and best practices.
+
+Desing is proposed to be a separate layer. It should be possible to generate the design layer based on the standardized [design.md](https://github.com/google-labs-code/design.md/blob/main/docs/spec.md).
+
+**Warning:** This is 100% AI generated and not polished. Visuals and user experience will be rough. As part of the experiment I might also want to find out if agents can fine tune the behaviors and visuals of the components so that they can be considered well crafted. But for now they are not.
+
+## Availability
+
+Storybook is deployed as [Github page](https://jurokapsiar.github.io/tyui/).
+Packages are not yet available - they might be if I decide to use the library in my personal projects.
+
+## Architecture
+
+- `libs/core`: plain TypeScript behavior, state machines, and accessibility logic.
+- `libs/elements`: native Custom Element implementations.
+- `libs/define`: opt-in custom-element registration functions.
+- `libs/solid`: Solid JSX typing and optional thin wrappers.
+- `libs/testing`: shared testing helpers.
+- `apps/solid-example`: Solid + Vite consumer example.
+- `apps/vanilla-example`: vanilla + Vite consumer example.
+
+The component implementation should remain in `core` and `elements`. Framework packages should only improve typing and ergonomics.
+
+## Commands
+
+```sh
+yarn install
+yarn build
+yarn test
+yarn typecheck
+yarn playwright:image
+yarn dev:solid
+yarn dev:vanilla
+yarn storybook
+```
+
+## Specs And Decisions
+
+- `spec/requirements.md`
+- `spec/architecture.md`
+- `spec/testing.md`
+- `spec/component-contract-template.md`
+- `adr/0001-native-custom-elements.md`
+- `adr/0002-solid-integration-surface.md`
+- `ai/components/*.md`

package/all.d.ts

@@ -0,0 +1 @@
+export declare function defineTyuiElements(): void;

package/all.js

@@ -0,0 +1,18 @@
+import { defineTyuiButton as i } from "./button.js";
+import { defineTyuiCenter as e } from "./center.js";
+import { defineTyuiCheckbox as o } from "./checkbox.js";
+import { defineTyuiCluster as r } from "./cluster.js";
+import { defineTyuiContainer as f } from "./container.js";
+import { defineTyuiFlex as m } from "./flex.js";
+import { defineTyuiFrame as n } from "./frame.js";
+import { defineTyuiGrid as t } from "./grid.js";
+import { defineTyuiInput as u } from "./input.js";
+import { defineTyuiRadio as d } from "./radio.js";
+import { defineTyuiRadioGroup as p } from "./radio-group.js";
+import { defineTyuiSidebar as y } from "./sidebar.js";
+function k() {
+  i(), e(), o(), r(), f(), m(), n(), t(), u(), d(), p(), y();
+}
+export {
+  k as defineTyuiElements
+};

package/button.d.ts

@@ -0,0 +1,2 @@
+export declare const tyuiButtonTagName = "tyui-button";
+export declare function defineTyuiButton(): void;

package/button.js

@@ -0,0 +1,9 @@
+import { TyuiButtonElement as e } from "@toyu-ui/elements/button";
+const t = "tyui-button";
+function o() {
+  customElements.get(t) || customElements.define(t, e);
+}
+export {
+  o as defineTyuiButton,
+  t as tyuiButtonTagName
+};

package/center.d.ts

@@ -0,0 +1,2 @@
+export declare const tyuiCenterTagName = "tyui-center";
+export declare function defineTyuiCenter(): void;

package/center.js

@@ -0,0 +1,9 @@
+import { TyuiCenterElement as t } from "@toyu-ui/elements/center";
+const e = "tyui-center";
+function i() {
+  customElements.get(e) || customElements.define(e, t);
+}
+export {
+  i as defineTyuiCenter,
+  e as tyuiCenterTagName
+};

package/checkbox.d.ts

@@ -0,0 +1,2 @@
+export declare const tyuiCheckboxTagName = "tyui-checkbox";
+export declare function defineTyuiCheckbox(): void;

package/checkbox.js

@@ -0,0 +1,9 @@
+import { TyuiCheckboxElement as t } from "@toyu-ui/elements/checkbox";
+const e = "tyui-checkbox";
+function c() {
+  customElements.get(e) || customElements.define(e, t);
+}
+export {
+  c as defineTyuiCheckbox,
+  e as tyuiCheckboxTagName
+};

package/cluster.d.ts

@@ -0,0 +1,2 @@
+export declare const tyuiClusterTagName = "tyui-cluster";
+export declare function defineTyuiCluster(): void;

package/cluster.js

@@ -0,0 +1,9 @@
+import { TyuiClusterElement as t } from "@toyu-ui/elements/cluster";
+const e = "tyui-cluster";
+function i() {
+  customElements.get(e) || customElements.define(e, t);
+}
+export {
+  i as defineTyuiCluster,
+  e as tyuiClusterTagName
+};

package/container.d.ts

@@ -0,0 +1,2 @@
+export declare const tyuiContainerTagName = "tyui-container";
+export declare function defineTyuiContainer(): void;

package/container.js

@@ -0,0 +1,9 @@
+import { TyuiContainerElement as n } from "@toyu-ui/elements/container";
+const e = "tyui-container";
+function i() {
+  customElements.get(e) || customElements.define(e, n);
+}
+export {
+  i as defineTyuiContainer,
+  e as tyuiContainerTagName
+};

package/flex.d.ts

@@ -0,0 +1,2 @@
+export declare const tyuiFlexTagName = "tyui-flex";
+export declare function defineTyuiFlex(): void;

package/flex.js

@@ -0,0 +1,9 @@
+import { TyuiFlexElement as t } from "@toyu-ui/elements/flex";
+const e = "tyui-flex";
+function m() {
+  customElements.get(e) || customElements.define(e, t);
+}
+export {
+  m as defineTyuiFlex,
+  e as tyuiFlexTagName
+};

package/frame.d.ts

@@ -0,0 +1,2 @@
+export declare const tyuiFrameTagName = "tyui-frame";
+export declare function defineTyuiFrame(): void;

package/frame.js

@@ -0,0 +1,9 @@
+import { TyuiFrameElement as m } from "@toyu-ui/elements/frame";
+const e = "tyui-frame";
+function i() {
+  customElements.get(e) || customElements.define(e, m);
+}
+export {
+  i as defineTyuiFrame,
+  e as tyuiFrameTagName
+};

package/grid.d.ts

@@ -0,0 +1,2 @@
+export declare const tyuiGridTagName = "tyui-grid";
+export declare function defineTyuiGrid(): void;

package/grid.js

@@ -0,0 +1,9 @@
+import { TyuiGridElement as i } from "@toyu-ui/elements/grid";
+const e = "tyui-grid";
+function m() {
+  customElements.get(e) || customElements.define(e, i);
+}
+export {
+  m as defineTyuiGrid,
+  e as tyuiGridTagName
+};

package/index.d.ts

@@ -0,0 +1,13 @@
+export * from './button';
+export * from './center';
+export * from './checkbox';
+export * from './cluster';
+export * from './container';
+export * from './flex';
+export * from './frame';
+export * from './grid';
+export * from './input';
+export * from './radio';
+export * from './radio-group';
+export * from './sidebar';
+export * from './all';

package/index.js

@@ -0,0 +1,40 @@
+import { defineTyuiButton as r, tyuiButtonTagName as o } from "./button.js";
+import { defineTyuiCenter as a, tyuiCenterTagName as u } from "./center.js";
+import { defineTyuiCheckbox as f, tyuiCheckboxTagName as y } from "./checkbox.js";
+import { defineTyuiCluster as n, tyuiClusterTagName as d } from "./cluster.js";
+import { defineTyuiContainer as x, tyuiContainerTagName as g } from "./container.js";
+import { defineTyuiFlex as C, tyuiFlexTagName as l } from "./flex.js";
+import { defineTyuiFrame as F, tyuiFrameTagName as G } from "./frame.js";
+import { defineTyuiGrid as s, tyuiGridTagName as c } from "./grid.js";
+import { defineTyuiInput as k, tyuiInputTagName as B } from "./input.js";
+import { defineTyuiRadio as S, tyuiRadioTagName as E } from "./radio.js";
+import { defineTyuiRadioGroup as q, tyuiRadioGroupTagName as v } from "./radio-group.js";
+import { defineTyuiSidebar as z, tyuiSidebarTagName as A } from "./sidebar.js";
+import { defineTyuiElements as H } from "./all.js";
+export {
+  r as defineTyuiButton,
+  a as defineTyuiCenter,
+  f as defineTyuiCheckbox,
+  n as defineTyuiCluster,
+  x as defineTyuiContainer,
+  H as defineTyuiElements,
+  C as defineTyuiFlex,
+  F as defineTyuiFrame,
+  s as defineTyuiGrid,
+  k as defineTyuiInput,
+  S as defineTyuiRadio,
+  q as defineTyuiRadioGroup,
+  z as defineTyuiSidebar,
+  o as tyuiButtonTagName,
+  u as tyuiCenterTagName,
+  y as tyuiCheckboxTagName,
+  d as tyuiClusterTagName,
+  g as tyuiContainerTagName,
+  l as tyuiFlexTagName,
+  G as tyuiFrameTagName,
+  c as tyuiGridTagName,
+  B as tyuiInputTagName,
+  v as tyuiRadioGroupTagName,
+  E as tyuiRadioTagName,
+  A as tyuiSidebarTagName
+};

package/input.d.ts

@@ -0,0 +1,2 @@
+export declare const tyuiInputTagName = "tyui-input";
+export declare function defineTyuiInput(): void;

package/input.js

@@ -0,0 +1,9 @@
+import { TyuiInputElement as e } from "@toyu-ui/elements/input";
+const t = "tyui-input";
+function u() {
+  customElements.get(t) || customElements.define(t, e);
+}
+export {
+  u as defineTyuiInput,
+  t as tyuiInputTagName
+};

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@toyu-ui/define",
+  "version": "0.1.0",
+  "homepage": "https://github.com/jurokapsiar/tyui#readme",
+  "bugs": {
+    "url": "https://github.com/jurokapsiar/tyui/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jurokapsiar/tyui.git",
+    "directory": "libs/define"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    },
+    "./button": {
+      "types": "./button.d.ts",
+      "default": "./button.js"
+    },
+    "./center": {
+      "types": "./center.d.ts",
+      "default": "./center.js"
+    },
+    "./checkbox": {
+      "types": "./checkbox.d.ts",
+      "default": "./checkbox.js"
+    },
+    "./cluster": {
+      "types": "./cluster.d.ts",
+      "default": "./cluster.js"
+    },
+    "./container": {
+      "types": "./container.d.ts",
+      "default": "./container.js"
+    },
+    "./flex": {
+      "types": "./flex.d.ts",
+      "default": "./flex.js"
+    },
+    "./frame": {
+      "types": "./frame.d.ts",
+      "default": "./frame.js"
+    },
+    "./grid": {
+      "types": "./grid.d.ts",
+      "default": "./grid.js"
+    },
+    "./input": {
+      "types": "./input.d.ts",
+      "default": "./input.js"
+    },
+    "./radio": {
+      "types": "./radio.d.ts",
+      "default": "./radio.js"
+    },
+    "./radio-group": {
+      "types": "./radio-group.d.ts",
+      "default": "./radio-group.js"
+    },
+    "./sidebar": {
+      "types": "./sidebar.d.ts",
+      "default": "./sidebar.js"
+    },
+    "./all": {
+      "types": "./all.d.ts",
+      "default": "./all.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run --passWithNoTests",
+    "typecheck": "tsc -p tsconfig.lib.json --noEmit"
+  },
+  "dependencies": {
+    "@toyu-ui/elements": "^0.1.0"
+  },
+  "private": false
+}

package/radio-group.d.ts

@@ -0,0 +1,2 @@
+export declare const tyuiRadioGroupTagName = "tyui-radio-group";
+export declare function defineTyuiRadioGroup(): void;

package/radio-group.js

@@ -0,0 +1,9 @@
+import { TyuiRadioGroupElement as e } from "@toyu-ui/elements/radio-group";
+const o = "tyui-radio-group";
+function t() {
+  customElements.get(o) || customElements.define(o, e);
+}
+export {
+  t as defineTyuiRadioGroup,
+  o as tyuiRadioGroupTagName
+};

package/radio.d.ts

@@ -0,0 +1,2 @@
+export declare const tyuiRadioTagName = "tyui-radio";
+export declare function defineTyuiRadio(): void;

package/radio.js

@@ -0,0 +1,9 @@
+import { TyuiRadioElement as i } from "@toyu-ui/elements/radio";
+const e = "tyui-radio";
+function o() {
+  customElements.get(e) || customElements.define(e, i);
+}
+export {
+  o as defineTyuiRadio,
+  e as tyuiRadioTagName
+};

package/sidebar.d.ts

@@ -0,0 +1,2 @@
+export declare const tyuiSidebarTagName = "tyui-sidebar";
+export declare function defineTyuiSidebar(): void;

package/sidebar.js

@@ -0,0 +1,9 @@
+import { TyuiSidebarElement as i } from "@toyu-ui/elements/sidebar";
+const e = "tyui-sidebar";
+function m() {
+  customElements.get(e) || customElements.define(e, i);
+}
+export {
+  m as defineTyuiSidebar,
+  e as tyuiSidebarTagName
+};