@maskingtech/designsystem 0.0.1

package/LICENCE

@@ -0,0 +1,23 @@
+
+(The MIT License)
+
+Copyright (c) 2025 Masking Technology B.V. <https://masking.tech>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,528 @@
+# Design System | Masking Technology
+
+Simple design system used for our internal projects.
+
+## Installation
+
+```bash
+npm install @maskingtech/designsystem
+```
+
+## Basic elements
+
+### Avatar
+
+A rounded image element.
+
+Properties:
+
+- **source** - string (required)
+- **title** - string (optional)
+- **alt** - string (optional)
+- **width** - string (optional)
+- **height** - string (optional)
+- **fit** - `fill` | `contain` | `cover` | `none` | `scale-down` (optional, default `contain`)
+
+Example:
+
+```tsx
+import { Avatar } from '@maskingtech/designsystem';
+
+<Avatar
+    source='http://example.com/avatar.png'
+    title='My avatar'
+    alt='My avatar'
+    width='100px'
+/>
+```
+
+### Border
+
+A bordered container element.
+
+Properties:
+
+- **type** - `normal`| `dashed` | `dotted` (optional, default `normal`)
+- **size** - `large` | `medium` | `small` (optional, default `large`)
+- **padding** - `large` | `medium` | `small` | `none` (optional, default `large`)
+
+Example:
+
+```tsx
+import { Border } from '@maskingtech/designsystem';
+
+<Border size='small' padding='small'>
+    <p>This is the bordered content</p>
+</Border>
+```
+
+### Button
+
+A clickable input element styled as a button.
+
+Properties:
+
+- **type** - `submit` | `primary` | `secondary` | `disabled` (optional, default `primary`)
+- **size** - `large` | `medium` | `small` (optional, default `medium`)
+- **text** - string (required)
+- **onClick** - `() => void` (optional)
+
+Example:
+
+```tsx
+import { Button } from '@maskingtech.designsystem';
+
+<Button type='primary' size='medium' text='Save' onClick={() => console.log('clicked')} />
+```
+
+### Cell
+
+A layout cell that can be fixed or fluid.
+
+Properties:
+
+- **sizing** - `fixed` | `fluid` (optional, default `fluid`)
+- **children** - ReactNode
+
+Example:
+
+```tsx
+import { Cell } from '@maskingtech.designsystem';
+
+<Cell sizing='fixed'>Fixed content</Cell>
+```
+
+### ClickArea
+
+A wrapper element that handles clicks and optional padding.
+
+Properties:
+
+- **padding** - `large` | `medium` | `small` | `none` (optional, default `none`)
+- **onClick** - `() => void` (optional)
+- **children** - ReactNode (optional)
+
+Example:
+
+```tsx
+import { ClickArea } from '@maskingtech.designsystem';
+
+<ClickArea padding='small' onClick={() => alert('clicked')}>Clickable content</ClickArea>
+```
+
+### Column
+
+A vertical layout container with alignment and gap options.
+
+Properties:
+
+- **alignX** - `left` | `center` | `right` | `stretch` (optional, default `left`)
+- **alignY** - `top` | `center` | `bottom` | `justify` (optional, default `top`)
+- **gap** - `large` | `medium` | `small` | `none` (optional, default `medium`)
+- **wrap** - `wrap` | `nowrap` (optional, default `nowrap`)
+- **children** - ReactNode
+
+Example:
+
+```tsx
+import { Column } from '@maskingtech.designsystem';
+
+<Column alignX='center' gap='small'>
+  <div>Item 1</div>
+  <div>Item 2</div>
+</Column>
+```
+
+### Form
+
+A form wrapper that prevents default submit and forwards the form element via a handler.
+
+Properties:
+
+- **children** - ReactNode
+- **submitHandler** - `(form: HTMLFormElement) => void` (optional)
+
+Example:
+
+```tsx
+import { Form } from '@maskingtech.designsystem';
+
+<Form submitHandler={(form) => console.log('submit', form)}>
+  {/* inputs here */}
+</Form>
+```
+
+### Grid
+
+A grid layout with preset column layouts and gaps.
+
+Properties:
+
+- **layout** - `two-columns` | `three-columns` | `four-columns` (required)
+- **gap** - `large` | `medium` | `small` | `none` (optional, default `medium`)
+- **children** - ReactNode
+
+Example:
+
+```tsx
+import { Grid } from '@maskingtech.designsystem';
+
+<Grid layout='three-columns' gap='small'>
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+</Grid>
+```
+
+### Icon
+
+A simple icon span using a set of predefined icon types.
+
+Properties:
+
+- **type** - one of the supported icon identifiers (e.g. `attachment`, `bookmark`, `close`, `user`, `search`, etc.) (required)
+
+Example:
+
+```tsx
+import { Icon } from '@maskingtech.designsystem';
+
+<Icon type='search' />
+```
+
+### Image
+
+A styled image element.
+
+Properties:
+
+- **source** - string (required)
+- **title** - string (optional)
+- **alt** - string (optional)
+- **width** - string (optional)
+- **height** - string (optional)
+- **fit** - `fill` | `contain` | `cover` | `none` | `scale-down` (optional, default `contain`)
+
+Example:
+
+```tsx
+import { Image } from '@maskingtech.designsystem';
+
+<Image source='http://example.com/photo.jpg' alt='Example' width='200px' fit='cover' />
+```
+
+### Input
+
+A labeled input wrapper that composes `Label` with an input element (`TextBox`, `TextArea` or `Select`).
+
+Properties:
+
+- **label** - `ReactElement<LabelProps>` (required)
+- **element** - `ReactElement<TextBoxProps | TextAreaProps | SelectProps>` (required)
+
+Example:
+
+```tsx
+import { Input, Label, TextBox } from '@maskingtech.designsystem';
+
+<Input label={<Label value='Name' />} element={<TextBox name='name' />} />
+```
+
+### Label
+
+Simple text label for inputs.
+
+Properties:
+
+- **value** - string (required)
+
+Example:
+
+```tsx
+import { Label } from '@maskingtech.designsystem';
+
+<Label value='Email' />
+```
+
+### Link
+
+A styled anchor element.
+
+Properties:
+
+- **url** - string (optional)
+- **target** - string (optional)
+- **children** - ReactNode
+
+Example:
+
+```tsx
+import { Link } from '@maskingtech.designsystem';
+
+<Link url='https://example.com' target='_blank'>Visit</Link>
+```
+
+### Modal
+
+A modal dialog built on the native `<dialog>` element.
+
+Properties:
+
+- **open** - boolean (required)
+- **sizing** - `full` | `content` (optional, default `content`)
+- **children** - ReactNode (optional)
+
+Example:
+
+```tsx
+import { Modal } from '@maskingtech.designsystem';
+
+<Modal open={true} sizing='content'>
+  <p>Modal content</p>
+</Modal>
+```
+
+### Panel
+
+A versatile container for contextual content (alerts, messages, etc.).
+
+Properties:
+
+- **type** - `normal` | `alert` | `warning` | `success` | `error` | `transparent` (optional, default `normal`)
+- **padding** - `large` | `medium` | `small` (optional, default `large`)
+- **children** - ReactNode (optional)
+
+Example:
+
+```tsx
+import { Panel } from '@maskingtech.designsystem';
+
+<Panel type='warning' padding='small'>Check this out</Panel>
+```
+
+### Paragraph
+
+Styled paragraph element.
+
+Properties:
+
+- **size** - `large` | `medium` | `small` (optional, default `medium`)
+- **children** - ReactNode
+
+Example:
+
+```tsx
+import { Paragraph } from '@maskingtech.designsystem';
+
+<Paragraph size='small'>A short paragraph.</Paragraph>
+```
+
+### Row
+
+A horizontal layout container with alignment and gap options.
+
+Properties:
+
+- **alignX** - `left` | `center` | `right` | `justify` (optional, default `left`)
+- **alignY** - `top` | `center` | `bottom` | `stretch` (optional, default `top`)
+- **gap** - `large` | `medium` | `small` | `none` (optional, default `medium`)
+- **wrap** - `wrap` | `nowrap` (optional, default `nowrap`)
+- **children** - ReactNode
+
+Example:
+
+```tsx
+import { Row } from '@maskingtech.designsystem';
+
+<Row alignX='center' gap='large'>
+  <div>Left</div>
+  <div>Right</div>
+</Row>
+```
+
+### Ruler
+
+A decorative divider either horizontal or vertical.
+
+Properties:
+
+- **direction** - `horizontal` | `vertical` (required)
+- **size** - `small` | `medium` | `large` (optional, default `medium`)
+
+Example:
+
+```tsx
+import { Ruler } from '@maskingtech.designsystem';
+
+<Ruler direction='horizontal' />
+```
+
+### Select
+
+A styled select element that accepts a `Map` of options.
+
+Properties:
+
+- **name** - string (required)
+- **options** - `Map<string, string>` (required)
+- **value** - string (optional)
+- **size** - `large` | `medium` | `small` (optional, default `medium`)
+- **onChange** - `ChangeEventHandler<HTMLSelectElement>` (optional)
+
+Example:
+
+```tsx
+import { Select } from '@maskingtech.designsystem';
+
+const options = new Map([['a', 'Option A'], ['b', 'Option B']]);
+
+<Select name='example' options={options} />
+```
+
+### Spinner
+
+A small loading indicator.
+
+Properties:
+
+- **active** - boolean (optional, default `true`)
+
+Example:
+
+```tsx
+import { Spinner } from '@maskingtech.designsystem';
+
+<Spinner active={true} />
+```
+
+### Text
+
+Inline text element with variants for type, size and weight.
+
+Properties:
+
+- **value** - string (required)
+- **type** - `primary` | `secondary` (optional, default `primary`)
+- **size** - `large` | `medium` | `small` (optional, default `medium`)
+- **weight** - `light` | `normal` | `bold` (optional, default `normal`)
+- **wrap** - `none` | `normal` | `break-word` (optional, default `none`)
+
+Example:
+
+```tsx
+import { Text } from '@maskingtech.designsystem';
+
+<Text value='Label' type='secondary' size='small' />
+```
+
+### TextArea
+
+A multiline text input.
+
+Properties:
+
+- **name** - string (required)
+- **placeholder** - string (optional)
+- **value** - string (optional)
+- **size** - `large` | `medium` | `small` (optional, default `medium`)
+- **rows** - number (optional)
+- **limit** - number (optional)
+- **onChange** - `ChangeEventHandler<HTMLTextAreaElement>` (optional)
+
+Example:
+
+```tsx
+import { TextArea } from '@maskingtech.designsystem';
+
+<TextArea name='message' placeholder='Write...' rows={4} />
+```
+
+### TextBox
+
+A single-line text input.
+
+Properties:
+
+- **name** - string (required)
+- **placeholder** - string (optional)
+- **value** - string (optional)
+- **limit** - number (optional)
+- **pattern** - string (optional)
+- **title** - string (optional)
+- **size** - `large` | `medium` | `small` (optional, default `medium`)
+- **required** - boolean (optional)
+- **onChange** - `ChangeEventHandler<HTMLInputElement>` (optional)
+
+Example:
+
+```tsx
+import { TextBox } from '@maskingtech.designsystem';
+
+<TextBox name='firstName' placeholder='First name' />
+```
+
+### Title
+
+Heading element that maps `size` to `h1`/`h2`/`h3`.
+
+Properties:
+
+- **size** - `large` | `medium` | `small` (optional, default `large`)
+- **children** - ReactNode
+
+Example:
+
+```tsx
+import { Title } from '@maskingtech.designsystem';
+
+<Title size='medium'>Section title</Title>
+```
+
+## Components
+
+### Dropdown
+
+Simple selection dropdown (custom UI) that accepts a `Map` of options.
+
+Properties:
+
+- **options** - `Map<string, string>` (required)
+- **selected** - string (optional, key of the selected option)
+- **onChange** - `(oldKey: string, newKey: string) => void` (optional)
+
+Example:
+
+```tsx
+import { Dropdown } from '@maskingtech.designsystem';
+
+const opts = new Map([['a','A'],['b','B']]);
+<Dropdown options={opts} selected='a' onChange={(o,n)=>console.log(o,n)} />
+```
+
+### Tabs / Tab
+
+Tabs provide a tabbed navigation. Use `Tab` elements as children of `Tabs`.
+
+`Tabs` Properties:
+
+- **separator** - ReactNode (optional)
+- **selectedId** - string (optional)
+- **children** - one or more `Tab` elements (required)
+- **onChange** - `(newId: string, oldId?: string) => void` (optional)
+
+`Tab` Properties:
+
+- **id** - string (required)
+- **title** - ReactNode (required)
+- **children** - ReactNode (required)
+
+Example:
+
+```tsx
+import { Tabs, Tab } from '@maskingtech.designsystem';
+
+<Tabs selectedId='tab1' onChange={(n,o)=>console.log(n,o)}>
+  <Tab id='tab1' title='First'>First content</Tab>
+  <Tab id='tab2' title='Second'>Second content</Tab>
+</Tabs>
+```

