@plexui/ui 0.13.1 → 0.14.1
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/es/components/ButtonGroup/ButtonGroup.js +6 -0
- package/dist/es/components/ButtonGroup/ButtonGroup.js.map +1 -1
- package/dist/es/components/ButtonGroup/ButtonGroup.module.css +97 -11
- package/dist/es/components/CodeBlock/CodeBlock.module.css +6 -6
- package/dist/es/components/Icon/svg/AppStoreSquare.js +1 -1
- package/dist/es/components/Icon/svg/AppStoreSquare.js.map +1 -1
- package/dist/es/components/Icon/svg/Education.js +2 -2
- package/dist/es/components/Icon/svg/Education.js.map +1 -1
- package/dist/es/components/Icon/svg/HapticFeedback.js +1 -1
- package/dist/es/components/Icon/svg/HapticFeedback.js.map +1 -1
- package/dist/es/components/Icon/svg/ThumbMixed.js +2 -2
- package/dist/es/components/Icon/svg/ThumbMixed.js.map +1 -1
- package/dist/es/components/Input/Input.js +5 -2
- package/dist/es/components/Input/Input.js.map +1 -1
- package/dist/es/components/Input/Input.module.css +87 -2
- package/dist/es/styles/variables-components.css +6 -0
- package/dist/types/components/ButtonGroup/ButtonGroup.d.ts +12 -0
- package/dist/types/components/Input/Input.d.ts +17 -2
- package/package.json +4 -1
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import clsx from "clsx";
|
|
4
|
+
import { Slot } from "radix-ui";
|
|
4
5
|
import {} from "react";
|
|
5
6
|
import { Separator } from "../Separator";
|
|
6
7
|
import s from "./ButtonGroup.module.css";
|
|
7
8
|
const ButtonGroupRoot = ({ orientation = "horizontal", className, ref, ...restProps }) => (_jsx("div", { ref: ref, role: "group", "data-slot": "button-group", "data-orientation": orientation, className: clsx(s.Root, className), ...restProps }));
|
|
8
9
|
const ButtonGroupSeparator = ({ className, orientation, ...restProps }) => (_jsx(Separator, { "data-slot": "button-group-separator", orientation: orientation ?? "vertical", className: clsx(s.Separator, className), ...restProps }));
|
|
10
|
+
const ButtonGroupText = ({ asChild = false, className, ref, ...restProps }) => {
|
|
11
|
+
const Comp = asChild ? Slot.Root : "div";
|
|
12
|
+
return (_jsx(Comp, { ref: ref, "data-slot": "button-group-text", className: clsx(s.Text, className), ...restProps }));
|
|
13
|
+
};
|
|
9
14
|
export const ButtonGroup = ButtonGroupRoot;
|
|
10
15
|
ButtonGroup.Separator = ButtonGroupSeparator;
|
|
16
|
+
ButtonGroup.Text = ButtonGroupText;
|
|
11
17
|
//# sourceMappingURL=ButtonGroup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonGroup.js","sourceRoot":"","sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAsD,MAAM,OAAO,CAAA;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,CAAC,MAAM,0BAA0B,CAAA;AAkBxC,MAAM,eAAe,GAAG,CAAC,EACvB,WAAW,GAAG,YAAY,EAC1B,SAAS,EACT,GAAG,EACH,GAAG,SAAS,EACK,EAAE,EAAE,CAAC,CACtB,cACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,eACF,cAAc,sBACN,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,KAC9B,SAAS,GACb,CACH,CAAA;AAiBD,MAAM,oBAAoB,GAAG,CAAC,EAC5B,SAAS,EACT,WAAW,EACX,GAAG,SAAS,EACc,EAAE,EAAE,CAAC,CAC/B,KAAC,SAAS,iBACE,wBAAwB,EAClC,WAAW,EAAE,WAAW,IAAI,UAAU,EACtC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,KACnC,SAAS,GACb,CACH,CAAA;
|
|
1
|
+
{"version":3,"file":"ButtonGroup.js","sourceRoot":"","sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAC/B,OAAO,EAAsD,MAAM,OAAO,CAAA;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,CAAC,MAAM,0BAA0B,CAAA;AAkBxC,MAAM,eAAe,GAAG,CAAC,EACvB,WAAW,GAAG,YAAY,EAC1B,SAAS,EACT,GAAG,EACH,GAAG,SAAS,EACK,EAAE,EAAE,CAAC,CACtB,cACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,eACF,cAAc,sBACN,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,KAC9B,SAAS,GACb,CACH,CAAA;AAiBD,MAAM,oBAAoB,GAAG,CAAC,EAC5B,SAAS,EACT,WAAW,EACX,GAAG,SAAS,EACc,EAAE,EAAE,CAAC,CAC/B,KAAC,SAAS,iBACE,wBAAwB,EAClC,WAAW,EAAE,WAAW,IAAI,UAAU,EACtC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,KACnC,SAAS,GACb,CACH,CAAA;AAiBD,MAAM,eAAe,GAAG,CAAC,EACvB,OAAO,GAAG,KAAK,EACf,SAAS,EACT,GAAG,EACH,GAAG,SAAS,EACS,EAAE,EAAE;IACzB,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAA;IACxC,OAAO,CACL,KAAC,IAAI,IACH,GAAG,EAAE,GAAG,eACE,mBAAmB,EAC7B,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,KAC9B,SAAS,GACb,CACH,CAAA;AACH,CAAC,CAAA;AAWD,MAAM,CAAC,MAAM,WAAW,GAAG,eAAuC,CAAA;AAClE,WAAW,CAAC,SAAS,GAAG,oBAAoB,CAAA;AAC5C,WAAW,CAAC,IAAI,GAAG,eAAe,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { Slot } from \"radix-ui\"\nimport { type ComponentProps, type HTMLAttributes, type Ref } from \"react\"\nimport { Separator } from \"../Separator\"\nimport s from \"./ButtonGroup.module.css\"\n\n/* ------------------------------------------------------------------ */\n/* Root */\n/* ------------------------------------------------------------------ */\n\nexport type ButtonGroupOrientation = \"horizontal\" | \"vertical\"\n\nexport type ButtonGroupProps = HTMLAttributes<HTMLDivElement> & {\n /**\n * Direction of the joined buttons.\n * @default \"horizontal\"\n */\n orientation?: ButtonGroupOrientation\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\nconst ButtonGroupRoot = ({\n orientation = \"horizontal\",\n className,\n ref,\n ...restProps\n}: ButtonGroupProps) => (\n <div\n ref={ref}\n role=\"group\"\n data-slot=\"button-group\"\n data-orientation={orientation}\n className={clsx(s.Root, className)}\n {...restProps}\n />\n)\n\n/* ------------------------------------------------------------------ */\n/* Separator — thin divider between items */\n/* ------------------------------------------------------------------ */\n\nexport type ButtonGroupSeparatorProps = Omit<\n ComponentProps<typeof Separator>,\n \"orientation\"\n> & {\n /**\n * When omitted, flips to match the surrounding ButtonGroup axis.\n * Pass explicitly to override (rare).\n */\n orientation?: ButtonGroupOrientation\n}\n\nconst ButtonGroupSeparator = ({\n className,\n orientation,\n ...restProps\n}: ButtonGroupSeparatorProps) => (\n <Separator\n data-slot=\"button-group-separator\"\n orientation={orientation ?? \"vertical\"}\n className={clsx(s.Separator, className)}\n {...restProps}\n />\n)\n\n/* ------------------------------------------------------------------ */\n/* Text — muted label/pill sharing the group's joined geometry */\n/* ------------------------------------------------------------------ */\n\nexport type ButtonGroupTextProps = HTMLAttributes<HTMLDivElement> & {\n /**\n * Swap the rendered element for a child (label, span, etc.) while\n * keeping the group's visual treatment.\n * @default false\n */\n asChild?: boolean\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\nconst ButtonGroupText = ({\n asChild = false,\n className,\n ref,\n ...restProps\n}: ButtonGroupTextProps) => {\n const Comp = asChild ? Slot.Root : \"div\"\n return (\n <Comp\n ref={ref}\n data-slot=\"button-group-text\"\n className={clsx(s.Text, className)}\n {...restProps}\n />\n )\n}\n\n/* ------------------------------------------------------------------ */\n/* Export — compound API */\n/* ------------------------------------------------------------------ */\n\ntype ButtonGroupComponent = typeof ButtonGroupRoot & {\n Separator: typeof ButtonGroupSeparator\n Text: typeof ButtonGroupText\n}\n\nexport const ButtonGroup = ButtonGroupRoot as ButtonGroupComponent\nButtonGroup.Separator = ButtonGroupSeparator\nButtonGroup.Text = ButtonGroupText\n"]}
|
|
@@ -4,7 +4,10 @@
|
|
|
4
4
|
width: -moz-fit-content;
|
|
5
5
|
width: fit-content;
|
|
6
6
|
|
|
7
|
-
/* Inputs inside a ButtonGroup share the row and flex to fill space
|
|
7
|
+
/* Inputs inside a ButtonGroup share the row and flex to fill space —
|
|
8
|
+
the rule targets raw <input>, the Plex Input Container (data-slot),
|
|
9
|
+
and a nested sub-ButtonGroup that wraps an Input (e.g. Input Group
|
|
10
|
+
pattern: [leading action] [Input + inline addon]). */
|
|
8
11
|
}
|
|
9
12
|
|
|
10
13
|
/* Let focused item sit on top of neighbors so the ring isn't clipped */
|
|
@@ -28,16 +31,40 @@
|
|
|
28
31
|
every non-first child, so the inset shadow of item N+1 doesn't sit
|
|
29
32
|
next to the inset shadow of item N (which would read as a doubled
|
|
30
33
|
2px line). Focus ring lives on ::after, so clip-path on ::before
|
|
31
|
-
leaves the focus ring intact.
|
|
32
|
-
|
|
34
|
+
leaves the focus ring intact.
|
|
35
|
+
|
|
36
|
+
Separators are excluded — they need to render visibly BETWEEN items,
|
|
37
|
+
not be overlapped into oblivion. Adjacent items to a separator keep
|
|
38
|
+
their edge radii stripped, but skip the -1px/-clip trickery. */
|
|
39
|
+
.Root[data-orientation="horizontal"] > *:not(:first-child):not([data-slot="button-group-separator"]) {
|
|
33
40
|
border-start-start-radius: 0;
|
|
34
41
|
border-end-start-radius: 0;
|
|
42
|
+
}
|
|
43
|
+
.Root[data-orientation="horizontal"]
|
|
44
|
+
> *:not(:first-child):not([data-slot="button-group-separator"]):not(
|
|
45
|
+
[data-slot="button-group-separator"] + *
|
|
46
|
+
) {
|
|
35
47
|
margin-inline-start: -1px;
|
|
36
48
|
}
|
|
37
|
-
.Root[data-orientation="horizontal"]
|
|
49
|
+
.Root[data-orientation="horizontal"]
|
|
50
|
+
> *:not(:first-child):not([data-slot="button-group-separator"]):not(
|
|
51
|
+
[data-slot="button-group-separator"] + *
|
|
52
|
+
)::before {
|
|
38
53
|
clip-path: inset(0 0 0 1px);
|
|
39
54
|
}
|
|
40
|
-
.Root[data-orientation="horizontal"]
|
|
55
|
+
.Root[data-orientation="horizontal"]
|
|
56
|
+
> *:not(:last-child):not([data-slot="button-group-separator"]):not(
|
|
57
|
+
:has(+ [data-slot="button-group-separator"])
|
|
58
|
+
) {
|
|
59
|
+
border-start-end-radius: 0;
|
|
60
|
+
border-end-end-radius: 0;
|
|
61
|
+
}
|
|
62
|
+
/* Strip the edge radius on items sitting directly next to a separator */
|
|
63
|
+
.Root[data-orientation="horizontal"] > [data-slot="button-group-separator"] + * {
|
|
64
|
+
border-start-start-radius: 0;
|
|
65
|
+
border-end-start-radius: 0;
|
|
66
|
+
}
|
|
67
|
+
.Root[data-orientation="horizontal"] > *:has(+ [data-slot="button-group-separator"]) {
|
|
41
68
|
border-start-end-radius: 0;
|
|
42
69
|
border-end-end-radius: 0;
|
|
43
70
|
}
|
|
@@ -46,28 +73,87 @@
|
|
|
46
73
|
.Root[data-orientation="vertical"] {
|
|
47
74
|
flex-direction: column;
|
|
48
75
|
}
|
|
49
|
-
.Root[data-orientation="vertical"] > *:not(:first-child) {
|
|
76
|
+
.Root[data-orientation="vertical"] > *:not(:first-child):not([data-slot="button-group-separator"]) {
|
|
50
77
|
border-start-start-radius: 0;
|
|
51
78
|
border-start-end-radius: 0;
|
|
79
|
+
}
|
|
80
|
+
.Root[data-orientation="vertical"]
|
|
81
|
+
> *:not(:first-child):not([data-slot="button-group-separator"]):not(
|
|
82
|
+
[data-slot="button-group-separator"] + *
|
|
83
|
+
) {
|
|
52
84
|
margin-block-start: -1px;
|
|
53
85
|
}
|
|
54
|
-
.Root[data-orientation="vertical"]
|
|
86
|
+
.Root[data-orientation="vertical"]
|
|
87
|
+
> *:not(:first-child):not([data-slot="button-group-separator"]):not(
|
|
88
|
+
[data-slot="button-group-separator"] + *
|
|
89
|
+
)::before {
|
|
55
90
|
clip-path: inset(1px 0 0 0);
|
|
56
91
|
}
|
|
57
|
-
.Root[data-orientation="vertical"]
|
|
92
|
+
.Root[data-orientation="vertical"]
|
|
93
|
+
> *:not(:last-child):not([data-slot="button-group-separator"]):not(
|
|
94
|
+
:has(+ [data-slot="button-group-separator"])
|
|
95
|
+
) {
|
|
96
|
+
border-end-start-radius: 0;
|
|
97
|
+
border-end-end-radius: 0;
|
|
98
|
+
}
|
|
99
|
+
.Root[data-orientation="vertical"] > [data-slot="button-group-separator"] + * {
|
|
100
|
+
border-start-start-radius: 0;
|
|
101
|
+
border-start-end-radius: 0;
|
|
102
|
+
}
|
|
103
|
+
.Root[data-orientation="vertical"] > *:has(+ [data-slot="button-group-separator"]) {
|
|
58
104
|
border-end-start-radius: 0;
|
|
59
105
|
border-end-end-radius: 0;
|
|
60
106
|
}
|
|
61
107
|
.Root > input,
|
|
62
|
-
.Root > [data-slot="input
|
|
108
|
+
.Root > [data-slot="input"],
|
|
109
|
+
.Root > [data-slot="button-group"]:has(> [data-slot="input"]) {
|
|
63
110
|
flex: 1 1 auto;
|
|
64
|
-
}/*
|
|
111
|
+
}/* Text — a muted label pill that slots into a ButtonGroup alongside
|
|
112
|
+
Buttons. Uses an inset box-shadow border (same trick Button uses for
|
|
113
|
+
variant="outline") so the group's edge-clipping rules (::before
|
|
114
|
+
clip-path) also work here and collapse the doubled 1px edge. */.Text {
|
|
115
|
+
position: relative;
|
|
116
|
+
display: inline-flex;
|
|
117
|
+
align-items: center;
|
|
118
|
+
gap: var(--spacing-2);
|
|
119
|
+
padding-inline: var(--spacing-4);
|
|
120
|
+
align-self: stretch;
|
|
121
|
+
background: var(--button-group-text-background);
|
|
122
|
+
color: var(--button-group-text-color);
|
|
123
|
+
font-size: var(--button-group-text-font-size);
|
|
124
|
+
font-weight: var(--button-group-text-font-weight);
|
|
125
|
+
font-family: var(--font-family-text);
|
|
126
|
+
line-height: 1;
|
|
127
|
+
white-space: nowrap;
|
|
128
|
+
border-radius: var(--radius-md);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.Text::before {
|
|
132
|
+
content: "";
|
|
133
|
+
position: absolute;
|
|
134
|
+
inset: 0;
|
|
135
|
+
border-radius: inherit;
|
|
136
|
+
box-shadow: 0 0 0 1px var(--button-group-text-border-color) inset;
|
|
137
|
+
pointer-events: none;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.Text svg {
|
|
141
|
+
width: 1em;
|
|
142
|
+
height: 1em;
|
|
143
|
+
flex-shrink: 0;
|
|
144
|
+
}/* Separator used between items inside a ButtonGroup.
|
|
145
|
+
Sits above the neighbor buttons (z-index) so the 1px line isn't
|
|
146
|
+
visually swallowed by the adjacent box-shadow borders. Parent-scoped
|
|
147
|
+
selector beats the base Separator class so the stronger color wins. */.Root > .Separator {
|
|
148
|
+
position: relative;
|
|
149
|
+
z-index: 1;
|
|
65
150
|
align-self: stretch;
|
|
66
151
|
margin: 0;
|
|
67
152
|
flex-shrink: 0;
|
|
153
|
+
background: var(--button-group-separator-color);
|
|
68
154
|
}
|
|
69
155
|
|
|
70
|
-
.Separator[data-orientation="vertical"] {
|
|
156
|
+
.Root > .Separator[data-orientation="vertical"] {
|
|
71
157
|
height: auto;
|
|
72
158
|
}
|
|
73
159
|
}
|
|
@@ -16,15 +16,15 @@
|
|
|
16
16
|
background-color: var(--color-surface-elevated-secondary);
|
|
17
17
|
color: var(--color-text-secondary);
|
|
18
18
|
}/* Force the CopyButton to inherit the container's color on all states.
|
|
19
|
-
|
|
19
|
+
The ghost-secondary hover background (rendered via the Button's
|
|
20
|
+
::before pseudo-element) is intentionally NOT suppressed here —
|
|
21
|
+
it's what gives the copy icon a visible hover affordance on the
|
|
22
|
+
light-grey codeblock surface. (A previous version of this rule
|
|
23
|
+
zeroed ::before to keep the hover invisible; see commit history
|
|
24
|
+
for the regression that caused.) */.CopyButtonContainer button {
|
|
20
25
|
color: inherit !important;
|
|
21
26
|
padding: 0 !important;
|
|
22
27
|
-webkit-tap-highlight-color: transparent;
|
|
23
|
-
}.CopyButtonContainer button::before {
|
|
24
|
-
opacity: 0 !important;
|
|
25
|
-
transform: none !important;
|
|
26
|
-
background-color: transparent !important;
|
|
27
|
-
box-shadow: none !important;
|
|
28
28
|
}.CopyButtonContainer button:focus,
|
|
29
29
|
.CopyButtonContainer button:focus-visible {
|
|
30
30
|
outline: none !important;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
const AppStoreSquare = (props) => (_jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", ...props, children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.8742 7.73564C14.1424 7.25286 13.9684 6.64406 13.4856 6.37584C13.0029 6.10763 12.3941 6.28157 12.1258 6.76436L12 6.99087L11.8742 6.76436C11.6059 6.28157 10.9971 6.10763 10.5144 6.37584C10.0316 6.64406 9.85763 7.25286 10.1258 7.73564L10.856 9.05L8.6616 13H7C6.44772 13 6 13.4477 6 14C6 14.5523 6.44772 15 7 15H7.55049L7.12584 15.7644C6.85763 16.2471 7.03157 16.8559 7.51436 17.1242C7.99714 17.3924 8.60595 17.2184 8.87416 16.7356L9.83841 15H14.1616L15.1258 16.7356C15.3941 17.2184 16.0029 17.3924 16.4856 17.1242C16.9684 16.8559 17.1424 16.2471 16.8742 15.7644L16.4495 15H17C17.5523 15 18 14.5523 18 14C18 13.4477 17.5523 13 17 13H15.3384L13.144 9.05L13.8742 7.73564ZM13.0505 13H10.9495L12 11.1091L13.0505 13Z", fill: "currentColor" }), _jsx("path", {
|
|
2
|
+
const AppStoreSquare = (props) => (_jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", ...props, children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.8742 7.73564C14.1424 7.25286 13.9684 6.64406 13.4856 6.37584C13.0029 6.10763 12.3941 6.28157 12.1258 6.76436L12 6.99087L11.8742 6.76436C11.6059 6.28157 10.9971 6.10763 10.5144 6.37584C10.0316 6.64406 9.85763 7.25286 10.1258 7.73564L10.856 9.05L8.6616 13H7C6.44772 13 6 13.4477 6 14C6 14.5523 6.44772 15 7 15H7.55049L7.12584 15.7644C6.85763 16.2471 7.03157 16.8559 7.51436 17.1242C7.99714 17.3924 8.60595 17.2184 8.87416 16.7356L9.83841 15H14.1616L15.1258 16.7356C15.3941 17.2184 16.0029 17.3924 16.4856 17.1242C16.9684 16.8559 17.1424 16.2471 16.8742 15.7644L16.4495 15H17C17.5523 15 18 14.5523 18 14C18 13.4477 17.5523 13 17 13H15.3384L13.144 9.05L13.8742 7.73564ZM13.0505 13H10.9495L12 11.1091L13.0505 13Z", fill: "currentColor" }), _jsx("path", { d: "M20 7C20 5.34315 18.6569 4 17 4H7C5.34315 4 4 5.34315 4 7V17C4 18.6569 5.34315 20 7 20H17C18.6569 20 20 18.6569 20 17V7ZM22 17C22 19.7614 19.7614 22 17 22H7C4.23858 22 2 19.7614 2 17V7C2 4.23858 4.23858 2 7 2H17C19.7614 2 22 4.23858 22 7V17Z", fill: "currentColor" })] }));
|
|
3
3
|
AppStoreSquare.displayName = "AppStoreSquare";
|
|
4
4
|
export default AppStoreSquare;
|
|
5
5
|
//# sourceMappingURL=AppStoreSquare.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppStoreSquare.js","sourceRoot":"","sources":["../../../../../src/components/Icon/svg/AppStoreSquare.tsx"],"names":[],"mappings":";AACA,MAAM,cAAc,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACzD,eAAK,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,iBAAa,MAAM,KAAK,KAAK,aAChG,eACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,ysBAAysB,EAC3sB,IAAI,EAAC,cAAc,GACnB,EACF,eACE,
|
|
1
|
+
{"version":3,"file":"AppStoreSquare.js","sourceRoot":"","sources":["../../../../../src/components/Icon/svg/AppStoreSquare.tsx"],"names":[],"mappings":";AACA,MAAM,cAAc,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACzD,eAAK,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,iBAAa,MAAM,KAAK,KAAK,aAChG,eACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,ysBAAysB,EAC3sB,IAAI,EAAC,cAAc,GACnB,EACF,eACE,CAAC,EAAC,mPAAmP,EACrP,IAAI,EAAC,cAAc,GACnB,IACE,CACP,CAAA;AACD,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAA;AAC7C,eAAe,cAAc,CAAA","sourcesContent":["import type { SVGProps } from \"react\"\nconst AppStoreSquare = (props: SVGProps<SVGSVGElement>) => (\n <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" {...props}>\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M13.8742 7.73564C14.1424 7.25286 13.9684 6.64406 13.4856 6.37584C13.0029 6.10763 12.3941 6.28157 12.1258 6.76436L12 6.99087L11.8742 6.76436C11.6059 6.28157 10.9971 6.10763 10.5144 6.37584C10.0316 6.64406 9.85763 7.25286 10.1258 7.73564L10.856 9.05L8.6616 13H7C6.44772 13 6 13.4477 6 14C6 14.5523 6.44772 15 7 15H7.55049L7.12584 15.7644C6.85763 16.2471 7.03157 16.8559 7.51436 17.1242C7.99714 17.3924 8.60595 17.2184 8.87416 16.7356L9.83841 15H14.1616L15.1258 16.7356C15.3941 17.2184 16.0029 17.3924 16.4856 17.1242C16.9684 16.8559 17.1424 16.2471 16.8742 15.7644L16.4495 15H17C17.5523 15 18 14.5523 18 14C18 13.4477 17.5523 13 17 13H15.3384L13.144 9.05L13.8742 7.73564ZM13.0505 13H10.9495L12 11.1091L13.0505 13Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M20 7C20 5.34315 18.6569 4 17 4H7C5.34315 4 4 5.34315 4 7V17C4 18.6569 5.34315 20 7 20H17C18.6569 20 20 18.6569 20 17V7ZM22 17C22 19.7614 19.7614 22 17 22H7C4.23858 22 2 19.7614 2 17V7C2 4.23858 4.23858 2 7 2H17C19.7614 2 22 4.23858 22 7V17Z\"\n fill=\"currentColor\"\n />\n </svg>\n)\nAppStoreSquare.displayName = \"AppStoreSquare\"\nexport default AppStoreSquare\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as _jsx
|
|
2
|
-
const Education = (props) => (
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
const Education = (props) => (_jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", ...props, children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.5209 2.122C11.6678 2.04183 11.8325 1.99982 11.9999 1.99982C12.1672 1.99982 12.3319 2.04183 12.4789 2.122L23.4789 8.122C23.6366 8.20806 23.7682 8.33501 23.8598 8.4895C23.9515 8.644 23.9999 8.82035 23.9999 9V15C23.9999 15.2652 23.8945 15.5196 23.707 15.7071C23.5194 15.8946 23.2651 16 22.9999 16C22.7346 16 22.4803 15.8946 22.2927 15.7071C22.1052 15.5196 21.9999 15.2652 21.9999 15V10.684L19.9669 11.794V16.305C19.9669 16.8468 19.8203 17.3786 19.5424 17.8438C19.2646 18.3089 18.8659 18.6902 18.3889 18.947L13.4219 21.62C12.9848 21.8553 12.4962 21.9784 11.9999 21.9784C11.5035 21.9784 11.0149 21.8553 10.5779 21.62L5.61085 18.947C5.13375 18.6902 4.73512 18.3089 4.45728 17.8438C4.17944 17.3786 4.03277 16.8468 4.03285 16.305V11.794L0.520851 9.878C0.363086 9.79199 0.231409 9.66506 0.139669 9.51056C0.0479276 9.35606 -0.000488281 9.17969 -0.000488281 9C-0.000488281 8.82031 0.0479276 8.64395 0.139669 8.48944C0.231409 8.33494 0.363086 8.20801 0.520851 8.122L11.5209 2.122ZM5.52785 10.331C5.51664 10.3245 5.5053 10.3181 5.49385 10.312L3.08785 9L11.9999 4.14L20.9119 9L18.5059 10.312C18.4941 10.3181 18.4824 10.3245 18.4709 10.331L11.9999 13.861L5.52785 10.331ZM6.03285 12.884V16.305C6.03295 16.4855 6.08189 16.6626 6.1745 16.8175C6.2671 16.9725 6.39992 17.0994 6.55885 17.185L11.5259 19.859C11.6715 19.9374 11.8344 19.9785 11.9999 19.9785C12.1653 19.9785 12.3282 19.9374 12.4739 19.859L17.4409 17.186C17.5998 17.1004 17.7326 16.9735 17.8252 16.8185C17.9178 16.6636 17.9668 16.4865 17.9669 16.306V12.884L12.4789 15.878C12.3319 15.9582 12.1672 16.0002 11.9999 16.0002C11.8325 16.0002 11.6678 15.9582 11.5209 15.878L6.03285 12.884Z", fill: "currentColor" }) }));
|
|
3
3
|
Education.displayName = "Education";
|
|
4
4
|
export default Education;
|
|
5
5
|
//# sourceMappingURL=Education.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Education.js","sourceRoot":"","sources":["../../../../../src/components/Icon/svg/Education.tsx"],"names":[],"mappings":";AACA,MAAM,SAAS,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACpD,
|
|
1
|
+
{"version":3,"file":"Education.js","sourceRoot":"","sources":["../../../../../src/components/Icon/svg/Education.tsx"],"names":[],"mappings":";AACA,MAAM,SAAS,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACpD,cAAK,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,iBAAa,MAAM,KAAK,KAAK,YAChG,eACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,6lDAA6lD,EAC/lD,IAAI,EAAC,cAAc,GACnB,GACE,CACP,CAAA;AACD,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AACnC,eAAe,SAAS,CAAA","sourcesContent":["import type { SVGProps } from \"react\"\nconst Education = (props: SVGProps<SVGSVGElement>) => (\n <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" {...props}>\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M11.5209 2.122C11.6678 2.04183 11.8325 1.99982 11.9999 1.99982C12.1672 1.99982 12.3319 2.04183 12.4789 2.122L23.4789 8.122C23.6366 8.20806 23.7682 8.33501 23.8598 8.4895C23.9515 8.644 23.9999 8.82035 23.9999 9V15C23.9999 15.2652 23.8945 15.5196 23.707 15.7071C23.5194 15.8946 23.2651 16 22.9999 16C22.7346 16 22.4803 15.8946 22.2927 15.7071C22.1052 15.5196 21.9999 15.2652 21.9999 15V10.684L19.9669 11.794V16.305C19.9669 16.8468 19.8203 17.3786 19.5424 17.8438C19.2646 18.3089 18.8659 18.6902 18.3889 18.947L13.4219 21.62C12.9848 21.8553 12.4962 21.9784 11.9999 21.9784C11.5035 21.9784 11.0149 21.8553 10.5779 21.62L5.61085 18.947C5.13375 18.6902 4.73512 18.3089 4.45728 17.8438C4.17944 17.3786 4.03277 16.8468 4.03285 16.305V11.794L0.520851 9.878C0.363086 9.79199 0.231409 9.66506 0.139669 9.51056C0.0479276 9.35606 -0.000488281 9.17969 -0.000488281 9C-0.000488281 8.82031 0.0479276 8.64395 0.139669 8.48944C0.231409 8.33494 0.363086 8.20801 0.520851 8.122L11.5209 2.122ZM5.52785 10.331C5.51664 10.3245 5.5053 10.3181 5.49385 10.312L3.08785 9L11.9999 4.14L20.9119 9L18.5059 10.312C18.4941 10.3181 18.4824 10.3245 18.4709 10.331L11.9999 13.861L5.52785 10.331ZM6.03285 12.884V16.305C6.03295 16.4855 6.08189 16.6626 6.1745 16.8175C6.2671 16.9725 6.39992 17.0994 6.55885 17.185L11.5259 19.859C11.6715 19.9374 11.8344 19.9785 11.9999 19.9785C12.1653 19.9785 12.3282 19.9374 12.4739 19.859L17.4409 17.186C17.5998 17.1004 17.7326 16.9735 17.8252 16.8185C17.9178 16.6636 17.9668 16.4865 17.9669 16.306V12.884L12.4789 15.878C12.3319 15.9582 12.1672 16.0002 11.9999 16.0002C11.8325 16.0002 11.6678 15.9582 11.5209 15.878L6.03285 12.884Z\"\n fill=\"currentColor\"\n />\n </svg>\n)\nEducation.displayName = \"Education\"\nexport default Education\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
const HapticFeedback = (props) => (_jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", ...props, children: [
|
|
2
|
+
const HapticFeedback = (props) => (_jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", ...props, children: [_jsx("path", { d: "M20.9855 6.64251C21.4591 6.35836 22.0733 6.51193 22.3575 6.98551L23.8575 9.48551C24.0667 9.83415 24.044 10.2747 23.8 10.6L22.7034 12.0621L23.8575 13.9855C24.0475 14.3022 24.0475 14.6978 23.8575 15.0145L22.3575 17.5145C22.0733 17.9881 21.4591 18.1416 20.9855 17.8575C20.5119 17.5733 20.3584 16.9591 20.6425 16.4855L21.8338 14.5L20.6425 12.5145C20.4333 12.1659 20.4561 11.7253 20.7 11.4L21.7966 9.93792L20.6425 8.0145C20.3584 7.54092 20.5119 6.92666 20.9855 6.64251ZM3.1 6.7C3.54183 7.03137 3.63137 7.65817 3.3 8.1L2.20344 9.56208L3.3575 11.4855C3.5475 11.8022 3.5475 12.1978 3.3575 12.5145L2.16619 14.5L3.3575 16.4855C3.64164 16.9591 3.48808 17.5733 3.0145 17.8575C2.54092 18.1416 1.92666 17.9881 1.64251 17.5145L0.14251 15.0145C-0.0474999 14.6978 -0.0474999 14.3022 0.14251 13.9855L1.33381 12L0.14251 10.0145C-0.0666757 9.66585 -0.0439472 9.22527 0.200003 8.9L1.7 6.9C2.03137 6.45817 2.65817 6.36863 3.1 6.7Z", fill: "currentColor" }), _jsx("path", { d: "M10.25 6.25C10.25 5.83579 10.5858 5.5 11 5.5H13C13.4142 5.5 13.75 5.83579 13.75 6.25C13.75 6.66421 13.4142 7 13 7H11C10.5858 7 10.25 6.66421 10.25 6.25Z", fill: "currentColor" }), _jsx("path", { d: "M10.4598 2.5H13.5402C14.206 2.49999 14.7656 2.49997 15.2234 2.53738C15.7022 2.5765 16.1571 2.66144 16.589 2.88148C17.2475 3.21704 17.783 3.75247 18.1185 4.41103C18.3386 4.84289 18.4235 5.29785 18.4626 5.77657C18.5 6.23445 18.5 6.79398 18.5 7.45987V16.5401C18.5 17.206 18.5 17.7656 18.4626 18.2234C18.4235 18.7021 18.3386 19.1571 18.1185 19.589C17.783 20.2475 17.2475 20.783 16.589 21.1185C16.1571 21.3386 15.7022 21.4235 15.2234 21.4626C14.7656 21.5 14.206 21.5 13.5402 21.5H10.4598C9.79396 21.5 9.23444 21.5 8.77658 21.4626C8.29785 21.4235 7.84289 21.3386 7.41104 21.1185C6.75247 20.783 6.21704 20.2475 5.88148 19.589C5.66144 19.1571 5.5765 18.7021 5.53738 18.2234C5.49997 17.7656 5.49999 17.206 5.5 16.5402V7.45984C5.49999 6.79397 5.49997 6.23445 5.53738 5.77657C5.5765 5.29785 5.66144 4.84289 5.88148 4.41103C6.21704 3.75247 6.75247 3.21704 7.41104 2.88148C7.84289 2.66144 8.29785 2.5765 8.77658 2.53738C9.23445 2.49997 9.79397 2.49999 10.4598 2.5ZM8.93944 4.53074C8.5844 4.55975 8.42194 4.61105 8.31902 4.66349C8.03677 4.8073 7.8073 5.03677 7.66349 5.31902C7.61105 5.42194 7.55975 5.5844 7.53074 5.93944C7.50078 6.30615 7.5 6.78343 7.5 7.5V16.5C7.5 17.2166 7.50078 17.6939 7.53074 18.0606C7.55975 18.4156 7.61105 18.5781 7.66349 18.681C7.8073 18.9632 8.03677 19.1927 8.31902 19.3365C8.42194 19.389 8.5844 19.4403 8.93944 19.4693C9.30615 19.4992 9.78344 19.5 10.5 19.5H13.5C14.2166 19.5 14.6939 19.4992 15.0606 19.4693C15.4156 19.4403 15.5781 19.389 15.681 19.3365C15.9632 19.1927 16.1927 18.9632 16.3365 18.681C16.389 18.5781 16.4403 18.4156 16.4693 18.0606C16.4992 17.6939 16.5 17.2166 16.5 16.5V7.5C16.5 6.78343 16.4992 6.30615 16.4693 5.93944C16.4403 5.5844 16.389 5.42194 16.3365 5.31902C16.1927 5.03677 15.9632 4.8073 15.681 4.66349C15.5781 4.61105 15.4156 4.55975 15.0606 4.53074C14.6939 4.50078 14.2166 4.5 13.5 4.5H10.5C9.78344 4.5 9.30615 4.50078 8.93944 4.53074Z", fill: "currentColor" })] }));
|
|
3
3
|
HapticFeedback.displayName = "HapticFeedback";
|
|
4
4
|
export default HapticFeedback;
|
|
5
5
|
//# sourceMappingURL=HapticFeedback.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HapticFeedback.js","sourceRoot":"","sources":["../../../../../src/components/Icon/svg/HapticFeedback.tsx"],"names":[],"mappings":";AACA,MAAM,cAAc,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACzD,eAAK,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,iBAAa,MAAM,KAAK,KAAK,aAChG,
|
|
1
|
+
{"version":3,"file":"HapticFeedback.js","sourceRoot":"","sources":["../../../../../src/components/Icon/svg/HapticFeedback.tsx"],"names":[],"mappings":";AACA,MAAM,cAAc,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACzD,eAAK,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,iBAAa,MAAM,KAAK,KAAK,aAChG,eACE,CAAC,EAAC,84BAA84B,EACh5B,IAAI,EAAC,cAAc,GACnB,EACF,eACE,CAAC,EAAC,0JAA0J,EAC5J,IAAI,EAAC,cAAc,GACnB,EACF,eACE,CAAC,EAAC,s1DAAs1D,EACx1D,IAAI,EAAC,cAAc,GACnB,IACE,CACP,CAAA;AACD,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAA;AAC7C,eAAe,cAAc,CAAA","sourcesContent":["import type { SVGProps } from \"react\"\nconst HapticFeedback = (props: SVGProps<SVGSVGElement>) => (\n <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" {...props}>\n <path\n d=\"M20.9855 6.64251C21.4591 6.35836 22.0733 6.51193 22.3575 6.98551L23.8575 9.48551C24.0667 9.83415 24.044 10.2747 23.8 10.6L22.7034 12.0621L23.8575 13.9855C24.0475 14.3022 24.0475 14.6978 23.8575 15.0145L22.3575 17.5145C22.0733 17.9881 21.4591 18.1416 20.9855 17.8575C20.5119 17.5733 20.3584 16.9591 20.6425 16.4855L21.8338 14.5L20.6425 12.5145C20.4333 12.1659 20.4561 11.7253 20.7 11.4L21.7966 9.93792L20.6425 8.0145C20.3584 7.54092 20.5119 6.92666 20.9855 6.64251ZM3.1 6.7C3.54183 7.03137 3.63137 7.65817 3.3 8.1L2.20344 9.56208L3.3575 11.4855C3.5475 11.8022 3.5475 12.1978 3.3575 12.5145L2.16619 14.5L3.3575 16.4855C3.64164 16.9591 3.48808 17.5733 3.0145 17.8575C2.54092 18.1416 1.92666 17.9881 1.64251 17.5145L0.14251 15.0145C-0.0474999 14.6978 -0.0474999 14.3022 0.14251 13.9855L1.33381 12L0.14251 10.0145C-0.0666757 9.66585 -0.0439472 9.22527 0.200003 8.9L1.7 6.9C2.03137 6.45817 2.65817 6.36863 3.1 6.7Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M10.25 6.25C10.25 5.83579 10.5858 5.5 11 5.5H13C13.4142 5.5 13.75 5.83579 13.75 6.25C13.75 6.66421 13.4142 7 13 7H11C10.5858 7 10.25 6.66421 10.25 6.25Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M10.4598 2.5H13.5402C14.206 2.49999 14.7656 2.49997 15.2234 2.53738C15.7022 2.5765 16.1571 2.66144 16.589 2.88148C17.2475 3.21704 17.783 3.75247 18.1185 4.41103C18.3386 4.84289 18.4235 5.29785 18.4626 5.77657C18.5 6.23445 18.5 6.79398 18.5 7.45987V16.5401C18.5 17.206 18.5 17.7656 18.4626 18.2234C18.4235 18.7021 18.3386 19.1571 18.1185 19.589C17.783 20.2475 17.2475 20.783 16.589 21.1185C16.1571 21.3386 15.7022 21.4235 15.2234 21.4626C14.7656 21.5 14.206 21.5 13.5402 21.5H10.4598C9.79396 21.5 9.23444 21.5 8.77658 21.4626C8.29785 21.4235 7.84289 21.3386 7.41104 21.1185C6.75247 20.783 6.21704 20.2475 5.88148 19.589C5.66144 19.1571 5.5765 18.7021 5.53738 18.2234C5.49997 17.7656 5.49999 17.206 5.5 16.5402V7.45984C5.49999 6.79397 5.49997 6.23445 5.53738 5.77657C5.5765 5.29785 5.66144 4.84289 5.88148 4.41103C6.21704 3.75247 6.75247 3.21704 7.41104 2.88148C7.84289 2.66144 8.29785 2.5765 8.77658 2.53738C9.23445 2.49997 9.79397 2.49999 10.4598 2.5ZM8.93944 4.53074C8.5844 4.55975 8.42194 4.61105 8.31902 4.66349C8.03677 4.8073 7.8073 5.03677 7.66349 5.31902C7.61105 5.42194 7.55975 5.5844 7.53074 5.93944C7.50078 6.30615 7.5 6.78343 7.5 7.5V16.5C7.5 17.2166 7.50078 17.6939 7.53074 18.0606C7.55975 18.4156 7.61105 18.5781 7.66349 18.681C7.8073 18.9632 8.03677 19.1927 8.31902 19.3365C8.42194 19.389 8.5844 19.4403 8.93944 19.4693C9.30615 19.4992 9.78344 19.5 10.5 19.5H13.5C14.2166 19.5 14.6939 19.4992 15.0606 19.4693C15.4156 19.4403 15.5781 19.389 15.681 19.3365C15.9632 19.1927 16.1927 18.9632 16.3365 18.681C16.389 18.5781 16.4403 18.4156 16.4693 18.0606C16.4992 17.6939 16.5 17.2166 16.5 16.5V7.5C16.5 6.78343 16.4992 6.30615 16.4693 5.93944C16.4403 5.5844 16.389 5.42194 16.3365 5.31902C16.1927 5.03677 15.9632 4.8073 15.681 4.66349C15.5781 4.61105 15.4156 4.55975 15.0606 4.53074C14.6939 4.50078 14.2166 4.5 13.5 4.5H10.5C9.78344 4.5 9.30615 4.50078 8.93944 4.53074Z\"\n fill=\"currentColor\"\n />\n </svg>\n)\nHapticFeedback.displayName = \"HapticFeedback\"\nexport default HapticFeedback\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as _jsx
|
|
2
|
-
const ThumbMixed = (props) => (
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
const ThumbMixed = (props) => (_jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", ...props, children: _jsx("path", { d: "M18.3429 12.3887C18.3429 11.8416 18.3385 11.599 18.3214 11.4561L18.2999 11.3389C18.1975 10.9565 17.9232 10.6469 17.5636 10.4971L17.4044 10.4434C17.2607 10.4049 17.2682 10.4081 17.2452 10.4063L16.7003 10.4004L16.6085 10.3955C16.1545 10.3496 15.7999 9.96615 15.7999 9.50001C15.7999 9.00296 16.2032 8.59962 16.7003 8.59962H18.6651C19.2569 8.59962 19.7548 8.59963 20.1612 8.63282C20.5782 8.66689 20.9778 8.74109 21.3575 8.93458L21.5685 9.05275C22.0488 9.34739 22.4401 9.76957 22.6974 10.2744L22.7648 10.418C22.909 10.7544 22.9693 11.106 22.9991 11.4707C23.0323 11.8771 23.0314 12.3751 23.0314 12.9668V14.9922C23.0288 15.3377 23.0166 15.6386 22.964 15.9111L22.9269 16.0713C22.661 17.0635 21.9182 17.8524 20.9542 18.1807L20.7589 18.2402C20.3402 18.3524 19.8568 18.3447 19.2433 18.3447C19.1507 18.3447 19.0629 18.3816 18.9991 18.4453L18.9435 18.5176L16.4132 22.9463C16.2329 23.2618 15.8802 23.4377 15.5196 23.3926L15.1925 23.3526C13.301 23.1161 12.0811 21.2291 12.6417 19.4072L12.9689 18.3447H12.0001C11.5031 18.3447 11.0997 17.9414 11.0997 17.4443C11.0998 16.9473 11.5031 16.5449 12.0001 16.5449H14.1876C14.4731 16.545 14.7416 16.6805 14.9112 16.9102C15.0808 17.1399 15.1309 17.4361 15.047 17.709L14.3624 19.9365C14.157 20.604 14.5301 21.2916 15.1622 21.5068L17.381 17.625L17.4562 17.5029C17.6783 17.1682 17.9872 16.9077 18.3429 16.7432V12.3887ZM8.50304 0.607434L8.83116 0.647473L9.00597 0.674817C10.7391 0.991402 11.8512 2.71147 11.4288 4.42189L11.3819 4.59279L11.0509 5.667C11.2074 5.67201 11.3535 5.67883 11.4894 5.68947C11.9353 5.72442 12.3661 5.80048 12.7618 6.0088L12.9083 6.09083C13.629 6.5223 14.1432 7.23281 14.3263 8.05763L14.3566 8.22169C14.4126 8.60334 14.3731 8.98466 14.2999 9.36915C14.2586 9.58639 14.2013 9.82728 14.1329 10.0938L13.8976 10.9727L13.5675 12.1826C13.3681 12.9139 13.2158 13.5212 12.9142 14.0068L12.7755 14.208C12.4885 14.5797 12.1202 14.8797 11.7003 15.0859L11.5177 15.168C10.9156 15.4164 10.2212 15.4004 9.3546 15.4004H5.35851C4.76681 15.4004 4.2688 15.4004 3.86241 15.3672C3.49764 15.3374 3.14615 15.2771 2.80968 15.1328L2.66613 15.0654C2.16125 14.8082 1.73907 14.4169 1.44445 13.9365L1.32628 13.7256C1.13278 13.3458 1.05859 12.9463 1.02452 12.5293C0.991346 12.1229 0.991321 11.6249 0.991321 11.0332V9.44435C0.99132 8.83084 0.983678 8.34746 1.09581 7.92872L1.15538 7.73243C1.48379 6.76873 2.27272 6.02559 3.26476 5.75978L3.42491 5.72365C3.80637 5.64995 4.24348 5.65528 4.78038 5.65529C4.90396 5.65529 5.01883 5.58968 5.08019 5.48243L7.61046 1.05372L7.68566 0.941419C7.87874 0.697242 8.18779 0.568117 8.50304 0.607434ZM20.1427 16.5254C20.207 16.5192 20.2528 16.5118 20.2931 16.501L20.4523 16.4473C20.812 16.2975 21.0861 15.9879 21.1886 15.6055L21.2101 15.4883C21.2272 15.3454 21.2316 15.1027 21.2316 14.5557V12.9668C21.2316 12.3454 21.231 11.9333 21.2052 11.6172C21.1864 11.3878 21.1566 11.2539 21.1251 11.166L21.0939 11.0918C20.9876 10.8832 20.8256 10.7086 20.6271 10.5869L20.5401 10.5381C20.4564 10.4954 20.3204 10.4517 20.0148 10.4268C19.9702 10.4231 19.9238 10.4207 19.8751 10.418C19.9403 10.5641 19.996 10.7157 20.0382 10.8731L20.0753 11.0332C20.1279 11.3057 20.1401 11.6067 20.1427 11.9522V16.5254ZM5.68077 11.6113C5.68078 12.3407 5.68832 12.5289 5.72374 12.6611L5.77843 12.8203C5.92822 13.18 6.23692 13.4541 6.61925 13.5567L6.73644 13.5781C6.87929 13.5953 7.12179 13.5996 7.66906 13.5996H9.3546C10.3845 13.5996 10.6393 13.5831 10.8312 13.5039L10.9796 13.4317C11.1228 13.3493 11.2491 13.239 11.3507 13.1074L11.3966 13.041C11.5011 12.8713 11.5942 12.578 11.8312 11.709L12.1612 10.499L12.3898 9.6465C12.4514 9.40685 12.4981 9.20689 12.5314 9.03224C12.5805 8.77398 12.5886 8.62306 12.5812 8.52736L12.5694 8.44825C12.4989 8.13033 12.309 7.85327 12.0421 7.67286L11.923 7.60157C11.8448 7.56042 11.6986 7.51181 11.3487 7.48439C10.9943 7.45664 10.5277 7.45509 9.83605 7.45509C9.55048 7.45505 9.28207 7.31957 9.11242 7.08986C8.94287 6.8602 8.89181 6.56389 8.9757 6.29103L9.66124 4.06349L9.6964 3.92189C9.81287 3.30079 9.44847 2.69195 8.86046 2.4922L6.64269 6.37501C6.4179 6.76839 6.07842 7.07177 5.68077 7.25587V11.6113ZM2.7921 11.0332C2.7921 11.6546 2.79266 12.0667 2.81847 12.3828C2.84343 12.6883 2.88716 12.8245 2.9298 12.9082L2.97863 12.9961C3.10032 13.1944 3.27508 13.3557 3.48351 13.4619L3.55773 13.4942C3.6456 13.5257 3.77974 13.5545 4.0089 13.5733C4.05312 13.5769 4.09929 13.5784 4.14757 13.5811C4.10995 13.4966 4.07512 13.4106 4.04503 13.3223L3.98546 13.127C3.90128 12.8128 3.88405 12.4624 3.88097 12.0479V7.47365C3.86934 7.47477 3.85825 7.47532 3.84777 7.47657L3.73058 7.49904C3.34804 7.60155 3.03853 7.87547 2.88878 8.23536L2.83507 8.39454C2.79967 8.52676 2.7921 8.71502 2.7921 9.44435V11.0332Z", fill: "currentColor" }) }));
|
|
3
3
|
ThumbMixed.displayName = "ThumbMixed";
|
|
4
4
|
export default ThumbMixed;
|
|
5
5
|
//# sourceMappingURL=ThumbMixed.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThumbMixed.js","sourceRoot":"","sources":["../../../../../src/components/Icon/svg/ThumbMixed.tsx"],"names":[],"mappings":";AACA,MAAM,UAAU,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACrD,
|
|
1
|
+
{"version":3,"file":"ThumbMixed.js","sourceRoot":"","sources":["../../../../../src/components/Icon/svg/ThumbMixed.tsx"],"names":[],"mappings":";AACA,MAAM,UAAU,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACrD,cAAK,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,iBAAa,MAAM,KAAK,KAAK,YAChG,eACE,CAAC,EAAC,qhJAAqhJ,EACvhJ,IAAI,EAAC,cAAc,GACnB,GACE,CACP,CAAA;AACD,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AACrC,eAAe,UAAU,CAAA","sourcesContent":["import type { SVGProps } from \"react\"\nconst ThumbMixed = (props: SVGProps<SVGSVGElement>) => (\n <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" {...props}>\n <path\n d=\"M18.3429 12.3887C18.3429 11.8416 18.3385 11.599 18.3214 11.4561L18.2999 11.3389C18.1975 10.9565 17.9232 10.6469 17.5636 10.4971L17.4044 10.4434C17.2607 10.4049 17.2682 10.4081 17.2452 10.4063L16.7003 10.4004L16.6085 10.3955C16.1545 10.3496 15.7999 9.96615 15.7999 9.50001C15.7999 9.00296 16.2032 8.59962 16.7003 8.59962H18.6651C19.2569 8.59962 19.7548 8.59963 20.1612 8.63282C20.5782 8.66689 20.9778 8.74109 21.3575 8.93458L21.5685 9.05275C22.0488 9.34739 22.4401 9.76957 22.6974 10.2744L22.7648 10.418C22.909 10.7544 22.9693 11.106 22.9991 11.4707C23.0323 11.8771 23.0314 12.3751 23.0314 12.9668V14.9922C23.0288 15.3377 23.0166 15.6386 22.964 15.9111L22.9269 16.0713C22.661 17.0635 21.9182 17.8524 20.9542 18.1807L20.7589 18.2402C20.3402 18.3524 19.8568 18.3447 19.2433 18.3447C19.1507 18.3447 19.0629 18.3816 18.9991 18.4453L18.9435 18.5176L16.4132 22.9463C16.2329 23.2618 15.8802 23.4377 15.5196 23.3926L15.1925 23.3526C13.301 23.1161 12.0811 21.2291 12.6417 19.4072L12.9689 18.3447H12.0001C11.5031 18.3447 11.0997 17.9414 11.0997 17.4443C11.0998 16.9473 11.5031 16.5449 12.0001 16.5449H14.1876C14.4731 16.545 14.7416 16.6805 14.9112 16.9102C15.0808 17.1399 15.1309 17.4361 15.047 17.709L14.3624 19.9365C14.157 20.604 14.5301 21.2916 15.1622 21.5068L17.381 17.625L17.4562 17.5029C17.6783 17.1682 17.9872 16.9077 18.3429 16.7432V12.3887ZM8.50304 0.607434L8.83116 0.647473L9.00597 0.674817C10.7391 0.991402 11.8512 2.71147 11.4288 4.42189L11.3819 4.59279L11.0509 5.667C11.2074 5.67201 11.3535 5.67883 11.4894 5.68947C11.9353 5.72442 12.3661 5.80048 12.7618 6.0088L12.9083 6.09083C13.629 6.5223 14.1432 7.23281 14.3263 8.05763L14.3566 8.22169C14.4126 8.60334 14.3731 8.98466 14.2999 9.36915C14.2586 9.58639 14.2013 9.82728 14.1329 10.0938L13.8976 10.9727L13.5675 12.1826C13.3681 12.9139 13.2158 13.5212 12.9142 14.0068L12.7755 14.208C12.4885 14.5797 12.1202 14.8797 11.7003 15.0859L11.5177 15.168C10.9156 15.4164 10.2212 15.4004 9.3546 15.4004H5.35851C4.76681 15.4004 4.2688 15.4004 3.86241 15.3672C3.49764 15.3374 3.14615 15.2771 2.80968 15.1328L2.66613 15.0654C2.16125 14.8082 1.73907 14.4169 1.44445 13.9365L1.32628 13.7256C1.13278 13.3458 1.05859 12.9463 1.02452 12.5293C0.991346 12.1229 0.991321 11.6249 0.991321 11.0332V9.44435C0.99132 8.83084 0.983678 8.34746 1.09581 7.92872L1.15538 7.73243C1.48379 6.76873 2.27272 6.02559 3.26476 5.75978L3.42491 5.72365C3.80637 5.64995 4.24348 5.65528 4.78038 5.65529C4.90396 5.65529 5.01883 5.58968 5.08019 5.48243L7.61046 1.05372L7.68566 0.941419C7.87874 0.697242 8.18779 0.568117 8.50304 0.607434ZM20.1427 16.5254C20.207 16.5192 20.2528 16.5118 20.2931 16.501L20.4523 16.4473C20.812 16.2975 21.0861 15.9879 21.1886 15.6055L21.2101 15.4883C21.2272 15.3454 21.2316 15.1027 21.2316 14.5557V12.9668C21.2316 12.3454 21.231 11.9333 21.2052 11.6172C21.1864 11.3878 21.1566 11.2539 21.1251 11.166L21.0939 11.0918C20.9876 10.8832 20.8256 10.7086 20.6271 10.5869L20.5401 10.5381C20.4564 10.4954 20.3204 10.4517 20.0148 10.4268C19.9702 10.4231 19.9238 10.4207 19.8751 10.418C19.9403 10.5641 19.996 10.7157 20.0382 10.8731L20.0753 11.0332C20.1279 11.3057 20.1401 11.6067 20.1427 11.9522V16.5254ZM5.68077 11.6113C5.68078 12.3407 5.68832 12.5289 5.72374 12.6611L5.77843 12.8203C5.92822 13.18 6.23692 13.4541 6.61925 13.5567L6.73644 13.5781C6.87929 13.5953 7.12179 13.5996 7.66906 13.5996H9.3546C10.3845 13.5996 10.6393 13.5831 10.8312 13.5039L10.9796 13.4317C11.1228 13.3493 11.2491 13.239 11.3507 13.1074L11.3966 13.041C11.5011 12.8713 11.5942 12.578 11.8312 11.709L12.1612 10.499L12.3898 9.6465C12.4514 9.40685 12.4981 9.20689 12.5314 9.03224C12.5805 8.77398 12.5886 8.62306 12.5812 8.52736L12.5694 8.44825C12.4989 8.13033 12.309 7.85327 12.0421 7.67286L11.923 7.60157C11.8448 7.56042 11.6986 7.51181 11.3487 7.48439C10.9943 7.45664 10.5277 7.45509 9.83605 7.45509C9.55048 7.45505 9.28207 7.31957 9.11242 7.08986C8.94287 6.8602 8.89181 6.56389 8.9757 6.29103L9.66124 4.06349L9.6964 3.92189C9.81287 3.30079 9.44847 2.69195 8.86046 2.4922L6.64269 6.37501C6.4179 6.76839 6.07842 7.07177 5.68077 7.25587V11.6113ZM2.7921 11.0332C2.7921 11.6546 2.79266 12.0667 2.81847 12.3828C2.84343 12.6883 2.88716 12.8245 2.9298 12.9082L2.97863 12.9961C3.10032 13.1944 3.27508 13.3557 3.48351 13.4619L3.55773 13.4942C3.6456 13.5257 3.77974 13.5545 4.0089 13.5733C4.05312 13.5769 4.09929 13.5784 4.14757 13.5811C4.10995 13.4966 4.07512 13.4106 4.04503 13.3223L3.98546 13.127C3.90128 12.8128 3.88405 12.4624 3.88097 12.0479V7.47365C3.86934 7.47477 3.85825 7.47532 3.84777 7.47657L3.73058 7.49904C3.34804 7.60155 3.03853 7.87547 2.88878 8.23536L2.83507 8.39454C2.79967 8.52676 2.7921 8.71502 2.7921 9.44435V11.0332Z\"\n fill=\"currentColor\"\n />\n </svg>\n)\nThumbMixed.displayName = \"ThumbMixed\"\nexport default ThumbMixed\n"]}
|
|
@@ -6,7 +6,7 @@ import { mergeRefs } from "react-merge-refs";
|
|
|
6
6
|
import {} from "../../types";
|
|
7
7
|
import { X } from "../Icon";
|
|
8
8
|
import s from "./Input.module.css";
|
|
9
|
-
|
|
9
|
+
const InputRoot = (props) => {
|
|
10
10
|
const inputRef = useRef(null);
|
|
11
11
|
const inputIdSuffix = useId();
|
|
12
12
|
// Prevent 1Password from appearing: 1Password won't display if it thinks this field is for searching
|
|
@@ -81,7 +81,7 @@ export const Input = (props) => {
|
|
|
81
81
|
onAutofill?.();
|
|
82
82
|
}
|
|
83
83
|
};
|
|
84
|
-
return (_jsxs("div", { className: clsx(s.Container, className), "data-variant": variant, "data-size": size, "data-gutter-size": gutterSize, "data-focused": focused, "data-disabled": disabled ? "" : undefined, "data-readonly": readOnly ? "" : undefined, "data-invalid": invalid ? "" : undefined, "data-pill": pill ? "" : undefined, "data-optically-align": opticallyAlign, "data-has-start-adornment": StartAdornment ? "" : undefined, "data-has-end-adornment": EndAdornment || showClearButton ? "" : undefined, onMouseDown: handleMouseDown, children: [StartAdornment, _jsx("input", { ...restProps, ref: mergeRefs([ref, inputRef]), id: id || (allowAutofillExtensions ? undefined : onePasswordPreventionId), className: s.Input, type: type, name: name, value: value, defaultValue: defaultValue, readOnly: readOnly, disabled: disabled, onFocus: (evt) => {
|
|
84
|
+
return (_jsxs("div", { className: clsx(s.Container, className), "data-slot": "input", "data-variant": variant, "data-size": size, "data-gutter-size": gutterSize, "data-focused": focused, "data-disabled": disabled ? "" : undefined, "data-readonly": readOnly ? "" : undefined, "data-invalid": invalid ? "" : undefined, "data-pill": pill ? "" : undefined, "data-optically-align": opticallyAlign, "data-has-start-adornment": StartAdornment ? "" : undefined, "data-has-end-adornment": EndAdornment || showClearButton ? "" : undefined, onMouseDown: handleMouseDown, children: [StartAdornment, _jsx("input", { ...restProps, ref: mergeRefs([ref, inputRef]), id: id || (allowAutofillExtensions ? undefined : onePasswordPreventionId), className: s.Input, type: type, name: name, value: value, defaultValue: defaultValue, readOnly: readOnly, disabled: disabled, onFocus: (evt) => {
|
|
85
85
|
setFocused(true);
|
|
86
86
|
onFocus?.(evt);
|
|
87
87
|
}, onBlur: (evt) => {
|
|
@@ -89,4 +89,7 @@ export const Input = (props) => {
|
|
|
89
89
|
onBlur?.(evt);
|
|
90
90
|
}, onAnimationStart: handleAnimationStart, "data-lpignore": allowAutofillExtensions ? undefined : true, "data-1p-ignore": allowAutofillExtensions ? undefined : true }), showClearButton && (_jsx("button", { type: "button", "aria-label": "Clear input", className: s.Clear, onClick: onClear, children: _jsx(X, {}) })), EndAdornment] }));
|
|
91
91
|
};
|
|
92
|
+
const InputAdornmentButton = ({ className, type = "button", color, ref, ...restProps }) => (_jsx("button", { ref: ref, type: type, className: clsx(s.AdornmentButton, className), "data-color": color, ...restProps }));
|
|
93
|
+
export const Input = InputRoot;
|
|
94
|
+
Input.AdornmentButton = InputAdornmentButton;
|
|
92
95
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { useEffect, useId, useRef, useState } from \"react\"\nimport { mergeRefs } from \"react-merge-refs\"\nimport { type ControlSize, type Sizes, type Variants } from \"../../types\"\nimport { X } from \"../Icon\"\nimport s from \"./Input.module.css\"\n\nexport type InputProps = {\n /**\n * Visual style of the input\n * @default outline\n */\n variant?: Variants<\"outline\" | \"soft\">\n /**\n * Controls the size of the input\n *\n * | 3xs | 2xs | xs | sm | md | lg | xl | 2xl | 3xl |\n * | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- |\n * | `22px` | `24px` | `26px` | `28px` | `32px` | `36px` | `40px` | `44px` | `48px` |\n *\n * @default md\n */\n size?: ControlSize\n /**\n * Controls gutter on the edges of the input, defaults to value from `size`.\n *\n * | 2xs | xs | sm | md | lg | xl |\n * | ------ | ------ | ------ | ------ | ------ | ------ |\n * | `6px` | `8px` | `10px` | `12px` | `14px` | `16px` |\n */\n gutterSize?: Sizes<\"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\">\n /**\n * Disables the select visually and from interactions\n * @default false\n */\n disabled?: boolean\n /**\n * Mark the input as invalid\n * @default false\n */\n invalid?: boolean\n /**\n * Allow autofill extensions to appear in the input\n * @default false\n */\n allowAutofillExtensions?: boolean\n /**\n * Select all contents of the input when mounted.\n * @default false\n */\n autoSelect?: boolean\n /** Callback invoked when the input is autofilled by the browser */\n onAutofill?: () => void\n /** Content rendered at the start of the input */\n startAdornment?: React.ReactNode\n /** Content rendered at the end of the input */\n endAdornment?: React.ReactNode\n /**\n * Callback invoked when the clear button is clicked.\n * When provided, displays a clear button that appears when the input has a value.\n */\n onClear?: () => void\n /**\n * Determines if the button should be a fully rounded pill shape\n * @default false\n */\n pill?: boolean\n /**\n * Applies a negative margin using the current gutter to optically align the input\n * with surrounding content.\n */\n opticallyAlign?: \"start\" | \"end\"\n /** Ref for the input */\n ref?: React.Ref<HTMLInputElement | null>\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"disabled\" | \"size\">\n\nexport const Input = (props: InputProps) => {\n const inputRef = useRef<HTMLInputElement | null>(null)\n const inputIdSuffix = useId()\n // Prevent 1Password from appearing: 1Password won't display if it thinks this field is for searching\n // Allow user to override this for connecting to labels.\n const onePasswordPreventionId = `search-ui-input-${inputIdSuffix}`\n const {\n id,\n name,\n type = \"text\",\n variant = \"outline\",\n size = \"md\",\n gutterSize,\n className,\n autoComplete,\n disabled = false,\n readOnly = false,\n invalid = false,\n // Default to `true` when type=\"password\" or presence of `name`\n allowAutofillExtensions = type === \"password\" || !!name,\n onFocus,\n onBlur,\n onAnimationStart,\n onAutofill,\n autoSelect,\n startAdornment: StartAdornment,\n endAdornment: EndAdornment,\n onClear,\n pill,\n opticallyAlign,\n ref,\n value,\n defaultValue,\n ...restProps\n } = props\n\n // Determine if clear button should be shown\n const hasValue = value !== undefined ? !!value : !!defaultValue\n const showClearButton = !!onClear && hasValue && !disabled && !readOnly\n // Redirect clicks on the container and adornments\n const handleMouseDown = (evt: React.MouseEvent<HTMLDivElement>) => {\n const input = inputRef.current\n // Bail out if the target is not an element or the textarea is not found\n if (!evt.target || !(evt.target instanceof Element) || !input) {\n return\n }\n // Bail out if the target is inside the textarea\n if (input.contains(evt.target)) {\n return\n }\n // Bail out if the target is a button\n if (evt.target.closest(\"button, [type='button'], [role='button'], [role='menuitem']\")) {\n return\n }\n\n evt.preventDefault()\n // If the textarea is not focused, focus it\n if (document.activeElement !== input) {\n input.focus()\n }\n\n const { left, top } = input.getBoundingClientRect()\n const { clientX, clientY } = evt\n // \"Before\" the input: top/left\n const isBefore = clientY < top || clientX < left\n\n // If this is the first click, clear the selection.\n if (evt.detail === 1) {\n if (isBefore) {\n input.setSelectionRange(0, 0)\n } else {\n const length = input.value.length\n input.setSelectionRange(length, length)\n }\n }\n // If this is the second click, select the first or last word\n else if (evt.detail === 2) {\n // Split the textarea value into words and non-word characters\n const words = input.value.match(/\\w+|[^\\w\\s]/g) || []\n const selectedWord = isBefore ? words.at(0) : words.at(-1)\n if (selectedWord) {\n const wordIndex = isBefore\n ? input.value.indexOf(selectedWord)\n : input.value.lastIndexOf(selectedWord)\n input.setSelectionRange(wordIndex, wordIndex + selectedWord.length)\n }\n }\n // If this is the third click or greater, select the entire input\n else {\n input.select()\n }\n }\n\n const [focused, setFocused] = useState<boolean>(false)\n\n useEffect(() => {\n if (autoSelect) {\n inputRef.current?.select()\n }\n }, [autoSelect])\n\n const handleAnimationStart = (evt: React.AnimationEvent<HTMLInputElement>) => {\n onAnimationStart?.(evt)\n if (evt.animationName === \"native-autofill-in\") {\n onAutofill?.()\n }\n }\n\n return (\n <div\n className={clsx(s.Container, className)}\n data-variant={variant}\n data-size={size}\n data-gutter-size={gutterSize}\n data-focused={focused}\n data-disabled={disabled ? \"\" : undefined}\n data-readonly={readOnly ? \"\" : undefined}\n data-invalid={invalid ? \"\" : undefined}\n data-pill={pill ? \"\" : undefined}\n data-optically-align={opticallyAlign}\n data-has-start-adornment={StartAdornment ? \"\" : undefined}\n data-has-end-adornment={EndAdornment || showClearButton ? \"\" : undefined}\n onMouseDown={handleMouseDown}\n >\n {StartAdornment}\n <input\n {...restProps}\n ref={mergeRefs([ref, inputRef])}\n id={id || (allowAutofillExtensions ? undefined : onePasswordPreventionId)}\n className={s.Input}\n type={type}\n name={name}\n value={value}\n defaultValue={defaultValue}\n readOnly={readOnly}\n disabled={disabled}\n onFocus={(evt) => {\n setFocused(true)\n onFocus?.(evt)\n }}\n onBlur={(evt) => {\n setFocused(false)\n onBlur?.(evt)\n }}\n onAnimationStart={handleAnimationStart}\n // Prevent LastPass and 1Password from appearing\n data-lpignore={allowAutofillExtensions ? undefined : true}\n data-1p-ignore={allowAutofillExtensions ? undefined : true}\n />\n {showClearButton && (\n <button type=\"button\" aria-label=\"Clear input\" className={s.Clear} onClick={onClear}>\n <X />\n </button>\n )}\n {EndAdornment}\n </div>\n )\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { useEffect, useId, useRef, useState } from \"react\"\nimport { mergeRefs } from \"react-merge-refs\"\nimport { type ControlSize, type SemanticColor, type Sizes, type Variants } from \"../../types\"\nimport { X } from \"../Icon\"\nimport s from \"./Input.module.css\"\n\nexport type InputProps = {\n /**\n * Visual style of the input\n * @default outline\n */\n variant?: Variants<\"outline\" | \"soft\">\n /**\n * Controls the size of the input\n *\n * | 3xs | 2xs | xs | sm | md | lg | xl | 2xl | 3xl |\n * | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- |\n * | `22px` | `24px` | `26px` | `28px` | `32px` | `36px` | `40px` | `44px` | `48px` |\n *\n * @default md\n */\n size?: ControlSize\n /**\n * Controls gutter on the edges of the input, defaults to value from `size`.\n *\n * | 2xs | xs | sm | md | lg | xl |\n * | ------ | ------ | ------ | ------ | ------ | ------ |\n * | `6px` | `8px` | `10px` | `12px` | `14px` | `16px` |\n */\n gutterSize?: Sizes<\"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\">\n /**\n * Disables the select visually and from interactions\n * @default false\n */\n disabled?: boolean\n /**\n * Mark the input as invalid\n * @default false\n */\n invalid?: boolean\n /**\n * Allow autofill extensions to appear in the input\n * @default false\n */\n allowAutofillExtensions?: boolean\n /**\n * Select all contents of the input when mounted.\n * @default false\n */\n autoSelect?: boolean\n /** Callback invoked when the input is autofilled by the browser */\n onAutofill?: () => void\n /** Content rendered at the start of the input */\n startAdornment?: React.ReactNode\n /** Content rendered at the end of the input */\n endAdornment?: React.ReactNode\n /**\n * Callback invoked when the clear button is clicked.\n * When provided, displays a clear button that appears when the input has a value.\n */\n onClear?: () => void\n /**\n * Determines if the button should be a fully rounded pill shape\n * @default false\n */\n pill?: boolean\n /**\n * Applies a negative margin using the current gutter to optically align the input\n * with surrounding content.\n */\n opticallyAlign?: \"start\" | \"end\"\n /** Ref for the input */\n ref?: React.Ref<HTMLInputElement | null>\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"disabled\" | \"size\">\n\nconst InputRoot = (props: InputProps) => {\n const inputRef = useRef<HTMLInputElement | null>(null)\n const inputIdSuffix = useId()\n // Prevent 1Password from appearing: 1Password won't display if it thinks this field is for searching\n // Allow user to override this for connecting to labels.\n const onePasswordPreventionId = `search-ui-input-${inputIdSuffix}`\n const {\n id,\n name,\n type = \"text\",\n variant = \"outline\",\n size = \"md\",\n gutterSize,\n className,\n autoComplete,\n disabled = false,\n readOnly = false,\n invalid = false,\n // Default to `true` when type=\"password\" or presence of `name`\n allowAutofillExtensions = type === \"password\" || !!name,\n onFocus,\n onBlur,\n onAnimationStart,\n onAutofill,\n autoSelect,\n startAdornment: StartAdornment,\n endAdornment: EndAdornment,\n onClear,\n pill,\n opticallyAlign,\n ref,\n value,\n defaultValue,\n ...restProps\n } = props\n\n // Determine if clear button should be shown\n const hasValue = value !== undefined ? !!value : !!defaultValue\n const showClearButton = !!onClear && hasValue && !disabled && !readOnly\n // Redirect clicks on the container and adornments\n const handleMouseDown = (evt: React.MouseEvent<HTMLDivElement>) => {\n const input = inputRef.current\n // Bail out if the target is not an element or the textarea is not found\n if (!evt.target || !(evt.target instanceof Element) || !input) {\n return\n }\n // Bail out if the target is inside the textarea\n if (input.contains(evt.target)) {\n return\n }\n // Bail out if the target is a button\n if (evt.target.closest(\"button, [type='button'], [role='button'], [role='menuitem']\")) {\n return\n }\n\n evt.preventDefault()\n // If the textarea is not focused, focus it\n if (document.activeElement !== input) {\n input.focus()\n }\n\n const { left, top } = input.getBoundingClientRect()\n const { clientX, clientY } = evt\n // \"Before\" the input: top/left\n const isBefore = clientY < top || clientX < left\n\n // If this is the first click, clear the selection.\n if (evt.detail === 1) {\n if (isBefore) {\n input.setSelectionRange(0, 0)\n } else {\n const length = input.value.length\n input.setSelectionRange(length, length)\n }\n }\n // If this is the second click, select the first or last word\n else if (evt.detail === 2) {\n // Split the textarea value into words and non-word characters\n const words = input.value.match(/\\w+|[^\\w\\s]/g) || []\n const selectedWord = isBefore ? words.at(0) : words.at(-1)\n if (selectedWord) {\n const wordIndex = isBefore\n ? input.value.indexOf(selectedWord)\n : input.value.lastIndexOf(selectedWord)\n input.setSelectionRange(wordIndex, wordIndex + selectedWord.length)\n }\n }\n // If this is the third click or greater, select the entire input\n else {\n input.select()\n }\n }\n\n const [focused, setFocused] = useState<boolean>(false)\n\n useEffect(() => {\n if (autoSelect) {\n inputRef.current?.select()\n }\n }, [autoSelect])\n\n const handleAnimationStart = (evt: React.AnimationEvent<HTMLInputElement>) => {\n onAnimationStart?.(evt)\n if (evt.animationName === \"native-autofill-in\") {\n onAutofill?.()\n }\n }\n\n return (\n <div\n className={clsx(s.Container, className)}\n data-slot=\"input\"\n data-variant={variant}\n data-size={size}\n data-gutter-size={gutterSize}\n data-focused={focused}\n data-disabled={disabled ? \"\" : undefined}\n data-readonly={readOnly ? \"\" : undefined}\n data-invalid={invalid ? \"\" : undefined}\n data-pill={pill ? \"\" : undefined}\n data-optically-align={opticallyAlign}\n data-has-start-adornment={StartAdornment ? \"\" : undefined}\n data-has-end-adornment={EndAdornment || showClearButton ? \"\" : undefined}\n onMouseDown={handleMouseDown}\n >\n {StartAdornment}\n <input\n {...restProps}\n ref={mergeRefs([ref, inputRef])}\n id={id || (allowAutofillExtensions ? undefined : onePasswordPreventionId)}\n className={s.Input}\n type={type}\n name={name}\n value={value}\n defaultValue={defaultValue}\n readOnly={readOnly}\n disabled={disabled}\n onFocus={(evt) => {\n setFocused(true)\n onFocus?.(evt)\n }}\n onBlur={(evt) => {\n setFocused(false)\n onBlur?.(evt)\n }}\n onAnimationStart={handleAnimationStart}\n // Prevent LastPass and 1Password from appearing\n data-lpignore={allowAutofillExtensions ? undefined : true}\n data-1p-ignore={allowAutofillExtensions ? undefined : true}\n />\n {showClearButton && (\n <button type=\"button\" aria-label=\"Clear input\" className={s.Clear} onClick={onClear}>\n <X />\n </button>\n )}\n {EndAdornment}\n </div>\n )\n}\n\n/* ------------------------------------------------------------------ */\n/* AdornmentButton — canonical inline action button for Input slots */\n/* (mic toggle, visibility toggle, copy, etc.). Sizes itself off the */\n/* parent Input via --input-clear-size / --input-clear-pill-offset */\n/* so it stays visually consistent with the built-in clear button. */\n/* ------------------------------------------------------------------ */\n\nexport type InputAdornmentButtonProps = Omit<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n \"ref\" | \"color\"\n> & {\n ref?: React.Ref<HTMLButtonElement>\n /**\n * Applies a semantic color tint to the pressed (`aria-pressed=\"true\"`) state\n * — the same palette Button accepts. Default `aria-pressed` keeps the\n * neutral primary-soft tint.\n */\n color?: SemanticColor\n}\n\nconst InputAdornmentButton = ({\n className,\n type = \"button\",\n color,\n ref,\n ...restProps\n}: InputAdornmentButtonProps) => (\n <button\n ref={ref}\n type={type}\n className={clsx(s.AdornmentButton, className)}\n data-color={color}\n {...restProps}\n />\n)\n\ntype InputComponent = typeof InputRoot & {\n AdornmentButton: typeof InputAdornmentButton\n}\n\nexport const Input = InputRoot as InputComponent\nInput.AdornmentButton = InputAdornmentButton\n"]}
|
|
@@ -234,11 +234,21 @@
|
|
|
234
234
|
|
|
235
235
|
/* =============================================
|
|
236
236
|
Disabled
|
|
237
|
+
---------------------------------------------
|
|
238
|
+
Fade the input text and the built-in Clear button, but keep the
|
|
239
|
+
Container's chrome (border, focus ring) and any AdornmentButton
|
|
240
|
+
at full opacity — AdornmentButtons often double as toggles that
|
|
241
|
+
remain interactive while the input is disabled (voice-mode switch,
|
|
242
|
+
edit-in-place, etc.).
|
|
237
243
|
============================================= */
|
|
238
244
|
.Container[data-disabled] {
|
|
239
245
|
cursor: not-allowed;
|
|
240
|
-
opacity: 0.5;
|
|
241
246
|
}
|
|
247
|
+
|
|
248
|
+
.Container[data-disabled] > .Input,
|
|
249
|
+
.Container[data-disabled] > .Clear {
|
|
250
|
+
opacity: 0.5;
|
|
251
|
+
}
|
|
242
252
|
/*
|
|
243
253
|
* When adornments are present, gutter is applied to the container instead of the input.
|
|
244
254
|
*/
|
|
@@ -269,7 +279,7 @@
|
|
|
269
279
|
margin-left: var(--input-adornment-offset, -2px);
|
|
270
280
|
}
|
|
271
281
|
|
|
272
|
-
.Container > :last-child:not(input, .Clear) {
|
|
282
|
+
.Container > :last-child:not(input, .Clear, .AdornmentButton) {
|
|
273
283
|
margin-right: var(--input-adornment-offset, -2px);
|
|
274
284
|
}.Input {
|
|
275
285
|
display: block;
|
|
@@ -410,6 +420,81 @@
|
|
|
410
420
|
.Clear > svg {
|
|
411
421
|
width: var(--input-clear-icon-size);
|
|
412
422
|
height: var(--input-clear-icon-size);
|
|
423
|
+
}/* AdornmentButton — public sibling of .Clear for in-input action buttons
|
|
424
|
+
(mic toggle, copy, send, etc.). Sized from the Input's own size token:
|
|
425
|
+
input height minus one spacing step each side leaves ~4px of breathing
|
|
426
|
+
room top + bottom, so a md (32px) input gets a 24px pill, an lg (36px)
|
|
427
|
+
gets 28px, etc. Radius is --radius-full so a pill input stays
|
|
428
|
+
concentric with the button. Icon fills half the button. */.AdornmentButton {
|
|
429
|
+
display: flex;
|
|
430
|
+
align-items: center;
|
|
431
|
+
justify-content: center;
|
|
432
|
+
flex-shrink: 0;
|
|
433
|
+
width: calc(var(--input-size) - calc(var(--spacing) * 2));
|
|
434
|
+
height: calc(var(--input-size) - calc(var(--spacing) * 2));
|
|
435
|
+
padding: 0;
|
|
436
|
+
border: 0;
|
|
437
|
+
border-radius: var(--radius-full);
|
|
438
|
+
/* Concentric with the input edge — leave a spacing(1) = 4px breathing
|
|
439
|
+
gap between the button's outer edge and the input's inner edge.
|
|
440
|
+
For a non-pill input that's `4 - gutter`; a pill input scales the
|
|
441
|
+
gutter by --control-gutter-pill-scaling. */
|
|
442
|
+
margin-right: calc(calc(var(--spacing) * 1) - var(--input-gutter));
|
|
443
|
+
background-color: transparent;
|
|
444
|
+
color: var(--color-text-tertiary);
|
|
445
|
+
cursor: pointer;
|
|
446
|
+
transition-duration: var(--transition-duration-basic);
|
|
447
|
+
transition-property: background-color, color;
|
|
448
|
+
transition-timing-function: var(--transition-ease-basic);
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
.AdornmentButton:hover {
|
|
452
|
+
background-color: var(--color-background-secondary-soft-alpha);
|
|
453
|
+
color: var(--color-text);
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
.AdornmentButton[aria-pressed="true"] {
|
|
457
|
+
background-color: var(--color-background-primary-soft);
|
|
458
|
+
color: var(--color-text);
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
.AdornmentButton[data-color="caution"][aria-pressed="true"] {
|
|
462
|
+
background-color: var(--color-background-caution-soft);
|
|
463
|
+
color: var(--color-text-caution-soft);
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
.AdornmentButton[data-color="danger"][aria-pressed="true"] {
|
|
467
|
+
background-color: var(--color-background-danger-soft);
|
|
468
|
+
color: var(--color-text-danger-soft);
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
.AdornmentButton[data-color="success"][aria-pressed="true"] {
|
|
472
|
+
background-color: var(--color-background-success-soft);
|
|
473
|
+
color: var(--color-text-success-soft);
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
.AdornmentButton[data-color="info"][aria-pressed="true"] {
|
|
477
|
+
background-color: var(--color-background-info-soft);
|
|
478
|
+
color: var(--color-text-info-soft);
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
.AdornmentButton[data-color="discovery"][aria-pressed="true"] {
|
|
482
|
+
background-color: var(--color-background-discovery-soft);
|
|
483
|
+
color: var(--color-text-discovery-soft);
|
|
484
|
+
}
|
|
485
|
+
|
|
486
|
+
.AdornmentButton:disabled {
|
|
487
|
+
cursor: not-allowed;
|
|
488
|
+
opacity: 0.5;
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
:where(.Container[data-pill]) .AdornmentButton {
|
|
492
|
+
margin-right: calc(calc(var(--spacing) * 1) - var(--input-gutter) * var(--control-gutter-pill-scaling));
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
.AdornmentButton > svg {
|
|
496
|
+
width: calc(var(--input-size) / 2);
|
|
497
|
+
height: calc(var(--input-size) / 2);
|
|
413
498
|
}@keyframes native-autofill-in {
|
|
414
499
|
0% {
|
|
415
500
|
opacity: 1;
|
|
@@ -131,6 +131,12 @@
|
|
|
131
131
|
ButtonGroup
|
|
132
132
|
============================================= */
|
|
133
133
|
--button-group-nested-gap: calc(var(--spacing) * 2);
|
|
134
|
+
--button-group-separator-color: var(--color-border-strong, var(--color-border));
|
|
135
|
+
--button-group-text-background: var(--color-background-secondary-soft);
|
|
136
|
+
--button-group-text-color: var(--color-text-primary);
|
|
137
|
+
--button-group-text-border-color: var(--color-border-secondary-outline, var(--color-border));
|
|
138
|
+
--button-group-text-font-size: var(--font-text-sm-size);
|
|
139
|
+
--button-group-text-font-weight: var(--font-weight-medium);
|
|
134
140
|
|
|
135
141
|
/* =============================================
|
|
136
142
|
Accordion
|
|
@@ -19,8 +19,20 @@ export type ButtonGroupSeparatorProps = Omit<ComponentProps<typeof Separator>, "
|
|
|
19
19
|
orientation?: ButtonGroupOrientation;
|
|
20
20
|
};
|
|
21
21
|
declare const ButtonGroupSeparator: ({ className, orientation, ...restProps }: ButtonGroupSeparatorProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export type ButtonGroupTextProps = HTMLAttributes<HTMLDivElement> & {
|
|
23
|
+
/**
|
|
24
|
+
* Swap the rendered element for a child (label, span, etc.) while
|
|
25
|
+
* keeping the group's visual treatment.
|
|
26
|
+
* @default false
|
|
27
|
+
*/
|
|
28
|
+
asChild?: boolean;
|
|
29
|
+
className?: string;
|
|
30
|
+
ref?: Ref<HTMLDivElement>;
|
|
31
|
+
};
|
|
32
|
+
declare const ButtonGroupText: ({ asChild, className, ref, ...restProps }: ButtonGroupTextProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
33
|
type ButtonGroupComponent = typeof ButtonGroupRoot & {
|
|
23
34
|
Separator: typeof ButtonGroupSeparator;
|
|
35
|
+
Text: typeof ButtonGroupText;
|
|
24
36
|
};
|
|
25
37
|
export declare const ButtonGroup: ButtonGroupComponent;
|
|
26
38
|
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ControlSize, type Sizes, type Variants } from "../../types";
|
|
1
|
+
import { type ControlSize, type SemanticColor, type Sizes, type Variants } from "../../types";
|
|
2
2
|
export type InputProps = {
|
|
3
3
|
/**
|
|
4
4
|
* Visual style of the input
|
|
@@ -67,4 +67,19 @@ export type InputProps = {
|
|
|
67
67
|
/** Ref for the input */
|
|
68
68
|
ref?: React.Ref<HTMLInputElement | null>;
|
|
69
69
|
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled" | "size">;
|
|
70
|
-
|
|
70
|
+
declare const InputRoot: (props: InputProps) => import("react/jsx-runtime").JSX.Element;
|
|
71
|
+
export type InputAdornmentButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "ref" | "color"> & {
|
|
72
|
+
ref?: React.Ref<HTMLButtonElement>;
|
|
73
|
+
/**
|
|
74
|
+
* Applies a semantic color tint to the pressed (`aria-pressed="true"`) state
|
|
75
|
+
* — the same palette Button accepts. Default `aria-pressed` keeps the
|
|
76
|
+
* neutral primary-soft tint.
|
|
77
|
+
*/
|
|
78
|
+
color?: SemanticColor;
|
|
79
|
+
};
|
|
80
|
+
declare const InputAdornmentButton: ({ className, type, color, ref, ...restProps }: InputAdornmentButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
81
|
+
type InputComponent = typeof InputRoot & {
|
|
82
|
+
AdornmentButton: typeof InputAdornmentButton;
|
|
83
|
+
};
|
|
84
|
+
export declare const Input: InputComponent;
|
|
85
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plexui/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.14.1",
|
|
4
4
|
"description": "Modern design system for building high-quality applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -70,6 +70,9 @@
|
|
|
70
70
|
"build:clean": "rm -rf dist",
|
|
71
71
|
"build:js": "tsc -p tsconfig.build.json",
|
|
72
72
|
"build:css": "node ./scripts/build-css.mjs",
|
|
73
|
+
"dev:js": "tsc -p tsconfig.build.json --watch --preserveWatchOutput",
|
|
74
|
+
"dev:css": "node ./scripts/build-css.mjs --watch",
|
|
75
|
+
"dev": "npm run build:clean && npm run build:js && npm run build:css && npm run build:assets && (npm run dev:js & npm run dev:css & wait)",
|
|
73
76
|
"build:assets": "node -e \"const fs=require('fs'),p=require('path');function c(s,d){fs.readdirSync(s,{withFileTypes:true}).forEach(e=>{const sp=p.join(s,e.name),dp=p.join(d,e.name);if(e.isDirectory()){c(sp,dp)}else if(e.name.endsWith('.d.ts')){fs.mkdirSync(d,{recursive:true});fs.copyFileSync(sp,dp)}})}c('src','dist/types')\"",
|
|
74
77
|
"build": "npm run build:clean && npm run build:js && npm run build:css && npm run build:assets",
|
|
75
78
|
"prepublishOnly": "npm run build",
|