aidos-ui 4.0.4 → 4.0.6

package/src/pages/css-in-js.mdx

@@ -1,240 +0,0 @@
-import { Button } from "../Button";
-import { Row } from "../Row";
-import { Column } from "../Column";
-import { BaseView } from "../BaseView";
-import { Span } from "../Text";
-import { cssVar, mobile, tablet } from "../jss";
-
-# CSS in JS
-
-Aidos UI uses a custom CSS-in-JS system called `jss`. Every component accepts a `jss` prop for styling, and the library includes utilities for theming, responsive design, and type-safe CSS variables.
-
----
-
-## The jss prop
-
-All components accept a `jss` prop that works like inline styles but with additional capabilities:
-
-```js
-<BaseView jss={{ backgroundColor: "red", padding: 12 }} />
-```
-
-Internally, each property becomes an atomic CSS class with a deterministic hash, enabling server-side rendering and hydration:
-
-```html
-<style>
-  .x1uc1pme { background: red; }
-  .x1kbdebd { padding: 12px; }
-</style>
-<div class="x1uc1pme x1kbdebd" />
-```
-
----
-
-## Arrays and conditionals
-
-The `jss` prop accepts arrays and falsy values for conditional styling:
-
-```js
-<BaseView
-  jss={[
-    { padding: 16 },
-    isActive && { backgroundColor: "blue" },
-    isDisabled && { opacity: 0.5 },
-  ]}
-/>
-```
-
----
-
-## Automatic pixel conversion
-
-Numeric values are automatically converted to pixels for dimensional properties:
-
-```js
-<BaseView jss={{ padding: 16, fontSize: 14, opacity: 0.5 }} />
-// Results in: padding: 16px; font-size: 14px; opacity: 0.5;
-```
-
----
-
-## Pseudo-selectors
-
-Use string keys for pseudo-classes and pseudo-elements:
-
-```js
-// Hover state
-jss({ ":hover": { backgroundColor: "blue" } })
-
-// Focus state
-jss({ ":focus": { outline: "2px solid blue" } })
-
-// First child
-jss({ ":first-child": { marginTop: 0 } })
-```
-
----
-
-## Descendant selectors
-
-Target child elements with space-prefixed selectors:
-
-```js
-// All child divs
-jss({ " div": { padding: 8 } })
-
-// Direct children
-jss({ " > span": { color: "red" } })
-```
-
----
-
-## Media queries
-
-Use media query strings as keys:
-
-```js
-jss({
-  padding: 8,
-  "@media (min-width: 750px)": {
-    padding: 16,
-  },
-})
-```
-
----
-
-## Responsive helpers
-
-The library provides helper functions for common breakpoints:
-
-```js
-import { mobile, tablet, laptop, desktop } from "aidos-ui";
-
-<BaseView
-  jss={[
-    { padding: 8 },
-    tablet({ padding: 16 }),
-    desktop({ padding: 24 }),
-  ]}
-/>
-```
-
-| Helper | Breakpoint |
-|--------|------------|
-| `mobile()` | max-width: 479px |
-| `tablet()` | min-width: 480px |
-| `laptop()` | min-width: 1024px |
-| `desktop()` | min-width: 1280px |
-
----
-
-## CSS variables
-
-Use the `cssVar()` helper for type-safe access to theme variables:
-
-<Row justify="center" padding="medium">
-  <Button
-    jss={{ border: `4px solid ${cssVar("--warning")}` }}
-    color="positive"
-    onClick={() => {}}
-  >
-    Styled button
-  </Button>
-</Row>
-
-```js
-import { cssVar } from "aidos-ui";
-
-<BaseView jss={{
-  backgroundColor: cssVar("--primary-background"),
-  color: cssVar("--primary-text"),
-  padding: cssVar("--spacing-m"),
-}} />
-```
-
----
-
-## Available CSS variables
-
-### Colors
-
-| Variable | Purpose |
-|----------|---------|
-| `--primary-background` | Main background |
-| `--secondary-background` | Alternate background |
-| `--overlay-background` | Modal/popover background |
-| `--divider` | Border/divider color |
-| `--highlight` | Accent/brand color |
-| `--warning` | Warning indicator |
-
-### Text colors
-
-| Variable | Purpose |
-|----------|---------|
-| `--primary-text` | Main text |
-| `--secondary-text` | Supporting text |
-| `--subtle-text` | Muted/disabled text |
-| `--highlight-text` | Accent text |
-| `--negative-text` | Error/destructive text |
-| `--light-text` | Text on dark backgrounds |
-
-### Interactive states
-
-| Variable | Purpose |
-|----------|---------|
-| `--hovered-background` | Hover state |
-| `--pressed-background` | Active/pressed state |
-| `--selected-background` | Selected item |
-
-### Button backgrounds
-
-| Variable | Purpose |
-|----------|---------|
-| `--background-button-positive` | Positive action buttons |
-| `--background-button-secondary` | Secondary buttons |
-| `--background-button-negative` | Destructive buttons |
-| `--background-button-disabled` | Disabled buttons |
-
-### Spacing
-
-| Variable | Size |
-|----------|------|
-| `--spacing-xs` | 4px |
-| `--spacing-s` | 8px |
-| `--spacing-m` | 12px |
-| `--spacing-l` | 16px |
-| `--spacing-xl` | 24px |
-| `--spacing-xxl` | 32px |
-| `--spacing-xxxl` | 48px |
-
-### Border radius
-
-| Variable | Size |
-|----------|------|
-| `--border-radius-s` | 4px |
-| `--border-radius-m` | 8px |
-| `--border-radius-l` | 12px |
-
----
-
-## Using toClassnames directly
-
-For custom components, use `toClassnames()` to convert style objects to class names:
-
-```js
-import { toClassnames } from "aidos-ui";
-
-function CustomComponent({ active }) {
-  return (
-    <div
-      className={toClassnames([
-        { padding: 16, borderRadius: 8 },
-        active && { backgroundColor: "blue" },
-      ])}
-    >
-      Content
-    </div>
-  );
-}
-```

