@a-type/ui 0.8.22 → 0.8.24
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/dist/cjs/components/button/Button.d.ts +1 -0
- package/dist/cjs/components/button/Button.js +4 -4
- package/dist/cjs/components/button/Button.js.map +1 -1
- package/dist/cjs/components/dialog/Dialog.js +7 -7
- package/dist/cjs/components/dialog/Dialog.js.map +1 -1
- package/dist/cjs/components/dialog/Dialog.stories.js +8 -3
- package/dist/cjs/components/dialog/Dialog.stories.js.map +1 -1
- package/dist/cjs/components/editableText/EditableText.d.ts +7 -1
- package/dist/cjs/components/editableText/EditableText.js +16 -6
- package/dist/cjs/components/editableText/EditableText.js.map +1 -1
- package/dist/cjs/uno.preset.js +11 -6
- package/dist/cjs/uno.preset.js.map +1 -1
- package/dist/css/main.css +8 -7
- package/dist/esm/components/button/Button.d.ts +1 -0
- package/dist/esm/components/button/Button.js +4 -4
- package/dist/esm/components/button/Button.js.map +1 -1
- package/dist/esm/components/dialog/Dialog.js +7 -7
- package/dist/esm/components/dialog/Dialog.js.map +1 -1
- package/dist/esm/components/dialog/Dialog.stories.js +8 -3
- package/dist/esm/components/dialog/Dialog.stories.js.map +1 -1
- package/dist/esm/components/editableText/EditableText.d.ts +7 -1
- package/dist/esm/components/editableText/EditableText.js +17 -7
- package/dist/esm/components/editableText/EditableText.js.map +1 -1
- package/dist/esm/uno.preset.js +11 -6
- package/dist/esm/uno.preset.js.map +1 -1
- package/package.json +1 -1
- package/src/components/button/Button.tsx +7 -3
- package/src/components/dialog/Dialog.stories.tsx +43 -6
- package/src/components/dialog/Dialog.tsx +8 -7
- package/src/components/editableText/EditableText.tsx +44 -10
- package/src/uno.preset.ts +15 -6
|
@@ -11,20 +11,26 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
11
11
|
return t;
|
|
12
12
|
};
|
|
13
13
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
-
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
14
|
+
import { useCallback, useEffect, useRef, useState, } from 'react';
|
|
15
15
|
import { Input, inputClassName } from '../input.js';
|
|
16
16
|
import clsx from 'clsx';
|
|
17
17
|
import { Icon } from '../icon.js';
|
|
18
18
|
export function EditableText(_a) {
|
|
19
|
-
var { value, onValueChange, editing, onEditingChange, className, id, autoSelect, autoFocus } = _a, rest = __rest(_a, ["value", "onValueChange", "editing", "onEditingChange", "className", "id", "autoSelect", "autoFocus"]);
|
|
19
|
+
var { value, onValueChange, editing, onEditingChange, className, id, autoSelect, autoFocus, onBlur, onChange, onKeyDown } = _a, rest = __rest(_a, ["value", "onValueChange", "editing", "onEditingChange", "className", "id", "autoSelect", "autoFocus", "onBlur", "onChange", "onKeyDown"]);
|
|
20
20
|
const [editingInternal, setEditingInternal] = useState(editing || autoFocus);
|
|
21
21
|
const editingFinal = editing !== null && editing !== void 0 ? editing : editingInternal;
|
|
22
22
|
const setEditingFinal = onEditingChange !== null && onEditingChange !== void 0 ? onEditingChange : setEditingInternal;
|
|
23
|
-
const
|
|
23
|
+
const handleChange = useCallback((ev) => {
|
|
24
24
|
onValueChange(ev.target.value);
|
|
25
|
-
|
|
25
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(ev);
|
|
26
|
+
}, [onValueChange, onChange]);
|
|
27
|
+
const handleKeyDown = useCallback((ev) => {
|
|
28
|
+
if (ev.key === 'Enter') {
|
|
29
|
+
setEditingFinal(false);
|
|
30
|
+
}
|
|
31
|
+
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(ev);
|
|
32
|
+
}, [setEditingFinal, onKeyDown]);
|
|
26
33
|
const inputRef = useRef(null);
|
|
27
|
-
const divRef = useRef(null);
|
|
28
34
|
useEffect(() => {
|
|
29
35
|
if (editingFinal && inputRef.current) {
|
|
30
36
|
// -10... roughly estimated based on default font.
|
|
@@ -32,9 +38,13 @@ export function EditableText(_a) {
|
|
|
32
38
|
inputRef.current.focus();
|
|
33
39
|
}
|
|
34
40
|
}, [editingFinal, inputRef]);
|
|
41
|
+
const handleBlur = useCallback((ev) => {
|
|
42
|
+
setEditingFinal(false);
|
|
43
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(ev);
|
|
44
|
+
}, [setEditingFinal, onBlur]);
|
|
35
45
|
if (editingFinal) {
|
|
36
|
-
return (_jsx(Input, Object.assign({ ref: inputRef, value: value, onChange:
|
|
46
|
+
return (_jsx(Input, Object.assign({ ref: inputRef, value: value, onChange: handleChange, onBlur: handleBlur, className: clsx('layer-variants:font-size-inherit', className), id: id, autoSelect: autoSelect, onKeyDown: handleKeyDown }, rest)));
|
|
37
47
|
}
|
|
38
|
-
return (_jsxs("
|
|
48
|
+
return (_jsxs("button", Object.assign({ onClick: () => setEditingFinal(true), className: clsx(inputClassName, 'layer-variants:border-transparent layer-variants:bg-transparent layer-variants:w-auto layer-variants:inline-flex layer-variants:items-center layer-variants:gap-2 layer-variants:font-size-inherit layer-variants:text-inherit layer-variants:shadow-none', 'layer-variants:hover:bg-gray-blend', 'layer-variants:focus-visible:outline-none layer-variants:focus-visible:bg-gray-dark-blend', 'cursor-pointer', className), id: id }, rest, { children: [value, _jsx(Icon, { name: "pencil", className: "stroke-gray-blend opacity-50" })] })));
|
|
39
49
|
}
|
|
40
50
|
//# sourceMappingURL=EditableText.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableText.js","sourceRoot":"","sources":["../../../../src/components/editableText/EditableText.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"EditableText.js","sourceRoot":"","sources":["../../../../src/components/editableText/EditableText.tsx"],"names":[],"mappings":"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"}
|
package/dist/esm/uno.preset.js
CHANGED
|
@@ -100,6 +100,10 @@ export default function presetAglio({ spacingIncrement = 0.25, interFontLocation
|
|
|
100
100
|
'lg-inset': 'inset 0 10px 15px -3px var(--color-shadow-1), inset 0 4px 6px -2px var(--color-shadow-2)',
|
|
101
101
|
xl: '0 20px 25px -5px var(--color-shadow-1), 0 10px 10px -5px var(--color-shadow-2)',
|
|
102
102
|
'xl-inset': 'inset 0 20px 25px -5px var(--color-shadow-1), inset 0 10px 10px -5px var(--color-shadow-2)',
|
|
103
|
+
'sm-up': '0 -1px 2px 0 var(--color-shadow-2), 0 0 1px 0 var(--color-shadow-2)',
|
|
104
|
+
'md-up': '0 -4px 6px -1px var(--color-shadow-1), 0 -2px 4px -1px var(--color-shadow-2)',
|
|
105
|
+
'lg-up': '0 -10px 15px -3px var(--color-shadow-1), 0 -4px 6px -2px var(--color-shadow-2)',
|
|
106
|
+
'xl-up': '0 -20px 25px -5px var(--color-shadow-1), 0 -10px 10px -5px var(--color-shadow-2)',
|
|
103
107
|
// focus outlines
|
|
104
108
|
focus: `0 0 0 3px var(--color-primary-light)`,
|
|
105
109
|
},
|
|
@@ -434,7 +438,6 @@ export default function presetAglio({ spacingIncrement = 0.25, interFontLocation
|
|
|
434
438
|
--palette-light-blend-warm: rgba(255, 250, 250, 0.8);
|
|
435
439
|
--palette-light-blend-cool: rgba(250, 255, 255, 0.8);
|
|
436
440
|
--palette-light-blend: rgba(255, 250, 250, 0.8);
|
|
437
|
-
--palette-overlay: rgba(0, 0, 0, 0.025);
|
|
438
441
|
--palette-black: #303030;
|
|
439
442
|
--palette-white: #fff;
|
|
440
443
|
--palette-light: #f8f8fb;
|
|
@@ -459,6 +462,8 @@ export default function presetAglio({ spacingIncrement = 0.25, interFontLocation
|
|
|
459
462
|
--palette-shadow-2: rgba(0, 0, 0, 0.15);
|
|
460
463
|
--palette-shadow-3: rgba(0, 0, 0, 0.3);
|
|
461
464
|
--palette-shadow-4: rgba(0, 0, 0, 0.5);
|
|
465
|
+
--palette-white-overlay: rgba(255, 255, 255, 0.4);
|
|
466
|
+
--palette-black-overlay: rgba(0, 0, 0, 0.4);
|
|
462
467
|
|
|
463
468
|
|
|
464
469
|
--z-nowPlaying: 40;
|
|
@@ -479,7 +484,6 @@ export default function presetAglio({ spacingIncrement = 0.25, interFontLocation
|
|
|
479
484
|
--color-light-blend-warm: var(--palette-light-blend-warm);
|
|
480
485
|
--color-light-blend-cool: var(--palette-light-blend-cool);
|
|
481
486
|
--color-light-blend: var(--palette-light-blend);
|
|
482
|
-
--color-overlay: var(--palette-overlay);
|
|
483
487
|
--color-black: var(--palette-black);
|
|
484
488
|
--color-white: var(--palette-white);
|
|
485
489
|
--color-wash: var(--palette-light);
|
|
@@ -497,6 +501,7 @@ export default function presetAglio({ spacingIncrement = 0.25, interFontLocation
|
|
|
497
501
|
--color-gray-dark-blend: var(--palette-gray-dark-blend);
|
|
498
502
|
--color-shadow-1: var(--palette-shadow-2);
|
|
499
503
|
--color-shadow-2: var(--palette-shadow-1);
|
|
504
|
+
--color-overlay: var(--palette-white-overlay);
|
|
500
505
|
|
|
501
506
|
|
|
502
507
|
/* DEFAULT THEME (LEMON) */
|
|
@@ -524,8 +529,7 @@ export default function presetAglio({ spacingIncrement = 0.25, interFontLocation
|
|
|
524
529
|
--color-dark-blend-cool: var(--palette-light-blend-cool);
|
|
525
530
|
--color-light-blend-warm: var(--palette-dark-blend-warm);
|
|
526
531
|
--color-light-blend-cool: var(--palette-dark-blend-cool);
|
|
527
|
-
--color-light-blend: var(--palette-
|
|
528
|
-
--color-overlay: var(--palette-overlay);
|
|
532
|
+
--color-light-blend: var(--palette-dark-blend);
|
|
529
533
|
--color-black: var(--palette-white);
|
|
530
534
|
--color-white: var(--palette-black);
|
|
531
535
|
--color-wash: var(--palette-dark);
|
|
@@ -543,6 +547,7 @@ export default function presetAglio({ spacingIncrement = 0.25, interFontLocation
|
|
|
543
547
|
--color-gray-dark-blend: var(--palette-light-gray-dark-blend);
|
|
544
548
|
--color-shadow-1: var(--palette-shadow-4);
|
|
545
549
|
--color-shadow-2: var(--palette-shadow-3);
|
|
550
|
+
--color-overlay: var(--palette-black-overlay);
|
|
546
551
|
}
|
|
547
552
|
}
|
|
548
553
|
|
|
@@ -555,7 +560,6 @@ export default function presetAglio({ spacingIncrement = 0.25, interFontLocation
|
|
|
555
560
|
--color-light-blend-warm: var(--palette-light-blend-warm);
|
|
556
561
|
--color-light-blend-cool: var(--palette-light-blend-cool);
|
|
557
562
|
--color-light-blend: var(--palette-light-blend);
|
|
558
|
-
--color-overlay: var(--palette-overlay);
|
|
559
563
|
--color-black: var(--palette-black);
|
|
560
564
|
--color-white: var(--palette-white);
|
|
561
565
|
--color-wash: var(--palette-light);
|
|
@@ -573,6 +577,7 @@ export default function presetAglio({ spacingIncrement = 0.25, interFontLocation
|
|
|
573
577
|
--color-gray-dark-blend: var(--palette-gray-dark-blend);
|
|
574
578
|
--color-shadow-1: var(--palette-shadow-2);
|
|
575
579
|
--color-shadow-2: var(--palette-shadow-1);
|
|
580
|
+
--color-overlay: var(--palette-white-overlay);
|
|
576
581
|
}
|
|
577
582
|
}
|
|
578
583
|
|
|
@@ -584,7 +589,6 @@ export default function presetAglio({ spacingIncrement = 0.25, interFontLocation
|
|
|
584
589
|
--color-light-blend-warm: var(--palette-dark-blend-warm);
|
|
585
590
|
--color-light-blend-cool: var(--palette-dark-blend-cool);
|
|
586
591
|
--color-light-blend: var(--palette-light-blend);
|
|
587
|
-
--color-overlay: var(--palette-overlay);
|
|
588
592
|
--color-black: var(--palette-white);
|
|
589
593
|
--color-white: var(--palette-black);
|
|
590
594
|
--color-wash: var(--palette-dark);
|
|
@@ -602,6 +606,7 @@ export default function presetAglio({ spacingIncrement = 0.25, interFontLocation
|
|
|
602
606
|
--color-gray-dark-blend: var(--palette-light-gray-dark-blend);
|
|
603
607
|
--color-shadow-1: var(--palette-shadow-4);
|
|
604
608
|
--color-shadow-2: var(--palette-shadow-3);
|
|
609
|
+
--color-overlay: var(--palette-black-overlay);
|
|
605
610
|
}
|
|
606
611
|
}
|
|
607
612
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"uno.preset.js","sourceRoot":"","sources":["../../src/uno.preset.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"uno.preset.js","sourceRoot":"","sources":["../../src/uno.preset.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -18,6 +18,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
18
18
|
| 'unstyled';
|
|
19
19
|
size?: 'default' | 'small' | 'icon';
|
|
20
20
|
toggled?: boolean;
|
|
21
|
+
toggleMode?: 'color' | 'indicator' | 'state-only';
|
|
21
22
|
align?: 'start' | 'stretch' | 'end';
|
|
22
23
|
visuallyDisabled?: boolean;
|
|
23
24
|
loading?: boolean;
|
|
@@ -31,6 +32,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
|
|
31
32
|
color,
|
|
32
33
|
size,
|
|
33
34
|
toggled,
|
|
35
|
+
toggleMode = 'color',
|
|
34
36
|
align,
|
|
35
37
|
visuallyDisabled,
|
|
36
38
|
loading,
|
|
@@ -52,7 +54,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
|
|
52
54
|
getButtonClassName({
|
|
53
55
|
color,
|
|
54
56
|
size,
|
|
55
|
-
toggleable: toggled !== undefined,
|
|
57
|
+
toggleable: toggled !== undefined && toggleMode === 'color',
|
|
56
58
|
align,
|
|
57
59
|
}),
|
|
58
60
|
className,
|
|
@@ -60,7 +62,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
|
|
60
62
|
};
|
|
61
63
|
// set state when toggleable
|
|
62
64
|
if (toggled !== undefined) {
|
|
63
|
-
buttonProps['aria-pressed'] = toggled;
|
|
65
|
+
buttonProps['aria-pressed'] = !!toggled;
|
|
64
66
|
}
|
|
65
67
|
|
|
66
68
|
if (asChild) {
|
|
@@ -71,7 +73,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
|
|
71
73
|
return (
|
|
72
74
|
<Comp {...buttonProps}>
|
|
73
75
|
{loading && <Spinner size={16} className="inline-block w-1em h-1em" />}
|
|
74
|
-
{toggled !== undefined &&
|
|
76
|
+
{toggled !== undefined && toggleMode !== 'state-only' && (
|
|
77
|
+
<ToggleIndicator value={toggled} />
|
|
78
|
+
)}
|
|
75
79
|
{children}
|
|
76
80
|
</Comp>
|
|
77
81
|
);
|
|
@@ -8,6 +8,8 @@ import {
|
|
|
8
8
|
DialogTitle,
|
|
9
9
|
} from './Dialog.js';
|
|
10
10
|
import { ParticleLayer } from '../particles.js';
|
|
11
|
+
import { H1, P } from '../typography.js';
|
|
12
|
+
import { Button } from '../button.js';
|
|
11
13
|
|
|
12
14
|
const meta = {
|
|
13
15
|
title: 'Dialog',
|
|
@@ -22,15 +24,40 @@ export default meta;
|
|
|
22
24
|
|
|
23
25
|
type Story = StoryObj<typeof Dialog>;
|
|
24
26
|
|
|
27
|
+
function DummyContent() {
|
|
28
|
+
return (
|
|
29
|
+
<div className="col">
|
|
30
|
+
<H1>Some content</H1>
|
|
31
|
+
<P>
|
|
32
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at
|
|
33
|
+
porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula
|
|
34
|
+
accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi. Nulla
|
|
35
|
+
facil
|
|
36
|
+
</P>
|
|
37
|
+
<Button disabled color="primary">
|
|
38
|
+
Click me
|
|
39
|
+
</Button>
|
|
40
|
+
</div>
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
|
|
25
44
|
export const Default: Story = {
|
|
26
45
|
args: {
|
|
27
46
|
children: (
|
|
28
47
|
<ParticleLayer noPortal>
|
|
29
|
-
<DialogTrigger>
|
|
48
|
+
<DialogTrigger asChild>
|
|
49
|
+
<Button>Open</Button>
|
|
50
|
+
</DialogTrigger>
|
|
51
|
+
<DummyContent />
|
|
30
52
|
<DialogContent>
|
|
31
53
|
<DialogTitle>Hello world</DialogTitle>
|
|
54
|
+
<DummyContent />
|
|
55
|
+
<DummyContent />
|
|
56
|
+
<DummyContent />
|
|
32
57
|
<DialogActions>
|
|
33
|
-
<DialogClose>
|
|
58
|
+
<DialogClose asChild>
|
|
59
|
+
<Button>Close</Button>
|
|
60
|
+
</DialogClose>
|
|
34
61
|
</DialogActions>
|
|
35
62
|
</DialogContent>
|
|
36
63
|
</ParticleLayer>
|
|
@@ -42,11 +69,16 @@ export const NoSheet: Story = {
|
|
|
42
69
|
args: {
|
|
43
70
|
children: (
|
|
44
71
|
<ParticleLayer noPortal>
|
|
45
|
-
<DialogTrigger>
|
|
72
|
+
<DialogTrigger asChild>
|
|
73
|
+
<Button>Open</Button>
|
|
74
|
+
</DialogTrigger>
|
|
75
|
+
<DummyContent />
|
|
46
76
|
<DialogContent disableSheet>
|
|
47
77
|
<DialogTitle>Hello world</DialogTitle>
|
|
48
78
|
<DialogActions>
|
|
49
|
-
<DialogClose>
|
|
79
|
+
<DialogClose asChild>
|
|
80
|
+
<Button>Close</Button>
|
|
81
|
+
</DialogClose>
|
|
50
82
|
</DialogActions>
|
|
51
83
|
</DialogContent>
|
|
52
84
|
</ParticleLayer>
|
|
@@ -58,11 +90,16 @@ export const Positioned: Story = {
|
|
|
58
90
|
args: {
|
|
59
91
|
children: (
|
|
60
92
|
<ParticleLayer noPortal>
|
|
61
|
-
<DialogTrigger>
|
|
93
|
+
<DialogTrigger asChild>
|
|
94
|
+
<Button>Open</Button>
|
|
95
|
+
</DialogTrigger>
|
|
96
|
+
<DummyContent />
|
|
62
97
|
<DialogContent className="top-auto bottom-0px">
|
|
63
98
|
<DialogTitle>Hello world</DialogTitle>
|
|
64
99
|
<DialogActions>
|
|
65
|
-
<DialogClose>
|
|
100
|
+
<DialogClose asChild>
|
|
101
|
+
<Button>Close</Button>
|
|
102
|
+
</DialogClose>
|
|
66
103
|
</DialogActions>
|
|
67
104
|
</DialogContent>
|
|
68
105
|
</ParticleLayer>
|
|
@@ -21,14 +21,15 @@ import { useDrag } from '@use-gesture/react';
|
|
|
21
21
|
|
|
22
22
|
const StyledOverlay = withClassName(
|
|
23
23
|
DialogPrimitive.Overlay,
|
|
24
|
-
'layer-components:(fixed inset-0 z-dialog-backdrop animate-fade-in animate-duration-200 bg-
|
|
24
|
+
'layer-components:(fixed inset-0 z-dialog-backdrop animate-fade-in animate-duration-200 bg-overlay [box-shadow:inset_0_30px_60px_0px_var(--color-overlay)] border-top-1 border-top-solid border-top-gray-5)',
|
|
25
25
|
'layer-components:[&[data-state=closed]]:animate-fade-out',
|
|
26
26
|
'motion-reduce:animate-none',
|
|
27
27
|
);
|
|
28
28
|
|
|
29
29
|
const StyledContent = withClassName(
|
|
30
30
|
DialogPrimitive.Content,
|
|
31
|
-
'layer-components:(z-dialog fixed shadow-xl bg-white overflow-y-auto flex flex-col
|
|
31
|
+
'layer-components:(z-dialog fixed shadow-xl-up bg-white overflow-y-auto flex flex-col)',
|
|
32
|
+
'layer-components:sm:(shadow-xl)',
|
|
32
33
|
'transform-gpu !motion-reduce:animate-none',
|
|
33
34
|
'layer-components:(left-50% top-50% translate-[-50%] w-90vw max-w-450px max-h-85vh p-6 pt-8 rounded-lg border-b-1 pt-6)',
|
|
34
35
|
'layer-components:(animate-dialog-in [&[data-state=closed]]:animate-dialog-out motion-reduce:animate-none)',
|
|
@@ -142,12 +143,12 @@ export const DialogSwipeHandle = forwardRef<
|
|
|
142
143
|
|
|
143
144
|
const contentHeight = content.clientHeight;
|
|
144
145
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
if (last && (swipeY === 1 || dy > contentHeight / 2)) {
|
|
146
|
+
const shouldClose = last && (swipeY === 1 || dy > contentHeight / 2);
|
|
147
|
+
if (shouldClose) {
|
|
148
148
|
close();
|
|
149
149
|
}
|
|
150
|
-
const gestureY = last ? 0 : -Math.max(0, dy);
|
|
150
|
+
const gestureY = last ? (shouldClose ? -1000 : 0) : -Math.max(0, dy);
|
|
151
|
+
console.log(gestureY, dy, vy, swipeY);
|
|
151
152
|
content.style.setProperty('--gesture-y', `${gestureY}px`);
|
|
152
153
|
content.style.setProperty('transition', last ? 'bottom 0.2s' : '');
|
|
153
154
|
},
|
|
@@ -227,7 +228,7 @@ export type { DialogProps } from '@radix-ui/react-dialog';
|
|
|
227
228
|
|
|
228
229
|
export const DialogActions = withClassName(
|
|
229
230
|
'div',
|
|
230
|
-
'flex justify-end sticky w-full gap-3 items-center bg-white py-
|
|
231
|
+
'flex justify-end sticky w-full gap-3 items-center bg-white py-4 translate-y-6 flex-wrap',
|
|
231
232
|
'bottom--6',
|
|
232
233
|
'sm:(bottom-0)',
|
|
233
234
|
);
|
|
@@ -1,4 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
ChangeEvent,
|
|
3
|
+
FocusEvent,
|
|
4
|
+
KeyboardEvent,
|
|
5
|
+
useCallback,
|
|
6
|
+
useEffect,
|
|
7
|
+
useRef,
|
|
8
|
+
useState,
|
|
9
|
+
} from 'react';
|
|
2
10
|
import { Input, inputClassName } from '../input.js';
|
|
3
11
|
import clsx from 'clsx';
|
|
4
12
|
import { Icon } from '../icon.js';
|
|
@@ -12,6 +20,11 @@ export interface EditableTextProps {
|
|
|
12
20
|
id?: string;
|
|
13
21
|
autoSelect?: boolean;
|
|
14
22
|
autoFocus?: boolean;
|
|
23
|
+
onFocus?: (ev: FocusEvent) => void;
|
|
24
|
+
onBlur?: (ev: FocusEvent) => void;
|
|
25
|
+
onChange?: (ev: ChangeEvent<HTMLInputElement>) => void;
|
|
26
|
+
onKeyDown?: (ev: KeyboardEvent) => void;
|
|
27
|
+
onKeyUp?: (ev: KeyboardEvent) => void;
|
|
15
28
|
}
|
|
16
29
|
|
|
17
30
|
export function EditableText({
|
|
@@ -23,21 +36,34 @@ export function EditableText({
|
|
|
23
36
|
id,
|
|
24
37
|
autoSelect,
|
|
25
38
|
autoFocus,
|
|
39
|
+
onBlur,
|
|
40
|
+
onChange,
|
|
41
|
+
onKeyDown,
|
|
26
42
|
...rest
|
|
27
43
|
}: EditableTextProps) {
|
|
28
44
|
const [editingInternal, setEditingInternal] = useState(editing || autoFocus);
|
|
29
45
|
const editingFinal = editing ?? editingInternal;
|
|
30
46
|
const setEditingFinal = onEditingChange ?? setEditingInternal;
|
|
31
47
|
|
|
32
|
-
const
|
|
48
|
+
const handleChange = useCallback(
|
|
33
49
|
(ev: ChangeEvent<HTMLInputElement>) => {
|
|
34
50
|
onValueChange(ev.target.value);
|
|
51
|
+
onChange?.(ev);
|
|
35
52
|
},
|
|
36
|
-
[onValueChange],
|
|
53
|
+
[onValueChange, onChange],
|
|
54
|
+
);
|
|
55
|
+
|
|
56
|
+
const handleKeyDown = useCallback(
|
|
57
|
+
(ev: KeyboardEvent<HTMLInputElement>) => {
|
|
58
|
+
if (ev.key === 'Enter') {
|
|
59
|
+
setEditingFinal(false);
|
|
60
|
+
}
|
|
61
|
+
onKeyDown?.(ev);
|
|
62
|
+
},
|
|
63
|
+
[setEditingFinal, onKeyDown],
|
|
37
64
|
);
|
|
38
65
|
|
|
39
66
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
40
|
-
const divRef = useRef<HTMLDivElement>(null);
|
|
41
67
|
|
|
42
68
|
useEffect(() => {
|
|
43
69
|
if (editingFinal && inputRef.current) {
|
|
@@ -47,28 +73,36 @@ export function EditableText({
|
|
|
47
73
|
}
|
|
48
74
|
}, [editingFinal, inputRef]);
|
|
49
75
|
|
|
76
|
+
const handleBlur = useCallback(
|
|
77
|
+
(ev: FocusEvent<HTMLInputElement>) => {
|
|
78
|
+
setEditingFinal(false);
|
|
79
|
+
onBlur?.(ev);
|
|
80
|
+
},
|
|
81
|
+
[setEditingFinal, onBlur],
|
|
82
|
+
);
|
|
83
|
+
|
|
50
84
|
if (editingFinal) {
|
|
51
85
|
return (
|
|
52
86
|
<Input
|
|
53
87
|
ref={inputRef}
|
|
54
88
|
value={value}
|
|
55
|
-
onChange={
|
|
56
|
-
onBlur={
|
|
89
|
+
onChange={handleChange}
|
|
90
|
+
onBlur={handleBlur}
|
|
57
91
|
className={clsx('layer-variants:font-size-inherit', className)}
|
|
58
92
|
id={id}
|
|
59
93
|
autoSelect={autoSelect}
|
|
94
|
+
onKeyDown={handleKeyDown}
|
|
60
95
|
{...rest}
|
|
61
96
|
/>
|
|
62
97
|
);
|
|
63
98
|
}
|
|
64
99
|
|
|
65
100
|
return (
|
|
66
|
-
<
|
|
67
|
-
ref={divRef}
|
|
101
|
+
<button
|
|
68
102
|
onClick={() => setEditingFinal(true)}
|
|
69
103
|
className={clsx(
|
|
70
104
|
inputClassName,
|
|
71
|
-
'layer-variants:(border-transparent bg-transparent w-auto inline-flex items-center gap-2 font-size-inherit shadow-none)',
|
|
105
|
+
'layer-variants:(border-transparent bg-transparent w-auto inline-flex items-center gap-2 font-size-inherit text-inherit shadow-none)',
|
|
72
106
|
'layer-variants:hover:(bg-gray-blend)',
|
|
73
107
|
'layer-variants:focus-visible:(outline-none bg-gray-dark-blend)',
|
|
74
108
|
'cursor-pointer',
|
|
@@ -79,6 +113,6 @@ export function EditableText({
|
|
|
79
113
|
>
|
|
80
114
|
{value}
|
|
81
115
|
<Icon name="pencil" className="stroke-gray-blend opacity-50" />
|
|
82
|
-
</
|
|
116
|
+
</button>
|
|
83
117
|
);
|
|
84
118
|
}
|
package/src/uno.preset.ts
CHANGED
|
@@ -110,6 +110,14 @@ export default function presetAglio({
|
|
|
110
110
|
xl: '0 20px 25px -5px var(--color-shadow-1), 0 10px 10px -5px var(--color-shadow-2)',
|
|
111
111
|
'xl-inset':
|
|
112
112
|
'inset 0 20px 25px -5px var(--color-shadow-1), inset 0 10px 10px -5px var(--color-shadow-2)',
|
|
113
|
+
'sm-up':
|
|
114
|
+
'0 -1px 2px 0 var(--color-shadow-2), 0 0 1px 0 var(--color-shadow-2)',
|
|
115
|
+
'md-up':
|
|
116
|
+
'0 -4px 6px -1px var(--color-shadow-1), 0 -2px 4px -1px var(--color-shadow-2)',
|
|
117
|
+
'lg-up':
|
|
118
|
+
'0 -10px 15px -3px var(--color-shadow-1), 0 -4px 6px -2px var(--color-shadow-2)',
|
|
119
|
+
'xl-up':
|
|
120
|
+
'0 -20px 25px -5px var(--color-shadow-1), 0 -10px 10px -5px var(--color-shadow-2)',
|
|
113
121
|
|
|
114
122
|
// focus outlines
|
|
115
123
|
focus: `0 0 0 3px var(--color-primary-light)`,
|
|
@@ -457,7 +465,6 @@ export default function presetAglio({
|
|
|
457
465
|
--palette-light-blend-warm: rgba(255, 250, 250, 0.8);
|
|
458
466
|
--palette-light-blend-cool: rgba(250, 255, 255, 0.8);
|
|
459
467
|
--palette-light-blend: rgba(255, 250, 250, 0.8);
|
|
460
|
-
--palette-overlay: rgba(0, 0, 0, 0.025);
|
|
461
468
|
--palette-black: #303030;
|
|
462
469
|
--palette-white: #fff;
|
|
463
470
|
--palette-light: #f8f8fb;
|
|
@@ -482,6 +489,8 @@ export default function presetAglio({
|
|
|
482
489
|
--palette-shadow-2: rgba(0, 0, 0, 0.15);
|
|
483
490
|
--palette-shadow-3: rgba(0, 0, 0, 0.3);
|
|
484
491
|
--palette-shadow-4: rgba(0, 0, 0, 0.5);
|
|
492
|
+
--palette-white-overlay: rgba(255, 255, 255, 0.4);
|
|
493
|
+
--palette-black-overlay: rgba(0, 0, 0, 0.4);
|
|
485
494
|
|
|
486
495
|
|
|
487
496
|
--z-nowPlaying: 40;
|
|
@@ -502,7 +511,6 @@ export default function presetAglio({
|
|
|
502
511
|
--color-light-blend-warm: var(--palette-light-blend-warm);
|
|
503
512
|
--color-light-blend-cool: var(--palette-light-blend-cool);
|
|
504
513
|
--color-light-blend: var(--palette-light-blend);
|
|
505
|
-
--color-overlay: var(--palette-overlay);
|
|
506
514
|
--color-black: var(--palette-black);
|
|
507
515
|
--color-white: var(--palette-white);
|
|
508
516
|
--color-wash: var(--palette-light);
|
|
@@ -520,6 +528,7 @@ export default function presetAglio({
|
|
|
520
528
|
--color-gray-dark-blend: var(--palette-gray-dark-blend);
|
|
521
529
|
--color-shadow-1: var(--palette-shadow-2);
|
|
522
530
|
--color-shadow-2: var(--palette-shadow-1);
|
|
531
|
+
--color-overlay: var(--palette-white-overlay);
|
|
523
532
|
|
|
524
533
|
|
|
525
534
|
/* DEFAULT THEME (LEMON) */
|
|
@@ -547,8 +556,7 @@ export default function presetAglio({
|
|
|
547
556
|
--color-dark-blend-cool: var(--palette-light-blend-cool);
|
|
548
557
|
--color-light-blend-warm: var(--palette-dark-blend-warm);
|
|
549
558
|
--color-light-blend-cool: var(--palette-dark-blend-cool);
|
|
550
|
-
--color-light-blend: var(--palette-
|
|
551
|
-
--color-overlay: var(--palette-overlay);
|
|
559
|
+
--color-light-blend: var(--palette-dark-blend);
|
|
552
560
|
--color-black: var(--palette-white);
|
|
553
561
|
--color-white: var(--palette-black);
|
|
554
562
|
--color-wash: var(--palette-dark);
|
|
@@ -566,6 +574,7 @@ export default function presetAglio({
|
|
|
566
574
|
--color-gray-dark-blend: var(--palette-light-gray-dark-blend);
|
|
567
575
|
--color-shadow-1: var(--palette-shadow-4);
|
|
568
576
|
--color-shadow-2: var(--palette-shadow-3);
|
|
577
|
+
--color-overlay: var(--palette-black-overlay);
|
|
569
578
|
}
|
|
570
579
|
}
|
|
571
580
|
|
|
@@ -578,7 +587,6 @@ export default function presetAglio({
|
|
|
578
587
|
--color-light-blend-warm: var(--palette-light-blend-warm);
|
|
579
588
|
--color-light-blend-cool: var(--palette-light-blend-cool);
|
|
580
589
|
--color-light-blend: var(--palette-light-blend);
|
|
581
|
-
--color-overlay: var(--palette-overlay);
|
|
582
590
|
--color-black: var(--palette-black);
|
|
583
591
|
--color-white: var(--palette-white);
|
|
584
592
|
--color-wash: var(--palette-light);
|
|
@@ -596,6 +604,7 @@ export default function presetAglio({
|
|
|
596
604
|
--color-gray-dark-blend: var(--palette-gray-dark-blend);
|
|
597
605
|
--color-shadow-1: var(--palette-shadow-2);
|
|
598
606
|
--color-shadow-2: var(--palette-shadow-1);
|
|
607
|
+
--color-overlay: var(--palette-white-overlay);
|
|
599
608
|
}
|
|
600
609
|
}
|
|
601
610
|
|
|
@@ -607,7 +616,6 @@ export default function presetAglio({
|
|
|
607
616
|
--color-light-blend-warm: var(--palette-dark-blend-warm);
|
|
608
617
|
--color-light-blend-cool: var(--palette-dark-blend-cool);
|
|
609
618
|
--color-light-blend: var(--palette-light-blend);
|
|
610
|
-
--color-overlay: var(--palette-overlay);
|
|
611
619
|
--color-black: var(--palette-white);
|
|
612
620
|
--color-white: var(--palette-black);
|
|
613
621
|
--color-wash: var(--palette-dark);
|
|
@@ -625,6 +633,7 @@ export default function presetAglio({
|
|
|
625
633
|
--color-gray-dark-blend: var(--palette-light-gray-dark-blend);
|
|
626
634
|
--color-shadow-1: var(--palette-shadow-4);
|
|
627
635
|
--color-shadow-2: var(--palette-shadow-3);
|
|
636
|
+
--color-overlay: var(--palette-black-overlay);
|
|
628
637
|
}
|
|
629
638
|
}
|
|
630
639
|
|