package/dist/mtds.css

@@ -0,0 +1 @@
+.ds .selection{--background-color: transparent;--background-color-options: var(--color-primary-background);--background-color-options-hover: var(--color-background-hover);--arrow-color: var(--color-alert-foreground);--border-color: var(--color-border);display:inline-block;position:relative;min-width:fit-content;cursor:pointer}.ds .selection .text{background-color:var(--background-color);padding:.8em 2em .8em 0}.ds .selection .text:after{content:"";position:absolute;right:.7em;top:1.2em;border:.45em solid transparent;border-color:var(--arrow-color) transparent transparent transparent}.ds .selection .text.active:after{top:.8em;border-color:transparent transparent var(--arrow-color) transparent}.ds .selection .options{position:absolute;min-width:fit-content;white-space:nowrap;text-align:left;background-color:var(--background-color-options);border:.1em solid var(--border-color)}.ds .selection .options .option{padding:.8em 2em .8em .8em;background:var(--color-primary-background);cursor:pointer}.ds .selection .options .option:hover{background-color:var(--background-color-options-hover)}.ds .tabs{--margin: var(--margin-container);--foreground-color: var(--color-primary-foreground);--font-size-nav: 1.1em;--background-color-nav-item: transparent;--background-color-nav-item-active: var(--background-color-nav-item);--background-color-nav-item-hover: var(--color-background-hover);--padding-nav-item: .5em 1em;--margin-separator: .2em 0 1em 0;display:flex;flex-direction:column;margin:var(--margin)}.ds .tabs .nav{display:flex;flex-direction:row;justify-content:center;color:var(--foreground-color);font-size:var(--font-size-nav)}.ds .tabs .nav .item{background:var(--background-color-nav-item);cursor:pointer;padding:var(--padding-nav-item);width:100%;text-align:center}.ds .tabs .nav .item:hover,.ds .tabs .nav .item.active:hover{background:var(--background-color-nav-item-hover)}.ds .tabs .nav .item.active{background:var(--background-color-nav-item-active);font-weight:var(--font-weight-bold)}.ds .tabs .separator{margin:var(--margin-separator)}.ds .avatar{border-radius:50%}.ds .avatar.fit-fill{object-fit:fill}.ds .avatar.fit-contain{object-fit:contain}.ds .avatar.fit-cover{object-fit:cover}.ds .avatar.fit-none{object-fit:none}.ds .avatar.fit-scale-down{object-fit:scale-down}.ds .border{--border-radius: 0;--margin: 0;--color: var(--color-border);--size-large: .3em;--size-medium: .2em;--size-small: .1em;--padding-large: 2em;--padding-medium: 1.5em;--padding-small: 1em;border-color:var(--color);border-radius:var(--border-radius);margin:var(--margin);min-width:0}.ds .border.type-normal{border-style:solid}.ds .border.type-dashed{border-style:dashed}.ds .border.type-dotted{border-style:dotted}.ds .border.size-large{border-width:var(--size-large)}.ds .border.size-medium{border-width:var(--size-medium)}.ds .border.size-small{border-width:var(--size-small)}.ds .border.padding-none{padding:0}.ds .border.padding-small{padding:var(--padding-small)}.ds .border.padding-medium{padding:var(--padding-medium)}.ds .border.padding-large{padding:var(--padding-large)}.ds .button{--margin: 0em;--padding-small: .2em 2.2em;--padding-medium: .5em 2.2em;--padding-large: .9em 2.2em;--border-radius: 2em;--border-style: solid;--border-color: var(--color-border);--border-width: var(--width-border);--primary-background-color: var(--color-primary-action-background);--primary-foreground-color: var(--color-primary-action-foreground);--secondary-background-color: var(--color-secondary-action-background);--secondary-foreground-color: var(--color-secondary-action-foreground);--disabled-background-color: transparent;border-radius:var(--border-radius);border:0;cursor:pointer;margin:var(--margin);text-align:center;width:fit-content;font-family:inherit;font-size:inherit}.ds .button.size-small{padding:var(--padding-small)}.ds .button.size-medium{padding:var(--padding-medium)}.ds .button.size-large{padding:var(--padding-large)}.ds .button.type-primary,.ds .button.type-submit{background-color:var(--primary-background-color);color:var(--primary-foreground-color);font-weight:var(--font-weight-bold)}.ds .button.type-primary:hover,.ds .button.type-submit:hover{background-color:color-mix(in srgb,black 10%,var(--primary-background-color))}.ds .button.type-primary:focus{background-color:color-mix(in srgb,black 20%,var(--primary-background-color))}.ds .button.type-secondary{background-color:var(--secondary-background-color);color:var(--secondary-foreground-color);font-weight:var(--font-weight-normal)}.ds .button.type-secondary:hover{background-color:color-mix(in srgb,black 10%,var(--secondary-background-color))}.ds .button.type-secondary:focus{background-color:color-mix(in srgb,black 20%,var(--secondary-background-color))}.ds .button.type-disabled{background-color:var(--disabled-background-color);border-color:var(--border-color);border-style:var(--border-style);border-width:var(--border-width);font-weight:var(--font-weight-light);cursor:default}.ds .cell.sizing-fixed{flex-grow:0;flex-shrink:0;overflow:hidden}.ds .cell.sizing-fluid{flex-grow:1;flex-shrink:1;overflow:auto}.ds .clickarea{--margin: 0;--padding-large: 2em;--padding-medium: 1.5em;--padding-small: 1em;--padding-none: 0;cursor:pointer;display:inline-block;margin:var(--margin);padding:var(--padding)}.ds .clickarea.padding-none{padding:var(--padding-none)}.ds .clickarea.padding-small{padding:var(--padding-small)}.ds .clickarea.padding-medium{padding:var(--padding-medium)}.ds .clickarea.padding-large{padding:var(--padding-large)}.ds .column{--gap-small: .4em;--gap-medium: 1em;--gap-large: 2em;display:flex;flex-direction:column;min-width:0;width:100%}.ds .column>div,.ds .column>h1,.ds .column>h2,.ds .column>h3,.ds .column>p,.ds .column>form,.ds .column>label,.ds .column>input,.ds .column>textarea,.ds .column>select{margin:0}.ds .column.align-y-top{justify-content:flex-start}.ds .column.align-y-center{justify-content:center}.ds .column.align-y-bottom{justify-content:flex-end}.ds .column.align-y-justify{justify-content:space-between}.ds .column.align-x-left{align-items:flex-start}.ds .column.align-x-center{align-items:center}.ds .column.align-x-right{align-items:flex-end}.ds .column.align-x-stretch{align-items:stretch}.ds .column.gap-small{gap:var(--gap-small)}.ds .column.gap-medium{gap:var(--gap-medium)}.ds .column.gap-large{gap:var(--gap-large)}.ds .column.wrap-nowrap{flex-wrap:nowrap}.ds .column.wrap-wrap{flex-wrap:wrap}.ds .form{--margin: var(--margin-container);margin:var(--margin);min-width:0}.ds .grid{--gap-small: .5em;--gap-medium: 1em;--gap-large: 2em;display:grid;min-width:0}.ds .grid>div,.ds .grid>h1,.ds .grid>h2,.ds .grid>h3,.ds .grid>p,.ds .grid>form,.ds .grid>label,.ds .grid>input,.ds .grid>textarea,.ds .grid>select{margin:0}.ds .grid.layout-two-columns{grid-template-columns:1fr 1fr}.ds .grid.layout-three-columns{grid-template-columns:1fr 1fr 1fr}.ds .grid.layout-four-columns{grid-template-columns:1fr 1fr 1fr 1fr}.ds .grid.gap-small{grid-gap:var(--gap-small)}.ds .grid.gap-medium{grid-gap:var(--gap-medium)}.ds .grid.gap-large{grid-gap:var(--gap-large)}.ds .icon{--icon-attachment: "📎";--icon-bookmark: "🔖";--icon-box: "☐";--icon-box-checked: "☑";--icon-box-crossed: "☒";--icon-calendar: "📅";--icon-caution: "☡";--icon-check: "✓";--icon-clock: "🕔";--icon-close: "✕";--icon-cloud: "☁";--icon-comment: "💬";--icon-diamond: "♦";--icon-eye: "👁";--icon-flag: "⚑";--icon-heart: "♥";--icon-home: "⌂";--icon-info: "ℹ";--icon-lock: "🔒";--icon-mail: "✉";--icon-music: "♫";--icon-phone: "☎";--icon-piece: "☮";--icon-plus: "➕";--icon-question: "❓";--icon-rain: "⛆";--icon-recycle: "♻";--icon-search: "🔍";--icon-settings: "⚙";--icon-star: "★";--icon-sun: "☀";--icon-tag: "🏷";--icon-trash: "🗑";--icon-umbrella: "☂";--icon-unlock: "🔓";--icon-user: "👤";--icon-video: "🎬";--icon-warning: "⚠";--icon-yinyang: "☯"}.ds .icon.attachment:before{content:var(--icon-attachment)}.ds .icon.bookmark:before{content:var(--icon-bookmark)}.ds .icon.box:before{content:var(--icon-box)}.ds .icon.box-checked:before{content:var(--icon-box-checked)}.ds .icon.box-crossed:before{content:var(--icon-box-crossed)}.ds .icon.calendar:before{content:var(--icon-calendar)}.ds .icon.caution:before{content:var(--icon-caution)}.ds .icon.check:before{content:var(--icon-check)}.ds .icon.clock:before{content:var(--icon-clock)}.ds .icon.close:before{content:var(--icon-close)}.ds .icon.cloud:before{content:var(--icon-cloud)}.ds .icon.comment:before{content:var(--icon-comment)}.ds .icon.diamond:before{content:var(--icon-diamond)}.ds .icon.eye:before{content:var(--icon-eye)}.ds .icon.flag:before{content:var(--icon-flag)}.ds .icon.heart:before{content:var(--icon-heart)}.ds .icon.home:before{content:var(--icon-home)}.ds .icon.info:before{content:var(--icon-info)}.ds .icon.lock:before{content:var(--icon-lock)}.ds .icon.mail:before{content:var(--icon-mail)}.ds .icon.music:before{content:var(--icon-music)}.ds .icon.phone:before{content:var(--icon-phone)}.ds .icon.piece:before{content:var(--icon-piece)}.ds .icon.plus:before{content:var(--icon-plus)}.ds .icon.question:before{content:var(--icon-question)}.ds .icon.rain:before{content:var(--icon-rain)}.ds .icon.recycle:before{content:var(--icon-recycle)}.ds .icon.search:before{content:var(--icon-search)}.ds .icon.settings:before{content:var(--icon-settings)}.ds .icon.star:before{content:var(--icon-star)}.ds .icon.sun:before{content:var(--icon-sun)}.ds .icon.tag:before{content:var(--icon-tag)}.ds .icon.trash:before{content:var(--icon-trash)}.ds .icon.umbrella:before{content:var(--icon-umbrella)}.ds .icon.unlock:before{content:var(--icon-unlock)}.ds .icon.user:before{content:var(--icon-user)}.ds .icon.video:before{content:var(--icon-video)}.ds .icon.warning:before{content:var(--icon-warning)}.ds .icon.yinyang:before{content:var(--icon-yinyang)}.ds .image.fit-fill{object-fit:fill}.ds .image.fit-contain{object-fit:contain}.ds .image.fit-cover{object-fit:cover}.ds .image.fit-none{object-fit:none}.ds .image.fit-scale-down{object-fit:scale-down}.ds .input{--margin: 0 0 1em 0;--gap: .5em;display:flex;flex-direction:column;gap:var(--gap);margin:var(--margin)}.ds .input .label{font-weight:var(--font-weight-medium)}.ds .label{--margin: 0;margin:var(--margin)}.ds .link{--color: var(--color-primary-foreground);--color-hover: var(--color-primary-foreground);--text-decoration: dotted underline;--text-decoration-hover: underline;color:var(--color);text-decoration:var(--text-decoration)}.ds .link:hover{color:var(--color-hover);text-decoration:var(--text-decoration-hover)}.ds .modal{border:0;padding:0;min-width:0}.ds .modal.sizing-full{width:100%}.ds .modal.sizing-content{width:fit-content}.ds .panel{--border-radius: 0;--margin: 0 0 1.5em 0;--padding-large: 2em;--padding-medium: 1.5em;--padding-small: 1em;--alert-background-color: var(--color-alert-background);--alert-foreground-color: var(--color-alert-foreground);--error-background-color: var(--color-error-background);--error-foreground-color: var(--color-error-foreground);--normal-background-color: var(--color-secondary-background);--normal-foreground-color: var(--color-primary-foreground);--success-background-color: var(--color-success-background);--success-foreground-color: var(--color-success-foreground);--warning-background-color: var(--color-warning-background);--warning-foreground-color: var(--color-warning-foreground);border-radius:var(--border-radius);padding:var(--padding);margin:var(--margin);min-width:0}.ds .panel.type-alert{background-color:var(--alert-background-color);color:var(--alert-foreground-color)}.ds .panel.type-error{background-color:var(--error-background-color);color:var(--error-foreground-color)}.ds .panel.type-normal{background-color:var(--normal-background-color);color:var(--normal-foreground-color)}.ds .panel.type-success{background-color:var(--success-background-color);color:var(--success-foreground-color)}.ds .panel.type-warning{background-color:var(--warning-background-color);color:var(--warning-foreground-color)}.ds .panel.type-transparent{background-color:transparent}.ds .panel.padding-small{padding:var(--padding-small)}.ds .panel.padding-medium{padding:var(--padding-medium)}.ds .panel.padding-large{padding:var(--padding-large)}.ds .paragraph{--margin: var(--margin-container);--line-height: 1.5em;--font-size-large: 1.5em;--font-size-medium: 1em;--font-size-small: .75em;margin:var(--margin);line-height:var(--line-height);min-width:0}.ds .paragraph.size-large{font-size:var(--font-size-large)}.ds .paragraph.size-medium{font-size:var(--font-size-medium)}.ds .paragraph.size-small{font-size:var(--font-size-small)}.ds .row{--gap-small: .4em;--gap-medium: 1em;--gap-large: 2em;display:flex;flex-direction:row;min-width:0;height:100%}.ds .row>div,.ds .row>h1,.ds .row>h2,.ds .row>h3,.ds .row>p,.ds .row>form,.ds .row>label,.ds .row>input,.ds .row>textarea,.ds .row>select{margin:0}.ds .row.align-x-left{justify-content:flex-start}.ds .row.align-x-center{justify-content:center}.ds .row.align-x-right{justify-content:flex-end}.ds .row.align-x-justify{justify-content:space-between}.ds .row.align-y-top{align-items:flex-start}.ds .row.align-y-center{align-items:center}.ds .row.align-y-bottom{align-items:flex-end}.ds .row.align-y-stretch{align-items:stretch}.ds .row.gap-small{gap:var(--gap-small)}.ds .row.gap-medium{gap:var(--gap-medium)}.ds .row.gap-large{gap:var(--gap-large)}.ds .row.wrap-nowrap{flex-wrap:nowrap}.ds .row.wrap-wrap{flex-wrap:wrap}.ds .ruler{--border-width-small: .1rem;--border-width-medium: .2rem;--border-width-large: .3rem;--color: var(--color-border);background-color:var(--color)}.ds .ruler.direction-horizontal{width:100%}.ds .ruler.direction-horizontal.size-small{height:var(--border-width-small)}.ds .ruler.direction-horizontal.size-medium{height:var(--border-width-medium)}.ds .ruler.direction-horizontal.size-large{height:var(--border-width-large)}.ds .ruler.direction-vertical{height:100%}.ds .ruler.direction-vertical.size-small{width:var(--border-width-small)}.ds .ruler.direction-vertical.size-medium{width:var(--border-width-medium)}.ds .ruler.direction-vertical.size-large{width:var(--border-width-large)}.ds .select{--margin: 0;--padding-small: .4em;--padding-medium: .8em;--padding-large: 1.2em;--border-style: solid;--border-color: var(--color-border);--border-width: var(--width-border);margin:var(--margin);padding:var(--padding);border-style:var(--border-style);border-width:var(--border-width);border-color:var(--border-color);background-color:var(--color-input-background);font-family:inherit;font-size:inherit}.ds .select:focus-visible{outline-color:color-mix(in srgb,black 10%,var(--border-color))}.ds .select.size-small{padding:var(--padding-small)}.ds .select.size-medium{padding:var(--padding-medium)}.ds .select.size-large{padding:var(--padding-large)}.ds .spinner{--color: var(--color-border);--size: 2em;--speed: 1.2s;--thickness: .3em;display:inline-block;width:var(--size);height:var(--size)}.ds .spinner:after{content:" ";display:block;width:var(--size);height:var(--size);border-radius:50%;border:var(--thickness) solid var(--color);border-color:transparent var(--color) transparent var(--color)}.ds .spinner.active:after{animation:ds-spinner var(--speed) linear infinite}@keyframes ds-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ds .text{--primary-color: var(--color-primary-foreground);--secondary-color: var(--color-secondary-foreground);display:inline-block}.ds .text.type-primary{color:var(--primary-color)}.ds .text.type-secondary{color:var(--secondary-color)}.ds .text.size-small{font-size:.9em}.ds .text.size-medium{font-size:1em}.ds .text.size-large{font-size:1.2em}.ds .text.weight-light{font-weight:var(--font-weight-light)}.ds .text.weight-normal{font-weight:var(--font-weight-normal)}.ds .text.weight-bold{font-weight:var(--font-weight-bold)}.ds .text.wrap-none{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ds .text.wrap-normal{white-space:normal}.ds .text.wrap-break-word{word-wrap:break-word}.ds .textarea{--margin: 0;--padding-small: .4em;--padding-medium: .8em;--padding-large: 1.2em;--border-style: solid;--border-color: var(--color-border);--border-width: var(--width-border);margin:var(--margin);padding:var(--padding);border-style:var(--border-style);border-width:var(--border-width);border-color:var(--border-color);background-color:var(--color-input-background);font-family:inherit;font-size:inherit;resize:vertical;width:100%}.ds .textarea:focus-visible{outline-color:color-mix(in srgb,black 10%,var(--border-color))}.ds .textarea.size-small{padding:var(--padding-small)}.ds .textarea.size-medium{padding:var(--padding-medium)}.ds .textarea.size-large{padding:var(--padding-large)}.ds .textbox{--margin: 0;--padding-small: .4em;--padding-medium: .8em;--padding-large: 1.2em;--border-style: solid;--border-color: var(--color-border);--border-width: var(--width-border);margin:var(--margin);border-style:var(--border-style);border-width:var(--border-width);border-color:var(--border-color);background-color:var(--color-input-background);font-family:inherit;font-size:inherit}.ds .textbox:focus-visible{outline-color:color-mix(in srgb,black 10%,var(--border-color))}.ds .textbox.size-small{padding:var(--padding-small)}.ds .textbox.size-medium{padding:var(--padding-medium)}.ds .textbox.size-large{padding:var(--padding-large)}.ds .title{--margin: 0 0 .8em 0;--font-size-large: 2em;--font-size-medium: 1.5em;--font-size-small: 1em;margin:var(--margin)}.ds .title.size-large{font-size:var(--font-size-large)}.ds .title.size-medium{font-size:var(--font-size-medium)}.ds .title.size-small{font-size:var(--font-size-small)}

package/dist/mtds.d.ts

@@ -0,0 +1,241 @@
+import { ChangeEventHandler } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+
+export declare function Avatar({ source, title, alt, width, height, fit }: Props_4): JSX.Element;
+
+export declare function Border({ type, size, padding, children }: Props_5): JSX.Element;
+
+export declare function Button({ type, size, text, onClick }: Props_6): JSX.Element;
+
+export declare function Cell({ sizing, children }: Props_7): JSX.Element;
+
+export declare function ClickArea({ padding, onClick, children }: Props_8): JSX.Element;
+
+export declare function Column({ alignX, alignY, gap, wrap, children }: Props_9): JSX.Element;
+
+export declare function Dropdown({ options, selected, onChange }: Props): JSX.Element;
+
+export declare const Form: ForwardRefExoticComponent<Props_10 & RefAttributes<HTMLFormElement>>;
+
+export declare function Grid({ layout, gap, children }: Props_11): JSX.Element;
+
+export declare function Icon({ type }: Props_12): JSX.Element;
+
+declare function Image_2({ source, title, alt, width, height, fit }: Props_13): JSX.Element;
+export { Image_2 as Image }
+
+export declare function Input({ label, element }: Props_14): JSX.Element;
+
+export declare function Label({ value }: Props_15): JSX.Element;
+
+export declare function Link({ url, target, children }: Props_19): JSX.Element;
+
+export declare function Modal({ open, sizing, children }: Props_20): JSX.Element;
+
+export declare function Panel({ type, padding, children }: Props_21): JSX.Element;
+
+export declare function Paragraph({ size, children }: Props_22): JSX.Element;
+
+declare type Props = {
+    readonly options: Map<string, string>;
+    readonly selected?: string;
+    readonly onChange?: (oldKey: string, newKey: string) => void;
+};
+
+declare type Props_10 = {
+    readonly children: ReactNode;
+    readonly submitHandler?: (form: HTMLFormElement) => void;
+};
+
+declare type Props_11 = {
+    readonly layout: 'two-columns' | 'three-columns' | 'four-columns';
+    readonly gap?: 'large' | 'medium' | 'small' | 'none';
+    readonly children: ReactNode;
+};
+
+declare type Props_12 = {
+    readonly type: 'attachment' | 'bookmark' | 'box' | 'box-checked' | 'box-crossed' | 'calendar' | 'caution' | 'check' | 'clock' | 'close' | 'cloud' | 'comment' | 'diamond' | 'eye' | 'flag' | 'heart' | 'home' | 'info' | 'lock' | 'mail' | 'music' | 'phone' | 'piece' | 'plus' | 'question' | 'rain' | 'recycle' | 'search' | 'settings' | 'star' | 'sun' | 'tag' | 'trash' | 'umbrella' | 'unlock' | 'user' | 'video' | 'warning' | 'yinyang';
+};
+
+declare type Props_13 = {
+    readonly source: string;
+    readonly title?: string;
+    readonly alt?: string;
+    readonly width?: string;
+    readonly height?: string;
+    readonly fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+};
+
+declare type Props_14 = {
+    readonly label: ReactElement<Props_15>;
+    readonly element: ReactElement<Props_16> | ReactElement<Props_17> | ReactElement<Props_18>;
+};
+
+declare type Props_15 = {
+    readonly value: string;
+};
+
+declare type Props_16 = {
+    readonly name: string;
+    readonly placeholder?: string;
+    readonly value?: string;
+    readonly limit?: number;
+    readonly pattern?: string;
+    readonly title?: string;
+    readonly size?: 'large' | 'medium' | 'small';
+    readonly required?: boolean;
+    readonly onChange?: ChangeEventHandler<HTMLInputElement>;
+};
+
+declare type Props_17 = {
+    readonly name: string;
+    readonly placeholder?: string;
+    readonly value?: string;
+    readonly size?: 'large' | 'medium' | 'small';
+    readonly rows?: number;
+    readonly limit?: number;
+    readonly onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+};
+
+declare type Props_18 = {
+    readonly name: string;
+    readonly options: Map<string, string>;
+    readonly value?: string;
+    readonly size?: 'large' | 'medium' | 'small';
+    readonly onChange?: ChangeEventHandler<HTMLSelectElement>;
+};
+
+declare type Props_19 = {
+    readonly url?: string;
+    readonly target?: string;
+    readonly children: ReactNode;
+};
+
+declare type Props_2 = {
+    readonly id: string;
+    readonly title: ReactNode;
+    readonly children: ReactNode;
+};
+
+declare type Props_20 = {
+    readonly open: boolean;
+    readonly sizing?: 'full' | 'content';
+    readonly children?: ReactNode;
+};
+
+declare type Props_21 = {
+    readonly type?: 'normal' | 'alert' | 'warning' | 'success' | 'error' | 'transparent';
+    readonly padding?: 'large' | 'medium' | 'small';
+    readonly children?: ReactNode;
+};
+
+declare type Props_22 = {
+    readonly size?: 'large' | 'medium' | 'small';
+    readonly children: ReactNode;
+};
+
+declare type Props_23 = {
+    readonly alignX?: 'left' | 'center' | 'right' | 'justify';
+    readonly alignY?: 'top' | 'center' | 'bottom' | 'stretch';
+    readonly gap?: 'large' | 'medium' | 'small' | 'none';
+    readonly wrap?: 'wrap' | 'nowrap';
+    readonly children: ReactNode;
+};
+
+declare type Props_24 = {
+    readonly direction: 'horizontal' | 'vertical';
+    readonly size?: 'small' | 'medium' | 'large';
+};
+
+declare type Props_25 = {
+    readonly active?: boolean;
+};
+
+declare type Props_26 = {
+    readonly value: string;
+    readonly type?: 'primary' | 'secondary';
+    readonly size?: 'large' | 'medium' | 'small';
+    readonly weight?: 'light' | 'normal' | 'bold';
+    readonly wrap?: 'none' | 'normal' | 'break-word';
+};
+
+declare type Props_27 = {
+    readonly size?: 'large' | 'medium' | 'small';
+    readonly children: ReactNode;
+};
+
+declare type Props_3 = {
+    readonly separator?: ReactNode;
+    readonly selectedId?: string;
+    readonly children: ReactElement<Props_2> | ReactElement<Props_2>[];
+    readonly onChange?: (newId: string, oldId?: string) => void;
+};
+
+declare type Props_4 = {
+    readonly source: string;
+    readonly title?: string;
+    readonly alt?: string;
+    readonly width?: string;
+    readonly height?: string;
+    readonly fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+};
+
+declare type Props_5 = {
+    readonly type?: 'normal' | 'dashed' | 'dotted';
+    readonly size?: 'large' | 'medium' | 'small';
+    readonly padding?: 'large' | 'medium' | 'small' | 'none';
+    readonly children?: ReactNode;
+};
+
+declare type Props_6 = {
+    readonly type?: 'submit' | 'primary' | 'secondary' | 'disabled';
+    readonly size?: 'large' | 'medium' | 'small';
+    readonly text: string;
+    readonly onClick?: () => void;
+};
+
+declare type Props_7 = {
+    readonly sizing?: 'fixed' | 'fluid';
+    readonly children: ReactNode;
+};
+
+declare type Props_8 = {
+    readonly padding?: 'large' | 'medium' | 'small' | 'none';
+    readonly onClick?: () => void;
+    readonly children?: ReactNode;
+};
+
+declare type Props_9 = {
+    readonly alignX?: 'left' | 'center' | 'right' | 'stretch';
+    readonly alignY?: 'top' | 'center' | 'bottom' | 'justify';
+    readonly gap?: 'large' | 'medium' | 'small' | 'none';
+    readonly wrap?: 'wrap' | 'nowrap';
+    readonly children: ReactNode;
+};
+
+export declare function Row({ alignX, alignY, gap, wrap, children }: Props_23): JSX.Element;
+
+export declare function Ruler({ direction, size }: Props_24): JSX.Element;
+
+export declare const Select: ForwardRefExoticComponent<Props_18 & RefAttributes<HTMLSelectElement>>;
+
+export declare function Spinner({ active }: Props_25): JSX.Element;
+
+export declare function Tab({ children }: Props_2): JSX.Element;
+
+export declare function Tabs({ separator, selectedId, children, onChange }: Props_3): JSX.Element;
+
+declare function Text_2({ value, type, size, weight, wrap }: Props_26): JSX.Element;
+export { Text_2 as Text }
+
+export declare const TextArea: ForwardRefExoticComponent<Props_17 & RefAttributes<HTMLTextAreaElement>>;
+
+export declare const TextBox: ForwardRefExoticComponent<Props_16 & RefAttributes<HTMLInputElement>>;
+
+export declare function Title({ size, children }: Props_27): JSX.Element;
+
+export { }

package/dist/mtds.js

@@ -0,0 +1,491 @@
+import ae, { useState as k, useMemo as V, useEffectEvent as se, useEffect as J, forwardRef as w, useRef as oe } from "react";
+var y = { exports: {} }, T = {};
+var W;
+function le() {
+  if (W) return T;
+  W = 1;
+  var t = Symbol.for("react.transitional.element"), r = Symbol.for("react.fragment");
+  function n(a, s, c) {
+    var i = null;
+    if (c !== void 0 && (i = "" + c), s.key !== void 0 && (i = "" + s.key), "key" in s) {
+      c = {};
+      for (var f in s)
+        f !== "key" && (c[f] = s[f]);
+    } else c = s;
+    return s = c.ref, {
+      $$typeof: t,
+      type: a,
+      key: i,
+      ref: s !== void 0 ? s : null,
+      props: c
+    };
+  }
+  return T.Fragment = r, T.jsx = n, T.jsxs = n, T;
+}
+var N = {};
+var U;
+function ce() {
+  return U || (U = 1, process.env.NODE_ENV !== "production" && (function() {
+    function t(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === te ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case R:
+          return "Fragment";
+        case G:
+          return "Profiler";
+        case S:
+          return "StrictMode";
+        case Z:
+          return "Suspense";
+        case H:
+          return "SuspenseList";
+        case ee:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case A:
+            return "Portal";
+          case X:
+            return e.displayName || "Context";
+          case B:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case K:
+            var o = e.render;
+            return e = e.displayName, e || (e = o.displayName || o.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case Q:
+            return o = e.displayName || null, o !== null ? o : t(e.type) || "Memo";
+          case O:
+            o = e._payload, e = e._init;
+            try {
+              return t(e(o));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function r(e) {
+      return "" + e;
+    }
+    function n(e) {
+      try {
+        r(e);
+        var o = !1;
+      } catch {
+        o = !0;
+      }
+      if (o) {
+        o = console;
+        var u = o.error, d = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return u.call(
+          o,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          d
+        ), r(e);
+      }
+    }
+    function a(e) {
+      if (e === R) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === O)
+        return "<...>";
+      try {
+        var o = t(e);
+        return o ? "<" + o + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function s() {
+      var e = P.A;
+      return e === null ? null : e.getOwner();
+    }
+    function c() {
+      return Error("react-stack-top-frame");
+    }
+    function i(e) {
+      if (I.call(e, "key")) {
+        var o = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (o && o.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function f(e, o) {
+      function u() {
+        z || (z = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          o
+        ));
+      }
+      u.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: u,
+        configurable: !0
+      });
+    }
+    function x() {
+      var e = t(this.type);
+      return L[e] || (L[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function v(e, o, u, d, h, C) {
+      var p = u.ref;
+      return e = {
+        $$typeof: j,
+        type: e,
+        key: o,
+        props: u,
+        _owner: d
+      }, (p !== void 0 ? p : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: x
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: h
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: C
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function m(e, o, u, d, h, C) {
+      var p = o.children;
+      if (p !== void 0)
+        if (d)
+          if (re(p)) {
+            for (d = 0; d < p.length; d++)
+              E(p[d]);
+            Object.freeze && Object.freeze(p);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else E(p);
+      if (I.call(o, "key")) {
+        p = t(e);
+        var g = Object.keys(o).filter(function(ne) {
+          return ne !== "key";
+        });
+        d = 0 < g.length ? "{key: someKey, " + g.join(": ..., ") + ": ...}" : "{key: someKey}", M[p + d] || (g = 0 < g.length ? "{" + g.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          d,
+          p,
+          g,
+          p
+        ), M[p + d] = !0);
+      }
+      if (p = null, u !== void 0 && (n(u), p = "" + u), i(o) && (n(o.key), p = "" + o.key), "key" in o) {
+        u = {};
+        for (var Y in o)
+          Y !== "key" && (u[Y] = o[Y]);
+      } else u = o;
+      return p && f(
+        u,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), v(
+        e,
+        p,
+        u,
+        s(),
+        h,
+        C
+      );
+    }
+    function E(e) {
+      _(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === O && (e._payload.status === "fulfilled" ? _(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function _(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === j;
+    }
+    var b = ae, j = Symbol.for("react.transitional.element"), A = Symbol.for("react.portal"), R = Symbol.for("react.fragment"), S = Symbol.for("react.strict_mode"), G = Symbol.for("react.profiler"), B = Symbol.for("react.consumer"), X = Symbol.for("react.context"), K = Symbol.for("react.forward_ref"), Z = Symbol.for("react.suspense"), H = Symbol.for("react.suspense_list"), Q = Symbol.for("react.memo"), O = Symbol.for("react.lazy"), ee = Symbol.for("react.activity"), te = Symbol.for("react.client.reference"), P = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, re = Array.isArray, $ = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    b = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var z, L = {}, D = b.react_stack_bottom_frame.bind(
+      b,
+      c
+    )(), F = $(a(c)), M = {};
+    N.Fragment = R, N.jsx = function(e, o, u) {
+      var d = 1e4 > P.recentlyCreatedOwnerStacks++;
+      return m(
+        e,
+        o,
+        u,
+        !1,
+        d ? Error("react-stack-top-frame") : D,
+        d ? $(a(e)) : F
+      );
+    }, N.jsxs = function(e, o, u) {
+      var d = 1e4 > P.recentlyCreatedOwnerStacks++;
+      return m(
+        e,
+        o,
+        u,
+        !0,
+        d ? Error("react-stack-top-frame") : D,
+        d ? $(a(e)) : F
+      );
+    };
+  })()), N;
+}
+var q;
+function ie() {
+  return q || (q = 1, process.env.NODE_ENV === "production" ? y.exports = le() : y.exports = ce()), y.exports;
+}
+var l = ie();
+function fe({ options: t, selected: r, onChange: n }) {
+  const a = r ?? [...t.keys()][0], s = t.get(a) ?? "", [c, i] = k(a), [f, x] = k(s), [v, m] = k(!1), E = () => {
+    m(!v);
+  }, _ = (b) => {
+    const j = b.target, A = c, R = j.getAttribute("data-key") ?? a, S = t.get(R) ?? s;
+    i(R), x(S), m(!1), n && n(A, R);
+  };
+  return /* @__PURE__ */ l.jsxs("div", { className: "selection", children: [
+    /* @__PURE__ */ l.jsx("div", { className: v ? "text active" : "text", onClick: E, children: f }),
+    v && /* @__PURE__ */ l.jsx("div", { className: "options", children: Array.from(t).map(([b, j]) => /* @__PURE__ */ l.jsx("div", { className: "option", "data-key": b, onClick: _, children: j }, b)) })
+  ] });
+}
+function me({ children: t }) {
+  return /* @__PURE__ */ l.jsx("div", { className: "ds-tabs-tab", children: t });
+}
+function de({ separator: t, selectedId: r, children: n, onChange: a }) {
+  const [s, c] = k(r ?? ""), i = V(() => Array.isArray(n) ? n : [n], [n]), f = V(() => {
+    const m = {};
+    return i.forEach((E) => {
+      const _ = E.props.id;
+      m[_] = E;
+    }), m;
+  }, [i]), x = se((m) => {
+    const E = i[0]?.props.id;
+    c(m ?? E);
+  });
+  J(() => {
+    x(r);
+  }, [r, i]);
+  const v = (m) => {
+    a !== void 0 && a(m, s), c(m);
+  };
+  return /* @__PURE__ */ l.jsxs("div", { className: "tabs", children: [
+    /* @__PURE__ */ l.jsx("div", { className: "nav", children: i.map((m) => {
+      const E = m.props.id, _ = `tab-${E}`, b = E === s ? "active" : "inactive", j = () => v(m.props.id);
+      return /* @__PURE__ */ l.jsx("div", { className: "item " + b, onClick: j, children: m.props.title }, _);
+    }) }),
+    t !== void 0 ? /* @__PURE__ */ l.jsx("div", { className: "separator", children: t }) : null,
+    /* @__PURE__ */ l.jsx("div", { className: "content", children: f[s] })
+  ] });
+}
+function pe({ source: t, title: r, alt: n = "Avatar", width: a, height: s, fit: c = "contain" }) {
+  const i = "avatar fit-" + c, f = { width: a, height: s };
+  return /* @__PURE__ */ l.jsx(
+    "img",
+    {
+      className: i,
+      title: r,
+      alt: n,
+      style: f,
+      src: t
+    }
+  );
+}
+function Ee({ type: t = "normal", size: r = "large", padding: n = "large", children: a }) {
+  const s = "border type-" + t + " size-" + r + " padding-" + n;
+  return /* @__PURE__ */ l.jsx("div", { className: s, children: a });
+}
+function ve({ type: t = "primary", size: r = "medium", text: n, onClick: a }) {
+  const s = "button type-" + t + " size-" + r, c = t === "disabled", i = t === "submit" ? "submit" : "button";
+  return /* @__PURE__ */ l.jsx("input", { type: i, onClick: a, className: s, disabled: c, value: n });
+}
+function xe({ sizing: t = "fluid", children: r }) {
+  const n = "cell sizing-" + t;
+  return /* @__PURE__ */ l.jsx("div", { className: n, children: r });
+}
+function be({ padding: t = "none", onClick: r, children: n }) {
+  const a = "clickarea padding-" + t;
+  return /* @__PURE__ */ l.jsx("div", { className: a, onClick: r, children: n });
+}
+function _e({ alignX: t = "left", alignY: r = "top", gap: n = "medium", wrap: a = "nowrap", children: s }) {
+  const c = "column align-x-" + t + " align-y-" + r + " gap-" + n + " wrap-" + a;
+  return /* @__PURE__ */ l.jsx("div", { className: c, children: s });
+}
+const je = w(function({ children: r, submitHandler: n }, a) {
+  const s = (c) => {
+    c.preventDefault(), n && n(c.target);
+  };
+  return /* @__PURE__ */ l.jsx("form", { onSubmit: s, className: "form", ref: a, children: r });
+});
+function Re({ layout: t, gap: r = "medium", children: n }) {
+  const a = "grid layout-" + t + " gap-" + r;
+  return /* @__PURE__ */ l.jsx("div", { className: a, children: n });
+}
+function ge({ type: t }) {
+  return /* @__PURE__ */ l.jsx("span", { className: "icon " + t });
+}
+function Te({ source: t, title: r, alt: n, width: a, height: s, fit: c = "contain" }) {
+  const i = "image fit-" + c, f = { width: a, height: s };
+  return /* @__PURE__ */ l.jsx(
+    "img",
+    {
+      className: i,
+      title: r,
+      alt: n,
+      style: f,
+      src: t
+    }
+  );
+}
+function Ne({ label: t, element: r }) {
+  return /* @__PURE__ */ l.jsxs("div", { className: "input", children: [
+    t,
+    r
+  ] });
+}
+function he({ value: t }) {
+  return /* @__PURE__ */ l.jsx("label", { className: "label", children: t });
+}
+function ye({ url: t, target: r, children: n }) {
+  return /* @__PURE__ */ l.jsx("a", { className: "link", href: t, target: r, children: n });
+}
+function ke({ open: t, sizing: r = "content", children: n }) {
+  const a = oe(null), s = "modal sizing-" + r;
+  return J(() => {
+    t ? a.current?.showModal() : a.current?.close();
+  }, [t]), /* @__PURE__ */ l.jsx("dialog", { ref: a, className: s, children: /* @__PURE__ */ l.jsx("form", { method: "dialog", children: n }) });
+}
+function we({ type: t = "normal", padding: r = "large", children: n }) {
+  const a = "panel type-" + t + " padding-" + r;
+  return /* @__PURE__ */ l.jsx("div", { className: a, children: n });
+}
+function Ae({ size: t = "medium", children: r }) {
+  const n = "paragraph size-" + t;
+  return /* @__PURE__ */ l.jsx("p", { className: n, children: r });
+}
+function Se({ alignX: t = "left", alignY: r = "top", gap: n = "medium", wrap: a = "nowrap", children: s }) {
+  const c = "row align-x-" + t + " align-y-" + r + " gap-" + n + " wrap-" + a;
+  return /* @__PURE__ */ l.jsx("div", { className: c, children: s });
+}
+function Oe({ direction: t, size: r = "medium" }) {
+  const n = "ruler direction-" + t + " size-" + r;
+  return /* @__PURE__ */ l.jsx("div", { className: n });
+}
+const Pe = w(function({ name: r, options: n, value: a, size: s = "medium", onChange: c }, i) {
+  const f = "select size-" + s;
+  return /* @__PURE__ */ l.jsx(
+    "select",
+    {
+      className: f,
+      name: r,
+      defaultValue: a,
+      onChange: c,
+      ref: i,
+      children: Array.from(n).map(([x, v]) => /* @__PURE__ */ l.jsx("option", { value: x, children: v }, x))
+    }
+  );
+});
+function $e({ active: t = !0 }) {
+  const r = "spinner" + (t ? " active" : "");
+  return /* @__PURE__ */ l.jsx("div", { className: r });
+}
+function Ce({ value: t, type: r = "primary", size: n = "medium", weight: a = "normal", wrap: s = "none" }) {
+  const c = "text type-" + r + " size-" + n + " weight-" + a + " wrap-" + s;
+  return /* @__PURE__ */ l.jsx("span", { className: c, children: t });
+}
+const Ye = w(function({ name: r, placeholder: n, value: a, size: s = "medium", rows: c, limit: i, onChange: f }, x) {
+  const v = "textarea size-" + s;
+  return /* @__PURE__ */ l.jsx(
+    "textarea",
+    {
+      className: v,
+      name: r,
+      placeholder: n,
+      defaultValue: a,
+      rows: c,
+      ref: x,
+      maxLength: i,
+      onChange: f
+    }
+  );
+}), Ie = w(function({ name: r, placeholder: n, value: a, limit: s, pattern: c, title: i, size: f = "medium", required: x, onChange: v }, m) {
+  const E = "textbox size-" + f;
+  return /* @__PURE__ */ l.jsx(
+    "input",
+    {
+      className: E,
+      type: "text",
+      name: r,
+      placeholder: n,
+      defaultValue: a,
+      maxLength: s,
+      pattern: c,
+      title: i,
+      ref: m,
+      required: x,
+      onChange: v
+    }
+  );
+});
+function ze({ size: t = "large", children: r }) {
+  const n = "title size-" + t;
+  switch (t) {
+    case "large":
+      return /* @__PURE__ */ l.jsx("h1", { className: n, children: r });
+    case "medium":
+      return /* @__PURE__ */ l.jsx("h2", { className: n, children: r });
+    case "small":
+      return /* @__PURE__ */ l.jsx("h3", { className: n, children: r });
+  }
+}
+export {
+  pe as Avatar,
+  Ee as Border,
+  ve as Button,
+  xe as Cell,
+  be as ClickArea,
+  _e as Column,
+  fe as Dropdown,
+  je as Form,
+  Re as Grid,
+  ge as Icon,
+  Te as Image,
+  Ne as Input,
+  he as Label,
+  ye as Link,
+  ke as Modal,
+  we as Panel,
+  Ae as Paragraph,
+  Se as Row,
+  Oe as Ruler,
+  Pe as Select,
+  $e as Spinner,
+  me as Tab,
+  de as Tabs,
+  Ce as Text,
+  Ye as TextArea,
+  Ie as TextBox,
+  ze as Title
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@maskingtech/designsystem",
+  "private": false,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "clean": "rimraf dist",
+    "lint": "eslint",
+    "prepublishOnly": "npm run build"
+  },
+  "exports": {
+    ".": "./dist/mtds.js",
+    "./style.css": "./dist/mtds.css"
+  },
+  "files": [
+    "README.md",
+    "dist"
+  ],
+  "dependencies": {
+    "react": "19.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "9.39.1",
+    "@types/node": "24.10.1",
+    "@types/react": "19.2.6",
+    "@vitejs/plugin-react": "5.1.1",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "7.0.1",
+    "eslint-plugin-sonarjs": "3.0.5",
+    "rimraf": "6.1.2",
+    "typescript": "5.9.3",
+    "typescript-eslint": "8.47.0",
+    "vite": "7.2.4",
+    "vite-plugin-dts": "4.5.4"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "4.53.3"
+  }
+}