aidos-ui 4.0.0 → 4.0.2

package/src/jss.tsx

@@ -210,7 +210,7 @@ export function JSSProvider({
   children,
 }: {
   themes: { dark: Theme; light: Theme };
-  children: JSX.Element;
+  children: React.JSX.Element;
 }) {
   const stylesRef = useRef<string[] | null>(null);
 
@@ -405,6 +405,13 @@ export type Theme = {
   ["--border-radius-m"]: string;
   ["--border-radius-l"]: string;
   ["--nav-bar-height"]: string;
+  /* Shadows */
+  ["--shadow-sm"]: string;
+  ["--shadow-md"]: string;
+  ["--shadow-lg"]: string;
+  /* Transitions */
+  ["--transition-fast"]: string;
+  ["--transition-normal"]: string;
 };
 
 export const lightTheme: Theme = {
@@ -454,6 +461,13 @@ export const lightTheme: Theme = {
   ["--border-radius-m"]: "4px",
   ["--border-radius-l"]: "8px",
   ["--nav-bar-height"]: "50px",
+  /* Shadows */
+  ["--shadow-sm"]: "0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1)",
+  ["--shadow-md"]: "0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05)",
+  ["--shadow-lg"]: "0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1)",
+  /* Transitions */
+  ["--transition-fast"]: "0.15s ease",
+  ["--transition-normal"]: "0.2s ease",
 };
 
 export const darkTheme: Theme = {
@@ -503,6 +517,13 @@ export const darkTheme: Theme = {
   ["--border-radius-m"]: "4px",
   ["--border-radius-l"]: "8px",
   ["--nav-bar-height"]: "50px",
+  /* Shadows - stronger for dark mode to be visible */
+  ["--shadow-sm"]: "0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.3)",
+  ["--shadow-md"]: "0 4px 6px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.2)",
+  ["--shadow-lg"]: "0 10px 25px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.25)",
+  /* Transitions */
+  ["--transition-fast"]: "0.15s ease",
+  ["--transition-normal"]: "0.2s ease",
 };
 
 export const baseStyles = `
@@ -527,6 +548,37 @@ body {
   background-color: ${cssVar("--primary-background")};
 }
 
+@keyframes dialogFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes backdropFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes popoverFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 `;
 
 const backgroundStyles = {
@@ -534,10 +586,10 @@ const backgroundStyles = {
     backgroundColor: cssVar("--highlight"),
   },
   light: {
-    backgroundColor: "white",
+    backgroundColor: cssVar("--light-text"),
   },
   dark: {
-    backgroundColor: "black",
+    backgroundColor: cssVar("--primary-text"),
   },
   warning: {
     backgroundColor: cssVar("--warning"),

package/src/pages/Badge.mdx

@@ -1,30 +1,152 @@
 import { Badge } from "../Badge";
 import { Row } from "../Row";
+import { Column } from "../Column";
+import { Span } from "../Text";
+import { IconButton } from "../IconButton";
 
 # Badge
 
-This is a simple component that can be used to bring attention to a specific part of the user interface, for example an unread notification, an update, an important element...
+A small circular indicator used to draw attention to specific UI elements. Common uses include notification counts, status indicators, and visual markers.
 
 ---
 
-The `Badge` component supports all colours and sizes
+## Props
 
-<Row gap="large" align="center" justify="center">
-  <Badge size="xsmall" color="negative" />
-  <Badge size="small" color="warning" />
-  <Badge size="medium" color="highlight" />
-  <Badge size="large" color="secondary-background" />
-  <Badge size="xlarge" color="divider" />
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `Size` | `"medium"` | Badge size: `"xsmall"` (4px), `"small"` (6px), `"medium"` (12px), `"large"` (18px), `"xlarge"` (24px) |
+| `color` | `Color` | `"highlight"` | Background color from theme |
+
+---
+
+## Sizes
+
+<Row gap="large" align="center" justify="center" padding="medium">
+  <Column align="center" gap="small">
+    <Badge size="xsmall" />
+    <Span size="small" color="secondary">xsmall</Span>
+  </Column>
+  <Column align="center" gap="small">
+    <Badge size="small" />
+    <Span size="small" color="secondary">small</Span>
+  </Column>
+  <Column align="center" gap="small">
+    <Badge size="medium" />
+    <Span size="small" color="secondary">medium</Span>
+  </Column>
+  <Column align="center" gap="small">
+    <Badge size="large" />
+    <Span size="small" color="secondary">large</Span>
+  </Column>
+  <Column align="center" gap="small">
+    <Badge size="xlarge" />
+    <Span size="small" color="secondary">xlarge</Span>
+  </Column>
 </Row>
 
 ```js
-<Row gap="large" align="center" justify="center">
-  <Badge size="xsmall" color="negative" />
-  <Badge size="small" color="warning" />
-  <Badge size="medium" color="highlight" />
-  <Badge size="large" color="secondary-background" />
-  <Badge size="xlarge" color="divider" />
+<Badge size="xsmall" />  // 4px
+<Badge size="small" />   // 6px
+<Badge size="medium" />  // 12px (default)
+<Badge size="large" />   // 18px
+<Badge size="xlarge" />  // 24px
+```
+
+---
+
+## Colors
+
+<Row gap="large" align="center" justify="center" padding="medium">
+  <Column align="center" gap="small">
+    <Badge color="highlight" />
+    <Span size="small" color="secondary">highlight</Span>
+  </Column>
+  <Column align="center" gap="small">
+    <Badge color="negative" />
+    <Span size="small" color="secondary">negative</Span>
+  </Column>
+  <Column align="center" gap="small">
+    <Badge color="warning" />
+    <Span size="small" color="secondary">warning</Span>
+  </Column>
+  <Column align="center" gap="small">
+    <Badge color="divider" />
+    <Span size="small" color="secondary">divider</Span>
+  </Column>
 </Row>
+
+```js
+<Badge color="highlight" />  // Accent/brand color
+<Badge color="negative" />   // Error/alert
+<Badge color="warning" />    // Warning
+<Badge color="divider" />    // Neutral/muted
 ```
 
 ---
+
+## Common use cases
+
+### Notification indicator
+
+<Row gap="medium" align="center" padding="medium">
+  <Row jss={{ position: "relative" }}>
+    <IconButton bare icon="fa-bell" size="large" color="secondary" onClick={() => {}} />
+    <Badge size="small" color="negative" jss={{ position: "absolute", top: 0, right: 0 }} />
+  </Row>
+  <Span color="secondary">Unread notifications</Span>
+</Row>
+
+```js
+<Row jss={{ position: "relative" }}>
+  <IconButton bare icon="fa-bell" size="large" color="secondary" onClick={() => {}} />
+  <Badge
+    size="small"
+    color="negative"
+    jss={{ position: "absolute", top: 0, right: 0 }}
+  />
+</Row>
+```
+
+### Status indicator
+
+<Column gap="small" padding="medium">
+  <Row gap="small" align="center">
+    <Badge size="small" color="highlight" />
+    <Span>Online</Span>
+  </Row>
+  <Row gap="small" align="center">
+    <Badge size="small" color="warning" />
+    <Span>Away</Span>
+  </Row>
+  <Row gap="small" align="center">
+    <Badge size="small" color="divider" />
+    <Span>Offline</Span>
+  </Row>
+</Column>
+
+```js
+<Row gap="small" align="center">
+  <Badge size="small" color="highlight" />
+  <Span>Online</Span>
+</Row>
+```
+
+---
+
+## Visual markers
+
+Use badges to highlight new or important items:
+
+<Row gap="medium" align="center" padding="medium">
+  <Row gap="small" align="center">
+    <Span>New feature</Span>
+    <Badge size="xsmall" color="highlight" />
+  </Row>
+</Row>
+
+```js
+<Row gap="small" align="center">
+  <Span>New feature</Span>
+  <Badge size="xsmall" color="highlight" />
+</Row>
+```

package/src/pages/Button.mdx

@@ -1,105 +1,163 @@
 import { Button } from "../Button";
 import { Row } from "../Row";
+import { Column } from "../Column";
+import { Icon } from "../Icon";
 
 # Button
 
-The `Button` component can be used for the user to take actions with a single click, it supports a variety of styles each of them with different semantics.
+The `Button` component enables users to trigger actions with a single click. It supports multiple color variants for different semantic purposes and can include icons.
 
 ---
 
-## Button variants
+## Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `string` | Yes | - | Button text label |
+| `color` | `InteractableColor` | Yes | - | `"positive"`, `"primary"`, `"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 matching the text color |
+| `disabled` | `boolean` | No | `false` | Disables interaction |
+| `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 |
+| `bold` | `boolean` | No | `false` | Bold text |
 
-The basic `Button` comes in three main variants, each of them with a specific intent in mind. It also support a "disabled" variant, for cases where the button is not actionable.
+---
+
+## Color variants
+
+Each color variant communicates a different intent to users:
 
-- Positive: actions that are going to create something or strongly agree
-- Primary: actions that are less central to the user experience
-- Negative: actions that are going to delete data or remove something
-- Dark: primary actions in a dark theme
-- Light: primary actions in a light theme
-- Disabled: actions that are not available
+- **Positive**: Confirmations, submissions, primary actions
+- **Primary**: Secondary or neutral actions
+- **Negative**: Destructive actions like delete or remove
+- **Dark/Light**: Theme-specific variants for special contexts
 
 <Row gap="large" align="center" padding="large" justify="center">
-  <Button label="Positive" color="positive" onClick={() => {}} />
-  <Button label="Primary" color="primary" onClick={() => {}} />
-  <Button label="Negative" color="negative" onClick={() => {}} />
-  <Button label="Disabled" color="positive" disabled onClick={() => {}} />
-  <Button label="Dark" color="dark" onClick={() => {}} />
-  <Button label="Light" color="light" onClick={() => {}} />
+  <Button color="positive" onClick={() => {}}>Positive</Button>
+  <Button color="primary" onClick={() => {}}>Primary</Button>
+  <Button color="negative" onClick={() => {}}>Negative</Button>
+  <Button color="dark" onClick={() => {}}>Dark</Button>
+  <Button color="light" onClick={() => {}}>Light</Button>
 </Row>
 
 ```js
+<Button color="positive" onClick={() => {}}>Positive</Button>
+<Button color="primary" onClick={() => {}}>Primary</Button>
+<Button color="negative" onClick={() => {}}>Negative</Button>
+<Button color="dark" onClick={() => {}}>Dark</Button>
+<Button color="light" onClick={() => {}}>Light</Button>
+```
+
+---
+
+## Bare variant
+
+The `bare` prop removes the background color, creating a lighter appearance that integrates well within complex layouts or when you need a less prominent action.
+
 <Row gap="large" align="center" padding="large" justify="center">
-  <Button label="Positive" color="positive" onClick={() => {}} />
-  <Button label="Primary" color="primary" onClick={() => {}} />
-  <Button label="Negative" color="negative" onClick={() => {}} />
-  <Button label="Disabled" color="positive" disabled onClick={() => {}} />
-  <Button label="Dark" color="dark" onClick={() => {}} />
-  <Button label="Light" color="light" onClick={() => {}} />
+  <Button bare color="positive" onClick={() => {}}>Positive</Button>
+  <Button bare color="primary" onClick={() => {}}>Primary</Button>
+  <Button bare color="negative" onClick={() => {}}>Negative</Button>
+  <Button bare color="dark" onClick={() => {}}>Dark</Button>
+  <Button bare color="light" onClick={() => {}}>Light</Button>
 </Row>
+
+```js
+<Button bare color="positive" onClick={() => {}}>Positive</Button>
+<Button bare color="primary" onClick={() => {}}>Primary</Button>
+<Button bare color="negative" onClick={() => {}}>Negative</Button>
 ```
 
 ---
 
-## Bare button
+## With border
 
-The bare `Button` variants fulfill the same function than the basic counterparts but have a lighter style that can be more easily integrated in complex components.
+Add a `border` prop to give buttons a defined edge. Works well with `bare` for outlined button styles.
 
 <Row gap="large" align="center" padding="large" justify="center">
-  <Button bare label="Positive" color="positive" onClick={() => {}} />
-  <Button bare label="Primary" color="primary" onClick={() => {}} />
-  <Button bare label="Negative" color="negative" onClick={() => {}} />
-  <Button bare label="Disabled" color="positive" disabled onClick={() => {}} />
-  <Button bare label="Dark" color="dark" onClick={() => {}} />
-  <Button bare label="Light" color="light" onClick={() => {}} />
+  <Button border bare color="positive" onClick={() => {}}>Positive</Button>
+  <Button border bare color="primary" onClick={() => {}}>Primary</Button>
+  <Button border bare color="negative" onClick={() => {}}>Negative</Button>
 </Row>
 
 ```js
+<Button border bare color="positive" onClick={() => {}}>Outlined</Button>
+<Button border bare color="primary" onClick={() => {}}>Outlined</Button>
+<Button border bare color="negative" onClick={() => {}}>Outlined</Button>
+```
+
+---
+
+## With icon
+
+Buttons can include icons to reinforce their purpose. Use `icon` to specify the icon and `iconPosition` to place it on the left or right.
+
 <Row gap="large" align="center" padding="large" justify="center">
-  <Button bare label="Positive" color="positive" onClick={() => {}} />
-  <Button bare label="Primary" color="primary" onClick={() => {}} />
-  <Button bare label="Negative" color="negative" onClick={() => {}} />
-  <Button bare label="Disabled" color="positive" disabled onClick={() => {}} />
-  <Button bare label="Dark" color="dark" onClick={() => {}} />
-  <Button bare label="Light" color="light" onClick={() => {}} />
+  <Button color="positive" icon="fa-check" onClick={() => {}}>Confirm</Button>
+  <Button color="negative" icon="fa-trash" onClick={() => {}}>Delete</Button>
+  <Button color="primary" icon="fa-arrow-right" iconPosition="right" onClick={() => {}}>Next</Button>
 </Row>
+
+```js
+<Button color="positive" icon="fa-check" onClick={() => {}}>
+  Confirm
+</Button>
+
+<Button color="negative" icon="fa-trash" onClick={() => {}}>
+  Delete
+</Button>
+
+<Button color="primary" icon="fa-arrow-right" iconPosition="right" onClick={() => {}}>
+  Next
+</Button>
 ```
 
-## Border
+---
+
+## Disabled state
 
-The `Button` can have a border which will match the current text color
+Disabled buttons prevent interaction and display a muted appearance. The component uses `aria-disabled` for accessibility.
 
 <Row gap="large" align="center" padding="large" justify="center">
-  <Button border bare label="Positive" color="positive" onClick={() => {}} />
-  <Button border bare label="Primary" color="primary" onClick={() => {}} />
-  <Button border bare label="Negative" color="negative" onClick={() => {}} />
-  <Button
-    border
-    bare
-    label="Disabled"
-    color="positive"
-    disabled
-    onClick={() => {}}
-  />
-  <Button border bare label="Dark" color="dark" onClick={() => {}} />
-  <Button border bare label="Light" color="light" onClick={() => {}} />
+  <Button color="positive" disabled onClick={() => {}}>Disabled</Button>
+  <Button bare color="positive" disabled onClick={() => {}}>Disabled bare</Button>
+  <Button border bare color="positive" disabled onClick={() => {}}>Disabled outlined</Button>
 </Row>
 
 ```js
+<Button color="positive" disabled onClick={() => {}}>
+  Disabled
+</Button>
+```
+
+---
+
+## Sizes
+
+Control text size with the `size` prop. Available sizes: `"xsmall"`, `"small"`, `"medium"`, `"large"`, `"xlarge"`.
+
 <Row gap="large" align="center" padding="large" justify="center">
-  <Button border bare label="Positive" color="positive" onClick={() => {}} />
-  <Button border bare label="Primary" color="primary" onClick={() => {}} />
-  <Button border bare label="Negative" color="negative" onClick={() => {}} />
-  <Button
-    border
-    bare
-    label="Disabled"
-    color="positive"
-    disabled
-    onClick={() => {}}
-  />
-  <Button border bare label="Dark" color="dark" onClick={() => {}} />
-  <Button border bare label="Light" color="light" onClick={() => {}} />
+  <Button color="positive" size="small" onClick={() => {}}>Small</Button>
+  <Button color="positive" size="medium" onClick={() => {}}>Medium</Button>
+  <Button color="positive" size="large" onClick={() => {}}>Large</Button>
 </Row>
+
+```js
+<Button color="positive" size="small" onClick={() => {}}>Small</Button>
+<Button color="positive" size="medium" onClick={() => {}}>Medium</Button>
+<Button color="positive" size="large" onClick={() => {}}>Large</Button>
 ```
 
 ---
+
+## Accessibility
+
+- Buttons use semantic `<button>` elements
+- Disabled state is communicated via `aria-disabled` attribute
+- Focus states are clearly visible with outline styling
+- Click handlers are ignored when disabled, preventing accidental actions