@marigold/components 0.0.2 → 0.3.0

package/src/theme.ts

@@ -1,29 +1,50 @@
-export type CSSObject = object;
+import { type CSSObject, type Theme as Scales } from '@marigold/system';
 
-export type BaseTheme = {
-  breakpoints: number[];
-  space: number[];
-  fonts: {
-    body: string;
-    heading: string;
-  };
-  fontSizes: string[];
-  fontWeights: {
-    body: number;
-    heading: number;
-    bold: number;
-  };
-  lineHeights: {
-    body: number;
-    heading: number;
-  };
-  colors: {
-    text: string;
-    background: string;
-    primary: string;
-    secondary: string;
-    muted: string;
-    [key: string]: string;
-  };
-  [key: string]: CSSObject;
-};
+// Provider
+// ---------------
+import { type RootThemeExtension } from './Provider';
+
+// Components
+// ---------------
+import { type AlertThemeExtension } from './Alert';
+import { type BadgeThemeExtension } from './Badge';
+import { type ButtonThemeExtension } from './Button';
+import { type CardThemeExtension } from './Card';
+import { type CheckboxThemeExtension } from './Checkbox';
+import { type DividerThemeExtension } from './Divider';
+import { type ImageThemeExtension } from './Image';
+import { type InputThemeExtension } from './Input';
+import { type LabelThemeExtension } from './Label';
+import { type LinkThemeExtension } from './Link';
+import { type MenuThemeExtension } from './Menu';
+import { type MenuItemThemeExtension } from './MenuItem';
+import { type MessageThemeExtension } from './Message';
+import { type RadioThemeExtension } from './Radio';
+import { type SelectThemeExtension } from './Select';
+import { type SliderThemeExtension } from './Slider';
+import { type TextThemeExtension } from './Text';
+import { type TextareaThemeExtension } from './Textarea';
+import { type ValidationMessageThemeExtension } from './ValidationMessage';
+
+export interface Theme
+  extends Scales,
+    RootThemeExtension<CSSObject>,
+    AlertThemeExtension<CSSObject>,
+    BadgeThemeExtension<CSSObject>,
+    ButtonThemeExtension<CSSObject>,
+    CardThemeExtension<CSSObject>,
+    CheckboxThemeExtension<CSSObject>,
+    DividerThemeExtension<CSSObject>,
+    ImageThemeExtension<CSSObject>,
+    InputThemeExtension<CSSObject>,
+    LabelThemeExtension<CSSObject>,
+    LinkThemeExtension<CSSObject>,
+    MenuThemeExtension<CSSObject>,
+    MenuItemThemeExtension<CSSObject>,
+    MessageThemeExtension<CSSObject>,
+    RadioThemeExtension<CSSObject>,
+    SelectThemeExtension<CSSObject>,
+    SliderThemeExtension<CSSObject>,
+    TextThemeExtension<CSSObject>,
+    TextareaThemeExtension<CSSObject>,
+    ValidationMessageThemeExtension<CSSObject> {}

package/dist/Heading/Heading.d.ts

@@ -1,5 +0,0 @@
-declare type HeadingProps = {
-    variant?: string;
-};
-export declare const Heading: import("@marigold/system").SystemComponent<HeadingProps, "h2">;
-export {};

package/dist/Heading/index.d.ts

@@ -1 +0,0 @@
-export * from './Heading';

package/dist/Hidden/Hidden.d.ts

@@ -1,6 +0,0 @@
-declare type HiddenProps = {
-    variant?: string;
-    show?: boolean;
-};
-export declare const Hidden: import("@marigold/system").SystemComponent<HiddenProps, "span">;
-export {};

package/dist/Hidden/index.d.ts

@@ -1 +0,0 @@
-export * from './Hidden';

package/dist/Svg/Svg.d.ts

@@ -1,6 +0,0 @@
-declare type SvgProps = {
-    variant?: string;
-    size?: number;
-};
-export declare const Svg: import("@marigold/system").SystemComponent<SvgProps, "svg">;
-export {};

package/dist/Svg/index.d.ts

@@ -1 +0,0 @@
-export * from './Svg';

package/src/Alert/Alert.stories.mdx

