aidos-ui 3.0.31 → 4.0.1

package/src/jss.tsx

@@ -11,13 +11,13 @@ export type Styles = CSS.Properties<
   string | number | CSS.Properties<string | number>
 >;
 
-export type JSStyle =
+export type JSS =
   | Styles
   | null
   | false
   | undefined
   | { [key: string]: Styles }
-  | Array<JSStyle>;
+  | Array<JSS>;
 
 const aliases: {
   [alias: string]: (value: StylesValueType) => [string, StylesValueType][];
@@ -137,21 +137,21 @@ const getCSS = (key: string, value): [string, string] => {
   return [cssProp, cssValue];
 };
 
-const flattenJSStyle = (jss: JSStyle): Styles => {
+const flattenJSS = (jss: JSS): Styles => {
   if (!jss) {
     return {};
   } else if (Array.isArray(jss)) {
     // @ts-ignore
-    return jss.reduce((acc: Styles, jss: JSStyle) => {
-      return { ...acc, ...flattenJSStyle(jss) };
+    return jss.reduce((acc: Styles, jss: JSS) => {
+      return { ...acc, ...flattenJSS(jss) };
     }, {});
   } else {
     return jss;
   }
 };
 
-export const toClassnames = (jss: JSStyle): string => {
-  jss = flattenJSStyle(jss);
+export const toClassnames = (jss: JSS): string => {
+  jss = flattenJSS(jss);
 
   const stylesStack = Object.entries(jss);
   const classNames = [];
@@ -205,12 +205,12 @@ export const toClassnames = (jss: JSStyle): string => {
 
 const serverStyles = [];
 
-export function JSStylesProvider({
+export function JSSProvider({
   themes,
   children,
 }: {
   themes: { dark: Theme; light: Theme };
-  children: JSX.Element;
+  children: React.JSX.Element;
 }) {
   const stylesRef = useRef<string[] | null>(null);
 
@@ -324,7 +324,7 @@ export function getSpacing(spacing: Spacing): string {
   }
 }
 
-export function getPadding(padding: Padding): JSStyle {
+export function getPadding(padding: Padding): JSS {
   if (Array.isArray(padding)) {
     const [vertical, horizontal] = padding;
     return {
@@ -340,7 +340,7 @@ export function getPadding(padding: Padding): JSStyle {
   }
 }
 
-export function getMargin(margin: Margin): JSStyle {
+export function getMargin(margin: Margin): JSS {
   if (Array.isArray(margin)) {
     const [vertical, horizontal] = margin;
     return {
@@ -534,10 +534,10 @@ const backgroundStyles = {
     backgroundColor: cssVar("--highlight"),
   },
   light: {
-    backgroundColor: "white",
+    backgroundColor: cssVar("--light-text"),
   },
   dark: {
-    backgroundColor: "black",
+    backgroundColor: cssVar("--primary-text"),
   },
   warning: {
     backgroundColor: cssVar("--warning"),
@@ -559,7 +559,7 @@ const backgroundStyles = {
   },
 };
 
-export const getBackground = (color: Color): JSStyle => {
+export const getBackground = (color: Color): JSS => {
   return backgroundStyles[color];
 };
 
@@ -572,25 +572,25 @@ export const TABLET_MEDIA = `@media (min-width: ${MOBILE}px) and (max-width: ${T
 export const LAPTOP_MEDIA = `@media (min-width: ${TABLET}px) and (max-width: ${LAPTOP}px)`;
 export const DESKTOP_MEDIA = `@media (min-width: ${LAPTOP}px)`;
 
-export function mobile(jss: JSStyle): { [key: string]: JSStyle } {
+export function mobile(jss: JSS): { [key: string]: JSS } {
   return {
     [MOBILE_MEDIA]: jss,
   };
 }
 
-export function tablet(jss: JSStyle): { [key: string]: JSStyle } {
+export function tablet(jss: JSS): { [key: string]: JSS } {
   return {
     [TABLET_MEDIA]: jss,
   };
 }
 
-export function laptop(jss: JSStyle): { [key: string]: JSStyle } {
+export function laptop(jss: JSS): { [key: string]: JSS } {
   return {
     [LAPTOP_MEDIA]: jss,
   };
 }
 
-export function desktop(jss: JSStyle): { [key: string]: JSStyle } {
+export function desktop(jss: JSS): { [key: string]: JSS } {
   return {
     [DESKTOP_MEDIA]: jss,
   };

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