@opengovsg/oui 0.0.21 → 0.0.23

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.
Files changed (55) hide show
  1. package/dist/cjs/button/button.cjs +1 -1
  2. package/dist/cjs/calendar/calendar-month-day-selector.cjs +4 -3
  3. package/dist/cjs/date-picker/date-picker.cjs +34 -9
  4. package/dist/cjs/field/field.cjs +1 -1
  5. package/dist/cjs/file-dropzone/contexts.cjs +18 -0
  6. package/dist/cjs/file-dropzone/file-dropzone.cjs +311 -0
  7. package/dist/cjs/file-dropzone/file-info.cjs +146 -0
  8. package/dist/cjs/file-dropzone/index.cjs +13 -0
  9. package/dist/cjs/file-dropzone/types.cjs +3 -0
  10. package/dist/cjs/file-dropzone/utils.cjs +31 -0
  11. package/dist/cjs/index.cjs +43 -34
  12. package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/plus.cjs +22 -0
  13. package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/trash-2.cjs +25 -0
  14. package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/upload.cjs +23 -0
  15. package/dist/cjs/number-field/index.cjs +8 -0
  16. package/dist/cjs/number-field/number-field.cjs +136 -0
  17. package/dist/esm/button/button.js +1 -1
  18. package/dist/esm/calendar/calendar-month-day-selector.js +4 -3
  19. package/dist/esm/date-picker/date-picker.js +34 -9
  20. package/dist/esm/field/field.js +1 -1
  21. package/dist/esm/file-dropzone/contexts.js +13 -0
  22. package/dist/esm/file-dropzone/file-dropzone.js +309 -0
  23. package/dist/esm/file-dropzone/file-info.js +144 -0
  24. package/dist/esm/file-dropzone/index.js +4 -0
  25. package/dist/esm/file-dropzone/types.js +1 -0
  26. package/dist/esm/file-dropzone/utils.js +28 -0
  27. package/dist/esm/index.js +13 -9
  28. package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/plus.js +17 -0
  29. package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/trash-2.js +20 -0
  30. package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/upload.js +18 -0
  31. package/dist/esm/number-field/index.js +2 -0
  32. package/dist/esm/number-field/number-field.js +134 -0
  33. package/dist/types/calendar/calendar-month-day-selector.d.ts.map +1 -1
  34. package/dist/types/date-picker/date-picker.d.ts +5 -2
  35. package/dist/types/date-picker/date-picker.d.ts.map +1 -1
  36. package/dist/types/file-dropzone/contexts.d.ts +4 -0
  37. package/dist/types/file-dropzone/contexts.d.ts.map +1 -0
  38. package/dist/types/file-dropzone/file-dropzone.d.ts +82 -0
  39. package/dist/types/file-dropzone/file-dropzone.d.ts.map +1 -0
  40. package/dist/types/file-dropzone/file-info.d.ts +9 -0
  41. package/dist/types/file-dropzone/file-info.d.ts.map +1 -0
  42. package/dist/types/file-dropzone/index.d.ts +7 -0
  43. package/dist/types/file-dropzone/index.d.ts.map +1 -0
  44. package/dist/types/file-dropzone/types.d.ts +24 -0
  45. package/dist/types/file-dropzone/types.d.ts.map +1 -0
  46. package/dist/types/file-dropzone/utils.d.ts +8 -0
  47. package/dist/types/file-dropzone/utils.d.ts.map +1 -0
  48. package/dist/types/index.d.mts +2 -0
  49. package/dist/types/index.d.ts +2 -0
  50. package/dist/types/index.d.ts.map +1 -1
  51. package/dist/types/number-field/index.d.ts +3 -0
  52. package/dist/types/number-field/index.d.ts.map +1 -0
  53. package/dist/types/number-field/number-field.d.ts +24 -0
  54. package/dist/types/number-field/number-field.d.ts.map +1 -0
  55. package/package.json +4 -3
