@marcusjonsson2/mcui 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +176 -0
- package/dist/components/Accordion/McAccordion.d.ts +12 -0
- package/dist/components/Alert/McAlert.d.ts +13 -0
- package/dist/components/Avatar/McAvatar.d.ts +14 -0
- package/dist/components/Badge/McBadge.d.ts +10 -0
- package/dist/components/Button/McButton.d.ts +11 -0
- package/dist/components/Card/McCard.d.ts +17 -0
- package/dist/components/Checkbox/McCheckbox.d.ts +22 -0
- package/dist/components/Dropdown/McDropdown.d.ts +23 -0
- package/dist/components/Input/McInput.d.ts +11 -0
- package/dist/components/Modal/McModal.d.ts +19 -0
- package/dist/components/Pagination/McPagination.d.ts +12 -0
- package/dist/components/Select/McSelect.d.ts +28 -0
- package/dist/components/Sidepanel/McSidepanel.d.ts +17 -0
- package/dist/components/Skeleton/McSkeleton.d.ts +20 -0
- package/dist/components/Stepper/McStepper.d.ts +17 -0
- package/dist/components/Switch/McSwitch.d.ts +32 -0
- package/dist/components/Tabs/McTabs.d.ts +44 -0
- package/dist/components/Textarea/McTextarea.d.ts +10 -0
- package/dist/components/Toast/McToast.d.ts +8 -0
- package/dist/components/Toast/McToastContext.d.ts +22 -0
- package/dist/components/Toast/useToast.d.ts +16 -0
- package/dist/components/Tooltip/McTooltip.d.ts +33 -0
- package/dist/components/shared/useFieldIds.d.ts +8 -0
- package/dist/hooks/useFocusTrap.d.ts +14 -0
- package/dist/index.d.ts +23 -0
- package/dist/mcui.css +1 -0
- package/dist/mcui.js +5200 -0
- package/package.json +93 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Marcus Jonsson
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
# McUI
|
|
2
|
+
|
|
3
|
+
> **Minimal Code. Maximum UI.**
|
|
4
|
+
|
|
5
|
+
A modern React component library built dark-mode first, styled with Tailwind CSS, and shipped with full TypeScript support. Drop it in and start building — no boilerplate required.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## What's included
|
|
10
|
+
|
|
11
|
+
- 🌙 **Dark-mode first** — uses Tailwind's standard `dark` class pattern
|
|
12
|
+
- ♿ **Accessible** — semantic HTML and ARIA throughout
|
|
13
|
+
- 🧩 **Composable** — small API, import only what you need
|
|
14
|
+
- 🎨 **Custom design tokens** — `mc-*` colors and shadows via CSS variables
|
|
15
|
+
- 🔷 **TypeScript ready** — full type definitions included out of the box
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## Requirements
|
|
20
|
+
|
|
21
|
+
McUI expects the following in your project before you install:
|
|
22
|
+
|
|
23
|
+
| Dependency | Version |
|
|
24
|
+
|---|---|
|
|
25
|
+
| `react` | React 18 or 19 (`^18 \|\| ^19` in package.json) |
|
|
26
|
+
| `react-dom` | Same as `react` |
|
|
27
|
+
| `tailwindcss` | ^4 |
|
|
28
|
+
| `lucide-react` | ^0.577.0 |
|
|
29
|
+
| `framer-motion` | ^12 (optional peer; install if you use components that animate, e.g. modal, dropdown, toast) |
|
|
30
|
+
|
|
31
|
+
> **Note:** Tailwind CSS must be configured in your own project. McUI ships its own stylesheet for design tokens and base styles, but utility classes like `p-6`, `max-w-sm` etc. are resolved by your Tailwind setup.
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
## Installation
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
npm install @marcusjonsson2/mcui
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
Then install peer dependencies if you haven't already:
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
npm install react react-dom tailwindcss lucide-react
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
If you use motion-powered components (modal, side panel, dropdown, accordion, toast, etc.), add Framer Motion:
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
npm install framer-motion@^12
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
---
|
|
54
|
+
|
|
55
|
+
## Setup
|
|
56
|
+
|
|
57
|
+
### 1. Import the stylesheet
|
|
58
|
+
|
|
59
|
+
Add this once in your app entry or global stylesheet. The package exports CSS at `@marcusjonsson2/mcui/style.css` (not `dist/style.css`).
|
|
60
|
+
|
|
61
|
+
**JavaScript entry (e.g. `main.tsx`):**
|
|
62
|
+
|
|
63
|
+
```ts
|
|
64
|
+
import '@marcusjonsson2/mcui/style.css';
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
**Tailwind v4 / global CSS (e.g. `globals.css`):**
|
|
68
|
+
|
|
69
|
+
```css
|
|
70
|
+
@import "@marcusjonsson2/mcui/style.css";
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
This loads McUI's CSS variables and design tokens. It does **not** replace your Tailwind stylesheet — import both.
|
|
74
|
+
|
|
75
|
+
### 2. Enable dark mode
|
|
76
|
+
|
|
77
|
+
Set the `.dark` class on your root element:
|
|
78
|
+
|
|
79
|
+
```html
|
|
80
|
+
<html class="dark">
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
McUI follows Tailwind's class-based dark mode strategy, so this is all you need.
|
|
84
|
+
|
|
85
|
+
---
|
|
86
|
+
|
|
87
|
+
## Usage
|
|
88
|
+
|
|
89
|
+
### Basic example
|
|
90
|
+
|
|
91
|
+
```tsx
|
|
92
|
+
import { McButton, McInput, McCard } from '@marcusjonsson2/mcui';
|
|
93
|
+
import { useState } from 'react';
|
|
94
|
+
|
|
95
|
+
export default function LoginForm() {
|
|
96
|
+
const [email, setEmail] = useState('');
|
|
97
|
+
|
|
98
|
+
return (
|
|
99
|
+
<McCard className="p-6 max-w-sm mx-auto mt-10">
|
|
100
|
+
<h2 className="text-xl font-bold text-mc-text-primary mb-4">
|
|
101
|
+
Welcome Back
|
|
102
|
+
</h2>
|
|
103
|
+
|
|
104
|
+
<div className="space-y-4">
|
|
105
|
+
<McInput
|
|
106
|
+
label="Email"
|
|
107
|
+
placeholder="Enter your email"
|
|
108
|
+
value={email}
|
|
109
|
+
onChange={(e) => setEmail(e.target.value)}
|
|
110
|
+
/>
|
|
111
|
+
<McButton variant="primary" className="w-full">
|
|
112
|
+
Sign In
|
|
113
|
+
</McButton>
|
|
114
|
+
</div>
|
|
115
|
+
</McCard>
|
|
116
|
+
);
|
|
117
|
+
}
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
### Toasts
|
|
121
|
+
|
|
122
|
+
Wrap your app with `McToastProvider`, then use `useToast()` anywhere inside it:
|
|
123
|
+
|
|
124
|
+
```tsx
|
|
125
|
+
import { McButton, McToastProvider, useToast } from '@marcusjonsson2/mcui';
|
|
126
|
+
|
|
127
|
+
function App() {
|
|
128
|
+
return (
|
|
129
|
+
<McToastProvider>
|
|
130
|
+
<YourRoutes />
|
|
131
|
+
</McToastProvider>
|
|
132
|
+
);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
function SaveButton() {
|
|
136
|
+
const { toast } = useToast();
|
|
137
|
+
|
|
138
|
+
return (
|
|
139
|
+
<McButton onClick={() => toast({ message: 'Changes saved!', variant: 'success' })}>
|
|
140
|
+
Save
|
|
141
|
+
</McButton>
|
|
142
|
+
);
|
|
143
|
+
}
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
For advanced use cases, `McToastContext` is exported directly so you can integrate with your own state or event system.
|
|
147
|
+
|
|
148
|
+
---
|
|
149
|
+
|
|
150
|
+
## Components
|
|
151
|
+
|
|
152
|
+
### UI
|
|
153
|
+
|
|
154
|
+
`McAccordion` · `McAlert` · `McAvatar` · `McBadge` · `McButton` · `McCard` · `McCheckbox` · `McDropdown` · `McInput` · `McModal` · `McPagination` · `McSelect` · `McSidepanel` · `McSkeleton` · `McStepper` · `McSwitch` · `McTabs` · `McTextarea` · `McTooltip`
|
|
155
|
+
|
|
156
|
+
### Toast
|
|
157
|
+
|
|
158
|
+
`McToastProvider` · `useToast` · `McToastContext`
|
|
159
|
+
|
|
160
|
+
---
|
|
161
|
+
|
|
162
|
+
## Development
|
|
163
|
+
|
|
164
|
+
```bash
|
|
165
|
+
# Run Storybook — live component docs and visual tests
|
|
166
|
+
npm run storybook # → http://localhost:6006
|
|
167
|
+
|
|
168
|
+
# Build the library
|
|
169
|
+
npm run build # output goes to dist/
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
---
|
|
173
|
+
|
|
174
|
+
## License
|
|
175
|
+
|
|
176
|
+
[MIT](./LICENSE)
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
|
+
export interface McAccordionProps extends ComponentPropsWithoutRef<"div"> {
|
|
3
|
+
title: string;
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
defaultOpen?: boolean;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* McAccordion — a collapsible content section.
|
|
9
|
+
* The chevron icon rotates when the accordion opens/closes.
|
|
10
|
+
* Height and opacity are animated with Framer Motion.
|
|
11
|
+
*/
|
|
12
|
+
export declare const McAccordion: import('react').ForwardRefExoticComponent<McAccordionProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
|
+
export type McAlertVariant = 'success' | 'warning' | 'error' | 'info';
|
|
3
|
+
export interface McAlertProps extends ComponentPropsWithoutRef<'div'> {
|
|
4
|
+
variant?: McAlertVariant;
|
|
5
|
+
title?: string;
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* McAlert — inline contextual feedback banner placed directly in the layout.
|
|
10
|
+
* Unlike McToast, this is not in a portal — it renders wherever you put it in the JSX.
|
|
11
|
+
* Use it for form validation summaries, page-level warnings, or status messages.
|
|
12
|
+
*/
|
|
13
|
+
export declare const McAlert: import('react').ForwardRefExoticComponent<McAlertProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
export type McAvatarSize = "sm" | "md" | "lg" | "xl";
|
|
3
|
+
export interface McAvatarProps extends ComponentPropsWithoutRef<"div"> {
|
|
4
|
+
src?: string;
|
|
5
|
+
alt?: string;
|
|
6
|
+
initials?: string;
|
|
7
|
+
size?: McAvatarSize;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* McAvatar — a circular user profile component.
|
|
11
|
+
* Shows an image when `src` is provided and falls back gracefully to initials
|
|
12
|
+
* if the image fails to load or no src was given.
|
|
13
|
+
*/
|
|
14
|
+
export declare const McAvatar: import('react').ForwardRefExoticComponent<McAvatarProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
export type McBadgeVariant = 'primary' | 'secondary' | 'outline';
|
|
3
|
+
export interface McBadgeProps extends ComponentPropsWithoutRef<'span'> {
|
|
4
|
+
variant?: McBadgeVariant;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* McBadge — a compact status indicator and label pill.
|
|
8
|
+
* Uses mc- theme variables so it automatically adapts to light/dark mode.
|
|
9
|
+
*/
|
|
10
|
+
export declare const McBadge: import('react').ForwardRefExoticComponent<McBadgeProps & import('react').RefAttributes<HTMLSpanElement>>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
export type McButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
|
|
3
|
+
export interface McButtonProps extends ComponentPropsWithoutRef<'button'> {
|
|
4
|
+
variant?: McButtonVariant;
|
|
5
|
+
isLoading?: boolean;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* McButton — the primary interactive element in McUI.
|
|
9
|
+
* Supports four visual variants, a loading spinner state, and forwarded refs.
|
|
10
|
+
*/
|
|
11
|
+
export declare const McButton: import('react').ForwardRefExoticComponent<McButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
export interface McCardProps extends ComponentPropsWithoutRef<"div"> {
|
|
3
|
+
interactive?: boolean;
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* McCard — a themed container for grouping related content.
|
|
7
|
+
* Renders a rounded card with a border and surface background color.
|
|
8
|
+
* Pass `interactive` for a minimal lift + shadow + primary border on hover
|
|
9
|
+
* (smooth ease-out; respects prefers-reduced-motion).
|
|
10
|
+
*/
|
|
11
|
+
export declare const McCard: import('react').ForwardRefExoticComponent<McCardProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
12
|
+
export type McCardContentProps = ComponentPropsWithoutRef<"div">;
|
|
13
|
+
/**
|
|
14
|
+
* McCardContent — adds default padding inside a McCard.
|
|
15
|
+
* Wrap card body content in this to get consistent spacing.
|
|
16
|
+
*/
|
|
17
|
+
export declare const McCardContent: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export interface McCheckboxProps {
|
|
2
|
+
label?: string;
|
|
3
|
+
error?: string;
|
|
4
|
+
onChange?: (event: {
|
|
5
|
+
target: {
|
|
6
|
+
value: boolean;
|
|
7
|
+
};
|
|
8
|
+
}) => void;
|
|
9
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
10
|
+
id?: string;
|
|
11
|
+
className?: string;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
checked?: boolean | "indeterminate";
|
|
14
|
+
defaultChecked?: boolean;
|
|
15
|
+
required?: boolean;
|
|
16
|
+
name?: string;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* McCheckbox — an accessible checkbox built on Radix UI's Checkbox primitive.
|
|
20
|
+
* Supports labels, error states, disabled state, and controlled/uncontrolled modes.
|
|
21
|
+
*/
|
|
22
|
+
export declare const McCheckbox: import('react').ForwardRefExoticComponent<McCheckboxProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
|
+
export type McDropdownItemVariant = "default" | "danger";
|
|
3
|
+
export interface McDropdownItem {
|
|
4
|
+
label: string;
|
|
5
|
+
onClick: () => void;
|
|
6
|
+
icon?: ReactNode;
|
|
7
|
+
variant?: McDropdownItemVariant;
|
|
8
|
+
}
|
|
9
|
+
export interface McDropdownProps extends ComponentPropsWithoutRef<"div"> {
|
|
10
|
+
label: string;
|
|
11
|
+
items: McDropdownItem[];
|
|
12
|
+
align?: "left" | "right";
|
|
13
|
+
trigger?: ReactNode;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* McDropdown — an accessible dropdown menu.
|
|
17
|
+
* WCAG 2.1 compliance:
|
|
18
|
+
* - aria-haspopup + aria-expanded on the trigger (4.1.2)
|
|
19
|
+
* - role="menu" on the list, role="menuitem" on each item (4.1.2)
|
|
20
|
+
* - Arrow keys move focus between items; Escape closes; Tab cycles inside the menu (2.1.1)
|
|
21
|
+
* - Focus returns to trigger on close (2.4.3)
|
|
22
|
+
*/
|
|
23
|
+
export declare const McDropdown: import('react').ForwardRefExoticComponent<McDropdownProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
export interface McInputProps extends ComponentPropsWithoutRef<"input"> {
|
|
3
|
+
label?: string;
|
|
4
|
+
error?: string;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* McInput — a themed single-line text input.
|
|
8
|
+
* Supports labels, error messages, and all standard HTML input attributes.
|
|
9
|
+
* Automatically generates unique IDs to link the label and input for accessibility.
|
|
10
|
+
*/
|
|
11
|
+
export declare const McInput: import('react').ForwardRefExoticComponent<McInputProps & import('react').RefAttributes<HTMLInputElement>>;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface McModalProps {
|
|
3
|
+
isOpen: boolean;
|
|
4
|
+
onClose: () => void;
|
|
5
|
+
title?: ReactNode;
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
className?: string;
|
|
8
|
+
id?: string;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* McModal — an accessible dialog that traps focus when open.
|
|
12
|
+
* WCAG 2.1 compliance:
|
|
13
|
+
* - role="dialog" + aria-modal="true" (4.1.2 Name, Role, Value)
|
|
14
|
+
* - aria-labelledby links to the heading (1.3.1 Info and Relationships)
|
|
15
|
+
* - Focus is moved inside on open and returned to trigger on close (2.4.3)
|
|
16
|
+
* - Tab / Shift+Tab cycle is trapped within the modal (2.1.2)
|
|
17
|
+
* - Escape closes the modal (2.1.1 Keyboard)
|
|
18
|
+
*/
|
|
19
|
+
export declare const McModal: import('react').ForwardRefExoticComponent<McModalProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
export interface McPaginationProps extends Omit<ComponentPropsWithoutRef<'nav'>, 'onChange'> {
|
|
3
|
+
page: number;
|
|
4
|
+
pageCount: number;
|
|
5
|
+
onChange?: (page: number) => void;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* McPagination — page controls for navigating through long lists of data.
|
|
9
|
+
* Automatically collapses large page ranges into ellipses (…) to save space.
|
|
10
|
+
* Returns null when there is only one page (nothing to paginate).
|
|
11
|
+
*/
|
|
12
|
+
export declare const McPagination: import('react').ForwardRefExoticComponent<McPaginationProps & import('react').RefAttributes<HTMLElement>>;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export interface McSelectOption {
|
|
2
|
+
value: string;
|
|
3
|
+
label: string;
|
|
4
|
+
disabled?: boolean;
|
|
5
|
+
}
|
|
6
|
+
export interface McSelectGroup {
|
|
7
|
+
label: string;
|
|
8
|
+
options: McSelectOption[];
|
|
9
|
+
}
|
|
10
|
+
export interface McSelectProps {
|
|
11
|
+
options: McSelectOption[] | McSelectGroup[];
|
|
12
|
+
label?: string;
|
|
13
|
+
placeholder?: string;
|
|
14
|
+
error?: string;
|
|
15
|
+
className?: string;
|
|
16
|
+
disabled?: boolean;
|
|
17
|
+
id?: string;
|
|
18
|
+
value?: string;
|
|
19
|
+
defaultValue?: string;
|
|
20
|
+
onValueChange?: (value: string) => void;
|
|
21
|
+
name?: string;
|
|
22
|
+
required?: boolean;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* McSelect — an accessible select/combobox built on Radix UI's Select primitive.
|
|
26
|
+
* Supports flat or grouped option lists, placeholder text, error state, and disabled items.
|
|
27
|
+
*/
|
|
28
|
+
export declare const McSelect: import('react').ForwardRefExoticComponent<McSelectProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export type McSidePanelSide = "left" | "right";
|
|
3
|
+
export interface McSidePanelProps {
|
|
4
|
+
isOpen: boolean;
|
|
5
|
+
onClose: () => void;
|
|
6
|
+
title?: ReactNode;
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
side?: McSidePanelSide;
|
|
9
|
+
className?: string;
|
|
10
|
+
id?: string;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* McSidePanel — a sliding drawer anchored to an edge of the screen.
|
|
14
|
+
* Locks body scroll while open and uses a spring animation.
|
|
15
|
+
* A blurred backdrop covers the rest of the page.
|
|
16
|
+
*/
|
|
17
|
+
export declare const McSidePanel: import('react').ForwardRefExoticComponent<McSidePanelProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
export interface McSkeletonProps extends ComponentPropsWithoutRef<"div"> {
|
|
3
|
+
/**
|
|
4
|
+
* Convenience shorthand for the most common shapes.
|
|
5
|
+
* - 'rectangle' (default) — use for text lines, cards, images
|
|
6
|
+
* - 'circle' — use for avatars and icon placeholders
|
|
7
|
+
* - 'text' — thin bar that looks like a line of body text
|
|
8
|
+
*
|
|
9
|
+
* You can override any shape via the `className` prop.
|
|
10
|
+
*/
|
|
11
|
+
shape?: "rectangle" | "circle" | "text";
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* McSkeleton — loading placeholder with a sliding gradient shimmer.
|
|
15
|
+
* Shimmer styles are defined in the package stylesheet (index.css) via
|
|
16
|
+
* [data-mc-skeleton] and [data-mc-skeleton]::after selectors.
|
|
17
|
+
* Size and shape are controlled entirely through the `className` and `shape` props.
|
|
18
|
+
* Compose multiple McSkeleton elements to mirror the real content layout.
|
|
19
|
+
*/
|
|
20
|
+
export declare const McSkeleton: import('react').ForwardRefExoticComponent<McSkeletonProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
export type McStepperStatus = 'pending' | 'active' | 'completed' | 'error';
|
|
3
|
+
export interface McStep {
|
|
4
|
+
label: string;
|
|
5
|
+
description?: string;
|
|
6
|
+
status?: McStepperStatus;
|
|
7
|
+
}
|
|
8
|
+
export interface McStepperProps extends ComponentPropsWithoutRef<'ol'> {
|
|
9
|
+
currentStep: number;
|
|
10
|
+
steps: McStep[];
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* McStepper — a vertical multi-step indicator for wizards and long flows.
|
|
14
|
+
* Shows pending, active, completed, and error states for each step.
|
|
15
|
+
* The step status can be provided explicitly or derived from the currentStep index.
|
|
16
|
+
*/
|
|
17
|
+
export declare const McStepper: import('react').ForwardRefExoticComponent<McStepperProps & import('react').RefAttributes<HTMLOListElement>>;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface McSwitchProps {
|
|
3
|
+
label?: string;
|
|
4
|
+
/**
|
|
5
|
+
* Accessible name when there is no visible `label` (icon-only switches).
|
|
6
|
+
* Ignored when `label` is set — the visible label is linked via htmlFor / id.
|
|
7
|
+
*/
|
|
8
|
+
ariaLabel?: string;
|
|
9
|
+
description?: string;
|
|
10
|
+
checkedIcon?: ReactNode;
|
|
11
|
+
uncheckedIcon?: ReactNode;
|
|
12
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
13
|
+
onChange?: (event: {
|
|
14
|
+
target: {
|
|
15
|
+
value: boolean;
|
|
16
|
+
};
|
|
17
|
+
}) => void;
|
|
18
|
+
id?: string;
|
|
19
|
+
className?: string;
|
|
20
|
+
disabled?: boolean;
|
|
21
|
+
name?: string;
|
|
22
|
+
required?: boolean;
|
|
23
|
+
checked?: boolean;
|
|
24
|
+
defaultChecked?: boolean;
|
|
25
|
+
value?: string;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* McSwitch — an accessible toggle switch built on Radix UI's Switch primitive.
|
|
29
|
+
* Supports labels, descriptions, optional thumb icons, and disabled state.
|
|
30
|
+
* The thumb slides smoothly left/right with a CSS transition.
|
|
31
|
+
*/
|
|
32
|
+
export declare const McSwitch: import('react').ForwardRefExoticComponent<McSwitchProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
|
+
export interface McTabsRootProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
|
|
3
|
+
value?: string;
|
|
4
|
+
defaultValue?: string;
|
|
5
|
+
onChange?: (value: string) => void;
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* McTabsRoot — the outer wrapper that provides shared state to all tab sub-components.
|
|
10
|
+
* Supports both controlled mode (via `value` + `onChange`) and uncontrolled mode (via `defaultValue`).
|
|
11
|
+
*/
|
|
12
|
+
export declare const McTabsRoot: ({ value: valueProp, defaultValue, onChange, children, className, ...props }: McTabsRootProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export interface McTabsListProps extends ComponentPropsWithoutRef<'div'> {
|
|
14
|
+
'aria-label'?: string;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* McTabsList — the row of tab trigger buttons.
|
|
18
|
+
* Renders a styled container with role="tablist" for screen readers.
|
|
19
|
+
*/
|
|
20
|
+
export declare const McTabsList: import('react').ForwardRefExoticComponent<McTabsListProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
21
|
+
export interface McTabsTriggerProps extends ComponentPropsWithoutRef<'button'> {
|
|
22
|
+
value: string;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* McTabsTrigger — a single tab button in the tab list.
|
|
26
|
+
* Reads the active tab from context and highlights itself when active.
|
|
27
|
+
*/
|
|
28
|
+
export declare const McTabsTrigger: import('react').ForwardRefExoticComponent<McTabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
29
|
+
export interface McTabsContentProps extends ComponentPropsWithoutRef<'div'> {
|
|
30
|
+
value: string;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* McTabsContent — the content panel shown when its matching trigger is active.
|
|
34
|
+
* Returns null when this tab is not selected (hidden from DOM).
|
|
35
|
+
*/
|
|
36
|
+
export declare const McTabsContent: import('react').ForwardRefExoticComponent<McTabsContentProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
37
|
+
type McTabsNamespace = typeof McTabsRoot & {
|
|
38
|
+
Root: typeof McTabsRoot;
|
|
39
|
+
List: typeof McTabsList;
|
|
40
|
+
Trigger: typeof McTabsTrigger;
|
|
41
|
+
Content: typeof McTabsContent;
|
|
42
|
+
};
|
|
43
|
+
export declare const McTabs: McTabsNamespace;
|
|
44
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
export interface McTextareaProps extends ComponentPropsWithoutRef<"textarea"> {
|
|
3
|
+
label?: string;
|
|
4
|
+
error?: string;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* McTextarea — a themed multi-line text input.
|
|
8
|
+
* Mirrors McInput's visual style and supports labels, error states, and vertical resize.
|
|
9
|
+
*/
|
|
10
|
+
export declare const McTextarea: import('react').ForwardRefExoticComponent<McTextareaProps & import('react').RefAttributes<HTMLTextAreaElement>>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* McToastProvider — wrap your application (or page) root with this to enable
|
|
4
|
+
* the useToast hook anywhere in the component tree below it.
|
|
5
|
+
*/
|
|
6
|
+
export declare function McToastProvider({ children }: {
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export type McToastVariant = "success" | "error" | "info";
|
|
2
|
+
export interface McToastItem {
|
|
3
|
+
id: string;
|
|
4
|
+
message: string;
|
|
5
|
+
title?: string;
|
|
6
|
+
variant: McToastVariant;
|
|
7
|
+
duration: number;
|
|
8
|
+
}
|
|
9
|
+
export type McToastOptions = {
|
|
10
|
+
title?: string;
|
|
11
|
+
duration?: number;
|
|
12
|
+
};
|
|
13
|
+
export interface McToastContextValue {
|
|
14
|
+
addToast: (toast: {
|
|
15
|
+
message: string;
|
|
16
|
+
title?: string;
|
|
17
|
+
variant: McToastVariant;
|
|
18
|
+
duration: number;
|
|
19
|
+
}) => void;
|
|
20
|
+
removeToast: (id: string) => void;
|
|
21
|
+
}
|
|
22
|
+
export declare const McToastContext: import('react').Context<McToastContextValue | null>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { McToastOptions } from './McToastContext';
|
|
2
|
+
/**
|
|
3
|
+
* useToast — returns a `toast` object with `success`, `error`, and `info` methods.
|
|
4
|
+
* Must be called inside a component that is wrapped by McToastProvider.
|
|
5
|
+
*
|
|
6
|
+
* Example:
|
|
7
|
+
* const { toast } = useToast();
|
|
8
|
+
* toast.success("Profile saved!");
|
|
9
|
+
*/
|
|
10
|
+
export declare function useToast(): {
|
|
11
|
+
toast: {
|
|
12
|
+
success: (message: string, options?: McToastOptions) => void;
|
|
13
|
+
error: (message: string, options?: McToastOptions) => void;
|
|
14
|
+
info: (message: string, options?: McToastOptions) => void;
|
|
15
|
+
};
|
|
16
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
|
+
type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
|
|
3
|
+
export interface McTooltipRootProps extends ComponentPropsWithoutRef<'div'> {
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
placement?: TooltipPlacement;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* McTooltipRoot — the outer wrapper that provides state to the trigger and content.
|
|
9
|
+
* Shows the tooltip on hover and keyboard focus, hides it on leave/blur.
|
|
10
|
+
*/
|
|
11
|
+
export declare const McTooltipRoot: ({ children, className, placement, ...props }: McTooltipRootProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export type McTooltipTriggerProps = ComponentPropsWithoutRef<'button'>;
|
|
13
|
+
/**
|
|
14
|
+
* McTooltipTrigger — the element that shows the tooltip on hover or focus.
|
|
15
|
+
* Sets aria-describedby to link to the tooltip content for screen readers.
|
|
16
|
+
*/
|
|
17
|
+
export declare const McTooltipTrigger: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
|
|
18
|
+
export interface McTooltipContentProps extends ComponentPropsWithoutRef<'div'> {
|
|
19
|
+
children: ReactNode;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* McTooltipContent — the floating bubble that shows the tooltip text.
|
|
23
|
+
* Rendered in a portal with fixed positioning so it is not clipped by overflow:hidden
|
|
24
|
+
* (e.g. McCard). Renders nothing when the tooltip is not visible.
|
|
25
|
+
*/
|
|
26
|
+
export declare const McTooltipContent: import('react').ForwardRefExoticComponent<McTooltipContentProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
27
|
+
type McTooltipNamespace = typeof McTooltipRoot & {
|
|
28
|
+
Root: typeof McTooltipRoot;
|
|
29
|
+
Trigger: typeof McTooltipTrigger;
|
|
30
|
+
Content: typeof McTooltipContent;
|
|
31
|
+
};
|
|
32
|
+
export declare const McTooltip: McTooltipNamespace;
|
|
33
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared label / error wiring: stable `inputId` and matching `errorId` for aria-describedby.
|
|
3
|
+
* Used by McInput and McTextarea; not re-exported from the package public API.
|
|
4
|
+
*/
|
|
5
|
+
export declare function useFieldIds(id?: string): {
|
|
6
|
+
inputId: string;
|
|
7
|
+
errorId: string;
|
|
8
|
+
};
|