blunt-ui 0.2.0 → 0.2.2
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 +25 -1
- package/dist/components/CollapsibleCard/CollapsibleCard.d.ts +5 -0
- package/dist/components/CollapsibleCard/CollapsibleCard.stories.d.ts +15 -0
- package/dist/components/CollapsibleCard/CollapsibleCard.test.d.ts +0 -0
- package/dist/components/CollapsibleCard/CollapsibleCard.types.d.ts +11 -0
- package/dist/components/CollapsibleCard/index.d.ts +2 -0
- package/dist/index.cjs +148 -58
- package/dist/index.d.ts +2 -0
- package/dist/index.js +570 -413
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# blunt-ui
|
|
2
2
|
|
|
3
|
-
React + TypeScript + styled-components. Thick borders, offset shadows, no fluff.
|
|
3
|
+
React + TypeScript + styled-components. Thick borders, offset shadows, no fluff. 9 components, 2 hooks.
|
|
4
4
|
|
|
5
5
|
**Live demo:** https://blunt-ui.vercel.app/
|
|
6
6
|
|
|
@@ -66,6 +66,30 @@ Sizes: `sm`, `md`, `lg`, `fullscreen`.
|
|
|
66
66
|
</Modal>
|
|
67
67
|
```
|
|
68
68
|
|
|
69
|
+
## CollapsibleCard
|
|
70
|
+
|
|
71
|
+
A card with a clickable header that shows/hides its content. Supports controlled and uncontrolled modes, an optional subtitle, a slot for header actions, and an `accentColor` prop to tint the border and chevron.
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
<CollapsibleCard title="blunt-ui" subtitle="Subtitle" defaultOpen>
|
|
75
|
+
React component library in neo-brutalism style.
|
|
76
|
+
</CollapsibleCard>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
Pass `open` + `onToggle` for controlled mode:
|
|
80
|
+
|
|
81
|
+
```tsx
|
|
82
|
+
<CollapsibleCard
|
|
83
|
+
title="Project"
|
|
84
|
+
open={isOpen}
|
|
85
|
+
onToggle={setIsOpen}
|
|
86
|
+
accentColor="#f97316"
|
|
87
|
+
headerActions={<Badge variant="primary">npm</Badge>}
|
|
88
|
+
>
|
|
89
|
+
{children}
|
|
90
|
+
</CollapsibleCard>
|
|
91
|
+
```
|
|
92
|
+
|
|
69
93
|
## Toast
|
|
70
94
|
|
|
71
95
|
Pops up in a portal, auto-dismisses after 4 seconds. Set `duration={0}` to keep it until the user closes it.
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { CollapsibleCardProps } from './CollapsibleCard.types';
|
|
2
|
+
export declare function CollapsibleCard({ title, children, defaultOpen, open: controlledOpen, onToggle, subtitle, headerActions, accentColor, }: CollapsibleCardProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export declare namespace CollapsibleCard {
|
|
4
|
+
var displayName: string;
|
|
5
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { ComponentProps } from 'react';
|
|
3
|
+
import { CollapsibleCard } from './CollapsibleCard';
|
|
4
|
+
type StoryArgs = ComponentProps<typeof CollapsibleCard> & {
|
|
5
|
+
text: string;
|
|
6
|
+
};
|
|
7
|
+
declare const meta: Meta<StoryArgs>;
|
|
8
|
+
export default meta;
|
|
9
|
+
type Story = StoryObj<StoryArgs>;
|
|
10
|
+
export declare const Default: Story;
|
|
11
|
+
export declare const WithSubtitle: Story;
|
|
12
|
+
export declare const WithHeaderActions: Story;
|
|
13
|
+
export declare const Controlled: Story;
|
|
14
|
+
export declare const ClosedByDefault: Story;
|
|
15
|
+
export declare const AccentColor: Story;
|
|
File without changes
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface CollapsibleCardProps {
|
|
3
|
+
title: string;
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
defaultOpen?: boolean;
|
|
6
|
+
open?: boolean;
|
|
7
|
+
onToggle?: (open: boolean) => void;
|
|
8
|
+
subtitle?: string;
|
|
9
|
+
headerActions?: ReactNode;
|
|
10
|
+
accentColor?: string;
|
|
11
|
+
}
|
package/dist/index.cjs
CHANGED
|
@@ -1,15 +1,19 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("styled-components"),a=require("react"),A=require("react-dom"),I=(o,s,n)=>r.css`
|
|
2
2
|
background: ${s};
|
|
3
3
|
color: ${n};
|
|
4
4
|
border: ${o.brutalism.borderWidth} solid ${o.colors.neutral[900]};
|
|
5
5
|
box-shadow: 2px 2px 0 ${o.colors.neutral[900]};
|
|
6
|
-
`,
|
|
6
|
+
`,no=r.span`
|
|
7
7
|
display: inline-flex;
|
|
8
8
|
align-items: center;
|
|
9
9
|
font-weight: 700;
|
|
10
10
|
letter-spacing: 0.04em;
|
|
11
11
|
cursor: default;
|
|
12
12
|
border-radius: ${({theme:o})=>o.radius.md};
|
|
13
|
+
white-space: nowrap;
|
|
14
|
+
overflow: hidden;
|
|
15
|
+
text-overflow: ellipsis;
|
|
16
|
+
max-width: 20ch;
|
|
13
17
|
|
|
14
18
|
${({$size:o,theme:s})=>({sm:r.css`
|
|
15
19
|
padding: 2px 8px;
|
|
@@ -38,7 +42,7 @@
|
|
|
38
42
|
background: ${s.colors.info[50]};
|
|
39
43
|
color: ${s.colors.info[500]};
|
|
40
44
|
`}[o]}
|
|
41
|
-
`;function
|
|
45
|
+
`;function D({variant:o="primary",size:s="md",children:n,...e}){return t.jsx(no,{$variant:o,$size:s,...e,children:n})}D.displayName="Badge";const E=(o,s,n)=>r.css`
|
|
42
46
|
background-color: ${s};
|
|
43
47
|
color: ${n};
|
|
44
48
|
border: ${o.brutalism.borderWidth} solid ${o.colors.neutral[900]};
|
|
@@ -51,7 +55,7 @@
|
|
|
51
55
|
transform: translate(2px, 2px);
|
|
52
56
|
box-shadow: 2px 2px 0 ${o.colors.neutral[900]};
|
|
53
57
|
}
|
|
54
|
-
`,
|
|
58
|
+
`,to=r.button`
|
|
55
59
|
display: inline-flex;
|
|
56
60
|
align-items: center;
|
|
57
61
|
justify-content: center;
|
|
@@ -70,7 +74,7 @@
|
|
|
70
74
|
cursor: not-allowed;
|
|
71
75
|
}
|
|
72
76
|
|
|
73
|
-
${({$variant:o,theme:s})=>s.brutalism?{primary:
|
|
77
|
+
${({$variant:o,theme:s})=>s.brutalism?{primary:E(s,s.colors.primary[500],s.colors.primary.contrast),secondary:E(s,s.colors.neutral[100],s.colors.neutral[900]),outline:E(s,s.colors.neutral[0],s.colors.neutral[900])}[o]:{primary:r.css`
|
|
74
78
|
background-color: ${s.colors.primary[500]};
|
|
75
79
|
color: ${s.colors.neutral[0]};
|
|
76
80
|
border: none;
|
|
@@ -103,18 +107,18 @@
|
|
|
103
107
|
padding: ${s.spacing[3]} ${s.spacing[6]};
|
|
104
108
|
font-size: ${s.fontSizes.lg};
|
|
105
109
|
`})[o]}
|
|
106
|
-
`;function
|
|
110
|
+
`;function Y({ref:o,as:s,href:n,variant:e="primary",size:c="md",isLoading:l,disabled:i,children:d,...p}){const u=s??(n?"a":"button");return t.jsx(to,{ref:o,as:u,href:n,$variant:e,$size:c,disabled:l||i,...p,children:l?"Loading...":d})}Y.displayName="Button";const eo=r.div`
|
|
107
111
|
display: flex;
|
|
108
112
|
flex-direction: column;
|
|
109
113
|
gap: ${({theme:o})=>o.spacing[1]};
|
|
110
114
|
width: ${({$fullWidth:o})=>o?"100%":"auto"};
|
|
111
|
-
`,
|
|
115
|
+
`,ao=r.label`
|
|
112
116
|
font-size: ${({theme:o})=>o.fontSizes.sm};
|
|
113
117
|
font-weight: ${({theme:o})=>o.brutalism?"700":"500"};
|
|
114
|
-
`,
|
|
118
|
+
`,io=r.span`
|
|
115
119
|
font-size: ${({theme:o})=>o.fontSizes.xs};
|
|
116
120
|
color: ${({$error:o,theme:s})=>o?s.colors.error[500]:s.colors.neutral[500]};
|
|
117
|
-
`,
|
|
121
|
+
`,lo=r.div`
|
|
118
122
|
display: flex;
|
|
119
123
|
align-items: center;
|
|
120
124
|
border-radius: ${({theme:o})=>o.radius.md};
|
|
@@ -159,7 +163,7 @@
|
|
|
159
163
|
&:focus-within {
|
|
160
164
|
box-shadow: ${({theme:o})=>o.shadows.focusRing};
|
|
161
165
|
}
|
|
162
|
-
`,
|
|
166
|
+
`,co=r.input`
|
|
163
167
|
flex: 1;
|
|
164
168
|
border: none;
|
|
165
169
|
outline: none;
|
|
@@ -170,11 +174,11 @@
|
|
|
170
174
|
cursor: not-allowed;
|
|
171
175
|
opacity: 0.6;
|
|
172
176
|
}
|
|
173
|
-
`,
|
|
177
|
+
`,N=r.div`
|
|
174
178
|
display: inline-flex;
|
|
175
179
|
align-items: center;
|
|
176
180
|
margin: 0 ${({theme:o})=>o.spacing[1]};
|
|
177
|
-
`,
|
|
181
|
+
`,uo=r.button`
|
|
178
182
|
display: inline-flex;
|
|
179
183
|
align-items: center;
|
|
180
184
|
margin: 0 ${({theme:o})=>o.spacing[1]};
|
|
@@ -187,19 +191,19 @@
|
|
|
187
191
|
&:hover {
|
|
188
192
|
opacity: 0.8;
|
|
189
193
|
}
|
|
190
|
-
`;function
|
|
194
|
+
`;function H({ref:o,type:s="text",size:n="md",variant:e="default",label:c,helperText:l,error:i,leftElement:d,rightElement:p,clearable:u,onClear:x,fullWidth:v,id:b,value:$,defaultValue:m,onChange:C,...h}){const k=a.useId(),j=b??k,S=`${j}-hint`,[z,f]=a.useState(m??""),g=$!==void 0,y=g?$:z,w=typeof i=="string"?i:void 0,T=!!(l||i),O=R=>{g||f(R.target.value),C?.(R)},ro=()=>{g||f(""),x?.()};return t.jsxs(eo,{$fullWidth:v,children:[c&&t.jsx(ao,{htmlFor:j,children:c}),t.jsxs(lo,{$size:n,$variant:e,$error:!!i,children:[d&&t.jsx(N,{children:d}),t.jsx(co,{id:j,ref:o,type:s,value:y,onChange:O,...h,"aria-invalid":!!i,"aria-describedby":T?S:void 0}),u&&y&&t.jsx(uo,{type:"button",onClick:ro,"aria-label":"Clear input",children:"✕"}),p&&t.jsx(N,{children:p})]}),T&&t.jsx(io,{id:S,$error:!!i,children:w??l})]})}H.displayName="Input";const fo=r.keyframes`
|
|
191
195
|
from { opacity: 0; }
|
|
192
196
|
to { opacity: 1; }
|
|
193
|
-
`,
|
|
197
|
+
`,po=r.keyframes`
|
|
194
198
|
from { opacity: 1; }
|
|
195
199
|
to { opacity: 0; }
|
|
196
|
-
`,
|
|
200
|
+
`,go=r.keyframes`
|
|
197
201
|
from { opacity: 0; transform: scale(0.95) translateY(-8px); }
|
|
198
202
|
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
199
|
-
`,
|
|
203
|
+
`,bo=r.keyframes`
|
|
200
204
|
from { opacity: 1; transform: scale(1) translateY(0); }
|
|
201
205
|
to { opacity: 0; transform: scale(0.95) translateY(-8px); }
|
|
202
|
-
|
|
206
|
+
`,$o=r.div`
|
|
203
207
|
position: fixed;
|
|
204
208
|
inset: 0;
|
|
205
209
|
background-color: rgba(0, 0, 0, 0.5);
|
|
@@ -207,9 +211,9 @@
|
|
|
207
211
|
align-items: center;
|
|
208
212
|
justify-content: center;
|
|
209
213
|
z-index: ${({theme:o})=>o.zIndex.modal};
|
|
210
|
-
animation: ${({$closing:o})=>o?
|
|
214
|
+
animation: ${({$closing:o})=>o?po:fo} 0.15s ease
|
|
211
215
|
forwards;
|
|
212
|
-
`,
|
|
216
|
+
`,xo=r.div`
|
|
213
217
|
position: relative;
|
|
214
218
|
background: ${({theme:o})=>o.colors.neutral[0]};
|
|
215
219
|
border-radius: ${({theme:o})=>o.radius.md};
|
|
@@ -218,7 +222,7 @@
|
|
|
218
222
|
display: flex;
|
|
219
223
|
flex-direction: column;
|
|
220
224
|
max-height: 90vh;
|
|
221
|
-
animation: ${({$closing:o})=>o?
|
|
225
|
+
animation: ${({$closing:o})=>o?bo:go} 0.15s ease
|
|
222
226
|
forwards;
|
|
223
227
|
|
|
224
228
|
${({$size:o})=>o==="sm"&&r.css`
|
|
@@ -236,19 +240,19 @@
|
|
|
236
240
|
max-height: 100vh;
|
|
237
241
|
border-radius: 0;
|
|
238
242
|
`}
|
|
239
|
-
`,
|
|
243
|
+
`,yo=r.div`
|
|
240
244
|
display: flex;
|
|
241
245
|
align-items: center;
|
|
242
246
|
gap: ${({theme:o})=>o.spacing[2]};
|
|
243
247
|
padding: ${({theme:o})=>o.spacing[4]};
|
|
244
248
|
border-bottom: 1px solid ${({theme:o})=>o.colors.neutral[200]};
|
|
245
249
|
flex-shrink: 0;
|
|
246
|
-
|
|
250
|
+
`,mo=r.h2`
|
|
247
251
|
flex: 1;
|
|
248
252
|
font-size: ${({theme:o})=>o.fontSizes.lg};
|
|
249
253
|
font-weight: 600;
|
|
250
254
|
margin: 0;
|
|
251
|
-
`,
|
|
255
|
+
`,wo=r.button`
|
|
252
256
|
display: inline-flex;
|
|
253
257
|
align-items: center;
|
|
254
258
|
justify-content: center;
|
|
@@ -273,11 +277,11 @@
|
|
|
273
277
|
outline: 2px solid ${({theme:o})=>o.colors.primary[500]};
|
|
274
278
|
outline-offset: 2px;
|
|
275
279
|
}
|
|
276
|
-
`,
|
|
280
|
+
`,vo=r.div`
|
|
277
281
|
padding: ${({theme:o})=>o.spacing[4]};
|
|
278
282
|
overflow-y: auto;
|
|
279
283
|
flex: 1;
|
|
280
|
-
`,
|
|
284
|
+
`,ko=r.div`
|
|
281
285
|
display: flex;
|
|
282
286
|
align-items: center;
|
|
283
287
|
justify-content: flex-end;
|
|
@@ -285,16 +289,16 @@
|
|
|
285
289
|
padding: ${({theme:o})=>o.spacing[4]};
|
|
286
290
|
border-top: 1px solid ${({theme:o})=>o.colors.neutral[200]};
|
|
287
291
|
flex-shrink: 0;
|
|
288
|
-
`,
|
|
292
|
+
`,ho=["button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","a[href]",'[tabindex]:not([tabindex="-1"])'].join(", ");function V(o){return Array.from(o.querySelectorAll(ho))}function q({open:o,onClose:s,title:n,children:e,footer:c,size:l="md",closeOnBackdrop:i=!0,closeOnEscape:d=!0,ariaLabelledBy:p,ariaDescribedBy:u}){const x=a.useRef(null),v=a.useId(),b=p??(n?v:void 0),[$,m]=a.useState(o),[C,h]=a.useState(!1);return a.useEffect(()=>{if(o)m(!0),h(!1);else if($){h(!0);const k=setTimeout(()=>{m(!1),h(!1)},150);return()=>clearTimeout(k)}},[o,$]),a.useEffect(()=>{if(!o)return;const k=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=k}},[o]),a.useEffect(()=>{if(!o||!x.current)return;const k=x.current,j=document.activeElement;(V(k)[0]??k).focus();const z=f=>{if(f.key==="Escape"&&d){s();return}if(f.key!=="Tab")return;const g=V(k);if(g.length===0){f.preventDefault();return}const y=g[0],w=g[g.length-1];f.shiftKey?document.activeElement===y&&(f.preventDefault(),w.focus()):document.activeElement===w&&(f.preventDefault(),y.focus())};return document.addEventListener("keydown",z),()=>{document.removeEventListener("keydown",z),j?.focus()}},[o,d,s,$]),$?A.createPortal(t.jsx($o,{$closing:C,onClick:i?s:void 0,children:t.jsxs(xo,{ref:x,role:"dialog","aria-modal":"true","aria-labelledby":b,"aria-describedby":u,$size:l,$closing:C,tabIndex:-1,onClick:k=>k.stopPropagation(),children:[t.jsxs(yo,{children:[n&&t.jsx(mo,{id:v,children:n}),t.jsx(wo,{onClick:s,"aria-label":"Close modal",children:"×"})]}),t.jsx(vo,{children:e}),c&&t.jsx(ko,{children:c})]})}),document.body):null}q.displayName="Modal";const _=(...o)=>o.filter((s,n,e)=>!!s&&s.trim()!==""&&e.indexOf(s)===n).join(" ").trim();const Co=o=>o.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase();const jo=o=>o.replace(/^([A-Z])|[\s-_]+(\w)/g,(s,n,e)=>e?e.toUpperCase():n.toLowerCase());const M=o=>{const s=jo(o);return s.charAt(0).toUpperCase()+s.slice(1)};var F={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"};const So=o=>{for(const s in o)if(s.startsWith("aria-")||s==="role"||s==="title")return!0;return!1},zo=a.createContext({}),Io=()=>a.useContext(zo),To=a.forwardRef(({color:o,size:s,strokeWidth:n,absoluteStrokeWidth:e,className:c="",children:l,iconNode:i,...d},p)=>{const{size:u=24,strokeWidth:x=2,absoluteStrokeWidth:v=!1,color:b="currentColor",className:$=""}=Io()??{},m=e??v?Number(n??x)*24/Number(s??u):n??x;return a.createElement("svg",{ref:p,...F,width:s??u??F.width,height:s??u??F.height,stroke:o??b,strokeWidth:m,className:_("lucide",$,c),...!l&&!So(d)&&{"aria-hidden":"true"},...d},[...i.map(([C,h])=>a.createElement(C,h)),...Array.isArray(l)?l:[l]])});const K=(o,s)=>{const n=a.forwardRef(({className:e,...c},l)=>a.createElement(To,{ref:l,iconNode:s,className:_(`lucide-${Co(M(o))}`,`lucide-${o}`,e),...c}));return n.displayName=M(o),n};const Wo=[["path",{d:"m6 9 6 6 6-6",key:"qrunsl"}]],U=K("chevron-down",Wo);const Bo=[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]],Z=K("x",Bo),Oo=r.keyframes`
|
|
289
293
|
from { opacity: 0; transform: translateY(12px); }
|
|
290
294
|
to { opacity: 1; transform: translateY(0); }
|
|
291
|
-
`,
|
|
295
|
+
`,Eo=r.keyframes`
|
|
292
296
|
from { opacity: 0; transform: translateY(-12px); }
|
|
293
297
|
to { opacity: 1; transform: translateY(0); }
|
|
294
|
-
`,
|
|
298
|
+
`,Fo=r.keyframes`
|
|
295
299
|
from { opacity: 1; }
|
|
296
300
|
to { opacity: 0; }
|
|
297
|
-
`,
|
|
301
|
+
`,Lo=r.div`
|
|
298
302
|
position: fixed;
|
|
299
303
|
z-index: ${({theme:o})=>o.zIndex.toast};
|
|
300
304
|
display: flex;
|
|
@@ -304,14 +308,12 @@
|
|
|
304
308
|
max-width: 400px;
|
|
305
309
|
padding: ${({theme:o})=>`${o.spacing[3]} ${o.spacing[4]}`};
|
|
306
310
|
border-radius: ${({theme:o})=>o.radius.md};
|
|
307
|
-
border-left: 4px solid transparent;
|
|
308
|
-
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
|
309
311
|
animation: ${({$closing:o,$position:s})=>o?r.css`
|
|
310
|
-
${
|
|
312
|
+
${Fo} 0.2s ease forwards
|
|
311
313
|
`:s.startsWith("top")?r.css`
|
|
312
|
-
${
|
|
314
|
+
${Eo} 0.2s ease forwards
|
|
313
315
|
`:r.css`
|
|
314
|
-
${
|
|
316
|
+
${Oo} 0.2s ease forwards
|
|
315
317
|
`};
|
|
316
318
|
|
|
317
319
|
${({$position:o,theme:s})=>({"bottom-right":r.css`
|
|
@@ -327,27 +329,37 @@
|
|
|
327
329
|
top: ${s.spacing[6]};
|
|
328
330
|
left: ${s.spacing[6]};
|
|
329
331
|
`})[o]}
|
|
330
|
-
`,
|
|
331
|
-
${
|
|
332
|
+
`,W=(o,s,n)=>r.css`
|
|
333
|
+
background: ${s};
|
|
334
|
+
border: ${o.brutalism.borderWidth} solid ${n};
|
|
335
|
+
box-shadow: ${o.brutalism.shadowOffset} ${o.brutalism.shadowOffset}
|
|
336
|
+
0 ${n};
|
|
337
|
+
`,Ro=r(Lo)`
|
|
338
|
+
${({$variant:o,theme:s})=>s.brutalism?{success:W(s,s.colors.success[50],s.colors.success[500]),error:W(s,s.colors.error[50],s.colors.error[500]),warning:W(s,s.colors.warning[50],s.colors.warning[500]),info:W(s,s.colors.info[50],s.colors.info[500])}[o]:{success:r.css`
|
|
332
339
|
background: ${s.colors.success[50]};
|
|
333
|
-
border-left
|
|
340
|
+
border-left: 4px solid ${s.colors.success[500]};
|
|
341
|
+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
|
334
342
|
`,error:r.css`
|
|
335
343
|
background: ${s.colors.error[50]};
|
|
336
|
-
border-left
|
|
344
|
+
border-left: 4px solid ${s.colors.error[500]};
|
|
345
|
+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
|
337
346
|
`,warning:r.css`
|
|
338
347
|
background: ${s.colors.warning[50]};
|
|
339
|
-
border-left
|
|
348
|
+
border-left: 4px solid ${s.colors.warning[500]};
|
|
349
|
+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
|
340
350
|
`,info:r.css`
|
|
341
351
|
background: ${s.colors.info[50]};
|
|
342
|
-
border-left
|
|
343
|
-
|
|
344
|
-
|
|
352
|
+
border-left: 4px solid ${s.colors.info[500]};
|
|
353
|
+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
|
354
|
+
`}[o]}
|
|
355
|
+
`,No=r.p`
|
|
345
356
|
flex: 1;
|
|
346
357
|
margin: 0;
|
|
347
358
|
font-size: ${({theme:o})=>o.fontSizes.sm};
|
|
359
|
+
font-weight: ${({theme:o})=>o.brutalism?600:400};
|
|
348
360
|
line-height: 1.5;
|
|
349
361
|
color: ${({theme:o})=>o.colors.neutral[900]};
|
|
350
|
-
`,
|
|
362
|
+
`,Vo=r.button`
|
|
351
363
|
flex-shrink: 0;
|
|
352
364
|
display: inline-flex;
|
|
353
365
|
align-items: center;
|
|
@@ -358,8 +370,6 @@
|
|
|
358
370
|
background: none;
|
|
359
371
|
cursor: pointer;
|
|
360
372
|
border-radius: ${({theme:o})=>o.radius.md};
|
|
361
|
-
font-size: 18px;
|
|
362
|
-
line-height: 1;
|
|
363
373
|
color: ${({theme:o})=>o.colors.neutral[500]};
|
|
364
374
|
|
|
365
375
|
&:hover {
|
|
@@ -371,38 +381,38 @@
|
|
|
371
381
|
outline: 2px solid ${({theme:o})=>o.colors.primary[500]};
|
|
372
382
|
outline-offset: 2px;
|
|
373
383
|
}
|
|
374
|
-
`;function L({open:o,onClose:s,message:n,variant:e="info",duration:c=4e3,position:l="bottom-right"}){const[i,d]=
|
|
384
|
+
`;function L({open:o,onClose:s,message:n,variant:e="info",duration:c=4e3,position:l="bottom-right"}){const[i,d]=a.useState(o),[p,u]=a.useState(!1);return a.useEffect(()=>{if(o)d(!0),u(!1);else if(i){u(!0);const x=setTimeout(()=>{d(!1),u(!1)},200);return()=>clearTimeout(x)}},[o,i]),a.useEffect(()=>{if(!o||c===0)return;const x=setTimeout(s,c);return()=>clearTimeout(x)},[o,c,s]),i?A.createPortal(t.jsxs(Ro,{$position:l,$variant:e,$closing:p,role:"alert","aria-live":"polite",children:[t.jsx(No,{children:n}),t.jsx(Vo,{onClick:s,"aria-label":"Close notification",children:t.jsx(Z,{size:14,strokeWidth:2.5})})]}),document.body):null}L.displayName="Toast";const Mo=r.form`
|
|
375
385
|
display: flex;
|
|
376
386
|
flex-direction: column;
|
|
377
387
|
gap: ${({theme:o})=>o.spacing[4]};
|
|
378
|
-
`,
|
|
388
|
+
`,Po=r.div`
|
|
379
389
|
display: flex;
|
|
380
390
|
flex-direction: column;
|
|
381
391
|
gap: ${({theme:o})=>o.spacing[1]};
|
|
382
|
-
`,
|
|
392
|
+
`,Ao=r.label`
|
|
383
393
|
font-size: ${({theme:o})=>o.fontSizes.sm};
|
|
384
394
|
font-weight: 500;
|
|
385
395
|
color: ${({theme:o})=>o.colors.neutral[900]};
|
|
386
|
-
`,
|
|
396
|
+
`,Do=r.span`
|
|
387
397
|
color: ${({theme:o})=>o.colors.error[500]};
|
|
388
398
|
margin-left: 2px;
|
|
389
399
|
aria-hidden: true;
|
|
390
|
-
`,
|
|
400
|
+
`,Yo=r.span`
|
|
391
401
|
font-size: ${({theme:o})=>o.fontSizes.xs};
|
|
392
402
|
color: ${({$error:o,theme:s})=>o?s.colors.error[500]:s.colors.neutral[500]};
|
|
393
|
-
`;function
|
|
403
|
+
`;function X({onSubmit:o,children:s,...n}){return t.jsx(Mo,{onSubmit:e=>{e.preventDefault(),o?.(e)},noValidate:!0,...n,children:s})}X.displayName="Form";function G({label:o,error:s,helperText:n,required:e,children:c}){const l=a.useId(),i=`${l}-hint`,d=!!(s||n),p=typeof s=="string"?s:void 0,u=a.isValidElement(c)?a.cloneElement(c,{id:l,...d&&{"aria-describedby":i},...s&&{"aria-invalid":!0}}):c;return t.jsxs(Po,{children:[o&&t.jsxs(Ao,{htmlFor:l,children:[o,e&&t.jsx(Do,{"aria-hidden":"true",children:" *"})]}),u,d&&t.jsx(Yo,{id:i,$error:!!s,children:p??n})]})}G.displayName="FormField";const Ho=r.div`
|
|
394
404
|
display: inline-flex;
|
|
395
405
|
flex-direction: column;
|
|
396
406
|
gap: ${({theme:o})=>o.spacing[1]};
|
|
397
407
|
width: ${({$fullWidth:o})=>o?"100%":"auto"};
|
|
398
|
-
`,
|
|
408
|
+
`,qo=r.div`
|
|
399
409
|
position: relative;
|
|
400
410
|
display: flex;
|
|
401
411
|
width: 100%;
|
|
402
|
-
`,
|
|
412
|
+
`,_o=r.span`
|
|
403
413
|
font-size: ${({theme:o})=>o.fontSizes.xs};
|
|
404
414
|
color: ${({$error:o,theme:s})=>o?s.colors.error[500]:s.colors.neutral[500]};
|
|
405
|
-
`,
|
|
415
|
+
`,Ko=r.select`
|
|
406
416
|
appearance: none;
|
|
407
417
|
width: 100%;
|
|
408
418
|
border-radius: ${({theme:o})=>o.radius.md};
|
|
@@ -455,7 +465,7 @@
|
|
|
455
465
|
cursor: not-allowed;
|
|
456
466
|
opacity: 0.6;
|
|
457
467
|
}
|
|
458
|
-
`,
|
|
468
|
+
`,Uo=r.button`
|
|
459
469
|
position: absolute;
|
|
460
470
|
right: ${({theme:o})=>o.spacing[3]};
|
|
461
471
|
top: 50%;
|
|
@@ -477,7 +487,7 @@
|
|
|
477
487
|
outline-offset: 2px;
|
|
478
488
|
border-radius: 2px;
|
|
479
489
|
}
|
|
480
|
-
`,
|
|
490
|
+
`,Zo=r.span`
|
|
481
491
|
position: absolute;
|
|
482
492
|
right: ${({theme:o})=>o.spacing[3]};
|
|
483
493
|
top: 50%;
|
|
@@ -486,7 +496,7 @@
|
|
|
486
496
|
display: flex;
|
|
487
497
|
align-items: center;
|
|
488
498
|
color: ${({theme:o})=>o.colors.neutral[500]};
|
|
489
|
-
`;function
|
|
499
|
+
`;function J({options:o,placeholder:s,size:n="md",variant:e="default",error:c,fullWidth:l,clearable:i,onClear:d,id:p,value:u,defaultValue:x,onChange:v,...b}){const $=a.useId(),m=p??$,C=`${m}-hint`,h=typeof c=="string"?c:void 0,[k,j]=a.useState(x??""),S=u!==void 0,z=S?u:k,f=w=>{S||j(w.target.value),v?.(w)},g=()=>{S||j(""),d?.()},y=i&&!!z;return t.jsxs(Ho,{$fullWidth:l,children:[t.jsxs(qo,{children:[t.jsxs(Ko,{id:m,$size:n,$variant:e,$error:!!c,"aria-invalid":!!c,"aria-describedby":h?C:void 0,value:z,onChange:f,...b,children:[s&&t.jsx("option",{value:"",disabled:!0,children:s}),o.map(w=>t.jsx("option",{value:w.value,disabled:w.disabled,children:w.label},w.value))]}),y?t.jsx(Uo,{type:"button",onClick:g,"aria-label":"Clear selection",children:t.jsx(Z,{size:14})}):t.jsx(Zo,{"aria-hidden":"true",children:t.jsx(U,{size:14})})]}),h&&t.jsx(_o,{id:C,$error:!0,children:h})]})}J.displayName="Select";const Xo=r.a`
|
|
490
500
|
text-decoration: underline;
|
|
491
501
|
text-underline-offset: 2px;
|
|
492
502
|
transition: color 0.15s;
|
|
@@ -508,4 +518,84 @@
|
|
|
508
518
|
color: ${s.colors.neutral[900]};
|
|
509
519
|
}
|
|
510
520
|
`})[o]}
|
|
511
|
-
`;function
|
|
521
|
+
`;function Q({variant:o="default",external:s,children:n,...e}){return t.jsx(Xo,{$variant:o,...s&&{target:"_blank",rel:"noreferrer"},...e,children:n})}Q.displayName="Link";const Go=r.div`
|
|
522
|
+
border-radius: ${({theme:o})=>o.radius.md};
|
|
523
|
+
background: ${({theme:o})=>o.colors.neutral[0]};
|
|
524
|
+
overflow: hidden;
|
|
525
|
+
|
|
526
|
+
${({theme:o,$accentColor:s})=>o.brutalism?r.css`
|
|
527
|
+
border: ${o.brutalism.borderWidth} solid
|
|
528
|
+
${s??o.colors.neutral[900]};
|
|
529
|
+
box-shadow: ${o.brutalism.shadowOffset}
|
|
530
|
+
${o.brutalism.shadowOffset} 0
|
|
531
|
+
${s??o.colors.neutral[900]};
|
|
532
|
+
`:r.css`
|
|
533
|
+
border: 1px solid ${s??o.colors.neutral[200]};
|
|
534
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
535
|
+
`}
|
|
536
|
+
`,Jo=r.button`
|
|
537
|
+
width: 100%;
|
|
538
|
+
display: flex;
|
|
539
|
+
align-items: flex-start;
|
|
540
|
+
gap: ${({theme:o})=>o.spacing[3]};
|
|
541
|
+
padding: ${({theme:o})=>o.spacing[4]};
|
|
542
|
+
background: ${({theme:o})=>o.brutalism?o.colors.neutral[100]:o.colors.neutral[0]};
|
|
543
|
+
border: none;
|
|
544
|
+
cursor: pointer;
|
|
545
|
+
text-align: left;
|
|
546
|
+
|
|
547
|
+
&:hover {
|
|
548
|
+
background: ${({theme:o})=>o.colors.neutral[100]};
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
&:focus-visible {
|
|
552
|
+
outline: 2px solid
|
|
553
|
+
${({theme:o,$accentColor:s})=>s??o.colors.primary[500]};
|
|
554
|
+
outline-offset: -2px;
|
|
555
|
+
}
|
|
556
|
+
`,Qo=r.div`
|
|
557
|
+
flex: 1;
|
|
558
|
+
min-width: 0;
|
|
559
|
+
`,os=r.span`
|
|
560
|
+
display: block;
|
|
561
|
+
font-size: ${({theme:o})=>o.fontSizes.md};
|
|
562
|
+
font-weight: 600;
|
|
563
|
+
color: ${({theme:o})=>o.colors.neutral[900]};
|
|
564
|
+
`,ss=r.span`
|
|
565
|
+
display: block;
|
|
566
|
+
font-size: ${({theme:o})=>o.fontSizes.sm};
|
|
567
|
+
color: ${({theme:o})=>o.colors.neutral[500]};
|
|
568
|
+
`,rs=r.div`
|
|
569
|
+
display: flex;
|
|
570
|
+
flex-direction: row;
|
|
571
|
+
align-items: center;
|
|
572
|
+
justify-content: space-between;
|
|
573
|
+
margin-top: ${({theme:o})=>o.spacing[1]};
|
|
574
|
+
|
|
575
|
+
@media (max-width: 640px) {
|
|
576
|
+
flex-direction: column;
|
|
577
|
+
align-items: flex-start;
|
|
578
|
+
gap: ${({theme:o})=>o.spacing[2]};
|
|
579
|
+
}
|
|
580
|
+
`,ns=r.div`
|
|
581
|
+
display: flex;
|
|
582
|
+
align-items: center;
|
|
583
|
+
gap: ${({theme:o})=>o.spacing[2]};
|
|
584
|
+
`,ts=r.span`
|
|
585
|
+
display: inline-flex;
|
|
586
|
+
align-items: center;
|
|
587
|
+
justify-content: center;
|
|
588
|
+
flex-shrink: 0;
|
|
589
|
+
transition: transform 0.2s ease;
|
|
590
|
+
transform: ${({$open:o})=>o?"rotate(180deg)":"rotate(0deg)"};
|
|
591
|
+
color: ${({theme:o,$accentColor:s})=>s??o.colors.neutral[500]};
|
|
592
|
+
`,es=r.div`
|
|
593
|
+
display: grid;
|
|
594
|
+
grid-template-rows: ${({$open:o})=>o?"1fr":"0fr"};
|
|
595
|
+
transition: grid-template-rows 0.2s ease;
|
|
596
|
+
`,as=r.div`
|
|
597
|
+
overflow: hidden;
|
|
598
|
+
`,is=r.div`
|
|
599
|
+
padding: ${({theme:o})=>o.spacing[4]};
|
|
600
|
+
border-top: 1px solid ${({theme:o})=>o.colors.neutral[200]};
|
|
601
|
+
`;function oo({title:o,children:s,defaultOpen:n=!1,open:e,onToggle:c,subtitle:l,headerActions:i,accentColor:d}){const[p,u]=a.useState(n),x=a.useId(),v=e!==void 0,b=v?e:p,$=()=>{const m=!b;v||u(m),c?.(m)};return t.jsxs(Go,{$accentColor:d,children:[t.jsxs(Jo,{type:"button",$open:b,$accentColor:d,"aria-expanded":b,"aria-controls":x,onClick:$,children:[t.jsxs(Qo,{children:[t.jsx(os,{children:o}),(l||i)&&t.jsxs(rs,{children:[l&&t.jsx(ss,{children:l}),i&&t.jsx(ns,{onClick:m=>m.stopPropagation(),children:i})]})]}),t.jsx(ts,{$open:b,$accentColor:d,"aria-hidden":"true",children:t.jsx(U,{size:18,strokeWidth:2.5})})]}),t.jsx(es,{$open:b,children:t.jsx(as,{id:x,role:"region","aria-label":o,children:t.jsx(is,{children:s})})})]})}oo.displayName="CollapsibleCard";const so=a.createContext(null);function ls({children:o}){const[s,n]=a.useState(null),e=a.useCallback(l=>{n({...l,id:Date.now()})},[]),c=a.useMemo(()=>{const l=i=>e(i);return l.success=(i,d)=>e({...d,message:i,variant:"success"}),l.error=(i,d)=>e({...d,message:i,variant:"error"}),l.warning=(i,d)=>e({...d,message:i,variant:"warning"}),l.info=(i,d)=>e({...d,message:i,variant:"info"}),l},[e]);return t.jsxs(so.Provider,{value:{toast:c},children:[o,s&&t.jsx(L,{open:!0,onClose:()=>n(null),message:s.message,variant:s.variant,duration:s.duration,position:s.position},s.id)]})}function cs(){const o=a.useContext(so);if(!o)throw new Error("useToast must be used within a ToastProvider");return o}function ds({initialValues:o,validate:s,onSubmit:n,onError:e}){const[c,l]=a.useState(o),[i,d]=a.useState({}),[p,u]=a.useState({}),[x,v]=a.useState(!1),b=a.useRef(c);b.current=c;const $=a.useCallback(f=>{if(!s)return{};const g=s(f);return Object.fromEntries(Object.entries(g).filter(([,y])=>y!==void 0))},[s]),m=a.useRef(p);m.current=p;const C=a.useCallback(f=>{const{name:g,value:y}=f.target,w={...b.current,[g]:y};l(w),m.current[g]&&d($(w))},[$]),h=a.useCallback(f=>{const{name:g}=f.target;u(y=>({...y,[g]:!0})),d($(b.current))},[$]),k=a.useCallback(f=>{f?.preventDefault();const g=Object.keys(b.current).reduce((T,O)=>({...T,[O]:!0}),{});u(g);const y=$(b.current);if(d(y),Object.keys(y).length>0){e?.(y);return}(async()=>{v(!0);try{await n?.(b.current)}finally{v(!1)}})()},[$,n,e]),j=a.useCallback((f,g)=>{l(y=>({...y,[f]:g}))},[]),S=a.useCallback(()=>{l(o),d({}),u({}),v(!1)},[o]),z=Object.fromEntries(Object.entries(i).filter(([f])=>p[f]));return{values:c,errors:z,touched:p,handleChange:C,handleBlur:h,handleSubmit:k,setFieldValue:j,reset:S,isSubmitting:x}}const P={primary:{50:"#f0f8ff",500:"#0070f3",700:"#005bb5"},neutral:{0:"#ffffff",100:"#f5f5f5",200:"#eaeaea",300:"#cacaca",400:"#cccccc",500:"#666666",600:"#333333",900:"#111111"},error:{50:"#fef2f2",500:"#d32f2f"},success:{50:"#f0fdf4",500:"#16a34a"},warning:{50:"#fffbeb",500:"#d97706"},info:{50:"#eff6ff",500:"#2563eb"}},us={1:"4px",2:"8px",3:"12px",4:"16px",5:"20px",6:"24px"},fs={md:"6px"},ps={modal:1e3,toast:1100},gs={xs:"12px",sm:"14px",md:"16px",lg:"18px"},bs={colors:{...P,primary:{...P.primary,contrast:"#ffffff"}},spacing:us,fontSizes:gs,radius:fs,zIndex:ps,shadows:{focusRing:"0 0 0 2px rgba(0, 112, 243, 0.25)"}};function $s(o){const s=parseInt(o.slice(1,3),16)/255,n=parseInt(o.slice(3,5),16)/255,e=parseInt(o.slice(5,7),16)/255,c=i=>i<=.03928?i/12.92:((i+.055)/1.055)**2.4;return .2126*c(s)+.7152*c(n)+.0722*c(e)>.179?"#111111":"#ffffff"}const B={colors:{primary:{50:"#fffde6",500:"#ffd000",700:"#ffd000",contrast:"#111111"},neutral:{0:"#ffffff",100:"#f5f0e8",200:"#e8e3db",300:"#ccc8c0",400:"#a8a49c",500:"#706c64",600:"#3c3830",900:"#111111"},error:{50:"#fff0f0",500:"#ff3333"},success:{50:"#f0fff4",500:"#00cc44"},warning:{50:"#fffbe6",500:"#ff9900"},info:{50:"#f0f0ff",500:"#3333ff"}},spacing:{1:"4px",2:"8px",3:"12px",4:"16px",5:"20px",6:"24px"},radius:{md:"2px"},zIndex:{modal:1e3,toast:1100},fontSizes:{xs:"12px",sm:"14px",md:"16px",lg:"18px"},shadows:{focusRing:"3px 3px 0 #111111"},brutalism:{borderWidth:"2px",shadowOffset:"4px"}};function xs(o){return{...B,colors:{...B.colors,primary:{50:"#fffff0",500:o,700:o,contrast:$s(o)}}}}function ys({theme:o=B,children:s}){return t.jsx(r.ThemeProvider,{theme:o,children:s})}exports.Badge=D;exports.Button=Y;exports.CollapsibleCard=oo;exports.Form=X;exports.FormField=G;exports.Input=H;exports.Link=Q;exports.Modal=q;exports.Select=J;exports.ThemeProvider=ys;exports.Toast=L;exports.ToastProvider=ls;exports.createNeoBrutalTheme=xs;exports.defaultTheme=bs;exports.neoBrutalTheme=B;exports.useForm=ds;exports.useToast=cs;
|
package/dist/index.d.ts
CHANGED
|
@@ -14,6 +14,8 @@ export { Select } from './components/Select';
|
|
|
14
14
|
export type { SelectProps, SelectOption, SelectSizes, SelectVariants, } from './components/Select';
|
|
15
15
|
export { Link } from './components/Link';
|
|
16
16
|
export type { LinkProps, LinkVariants } from './components/Link';
|
|
17
|
+
export { CollapsibleCard } from './components/CollapsibleCard';
|
|
18
|
+
export type { CollapsibleCardProps } from './components/CollapsibleCard';
|
|
17
19
|
export { useToast, ToastProvider } from './hooks';
|
|
18
20
|
export type { ToastOptions, ToastFn, ToastContextValue } from './hooks';
|
|
19
21
|
export { useForm } from './hooks';
|