@luscii-healthtech/web-ui 60.2.0 → 60.2.2

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 (31) hide show
  1. package/dist/esm/components/Input/Input.js.map +1 -1
  2. package/dist/esm/components/Input/SearchInput.js +1 -1
  3. package/dist/esm/components/Input/SearchInput.js.map +1 -1
  4. package/dist/esm/components/Input/StyledInput.js +54 -25
  5. package/dist/esm/components/Input/StyledInput.js.map +1 -1
  6. package/dist/index.development.js +55 -26
  7. package/dist/index.development.js.map +1 -1
  8. package/dist/index.js +1 -1
  9. package/dist/index.js.map +1 -1
  10. package/dist/src/components/Input/Input.d.ts +2 -0
  11. package/dist/src/components/Input/LabeledInput.d.ts +1 -0
  12. package/dist/src/components/Input/StyledInput.d.ts +2 -0
  13. package/dist/src/components/InputSelect/InputSelect.d.ts +1 -0
  14. package/dist/src/components/InputSelect/InputSelectInput.d.ts +1 -0
  15. package/dist/src/components/NaturalLanguageForm/NaturalLanguageForm.d.ts +2 -0
  16. package/dist/src/components/NaturalLanguageForm/NaturalLanguageFormInput.d.ts +1 -0
  17. package/dist/src/components/NaturalLanguageForm/NaturalLanguageFormInputSelect.d.ts +1 -0
  18. package/dist/src/generated/components/Input/Input.d.ts +2 -0
  19. package/dist/src/generated/components/Input/LabeledInput.d.ts +1 -0
  20. package/dist/src/generated/components/Input/StyledInput.d.ts +2 -0
  21. package/dist/src/generated/components/InputSelect/InputSelect.d.ts +1 -0
  22. package/dist/src/generated/components/InputSelect/InputSelectInput.d.ts +1 -0
  23. package/dist/src/generated/components/NaturalLanguageForm/NaturalLanguageForm.d.ts +2 -0
  24. package/dist/src/generated/components/NaturalLanguageForm/NaturalLanguageFormInput.d.ts +1 -0
  25. package/dist/src/generated/components/NaturalLanguageForm/NaturalLanguageFormInputSelect.d.ts +1 -0
  26. package/dist/stories/InputSelect.stories.d.ts +1 -0
  27. package/dist/stories/LabeledInput.stories.d.ts +1 -0
  28. package/dist/stories/NaturalLanguageForm.stories.d.ts +2 -0
  29. package/dist/stories/SearchInput.stories.d.ts +1 -0
  30. package/dist/web-ui-tailwind.css +29 -0
  31. package/package.json +1 -1
package/dist/src/components/Input/Input.d.ts CHANGED
@@ -21,6 +21,8 @@ export type FakeEventTarget = {
21
21
  };
22
22
  export interface InputProps extends CustomHTMLInputProps {
23
23
  clearable?: boolean;
24
+ /** Accessible name of the clear button shown when `clearable`. Defaults to "Clear". */
25
+ clearButtonLabel?: string;
24
26
  isDisabled?: boolean;
25
27
  withPrefix?: string;
26
28
  withSuffix?: string;
package/dist/src/components/Input/LabeledInput.d.ts CHANGED
@@ -11,6 +11,7 @@ export declare const LabeledInput: React.ForwardRefExoticComponent<Omit<Omit<Omi
11
11
  isError?: boolean;
12
12
  isClearIconVisible?: boolean;
13
13
  onClickClearField?: () => void;
14
+ clearButtonLabel?: string;
14
15
  } & React.RefAttributes<HTMLInputElement>, "ref">, "width" | "icon"> & {
15
16
  /**
16
17
  * The visible label, linked to the input with `htmlFor`. When omitted, give
package/dist/src/components/Input/StyledInput.d.ts CHANGED
@@ -25,4 +25,6 @@ export declare const StyledInput: React.ForwardRefExoticComponent<Omit<Omit<Reac
25
25
  isError?: boolean;
26
26
  isClearIconVisible?: boolean;
27
27
  onClickClearField?: () => void;
28
+ /** Accessible name of the clear button. */
29
+ clearButtonLabel?: string;
28
30
  } & React.RefAttributes<HTMLInputElement>>;
package/dist/src/components/InputSelect/InputSelect.d.ts CHANGED
@@ -24,6 +24,7 @@ declare const InputSelectWithSubComponents: React.ForwardRefExoticComponent<Inpu
24
24
  isError?: boolean;
25
25
  isClearIconVisible?: boolean;
26
26
  onClickClearField?: () => void;
