adjacent-ui 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -0
- package/LICENSE +21 -0
- package/README.md +41 -0
- package/dist/button/button.css +177 -0
- package/dist/button/button.d.ts +25 -0
- package/dist/button/button.d.ts.map +1 -0
- package/dist/button/button.js +11 -0
- package/dist/button/button.js.map +1 -0
- package/dist/card/card.css +126 -0
- package/dist/card/card.d.ts +18 -0
- package/dist/card/card.d.ts.map +1 -0
- package/dist/card/card.js +38 -0
- package/dist/card/card.js.map +1 -0
- package/dist/checkbox/checkbox.css +116 -0
- package/dist/checkbox/checkbox.d.ts +13 -0
- package/dist/checkbox/checkbox.d.ts.map +1 -0
- package/dist/checkbox/checkbox.js +32 -0
- package/dist/checkbox/checkbox.js.map +1 -0
- package/dist/data-table/data-table.css +238 -0
- package/dist/data-table/data-table.d.ts +47 -0
- package/dist/data-table/data-table.d.ts.map +1 -0
- package/dist/data-table/data-table.js +58 -0
- package/dist/data-table/data-table.js.map +1 -0
- package/dist/divider/divider.css +35 -0
- package/dist/divider/divider.d.ts +12 -0
- package/dist/divider/divider.d.ts.map +1 -0
- package/dist/divider/divider.js +7 -0
- package/dist/divider/divider.js.map +1 -0
- package/dist/floating-action-button/floating-action-button.css +132 -0
- package/dist/floating-action-button/floating-action-button.d.ts +15 -0
- package/dist/floating-action-button/floating-action-button.d.ts.map +1 -0
- package/dist/floating-action-button/floating-action-button.js +8 -0
- package/dist/floating-action-button/floating-action-button.js.map +1 -0
- package/dist/index.d.ts +20 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +20 -0
- package/dist/index.js.map +1 -0
- package/dist/list/list.css +181 -0
- package/dist/list/list.d.ts +56 -0
- package/dist/list/list.d.ts.map +1 -0
- package/dist/list/list.js +33 -0
- package/dist/list/list.js.map +1 -0
- package/dist/menu/menu.css +170 -0
- package/dist/menu/menu.d.ts +70 -0
- package/dist/menu/menu.d.ts.map +1 -0
- package/dist/menu/menu.js +69 -0
- package/dist/menu/menu.js.map +1 -0
- package/dist/navigation/header/header.css +182 -0
- package/dist/navigation/header/header.d.ts +20 -0
- package/dist/navigation/header/header.d.ts.map +1 -0
- package/dist/navigation/header/header.js +23 -0
- package/dist/navigation/header/header.js.map +1 -0
- package/dist/navigation/index.d.ts +5 -0
- package/dist/navigation/index.d.ts.map +1 -0
- package/dist/navigation/index.js +5 -0
- package/dist/navigation/index.js.map +1 -0
- package/dist/navigation/link/link.d.ts +5 -0
- package/dist/navigation/link/link.d.ts.map +1 -0
- package/dist/navigation/link/link.js +6 -0
- package/dist/navigation/link/link.js.map +1 -0
- package/dist/navigation/shell/shell.css +21 -0
- package/dist/navigation/shell/shell.d.ts +22 -0
- package/dist/navigation/shell/shell.d.ts.map +1 -0
- package/dist/navigation/shell/shell.js +15 -0
- package/dist/navigation/shell/shell.js.map +1 -0
- package/dist/navigation/tabs/tabs.css +390 -0
- package/dist/navigation/tabs/tabs.d.ts +37 -0
- package/dist/navigation/tabs/tabs.d.ts.map +1 -0
- package/dist/navigation/tabs/tabs.js +74 -0
- package/dist/navigation/tabs/tabs.js.map +1 -0
- package/dist/page/page.css +15 -0
- package/dist/page/page.d.ts +32 -0
- package/dist/page/page.d.ts.map +1 -0
- package/dist/page/page.js +10 -0
- package/dist/page/page.js.map +1 -0
- package/dist/radio/radio.css +108 -0
- package/dist/radio/radio.d.ts +29 -0
- package/dist/radio/radio.d.ts.map +1 -0
- package/dist/radio/radio.js +23 -0
- package/dist/radio/radio.js.map +1 -0
- package/dist/runtime/use-display-mode.d.ts +9 -0
- package/dist/runtime/use-display-mode.d.ts.map +1 -0
- package/dist/runtime/use-display-mode.js +33 -0
- package/dist/runtime/use-display-mode.js.map +1 -0
- package/dist/runtime/use-keyboard.d.ts +8 -0
- package/dist/runtime/use-keyboard.d.ts.map +1 -0
- package/dist/runtime/use-keyboard.js +34 -0
- package/dist/runtime/use-keyboard.js.map +1 -0
- package/dist/runtime/use-viewport-tier.d.ts +10 -0
- package/dist/runtime/use-viewport-tier.d.ts.map +1 -0
- package/dist/runtime/use-viewport-tier.js +24 -0
- package/dist/runtime/use-viewport-tier.js.map +1 -0
- package/dist/snackbar/snackbar.css +95 -0
- package/dist/snackbar/snackbar.d.ts +15 -0
- package/dist/snackbar/snackbar.d.ts.map +1 -0
- package/dist/snackbar/snackbar.js +36 -0
- package/dist/snackbar/snackbar.js.map +1 -0
- package/dist/switch/switch.css +164 -0
- package/dist/switch/switch.d.ts +11 -0
- package/dist/switch/switch.d.ts.map +1 -0
- package/dist/switch/switch.js +11 -0
- package/dist/switch/switch.js.map +1 -0
- package/dist/tabs/tabs.css +165 -0
- package/dist/tabs/tabs.d.ts +25 -0
- package/dist/tabs/tabs.d.ts.map +1 -0
- package/dist/tabs/tabs.js +81 -0
- package/dist/tabs/tabs.js.map +1 -0
- package/dist/text/text.css +91 -0
- package/dist/text/text.d.ts +12 -0
- package/dist/text/text.d.ts.map +1 -0
- package/dist/text/text.js +17 -0
- package/dist/text/text.js.map +1 -0
- package/dist/text-area/text-area.css +11 -0
- package/dist/text-area/text-area.d.ts +13 -0
- package/dist/text-area/text-area.d.ts.map +1 -0
- package/dist/text-area/text-area.js +35 -0
- package/dist/text-area/text-area.js.map +1 -0
- package/dist/text-field/text-field.css +154 -0
- package/dist/text-field/text-field.d.ts +18 -0
- package/dist/text-field/text-field.d.ts.map +1 -0
- package/dist/text-field/text-field.js +32 -0
- package/dist/text-field/text-field.js.map +1 -0
- package/package.json +78 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/switch/switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3E,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;IAC9E,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnE,QAAQ,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC;CACpC;AAED,wBAAgB,MAAM,CAAC,EACrB,WAAW,EACX,SAAS,EACT,KAAK,EACL,QAAQ,EACR,eAAe,EACf,aAAa,EACb,GAAG,KAAK,EACT,EAAE,WAAW,+BAwBb"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import "./switch.css";
|
|
4
|
+
export function Switch({ checkedIcon, className, label, onChange, onCheckedChange, uncheckedIcon, ...props }) {
|
|
5
|
+
const classes = ["adj-switch", className].filter(Boolean).join(" ");
|
|
6
|
+
return (_jsxs("label", { className: classes, "data-labeled": String(label !== undefined), children: [_jsx("input", { className: "adj-switch__input", onChange: (event) => {
|
|
7
|
+
onChange?.(event);
|
|
8
|
+
onCheckedChange?.(event.currentTarget.checked);
|
|
9
|
+
}, role: "switch", type: "checkbox", ...props }), _jsx("span", { "aria-hidden": "true", className: "adj-switch__track", children: _jsxs("span", { className: "adj-switch__handle", children: [_jsx("span", { className: "adj-switch__unchecked-icon", children: uncheckedIcon }), _jsx("span", { className: "adj-switch__checked-icon", children: checkedIcon })] }) }), label !== undefined ? _jsx("span", { className: "adj-switch__label", children: label }) : null] }));
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=switch.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../src/switch/switch.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAIb,OAAO,cAAc,CAAC;AAWtB,MAAM,UAAU,MAAM,CAAC,EACrB,WAAW,EACX,SAAS,EACT,KAAK,EACL,QAAQ,EACR,eAAe,EACf,aAAa,EACb,GAAG,KAAK,EACI;IACZ,MAAM,OAAO,GAAG,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEpE,OAAO,CACL,iBAAO,SAAS,EAAE,OAAO,kBAAgB,MAAM,CAAC,KAAK,KAAK,SAAS,CAAC,aAClE,gBACE,SAAS,EAAC,mBAAmB,EAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAClB,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;oBAClB,eAAe,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;gBACjD,CAAC,EACD,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,KACX,KAAK,GACT,EACF,8BAAkB,MAAM,EAAC,SAAS,EAAC,mBAAmB,YACpD,gBAAM,SAAS,EAAC,oBAAoB,aAClC,eAAM,SAAS,EAAC,4BAA4B,YAAE,aAAa,GAAQ,EACnE,eAAM,SAAS,EAAC,0BAA0B,YAAE,WAAW,GAAQ,IAC1D,GACF,EACN,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,mBAAmB,YAAE,KAAK,GAAQ,CAAC,CAAC,CAAC,IAAI,IAC1E,CACT,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
.adj-tabs-root {
|
|
3
|
+
width: 100%;
|
|
4
|
+
max-width: 100%;
|
|
5
|
+
min-width: 0;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.adj-tabs-root[data-mode="scrollable"] {
|
|
9
|
+
contain: inline-size;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.adj-tabs {
|
|
13
|
+
display: flex;
|
|
14
|
+
width: 100%;
|
|
15
|
+
max-width: 100%;
|
|
16
|
+
min-width: 0;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
color: var(--adj-tabs-color, var(--muted-foreground, CanvasText));
|
|
19
|
+
background: var(--adj-tabs-background, var(--background, Canvas));
|
|
20
|
+
border-block-end: 1px solid var(--adj-tabs-divider-color, var(--border, color-mix(in srgb, CanvasText 18%, transparent)));
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.adj-tabs-root[data-mode="scrollable"] .adj-tabs {
|
|
24
|
+
justify-content: flex-start;
|
|
25
|
+
overflow-x: auto;
|
|
26
|
+
overflow-y: hidden;
|
|
27
|
+
overscroll-behavior-inline: contain;
|
|
28
|
+
scroll-snap-type: inline proximity;
|
|
29
|
+
scrollbar-width: none;
|
|
30
|
+
-webkit-overflow-scrolling: touch;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.adj-tabs-root[data-mode="scrollable"] .adj-tabs::-webkit-scrollbar {
|
|
34
|
+
display: none;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.adj-tab {
|
|
38
|
+
position: relative;
|
|
39
|
+
display: flex;
|
|
40
|
+
gap: 0.5rem;
|
|
41
|
+
align-items: center;
|
|
42
|
+
justify-content: center;
|
|
43
|
+
box-sizing: border-box;
|
|
44
|
+
min-width: 4.5rem;
|
|
45
|
+
max-width: 16.5rem;
|
|
46
|
+
min-height: 3rem;
|
|
47
|
+
padding-inline: 0.75rem;
|
|
48
|
+
color: inherit;
|
|
49
|
+
font: inherit;
|
|
50
|
+
font-size: 0.875rem;
|
|
51
|
+
font-weight: 500;
|
|
52
|
+
white-space: nowrap;
|
|
53
|
+
appearance: none;
|
|
54
|
+
cursor: pointer;
|
|
55
|
+
background: transparent;
|
|
56
|
+
border: 0;
|
|
57
|
+
border-radius: var(--radius-lg, var(--radius, 0.625rem));
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.adj-tabs-root[data-mode="fixed"] .adj-tabs > .adj-tab {
|
|
61
|
+
flex: 1 1 0;
|
|
62
|
+
max-width: none;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.adj-tabs-root[data-mode="scrollable"] .adj-tabs > .adj-tab {
|
|
66
|
+
flex: 0 0 auto;
|
|
67
|
+
max-width: none;
|
|
68
|
+
padding-inline: 1.5rem;
|
|
69
|
+
scroll-snap-align: center;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.adj-tab:has(.adj-tab__icon) {
|
|
73
|
+
min-height: 4.5rem;
|
|
74
|
+
flex-direction: column;
|
|
75
|
+
gap: 0.25rem;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.adj-tab[data-selected="true"] {
|
|
79
|
+
color: var(--adj-tabs-active-color, var(--primary, CanvasText));
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.adj-tab::after {
|
|
83
|
+
position: absolute;
|
|
84
|
+
inset-block-end: 0;
|
|
85
|
+
inset-inline-start: 50%;
|
|
86
|
+
width: 0;
|
|
87
|
+
height: 2px;
|
|
88
|
+
content: "";
|
|
89
|
+
background: var(--adj-tabs-indicator-color, var(--primary, CanvasText));
|
|
90
|
+
border-radius:
|
|
91
|
+
var(--radius-sm, max(0px, calc(var(--radius, 0.625rem) - 4px)))
|
|
92
|
+
var(--radius-sm, max(0px, calc(var(--radius, 0.625rem) - 4px))) 0 0;
|
|
93
|
+
transition:
|
|
94
|
+
width 200ms ease,
|
|
95
|
+
inset-inline-start 200ms ease;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.adj-tab[data-selected="true"]::after {
|
|
99
|
+
inset-inline-start: calc(50% - 0.75rem);
|
|
100
|
+
width: 1.5rem;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.adj-tabs-root[data-variant="secondary"] .adj-tab[data-selected="true"]::after {
|
|
104
|
+
inset-inline-start: 0;
|
|
105
|
+
width: 100%;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.adj-tab:hover:not(:disabled) {
|
|
109
|
+
background: color-mix(in srgb, currentColor 8%, transparent);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.adj-tab:focus-visible {
|
|
113
|
+
outline: 2px solid var(--ring, currentColor);
|
|
114
|
+
outline-offset: -2px;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.adj-tab:disabled {
|
|
118
|
+
cursor: default;
|
|
119
|
+
opacity: 0.38;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.adj-tab__icon {
|
|
123
|
+
display: grid;
|
|
124
|
+
width: 1.5rem;
|
|
125
|
+
height: 1.5rem;
|
|
126
|
+
place-items: center;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.adj-tab__icon > svg {
|
|
130
|
+
width: 1.5rem;
|
|
131
|
+
height: 1.5rem;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.adj-tab__badge {
|
|
135
|
+
display: grid;
|
|
136
|
+
min-width: 1rem;
|
|
137
|
+
height: 1rem;
|
|
138
|
+
padding-inline: 0.25rem;
|
|
139
|
+
color: var(--adj-tabs-badge-color, var(--background, Canvas));
|
|
140
|
+
font-size: 0.625rem;
|
|
141
|
+
line-height: 1;
|
|
142
|
+
background: var(--adj-tabs-badge-background, var(--foreground, CanvasText));
|
|
143
|
+
border-radius: var(--radius-lg, var(--radius, 0.625rem));
|
|
144
|
+
place-items: center;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.adj-tab-panel {
|
|
148
|
+
outline: none;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.adj-tab-panel:focus-visible {
|
|
152
|
+
outline: 2px solid var(--ring, currentColor);
|
|
153
|
+
outline-offset: -2px;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
@media (prefers-reduced-motion: reduce) {
|
|
157
|
+
.adj-tabs-root[data-mode="scrollable"] .adj-tabs {
|
|
158
|
+
scroll-behavior: auto;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.adj-tab::after {
|
|
162
|
+
transition: none;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
|
|
2
|
+
import "./tabs.css";
|
|
3
|
+
export type TabsMode = "fixed" | "scrollable";
|
|
4
|
+
export type TabsVariant = "primary" | "secondary";
|
|
5
|
+
export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
|
|
6
|
+
readonly defaultValue?: string;
|
|
7
|
+
readonly mode?: TabsMode;
|
|
8
|
+
readonly onValueChange?: (value: string) => void;
|
|
9
|
+
readonly value?: string;
|
|
10
|
+
readonly variant?: TabsVariant;
|
|
11
|
+
}
|
|
12
|
+
export declare function Tabs({ children, className, defaultValue, mode, onValueChange, value, variant, ...props }: TabsProps): import("react").JSX.Element;
|
|
13
|
+
export type TabListProps = HTMLAttributes<HTMLDivElement>;
|
|
14
|
+
export declare function TabList({ className, onKeyDown, ...props }: TabListProps): import("react").JSX.Element;
|
|
15
|
+
export interface TabProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
|
|
16
|
+
readonly badge?: ReactNode;
|
|
17
|
+
readonly icon?: ReactNode;
|
|
18
|
+
readonly value: string;
|
|
19
|
+
}
|
|
20
|
+
export declare function Tab({ badge, children, className, disabled, icon, onClick, value, ...props }: TabProps): import("react").JSX.Element;
|
|
21
|
+
export interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
|
|
22
|
+
readonly value: string;
|
|
23
|
+
}
|
|
24
|
+
export declare function TabPanel({ className, value, ...props }: TabPanelProps): import("react").JSX.Element;
|
|
25
|
+
//# sourceMappingURL=tabs.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/tabs/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOL,KAAK,oBAAoB,EACzB,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,YAAY,CAAC;AAEpB,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAC;AAC9C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,WAAW,CAAC;AASlD,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACjF,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;IACzB,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC;CAChC;AAED,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,YAAiB,EACjB,IAAc,EACd,aAAa,EACb,KAAK,EACL,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,SAAS,+BA6CX;AAED,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE1D,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,+BAoCvE;AAED,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IACtF,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,GAAG,CAAC,EAClB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,KAAK,EACL,GAAG,KAAK,EACT,EAAE,QAAQ,+BA6BV;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAqBrE"}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Activity, createContext, useContext, useEffect, useRef, useState, } from "react";
|
|
4
|
+
import "./tabs.css";
|
|
5
|
+
const TabsContext = createContext(null);
|
|
6
|
+
export function Tabs({ children, className, defaultValue = "", mode = "fixed", onValueChange, value, variant = "primary", ...props }) {
|
|
7
|
+
const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
|
|
8
|
+
const rootRef = useRef(null);
|
|
9
|
+
const selectedValue = value ?? uncontrolledValue;
|
|
10
|
+
const classes = ["adj-tabs-root", className].filter(Boolean).join(" ");
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
if (mode !== "scrollable")
|
|
13
|
+
return;
|
|
14
|
+
const tabList = rootRef.current?.querySelector(':scope > [role="tablist"]');
|
|
15
|
+
const selectedTab = tabList?.querySelector('[role="tab"][aria-selected="true"]');
|
|
16
|
+
selectedTab?.scrollIntoView({
|
|
17
|
+
behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches
|
|
18
|
+
? "auto"
|
|
19
|
+
: "smooth",
|
|
20
|
+
block: "nearest",
|
|
21
|
+
inline: "nearest",
|
|
22
|
+
});
|
|
23
|
+
}, [mode, selectedValue]);
|
|
24
|
+
function select(nextValue) {
|
|
25
|
+
if (value === undefined) {
|
|
26
|
+
setUncontrolledValue(nextValue);
|
|
27
|
+
}
|
|
28
|
+
onValueChange?.(nextValue);
|
|
29
|
+
}
|
|
30
|
+
return (_jsx(TabsContext, { value: { select, selectedValue }, children: _jsx("div", { className: classes, "data-mode": mode, "data-variant": variant, ref: rootRef, ...props, children: children }) }));
|
|
31
|
+
}
|
|
32
|
+
export function TabList({ className, onKeyDown, ...props }) {
|
|
33
|
+
const classes = ["adj-tabs", className].filter(Boolean).join(" ");
|
|
34
|
+
function handleKeyDown(event) {
|
|
35
|
+
onKeyDown?.(event);
|
|
36
|
+
if (event.defaultPrevented)
|
|
37
|
+
return;
|
|
38
|
+
const tabs = Array.from(event.currentTarget.querySelectorAll('[role="tab"]:not(:disabled)'));
|
|
39
|
+
const currentIndex = tabs.indexOf(document.activeElement);
|
|
40
|
+
if (currentIndex < 0 || tabs.length === 0)
|
|
41
|
+
return;
|
|
42
|
+
let nextIndex;
|
|
43
|
+
if (event.key === "ArrowRight")
|
|
44
|
+
nextIndex = (currentIndex + 1) % tabs.length;
|
|
45
|
+
if (event.key === "ArrowLeft")
|
|
46
|
+
nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
|
|
47
|
+
if (event.key === "Home")
|
|
48
|
+
nextIndex = 0;
|
|
49
|
+
if (event.key === "End")
|
|
50
|
+
nextIndex = tabs.length - 1;
|
|
51
|
+
if (nextIndex === undefined)
|
|
52
|
+
return;
|
|
53
|
+
event.preventDefault();
|
|
54
|
+
tabs[nextIndex]?.focus();
|
|
55
|
+
tabs[nextIndex]?.click();
|
|
56
|
+
}
|
|
57
|
+
return (_jsx("div", { "aria-orientation": "horizontal", className: classes, onKeyDown: handleKeyDown, role: "tablist", ...props }));
|
|
58
|
+
}
|
|
59
|
+
export function Tab({ badge, children, className, disabled, icon, onClick, value, ...props }) {
|
|
60
|
+
const context = useContext(TabsContext);
|
|
61
|
+
if (!context) {
|
|
62
|
+
throw new Error("Tab must be rendered inside Tabs.");
|
|
63
|
+
}
|
|
64
|
+
const selected = context.selectedValue === value;
|
|
65
|
+
const classes = ["adj-tab", className].filter(Boolean).join(" ");
|
|
66
|
+
return (_jsxs("button", { "aria-selected": selected, className: classes, "data-selected": String(selected), disabled: disabled, onClick: (event) => {
|
|
67
|
+
onClick?.(event);
|
|
68
|
+
if (!event.defaultPrevented)
|
|
69
|
+
context.select(value);
|
|
70
|
+
}, role: "tab", tabIndex: selected ? 0 : -1, type: "button", ...props, children: [icon !== undefined ? _jsx("span", { className: "adj-tab__icon", children: icon }) : null, _jsx("span", { className: "adj-tab__label", children: children }), badge !== undefined ? _jsx("span", { className: "adj-tab__badge", children: badge }) : null] }));
|
|
71
|
+
}
|
|
72
|
+
export function TabPanel({ className, value, ...props }) {
|
|
73
|
+
const context = useContext(TabsContext);
|
|
74
|
+
if (!context) {
|
|
75
|
+
throw new Error("TabPanel must be rendered inside Tabs.");
|
|
76
|
+
}
|
|
77
|
+
const selected = context.selectedValue === value;
|
|
78
|
+
const classes = ["adj-tab-panel", className].filter(Boolean).join(" ");
|
|
79
|
+
return (_jsx(Activity, { mode: selected ? "visible" : "hidden", children: _jsx("div", { "aria-hidden": !selected, className: classes, "data-selected": String(selected), role: "tabpanel", tabIndex: 0, ...props }) }));
|
|
80
|
+
}
|
|
81
|
+
//# sourceMappingURL=tabs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/tabs/tabs.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
.adj-text {
|
|
3
|
+
margin: 0;
|
|
4
|
+
color: inherit;
|
|
5
|
+
font-family: inherit;
|
|
6
|
+
font-size: var(--adj-text-size);
|
|
7
|
+
font-weight: var(--adj-text-weight, 400);
|
|
8
|
+
letter-spacing: var(--adj-text-tracking, normal);
|
|
9
|
+
line-height: var(--adj-text-line-height);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.adj-text[data-variant="display-large"] {
|
|
13
|
+
--adj-text-size: var(--adj-text-display-large-size, 3.5625rem);
|
|
14
|
+
--adj-text-line-height: var(--adj-text-display-large-line-height, 4rem);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.adj-text[data-variant="display-medium"] {
|
|
18
|
+
--adj-text-size: var(--adj-text-display-medium-size, 2.8125rem);
|
|
19
|
+
--adj-text-line-height: var(--adj-text-display-medium-line-height, 3.25rem);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.adj-text[data-variant="display-small"] {
|
|
23
|
+
--adj-text-size: var(--adj-text-display-small-size, 2.25rem);
|
|
24
|
+
--adj-text-line-height: var(--adj-text-display-small-line-height, 2.75rem);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.adj-text[data-variant="headline-large"] {
|
|
28
|
+
--adj-text-size: var(--adj-text-headline-large-size, 2rem);
|
|
29
|
+
--adj-text-line-height: var(--adj-text-headline-large-line-height, 2.5rem);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.adj-text[data-variant="headline-medium"] {
|
|
33
|
+
--adj-text-size: var(--adj-text-headline-medium-size, 1.75rem);
|
|
34
|
+
--adj-text-line-height: var(--adj-text-headline-medium-line-height, 2.25rem);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.adj-text[data-variant="headline-small"] {
|
|
38
|
+
--adj-text-size: var(--adj-text-headline-small-size, 1.5rem);
|
|
39
|
+
--adj-text-line-height: var(--adj-text-headline-small-line-height, 2rem);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.adj-text[data-variant="title-large"] {
|
|
43
|
+
--adj-text-size: var(--adj-text-title-large-size, 1.375rem);
|
|
44
|
+
--adj-text-line-height: var(--adj-text-title-large-line-height, 1.75rem);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.adj-text[data-variant="title-medium"] {
|
|
48
|
+
--adj-text-size: var(--adj-text-title-medium-size, 1rem);
|
|
49
|
+
--adj-text-line-height: var(--adj-text-title-medium-line-height, 1.5rem);
|
|
50
|
+
--adj-text-weight: var(--adj-text-title-medium-weight, 500);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.adj-text[data-variant="title-small"] {
|
|
54
|
+
--adj-text-size: var(--adj-text-title-small-size, 0.875rem);
|
|
55
|
+
--adj-text-line-height: var(--adj-text-title-small-line-height, 1.25rem);
|
|
56
|
+
--adj-text-weight: var(--adj-text-title-small-weight, 500);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.adj-text[data-variant="body-large"] {
|
|
60
|
+
--adj-text-size: var(--adj-text-body-large-size, 1rem);
|
|
61
|
+
--adj-text-line-height: var(--adj-text-body-large-line-height, 1.5rem);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.adj-text[data-variant="body-medium"] {
|
|
65
|
+
--adj-text-size: var(--adj-text-body-medium-size, 0.875rem);
|
|
66
|
+
--adj-text-line-height: var(--adj-text-body-medium-line-height, 1.25rem);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.adj-text[data-variant="body-small"] {
|
|
70
|
+
--adj-text-size: var(--adj-text-body-small-size, 0.75rem);
|
|
71
|
+
--adj-text-line-height: var(--adj-text-body-small-line-height, 1rem);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.adj-text[data-variant="label-large"] {
|
|
75
|
+
--adj-text-size: var(--adj-text-label-large-size, 0.875rem);
|
|
76
|
+
--adj-text-line-height: var(--adj-text-label-large-line-height, 1.25rem);
|
|
77
|
+
--adj-text-weight: var(--adj-text-label-large-weight, 500);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.adj-text[data-variant="label-medium"] {
|
|
81
|
+
--adj-text-size: var(--adj-text-label-medium-size, 0.75rem);
|
|
82
|
+
--adj-text-line-height: var(--adj-text-label-medium-line-height, 1rem);
|
|
83
|
+
--adj-text-weight: var(--adj-text-label-medium-weight, 500);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.adj-text[data-variant="label-small"] {
|
|
87
|
+
--adj-text-size: var(--adj-text-label-small-size, 0.6875rem);
|
|
88
|
+
--adj-text-line-height: var(--adj-text-label-small-line-height, 1rem);
|
|
89
|
+
--adj-text-weight: var(--adj-text-label-small-weight, 500);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { type ComponentPropsWithoutRef, type CSSProperties, type ElementType } from "react";
|
|
2
|
+
import "./text.css";
|
|
3
|
+
export type TextVariant = "display-large" | "display-medium" | "display-small" | "headline-large" | "headline-medium" | "headline-small" | "title-large" | "title-medium" | "title-small" | "body-large" | "body-medium" | "body-small" | "label-large" | "label-medium" | "label-small";
|
|
4
|
+
type TextOwnProps<TElement extends ElementType> = {
|
|
5
|
+
readonly as?: TElement;
|
|
6
|
+
readonly lineHeight?: CSSProperties["lineHeight"];
|
|
7
|
+
readonly variant?: TextVariant;
|
|
8
|
+
};
|
|
9
|
+
export type TextProps<TElement extends ElementType = "span"> = TextOwnProps<TElement> & Omit<ComponentPropsWithoutRef<TElement>, keyof TextOwnProps<TElement>>;
|
|
10
|
+
export declare function Text<TElement extends ElementType = "span">({ as, className, lineHeight, style, variant, ...props }: TextProps<TElement>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
|
|
11
|
+
export {};
|
|
12
|
+
//# sourceMappingURL=text.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/text/text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,wBAAwB,EAC7B,KAAK,aAAa,EAClB,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,YAAY,CAAC;AAEpB,MAAM,MAAM,WAAW,GACnB,eAAe,GACf,gBAAgB,GAChB,eAAe,GACf,gBAAgB,GAChB,iBAAiB,GACjB,gBAAgB,GAChB,aAAa,GACb,cAAc,GACd,aAAa,GACb,YAAY,GACZ,aAAa,GACb,YAAY,GACZ,aAAa,GACb,cAAc,GACd,aAAa,CAAC;AAElB,KAAK,YAAY,CAAC,QAAQ,SAAS,WAAW,IAAI;IAChD,QAAQ,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC;IACvB,QAAQ,CAAC,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IAClD,QAAQ,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,SAAS,CAAC,QAAQ,SAAS,WAAW,GAAG,MAAM,IACzD,YAAY,CAAC,QAAQ,CAAC,GACtB,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,MAAM,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;AAEzE,wBAAgB,IAAI,CAAC,QAAQ,SAAS,WAAW,GAAG,MAAM,EAAE,EAC1D,EAAE,EACF,SAAS,EACT,UAAU,EACV,KAAK,EACL,OAAuB,EACvB,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,QAAQ,CAAC,0FAcrB"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { createElement, } from "react";
|
|
2
|
+
import "./text.css";
|
|
3
|
+
export function Text({ as, className, lineHeight, style, variant = "body-medium", ...props }) {
|
|
4
|
+
const element = as ?? "span";
|
|
5
|
+
const classes = ["adj-text", className].filter(Boolean).join(" ");
|
|
6
|
+
const resolvedStyle = {
|
|
7
|
+
...style,
|
|
8
|
+
...(lineHeight === undefined ? null : { lineHeight }),
|
|
9
|
+
};
|
|
10
|
+
return createElement(element, {
|
|
11
|
+
...props,
|
|
12
|
+
className: classes,
|
|
13
|
+
"data-variant": variant,
|
|
14
|
+
style: resolvedStyle,
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
//# sourceMappingURL=text.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"text.js","sourceRoot":"","sources":["../../src/text/text.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,GAId,MAAM,OAAO,CAAC;AAEf,OAAO,YAAY,CAAC;AA6BpB,MAAM,UAAU,IAAI,CAAwC,EAC1D,EAAE,EACF,SAAS,EACT,UAAU,EACV,KAAK,EACL,OAAO,GAAG,aAAa,EACvB,GAAG,KAAK,EACY;IACpB,MAAM,OAAO,GAAG,EAAE,IAAI,MAAM,CAAC;IAC7B,MAAM,OAAO,GAAG,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAClE,MAAM,aAAa,GAAG;QACpB,GAAG,KAAK;QACR,GAAG,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC;KACrC,CAAC;IAEnB,OAAO,aAAa,CAAC,OAAO,EAAE;QAC5B,GAAG,KAAK;QACR,SAAS,EAAE,OAAO;QAClB,cAAc,EAAE,OAAO;QACvB,KAAK,EAAE,aAAa;KACrB,CAAC,CAAC;AACL,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { type ReactNode, type TextareaHTMLAttributes } from "react";
|
|
2
|
+
import type { TextFieldVariant } from "../text-field/text-field.js";
|
|
3
|
+
import "../text-field/text-field.css";
|
|
4
|
+
import "./text-area.css";
|
|
5
|
+
export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
6
|
+
readonly error?: ReactNode;
|
|
7
|
+
readonly label: ReactNode;
|
|
8
|
+
readonly showCounter?: boolean;
|
|
9
|
+
readonly supportingText?: ReactNode;
|
|
10
|
+
readonly variant?: TextFieldVariant;
|
|
11
|
+
}
|
|
12
|
+
export declare function TextArea({ "aria-describedby": ariaDescribedBy, className, defaultValue, disabled, error, id, label, maxLength, onChange, readOnly, required, rows, showCounter, supportingText, value, variant, ...props }: TextAreaProps): import("react").JSX.Element;
|
|
13
|
+
//# sourceMappingURL=text-area.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../src/text-area/text-area.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,sBAAsB,EAC5B,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAEpE,OAAO,8BAA8B,CAAC;AACtC,OAAO,iBAAiB,CAAC;AAEzB,MAAM,WAAW,aACf,SAAQ,sBAAsB,CAAC,mBAAmB,CAAC;IACnD,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IACpC,QAAQ,CAAC,OAAO,CAAC,EAAE,gBAAgB,CAAC;CACrC;AAOD,wBAAgB,QAAQ,CAAC,EACvB,kBAAkB,EAAE,eAAe,EACnC,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,EAAE,EACF,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAQ,EACR,WAAmB,EACnB,cAAc,EACd,KAAK,EACL,OAAoB,EACpB,GAAG,KAAK,EACT,EAAE,aAAa,+BA+Ef"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useId, useState, } from "react";
|
|
4
|
+
import { Text } from "../text/text.js";
|
|
5
|
+
import "../text-field/text-field.css";
|
|
6
|
+
import "./text-area.css";
|
|
7
|
+
function valueLength(value) {
|
|
8
|
+
if (value === undefined || value === null)
|
|
9
|
+
return 0;
|
|
10
|
+
return String(value).length;
|
|
11
|
+
}
|
|
12
|
+
export function TextArea({ "aria-describedby": ariaDescribedBy, className, defaultValue, disabled, error, id, label, maxLength, onChange, readOnly, required, rows = 4, showCounter = false, supportingText, value, variant = "outlined", ...props }) {
|
|
13
|
+
const generatedId = useId();
|
|
14
|
+
const inputId = id ?? `adj-text-area-${generatedId}`;
|
|
15
|
+
const supportingId = `${inputId}-supporting`;
|
|
16
|
+
const [uncontrolledLength, setUncontrolledLength] = useState(valueLength(defaultValue));
|
|
17
|
+
const controlled = value !== undefined;
|
|
18
|
+
const currentLength = controlled ? valueLength(value) : uncontrolledLength;
|
|
19
|
+
const hasError = error !== undefined && error !== null && error !== false;
|
|
20
|
+
const supportingContent = hasError ? error : supportingText;
|
|
21
|
+
const hasSupportingRow = supportingContent !== undefined || showCounter;
|
|
22
|
+
const describedBy = [ariaDescribedBy, hasSupportingRow ? supportingId : undefined]
|
|
23
|
+
.filter(Boolean)
|
|
24
|
+
.join(" ") || undefined;
|
|
25
|
+
const classes = ["adj-text-field", "adj-text-area", className]
|
|
26
|
+
.filter(Boolean)
|
|
27
|
+
.join(" ");
|
|
28
|
+
function handleChange(event) {
|
|
29
|
+
if (!controlled)
|
|
30
|
+
setUncontrolledLength(event.currentTarget.value.length);
|
|
31
|
+
onChange?.(event);
|
|
32
|
+
}
|
|
33
|
+
return (_jsxs("div", { className: classes, "data-disabled": disabled ? "true" : "false", "data-error": hasError ? "true" : "false", "data-read-only": readOnly ? "true" : "false", "data-variant": variant, children: [_jsxs(Text, { as: "label", className: "adj-text-field__label", htmlFor: inputId, variant: "label-large", children: [label, required ? _jsx("span", { "aria-hidden": "true", children: " *" }) : null] }), _jsx("div", { className: "adj-text-field__container", children: _jsx("textarea", { "aria-describedby": describedBy, "aria-invalid": hasError || undefined, className: "adj-text-field__input adj-text-area__input", defaultValue: defaultValue, disabled: disabled, id: inputId, maxLength: maxLength, onChange: handleChange, readOnly: readOnly, required: required, rows: rows, value: value, ...props }) }), hasSupportingRow ? (_jsxs("div", { className: "adj-text-field__supporting", id: supportingId, children: [_jsx(Text, { "aria-live": hasError ? "polite" : undefined, className: "adj-text-field__supporting-text", variant: "body-small", children: supportingContent }), showCounter ? (_jsxs(Text, { className: "adj-text-field__counter", variant: "body-small", children: [currentLength, maxLength === undefined ? null : `/${maxLength}`] })) : null] })) : null] }));
|
|
34
|
+
}
|
|
35
|
+
//# sourceMappingURL=text-area.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"text-area.js","sourceRoot":"","sources":["../../src/text-area/text-area.tsx"],"names":[],"mappings":"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"}
|