aidos-ui 4.0.4 → 4.0.5

package/src/pages/Hashing.mdx

@@ -1,211 +0,0 @@
-# Hashing and Unique IDs
-
-Utility functions for generating consistent hashes and converting numbers to different bases. Useful for creating unique identifiers, keys, and compact representations.
-
----
-
-## hash
-
-Generates a numeric hash from a string. The hash is deterministic - the same input always produces the same output.
-
-### Signature
-
-```ts
-function hash(source: string, modulus?: number): number
-```
-
-### Parameters
-
-| Parameter | Type | Default | Description |
-|-----------|------|---------|-------------|
-| `source` | `string` | Required | The string to hash |
-| `modulus` | `number` | - | Optional modulus to constrain the hash range |
-
-### Returns
-
-A non-negative integer hash value.
-
-### Basic usage
-
-```js
-import { hash } from "aidos-ui";
-
-const id = hash("ABC");        // 64578
-const id2 = hash("ABC");       // 64578 (same input = same output)
-const id3 = hash("ABCD");      // Different value
-```
-
-### With modulus
-
-Constrain the hash to a specific range:
-
-```js
-// Hash constrained to 0-9
-const small_id = hash("ABC", 10);  // 8
-
-// Hash constrained to 0-99
-const medium_id = hash("ABC", 100);  // 78
-
-// Useful for array indices
-const colors = ["red", "blue", "green", "yellow"];
-const colorIndex = hash("user123", colors.length);
-const userColor = colors[colorIndex];
-```
-
-### Use cases
-
-```js
-// Consistent avatar colors
-function getUserColor(userId) {
-  const colors = ["#FF5733", "#33FF57", "#3357FF", "#FF33F5"];
-  return colors[hash(userId, colors.length)];
-}
-
-// Cache keys
-const cacheKey = hash(JSON.stringify(params));
-
-// Partitioning
-const partition = hash(userId, 10);  // 0-9
-```
-
----
-
-## numberToBase
-
-Converts a number to a string representation in an arbitrary base using custom characters.
-
-### Signature
-
-```ts
-function numberToBase(
-  value: number,
-  alphabet?: string[]
-): string
-```
-
-### Parameters
-
-| Parameter | Type | Default | Description |
-|-----------|------|---------|-------------|
-| `value` | `number` | Required | The number to convert |
-| `alphabet` | `string[]` | `["a"-"z"]` | Characters to use for each digit |
-
-### Returns
-
-A string representation of the number in the given base.
-
-### Basic usage
-
-```js
-import { numberToBase } from "aidos-ui";
-
-// Default: base-26 using lowercase letters
-const id = numberToBase(hash("ABC"));  // "cqmv"
-const id2 = numberToBase(12345);       // "wmt"
-```
-
-### Custom bases
-
-```js
-// Binary (base-2)
-numberToBase(8, ["0", "1"]);           // "1000"
-
-// With custom symbols
-numberToBase(hash("ABC"), ["?", "!"]);  // "!!!!!???!???!?!"
-
-// Hexadecimal-like
-const hex = ["0", "1", "2", "3", "4", "5", "6", "7",
-             "8", "9", "a", "b", "c", "d", "e", "f"];
-numberToBase(255, hex);                 // "ff"
-
-// URL-safe characters
-const urlSafe = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".split("");
-numberToBase(123456789, urlSafe);       // Compact URL-safe ID
-```
-
-### Combining with hash
-
-```js
-// Generate compact, unique IDs
-function generateId(input) {
-  return numberToBase(hash(input));
-}
-
-const userId = generateId("user@example.com");  // e.g., "xkcd"
-const postId = generateId("blog-post-title");   // e.g., "qwer"
-```
-
----
-
-## Common patterns
-
-### Unique class names
-
-```js
-function uniqueClassName(styles) {
-  const styleString = JSON.stringify(styles);
-  return `_${numberToBase(hash(styleString))}`;
-}
-
-const className = uniqueClassName({ color: "red" });  // e.g., "_abc"
-```
-
-### Consistent randomization
-
-```js
-// Same input always gives same "random" result
-function pseudoRandom(seed, max) {
-  return hash(seed, max);
-}
-
-// Consistent shuffle based on seed
-function seededShuffle(array, seed) {
-  return array.slice().sort((a, b) => {
-    return hash(`${seed}-${a}`) - hash(`${seed}-${b}`);
-  });
-}
-```
-
-### Short URLs
-
-```js
-// Convert database IDs to short codes
-function toShortCode(numericId) {
-  const chars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
-  return numberToBase(numericId, chars);
-}
-
-toShortCode(123456);  // e.g., "w7e"
-```
-
-### Color from string
-
-```js
-function stringToColor(str) {
-  const h = hash(str, 360);
-  return `hsl(${h}, 70%, 50%)`;
-}
-
-stringToColor("John");   // Consistent color for "John"
-stringToColor("Jane");   // Different color for "Jane"
-```
-
----
-
-## Algorithm details
-
-The `hash` function uses a simple but effective string hashing algorithm:
-- Iterates through each character
-- Combines character codes using bit shifting
-- Produces a 32-bit integer hash
-- Applies modulus if specified
-
-This is suitable for:
-- Generating consistent keys
-- Distributing values evenly
-- Creating pseudo-random but reproducible results
-
-Not suitable for:
-- Cryptographic purposes
-- Security-sensitive hashing
-- Password storage