27
+ clearButtonLabel?: string;
27
28
  } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
28
29
  Select: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "width"> & {
29
30
  children?: React.ReactNode;
package/dist/src/components/InputSelect/InputSelectInput.d.ts CHANGED
@@ -8,4 +8,5 @@ export declare const InputSelectInput: React.ForwardRefExoticComponent<Omit<Omit
8
8
  isError?: boolean;
9
9
  isClearIconVisible?: boolean;
10
10
  onClickClearField?: () => void;
11
+ clearButtonLabel?: string;
11
12
  } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
package/dist/src/components/NaturalLanguageForm/NaturalLanguageForm.d.ts CHANGED
@@ -25,6 +25,7 @@ declare const NaturalLanguageFormWithSubComponents: React.ForwardRefExoticCompon
25
25
  isError?: boolean;
26
26
  isClearIconVisible?: boolean;
27
27
  onClickClearField?: () => void;
28
+ clearButtonLabel?: string;
28
29
  } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
29
30
  Select: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "width"> & {
30
31
  children?: React.ReactNode;
@@ -59,6 +60,7 @@ declare const NaturalLanguageFormWithSubComponents: React.ForwardRefExoticCompon
59
60
  isError?: boolean;
60
61
  isClearIconVisible?: boolean;
61
62
  onClickClearField?: () => void;
63
+ clearButtonLabel?: string;
62
64
  } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
63
65
  Select: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "width"> & {
64
66
  children?: React.ReactNode;
package/dist/src/components/NaturalLanguageForm/NaturalLanguageFormInput.d.ts CHANGED
@@ -8,4 +8,5 @@ export declare const NaturalLanguageFormInput: React.ForwardRefExoticComponent<O
8
8
  isError?: boolean;
9
9
  isClearIconVisible?: boolean;
10
10
  onClickClearField?: () => void;
11
+ clearButtonLabel?: string;
11
12
  } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
package/dist/src/components/NaturalLanguageForm/NaturalLanguageFormInputSelect.d.ts CHANGED
@@ -9,6 +9,7 @@ export declare const NaturalLanguageFormInputSelect: React.ForwardRefExoticCompo
9
9
  isError?: boolean;
10
10
  isClearIconVisible?: boolean;
11
11
  onClickClearField?: () => void;
12
+ clearButtonLabel?: string;
12
13
  } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
13
14
  Select: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "width"> & {
14
15
  children?: React.ReactNode;
package/dist/src/generated/components/Input/Input.d.ts CHANGED
@@ -21,6 +21,8 @@ export type FakeEventTarget = {
21
21
  };
22
22
  export interface InputProps extends CustomHTMLInputProps {
23
23
  clearable?: boolean;
24
+ /** Accessible name of the clear button shown when `clearable`. Defaults to "Clear". */
25
+ clearButtonLabel?: string;
24
26
  isDisabled?: boolean;
25
27
  withPrefix?: string;
26
28
  withSuffix?: string;
package/dist/src/generated/components/Input/LabeledInput.d.ts CHANGED
@@ -11,6 +11,7 @@ export declare const LabeledInput: React.ForwardRefExoticComponent<Omit<Omit<Omi
11
11
  isError?: boolean;
12
12
  isClearIconVisible?: boolean;
13
13
  onClickClearField?: () => void;
14
+ clearButtonLabel?: string;
14
15
  } & React.RefAttributes<HTMLInputElement>, "ref">, "width" | "icon"> & {
15
16
  /**
16
17
  * The visible label, linked to the input with `htmlFor`. When omitted, give
package/dist/src/generated/components/Input/StyledInput.d.ts CHANGED
@@ -25,4 +25,6 @@ export declare const StyledInput: React.ForwardRefExoticComponent<Omit<Omit<Reac
25
25
  isError?: boolean;
26
26
  isClearIconVisible?: boolean;
27
27
  onClickClearField?: () => void;
28
+ /** Accessible name of the clear button. */
29
+ clearButtonLabel?: string;
28
30
  } & React.RefAttributes<HTMLInputElement>>;
package/dist/src/generated/components/InputSelect/InputSelect.d.ts CHANGED
@@ -24,6 +24,7 @@ declare const InputSelectWithSubComponents: React.ForwardRefExoticComponent<Inpu
24
24
  isError?: boolean;
25
25
  isClearIconVisible?: boolean;
26
26
  onClickClearField?: () => void;
27
+ clearButtonLabel?: string;
27
28
  } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