@@ -0,0 +1,134 @@
1
+ "use strict";
2
+ "use client";
3
+ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
4
+ import { NumberField as NumberField$1 } from 'react-aria-components';
5
+ import { numberFieldStyles, composeTailwindRenderProps, dataAttr, fieldBorderStyles, cn } from '@opengovsg/oui-theme';
6
+ import { mapPropsVariants } from '../system/utils.js';
7
+ import Minus from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/minus.js';
8
+ import Plus from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/plus.js';
9
+ import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
10
+ import { Input } from '../input/input.js';
11
+ import { Button } from '../button/button.js';
12
+
13
+ function NumberField(originalProps) {
14
+ const [
15
+ {
16
+ label,
17
+ description,
18
+ errorMessage,
19
+ classNames,
20
+ inputProps,
21
+ startContent,
22
+ endContent,
23
+ hideSteppers,
24
+ ...props
25
+ },
26
+ variantProps
27
+ ] = mapPropsVariants(originalProps, numberFieldStyles.variantKeys);
28
+ const styles = numberFieldStyles(variantProps);
29
+ return /* @__PURE__ */ jsxs(
30
+ NumberField$1,
31
+ {
32
+ ...props,
33
+ "data-hide-steppers": dataAttr(!!hideSteppers),
34
+ "data-has-start-content": dataAttr(!!startContent),
35
+ "data-has-end-content": dataAttr(!!endContent),
36
+ className: composeTailwindRenderProps(
37
+ props.className,
38
+ styles.base({
39
+ className: classNames?.base
40
+ })
41
+ ),
42
+ children: [
43
+ label && /* @__PURE__ */ jsx(
44
+ Label,
45
+ {
46
+ className: styles.label({ className: classNames?.label }),
47
+ size: variantProps.size,
48
+ children: label
49
+ }
50
+ ),
51
+ /* @__PURE__ */ jsx(FieldGroup, { className: styles.field({ className: classNames?.field }), children: (renderProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
52
+ startContent,
53
+ /* @__PURE__ */ jsx(
54
+ Input,
55
+ {
56
+ size: variantProps.size,
57
+ variant: "unstyled",
58
+ className: styles.input({
59
+ className: classNames?.input
60
+ }),
61
+ ...inputProps
62
+ }
63
+ ),
64
+ endContent,
65
+ !hideSteppers && /* @__PURE__ */ jsxs(
66
+ "div",
67
+ {
68
+ className: fieldBorderStyles({
69
+ ...renderProps,
70
+ className: cn(
71
+ styles.stepperContainer({
72
+ className: classNames?.stepperContainer
73
+ })
74
+ )
75
+ }),
76
+ children: [
77
+ /* @__PURE__ */ jsx(
78
+ Button,
79
+ {
80
+ className: styles.decrement({
81
+ className: classNames?.decrement
82
+ }),
83
+ size: variantProps.size,
84
+ isIconOnly: true,
85
+ variant: "clear",
86
+ color: "neutral",
87
+ slot: "decrement",
88
+ children: /* @__PURE__ */ jsx(Minus, { "aria-hidden": true })
89
+ }
90
+ ),
91
+ /* @__PURE__ */ jsx(
92
+ Button,
93
+ {
94
+ className: styles.increment({
95
+ className: classNames?.increment
96
+ }),
97
+ size: variantProps.size,
98
+ isIconOnly: true,
99
+ variant: "clear",
100
+ color: "neutral",
101
+ slot: "increment",
102
+ children: /* @__PURE__ */ jsx(Plus, { "aria-hidden": true })
103
+ }
104
+ )
105
+ ]
106
+ }
107
+ )
108
+ ] }) }),
109
+ description && /* @__PURE__ */ jsx(
110
+ Description,
111
+ {
112
+ className: styles.description({
113
+ className: classNames?.description
114
+ }),
115
+ size: variantProps.size,
116
+ children: description
117
+ }
118
+ ),
119
+ /* @__PURE__ */ jsx(
120
+ FieldError,
121
+ {
122
+ className: styles.error({
123
+ className: classNames?.error
124
+ }),
125
+ size: variantProps.size,
126
+ children: errorMessage
127
+ }
128
+ )
129
+ ]
130
+ }
131
+ );
132
+ }
133
+
134
+ export { NumberField };
@@ -1 +1 @@
1
- {"version":3,"file":"calendar-month-day-selector.d.ts","sourceRoot":"","sources":["../../../src/calendar/calendar-month-day-selector.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,wBAAwB,+CA2EpC,CAAA"}
1
+ {"version":3,"file":"calendar-month-day-selector.d.ts","sourceRoot":"","sources":["../../../src/calendar/calendar-month-day-selector.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,wBAAwB,+CA4EpC,CAAA"}
@@ -1,5 +1,5 @@
1
1
  import type { DatePickerProps as AriaDatePickerProps, DateValue, ValidationResult } from "react-aria-components";
2
- import type { CalendarSlots, DatePickerSlots, SlotsToClasses, VariantProps } from "@opengovsg/oui-theme";
2
+ import type { CalendarSlots, DatePickerSlots, FieldErrorSlots, SlotsToClasses, VariantProps } from "@opengovsg/oui-theme";
3
3
  import { datePickerStyles } from "@opengovsg/oui-theme";
4
4
  import type { ButtonProps } from "../button";
5
5
  import type { CalendarProps } from "../calendar";
@@ -8,11 +8,14 @@ interface DatePickerProps<T extends DateValue> extends VariantProps<typeof dateP
8
8
  label?: string;
9
9
  description?: string;
10
10
  errorMessage?: string | ((validation: ValidationResult) => string);
11
+ selectorIcon?: React.ReactNode;
11
12
  calendarProps?: CalendarProps<T>;
12
13
  popoverProps?: PopoverProps;
13
14
  calendarButtonProps?: ButtonProps;
14
- classNames?: SlotsToClasses<DatePickerSlots> & {
15
+ classNames?: SlotsToClasses<DatePickerSlots | "description"> & {
15
16
  calendar?: SlotsToClasses<CalendarSlots>;
17
+ error?: SlotsToClasses<FieldErrorSlots>;
18
+ popover?: PopoverProps["classNames"];
16
19
  };
17
20
  }
18
21
  export declare function DatePicker<T extends DateValue>(originalProps: DatePickerProps<T>): import("react/jsx-runtime").JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/date-picker/date-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,eAAe,IAAI,mBAAmB,EACtC,SAAS,EACT,gBAAgB,EACjB,MAAM,uBAAuB,CAAA;AAK9B,OAAO,KAAK,EACV,aAAa,EACb,eAAe,EACf,cAAc,EACd,YAAY,EACb,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAEL,gBAAgB,EACjB,MAAM,sBAAsB,CAAA;AAE7B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAC5C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAChD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAQ9C,UAAU,eAAe,CAAC,CAAC,SAAS,SAAS,CAC3C,SAAQ,YAAY,CAAC,OAAO,gBAAgB,CAAC,EAC3C,mBAAmB,CAAC,CAAC,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,UAAU,EAAE,gBAAgB,KAAK,MAAM,CAAC,CAAA;IAClE,aAAa,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAA;IAChC,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,mBAAmB,CAAC,EAAE,WAAW,CAAA;IACjC,UAAU,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,GAAG;QAC7C,QAAQ,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,CAAA;KACzC,CAAA;CACF;AAED,wBAAgB,UAAU,CAAC,CAAC,SAAS,SAAS,EAC5C,aAAa,EAAE,eAAe,CAAC,CAAC,CAAC,2CAgElC"}
1
+ {"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/date-picker/date-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,eAAe,IAAI,mBAAmB,EACtC,SAAS,EACT,gBAAgB,EACjB,MAAM,uBAAuB,CAAA;AAK9B,OAAO,KAAK,EACV,aAAa,EACb,eAAe,EACf,eAAe,EACf,cAAc,EACd,YAAY,EACb,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAEL,gBAAgB,EACjB,MAAM,sBAAsB,CAAA;AAE7B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAC5C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAChD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAQ9C,UAAU,eAAe,CAAC,CAAC,SAAS,SAAS,CAC3C,SAAQ,YAAY,CAAC,OAAO,gBAAgB,CAAC,EAC3C,mBAAmB,CAAC,CAAC,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,UAAU,EAAE,gBAAgB,KAAK,MAAM,CAAC,CAAA;IAClE,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,aAAa,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAA;IAChC,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,mBAAmB,CAAC,EAAE,WAAW,CAAA;IACjC,UAAU,CAAC,EAAE,cAAc,CAAC,eAAe,GAAG,aAAa,CAAC,GAAG;QAC7D,QAAQ,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,CAAA;QACxC,KAAK,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;QACvC,OAAO,CAAC,EAAE,YAAY,CAAC,YAAY,CAAC,CAAA;KACrC,CAAA;CACF;AAED,wBAAgB,UAAU,CAAC,CAAC,SAAS,SAAS,EAC5C,aAAa,EAAE,eAAe,CAAC,CAAC,CAAC,2CAoFlC"}
@@ -0,0 +1,4 @@
1
+ import type { FileDropzoneState, FileDropzoneStyleContextReturn } from "./types";
2
+ export declare const FileDropzoneStateContext: import("react").Context<FileDropzoneState>, useFileDropzoneStateContext: () => FileDropzoneState;
3
+ export declare const FileDropzoneStyleContext: import("react").Context<FileDropzoneStyleContextReturn>, useFileDropzoneStyleContext: () => FileDropzoneStyleContextReturn;
4
+ //# sourceMappingURL=contexts.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"contexts.d.ts","sourceRoot":"","sources":["../../../src/file-dropzone/contexts.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,8BAA8B,EAAE,MAAM,SAAS,CAAA;AAGhF,eAAO,MAAO,wBAAwB,8CAAE,2BAA2B,yBAI/D,CAAA;AACJ,eAAO,MAAO,wBAAwB,2DAAE,2BAA2B,sCAI/D,CAAA"}
@@ -0,0 +1,82 @@
1
+ import type { InputBase, Validation } from "@react-types/shared";
2
+ import type { AriaFieldProps } from "react-aria";
3
+ import type { DropzoneOptions } from "react-dropzone";
4
+ import type { FileDropzoneSlots, FileInfoDropzoneSlots, SlotsToClasses, VariantProps } from "@opengovsg/oui-theme";
5
+ import { fileDropzoneStyles } from "@opengovsg/oui-theme";
6
+ import type { FileItem } from "./types";
7
+ export interface FileItemsRenderProps {
8
+ file: FileItem;
9
+ removeFile: () => void;
10
+ }
11
+ export interface FileDropzoneProps extends Omit<AriaFieldProps, "validate">, InputBase, Validation<FileItem[]>, VariantProps<typeof fileDropzoneStyles> {
12
+ name?: string;
13
+ label?: React.ReactNode;
14
+ description?: React.ReactNode;
15
+ errorMessage?: React.ReactNode;
16
+ validator?: DropzoneOptions["validator"];
17
+ classNames?: SlotsToClasses<FileDropzoneSlots>;
18
+ itemClassNames?: SlotsToClasses<FileInfoDropzoneSlots>;
19
+ /** The current files (controlled). */
20
+ value?: FileItem[];
21
+ /** The default files (uncontrolled). */
22
+ defaultValue?: FileItem[];
23
+ /** Sets the controlled value. */
24
+ onChange?: (value: FileItem[]) => void;
25
+ /**
26
+ * Allowed MIME types for each file upload (e.g `image/png`, `text/html`, etc). Wildcards are also supported (e.g `image/*`).
27
+ *
28
+ * Defaults to allowing uploading of all MIME types.
29
+ */
30
+ allowedMimeTypes?: string[];
31
+ /**
32
+ * Maximum upload size of each file allowed in bytes. (e.g 1000 bytes = 1 KB)
33
+ * @default Number.POSITIVE_INFINITY
34
+ */
35
+ maxFileSize?: number;
36
+ /**
37
+ * Minimum upload size of each file allowed in bytes. (e.g 1000 bytes = 1 KB)
38
+ * @default 0
39
+ */
40
+ minFileSize?: number;
41
+ /**
42
+ * Whether to show file size information below the dropzone.
43
+ * @default true
44
+ */
45
+ showFileSizeText?: boolean;
46
+ /**
47
+ * Maximum number of files allowed per upload.
48
+ * @default 1
49
+ */
50
+ maxFiles?: number;
51
+ /**
52
+ * Whether to show rejected files in the component.
53
+ */
54
+ showRejectedFiles?: boolean;
55
+ /**
56
+ * List of file rejections (controlled).
57
+ */
58
+ rejections?: FileItem[];
59
+ /**
60
+ * If provided, callback function will be called when files are rejected.
61
+ */
62
+ onRejection?: (rejections: FileItem[]) => void;
63
+ /**
64
+ * If provided, this function will be called with any error messages that occur during file validation.
65
+ * If there are multiple errors, only the first message will be passed to this function.
66
+ */
67
+ onError?: (errorMessage: string) => void;
68
+ children?: (values: FileItemsRenderProps) => React.ReactNode;
69
+ /**
70
+ * Whether to hide the dropzone when there is at least one file uploaded.
71
+ * @default true if maxFiles is 1, false otherwise
72
+ */
73
+ hideDropzoneOnValue?: boolean;
74
+ /**
75
+ * If provided, the image preview will be shown in the given size variant.
76
+ * If `null`, no image preview will be shown.
77
+ * @default "small"
78
+ */
79
+ imagePreview?: "small" | "large" | null;
80
+ }
81
+ export declare const FileDropzone: (originalProps: FileDropzoneProps) => import("react/jsx-runtime").JSX.Element;
82
+ //# sourceMappingURL=file-dropzone.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"file-dropzone.d.ts","sourceRoot":"","sources":["../../../src/file-dropzone/file-dropzone.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAChE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,KAAK,EAAE,eAAe,EAA4B,MAAM,gBAAgB,CAAA;AAe/E,OAAO,KAAK,EACV,iBAAiB,EACjB,qBAAqB,EACrB,cAAc,EACd,YAAY,EACb,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAY,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAEnE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAavC,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,QAAQ,CAAA;IACd,UAAU,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,EACtC,SAAS,EACT,UAAU,CAAC,QAAQ,EAAE,CAAC,EACtB,YAAY,CAAC,OAAO,kBAAkB,CAAC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE9B,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAA;IACxC,UAAU,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAC9C,cAAc,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAA;IACtD,sCAAsC;IACtC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAA;IAClB,wCAAwC;IACxC,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAA;IACzB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAA;IACtC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAE3B;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,EAAE,CAAA;IAEvB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAA;IAC9C;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,KAAK,CAAC,SAAS,CAAA;IAE5D;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAE7B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,IAAI,CAAA;CACxC;AAED,eAAO,MAAM,YAAY,kBAAmB,iBAAiB,4CAwQ5D,CAAA"}
@@ -0,0 +1,9 @@
1
+ import type { FileInfoDropzoneSlots, SlotsToClasses } from "@opengovsg/oui-theme";
2
+ import type { FileItem } from "./types";
3
+ export interface FileInfoProps {
4
+ file: FileItem;
5
+ imagePreview?: "small" | "large" | null;
6
+ classNames?: SlotsToClasses<FileInfoDropzoneSlots>;
7
+ }
8
+ export declare const FileInfo: ({ file, imagePreview, classNames }: FileInfoProps) => import("react/jsx-runtime").JSX.Element;
9
+ //# sourceMappingURL=file-info.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"file-info.d.ts","sourceRoot":"","sources":["../../../src/file-dropzone/file-info.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,qBAAqB,EACrB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAG7B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAQvC,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,QAAQ,CAAA;IACd,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,IAAI,CAAA;IACvC,UAAU,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAA;CACnD;AAED,eAAO,MAAM,QAAQ,uCAAwC,aAAa,4CA0HzE,CAAA"}
@@ -0,0 +1,7 @@
1
+ export { FileDropzone } from "./file-dropzone";
2
+ export { FileInfo } from "./file-info";
3
+ export type { FileInfoProps } from "./file-info";
4
+ export type { FileDropzoneProps, FileItemsRenderProps } from "./file-dropzone";
5
+ export type { FileItem } from "./types";
6
+ export { formatBytes, formatErrorMessage } from "./utils";
7
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/file-dropzone/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAChD,YAAY,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AAE9E,YAAY,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEvC,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA"}
@@ -0,0 +1,24 @@
1
+ import type { DropzoneState, FileError } from "react-dropzone";
2
+ import type { FileDropzoneSlots, fileDropzoneStyles, FileDropzoneVariantProps, FileInfoDropzoneSlots, SlotsToClasses } from "@opengovsg/oui-theme";
3
+ export interface FileItem extends File {
4
+ errors?: readonly FileError[];
5
+ }
6
+ export interface FileDropzoneState extends Omit<DropzoneState, "getInputProps"> {
7
+ isDisabled?: boolean;
8
+ isReadOnly?: boolean;
9
+ inputProps: ReturnType<DropzoneState["getInputProps"]>;
10
+ triggerFileSelector: () => void | null;
11
+ maxFiles: number;
12
+ maxFileSize: number;
13
+ showDropzone: boolean;
14
+ files: FileItem[];
15
+ handleRemoveFile: (fileName: string) => void;
16
+ handleRemoveRejection: (fileName: string) => void;
17
+ formatError: (error: FileError) => string;
18
+ }
19
+ export interface FileDropzoneStyleContextReturn extends FileDropzoneVariantProps {
20
+ slots: ReturnType<typeof fileDropzoneStyles>;
21
+ classNames?: SlotsToClasses<FileDropzoneSlots>;
22
+ itemClassNames?: SlotsToClasses<FileInfoDropzoneSlots>;
23
+ }
24
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/file-dropzone/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE9D,OAAO,KAAK,EACV,iBAAiB,EACjB,kBAAkB,EAClB,wBAAwB,EACxB,qBAAqB,EACrB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAE7B,MAAM,WAAW,QAAS,SAAQ,IAAI;IACpC,MAAM,CAAC,EAAE,SAAS,SAAS,EAAE,CAAA;CAC9B;AAED,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,eAAe,CAAC;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,EAAE,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,CAAA;IACtD,mBAAmB,EAAE,MAAM,IAAI,GAAG,IAAI,CAAA;IACtC,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,OAAO,CAAA;IACrB,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,qBAAqB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACjD,WAAW,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,MAAM,CAAA;CAC1C;AAED,MAAM,WAAW,8BACf,SAAQ,wBAAwB;IAChC,KAAK,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAA;IAC5C,UAAU,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAC9C,cAAc,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAA;CACvD"}
@@ -0,0 +1,8 @@
1
+ import type { FileRejection } from "react-dropzone";
2
+ export declare const formatBytes: (bytes: number, decimals?: number, size?: "bytes" | "KB" | "MB" | "GB" | "TB" | "PB" | "EB" | "ZB" | "YB") => string;
3
+ export declare const formatErrorMessage: (error: FileRejection["errors"][number], config: {
4
+ maxFileSize: number;
5
+ minFileSize: number;
6
+ maxFiles: number;
7
+ }) => string;
8
+ //# sourceMappingURL=utils.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/file-dropzone/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAGnD,eAAO,MAAM,WAAW,UACf,MAAM,4BAEN,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,WAavE,CAAA;AAED,eAAO,MAAM,kBAAkB,UACtB,aAAa,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,UAC9B;IAAE,WAAW,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,WAgBvE,CAAA"}
@@ -25,4 +25,6 @@ export * from "./date-picker";
25
25
  export * from "./date-range-picker";
26
26
  export * from "./checkbox";
27
27
  export * from "./pagination";
28
+ export * from "./file-dropzone";
29
+ export * from "./number-field";
28
30
  //# sourceMappingURL=index.d.ts.map
@@ -25,4 +25,6 @@ export * from "./date-picker";
25
25
  export * from "./date-range-picker";
26
26
  export * from "./checkbox";
27
27
  export * from "./pagination";
28
+ export * from "./file-dropzone";
29
+ export * from "./number-field";
28
30
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA"}
@@ -0,0 +1,3 @@
1
+ export { NumberField } from "./number-field";
2
+ export type { NumberFieldProps } from "./number-field";
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/number-field/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA"}
@@ -0,0 +1,24 @@
1
+ import type { NumberFieldProps as AriaNumberFieldProps, ValidationResult } from "react-aria-components";
2
+ import type { NumberFieldSlots, NumberFieldVariantProps, SlotsToClasses } from "@opengovsg/oui-theme";
3
+ import type { InputProps } from "../input";
4
+ export interface NumberFieldProps extends AriaNumberFieldProps, NumberFieldVariantProps {
5
+ label?: string;
6
+ description?: string;
7
+ errorMessage?: string | ((validation: ValidationResult) => string);
8
+ classNames?: SlotsToClasses<NumberFieldSlots>;
9
+ inputProps?: Partial<InputProps>;
10
+ /**
11
+ * If true, hides the stepper buttons
12
+ */
13
+ hideSteppers?: boolean;
14
+ /**
15
+ * Content to be displayed at the start of the input field
16
+ */
17
+ startContent?: React.ReactNode;
18
+ /**
19
+ * Content to be displayed at the end of the input field
20
+ */
21
+ endContent?: React.ReactNode;
22
+ }
23
+ export declare function NumberField(originalProps: NumberFieldProps): import("react/jsx-runtime").JSX.Element;
24
+ //# sourceMappingURL=number-field.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"number-field.d.ts","sourceRoot":"","sources":["../../../src/number-field/number-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,gBAAgB,IAAI,oBAAoB,EACxC,gBAAgB,EACjB,MAAM,uBAAuB,CAAA;AAI9B,OAAO,KAAK,EACV,gBAAgB,EAChB,uBAAuB,EACvB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAS7B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAM1C,MAAM,WAAW,gBACf,SAAQ,oBAAoB,EAC1B,uBAAuB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,UAAU,EAAE,gBAAgB,KAAK,MAAM,CAAC,CAAA;IAElE,UAAU,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;IAE7C,UAAU,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAA;IAEhC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE9B;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B;AAED,wBAAgB,WAAW,CAAC,aAAa,EAAE,gBAAgB,2CAgH1D"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opengovsg/oui",
3
- "version": "0.0.21",
3
+ "version": "0.0.23",
4
4
  "sideEffects": false,
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "type": "module",
@@ -49,7 +49,7 @@
49
49
  "storybook": "9.1.6",
50
50
  "tsx": "^4.20.3",
51
51
  "typescript": "5.7.3",
52
- "@opengovsg/oui-theme": "0.0.21",
52
+ "@opengovsg/oui-theme": "0.0.23",
53
53
  "@oui/chromatic": "0.0.0",
54
54
  "@oui/eslint-config": "0.0.0",
55
55
  "@oui/prettier-config": "0.0.0",
@@ -72,6 +72,7 @@
72
72
  "lodash-es": "^4.17.21",
73
73
  "nanoid": "^5.1.5",
74
74
  "react-aria": "^3.41.1",
75
+ "react-dropzone": "^14.3.8",
75
76
  "react-stately": "^3.41.0",
76
77
  "scroll-into-view-if-needed": "^3.1.0",
77
78
  "type-fest": "^4.41.0",
@@ -83,7 +84,7 @@
83
84
  "motion": ">=11.12.0 || >=12.0.0-alpha.1",
84
85
  "react": ">= 18",
85
86
  "react-aria-components": "^1.12.2",
86
- "@opengovsg/oui-theme": "0.0.21"
87
+ "@opengovsg/oui-theme": "0.0.23"
87
88
  },
88
89
  "scripts": {
89
90
  "build": "tsx ../../tooling/build-scripts/main.ts --dts --clean",