@@ -1,49 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Alert, Text } from '@marigold/components';
-import { useStyles } from '@marigold/system';
-
-<Meta title="Components/Content/Alert" />
-
-# Alert
-
-## Description
-
-Simple colored element to display an alert message as a reaction to an event.
-Predefined variants are info, success, danger and warning.
-
-## Properties
-
-| Property             | Type     | Default |
-| :------------------- | :------- | :------ |
-| `variant` (optional) | `string` | `info`  |
-
-## Import
-
-```tsx
-import { Alert } from '@marigold/components';
-```
-
-## Usage
-
-<Preview>
-  <Story name="Info">
-    <Alert className={useStyles({ color: '#f3f3f3' })}>
-      <Text>hey, info!</Text>
-    </Alert>
-  </Story>
-  <Story name="Success">
-    <Alert variant="success">
-      <Text>hey, success!</Text>
-    </Alert>
-  </Story>
-  <Story name="Danger">
-    <Alert variant="danger">
-      <Text>hey, danger!</Text>
-    </Alert>
-  </Story>
-  <Story name="Warning">
-    <Alert variant="warning">
-      <Text>hey, warning!</Text>
-    </Alert>
-  </Story>
-</Preview>

package/src/Badge/Badge.stories.mdx

@@ -1,41 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Badge } from '@marigold/components';
-import { Check } from '@marigold/icons';
-
-<Meta title="Components/Content/Badge" />
-
-# Badge
-
-## Description
-
-A badge tags an element with a short note and color. The content of the badge can be anything but preferably a string and/or icon.
-
-## Properties
-
-| Property                     | Type     | Default   |
-| :--------------------------- | :------- | :-------- |
-| `variant` (optional)         | `string` | `badge`   |
-| `borderColor` (optional)     | string   | `inherit` |
-| `backgroundColor` (optional) | string   | `inherit` |
-
-## Import
-
-```tsx
-import { Badge } from '@marigold/components';
-```
-
-## Usage
-
-<Preview>
-  <Story name="Colored Background">
-    <Badge borderColor="border" backgroundColor="orange">
-      <Text>New</Text>
-    </Badge>
-  </Story>
-  <Story name="Outlined">
-    <Badge borderColor="orange">
-      <Check size={18} />
-      cool
-    </Badge>
-  </Story>
-</Preview>

package/src/Button/Button.stories.mdx

@@ -1,155 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Facebook } from '@marigold/icons';
-import { Button } from '@marigold/components';
-import { useStyles } from '@marigold/system';
-
-<Meta title="Components/Form/Button" />
-
-# Button
-
-## Description
-
-With the Button component you can render a `button` element.
-The style variant and size of the button can be added with the variant prop and is composed like `variant.size`.
-
-## Properties
-
-| Property             | Type                                                                                                 | Default         |
-| :------------------- | :--------------------------------------------------------------------------------------------------- | :-------------- |
-| `variant` (optional) | `primary.small`, `primary.large`, `secondary.small`, `secondary.large`, `ghost.small`, `ghost.large` | `primary.large` |
-
-## Import
-
-```tsx
-import { Button } from '@marigold/components';
-```
-
-## Usage
-
-### Large
-
-<Preview>
-  <Story name="primary.large">
-    <Button variant="primary.large">Primary</Button>
-  </Story>
-  <Story name="secondary.large">
-    <Button variant="secondary.large">Secondary</Button>
-  </Story>
-  <Story name="ghost.large">
-    <Button variant="ghost.large">Ghost</Button>
-  </Story>
-</Preview>
-
-### Small
-
-<Preview>
-  <Story name="primary.small">
-    <Button variant="primary.small">Primary</Button>
-  </Story>
-  <Story name="secondary.small">
-    <Button variant="secondary.small">Secondary</Button>
-  </Story>
-  <Story name="ghost.small">
-    <Button variant="ghost.small">Ghost</Button>
-  </Story>
-</Preview>
-
-### Disabled
-
-<Preview>
-  <Story name="primary.large.disabled">
-    <Button variant="primary.large" disabled>
-      Primary Large Disabled
-    </Button>
-  </Story>
-  <Story name="secondary.large.disabled">
-    <Button variant="secondary.large" disabled>
-      Secondary Large Disabled
-    </Button>
-  </Story>
-  <Story name="ghost.large.disabled">
-    <Button variant="ghost.large" disabled>
-      Ghost Large Disabled
-    </Button>
-  </Story>
-</Preview>
-
-### Default with icon
-
-<Preview>
-  <Story name="primary.large with default icon">
-    <Button variant="primary.large">
-      <Facebook /> Like me!
-    </Button>
-  </Story>
-  <Story name="primary.small with default icon">
-    <Button variant="primary.small">
-      <Facebook /> Like me!
-    </Button>
-  </Story>
-  <Story name="secondary.large with default icon">
-    <Button variant="secondary.large">
-      <Facebook /> Like me!
-    </Button>
-  </Story>
-  <Story name="secondary.small with default icon">
-    <Button variant="secondary.small">
-      <Facebook /> Like me!
-    </Button>
-  </Story>
-  <Story name="ghost.large with default icon">
-    <Button variant="ghost.large">
-      <Facebook /> Like me!
-    </Button>
-  </Story>
-  <Story name="ghost.small with default icon">
-    <Button variant="ghost.small">
-      <Facebook /> Like me!
-    </Button>
-  </Story>
-</Preview>
-
-### Large with large icon
-
-<Preview>
-  <Story name="primary.large with large icon">
-    <Button variant="primary.large">
-      <Facebook size={48} /> Like me!
-    </Button>
-  </Story>
-</Preview>
-
-### Small with small icon
-
-<Preview>
-  <Story name="primary.small with small icon">
-    <Button variant="primary.small">
-      <Facebook size={20} /> Like me!
-    </Button>
-  </Story>
-</Preview>
-
-### With color
-
-<Preview>
-  <Story name="with color">
-    <Button variant="primary.small">
-      <Facebook fill="black" /> Like me!
-    </Button>
-  </Story>
-</Preview>
-
-### Custom styled
-
-<Preview>
-  <Story name="custom">
-    <Button
-      variant="primary.small"
-      className={useStyles({
-        bg: '#3b5998',
-      })}
-    >
-      <Facebook /> Like me!
-    </Button>
-  </Story>
-</Preview>