28
29
  Select: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "width"> & {
29
30
  children?: React.ReactNode;
package/dist/src/generated/components/InputSelect/InputSelectInput.d.ts CHANGED
@@ -8,4 +8,5 @@ export declare const InputSelectInput: React.ForwardRefExoticComponent<Omit<Omit
8
8
  isError?: boolean;
9
9
  isClearIconVisible?: boolean;
10
10
  onClickClearField?: () => void;
11
+ clearButtonLabel?: string;
11
12
  } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
package/dist/src/generated/components/NaturalLanguageForm/NaturalLanguageForm.d.ts CHANGED
@@ -25,6 +25,7 @@ declare const NaturalLanguageFormWithSubComponents: React.ForwardRefExoticCompon
25
25
  isError?: boolean;
26
26
  isClearIconVisible?: boolean;
27
27
  onClickClearField?: () => void;
28
+ clearButtonLabel?: string;
28
29
  } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
29
30
  Select: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "width"> & {
30
31
  children?: React.ReactNode;
@@ -59,6 +60,7 @@ declare const NaturalLanguageFormWithSubComponents: React.ForwardRefExoticCompon
59
60
  isError?: boolean;
60
61
  isClearIconVisible?: boolean;
61
62
  onClickClearField?: () => void;
63
+ clearButtonLabel?: string;
62
64
  } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
63
65
  Select: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "width"> & {
64
66
  children?: React.ReactNode;
package/dist/src/generated/components/NaturalLanguageForm/NaturalLanguageFormInput.d.ts CHANGED
@@ -8,4 +8,5 @@ export declare const NaturalLanguageFormInput: React.ForwardRefExoticComponent<O
8
8
  isError?: boolean;
9
9
  isClearIconVisible?: boolean;
10
10
  onClickClearField?: () => void;
11
+ clearButtonLabel?: string;
11
12
  } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
package/dist/src/generated/components/NaturalLanguageForm/NaturalLanguageFormInputSelect.d.ts CHANGED
@@ -9,6 +9,7 @@ export declare const NaturalLanguageFormInputSelect: React.ForwardRefExoticCompo
9
9
  isError?: boolean;
10
10
  isClearIconVisible?: boolean;
11
11
  onClickClearField?: () => void;
12
+ clearButtonLabel?: string;
12
13
  } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