package/src/pages/Icon.mdx

@@ -1,171 +0,0 @@
-import { Icon } from "../Icon";
-import { Row } from "../Row";
-import { Column } from "../Column";
-
-# Icon
-
-The `Icon` component displays vector icons using [Iconify](https://iconify.design/) under the hood, giving you access to 200,000+ icons from 150+ icon sets including Font Awesome, Material Design, and more.
-
----
-
-## Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `icon` | `IconType` | Yes | The icon identifier (e.g., `"fa-check"`, `"fa-github"`) |
-| `size` | `Size` | Yes | Icon size: `"xsmall"` (8px), `"small"` (12px), `"medium"` (18px), `"large"` (24px), `"xlarge"` (32px), `"xxlarge"` (48px), `"xxxlarge"` (64px) |
-| `color` | `TextColor` | Yes | Icon color: `"primary"`, `"secondary"`, `"highlight"`, `"negative"`, `"subtle"`, `"light"` |
-| `ariaLabel` | `string` | No | Accessible label for screen readers |
-
----
-
-## Sizes
-
-Icons come in seven predefined sizes to maintain consistency across your application.
-
-<Column gap="medium">
-  <Row justify="space-around" align="center">
-    <Icon icon="fa-star" color="primary" size="xsmall" />
-    <Icon icon="fa-star" color="primary" size="small" />
-    <Icon icon="fa-star" color="primary" size="medium" />
-    <Icon icon="fa-star" color="primary" size="large" />
-    <Icon icon="fa-star" color="primary" size="xlarge" />
-    <Icon icon="fa-star" color="primary" size="xxlarge" />
-    <Icon icon="fa-star" color="primary" size="xxxlarge" />
-  </Row>
-</Column>
-
-```js
-<Icon icon="fa-star" color="primary" size="xsmall" />   // 8px
-<Icon icon="fa-star" color="primary" size="small" />    // 12px
-<Icon icon="fa-star" color="primary" size="medium" />   // 18px
-<Icon icon="fa-star" color="primary" size="large" />    // 24px
-<Icon icon="fa-star" color="primary" size="xlarge" />   // 32px
-<Icon icon="fa-star" color="primary" size="xxlarge" />  // 48px
-<Icon icon="fa-star" color="primary" size="xxxlarge" /> // 64px
-```
-
----
-
-## Colors
-
-Icons inherit semantic colors from the theme system, ensuring they adapt correctly to light and dark modes.
-
-<Column gap="medium">
-  <Row justify="space-around">
-    <Icon icon="fa-heart" color="primary" size="large" />
-    <Icon icon="fa-heart" color="secondary" size="large" />
-    <Icon icon="fa-heart" color="highlight" size="large" />
-    <Icon icon="fa-heart" color="negative" size="large" />
-    <Icon icon="fa-heart" color="subtle" size="large" />
-    <Icon icon="fa-heart" color="light" size="large" />
-  </Row>
-</Column>
-
-```js
-<Icon icon="fa-heart" color="primary" size="large" />   // Main content color
-<Icon icon="fa-heart" color="secondary" size="large" /> // Secondary content
-<Icon icon="fa-heart" color="highlight" size="large" /> // Accent/brand color
-<Icon icon="fa-heart" color="negative" size="large" />  // Error/destructive
-<Icon icon="fa-heart" color="subtle" size="large" />    // Muted/disabled
-<Icon icon="fa-heart" color="light" size="large" />     // Light/inverted
-```
-
----
-
-## Icon examples
-
-A selection of commonly used icons:
-
-<Column gap="medium">
-  <Row justify="space-around">
-    <Icon icon="fa-check" color="primary" size="medium" />
-    <Icon icon="fa-close" color="negative" size="medium" />
-    <Icon icon="fa-search" color="secondary" size="medium" />
-    <Icon icon="fa-user" color="primary" size="medium" />
-    <Icon icon="fa-cog" color="secondary" size="medium" />
-    <Icon icon="fa-bell" color="highlight" size="medium" />
-  </Row>
-  <Row justify="space-around">
-    <Icon icon="fa-github" color="primary" size="medium" />
-    <Icon icon="fa-twitter" color="primary" size="medium" />
-    <Icon icon="fa-linkedin" color="primary" size="medium" />
-    <Icon icon="fa-envelope" color="primary" size="medium" />
-    <Icon icon="fa-phone" color="primary" size="medium" />
-    <Icon icon="fa-globe" color="primary" size="medium" />
-  </Row>
-</Column>
-
-```js
-// Action icons
-<Icon icon="fa-check" color="primary" size="medium" />
-<Icon icon="fa-close" color="negative" size="medium" />
-<Icon icon="fa-search" color="secondary" size="medium" />
-
-// Social icons
-<Icon icon="fa-github" color="primary" size="medium" />
-<Icon icon="fa-twitter" color="primary" size="medium" />
-```
-
----
-
-## Accessibility
-
-Always provide an `ariaLabel` when the icon conveys meaning that isn't available through surrounding text.
-
-```js
-// Decorative icon (no label needed if text explains it)
-<Button>
-  <Icon icon="fa-download" color="light" size="small" />
-  Download
-</Button>
-
-// Meaningful icon (needs label for screen readers)
-<Icon
-  icon="fa-warning"
-  color="negative"
-  size="medium"
-  ariaLabel="Warning"
-/>
-```
-
----
-
-## Preloading icons
-
-By default, Iconify loads icons asynchronously from a CDN. To prevent flickering on initial render, you can preload icons by bundling them with your application.
-
-**Option 1: Preload an entire icon set**
-
-```bash
-npm install @iconify-json/fa
-```
-
-```js
-import { addCollection } from "@iconify/react";
-import faIcons from "@iconify-json/fa/icons.json";
-
-// Call once at app initialization (e.g., in _app.tsx)
-addCollection(faIcons);
-```
-
-**Option 2: Preload individual icons**
-
-```bash
-npm install @iconify-icons/fa
-```
-
-```js
-import { addIcon } from "@iconify/react";
-import faCheck from "@iconify-icons/fa/check";
-import faClose from "@iconify-icons/fa/close";
-
-addIcon("fa:check", faCheck);
-addIcon("fa:close", faClose);
-```
-
----
-
-## Finding icons
-
-Browse available icons at [Iconify Icon Sets](https://icon-sets.iconify.design/). The component uses Font Awesome 4 icons by default (prefixed with `fa-`), but you can use any Iconify-supported icon set.

package/src/pages/IconButton.mdx

@@ -1,155 +0,0 @@
-import { IconButton } from "../IconButton";
-import { Row } from "../Row";
-import { Column } from "../Column";
-
-# IconButton
-
-A circular button containing only an icon. Use IconButton for compact actions where space is limited or when the icon alone clearly communicates the action's purpose.
-
----
-
-## Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `icon` | `IconType` | Yes | - | The icon to display |
-| `size` | `Size` | Yes | - | Button size: `"xsmall"` (20px), `"small"` (24px), `"medium"` (32px), `"large"` (40px), `"xlarge"` (48px) |
-| `color` | `InteractableColor` | Yes | - | `"positive"`, `"secondary"`, `"negative"`, `"dark"`, `"light"` |
-| `onClick` | `function` | Yes | - | Click handler |
-| `bare` | `boolean` | No | `false` | Removes background for a lighter appearance |
-| `border` | `boolean` | No | `false` | Adds a border |
-| `disabled` | `boolean` | No | `false` | Disables interaction |
-| `aria-label` | `string` | No | - | Accessible label (recommended) |
-
----
-
-## Basic variants
-
-IconButtons come in different colors to indicate their purpose. Always pair with a clear, recognizable icon.
-
-<Row gap="large" align="center" padding="large" justify="center">
-  <IconButton size="medium" icon="fa-check" color="positive" onClick={() => {}} />
-  <IconButton size="medium" icon="fa-pencil" color="secondary" onClick={() => {}} />
-  <IconButton size="medium" icon="fa-trash" color="negative" onClick={() => {}} />
-  <IconButton size="medium" icon="fa-check" color="positive" disabled onClick={() => {}} />
-</Row>
-
-```js
-<IconButton
-  icon="fa-check"
-  size="medium"
-  color="positive"
-  aria-label="Confirm"
-  onClick={() => {}}
-/>
-
-<IconButton
-  icon="fa-pencil"
-  size="medium"
-  color="secondary"
-  aria-label="Edit"
-  onClick={() => {}}
-/>
-
-<IconButton
-  icon="fa-trash"
-  size="medium"
-  color="negative"
-  aria-label="Delete"
-  onClick={() => {}}
-/>
-```
-
----
-
-## Bare variant
-
-The `bare` variant removes the background, creating a subtle button that works well in toolbars or alongside other content.
-
-<Row gap="large" align="center" padding="large" justify="center">
-  <IconButton bare size="medium" icon="fa-check" color="positive" onClick={() => {}} />
-  <IconButton bare size="medium" icon="fa-pencil" color="secondary" onClick={() => {}} />
-  <IconButton bare size="medium" icon="fa-trash" color="negative" onClick={() => {}} />
-  <IconButton bare size="medium" icon="fa-check" color="positive" disabled onClick={() => {}} />
-</Row>
-
-```js
-<IconButton
-  bare
-  icon="fa-close"
-  size="medium"
-  color="secondary"
-  aria-label="Close"
-  onClick={() => {}}
-/>
-```
-
----
-
-## Sizes
-
-IconButtons scale proportionally, maintaining their circular shape at all sizes.
-
-<Row gap="large" align="center" padding="large" justify="center">
-  <IconButton size="xsmall" icon="fa-star" color="positive" onClick={() => {}} />
-  <IconButton size="small" icon="fa-star" color="positive" onClick={() => {}} />
-  <IconButton size="medium" icon="fa-star" color="positive" onClick={() => {}} />
-  <IconButton size="large" icon="fa-star" color="positive" onClick={() => {}} />
-  <IconButton size="xlarge" icon="fa-star" color="positive" onClick={() => {}} />
-</Row>
-
-```js
-<IconButton size="xsmall" icon="fa-star" color="positive" onClick={() => {}} /> // 20px
-<IconButton size="small" icon="fa-star" color="positive" onClick={() => {}} />  // 24px
-<IconButton size="medium" icon="fa-star" color="positive" onClick={() => {}} /> // 32px
-<IconButton size="large" icon="fa-star" color="positive" onClick={() => {}} />  // 40px
-<IconButton size="xlarge" icon="fa-star" color="positive" onClick={() => {}} /> // 48px
-```
-
----
-
-## Common use cases
-
-<Row gap="large" align="center" padding="large" justify="center">
-  <IconButton bare size="medium" icon="fa-heart" color="negative" aria-label="Like" onClick={() => {}} />
-  <IconButton bare size="medium" icon="fa-bookmark" color="secondary" aria-label="Save" onClick={() => {}} />
-  <IconButton bare size="medium" icon="fa-share" color="secondary" aria-label="Share" onClick={() => {}} />
-  <IconButton bare size="medium" icon="fa-ellipsis-h" color="secondary" aria-label="More options" onClick={() => {}} />
-</Row>
-
-```js
-// Social actions
-<IconButton bare icon="fa-heart" size="medium" color="negative" aria-label="Like" onClick={() => {}} />
-<IconButton bare icon="fa-bookmark" size="medium" color="secondary" aria-label="Save" onClick={() => {}} />
-<IconButton bare icon="fa-share" size="medium" color="secondary" aria-label="Share" onClick={() => {}} />
-
-// Menu trigger
-<IconButton bare icon="fa-ellipsis-h" size="medium" color="secondary" aria-label="More options" onClick={() => {}} />
-```
-
----
-
-## Accessibility
-
-Since IconButtons have no visible text, always provide an `aria-label` to describe the action for screen reader users.
-
-```js
-// Good - has accessible label
-<IconButton
-  icon="fa-trash"
-  size="medium"
-  color="negative"
-  aria-label="Delete item"
-  onClick={() => {}}
-/>
-
-// Bad - no accessible label
-<IconButton
-  icon="fa-trash"
-  size="medium"
-  color="negative"
-  onClick={() => {}}
-/>
-```
-
-Consider using a `Tooltip` component alongside IconButton to provide visual hints for all users.

package/src/pages/Link.mdx

@@ -1,160 +0,0 @@
-import { Link } from "../Link";
-import { Row } from "../Row";
-import { Column } from "../Column";
-
-# Link
-
-The `Link` component provides styled navigation that looks like a button but renders as a semantic `<a>` anchor element. Use it for navigation actions where you want button-like styling.
-
----
-
-## Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `children` | `ReactNode` | Yes | - | Link text content |
-| `href` | `string` | Yes | - | Navigation destination URL |
-| `color` | `InteractableColor` | Yes | - | `"positive"`, `"primary"`, `"negative"`, `"dark"`, `"light"` |
-| `bare` | `boolean` | No | `false` | Removes background for a lighter appearance |
-| `border` | `boolean` | No | `false` | Adds a border matching the text color |
-| `disabled` | `boolean` | No | `false` | Disables interaction |
-| `underline` | `boolean` | No | `false` | Adds text underline decoration |
-| `icon` | `IconType` | No | - | Icon to display alongside text |
-| `iconPosition` | `"left"` \| `"right"` | No | `"left"` | Icon placement relative to text |
-| `iconSize` | `Size` | No | `"medium"` | Icon size |
-| `size` | `Size` | No | `"medium"` | Text size |
-| `padding` | `Padding` | No | `"medium"` | Internal padding |
-| `inline` | `boolean` | No | `true` | Display as inline-flex (true) or flex (false) |
-| `bold` | `boolean` | No | `false` | Bold text |
-| `target` | `string` | No | - | Link target (e.g., `"_blank"` for new tab) |
-
----
-
-## Color variants
-
-Links share the same color system as buttons, providing visual consistency across your application.
-
-<Row gap="large" align="center" padding="large" justify="center">
-  <Link color="positive" href="/">Positive</Link>
-  <Link color="primary" href="/">Primary</Link>
-  <Link color="negative" href="/">Negative</Link>
-  <Link color="dark" href="/">Dark</Link>
-  <Link color="light" href="/">Light</Link>
-</Row>
-
-```js
-<Link color="positive" href="/signup">Sign up</Link>
-<Link color="primary" href="/learn-more">Learn more</Link>
-<Link color="negative" href="/delete">Delete account</Link>
-```
-
----
-
-## Bare variant
-
-The `bare` prop creates a lighter appearance without a background, ideal for inline links or secondary navigation.
-
-<Row gap="large" align="center" padding="large" justify="center">
-  <Link bare color="positive" href="/">Positive</Link>
-  <Link bare color="primary" href="/">Primary</Link>
-  <Link bare color="negative" href="/">Negative</Link>
-</Row>
-
-```js
-<Link bare color="positive" href="/docs">Documentation</Link>
-<Link bare color="primary" href="/about">About us</Link>
-```
-
----
-
-## With border
-
-Combine `bare` and `border` for outlined link styles.
-
-<Row gap="large" align="center" padding="large" justify="center">
-  <Link border bare color="positive" href="/">Positive</Link>
-  <Link border bare color="primary" href="/">Primary</Link>
-  <Link border bare color="negative" href="/">Negative</Link>
-</Row>
-
-```js
-<Link border bare color="positive" href="/signup">
-  Get started
-</Link>
-```
-
----
-
-## With underline
-
-The `underline` prop adds a text decoration, useful for traditional link styling within paragraphs.
-
-<Row gap="large" align="center" padding="large" justify="center">
-  <Link bare underline color="positive" href="/">Learn more</Link>
-  <Link bare underline color="primary" href="/">Read docs</Link>
-</Row>
-
-```js
-<Link bare underline color="positive" href="/docs">
-  Learn more
-</Link>
-```
-
----
-
-## With icon
-
-Add icons to reinforce the link's purpose or indicate external navigation.
-
-<Row gap="large" align="center" padding="large" justify="center">
-  <Link color="positive" icon="fa-external-link" iconPosition="right" href="/" target="_blank">External</Link>
-  <Link color="primary" icon="fa-download" href="/">Download</Link>
-  <Link bare color="primary" icon="fa-arrow-left" href="/">Back</Link>
-</Row>
-
-```js
-<Link
-  color="positive"
-  icon="fa-external-link"
-  iconPosition="right"
-  href="https://example.com"
-  target="_blank"
->
-  External link
-</Link>
-
-<Link color="primary" icon="fa-download" href="/file.pdf">
-  Download PDF
-</Link>
-```
-
----
-
-## Disabled state
-
-Disabled links prevent navigation and display a muted appearance.
-
-<Row gap="large" align="center" padding="large" justify="center">
-  <Link color="positive" disabled href="/">Disabled</Link>
-  <Link bare color="positive" disabled href="/">Disabled bare</Link>
-</Row>
-
-```js
-<Link color="positive" disabled href="/premium">
-  Premium only
-</Link>
-```
-
----
-
-## Link vs Button
-
-Use `Link` when:
-- The action navigates to a new page or URL
-- You want the browser's native link behaviors (right-click, cmd+click)
-- SEO matters for the destination
-
-Use `Button` when:
-- The action triggers an in-page operation
-- No navigation occurs
-- Form submissions