@grupo-elo-editorial/shared-ui-react 1.0.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/README.md +184 -0
- package/dist/components/atoms/Avatar.d.ts +12 -0
- package/dist/components/atoms/Badge.d.ts +12 -0
- package/dist/components/atoms/Button.d.ts +14 -0
- package/dist/components/atoms/Divider.d.ts +8 -0
- package/dist/components/atoms/Rating.d.ts +11 -0
- package/dist/components/atoms/Spinner.d.ts +10 -0
- package/dist/components/atoms/Textarea.d.ts +7 -0
- package/dist/components/atoms/index.d.ts +19 -0
- package/dist/components/figma/ImageWithFallback.d.ts +2 -0
- package/dist/components/molecules/FormGroup.d.ts +11 -0
- package/dist/components/molecules/PriceDisplay.d.ts +14 -0
- package/dist/components/molecules/ProductCard.d.ts +18 -0
- package/dist/components/molecules/QuantitySelector.d.ts +12 -0
- package/dist/components/molecules/SearchBar.d.ts +9 -0
- package/dist/components/molecules/index.d.ts +15 -0
- package/dist/components/organisms/EmptyState.d.ts +13 -0
- package/dist/components/organisms/ErrorState.d.ts +12 -0
- package/dist/components/organisms/Hero.d.ts +20 -0
- package/dist/components/organisms/ProductGrid.d.ts +13 -0
- package/dist/components/organisms/index.d.ts +10 -0
- package/dist/components/prd/HeroCarousel.d.ts +20 -0
- package/dist/components/prd/TopAccessibilityBar.d.ts +7 -0
- package/dist/components/prd/index.d.ts +4 -0
- package/dist/components/ui/accordion.d.ts +7 -0
- package/dist/components/ui/alert-dialog.d.ts +14 -0
- package/dist/components/ui/alert.d.ts +9 -0
- package/dist/components/ui/aspect-ratio.d.ts +3 -0
- package/dist/components/ui/avatar.d.ts +6 -0
- package/dist/components/ui/badge.d.ts +9 -0
- package/dist/components/ui/breadcrumb.d.ts +11 -0
- package/dist/components/ui/button.d.ts +10 -0
- package/dist/components/ui/calendar.d.ts +4 -0
- package/dist/components/ui/card.d.ts +9 -0
- package/dist/components/ui/carousel.d.ts +19 -0
- package/dist/components/ui/chart.d.ts +40 -0
- package/dist/components/ui/checkbox.d.ts +4 -0
- package/dist/components/ui/collapsible.d.ts +5 -0
- package/dist/components/ui/command.d.ts +16 -0
- package/dist/components/ui/context-menu.d.ts +25 -0
- package/dist/components/ui/dialog.d.ts +13 -0
- package/dist/components/ui/drawer.d.ts +13 -0
- package/dist/components/ui/dropdown-menu.d.ts +25 -0
- package/dist/components/ui/form.d.ts +24 -0
- package/dist/components/ui/hover-card.d.ts +6 -0
- package/dist/components/ui/input-otp.d.ts +11 -0
- package/dist/components/ui/input.d.ts +3 -0
- package/dist/components/ui/label.d.ts +4 -0
- package/dist/components/ui/menubar.d.ts +26 -0
- package/dist/components/ui/navigation-menu.d.ts +14 -0
- package/dist/components/ui/pagination.d.ts +13 -0
- package/dist/components/ui/popover.d.ts +7 -0
- package/dist/components/ui/progress.d.ts +4 -0
- package/dist/components/ui/radio-group.d.ts +5 -0
- package/dist/components/ui/resizable.d.ts +8 -0
- package/dist/components/ui/scroll-area.d.ts +5 -0
- package/dist/components/ui/select.d.ts +15 -0
- package/dist/components/ui/separator.d.ts +4 -0
- package/dist/components/ui/sheet.d.ts +13 -0
- package/dist/components/ui/sidebar.d.ts +69 -0
- package/dist/components/ui/skeleton.d.ts +2 -0
- package/dist/components/ui/slider.d.ts +4 -0
- package/dist/components/ui/sonner.d.ts +3 -0
- package/dist/components/ui/switch.d.ts +4 -0
- package/dist/components/ui/table.d.ts +10 -0
- package/dist/components/ui/tabs.d.ts +7 -0
- package/dist/components/ui/textarea.d.ts +3 -0
- package/dist/components/ui/toggle-group.d.ts +7 -0
- package/dist/components/ui/toggle.d.ts +9 -0
- package/dist/components/ui/tooltip.d.ts +7 -0
- package/dist/components/ui/use-mobile.d.ts +1 -0
- package/dist/components/ui/utils.d.ts +2 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.js +1914 -0
- package/dist/index.js.map +1 -0
- package/dist/style.css +1 -0
- package/package.json +116 -0
package/README.md
ADDED
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
# `@grupo-elo-editorial/shared-ui-react`
|
|
2
|
+
|
|
3
|
+
React component library for the **Grupo ELO Editorial** multibrand design system. Brand-aware primitives, composed components, layout patterns, and domain components — all rendering against the same CSS-variable contract as [`@grupo-elo-editorial/design-tokens`](../../design-system/packages/design-tokens/) v3+.
|
|
4
|
+
|
|
5
|
+
Stack: **React 18+** · **TypeScript** · **Tailwind CSS v4** · **Radix UI** (via shadcn/ui primitives) · **Lucide icons** · **Sonner toasts** · `class-variance-authority` for variants.
|
|
6
|
+
|
|
7
|
+
This is the **React sibling** of [`@grupo-elo-editorial/shared-ui-vue`](../shared-ui-vue/) (Vue 3). Both packages share the same semantic component surface and consume the same design tokens.
|
|
8
|
+
|
|
9
|
+
## Architecture position
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
shared-ui-react ───────► design-system (tokens, themes)
|
|
13
|
+
apps/<consumer> ──► shared-ui-react + design-system
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
`shared-ui-react` never imports from app code or from `shared-ui-vue`.
|
|
17
|
+
|
|
18
|
+
## Install
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
pnpm add @grupo-elo-editorial/shared-ui-react @grupo-elo-editorial/design-tokens
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
The package's `dependencies` field declares every Radix UI primitive and helper (`lucide-react`, `class-variance-authority`, `clsx`, `tailwind-merge`, `sonner`, `next-themes`, `cmdk`, `embla-carousel-react`, `input-otp`, `react-day-picker`, `react-hook-form`, `react-resizable-panels`, `recharts`, `vaul`) so a fresh consumer install resolves everything in one step.
|
|
25
|
+
|
|
26
|
+
## Use
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
// main.tsx — once per app
|
|
30
|
+
import '@grupo-elo-editorial/shared-ui-react/style.css';
|
|
31
|
+
|
|
32
|
+
// The stylesheet ships Lato + Tailwind CSS v4 + multibrand theme tokens.
|
|
33
|
+
// Brand + theme switch via attributes on <html> (or a scoped container):
|
|
34
|
+
//
|
|
35
|
+
// <html data-brand="elo-editora" data-theme="light"> ... </html>
|
|
36
|
+
// <html data-brand="perabook" data-theme="dark"> ... </html>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
import { Button, ProductCard, Hero, Modal, TopAccessibilityBar } from '@grupo-elo-editorial/shared-ui-react';
|
|
41
|
+
|
|
42
|
+
export function Example() {
|
|
43
|
+
return (
|
|
44
|
+
<>
|
|
45
|
+
<TopAccessibilityBar />
|
|
46
|
+
<Hero
|
|
47
|
+
title="Histórias que acompanham gerações"
|
|
48
|
+
subtitle="Mais de 30 anos publicando literatura infantojuvenil"
|
|
49
|
+
ctaLabel="Conheça o catálogo"
|
|
50
|
+
/>
|
|
51
|
+
<Button variant="primary" size="lg">Comprar agora</Button>
|
|
52
|
+
</>
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## Component inventory (42)
|
|
58
|
+
|
|
59
|
+
### Atoms (7 custom + 6 re-exported)
|
|
60
|
+
|
|
61
|
+
| Custom | Re-exported (shadcn/ui) |
|
|
62
|
+
|---|---|
|
|
63
|
+
| `Button` (primary/secondary/ghost/danger/link/success × sm/md/lg) | `Input` |
|
|
64
|
+
| `Textarea` | `Select`, `SelectContent`, `SelectItem`, `SelectTrigger`, `SelectValue` |
|
|
65
|
+
| `Badge` (default/secondary/success/warning/danger/info/outline) | `Checkbox` |
|
|
66
|
+
| `Avatar` (sm/md/lg/xl + status) | `RadioGroup`, `RadioGroupItem` |
|
|
67
|
+
| `Spinner` (sm/md/lg/xl) | `Toggle` (= Switch) |
|
|
68
|
+
| `Divider` (horizontal/vertical, solid/dashed/dotted) | |
|
|
69
|
+
| `Rating` (interactive + readonly + half-stars) | |
|
|
70
|
+
|
|
71
|
+
### Molecules (5 custom + 4 re-exported)
|
|
72
|
+
|
|
73
|
+
| Custom | Re-exported |
|
|
74
|
+
|---|---|
|
|
75
|
+
| `ProductCard` (default/skeleton/out-of-stock variants) | `Breadcrumb*` |
|
|
76
|
+
| `SearchBar` (icon, clear, loading) | `Accordion*` |
|
|
77
|
+
| `PriceDisplay` (original price + discount + installments) | `Tooltip*` |
|
|
78
|
+
| `QuantitySelector` (min/max constraints) | `ProgressBar` (`@radix-ui/react-progress`) |
|
|
79
|
+
| `FormGroup` (label/required/error/helper) | `toast` (sonner) |
|
|
80
|
+
|
|
81
|
+
### Organisms (4 custom + 2 re-exported)
|
|
82
|
+
|
|
83
|
+
| Custom | Re-exported |
|
|
84
|
+
|---|---|
|
|
85
|
+
| `Hero` (default/centered/split variants) | `Modal` (= Dialog from shadcn) |
|
|
86
|
+
| `EmptyState` (default/search/cart/error) | `Drawer` (= Sheet from shadcn) |
|
|
87
|
+
| `ErrorState` (404/500/network/generic) | |
|
|
88
|
+
| `ProductGrid` (responsive 2–5 columns) | |
|
|
89
|
+
|
|
90
|
+
### PRD-specific (2)
|
|
91
|
+
|
|
92
|
+
- `TopAccessibilityBar` — dark-mode toggle, A+/A- font controls, VLibras lazy-load.
|
|
93
|
+
- `HeroCarousel` — responsive `<picture>` with srcset, autoplay + pause on hover, respects `prefers-reduced-motion`.
|
|
94
|
+
|
|
95
|
+
### Utility
|
|
96
|
+
|
|
97
|
+
- `cn(...)` — class-name merger (`clsx` + `tailwind-merge`).
|
|
98
|
+
|
|
99
|
+
## Brand + theme contract
|
|
100
|
+
|
|
101
|
+
The bundled stylesheet defines tokens at four selectors:
|
|
102
|
+
|
|
103
|
+
| Selector | Effect |
|
|
104
|
+
|---|---|
|
|
105
|
+
| `:root` or `[data-brand="elo-editora"]` or `[data-brand="elo-editora"][data-theme="light"]` | Elo Editora — light (default) |
|
|
106
|
+
| `[data-brand="elo-editora"][data-theme="dark"]` | Elo Editora — dark |
|
|
107
|
+
| `[data-brand="perabook"]` or `[data-brand="perabook"][data-theme="light"]` | PeraBook — light |
|
|
108
|
+
| `[data-brand="perabook"][data-theme="dark"]` | PeraBook — dark |
|
|
109
|
+
|
|
110
|
+
This matches the `data-brand` / `data-theme` contract from `@grupo-elo-editorial/design-tokens` v3.
|
|
111
|
+
|
|
112
|
+
```tsx
|
|
113
|
+
// Apply globally
|
|
114
|
+
document.documentElement.setAttribute('data-brand', 'elo-editora');
|
|
115
|
+
document.documentElement.setAttribute('data-theme', 'dark');
|
|
116
|
+
|
|
117
|
+
// Or scope to a container
|
|
118
|
+
<div data-brand="perabook" data-theme="light">
|
|
119
|
+
<ProductCard ... />
|
|
120
|
+
</div>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
## Source layout
|
|
124
|
+
|
|
125
|
+
```
|
|
126
|
+
packages/shared-ui-react/
|
|
127
|
+
├── src/
|
|
128
|
+
│ ├── index.ts ← public API barrel (imports CSS)
|
|
129
|
+
│ ├── components/
|
|
130
|
+
│ │ ├── atoms/{Button,Avatar,Badge,…}.tsx
|
|
131
|
+
│ │ ├── molecules/{ProductCard,SearchBar,FormGroup,…}.tsx
|
|
132
|
+
│ │ ├── organisms/{Hero,EmptyState,ErrorState,ProductGrid}.tsx
|
|
133
|
+
│ │ ├── prd/{HeroCarousel,TopAccessibilityBar}.tsx
|
|
134
|
+
│ │ ├── ui/ ← shadcn/ui primitives (Radix wrappers)
|
|
135
|
+
│ │ └── figma/ImageWithFallback.tsx
|
|
136
|
+
│ └── styles/{fonts,theme,index}.css ← bundled into dist/style.css
|
|
137
|
+
├── playground/ ← Vite dev preview (pnpm run play)
|
|
138
|
+
├── docs/
|
|
139
|
+
│ ├── COMPONENT_LIBRARY.md ← original Figma export documentation
|
|
140
|
+
│ ├── CORRECTIONS.md ← Figma export correction notes
|
|
141
|
+
│ └── GUIDELINES.md ← original Figma project guidelines
|
|
142
|
+
├── vite.config.ts ← Tailwind v4 + library build, externals
|
|
143
|
+
├── tsconfig.{json,build.json}
|
|
144
|
+
├── package.json ← @grupo-elo-editorial/shared-ui-react@1.0.0
|
|
145
|
+
└── README.md
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
## Development
|
|
149
|
+
|
|
150
|
+
```bash
|
|
151
|
+
# From the monorepo root
|
|
152
|
+
pnpm install # workspace install
|
|
153
|
+
|
|
154
|
+
# From this package
|
|
155
|
+
pnpm --filter @grupo-elo-editorial/shared-ui-react type-check # ts check, no emit
|
|
156
|
+
pnpm --filter @grupo-elo-editorial/shared-ui-react build # builds dist/
|
|
157
|
+
pnpm --filter @grupo-elo-editorial/shared-ui-react play # Vite playground preview
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
## Conventions
|
|
161
|
+
|
|
162
|
+
- **React 18+** with function components and hooks. No class components.
|
|
163
|
+
- **Naming**: component names `PascalCase` (e.g. `Button`, not `RButton` — the scope already namespaces). File names `PascalCase.tsx`.
|
|
164
|
+
- **Variants**: defined via `class-variance-authority` (`cva`). Re-exported alongside the component (e.g. `buttonVariants`).
|
|
165
|
+
- **Styling**: Tailwind v4 utilities consuming `var(--brand-*)` / shadcn semantic tokens. Never hardcoded hex.
|
|
166
|
+
- **Brand awareness**: components don't reach for brand state — they consume CSS variables. Brand switching is the consumer's concern (`data-brand` / `data-theme` on root or scoped container).
|
|
167
|
+
- **Accessibility**: WCAG 2.2 AA — focus-visible, keyboard nav, ARIA labels on icon-only buttons, focus traps in modals (provided by Radix), respects `prefers-reduced-motion`.
|
|
168
|
+
- **Strict TypeScript**: every component exports its prop interface (e.g. `ButtonProps`).
|
|
169
|
+
|
|
170
|
+
## Origin
|
|
171
|
+
|
|
172
|
+
Initial component set seeded from the Figma Make multibrand export. See [`docs/COMPONENT_LIBRARY.md`](./docs/COMPONENT_LIBRARY.md) for the full inventory the Figma project shipped and [`docs/CORRECTIONS.md`](./docs/CORRECTIONS.md) for adjustments applied during the export. The historical Figma React preview app is preserved at [`design-system/_explorations/figma-multibrand/`](../../design-system/_explorations/figma-multibrand/) for visual reference.
|
|
173
|
+
|
|
174
|
+
## Sibling — Vue 3
|
|
175
|
+
|
|
176
|
+
[`@grupo-elo-editorial/shared-ui-vue`](../shared-ui-vue/) is the Vue 3 sibling. Same component semantics, same tokens, same brand contract — a `Button` in React and a `DSButton` in Vue render identically.
|
|
177
|
+
|
|
178
|
+
## Publish
|
|
179
|
+
|
|
180
|
+
Releases go through the [**NPM Release**](../../.github/workflows/npm-release.yml) GitHub Actions workflow. See [`design-system/RELEASE.md`](../../design-system/RELEASE.md) for the full release procedure.
|
|
181
|
+
|
|
182
|
+
## License
|
|
183
|
+
|
|
184
|
+
UNLICENSED — proprietary to Grupo ELO Editorial.
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ImgHTMLAttributes } from 'react';
|
|
2
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
3
|
+
declare const avatarVariants: (props?: ({
|
|
4
|
+
size?: "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
5
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
|
+
export interface AvatarProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'size'>, VariantProps<typeof avatarVariants> {
|
|
7
|
+
name?: string;
|
|
8
|
+
showStatus?: boolean;
|
|
9
|
+
statusType?: 'online' | 'offline' | 'away' | 'busy';
|
|
10
|
+
}
|
|
11
|
+
declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
12
|
+
export { Avatar, avatarVariants };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
3
|
+
declare const badgeVariants: (props?: ({
|
|
4
|
+
variant?: "secondary" | "danger" | "success" | "default" | "warning" | "outline" | "info" | null | undefined;
|
|
5
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
6
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
|
+
export interface BadgeProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
|
|
8
|
+
icon?: React.ReactNode;
|
|
9
|
+
onRemove?: () => void;
|
|
10
|
+
}
|
|
11
|
+
declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
12
|
+
export { Badge, badgeVariants };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ButtonHTMLAttributes } from 'react';
|
|
2
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
3
|
+
declare const buttonVariants: (props?: ({
|
|
4
|
+
variant?: "primary" | "secondary" | "ghost" | "danger" | "link" | "success" | null | undefined;
|
|
5
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
6
|
+
fullWidth?: boolean | null | undefined;
|
|
7
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
|
+
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
9
|
+
isLoading?: boolean;
|
|
10
|
+
leftIcon?: React.ReactNode;
|
|
11
|
+
rightIcon?: React.ReactNode;
|
|
12
|
+
}
|
|
13
|
+
declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
14
|
+
export { Button, buttonVariants };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
export interface DividerProps extends HTMLAttributes<HTMLHRElement> {
|
|
3
|
+
orientation?: 'horizontal' | 'vertical';
|
|
4
|
+
variant?: 'solid' | 'dashed' | 'dotted';
|
|
5
|
+
text?: string;
|
|
6
|
+
}
|
|
7
|
+
declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & import("react").RefAttributes<HTMLHRElement>>;
|
|
8
|
+
export { Divider };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
export interface RatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
3
|
+
value?: number;
|
|
4
|
+
maxRating?: number;
|
|
5
|
+
size?: 'sm' | 'md' | 'lg';
|
|
6
|
+
readonly?: boolean;
|
|
7
|
+
onChange?: (rating: number) => void;
|
|
8
|
+
showValue?: boolean;
|
|
9
|
+
}
|
|
10
|
+
declare const Rating: import("react").ForwardRefExoticComponent<RatingProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
11
|
+
export { Rating };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
3
|
+
declare const spinnerVariants: (props?: ({
|
|
4
|
+
size?: "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
5
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
|
+
export interface SpinnerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof spinnerVariants> {
|
|
7
|
+
label?: string;
|
|
8
|
+
}
|
|
9
|
+
declare const Spinner: import("react").ForwardRefExoticComponent<SpinnerProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
10
|
+
export { Spinner, spinnerVariants };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { TextareaHTMLAttributes } from 'react';
|
|
2
|
+
export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
3
|
+
error?: boolean;
|
|
4
|
+
helperText?: string;
|
|
5
|
+
}
|
|
6
|
+
declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
|
|
7
|
+
export { Textarea };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export { Button, buttonVariants } from './Button';
|
|
2
|
+
export type { ButtonProps } from './Button';
|
|
3
|
+
export { Textarea } from './Textarea';
|
|
4
|
+
export type { TextareaProps } from './Textarea';
|
|
5
|
+
export { Badge, badgeVariants } from './Badge';
|
|
6
|
+
export type { BadgeProps } from './Badge';
|
|
7
|
+
export { Avatar, avatarVariants } from './Avatar';
|
|
8
|
+
export type { AvatarProps } from './Avatar';
|
|
9
|
+
export { Spinner, spinnerVariants } from './Spinner';
|
|
10
|
+
export type { SpinnerProps } from './Spinner';
|
|
11
|
+
export { Divider } from './Divider';
|
|
12
|
+
export type { DividerProps } from './Divider';
|
|
13
|
+
export { Rating } from './Rating';
|
|
14
|
+
export type { RatingProps } from './Rating';
|
|
15
|
+
export { Input } from '../ui/input';
|
|
16
|
+
export { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
|
|
17
|
+
export { Checkbox } from '../ui/checkbox';
|
|
18
|
+
export { RadioGroup, RadioGroupItem } from '../ui/radio-group';
|
|
19
|
+
export { Switch as Toggle } from '../ui/switch';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export interface FormGroupProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
label?: string;
|
|
4
|
+
htmlFor?: string;
|
|
5
|
+
required?: boolean;
|
|
6
|
+
error?: string;
|
|
7
|
+
helperText?: string;
|
|
8
|
+
children: ReactNode;
|
|
9
|
+
}
|
|
10
|
+
declare const FormGroup: import("react").ForwardRefExoticComponent<FormGroupProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
11
|
+
export { FormGroup };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
export interface PriceDisplayProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
price: number;
|
|
4
|
+
originalPrice?: number;
|
|
5
|
+
currency?: string;
|
|
6
|
+
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
7
|
+
showDiscount?: boolean;
|
|
8
|
+
installments?: {
|
|
9
|
+
count: number;
|
|
10
|
+
value: number;
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
declare const PriceDisplay: import("react").ForwardRefExoticComponent<PriceDisplayProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
14
|
+
export { PriceDisplay };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
export interface ProductCardProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
image: string;
|
|
4
|
+
title: string;
|
|
5
|
+
price: number;
|
|
6
|
+
originalPrice?: number;
|
|
7
|
+
rating?: number;
|
|
8
|
+
reviewCount?: number;
|
|
9
|
+
badge?: string;
|
|
10
|
+
badgeVariant?: 'default' | 'success' | 'warning' | 'danger';
|
|
11
|
+
isSkeleton?: boolean;
|
|
12
|
+
isOutOfStock?: boolean;
|
|
13
|
+
onAddToCart?: () => void;
|
|
14
|
+
onToggleFavorite?: () => void;
|
|
15
|
+
isFavorite?: boolean;
|
|
16
|
+
}
|
|
17
|
+
declare const ProductCard: import("react").ForwardRefExoticComponent<ProductCardProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
18
|
+
export { ProductCard };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
export interface QuantitySelectorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
3
|
+
value: number;
|
|
4
|
+
min?: number;
|
|
5
|
+
max?: number;
|
|
6
|
+
onChange: (value: number) => void;
|
|
7
|
+
size?: 'sm' | 'md' | 'lg';
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
showLabel?: boolean;
|
|
10
|
+
}
|
|
11
|
+
declare const QuantitySelector: import("react").ForwardRefExoticComponent<QuantitySelectorProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
12
|
+
export { QuantitySelector };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { InputHTMLAttributes } from 'react';
|
|
2
|
+
export interface SearchBarProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
|
|
3
|
+
onSearch?: (value: string) => void;
|
|
4
|
+
onClear?: () => void;
|
|
5
|
+
isLoading?: boolean;
|
|
6
|
+
size?: 'sm' | 'md' | 'lg';
|
|
7
|
+
}
|
|
8
|
+
declare const SearchBar: import("react").ForwardRefExoticComponent<SearchBarProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
9
|
+
export { SearchBar };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export { ProductCard } from './ProductCard';
|
|
2
|
+
export type { ProductCardProps } from './ProductCard';
|
|
3
|
+
export { SearchBar } from './SearchBar';
|
|
4
|
+
export type { SearchBarProps } from './SearchBar';
|
|
5
|
+
export { PriceDisplay } from './PriceDisplay';
|
|
6
|
+
export type { PriceDisplayProps } from './PriceDisplay';
|
|
7
|
+
export { QuantitySelector } from './QuantitySelector';
|
|
8
|
+
export type { QuantitySelectorProps } from './QuantitySelector';
|
|
9
|
+
export { FormGroup } from './FormGroup';
|
|
10
|
+
export type { FormGroupProps } from './FormGroup';
|
|
11
|
+
export { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '../ui/breadcrumb';
|
|
12
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../ui/accordion';
|
|
13
|
+
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
|
|
14
|
+
export { toast } from 'sonner';
|
|
15
|
+
export { Progress as ProgressBar } from '@radix-ui/react-progress';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
export interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
variant?: 'default' | 'search' | 'cart' | 'error';
|
|
4
|
+
icon?: React.ReactNode;
|
|
5
|
+
title: string;
|
|
6
|
+
description?: string;
|
|
7
|
+
action?: {
|
|
8
|
+
label: string;
|
|
9
|
+
onClick: () => void;
|
|
10
|
+
};
|
|
11
|
+
}
|
|
12
|
+
declare const EmptyState: import("react").ForwardRefExoticComponent<EmptyStateProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
13
|
+
export { EmptyState };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
export interface ErrorStateProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
type?: '404' | '500' | 'network' | 'generic';
|
|
4
|
+
title?: string;
|
|
5
|
+
message?: string;
|
|
6
|
+
onRetry?: () => void;
|
|
7
|
+
onGoHome?: () => void;
|
|
8
|
+
showRetry?: boolean;
|
|
9
|
+
showHome?: boolean;
|
|
10
|
+
}
|
|
11
|
+
declare const ErrorState: import("react").ForwardRefExoticComponent<ErrorStateProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
12
|
+
export { ErrorState };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
export interface HeroProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
variant?: 'default' | 'centered' | 'split';
|
|
4
|
+
title: string;
|
|
5
|
+
subtitle?: string;
|
|
6
|
+
description?: string;
|
|
7
|
+
primaryCTA?: {
|
|
8
|
+
label: string;
|
|
9
|
+
onClick: () => void;
|
|
10
|
+
};
|
|
11
|
+
secondaryCTA?: {
|
|
12
|
+
label: string;
|
|
13
|
+
onClick: () => void;
|
|
14
|
+
};
|
|
15
|
+
backgroundImage?: string;
|
|
16
|
+
overlay?: boolean;
|
|
17
|
+
children?: React.ReactNode;
|
|
18
|
+
}
|
|
19
|
+
declare const Hero: import("react").ForwardRefExoticComponent<HeroProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
20
|
+
export { Hero };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
import { ProductCardProps } from '../molecules/ProductCard';
|
|
3
|
+
export interface ProductGridProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
products: ProductCardProps[];
|
|
5
|
+
columns?: 2 | 3 | 4 | 5;
|
|
6
|
+
gap?: 'sm' | 'md' | 'lg';
|
|
7
|
+
isLoading?: boolean;
|
|
8
|
+
skeletonCount?: number;
|
|
9
|
+
emptyStateMessage?: string;
|
|
10
|
+
onEmptyAction?: () => void;
|
|
11
|
+
}
|
|
12
|
+
declare const ProductGrid: import("react").ForwardRefExoticComponent<ProductGridProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
13
|
+
export { ProductGrid };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export { Hero } from './Hero';
|
|
2
|
+
export type { HeroProps } from './Hero';
|
|
3
|
+
export { EmptyState } from './EmptyState';
|
|
4
|
+
export type { EmptyStateProps } from './EmptyState';
|
|
5
|
+
export { ErrorState } from './ErrorState';
|
|
6
|
+
export type { ErrorStateProps } from './ErrorState';
|
|
7
|
+
export { ProductGrid } from './ProductGrid';
|
|
8
|
+
export type { ProductGridProps } from './ProductGrid';
|
|
9
|
+
export { Dialog as Modal, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from '../ui/dialog';
|
|
10
|
+
export { Sheet as Drawer, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, SheetFooter } from '../ui/sheet';
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
export interface HeroSlide {
|
|
3
|
+
id: string;
|
|
4
|
+
title: string;
|
|
5
|
+
description: string;
|
|
6
|
+
imageMobile: string;
|
|
7
|
+
imageTablet: string;
|
|
8
|
+
imageDesktop: string;
|
|
9
|
+
cta?: {
|
|
10
|
+
label: string;
|
|
11
|
+
href: string;
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
export interface HeroCarouselProps extends HTMLAttributes<HTMLDivElement> {
|
|
15
|
+
slides: HeroSlide[];
|
|
16
|
+
autoplayDelay?: number;
|
|
17
|
+
autoplay?: boolean;
|
|
18
|
+
}
|
|
19
|
+
declare const HeroCarousel: import("react").ForwardRefExoticComponent<HeroCarouselProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
20
|
+
export { HeroCarousel };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
export interface TopAccessibilityBarProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
onThemeChange?: (theme: 'light' | 'dark') => void;
|
|
4
|
+
onFontSizeChange?: (size: number) => void;
|
|
5
|
+
}
|
|
6
|
+
declare const TopAccessibilityBar: import("react").ForwardRefExoticComponent<TopAccessibilityBarProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
7
|
+
export { TopAccessibilityBar };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
3
|
+
declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
|
|
3
|
+
declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
declare function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { type VariantProps } from "class-variance-authority";
|
|
3
|
+
declare const alertVariants: (props?: ({
|
|
4
|
+
variant?: "default" | "destructive" | null | undefined;
|
|
5
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
|
+
declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { Alert, AlertTitle, AlertDescription };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as AvatarPrimitive from "@radix-ui/react-avatar";
|
|
3
|
+
declare function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export { Avatar, AvatarImage, AvatarFallback };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { type VariantProps } from "class-variance-authority";
|
|
3
|
+
declare const badgeVariants: (props?: ({
|
|
4
|
+
variant?: "secondary" | "default" | "outline" | "destructive" | null | undefined;
|
|
5
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
|
+
declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
|
|
7
|
+
asChild?: boolean;
|
|
8
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { Badge, badgeVariants };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
declare function Breadcrumb({ ...props }: React.ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<"a"> & {
|
|
6
|
+
asChild?: boolean;
|
|
7
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { type VariantProps } from "class-variance-authority";
|
|
3
|
+
declare const buttonVariants: (props?: ({
|
|
4
|
+
variant?: "secondary" | "ghost" | "link" | "default" | "outline" | "destructive" | null | undefined;
|
|
5
|
+
size?: "sm" | "lg" | "default" | "icon" | null | undefined;
|
|
6
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
|
+
declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
|
|
8
|
+
asChild?: boolean;
|
|
9
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export { Button, buttonVariants };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
declare function Card({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function CardAction({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function CardContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
|
|
3
|
+
import { Button } from "./button";
|
|
4
|
+
type CarouselApi = UseEmblaCarouselType[1];
|
|
5
|
+
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
|
|
6
|
+
type CarouselOptions = UseCarouselParameters[0];
|
|
7
|
+
type CarouselPlugin = UseCarouselParameters[1];
|
|
8
|
+
type CarouselProps = {
|
|
9
|
+
opts?: CarouselOptions;
|
|
10
|
+
plugins?: CarouselPlugin;
|
|
11
|
+
orientation?: "horizontal" | "vertical";
|
|
12
|
+
setApi?: (api: CarouselApi) => void;
|
|
13
|
+
};
|
|
14
|
+
declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: React.ComponentProps<"div"> & CarouselProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
declare function CarouselContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
declare function CarouselItem({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
declare function CarouselPrevious({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
declare function CarouselNext({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, };
|