package/src/pages/index.mdx

@@ -1,58 +0,0 @@
-# Aidos UI
-
-This is a React design system library with many utilities and zero dependencies. It was built with the aim to be simple, lightweight and beautiful.
-
-- [Why](/#why)
-- [Who is this for](/#who-is-this-for)
-- [Design philosophy](/#design-philosophy)
-- [Installation](/#installation)
-- [How to use](/#how-to-use)
-
-## Why?
-
-Over the years I have always have many side projects, and many of them needed a UI. I disliked every available library because they had so much code to support many cases I did not care about. Back in 2019 I thought, maybe I could make my own design system, with just enough javascript to do things exactly how I wanted them to be, and so I did. Since then it has changed quite a bit and it is now something I am more or less proud of. It has everything I have ever needed and it is done in the way I find simplest and least convoluted. This is all ultimately very subjective, and that is fine, because the first design decision of this library was that it would be extremely opinionated. With that said, although this library does not lend it self to modification, it does tend to be fairly easy to extend and compose with it. I am now making this documentation with the vague weak conviction that someone out there may benefit from it. I still dislike other design libraries not because they are not capable but becuse they are too general purpose. I wanted this library to be not-general purpose, but if this happens to fit your needs, it should be the lightest and simplest option available. This will not try to solve all your problems but it will solve a few problems really well.
-
----
-
-## Who is this for?
-
-I initially only planned to use this myself so its features and design have so far reflected the things I have been working on. However I keep extending this library, and I think that with more users it may be possible to add more ideas and usecases so that this becomes a really complete system.
-
----
-
-## Design philosophy
-
-1. <b>Opinionated</b>
-
-First and foremost, this library is extremely opinionated. This is so because I believe HTML is too low level and error prone, CSS defaults are not beautiful enough, and the web in general too big a toolkit to make simple things work in the way you expect. So, for the sake of simplicity, this library imposes opinions at every step. These opinions will not fit everyone's needs, and that is a sacrifice that can be made for the sake of simplicity.
-
-3. <b>Modular</b>
-
-There is no limit to the number of features and components that can be added, as long as every piece remains modular, or at most, composed out of its simpler parts. This is important to keep bundle sizes under control and also to keep the API sane. Modular components imply abstractions that do not depend on each other. This helps keep overall complexity low, so that it is simpler to extend the system.
-
-3. <b>Accessible</b>
-
-By design every component should be accessible, paying attention to keyboard navigation, focusable elements, adding helpful aria properties and following wcag specificaitons as faithfully as possible.
-
-4. <b>Dependency free</b>
-
-As few dependencies as possible, to keep things light and under control. The only dependency right now is [iconify](https://github.com/iconify/iconify) because I am not able to re-create all icons myself.
-
----
-
-## Installation
-
-This library can be installed through npm
-
-```bash
-npm install --save aidos-ui
-```
-
----
-
-## How to use
-
-- The `Providers` component somewhere in the application.
-- If the application is running in nextjs, the `JSServerStyles` component has to be used in the \_document `<Head />`, this enables jss to work also server side.
-
----

package/src/pages/navigation.mdx

@@ -1,158 +0,0 @@
-import { List } from "../List";
-import { ListButtonItem } from "../ListButtonItem";
-
-# List Navigation
-
-Lists support built-in keyboard navigation using the `useNavigation` hook. This creates an accessible, keyboard-friendly experience following WAI-ARIA patterns.
-
----
-
-## Enabling navigation
-
-Use the `navigation` prop to enable or disable keyboard navigation:
-
-<List ariaLabel="example" navigation={true}>
-  <ListButtonItem color="secondary" headline="Headline 1" onClick={() => {}} />
-  <ListButtonItem color="secondary" headline="Headline 2" onClick={() => {}} />
-  <ListButtonItem
-    withDivider={false}
-    color="secondary"
-    headline="Headline 3"
-    onClick={() => {}}
-  />
-</List>
-
-```js
-<List ariaLabel="example" navigation={true}>
-  <ListButtonItem headline="Headline 1" onClick={() => {}} />
-  <ListButtonItem headline="Headline 2" onClick={() => {}} />
-  <ListButtonItem headline="Headline 3" onClick={() => {}} />
-</List>
-```
-
----
-
-## Without navigation
-
-When `navigation` is `false`, each item is a separate tab stop:
-
-<List ariaLabel="example" navigation={false}>
-  <ListButtonItem color="secondary" headline="Headline 1" onClick={() => {}} />
-  <ListButtonItem color="secondary" headline="Headline 2" onClick={() => {}} />
-  <ListButtonItem
-    withDivider={false}
-    color="secondary"
-    headline="Headline 3"
-    onClick={() => {}}
-  />
-</List>
-
-```js
-<List ariaLabel="example" navigation={false}>
-  <ListButtonItem headline="Headline 1" onClick={() => {}} />
-  <ListButtonItem headline="Headline 2" onClick={() => {}} />
-  <ListButtonItem headline="Headline 3" onClick={() => {}} />
-</List>
-```
-
----
-
-## Keyboard controls
-
-When navigation is enabled:
-
-| Key | Action |
-|-----|--------|
-| **Arrow Down** | Move to next item |
-| **Arrow Up** | Move to previous item |
-| **Arrow Right** | Move to next item |
-| **Arrow Left** | Move to previous item |
-| **Enter / Space** | Activate the focused item |
-| **Tab** | Move focus out of the list |
-
-Navigation wraps around - pressing down on the last item moves to the first.
-
----
-
-## How it works
-
-The navigation system uses `tabIndex` management:
-
-1. **Single tab stop**: The entire list is one tab stop
-2. **Active item**: Gets `tabIndex="0"` (focusable)
-3. **Other items**: Get `tabIndex="-1"` (not in tab order)
-4. **Arrow keys**: Move the active state between items
-
-This follows the [WAI-ARIA grid layout pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/layout-grids/).
-
----
-
-## Benefits
-
-**With navigation enabled:**
-- Faster keyboard navigation (single Tab to enter list)
-- Arrow keys to move between items
-- Better for long lists
-- More efficient for power users
-
-**With navigation disabled:**
-- Standard Tab behavior between items
-- Simpler mental model
-- Better for short lists (2-3 items)
-- Each item is independently focusable
-
----
-
-## Accessibility considerations
-
-Always provide an `ariaLabel` for the list:
-
-```js
-<List ariaLabel="Search results" navigation={true}>
-  {/* items */}
-</List>
-
-<List ariaLabel="User menu options" navigation={true}>
-  {/* items */}
-</List>
-```
-
-This helps screen reader users understand the list's purpose.
-
----
-
-## When to use navigation
-
-**Enable navigation for:**
-- Long lists (5+ items)
-- Menu-like interfaces
-- Search results
-- Option lists
-- File browsers
-
-**Disable navigation for:**
-- Short action lists (2-3 items)
-- Form field groups
-- Simple button groups
-- When each item needs independent focus
-
----
-
-## Implementation
-
-Lists use the `useNavigation` hook internally:
-
-```js
-// Simplified internal implementation
-function List({ navigation = true, children, ariaLabel }) {
-  const rootRef = useNavigation({ enabled: navigation });
-
-  return (
-    <ul ref={rootRef} aria-label={ariaLabel}>
-      {children}
-    </ul>
-  );
-}
-```
-
-See the [useNavigation documentation](/useNavigation) for more details on the underlying hook.

package/src/pages/prism.css

@@ -1,3 +0,0 @@
-/* PrismJS 1.29.0
-https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+jsx+tsx+typescript */
-code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}

package/src/pages/useCookie.mdx

@@ -1,176 +0,0 @@
-# useCookie
-
-A React hook for reading and writing browser cookies with React state-like API. Handles SSR gracefully and persists values across page reloads.
-
----
-
-## Signature
-
-```ts
-function useCookie<T, L>(
-  key: string,
-  options: {
-    initialValue: T;
-    loadingValue: L;
-    serialize?: (value: T) => string;
-    deserialize?: (value: string) => T;
-    maxAge?: number;
-  }
-): [T | L, (value: T | ((prev: T | L) => T)) => void]
-```
-
----
-
-## Parameters
-
-| Parameter | Type | Default | Description |
-|-----------|------|---------|-------------|
-| `key` | `string` | Required | Cookie name |
-| `options.initialValue` | `T` | Required | Value to set if cookie doesn't exist |
-| `options.loadingValue` | `L` | Required | Value to use during SSR or initial load |
-| `options.serialize` | `(T) => string` | `JSON.stringify` | Custom serialization function |
-| `options.deserialize` | `(string) => T` | `JSON.parse` | Custom deserialization function |
-| `options.maxAge` | `number` | 1 year | Cookie expiration in seconds |
-
----
-
-## Returns
-
-Returns a tuple similar to `useState`:
-
-1. **Current value** - The cookie value (or `loadingValue` during SSR)
-2. **Setter function** - Updates the cookie (accepts value or callback)
-
----
-
-## Basic usage
-
-```js
-import { useCookie } from "aidos-ui";
-
-function Settings() {
-  const [theme, setTheme] = useCookie("theme", {
-    initialValue: "light",
-    loadingValue: "light",
-  });
-
-  return (
-    <Button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
-      Current: {theme}
-    </Button>
-  );
-}
-```
-
----
-
-## With callback setter
-
-Like `useState`, the setter accepts a callback function:
-
-```js
-const [count, setCount] = useCookie("visit-count", {
-  initialValue: 0,
-  loadingValue: 0,
-});
-
-// Increment based on previous value
-setCount((prev) => prev + 1);
-```
-
----
-
-## SSR handling
-
-The `loadingValue` is used during server-side rendering when cookies aren't available:
-
-```js
-const [user, setUser] = useCookie("user-preferences", {
-  initialValue: { notifications: true },
-  loadingValue: null, // Renders nothing during SSR
-});
-
-if (user === null) {
-  return <Spinner />;
-}
-
-return <Settings preferences={user} />;
-```
-
----
-
-## Custom serialization
-
-For complex data or non-JSON formats:
-
-```js
-const [date, setDate] = useCookie("last-visit", {
-  initialValue: new Date(),
-  loadingValue: null,
-  serialize: (d) => d.toISOString(),
-  deserialize: (s) => new Date(s),
-});
-```
-
----
-
-## Custom expiration
-
-Set cookie expiration with `maxAge` (in seconds):
-
-```js
-// Expire in 1 hour
-const [session, setSession] = useCookie("session", {
-  initialValue: null,
-  loadingValue: null,
-  maxAge: 60 * 60, // 1 hour
-});
-
-// Expire in 30 days
-const [preferences, setPreferences] = useCookie("prefs", {
-  initialValue: {},
-  loadingValue: {},
-  maxAge: 60 * 60 * 24 * 30, // 30 days
-});
-```
-
----
-
-## Helper functions
-
-The module also exports utility functions:
-
-```js
-import { hasCookie, getCookie } from "aidos-ui";
-
-// Check if cookie exists
-if (hasCookie("user-token")) {
-  // ...
-}
-
-// Get cookie value directly
-const token = getCookie("user-token");
-```
-
----
-
-## Dark mode example
-
-```js
-function App() {
-  const [darkMode, setDarkMode] = useCookie("dark-mode", {
-    initialValue: false,
-    loadingValue: false,
-  });
-
-  useEffect(() => {
-    document.body.classList.toggle("dark-mode", darkMode);
-  }, [darkMode]);
-
-  return (
-    <Button onClick={() => setDarkMode(!darkMode)}>
-      {darkMode ? "Light mode" : "Dark mode"}
-    </Button>
-  );
-}
-```