package/src/Column/Column.stories.mdx

@@ -1,76 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Column } from '@marigold/components';
-import { useState } from 'react';
-import { useStyles } from '@marigold/system';
-
-<Meta title="Components/Layout/Column" />
-
-# Column
-
-## Description
-
-With the Column component you can add a column with a width in percent of the full content.
-The element uses always the themeSection with the name: `layout` in your given theme. The variant in your section can be added with the variant prop. The default variant is `column`.
-
-## Properties
-
-| Property             | Type                                    | Default  |
-| :------------------- | :-------------------------------------- | :------- |
-| `variant` (optional) | `string`                                | `column` |
-| `width` (optional)   | `1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12` | `12`     |
-
-## Import
-
-```tsx
-import { Column } from '@marigold/components';
-```
-
-## Usage
-
-<Preview>
-  <Story name="Column">
-    <Column
-      className={useStyles({
-        textAlign: 'center',
-        border: '1px solid',
-        padding: 2,
-        margin: 2,
-      })}
-    >
-      width=12
-    </Column>
-    <Column
-      width={6}
-      className={useStyles({
-        textAlign: 'center',
-        border: '1px solid',
-        padding: 2,
-        margin: 2,
-      })}
-    >
-      width=6
-    </Column>
-    <Column
-      width={3}
-      className={useStyles({
-        textAlign: 'center',
-        border: '1px solid',
-        padding: 2,
-        margin: 2,
-      })}
-    >
-      width=3
-    </Column>
-    <Column
-      width={2}
-      className={useStyles({
-        textAlign: 'center',
-        border: '1px solid',
-        padding: 2,
-        margin: 2,
-      })}
-    >
-      width=2
-    </Column>
-  </Story>
-</Preview>

package/src/Container/Container.stories.mdx

@@ -1,42 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Container, Text } from '@marigold/components';
-import { useStyles } from '@marigold/system';
-
-<Meta title="Components/Layout/Container" />
-
-# Container
-
-## Description
-
-Primitive layout component to embed other elements.
-The element uses always the themeSection with the name: `layout` in your given theme. The variant in your section can be added with the variant prop. The default variant is `container`.
-
-## Properties
-
-| Property             | Type     | Default     |
-| :------------------- | :------- | :---------- |
-| `variant` (optional) | `string` | `container` |
-
-## Import
-
-```tsx
-import { Container } from '@marigold/components';
-```
-
-## Usage
-
-<Preview>
-  <Story name="Example 1">
-    <Container>
-      <Text>Example #1</Text>
-    </Container>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name="Example 2">
-    <Container className={useStyles({ bg: 'green' })}>
-      <Text>Example #2</Text>
-    </Container>
-  </Story>
-</Preview>

