@postenbring/hedwig-react 2.2.1 → 3.0.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/{chunk-ITLZQ47H.mjs → chunk-3VKESN3T.mjs} +4 -4
- package/dist/chunk-3VKESN3T.mjs.map +1 -0
- package/dist/{chunk-XZ43OSZ5.mjs → chunk-6OJINZ37.mjs} +4 -4
- package/dist/chunk-6OJINZ37.mjs.map +1 -0
- package/dist/{chunk-23IZCRJA.mjs → chunk-J35DWEJX.mjs} +5 -5
- package/dist/chunk-J35DWEJX.mjs.map +1 -0
- package/dist/{chunk-JEAGKB4V.mjs → chunk-N4W3OMA2.mjs} +4 -4
- package/dist/chunk-N4W3OMA2.mjs.map +1 -0
- package/dist/{chunk-AXEAIXG7.mjs → chunk-NBEGX26X.mjs} +4 -4
- package/dist/chunk-NBEGX26X.mjs.map +1 -0
- package/dist/form/date-picker/date-picker.d.ts +2 -2
- package/dist/form/date-picker/date-picker.d.ts.map +1 -1
- package/dist/form/date-picker/date-picker.js +6 -6
- package/dist/form/date-picker/date-picker.js.map +1 -1
- package/dist/form/date-picker/date-picker.mjs +2 -2
- package/dist/form/date-picker/index.js +6 -6
- package/dist/form/date-picker/index.js.map +1 -1
- package/dist/form/date-picker/index.mjs +2 -2
- package/dist/form/index.js +12 -12
- package/dist/form/index.js.map +1 -1
- package/dist/form/index.mjs +5 -5
- package/dist/form/input/index.js +5 -5
- package/dist/form/input/index.js.map +1 -1
- package/dist/form/input/index.mjs +2 -2
- package/dist/form/input/input.d.ts +8 -1
- package/dist/form/input/input.d.ts.map +1 -1
- package/dist/form/input/input.js +5 -5
- package/dist/form/input/input.js.map +1 -1
- package/dist/form/input/input.mjs +2 -2
- package/dist/form/input-group/index.js +3 -3
- package/dist/form/input-group/index.js.map +1 -1
- package/dist/form/input-group/index.mjs +1 -1
- package/dist/form/input-group/input-group.d.ts +1 -1
- package/dist/form/input-group/input-group.d.ts.map +1 -1
- package/dist/form/input-group/input-group.js +3 -3
- package/dist/form/input-group/input-group.js.map +1 -1
- package/dist/form/input-group/input-group.mjs +1 -1
- package/dist/form/select/index.js +5 -5
- package/dist/form/select/index.js.map +1 -1
- package/dist/form/select/index.mjs +2 -2
- package/dist/form/select/select.d.ts +2 -2
- package/dist/form/select/select.d.ts.map +1 -1
- package/dist/form/select/select.js +5 -5
- package/dist/form/select/select.js.map +1 -1
- package/dist/form/select/select.mjs +2 -2
- package/dist/form/textarea/index.js +5 -5
- package/dist/form/textarea/index.js.map +1 -1
- package/dist/form/textarea/index.mjs +2 -2
- package/dist/form/textarea/textarea.js +5 -5
- package/dist/form/textarea/textarea.js.map +1 -1
- package/dist/form/textarea/textarea.mjs +2 -2
- package/dist/index.js +12 -12
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +5 -5
- package/package.json +2 -2
- package/src/form/date-picker/date-picker.stories.tsx +2 -2
- package/src/form/date-picker/date-picker.tsx +3 -3
- package/src/form/input/input.stories.tsx +2 -2
- package/src/form/input/input.tsx +13 -3
- package/src/form/input-group/input-group.tsx +3 -3
- package/src/form/select/select.stories.tsx +2 -2
- package/src/form/select/select.tsx +4 -4
- package/src/form/textarea/textarea.stories.tsx +2 -2
- package/src/form/textarea/textarea.tsx +2 -2
- package/dist/chunk-23IZCRJA.mjs.map +0 -1
- package/dist/chunk-AXEAIXG7.mjs.map +0 -1
- package/dist/chunk-ITLZQ47H.mjs.map +0 -1
- package/dist/chunk-JEAGKB4V.mjs.map +0 -1
- package/dist/chunk-XZ43OSZ5.mjs.map +0 -1
package/dist/index.mjs
CHANGED
|
@@ -108,16 +108,16 @@ import "./chunk-IJSEJZ3W.mjs";
|
|
|
108
108
|
import "./chunk-BYEJZSG5.mjs";
|
|
109
109
|
import {
|
|
110
110
|
Select
|
|
111
|
-
} from "./chunk-
|
|
111
|
+
} from "./chunk-NBEGX26X.mjs";
|
|
112
112
|
import "./chunk-AGZHQDCQ.mjs";
|
|
113
113
|
import {
|
|
114
114
|
Textarea
|
|
115
|
-
} from "./chunk-
|
|
115
|
+
} from "./chunk-N4W3OMA2.mjs";
|
|
116
116
|
import "./chunk-KPPLVGZ3.mjs";
|
|
117
117
|
import "./chunk-7LPYJC6S.mjs";
|
|
118
118
|
import {
|
|
119
119
|
Input
|
|
120
|
-
} from "./chunk-
|
|
120
|
+
} from "./chunk-3VKESN3T.mjs";
|
|
121
121
|
import "./chunk-XAFNJELJ.mjs";
|
|
122
122
|
import {
|
|
123
123
|
RadioButton
|
|
@@ -138,9 +138,9 @@ import {
|
|
|
138
138
|
import "./chunk-TDLSHJ4Z.mjs";
|
|
139
139
|
import {
|
|
140
140
|
DatePicker
|
|
141
|
-
} from "./chunk-
|
|
141
|
+
} from "./chunk-J35DWEJX.mjs";
|
|
142
142
|
import "./chunk-Y5SUMFYJ.mjs";
|
|
143
|
-
import "./chunk-
|
|
143
|
+
import "./chunk-6OJINZ37.mjs";
|
|
144
144
|
import "./chunk-NSLSA7F7.mjs";
|
|
145
145
|
import {
|
|
146
146
|
ErrorMessage
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@postenbring/hedwig-react",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.1",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"module": "./dist/index.mjs",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"@radix-ui/react-popover": "1.1.14",
|
|
33
33
|
"@radix-ui/react-slot": "1.2.3",
|
|
34
|
-
"@postenbring/hedwig-css": "
|
|
34
|
+
"@postenbring/hedwig-css": "3.0.1"
|
|
35
35
|
},
|
|
36
36
|
"publishConfig": {
|
|
37
37
|
"access": "public"
|
|
@@ -6,7 +6,7 @@ const meta: Meta<typeof DatePicker> = {
|
|
|
6
6
|
title: "Form/Date Picker",
|
|
7
7
|
component: DatePicker,
|
|
8
8
|
argTypes: {
|
|
9
|
-
|
|
9
|
+
size: { control: "inline-radio", options: ["large", "small"] },
|
|
10
10
|
},
|
|
11
11
|
};
|
|
12
12
|
|
|
@@ -20,7 +20,7 @@ export const Preview: Story = {
|
|
|
20
20
|
label: "Choose a date",
|
|
21
21
|
errorMessage: "",
|
|
22
22
|
readOnly: false,
|
|
23
|
-
|
|
23
|
+
size: "large",
|
|
24
24
|
min: "2024-04-05",
|
|
25
25
|
max: "2026-04-04",
|
|
26
26
|
calendarButtonTitle: "Open calendar",
|
|
@@ -4,7 +4,7 @@ import { InputGroup, type InputGroupProps } from "../input-group";
|
|
|
4
4
|
import { useMergeRefs } from "../../utils/utils";
|
|
5
5
|
|
|
6
6
|
export type DatePickerProps = Omit<
|
|
7
|
-
InputGroupProps & InputHTMLAttributes<HTMLInputElement>,
|
|
7
|
+
InputGroupProps & Omit<InputHTMLAttributes<HTMLInputElement>, "size">,
|
|
8
8
|
"children" | "type"
|
|
9
9
|
> & {
|
|
10
10
|
/**
|
|
@@ -30,7 +30,7 @@ export type DatePickerProps = Omit<
|
|
|
30
30
|
export const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(function DatePicker(
|
|
31
31
|
{
|
|
32
32
|
className,
|
|
33
|
-
|
|
33
|
+
size,
|
|
34
34
|
errorMessage,
|
|
35
35
|
labelProps,
|
|
36
36
|
label,
|
|
@@ -56,7 +56,7 @@ export const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(function
|
|
|
56
56
|
labelProps={labelProps}
|
|
57
57
|
readOnly={readOnly}
|
|
58
58
|
style={style}
|
|
59
|
-
|
|
59
|
+
size={size}
|
|
60
60
|
>
|
|
61
61
|
{(inputProps) => (
|
|
62
62
|
<>
|
|
@@ -18,9 +18,9 @@ export const Preview: Story = {
|
|
|
18
18
|
placeholder: "I am a placeholder",
|
|
19
19
|
errorMessage: "",
|
|
20
20
|
readOnly: false,
|
|
21
|
-
|
|
21
|
+
size: "large",
|
|
22
22
|
},
|
|
23
23
|
argTypes: {
|
|
24
|
-
|
|
24
|
+
size: { control: "inline-radio", options: ["large", "small"] },
|
|
25
25
|
},
|
|
26
26
|
};
|
package/src/form/input/input.tsx
CHANGED
|
@@ -4,10 +4,20 @@ import { clsx } from "@postenbring/hedwig-css/typed-classname";
|
|
|
4
4
|
import { InputGroup } from "../input-group";
|
|
5
5
|
import type { InputGroupProps } from "../input-group";
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
/**
|
|
8
|
+
* Omitting:
|
|
9
|
+
* - `size` from InputHTMLAttributes
|
|
10
|
+
* - `children` from InputGroupProps
|
|
11
|
+
* The original `size` prop that input elements have is not in use in HDS.
|
|
12
|
+
* It is overridden by styling.
|
|
13
|
+
*/
|
|
14
|
+
export type InputProps = Omit<
|
|
15
|
+
InputGroupProps & Omit<InputHTMLAttributes<HTMLInputElement>, "size">,
|
|
16
|
+
"children"
|
|
17
|
+
>;
|
|
8
18
|
|
|
9
19
|
export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
|
|
10
|
-
{ className,
|
|
20
|
+
{ className, size, errorMessage, labelProps, label, id, style, disabled, readOnly, ...rest },
|
|
11
21
|
ref,
|
|
12
22
|
) {
|
|
13
23
|
return (
|
|
@@ -20,7 +30,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
|
|
|
20
30
|
labelProps={labelProps}
|
|
21
31
|
readOnly={readOnly}
|
|
22
32
|
style={style}
|
|
23
|
-
|
|
33
|
+
size={size}
|
|
24
34
|
>
|
|
25
35
|
<input {...rest} disabled={disabled} readOnly={readOnly} ref={ref} />
|
|
26
36
|
</InputGroup>
|
|
@@ -14,7 +14,7 @@ export interface InputGroupProps {
|
|
|
14
14
|
id?: string;
|
|
15
15
|
className?: string;
|
|
16
16
|
style?: CSSProperties;
|
|
17
|
-
|
|
17
|
+
size?: "large" | "small";
|
|
18
18
|
errorMessage?: ReactNode;
|
|
19
19
|
errorMessageProps?: Partial<ErrorMessageProps>;
|
|
20
20
|
labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
|
|
@@ -34,7 +34,7 @@ export const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function I
|
|
|
34
34
|
id,
|
|
35
35
|
className,
|
|
36
36
|
style,
|
|
37
|
-
|
|
37
|
+
size = "large",
|
|
38
38
|
errorMessage,
|
|
39
39
|
errorMessageProps,
|
|
40
40
|
labelProps: { className: labelClassName, ...labelProps } = {},
|
|
@@ -79,7 +79,7 @@ export const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function I
|
|
|
79
79
|
className={clsx(
|
|
80
80
|
"hds-input-group",
|
|
81
81
|
{
|
|
82
|
-
[`hds-input-group--${
|
|
82
|
+
[`hds-input-group--${size}`]: size,
|
|
83
83
|
"hds-input-group--error": errorMessage,
|
|
84
84
|
},
|
|
85
85
|
className as undefined,
|
|
@@ -16,10 +16,10 @@ export const Preview: Story = {
|
|
|
16
16
|
args: {
|
|
17
17
|
label: "Default select",
|
|
18
18
|
errorMessage: "",
|
|
19
|
-
|
|
19
|
+
size: "large",
|
|
20
20
|
},
|
|
21
21
|
argTypes: {
|
|
22
|
-
|
|
22
|
+
size: { control: "inline-radio", options: ["large", "small"] },
|
|
23
23
|
},
|
|
24
24
|
render: (props) => (
|
|
25
25
|
<Select {...props} defaultValue="">
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { forwardRef, type ReactNode
|
|
1
|
+
import { forwardRef, type ReactNode, type SelectHTMLAttributes } from "react";
|
|
2
2
|
import { clsx } from "@postenbring/hedwig-css/typed-classname";
|
|
3
3
|
import { InputGroup } from "../input-group";
|
|
4
4
|
import type { InputGroupProps } from "../input-group";
|
|
5
5
|
|
|
6
6
|
export type SelectProps = Omit<
|
|
7
|
-
InputGroupProps & SelectHTMLAttributes<HTMLSelectElement>,
|
|
7
|
+
InputGroupProps & Omit<SelectHTMLAttributes<HTMLSelectElement>, "size">,
|
|
8
8
|
"readOnly" | "children"
|
|
9
9
|
> & { children: ReactNode };
|
|
10
10
|
|
|
11
11
|
export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
|
|
12
|
-
{ className,
|
|
12
|
+
{ className, size, errorMessage, labelProps, label, id, style, disabled, children, ...rest },
|
|
13
13
|
ref,
|
|
14
14
|
) {
|
|
15
15
|
return (
|
|
@@ -21,7 +21,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select
|
|
|
21
21
|
label={label}
|
|
22
22
|
labelProps={labelProps}
|
|
23
23
|
style={style}
|
|
24
|
-
|
|
24
|
+
size={size}
|
|
25
25
|
>
|
|
26
26
|
<select {...rest} disabled={disabled} ref={ref}>
|
|
27
27
|
{children}
|
|
@@ -6,7 +6,7 @@ const meta: Meta<typeof Textarea> = {
|
|
|
6
6
|
title: "Form/Textarea",
|
|
7
7
|
component: Textarea,
|
|
8
8
|
argTypes: {
|
|
9
|
-
|
|
9
|
+
size: { control: "inline-radio", options: ["large", "small"] },
|
|
10
10
|
},
|
|
11
11
|
};
|
|
12
12
|
|
|
@@ -21,6 +21,6 @@ export const Preview: Story = {
|
|
|
21
21
|
placeholder: "I am a placeholder",
|
|
22
22
|
errorMessage: "",
|
|
23
23
|
readOnly: false,
|
|
24
|
-
|
|
24
|
+
size: "large",
|
|
25
25
|
},
|
|
26
26
|
};
|
|
@@ -10,7 +10,7 @@ export type TextareaProps = Omit<
|
|
|
10
10
|
>;
|
|
11
11
|
|
|
12
12
|
export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
|
|
13
|
-
{ className,
|
|
13
|
+
{ className, size, errorMessage, labelProps, label, id, style, disabled, readOnly, ...rest },
|
|
14
14
|
ref,
|
|
15
15
|
) {
|
|
16
16
|
return (
|
|
@@ -23,7 +23,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function
|
|
|
23
23
|
labelProps={labelProps}
|
|
24
24
|
readOnly={readOnly}
|
|
25
25
|
style={style}
|
|
26
|
-
|
|
26
|
+
size={size}
|
|
27
27
|
>
|
|
28
28
|
<textarea {...rest} disabled={disabled} readOnly={readOnly} ref={ref} />
|
|
29
29
|
</InputGroup>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/form/date-picker/date-picker.tsx"],"sourcesContent":["import { forwardRef, useRef, type InputHTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { InputGroup, type InputGroupProps } from \"../input-group\";\nimport { useMergeRefs } from \"../../utils/utils\";\n\nexport type DatePickerProps = Omit<\n InputGroupProps & InputHTMLAttributes<HTMLInputElement>,\n \"children\" | \"type\"\n> & {\n /**\n * Accessible title for the calendar button\n *\n * This button currently only shows in Chrome.\n *\n * @defaultValue \"Åpne kalender\"\n */\n calendarButtonTitle?: string;\n};\n\n/**\n * A basic implementation of a date picker\n *\n * This date picker is an implementation of native date picker, as you get\n * with `<input type=\"date\" />`, where the input field is dressed in Hedwig styling.\n *\n * Due to accessibility concerns you will only see the appropriate Hedwig calendar\n * icon in Chrome. Firefox will show built in icon and Safari will show no icon.\n * Not tested in Edge.\n */\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(function DatePicker(\n {\n className,\n variant,\n errorMessage,\n labelProps,\n label,\n id,\n style,\n disabled,\n readOnly,\n calendarButtonTitle = \"Åpne kalender\",\n ...rest\n },\n ref,\n) {\n const inputRef = useRef<HTMLInputElement>(null);\n const mergedRef = useMergeRefs([inputRef, ref]);\n\n return (\n <InputGroup\n className={clsx(\"hds-date-picker\", className as undefined)}\n disabled={disabled}\n errorMessage={errorMessage}\n id={id}\n label={label}\n labelProps={labelProps}\n readOnly={readOnly}\n style={style}\n variant={variant}\n >\n {(inputProps) => (\n <>\n <input\n {...rest}\n {...inputProps}\n disabled={disabled}\n readOnly={readOnly}\n ref={mergedRef}\n type=\"date\"\n />\n <button\n className={clsx(\"hds-date-picker__calendar-button\")}\n type=\"button\"\n title={calendarButtonTitle}\n onClick={() => {\n inputRef.current?.showPicker();\n }}\n />\n </>\n )}\n </InputGroup>\n );\n});\n\nDatePicker.displayName = \"DatePicker\";\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAS,YAAY,cAAwC;AAC7D,SAAS,YAAY;AA4Db,mBACE,KADF;AAhCD,IAAM,aAAa,WAA8C,SAASA,YAC/E,IAaA,KACA;AAdA,eACE;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,EAxC1B,IA8BE,IAWK,iBAXL,IAWK;AAAA,IAVH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,YAAY,aAAa,CAAC,UAAU,GAAG,CAAC;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,mBAAmB,SAAsB;AAAA,MACzD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC,WAAC,eACA,iCACE;AAAA;AAAA,UAAC;AAAA,0DACK,OACA,aAFL;AAAA,YAGC;AAAA,YACA;AAAA,YACA,KAAK;AAAA,YACL,MAAK;AAAA;AAAA,QACP;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,KAAK,kCAAkC;AAAA,YAClD,MAAK;AAAA,YACL,OAAO;AAAA,YACP,SAAS,MAAM;AA1E3B,kBAAAC;AA2Ec,eAAAA,MAAA,SAAS,YAAT,gBAAAA,IAAkB;AAAA,YACpB;AAAA;AAAA,QACF;AAAA,SACF;AAAA;AAAA,EAEJ;AAEJ,CAAC;AAED,WAAW,cAAc;","names":["DatePicker","_a"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/form/select/select.tsx"],"sourcesContent":["import { forwardRef, type ReactNode , type SelectHTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { InputGroup } from \"../input-group\";\nimport type { InputGroupProps } from \"../input-group\";\n\nexport type SelectProps = Omit<\n InputGroupProps & SelectHTMLAttributes<HTMLSelectElement>,\n \"readOnly\" | \"children\"\n> & { children: ReactNode };\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(\n { className, variant, errorMessage, labelProps, label, id, style, disabled, children, ...rest },\n ref,\n) {\n return (\n <InputGroup\n className={clsx(\"hds-select\", className as undefined)}\n disabled={disabled}\n errorMessage={errorMessage}\n id={id}\n label={label}\n labelProps={labelProps}\n style={style}\n variant={variant}\n >\n <select {...rest} disabled={disabled} ref={ref}>\n {children}\n </select>\n </InputGroup>\n );\n});\n\nSelect.displayName = \"Select\";\n"],"mappings":";;;;;;;;;;AAAA,SAAS,kBAA8D;AACvE,SAAS,YAAY;AAwBf;AAfC,IAAM,SAAS,WAA2C,SAASA,QACxE,IACA,KACA;AAFA,eAAE,aAAW,SAAS,cAAc,YAAY,OAAO,IAAI,OAAO,UAAU,SAX9E,IAWE,IAAyF,iBAAzF,IAAyF,CAAvF,aAAW,WAAS,gBAAc,cAAY,SAAO,MAAI,SAAO,YAAU;AAG5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,cAAc,SAAsB;AAAA,MACpD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,8BAAC,2CAAW,OAAX,EAAiB,UAAoB,KACnC,WACH;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,OAAO,cAAc;","names":["Select"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/form/input/input.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { InputGroup } from \"../input-group\";\nimport type { InputGroupProps } from \"../input-group\";\n\nexport type InputProps = Omit<InputGroupProps & InputHTMLAttributes<HTMLInputElement>, \"children\">;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n { className, variant, errorMessage, labelProps, label, id, style, disabled, readOnly, ...rest },\n ref,\n) {\n return (\n <InputGroup\n className={clsx(\"hds-input\", className as undefined)}\n disabled={disabled}\n errorMessage={errorMessage}\n id={id}\n label={label}\n labelProps={labelProps}\n readOnly={readOnly}\n style={style}\n variant={variant}\n >\n <input {...rest} disabled={disabled} readOnly={readOnly} ref={ref} />\n </InputGroup>\n );\n});\n\nInput.displayName = \"Input\";\n"],"mappings":";;;;;;;;;;AAAA,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AAsBf;AAhBC,IAAM,QAAQ,WAAyC,SAASA,OACrE,IACA,KACA;AAFA,eAAE,aAAW,SAAS,cAAc,YAAY,OAAO,IAAI,OAAO,UAAU,SAT9E,IASE,IAAyF,iBAAzF,IAAyF,CAAvF,aAAW,WAAS,gBAAc,cAAY,SAAO,MAAI,SAAO,YAAU;AAG5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,aAAa,SAAsB;AAAA,MACnD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,8BAAC,0CAAU,OAAV,EAAgB,UAAoB,UAAoB,MAAU;AAAA;AAAA,EACrE;AAEJ,CAAC;AAED,MAAM,cAAc;","names":["Input"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/form/textarea/textarea.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { TextareaHTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { InputGroup } from \"../input-group\";\nimport type { InputGroupProps } from \"../input-group\";\n\nexport type TextareaProps = Omit<\n InputGroupProps & TextareaHTMLAttributes<HTMLTextAreaElement>,\n \"children\"\n>;\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\n { className, variant, errorMessage, labelProps, label, id, style, disabled, readOnly, ...rest },\n ref,\n) {\n return (\n <InputGroup\n className={clsx(\"hds-textarea\", className as undefined)}\n disabled={disabled}\n errorMessage={errorMessage}\n id={id}\n label={label}\n labelProps={labelProps}\n readOnly={readOnly}\n style={style}\n variant={variant}\n >\n <textarea {...rest} disabled={disabled} readOnly={readOnly} ref={ref} />\n </InputGroup>\n );\n});\n\nTextarea.displayName = \"Textarea\";\n"],"mappings":";;;;;;;;;;AAAA,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AAyBf;AAhBC,IAAM,WAAW,WAA+C,SAASA,UAC9E,IACA,KACA;AAFA,eAAE,aAAW,SAAS,cAAc,YAAY,OAAO,IAAI,OAAO,UAAU,SAZ9E,IAYE,IAAyF,iBAAzF,IAAyF,CAAvF,aAAW,WAAS,gBAAc,cAAY,SAAO,MAAI,SAAO,YAAU;AAG5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,gBAAgB,SAAsB;AAAA,MACtD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,8BAAC,6CAAa,OAAb,EAAmB,UAAoB,UAAoB,MAAU;AAAA;AAAA,EACxE;AAEJ,CAAC;AAED,SAAS,cAAc;","names":["Textarea"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/form/input-group/input-group.tsx"],"sourcesContent":["import { useId, forwardRef, Children, isValidElement, cloneElement } from \"react\";\nimport type { LabelHTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage, type ErrorMessageProps } from \"../error-message\";\n\ninterface InputProps {\n \"aria-describedby\"?: string;\n \"aria-invalid\"?: boolean;\n id?: string;\n className?: string;\n}\n\nexport interface InputGroupProps {\n id?: string;\n className?: string;\n style?: CSSProperties;\n variant?: \"default\" | \"white\";\n errorMessage?: ReactNode;\n errorMessageProps?: Partial<ErrorMessageProps>;\n labelProps?: LabelHTMLAttributes<HTMLLabelElement>;\n label: ReactNode;\n disabled?: boolean;\n readOnly?: boolean;\n /**\n * `children` must be either a single input element or a render function.\n *\n * If you use a render function, make sure you spread the input props to the appropriate element.\n */\n children: Exclude<ReactNode, Iterable<ReactNode>> | ((inputProps: InputProps) => ReactNode);\n}\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(\n {\n id,\n className,\n style,\n variant = \"default\",\n errorMessage,\n errorMessageProps,\n labelProps: { className: labelClassName, ...labelProps } = {},\n label,\n disabled,\n readOnly,\n children,\n ...rest\n },\n ref,\n) {\n const errorMessageId = useId();\n const inputId = useId();\n\n const renderInput = () => {\n const inputProps: InputProps = {\n \"aria-describedby\": errorMessage ? errorMessageId : undefined,\n \"aria-invalid\": errorMessage ? true : undefined,\n id: id ?? inputId,\n className: clsx(\"hds-input-group__input\"),\n };\n\n if (typeof children === \"function\") {\n return children(inputProps);\n }\n\n const input: ReactNode = Children.toArray(children)[0];\n\n if (!isValidElement<InputProps>(input)) {\n return;\n }\n\n return cloneElement<InputProps>(input, {\n ...inputProps,\n ...input.props,\n className: `${inputProps.className} ${input.props.className ?? \"\"}`,\n });\n };\n\n return (\n <div\n className={clsx(\n \"hds-input-group\",\n {\n [`hds-input-group--${variant}`]: variant,\n \"hds-input-group--error\": errorMessage,\n },\n className as undefined,\n )}\n ref={ref}\n style={style}\n {...rest}\n >\n <label\n className={clsx(\"hds-input-group__label\", labelClassName as undefined)}\n {...labelProps}\n htmlFor={id ?? inputId}\n >\n {label}\n </label>\n <div\n className={clsx(\"hds-input-group__input-wrapper\")}\n data-disabled={disabled}\n data-readonly={readOnly}\n >\n {renderInput()}\n </div>\n <ErrorMessage id={errorMessageId} {...errorMessageProps}>\n {errorMessage}\n </ErrorMessage>\n </div>\n );\n});\n"],"mappings":";;;;;;;;;;AAAA,SAAS,OAAO,YAAY,UAAU,gBAAgB,oBAAoB;AAE1E,SAAS,YAAY;AA2EjB,SAaE,KAbF;AA9CG,IAAM,aAAa,WAA4C,SAASA,YAC7E,IAcA,KACA;AAfA,eAOc;AAAA,IANZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,YAAY,KAA+C,CAAC;AAAA,EAvChE,IAgCE,IAOc,SAAE,aAAW,eAvC7B,IAuCgB,IAAgC,uBAAhC,IAAgC,CAA9B,eAPhB,SAQE;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EA3CJ,IAgCE,IAYK,iBAZL,IAYK;AAAA,IAXH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAM,iBAAiB,MAAM;AAC7B,QAAM,UAAU,MAAM;AAEtB,QAAM,cAAc,MAAM;AAnD5B,QAAAC;AAoDI,UAAM,aAAyB;AAAA,MAC7B,oBAAoB,eAAe,iBAAiB;AAAA,MACpD,gBAAgB,eAAe,OAAO;AAAA,MACtC,IAAI,kBAAM;AAAA,MACV,WAAW,KAAK,wBAAwB;AAAA,IAC1C;AAEA,QAAI,OAAO,aAAa,YAAY;AAClC,aAAO,SAAS,UAAU;AAAA,IAC5B;AAEA,UAAM,QAAmB,SAAS,QAAQ,QAAQ,EAAE,CAAC;AAErD,QAAI,CAAC,eAA2B,KAAK,GAAG;AACtC;AAAA,IACF;AAEA,WAAO,aAAyB,OAAO,gDAClC,aACA,MAAM,QAF4B;AAAA,MAGrC,WAAW,GAAG,WAAW,SAAS,KAAIA,MAAA,MAAM,MAAM,cAAZ,OAAAA,MAAyB,EAAE;AAAA,IACnE,EAAC;AAAA,EACH;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,CAAC,oBAAoB,OAAO,EAAE,GAAG;AAAA,UACjC,0BAA0B;AAAA,QAC5B;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,OACI,OAXL;AAAA,MAaC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,KAAK,0BAA0B,cAA2B;AAAA,aACjE,aAFL;AAAA,YAGC,SAAS,kBAAM;AAAA,YAEd;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,KAAK,gCAAgC;AAAA,YAChD,iBAAe;AAAA,YACf,iBAAe;AAAA,YAEd,sBAAY;AAAA;AAAA,QACf;AAAA,QACA,oBAAC,6CAAa,IAAI,kBAAoB,oBAArC,EACE,yBACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["InputGroup","_a"]}
|