@forgedevstack/bear 1.3.4 → 1.3.5
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 +112 -155
- package/dist/components/Alert/Alert.cjs +1 -1
- package/dist/components/Alert/Alert.const.cjs +1 -1
- package/dist/components/Alert/Alert.const.d.ts +1 -6
- package/dist/components/Alert/Alert.const.js +10 -30
- package/dist/components/Alert/Alert.js +49 -54
- package/dist/components/Calendar/Calendar.cjs +1 -1
- package/dist/components/Calendar/Calendar.js +122 -112
- package/dist/components/Chart/BarChart.cjs +1 -1
- package/dist/components/Chart/BarChart.js +37 -36
- package/dist/components/Chart/Chart.types.d.ts +2 -0
- package/dist/components/Chart/Chart.utils.cjs +1 -1
- package/dist/components/Chart/Chart.utils.d.ts +2 -0
- package/dist/components/Chart/Chart.utils.js +32 -31
- package/dist/components/Chart/FunnelChart.cjs +1 -1
- package/dist/components/Chart/FunnelChart.js +29 -28
- package/dist/components/Chart/LineChart.cjs +1 -1
- package/dist/components/Chart/LineChart.js +45 -44
- package/dist/components/Chart/PieChart.cjs +1 -1
- package/dist/components/Chart/PieChart.js +52 -51
- package/dist/components/Chart/RadarChart.cjs +1 -1
- package/dist/components/Chart/RadarChart.js +63 -62
- package/dist/components/Chart/index.d.ts +1 -1
- package/dist/components/HoverCard/HoverCard.const.cjs +1 -1
- package/dist/components/HoverCard/HoverCard.const.js +3 -8
- package/dist/components/Menu/Menu.const.cjs +1 -1
- package/dist/components/Menu/Menu.const.js +5 -10
- package/dist/components/Modal/Modal.const.cjs +1 -1
- package/dist/components/Modal/Modal.const.js +14 -19
- package/dist/components/ModalsProvider/components/StackedModal/StackedModal.cjs +1 -1
- package/dist/components/ModalsProvider/components/StackedModal/StackedModal.js +10 -9
- package/dist/components/OverlayPortal/OverlayPortal.cjs +1 -1
- package/dist/components/OverlayPortal/OverlayPortal.const.cjs +1 -1
- package/dist/components/OverlayPortal/OverlayPortal.const.d.ts +4 -0
- package/dist/components/OverlayPortal/OverlayPortal.const.js +21 -5
- package/dist/components/OverlayPortal/OverlayPortal.js +44 -38
- package/dist/components/Popover/Popover.const.cjs +1 -1
- package/dist/components/Popover/Popover.const.js +14 -19
- package/dist/components/Tabs/TabList.cjs +1 -1
- package/dist/components/Tabs/TabList.js +1 -1
- package/dist/components/ToggleGroup/ToggleGroup.cjs +1 -1
- package/dist/components/ToggleGroup/ToggleGroup.js +49 -46
- package/dist/components/Tooltip/Tooltip.const.cjs +1 -1
- package/dist/components/Tooltip/Tooltip.const.js +10 -15
- package/dist/components/Transition/Transition.cjs +1 -1
- package/dist/components/Transition/Transition.const.cjs +1 -1
- package/dist/components/Transition/Transition.const.js +26 -8
- package/dist/components/Transition/Transition.js +77 -74
- package/dist/components/Transition/Transition.types.d.ts +8 -2
- package/dist/components/Typography/Typography.const.cjs +1 -1
- package/dist/components/Typography/Typography.const.js +2 -1
- package/dist/components/index.cjs +1 -1
- package/dist/components/index.d.ts +1 -1
- package/dist/components/index.js +1 -1
- package/dist/constants/generals.const.cjs +1 -1
- package/dist/constants/generals.const.js +85 -86
- package/dist/hooks/useFixedAnchorPosition/index.d.ts +1 -1
- package/dist/hooks/useFixedAnchorPosition/useFixedAnchorPosition.const.cjs +1 -1
- package/dist/hooks/useFixedAnchorPosition/useFixedAnchorPosition.const.d.ts +3 -0
- package/dist/hooks/useFixedAnchorPosition/useFixedAnchorPosition.const.js +17 -14
- package/dist/hooks/useFixedAnchorPosition/useFixedAnchorPosition.types.d.ts +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +557 -557
- package/dist/styles/_alerts.css +85 -4
- package/dist/styles/_drawer.css +60 -0
- package/dist/styles/_effects.css +33 -0
- package/dist/styles.css +179 -4
- package/package.json +3 -5
package/README.md
CHANGED
|
@@ -1,130 +1,64 @@
|
|
|
1
|
-
|
|
2
|
-
<img src="portal/public/bear-icon.svg" width="100" height="110" alt="Bear UI Mascot - Lotso Bear" />
|
|
3
|
-
</p>
|
|
1
|
+
# @forgedevstack/bear
|
|
4
2
|
|
|
5
|
-
|
|
3
|
+
React components, a theme provider, and AeroCraft tokens. Version 1.3.5 in this repository. The published npm release is still 1.3.4 until 1.3.5 is published.
|
|
6
4
|
|
|
7
|
-
|
|
8
|
-
<strong>The Foundation for your React UI.</strong><br />
|
|
9
|
-
190+ accessible, customizable React components with TypeScript, AeroCraft CSS tokens, responsive hooks, and signature Lotso bear aesthetics.
|
|
10
|
-
</p>
|
|
5
|
+
Author: John Yaghobieh. Docs: [bearui.com](https://bearui.com). Package: [@forgedevstack/bear](https://www.npmjs.com/package/@forgedevstack/bear).
|
|
11
6
|
|
|
12
|
-
|
|
13
|
-
<a href="https://www.npmjs.com/package/@forgedevstack/bear"><img src="https://img.shields.io/npm/v/@forgedevstack/bear.svg?color=db2777" alt="npm version" /></a>
|
|
14
|
-
<a href="https://github.com/yaghobieh/bear/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="License: MIT" /></a>
|
|
15
|
-
<img src="https://img.shields.io/badge/components-190+-db2777.svg" alt="Components: 190+" />
|
|
16
|
-
<img src="https://img.shields.io/badge/icons-550+-purple.svg" alt="Icons: 550+" />
|
|
17
|
-
<img src="https://img.shields.io/badge/hooks-25+-blue.svg" alt="Hooks: 25+" />
|
|
18
|
-
<img src="https://img.shields.io/badge/TypeScript-Strict-3178c6.svg" alt="TypeScript Strict" />
|
|
19
|
-
<a href="https://bearui.com"><img src="https://img.shields.io/badge/docs-bearui.com-db2777.svg" alt="Docs Portal" /></a>
|
|
20
|
-
</p>
|
|
21
|
-
|
|
22
|
-
---
|
|
23
|
-
|
|
24
|
-
## 🌟 Highlights & What's New in v1.3.4
|
|
25
|
-
|
|
26
|
-
- 🔘 **ToggleGroup & ToggleGroupItem**: Modern segmented controls supporting single (`type="single"`) and multiple (`type="multiple"`) selections with full WAI-ARIA roving tabindex keyboard navigation.
|
|
27
|
-
- 🎯 **Standardized `useFocusTrap`**: Centralized, robust focus trap & focus restore across all overlay components (`Modal`, `Drawer`, `AlertDialog`, `CommandPalette`, `BottomSheet`).
|
|
28
|
-
- 🎬 **Overlay Motion Parity**: Unified `openEffect`, `closeEffect`, and compound `effect={{ open, close }}` across `Modal`, `Menu`, `Popover`, `Tooltip`, and `HoverCard`.
|
|
29
|
-
- 📐 **Density Parity**: First-class support for `compact`, `normal`, and `comfortable` densities across `Select`, `ChipGroup`, and `AppBar`.
|
|
30
|
-
- 🐻 **Lotso Bear Visual Identity**: High-fidelity mascot vectors, dark/light theme integration, and brand new `@bear-icons` (`BearIcon`, `LotsoIcon`, `BearFaceIcon`, `PawIcon`).
|
|
31
|
-
- 🤖 **AI Chat Primitives**: Complete streaming chat suite including `PromptComposer`, `StreamingMessage`, `ThinkingBlock`, `PromptSuggestions`, `ToolCall`, and `ContextMeter`.
|
|
32
|
-
|
|
33
|
-
---
|
|
34
|
-
|
|
35
|
-
## 📦 Installation
|
|
7
|
+
## Install
|
|
36
8
|
|
|
37
9
|
```bash
|
|
38
|
-
# Recommended default installation (includes components, themes & icons)
|
|
39
10
|
npm install @forgedevstack/bear
|
|
40
|
-
|
|
41
|
-
# Or with your preferred package manager
|
|
42
|
-
pnpm add @forgedevstack/bear
|
|
43
|
-
yarn add @forgedevstack/bear
|
|
44
|
-
bun add @forgedevstack/bear
|
|
45
11
|
```
|
|
46
12
|
|
|
47
|
-
|
|
13
|
+
That install is the component set and the theme. Icons are a separate package. Charts still ship inside the core build today, and they also have a dedicated package entry so you can import them on their own.
|
|
48
14
|
|
|
49
15
|
```bash
|
|
50
|
-
|
|
16
|
+
npm install @forgedevstack/bear-icons
|
|
17
|
+
npm install @forgedevstack/bear-x-charts
|
|
18
|
+
npm install @forgedevstack/bear-x-ai
|
|
19
|
+
npm install @forgedevstack/bear-x-code
|
|
20
|
+
npm install @forgedevstack/bear-map
|
|
21
|
+
npm install @forgedevstack/kanban
|
|
22
|
+
npm install @forgedevstack/calendar
|
|
51
23
|
```
|
|
52
24
|
|
|
53
|
-
|
|
25
|
+
`@forgedevstack/bear-icons` and `@forgedevstack/calendar` are on npm (`calendar` is 1.0.1 there; 1.0.2 with the event calendar is in this repo). Charts, AI, code, map, and kanban are not on npm yet.
|
|
54
26
|
|
|
55
|
-
|
|
27
|
+
Media playback stays [Torch](https://www.npmjs.com/package/@forgedevstack/torch). The rich text editor stays [Ink](https://www.npmjs.com/package/@forgedevstack/ink).
|
|
56
28
|
|
|
57
|
-
|
|
58
|
-
# npm
|
|
59
|
-
npm install @forgedevstack/bear --omit=optional
|
|
60
|
-
|
|
61
|
-
# pnpm
|
|
62
|
-
pnpm add @forgedevstack/bear --no-optional
|
|
29
|
+
## Bundle size
|
|
63
30
|
|
|
64
|
-
|
|
65
|
-
yarn add @forgedevstack/bear --ignore-optional
|
|
66
|
-
```
|
|
31
|
+
Sizes change with each publish. Open Bundlephobia for the package you are about to add:
|
|
67
32
|
|
|
68
|
-
|
|
33
|
+
- [Core](https://bundlephobia.com/package/@forgedevstack/bear)
|
|
34
|
+
- [Icons](https://bundlephobia.com/package/@forgedevstack/bear-icons)
|
|
35
|
+
- [Charts](https://bundlephobia.com/package/@forgedevstack/bear-x-charts)
|
|
36
|
+
- [AI](https://bundlephobia.com/package/@forgedevstack/bear-x-ai)
|
|
37
|
+
- [Code](https://bundlephobia.com/package/@forgedevstack/bear-x-code)
|
|
38
|
+
- [Map](https://bundlephobia.com/package/@forgedevstack/bear-map)
|
|
39
|
+
- [Kanban](https://bundlephobia.com/package/@forgedevstack/kanban)
|
|
40
|
+
- [Calendar](https://bundlephobia.com/package/@forgedevstack/calendar)
|
|
69
41
|
|
|
70
|
-
|
|
71
|
-
npm install @forgedevstack/bear-icons
|
|
72
|
-
```
|
|
42
|
+
The portal product pages and the libraries page have the same link as a button.
|
|
73
43
|
|
|
74
|
-
|
|
44
|
+
## Provider
|
|
75
45
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
### 1. Import Compiled CSS
|
|
79
|
-
|
|
80
|
-
Include Bear's compiled stylesheet once in your application entry file (`main.tsx`, `App.tsx`, or `index.css`):
|
|
46
|
+
Import the stylesheet once, then wrap the tree.
|
|
81
47
|
|
|
82
48
|
```tsx
|
|
83
49
|
import '@forgedevstack/bear/styles.css';
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
### 2. Wrap with BearProvider & Start Building
|
|
87
|
-
|
|
88
|
-
```tsx
|
|
89
|
-
import React, { useState } from 'react';
|
|
90
|
-
import {
|
|
91
|
-
BearProvider,
|
|
92
|
-
Button,
|
|
93
|
-
Card,
|
|
94
|
-
CardHeader,
|
|
95
|
-
CardBody,
|
|
96
|
-
ToggleGroup,
|
|
97
|
-
ToggleGroupItem,
|
|
98
|
-
Typography,
|
|
99
|
-
} from '@forgedevstack/bear';
|
|
50
|
+
import { BearProvider, Button, Card, CardBody, Typography } from '@forgedevstack/bear';
|
|
100
51
|
|
|
101
52
|
export function App() {
|
|
102
|
-
const [alignment, setAlignment] = useState('center');
|
|
103
|
-
|
|
104
53
|
return (
|
|
105
|
-
<BearProvider
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
<CardBody
|
|
111
|
-
<Typography variant="
|
|
112
|
-
|
|
113
|
-
</Typography>
|
|
114
|
-
|
|
115
|
-
<ToggleGroup
|
|
116
|
-
type="single"
|
|
117
|
-
value={alignment}
|
|
118
|
-
onValueChange={(val) => val && setAlignment(val)}
|
|
119
|
-
>
|
|
120
|
-
<ToggleGroupItem value="left">Left</ToggleGroupItem>
|
|
121
|
-
<ToggleGroupItem value="center">Center</ToggleGroupItem>
|
|
122
|
-
<ToggleGroupItem value="right">Right</ToggleGroupItem>
|
|
123
|
-
</ToggleGroup>
|
|
124
|
-
|
|
125
|
-
<Button variant="primary" fullWidth>
|
|
126
|
-
Confirm Selection ({alignment})
|
|
127
|
-
</Button>
|
|
54
|
+
<BearProvider
|
|
55
|
+
colorScheme="system"
|
|
56
|
+
theme={{ colors: { primary: '#ec4899' } }}
|
|
57
|
+
>
|
|
58
|
+
<Card>
|
|
59
|
+
<CardBody>
|
|
60
|
+
<Typography variant="h4">Bear</Typography>
|
|
61
|
+
<Button variant="primary">Save</Button>
|
|
128
62
|
</CardBody>
|
|
129
63
|
</Card>
|
|
130
64
|
</BearProvider>
|
|
@@ -132,79 +66,102 @@ export function App() {
|
|
|
132
66
|
}
|
|
133
67
|
```
|
|
134
68
|
|
|
135
|
-
|
|
69
|
+
`colorScheme` is `light`, `dark`, or `system`. Dark mode follows the `.dark` class from the provider.
|
|
70
|
+
|
|
71
|
+
## Charts
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
import { BarChart } from '@forgedevstack/bear-x-charts';
|
|
75
|
+
import '@forgedevstack/bear/styles.css';
|
|
136
76
|
|
|
137
|
-
|
|
77
|
+
<BarChart
|
|
78
|
+
data={[
|
|
79
|
+
{ label: 'Jan', value: 30 },
|
|
80
|
+
{ label: 'Feb', value: 45 },
|
|
81
|
+
]}
|
|
82
|
+
showLabels
|
|
83
|
+
/>
|
|
84
|
+
```
|
|
138
85
|
|
|
139
|
-
|
|
86
|
+
Chart views in this repo: `bar`, `line`, `area`, `pie`, `donut`, `radar`, `funnel`, `stacked`. Pie also has `full`, `half`, and `rose`. Sparkline, Gauge, RingProgress, Heatmap, and TimelineChart sit next to those. Motion is `grow`, `fade`, `scale`, or `none`, and `animated` is a boolean. These are zero-dependency SVG charts. They are not Chart.js plugins.
|
|
87
|
+
|
|
88
|
+
## Icons
|
|
140
89
|
|
|
141
90
|
```tsx
|
|
142
|
-
import {
|
|
143
|
-
|
|
144
|
-
<
|
|
145
|
-
colorScheme="system" // 'light' | 'dark' | 'system'
|
|
146
|
-
theme={{
|
|
147
|
-
colors: {
|
|
148
|
-
primary: '#db2777', // Lotso Magenta
|
|
149
|
-
accent: '#fed7aa', // Strawberry Cream
|
|
150
|
-
},
|
|
151
|
-
}}
|
|
152
|
-
>
|
|
153
|
-
<App />
|
|
154
|
-
</BearProvider>
|
|
91
|
+
import { SearchIcon } from '@forgedevstack/bear-icons';
|
|
92
|
+
|
|
93
|
+
<SearchIcon size={24} />
|
|
155
94
|
```
|
|
156
95
|
|
|
157
|
-
|
|
96
|
+
## Calendar
|
|
158
97
|
|
|
159
|
-
|
|
98
|
+
Peer of Bear. 1.0.2 adds the event month and the resource timeline. Popups and filters use Bear.
|
|
160
99
|
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
| **Feedback & Status** | `Alert`, `Toast`, `BearLoader`, `Spinner`, `Progress`, `Skeleton`, `EmptyState`, `Badge`, `Rating` |
|
|
100
|
+
```tsx
|
|
101
|
+
import { EventCalendar, EventTimeline } from '@forgedevstack/calendar';
|
|
102
|
+
import '@forgedevstack/calendar/styles.css';
|
|
103
|
+
import '@forgedevstack/bear/styles.css';
|
|
104
|
+
|
|
105
|
+
<EventCalendar events={events} mode="dark" />
|
|
106
|
+
<EventTimeline events={events} />
|
|
107
|
+
```
|
|
170
108
|
|
|
171
|
-
|
|
109
|
+
## Map and kanban
|
|
172
110
|
|
|
173
|
-
|
|
111
|
+
```tsx
|
|
112
|
+
import { Map } from '@forgedevstack/bear-map';
|
|
113
|
+
import { Kanban } from '@forgedevstack/kanban';
|
|
114
|
+
```
|
|
174
115
|
|
|
175
|
-
|
|
176
|
-
|---|---|---|---|---|
|
|
177
|
-
| **Bundle Size (tree-shaken)** | **~18 kB** | ~85 kB | Modular | ~45 kB |
|
|
178
|
-
| **Component Count** | **190+** | ~60 | ~45 | ~35 |
|
|
179
|
-
| **Included Icons** | **550+** | Addon | Addon (Lucide) | Addon |
|
|
180
|
-
| **AI Chat Primitives** | **Built-in** | No | Community | No |
|
|
181
|
-
| **Zero Runtime CSS-in-JS** | **Yes (AeroCraft)**| No (Emotion) | Yes (Tailwind) | No (Emotion) |
|
|
182
|
-
| **Density Parity** | **Compact / Normal / Comfortable** | Limited | Manual | Limited |
|
|
183
|
-
| **TypeScript Strict** | **100%** | 100% | 100% | 100% |
|
|
116
|
+
Hooks stay on core. Date pickers stay on core.
|
|
184
117
|
|
|
185
|
-
|
|
118
|
+
## CLI
|
|
186
119
|
|
|
187
|
-
|
|
120
|
+
Forge CLI is the installer that exists today.
|
|
188
121
|
|
|
189
122
|
```bash
|
|
190
|
-
|
|
191
|
-
|
|
123
|
+
npx create-forge my-app
|
|
124
|
+
```
|
|
192
125
|
|
|
193
|
-
|
|
194
|
-
cd portal && npm run test:e2e:smoke
|
|
126
|
+
When you select Bear, the CLI prints the Lotso mascot and asks which libraries to include: icons, charts, AI, code, map, kanban, and calendar. It then asks for the primary color. `--yes` selects Bear and those libraries.
|
|
195
127
|
|
|
196
|
-
|
|
197
|
-
|
|
128
|
+
Add one package to an existing app:
|
|
129
|
+
|
|
130
|
+
```bash
|
|
131
|
+
forge add bear
|
|
132
|
+
forge add bear-icons
|
|
133
|
+
forge add calendar
|
|
198
134
|
```
|
|
199
135
|
|
|
200
|
-
|
|
136
|
+
`forge add bear` asks the same library question. Icons and calendar install from npm. Charts, AI, code, map, and kanban are recorded in a comment in `src/main.tsx` until those packages are published, so the install does not fail on a missing package.
|
|
137
|
+
|
|
138
|
+
`npx @forgedevstack/bear-cli` is the name reserved for a Bear-only binary. That binary is not published, so those commands do not run yet.
|
|
139
|
+
|
|
140
|
+
## What 1.3.5 adds
|
|
141
|
+
|
|
142
|
+
- Optional packages: `@forgedevstack/bear-x-charts`, `@forgedevstack/bear-x-ai`, `@forgedevstack/bear-x-code`, `@forgedevstack/bear-map`, `@forgedevstack/kanban`.
|
|
143
|
+
- Overlay open and close motion on the panel: `none`, `fade`, `slide-down`, `scale`, `fold`, `elastic`, `reveal`, `expand`. The default is `fold`.
|
|
144
|
+
- Portal product pages for each library, with a Bundlephobia button.
|
|
145
|
+
- `@forgedevstack/calendar` 1.0.2: event calendar, resource filter, side editor, and timeline.
|
|
146
|
+
|
|
147
|
+
## Components
|
|
201
148
|
|
|
202
|
-
|
|
149
|
+
| Area | Examples |
|
|
150
|
+
|---|---|
|
|
151
|
+
| Actions | Button, ButtonGroup, ToggleGroup, FAB, SplitButton |
|
|
152
|
+
| Forms | Input, Select, Checkbox, Radio, Switch, Slider, DatePicker, TimePicker |
|
|
153
|
+
| Overlays | Modal, Drawer, AlertDialog, Popover, Tooltip, Menu, CommandPalette |
|
|
154
|
+
| Feedback | Alert, Toast, Spinner, Progress, Skeleton, Badge |
|
|
155
|
+
| Layout | Container, Flex, Grid, Paper, Divider, ScrollArea |
|
|
156
|
+
| Data | DataTable, Chart, Calendar, Timeline |
|
|
157
|
+
|
|
158
|
+
## Scripts
|
|
203
159
|
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
160
|
+
```bash
|
|
161
|
+
npm run build
|
|
162
|
+
cd portal && npm run test:e2e:smoke
|
|
163
|
+
```
|
|
207
164
|
|
|
208
|
-
##
|
|
165
|
+
## License
|
|
209
166
|
|
|
210
|
-
|
|
167
|
+
MIT. John Yaghobieh and the ForgeStack team.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),O=require("react"),r=require("../../constants/generals.const.cjs"),m=require("../../utils/cn.cjs"),c=require("../Box/Box.cjs"),T=require("../Button/Button.cjs"),S=require("../Flex/Flex.cjs"),s=require("@forgedevstack/bear-icons"),u=require("../Typography/Typography.cjs"),_=require("./Alert.const.cjs"),j=b=>{const{severity:n=r.INFO,variant:x=r.VARIANT_STANDARD,title:i,icon:t=r.BOOLEAN_TRUE,action:o,closable:B=r.BOOLEAN_FALSE,onClose:a,children:l,className:d,testId:E,...I}=b,[N,h]=O.useState(r.BOOLEAN_TRUE);if(!N)return null;const L=()=>{h(r.BOOLEAN_FALSE),a==null||a()},A=t===r.BOOLEAN_FALSE?null:t!==r.BOOLEAN_TRUE?t:n===r.INFO?e.jsx(s.InfoIcon,{}):n==="success"?e.jsx(s.BearIcons.CheckCircleIcon,{}):n==="warning"?e.jsx(s.BearIcons.WarningIcon,{}):e.jsx(s.BearIcons.ErrorIcon,{});return e.jsxs(S.Flex,{role:"alert","aria-live":"polite",className:m.cn("Bear-Alert bear-items-start bear-gap-3 bear-p-4 bear-rounded-lg",_.ALERT_SEVERITY_CLASS[n],_.ALERT_VARIANT_CLASSES[x](n),d),"data-testid":E,...I,children:[A&&e.jsx(c.Box,{as:"span",className:"Bear-Alert__icon bear-flex-shrink-0 bear-mt-0.5",children:A}),e.jsxs(c.Box,{className:"Bear-Alert__content bear-flex-1 bear-min-w-0",children:[i&&e.jsx(u.Typography,{variant:"subtitle2",weight:"semibold",color:"inherit",className:"Bear-Alert__title bear-mb-1",children:i}),l&&e.jsx(u.Typography,{variant:"body2",color:"inherit",className:"Bear-Alert__message",children:l})]}),o&&e.jsx(c.Box,{className:"Bear-Alert__action bear-flex-shrink-0",children:o}),B&&e.jsx(T.Button,{variant:r.VARIANT_GHOST,onClick:L,className:"Bear-Alert__close bear-flex-shrink-0 bear-p-1","aria-label":r.LABEL_CLOSE_ALERT,children:e.jsx(s.CloseIcon,{})})]})};exports.Alert=j;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../utils/cn.cjs");require("react");const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../utils/cn.cjs");require("react");const l={success:"Bear-Alert--success",info:"Bear-Alert--info",warning:"Bear-Alert--warning",error:"Bear-Alert--error"},a={filled:r=>e.cn("bear-alert-filled",r==="success"&&"bear-alert-filled-success",r==="info"&&"bear-alert-filled-info",r==="warning"&&"bear-alert-filled-warning",r==="error"&&"bear-alert-filled-error"),outlined:()=>"Bear-Alert--outlined",standard:()=>""};exports.ALERT_SEVERITY_CLASS=l;exports.ALERT_VARIANT_CLASSES=a;
|
|
@@ -1,8 +1,3 @@
|
|
|
1
1
|
import { AlertSeverity, AlertVariant } from './Alert.types';
|
|
2
|
-
export declare const
|
|
3
|
-
bg: string;
|
|
4
|
-
border: string;
|
|
5
|
-
text: string;
|
|
6
|
-
icon: string;
|
|
7
|
-
}>;
|
|
2
|
+
export declare const ALERT_SEVERITY_CLASS: Record<AlertSeverity, string>;
|
|
8
3
|
export declare const ALERT_VARIANT_CLASSES: Record<AlertVariant, (severity: AlertSeverity) => string>;
|
|
@@ -1,42 +1,22 @@
|
|
|
1
|
-
import { cn as
|
|
1
|
+
import { cn as e } from "../../utils/cn.js";
|
|
2
2
|
import "react";
|
|
3
|
-
const
|
|
4
|
-
success:
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
icon: "var(--bear-success-600)"
|
|
9
|
-
},
|
|
10
|
-
info: {
|
|
11
|
-
bg: "var(--bear-info-50)",
|
|
12
|
-
border: "var(--bear-info-500)",
|
|
13
|
-
text: "var(--bear-info-800)",
|
|
14
|
-
icon: "var(--bear-info-600)"
|
|
15
|
-
},
|
|
16
|
-
warning: {
|
|
17
|
-
bg: "var(--bear-warning-50)",
|
|
18
|
-
border: "var(--bear-warning-500)",
|
|
19
|
-
text: "var(--bear-warning-800)",
|
|
20
|
-
icon: "var(--bear-warning-600)"
|
|
21
|
-
},
|
|
22
|
-
error: {
|
|
23
|
-
bg: "var(--bear-danger-50)",
|
|
24
|
-
border: "var(--bear-danger-500)",
|
|
25
|
-
text: "var(--bear-danger-800)",
|
|
26
|
-
icon: "var(--bear-danger-600)"
|
|
27
|
-
}
|
|
3
|
+
const n = {
|
|
4
|
+
success: "Bear-Alert--success",
|
|
5
|
+
info: "Bear-Alert--info",
|
|
6
|
+
warning: "Bear-Alert--warning",
|
|
7
|
+
error: "Bear-Alert--error"
|
|
28
8
|
}, o = {
|
|
29
|
-
filled: (r) =>
|
|
30
|
-
"bear-
|
|
9
|
+
filled: (r) => e(
|
|
10
|
+
"bear-alert-filled",
|
|
31
11
|
r === "success" && "bear-alert-filled-success",
|
|
32
12
|
r === "info" && "bear-alert-filled-info",
|
|
33
13
|
r === "warning" && "bear-alert-filled-warning",
|
|
34
14
|
r === "error" && "bear-alert-filled-error"
|
|
35
15
|
),
|
|
36
|
-
outlined: () => "
|
|
16
|
+
outlined: () => "Bear-Alert--outlined",
|
|
37
17
|
standard: () => ""
|
|
38
18
|
};
|
|
39
19
|
export {
|
|
40
|
-
|
|
20
|
+
n as ALERT_SEVERITY_CLASS,
|
|
41
21
|
o as ALERT_VARIANT_CLASSES
|
|
42
22
|
};
|
|
@@ -1,72 +1,67 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { INFO as
|
|
4
|
-
import { cn as
|
|
5
|
-
import { Box as
|
|
6
|
-
import { Button as
|
|
7
|
-
import { Flex as
|
|
8
|
-
import { CloseIcon as
|
|
9
|
-
import { Typography as
|
|
10
|
-
import {
|
|
11
|
-
const
|
|
1
|
+
import { jsxs as _, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { useState as S } from "react";
|
|
3
|
+
import { INFO as f, VARIANT_STANDARD as T, BOOLEAN_TRUE as n, BOOLEAN_FALSE as i, LABEL_CLOSE_ALERT as x, VARIANT_GHOST as R } from "../../constants/generals.const.js";
|
|
4
|
+
import { cn as g } from "../../utils/cn.js";
|
|
5
|
+
import { Box as o } from "../Box/Box.js";
|
|
6
|
+
import { Button as v } from "../Button/Button.js";
|
|
7
|
+
import { Flex as C } from "../Flex/Flex.js";
|
|
8
|
+
import { CloseIcon as O, InfoIcon as k, BearIcons as l } from "@forgedevstack/bear-icons";
|
|
9
|
+
import { Typography as b } from "../Typography/Typography.js";
|
|
10
|
+
import { ALERT_VARIANT_CLASSES as V, ALERT_SEVERITY_CLASS as y } from "./Alert.const.js";
|
|
11
|
+
const J = (d) => {
|
|
12
12
|
const {
|
|
13
|
-
severity: e =
|
|
14
|
-
variant:
|
|
15
|
-
title:
|
|
16
|
-
icon:
|
|
17
|
-
action:
|
|
18
|
-
closable:
|
|
19
|
-
onClose:
|
|
20
|
-
children:
|
|
21
|
-
className:
|
|
22
|
-
testId:
|
|
23
|
-
...
|
|
24
|
-
} =
|
|
25
|
-
if (!
|
|
13
|
+
severity: e = f,
|
|
14
|
+
variant: p = T,
|
|
15
|
+
title: s,
|
|
16
|
+
icon: t = n,
|
|
17
|
+
action: c,
|
|
18
|
+
closable: h = i,
|
|
19
|
+
onClose: a,
|
|
20
|
+
children: m,
|
|
21
|
+
className: I,
|
|
22
|
+
testId: u,
|
|
23
|
+
...N
|
|
24
|
+
} = d, [B, E] = S(n);
|
|
25
|
+
if (!B)
|
|
26
26
|
return null;
|
|
27
|
-
const
|
|
28
|
-
|
|
29
|
-
},
|
|
30
|
-
return /* @__PURE__ */
|
|
31
|
-
|
|
27
|
+
const L = () => {
|
|
28
|
+
E(i), a == null || a();
|
|
29
|
+
}, A = t === i ? null : t !== n ? t : e === f ? /* @__PURE__ */ r(k, {}) : e === "success" ? /* @__PURE__ */ r(l.CheckCircleIcon, {}) : e === "warning" ? /* @__PURE__ */ r(l.WarningIcon, {}) : /* @__PURE__ */ r(l.ErrorIcon, {});
|
|
30
|
+
return /* @__PURE__ */ _(
|
|
31
|
+
C,
|
|
32
32
|
{
|
|
33
33
|
role: "alert",
|
|
34
34
|
"aria-live": "polite",
|
|
35
|
-
className:
|
|
35
|
+
className: g(
|
|
36
36
|
"Bear-Alert bear-items-start bear-gap-3 bear-p-4 bear-rounded-lg",
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
y[e],
|
|
38
|
+
V[p](e),
|
|
39
|
+
I
|
|
39
40
|
),
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
borderColor: t === g ? o.border : void 0,
|
|
43
|
-
color: l ? void 0 : o.text
|
|
44
|
-
},
|
|
45
|
-
"data-testid": h,
|
|
46
|
-
...L,
|
|
41
|
+
"data-testid": u,
|
|
42
|
+
...N,
|
|
47
43
|
children: [
|
|
48
|
-
|
|
49
|
-
|
|
44
|
+
A && /* @__PURE__ */ r(
|
|
45
|
+
o,
|
|
50
46
|
{
|
|
51
47
|
as: "span",
|
|
52
48
|
className: "Bear-Alert__icon bear-flex-shrink-0 bear-mt-0.5",
|
|
53
|
-
|
|
54
|
-
children: b
|
|
49
|
+
children: A
|
|
55
50
|
}
|
|
56
51
|
),
|
|
57
|
-
/* @__PURE__ */
|
|
58
|
-
|
|
59
|
-
|
|
52
|
+
/* @__PURE__ */ _(o, { className: "Bear-Alert__content bear-flex-1 bear-min-w-0", children: [
|
|
53
|
+
s && /* @__PURE__ */ r(b, { variant: "subtitle2", weight: "semibold", color: "inherit", className: "Bear-Alert__title bear-mb-1", children: s }),
|
|
54
|
+
m && /* @__PURE__ */ r(b, { variant: "body2", color: "inherit", className: "Bear-Alert__message", children: m })
|
|
60
55
|
] }),
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
56
|
+
c && /* @__PURE__ */ r(o, { className: "Bear-Alert__action bear-flex-shrink-0", children: c }),
|
|
57
|
+
h && /* @__PURE__ */ r(
|
|
58
|
+
v,
|
|
64
59
|
{
|
|
65
|
-
variant:
|
|
66
|
-
onClick:
|
|
60
|
+
variant: R,
|
|
61
|
+
onClick: L,
|
|
67
62
|
className: "Bear-Alert__close bear-flex-shrink-0 bear-p-1",
|
|
68
|
-
"aria-label":
|
|
69
|
-
children: /* @__PURE__ */ r(
|
|
63
|
+
"aria-label": x,
|
|
64
|
+
children: /* @__PURE__ */ r(O, {})
|
|
70
65
|
}
|
|
71
66
|
)
|
|
72
67
|
]
|
|
@@ -74,5 +69,5 @@ const Q = (N) => {
|
|
|
74
69
|
);
|
|
75
70
|
};
|
|
76
71
|
export {
|
|
77
|
-
|
|
72
|
+
J as Alert
|
|
78
73
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),ne=require("../../constants/numbers.const.cjs"),Oe=require("../../constants/generals.const.cjs"),A=require("../../utils/cn.cjs"),Be=require("../../hooks/useBearStyles.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");require("../../context/BearProvider.cjs");const l=require("../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.const.cjs"),je=require("../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.cjs");require("../FormControl/FormControl.context.cjs");const v=require("@forgedevstack/bear-icons"),L=require("../OverlayPortal/OverlayPortal.const.cjs"),oe=require("../Transition/Transition.cjs"),se=require("../Transition/Transition.const.cjs"),s=require("./Calendar.const.cjs"),u=require("./Calendar.utils.cjs"),De=require("./Calendar.helpers.cjs"),Te=M=>{const{viewDate:Y,value:S=null,onSelect:g,onViewChange:n,minDate:z,maxDate:p,disabledDates:q=[],highlightedDates:I=[],weekdayLabels:U=s.DEFAULT_WEEKDAYS,firstDayOfWeek:E=s.NUMBER.ZERO,showWeekNumbers:Re=!1,slots:r={},clearable:ie=!0,onClear:h,showTodayButton:ce=!0,onToday:x,bis:be,style:de,inline:W=!1,className:le,open:H}=M,{openEffect:N,closeEffect:_}=je.resolveOverlayEffects(M),i=Y.getFullYear(),Z=Be.useBearStyles(be,de),c=Y.getMonth(),ue=b.useMemo(()=>new Date,[]),f=b.useCallback(()=>{n==null||n(new Date(i-s.NUMBER.ONE,c,s.NUMBER.ONE))},[i,c,n]),G=b.useCallback(()=>{n==null||n(new Date(i,c-s.NUMBER.ONE,s.NUMBER.ONE))},[i,c,n]),V=b.useCallback(()=>{n==null||n(new Date(i,c+s.NUMBER.ONE,s.NUMBER.ONE))},[i,c,n]),O=b.useCallback(()=>{n==null||n(new Date(i+s.NUMBER.ONE,c,s.NUMBER.ONE))},[i,c,n]),B=G,j=V,he={onPrevYear:f,onPrevMonth:G,onNextMonth:V,onNextYear:O},xe=b.useCallback(t=>z&&t<z||p&&t>p?!0:q.some(a=>u.isSameDay(a,t)),[z,p,q]),Ne=b.useCallback(t=>I.some(a=>u.isSameDay(a,t)),[I]),_e=b.useMemo(()=>u.buildCalendarGrid(i,c,E),[i,c,E]),K=b.useMemo(()=>u.reorderWeekdays(U,E),[U,E]),X=s.MONTHS[c],D=S!=null,ye=W?"Bear-Calendar Bear-Calendar--inline bear-block bear-w-full bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-none bear-border bear-border-zinc-200 dark:bear-border-zinc-700 bear-p-4 bear-text-zinc-900 dark:bear-text-zinc-100":"Bear-Calendar Bear-Calendar--dropdown bear-mt-2 bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-xl bear-border bear-border-zinc-200 dark:bear-border-zinc-700 bear-p-4 bear-w-80 bear-text-zinc-900 dark:bear-text-zinc-100",J=W?void 0:{zIndex:s.CALENDAR_DROPDOWN_Z_INDEX},me=()=>{if(r.header)return r.header({month:X,year:i,onPrev:B,onNext:j,nav:he});const t=r.navPrevYear,a=r.navPrev,o=r.navNext,d=r.navNextYear,C=r.headerLabel||De.DefaultHeaderLabel;return e.jsxs("div",{className:"Bear-Calendar__header bear-flex bear-items-center bear-justify-between bear-gap-1 bear-mb-4",children:[e.jsxs("div",{className:"Bear-Calendar__nav-left bear-flex bear-items-center bear-gap-0.5",children:[t?t({onClick:f}):e.jsx("button",{type:"button",onClick:f,className:"Bear-Calendar__nav-btn bear-p-1.5 bear-rounded bear-text-zinc-500 dark:bear-text-zinc-400 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800 bear-transition-colors","aria-label":"Previous year",children:e.jsx(v.ChevronsLeftIcon,{size:16})}),a?a({onClick:B}):e.jsx("button",{type:"button",onClick:B,className:"Bear-Calendar__nav-btn bear-p-1.5 bear-rounded bear-text-zinc-500 dark:bear-text-zinc-400 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800 bear-transition-colors","aria-label":"Previous month",children:e.jsx(v.ChevronLeftIcon,{size:16})})]}),C({month:X,year:i}),e.jsxs("div",{className:"Bear-Calendar__nav-right bear-flex bear-items-center bear-gap-0.5",children:[o?o({onClick:j}):e.jsx("button",{type:"button",onClick:j,className:"Bear-Calendar__nav-btn bear-p-1.5 bear-rounded bear-text-zinc-500 dark:bear-text-zinc-400 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800 bear-transition-colors","aria-label":"Next month",children:e.jsx(v.ChevronRightIcon,{size:16})}),d?d({onClick:O}):e.jsx("button",{type:"button",onClick:O,className:"Bear-Calendar__nav-btn bear-p-1.5 bear-rounded bear-text-zinc-500 dark:bear-text-zinc-400 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800 bear-transition-colors","aria-label":"Next year",children:e.jsx(v.ChevronsRightIcon,{size:16})})]})]})},Ee=()=>{if(r.weekdays)return r.weekdays({days:K});const t=r.weekday;return e.jsx("div",{className:"Bear-Calendar__weekdays bear-grid bear-grid-cols-7 bear-gap-1 bear-mb-2",children:K.map(a=>t?e.jsx("div",{children:t({label:a})},a):e.jsx("div",{className:A.cn("Bear-Calendar__weekday bear-text-center bear-text-xs bear-font-medium bear-uppercase bear-text-zinc-500 dark:bear-text-zinc-400",s.WEEKEND_LABELS.includes(a)&&"bear-text-red-500"),children:a},a))})},Ce=(t,a)=>{const{date:o,isCurrentMonth:d}=t,C=o.getDate(),ze=o.getDay(),pe=u.isWeekendDay(ze),m=u.isSameDay(S,o),P=u.isSameDay(ue,o),k=xe(o),ae=Ne(o),te=()=>{k||g==null||g(o)},fe={date:o,day:C,isCurrentMonth:d,isSelected:m,isToday:P,isDisabled:k,isHighlighted:ae,onClick:te};return r.day?e.jsx("span",{children:r.day(fe)},a):e.jsx("button",{type:"button",onClick:te,disabled:k,className:A.cn("Bear-Calendar__day bear-w-8 bear-h-8 bear-rounded-full bear-text-sm bear-font-medium bear-transition-colors bear-flex bear-items-center bear-justify-center",m&&"Bear-Calendar__day--selected bear-bg-primary-500 bear-text-white hover:bear-bg-primary-600",!m&&P&&"Bear-Calendar__day--today bear-ring-2 bear-ring-primary-500/50 bear-bg-transparent",!m&&!P&&(d?pe?"Bear-Calendar__day--weekend bear-text-red-500 dark:bear-text-red-400 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800":"bear-text-zinc-700 dark:bear-text-zinc-300 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800":"Bear-Calendar__day--other bear-text-zinc-500 dark:bear-text-zinc-600 hover:bear-bg-zinc-50 dark:hover:bear-bg-zinc-800/50"),ae&&!m&&"Bear-Calendar__day--highlighted bear-bg-primary-500/15",k&&"Bear-Calendar__day--disabled bear-opacity-40 bear-cursor-not-allowed"),children:C},a)},ke=()=>{const t=_e.map((a,o)=>Ce(a,o));return r.daysGrid?r.daysGrid({children:t,className:"Bear-Calendar__grid bear-grid bear-grid-cols-7 bear-gap-1"}):e.jsx("div",{className:"Bear-Calendar__grid bear-grid bear-grid-cols-7 bear-gap-1",children:t})},ve=()=>{const t=ie&&D&&h,a=ce&&x;if(!t&&!a)return null;if(r.footer){const o=r.clearButton,d=r.todayButton;return r.footer({children:e.jsxs("div",{className:"Bear-Calendar__footer bear-flex bear-justify-between bear-gap-2 bear-mt-4 bear-pt-3 bear-border-t bear-border-zinc-200 dark:bear-border-zinc-700",children:[t&&o?o({onClick:h,hasSelection:D}):t?e.jsx("button",{type:"button",onClick:h,className:"Bear-Calendar__clear-btn bear-text-sm bear-text-zinc-500 dark:bear-text-zinc-400 hover:bear-text-zinc-700 dark:hover:bear-text-zinc-200 bear-transition-colors",children:"Clear"}):e.jsx("span",{}),a&&d?d({onClick:x}):a?e.jsx("button",{type:"button",onClick:x,className:"Bear-Calendar__today-btn bear-text-sm bear-text-primary-600 dark:bear-text-primary-400 hover:bear-text-primary-700 dark:hover:bear-text-primary-300 bear-font-medium",children:"Today"}):null]})})}return r.clearButton&&r.todayButton?e.jsxs("div",{className:"Bear-Calendar__footer bear-flex bear-justify-between bear-gap-2 bear-mt-4 bear-pt-3 bear-border-t bear-border-zinc-200 dark:bear-border-zinc-700",children:[t&&r.clearButton({onClick:h,hasSelection:D}),a&&r.todayButton({onClick:x})]}):e.jsxs("div",{className:"Bear-Calendar__footer bear-flex bear-justify-between bear-gap-2 bear-mt-4 bear-pt-3 bear-border-t bear-border-zinc-200 dark:bear-border-zinc-700",children:[t?e.jsx("button",{type:"button",onClick:h,className:"Bear-Calendar__clear-btn bear-text-sm bear-text-zinc-500 dark:bear-text-zinc-400 hover:bear-text-zinc-700 dark:hover:bear-text-zinc-200 bear-transition-colors",children:"Clear"}):e.jsx("span",{}),a?e.jsx("button",{type:"button",onClick:x,className:"Bear-Calendar__today-btn bear-text-sm bear-text-primary-400 hover:bear-text-primary-300 bear-font-medium bear-transition-colors",children:"Today"}):null]})},T=e.jsxs(e.Fragment,{children:[me(),Ee(),ke(),ve()]}),R=A.cn(ye,le),Q=Object.keys(Z).length?Z:void 0,$=J?{...Q,...J}:Q,w=r.root?r.root({children:T,className:R}):e.jsx("div",{className:R,style:$,children:T}),ge=H!==void 0,y=H??Oe.BOOLEAN_TRUE;if(!(ge&&(N!==l.OVERLAY_OPEN_EFFECT_NONE||_!==l.OVERLAY_OPEN_EFFECT_NONE)))return w;const ee=y?N:_,F=ee===l.OVERLAY_OPEN_EFFECT_NONE?N===l.OVERLAY_OPEN_EFFECT_NONE?_===l.OVERLAY_OPEN_EFFECT_NONE?void 0:L.OVERLAY_EFFECT_TRANSITION[_]:L.OVERLAY_EFFECT_TRANSITION[N]:L.OVERLAY_EFFECT_TRANSITION[ee],re=y&&N===l.OVERLAY_OPEN_EFFECT_NONE||!y&&_===l.OVERLAY_OPEN_EFFECT_NONE;return F?r.root?e.jsx(oe.Transition,{show:y,name:F,duration:re?ne.ZERO:se.DEFAULT_DURATION,children:w}):e.jsx(oe.Transition,{show:y,name:F,duration:re?ne.ZERO:se.DEFAULT_DURATION,className:R,style:$,children:T}):w};exports.Calendar=Te;
|