package/src/Divider/Divider.stories.mdx

@@ -1,42 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Divider, Text } from '@marigold/components';
-
-<Meta title="Components/Layout/Divider" />
-
-# Divider
-
-## Description
-
-A divider is a layout or list element to group content or separate elements.
-The themeSection is `divider` and the variant can be added with the variant prop which is `regular` per default.
-
-## Properties
-
-| Property             | Type     | Default   |
-| :------------------- | :------- | :-------- |
-| `variant` (optional) | `string` | `regular` |
-
-## Import
-
-```tsx
-import { Divider } from '@marigold/components';
-```
-
-## Usage
-
-<Preview>
-  <Story name="Divider/regular">
-    <div>
-      <Text>Some text</Text>
-      <Divider />
-      <Text>Some other text to show regular divider</Text>
-    </div>
-  </Story>
-  <Story name="Divider/bold">
-    <div>
-      <Text>Some text</Text>
-      <Divider variant="bold" />
-      <Text>Some other text to show strong divider</Text>
-    </div>
-  </Story>
-</Preview>

package/src/Field/Field.stories.mdx

@@ -1,57 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Field } from '@marigold/components';
-import { useStyles } from '@marigold/system';
-
-<Meta title="Components/Form/Field" />
-
-# Field
-
-## Description
-
-With the Field component you can add a HTML `<label>` and `<input>` element to your form.
-The element uses always the themeSection with the name: `form` in your given theme. The variant in your section can be added with the variant prop.
-The default variant is `field`.
-
-## Properties
-
-| Property             | Type                                                                                       | Default |
-| :------------------- | :----------------------------------------------------------------------------------------- | :------ |
-| `variant (optional)` | `string`                                                                                   |         |
-| `htmlFor`            | `string`                                                                                   |         |
-| `label`              | `string`                                                                                   |         |
-| `error (optional)`   | `string`                                                                                   |         |
-| `type`               | `date, datetime-local, email, month, number, password, search, tel, text, time, url, week` | `text`  |
-
-## Import
-
-```tsx
-import { Field } from '@marigold/components';
-```
-
-## Usage
-
-<Preview>
-  <Story name="Field1">
-    <div>
-      <Field label="Firstname" htmlFor="myId" />
-      <br />
-      <Field label="Name" htmlFor="myId" error="Validation message" />
-    </div>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name="Field2">
-    <div>
-      <Field
-        label="Pick your date"
-        type="date"
-        htmlFor="myId"
-        error="ERROR!"
-        className={useStyles({ color: '#dd4142' })}
-      />
-      <br />
-      <Field label="Choose the week" type="week" htmlFor="myId" />
-    </div>
-  </Story>
-</Preview>

package/src/Heading/Heading.stories.mdx

@@ -1,79 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Heading, Text } from '@marigold/components';
-
-<Meta title="Components/Typography/Heading" />
-
-# Heading
-
-## Description
-
-Use the Heading component for headings of texts. Predefined variants are `h1`, `h2`, `h3`, `h4`, `h5` and `h6`.
-
-## Properties
-
-| Property  | Type     | Default |
-| :-------- | :------- | :------ |
-| `variant` | `string` | `h2`    |
-
-## Import
-
-```tsx
-import { Heading } from '@marigold/components';
-```
-
-## Usage
-
-<Preview>
-  <Story name="Headings">
-    <div>
-      <Heading variant="h1">H1 amazing heading</Heading>
-      <Text as="p" variant="heading">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet.
-      </Text>
-      <Heading>H2 amazing heading</Heading>
-      <Text as="p" variant="heading">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet.
-      </Text>
-      <Heading variant="h3">H3 amazing heading</Heading>
-      <Text as="p" variant="heading">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet.
-      </Text>
-      <Heading variant="h4">H4 amazing heading</Heading>
-      <Text as="p" variant="heading">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet.
-      </Text>
-      <Heading variant="h5">H5 amazing heading</Heading>
-      <Text as="p" variant="heading">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet.
-      </Text>
-      <Heading variant="h6">H6 amazing heading</Heading>
-      <Text as="p" variant="heading">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet.
-      </Text>
-    </div>
-  </Story>
-</Preview>