13
14
  Select: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "width"> & {
14
15
  children?: React.ReactNode;
package/dist/stories/InputSelect.stories.d.ts CHANGED
@@ -12,6 +12,7 @@ declare const meta: {
12
12
  isError?: boolean;
13
13
  isClearIconVisible?: boolean;
14
14
  onClickClearField?: () => void;
15
+ clearButtonLabel?: string;
15
16
  } & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
16
17
  Select: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "width"> & {
17
18
  children?: React.ReactNode;
package/dist/stories/LabeledInput.stories.d.ts CHANGED
@@ -10,6 +10,7 @@ declare const meta: {
10
10
  isError?: boolean;
11
11
  isClearIconVisible?: boolean;
12
12
  onClickClearField?: () => void;
13
+ clearButtonLabel?: string;
13
14
  } & import("react").RefAttributes<HTMLInputElement>, "ref">, "width" | "icon"> & {
14
15
  label?: React.ReactNode;
15
16
  icon?: React.FC<import("../src").IconProps>;
package/dist/stories/NaturalLanguageForm.stories.d.ts CHANGED
@@ -16,6 +16,7 @@ declare const meta: {
16
16
  isError?: boolean;
17
17
  isClearIconVisible?: boolean;
18
18
  onClickClearField?: () => void;
19
+ clearButtonLabel?: string;
19
20
  } & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
20
21
  Select: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "width"> & {
21
22
  children?: React.ReactNode;
@@ -50,6 +51,7 @@ declare const meta: {
50
51
  isError?: boolean;
51
52
  isClearIconVisible?: boolean;
52
53
  onClickClearField?: () => void;
54
+ clearButtonLabel?: string;
53
55
  } & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
54
56
  Select: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "width"> & {
55
57
  children?: React.ReactNode;
package/dist/stories/SearchInput.stories.d.ts CHANGED
@@ -9,3 +9,4 @@ type Story = StoryObj<typeof meta>;
9
9
  export declare const Base: Story;
10
10
  export declare const SearchExample: Story;
11
11
  export declare const WithQuery: Story;
12
+ export declare const ClearWithKeyboard: Story;
package/dist/web-ui-tailwind.css CHANGED
@@ -391,6 +391,7 @@
391
391
  --ui-font-weight-medium: 500;
392
392
  --ui-font-weight-semibold: 600;
393
393
  --ui-font-weight-bold: 700;
394
+ --ui-font-weight-extrabold: 800;
394
395
  --ui-radius-sm: 0.25rem;
395
396
  --ui-radius-md: 0.375rem;
396
397
  --ui-radius-lg: 0.5rem;
@@ -1272,6 +1273,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
1272
1273
  .ui\:mb-4 {
1273
1274
  margin-bottom: calc(var(--ui-spacing) * 4);
1274
1275
  }
1276
+ .ui\:mb-12 {
1277
+ margin-bottom: 3rem;
1278
+ }
1275
1279
  .ui\:mb-f_2xl {
1276
1280
  margin-bottom: var(--ui-semantic-spacing-2xl);
1277
1281
  }
@@ -2210,6 +2214,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
2210
2214
  .ui\:appearance-none {
2211
2215
  appearance: none;
2212
2216
  }
2217
+ .ui\:auto-rows-auto {
2218
+ grid-auto-rows: auto;
2219
+ }
2213
2220
  .ui\:grid-cols-1 {
2214
2221
  grid-template-columns: repeat(1, minmax(0, 1fr));
2215
2222
  }
@@ -2294,6 +2301,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
2294
2301
  .ui\:gap-\(--ui-spacing-xl\) {
2295
2302
  gap: var(--ui-spacing-xl);
2296
2303
  }
2304
+ .ui\:gap-1 {
2305
+ gap: var(--ui-spacing);
2306
+ }
2297
2307
  .ui\:gap-2 {
2298
2308
  gap: calc(var(--ui-spacing) * 2);
2299
2309
  }
@@ -2917,6 +2927,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
2917
2927
  .ui\:bg-green-500 {
2918
2928
  background-color: var(--ui-color-green-500);
2919
2929
  }
2930
+ .ui\:bg-green-700 {
2931
+ background-color: var(--ui-color-green-700);
2932
+ }
2920
2933
  .ui\:bg-main-background {
2921
2934
  background-color: #f8fafc;
2922
2935
  }
@@ -2968,6 +2981,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
2968
2981
  .ui\:bg-red-500 {
2969
2982
  background-color: var(--ui-color-red-500);
2970
2983
  }
2984
+ .ui\:bg-red-700 {
2985
+ background-color: var(--ui-color-red-700);
2986
+ }
2971
2987
  .ui\:bg-secondary {
2972
2988
  background-color: #F3F4F6;
2973
2989
  }
@@ -3117,6 +3133,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
3117
3133
  .ui\:p-6 {
3118
3134
  padding: calc(var(--ui-spacing) * 6);
3119
3135
  }
3136
+ .ui\:p-8 {
3137
+ padding: calc(var(--ui-spacing) * 8);
3138
+ }
3120
3139
  .ui\:p-f_2xl {
3121
3140
  padding: var(--ui-semantic-spacing-2xl);
3122
3141
  }
@@ -3739,6 +3758,10 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
3739
3758
  --tw-font-weight: var(--ui-font-weight-bold);
3740
3759
  font-weight: var(--ui-font-weight-bold);
3741
3760
  }
3761
+ .ui\:font-extrabold {
3762
+ --tw-font-weight: var(--ui-font-weight-extrabold);
3763
+ font-weight: var(--ui-font-weight-extrabold);
3764
+ }
3742
3765
  .ui\:font-medium {
3743
3766
  --tw-font-weight: var(--ui-font-weight-medium);
3744
3767
  font-weight: var(--ui-font-weight-medium);
@@ -5669,6 +5692,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
5669
5692
  .ui\:\[\&_thead\>tr\>th\:first-child\]\:z-\[3\] thead > tr > th:first-child {
5670
5693
  z-index: 3;
5671
5694
  }
5695
+ .ui\:\[\&\:\:-webkit-search-cancel-button\]\:appearance-none::-webkit-search-cancel-button {
5696
+ appearance: none;
5697
+ }
5672
5698
  .ui\:\[\&\:has\(summary\:focus\)\]\:border-blue-500:has(summary:focus) {
5673
5699
  border-color: var(--ui-color-blue-500);
5674
5700
  }
@@ -5789,6 +5815,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
5789
5815
  border-top-style: var(--tw-border-style);
5790
5816
  border-top-width: 1px;
5791
5817
  }
5818
+ .ui\:\[\&\[type\=search\]\]\:appearance-none[type=search] {
5819
+ appearance: none;
5820
+ }
5792
5821
  :root {
5793
5822
  interpolate-size: allow-keywords;
5794
5823
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@luscii-healthtech/web-ui",
3
- "version": "60.2.0",
3
+ "version": "60.2.2",
4
4
  "license": "MIT",
5
5
  "author": {
6
6
  "name": "Joris Janssen"