@opengovsg/oui 0.0.12 → 0.0.13

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 (9) hide show
  1. package/dist/cjs/govt-banner/govt-banner.cjs +24 -59
  2. package/dist/cjs/index.cjs +2 -2
  3. package/dist/esm/govt-banner/govt-banner.js +25 -60
  4. package/dist/esm/index.js +1 -1
  5. package/dist/types/badge/use-badge.d.ts +7 -48
  6. package/dist/types/badge/use-badge.d.ts.map +1 -1
  7. package/dist/types/govt-banner/govt-banner.d.ts.map +1 -1
  8. package/dist/types/spinner/use-spinner.d.ts +8 -8
  9. package/package.json +5 -5
package/dist/cjs/govt-banner/govt-banner.cjs CHANGED
@@ -12,54 +12,11 @@ var landmark = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/
12
12
  var externalLink = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/external-link.cjs');
13
13
  var lock = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/lock.cjs');
14
14
 
15
- const i18nStrings = {
16
- "en-SG": {
17
- mainLabel: "A Singapore Government Agency Website",
18
- identifyLabel: "How to identify",
19
- environmentLabel: "[NOTE: THIS IS A {environment} WEBSITE]",
20
- officialLinkHeader: "Official website links end with .gov.sg",
21
- officialLinkContent: "Government agencies communicate via <boldThis>.gov.sg</boldThis> websites (e.g. go.gov.sg/open).",
22
- officialLinkTrusted: "Trusted websites",
23
- secureHeader: "Secure websites use HTTPS",
24
- secureContent: "Look for a <boldThis>lock</boldThis> {icon} or https:// as an added precaution. Share sensitive information only on official, secure websites."
25
- },
26
- "zh-SG": {
27
- mainLabel: "A Singapore Government Agency Website",
28
- identifyLabel: "How to identify",
29
- environmentLabel: "[NOTE: THIS IS A {environment} WEBSITE]",
30
- officialLinkHeader: "Official website links end with .gov.sg",
31
- officialLinkContent: "Government agencies communicate via <boldThis>.gov.sg</boldThis> websites (e.g. go.gov.sg/open).",
32
- officialLinkTrusted: "Trusted websites",
33
- secureHeader: "Secure websites use HTTPS",
34
- secureContent: "Look for a <boldThis>lock</boldThis> {icon} or https:// as an added precaution. Share sensitive information only on official, secure websites."
35
- },
36
- "ms-SG": {
37
- mainLabel: "A Singapore Government Agency Website",
38
- identifyLabel: "How to identify",
39
- environmentLabel: "[NOTE: THIS IS A {environment} WEBSITE]",
40
- officialLinkHeader: "Official website links end with .gov.sg",
41
- officialLinkContent: "Government agencies communicate via <boldThis>.gov.sg</boldThis> websites (e.g. go.gov.sg/open).",
42
- officialLinkTrusted: "Trusted websites",
43
- secureHeader: "Secure websites use HTTPS",
44
- secureContent: "Look for a <boldThis>lock</boldThis> {icon} or https:// as an added precaution. Share sensitive information only on official, secure websites."
45
- },
46
- "ta-SG": {
47
- mainLabel: "A Singapore Government Agency Website",
48
- identifyLabel: "How to identify",
49
- environmentLabel: "[NOTE: THIS IS A {environment} WEBSITE]",
50
- officialLinkHeader: "Official website links end with .gov.sg",
51
- officialLinkContent: "Government agencies communicate via <boldThis>.gov.sg</boldThis> websites (e.g. go.gov.sg/open).",
52
- officialLinkTrusted: "Trusted websites",
53
- secureHeader: "Secure websites use HTTPS",
54
- secureContent: "Look for a <boldThis>lock</boldThis> {icon} or https:// as an added precaution. Share sensitive information only on official, secure websites."
55
- }
56
- };
57
15
  function GovtBanner({
58
16
  environment,
59
17
  classNames,
60
18
  ...props
61
19
  }) {
62
- const formatMessage = reactAria.useMessageFormatter(i18nStrings);
63
20
  const state = reactStately.useDisclosureState(props);
64
21
  const panelRef = react.useRef(null);
65
22
  const triggerRef = react.useRef(null);
@@ -106,10 +63,12 @@ function GovtBanner({
106
63
  {
107
64
  className: slots.mainContent({ className: classNames?.mainContent }),
108
65
  children: [
109
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatMessage("mainLabel") }),
110
- environment ? /* @__PURE__ */ jsxRuntime.jsx("b", { children: formatMessage("environmentLabel", {
111
- environment: environment.toUpperCase()
112
- }) }) : null,
66
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: "A Singapore Government Agency Website" }),
67
+ environment ? /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
68
+ "[NOTE: THIS IS A ",
69
+ environment.toUpperCase(),
70
+ " WEBSITE]"
71
+ ] }) : null,
113
72
  /* @__PURE__ */ jsxRuntime.jsxs(
114
73
  "button",
115
74
  {
@@ -121,7 +80,7 @@ function GovtBanner({
121
80
  type: "button",
122
81
  ...reactAria.mergeProps(buttonProps, focusProps),
123
82
  children: [
124
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: slots.link({ className: classNames?.link }), children: formatMessage("identifyLabel") }),
83
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: slots.link({ className: classNames?.link }), children: "How to identify" }),
125
84
  /* @__PURE__ */ jsxRuntime.jsx(
126
85
  chevronDown.default,
127
86
  {
@@ -164,13 +123,13 @@ function GovtBanner({
164
123
  className: slots.panelHeader({
165
124
  className: classNames?.panelHeader
166
125
  }),
167
- children: formatMessage("officialLinkHeader")
126
+ children: "Official website links end with .gov.sg"
168
127
  }
169
128
  ),
170
129
  /* @__PURE__ */ jsxRuntime.jsxs("article", { children: [
171
- formatMessage("officialLinkContent", {
172
- boldThis: (content) => /* @__PURE__ */ jsxRuntime.jsx("b", { children: content })
173
- }),
130
+ "Government agencies communicate via ",
131
+ /* @__PURE__ */ jsxRuntime.jsx("b", { children: ".gov.sg" }),
132
+ " websites (e.g. go.gov.sg/open).",
174
133
  " ",
175
134
  /* @__PURE__ */ jsxRuntime.jsxs(
176
135
  "a",
@@ -180,7 +139,7 @@ function GovtBanner({
180
139
  rel: "noreferrer",
181
140
  target: "_blank",
182
141
  children: [
183
- formatMessage("officialLinkTrusted", {}),
142
+ "Trusted websites",
184
143
  /* @__PURE__ */ jsxRuntime.jsx(
185
144
  externalLink.default,
186
145
  {
@@ -226,12 +185,14 @@ function GovtBanner({
226
185
  className: slots.panelHeader({
227
186
  className: classNames?.panelHeader
228
187
  }),
229
- children: formatMessage("secureHeader")
188
+ children: "Secure websites use HTTPS"
230
189
  }
231
190
  ),
232
- /* @__PURE__ */ jsxRuntime.jsx("article", { children: formatMessage("secureContent", {
233
- boldThis: (content) => /* @__PURE__ */ jsxRuntime.jsx("b", { children: content }),
234
- icon: /* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": true, children: [
191
+ /* @__PURE__ */ jsxRuntime.jsxs("article", { children: [
192
+ "Look for a ",
193
+ /* @__PURE__ */ jsxRuntime.jsx("b", { children: "lock" }),
194
+ " ",
195
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": true, children: [
235
196
  "(",
236
197
  /* @__PURE__ */ jsxRuntime.jsx(
237
198
  lock.default,
@@ -242,8 +203,12 @@ function GovtBanner({
242
203
  }
243
204
  ),
244
205
  ")"
245
- ] })
246
- }) })
206
+ ] }),
207
+ " ",
208
+ "or ",
209
+ /* @__PURE__ */ jsxRuntime.jsx("b", { children: "https://" }),
210
+ " as an added precaution. Share sensitive information only on official, secure websites."
211
+ ] })
247
212
  ]
248
213
  }
249
214
  )
package/dist/cjs/index.cjs CHANGED
@@ -23,7 +23,6 @@ var rangeCalendar = require('./range-calendar/range-calendar.cjs');
23
23
  var menu = require('./menu/menu.cjs');
24
24
  var popover = require('./popover/popover.cjs');
25
25
  var tabs = require('./tabs/tabs.cjs');
26
- var datePicker = require('./date-picker/date-picker.cjs');
27
26
  var dateRangePicker = require('./date-range-picker/date-range-picker.cjs');
28
27
  var button = require('./button/button.cjs');
29
28
  var comboBox = require('./combo-box/combo-box.cjs');
@@ -37,6 +36,7 @@ var calendar = require('./calendar/calendar.cjs');
37
36
  var calendarStyleContext = require('./calendar/calendar-style-context.cjs');
38
37
  var utils = require('./calendar/utils.cjs');
39
38
  var dateField = require('./date-field/date-field.cjs');
39
+ var datePicker = require('./date-picker/date-picker.cjs');
40
40
 
41
41
 
42
42
 
@@ -80,7 +80,6 @@ exports.TabPanel = tabs.TabPanel;
80
80
  exports.Tabs = tabs.Tabs;
81
81
  exports.TabsVariantContext = tabs.TabsVariantContext;
82
82
  exports.useTabsVariantContext = tabs.useTabsVariantContext;
83
- exports.DatePicker = datePicker.DatePicker;
84
83
  exports.DateRangePicker = dateRangePicker.DateRangePicker;
85
84
  exports.Button = button.Button;
86
85
  exports.ComboBox = comboBox.ComboBox;
@@ -105,3 +104,4 @@ exports.useGenerateLocalizedYears = utils.useGenerateLocalizedYears;
105
104
  exports.useLocalizedMonthYear = utils.useLocalizedMonthYear;
106
105
  exports.DateField = dateField.DateField;
107
106
  exports.DateInput = dateField.DateInput;
107
+ exports.DatePicker = datePicker.DatePicker;
package/dist/esm/govt-banner/govt-banner.js CHANGED
@@ -2,7 +2,7 @@
2
2
  "use client";
3
3
  import { jsxs, jsx } from 'react/jsx-runtime';
4
4
  import { useRef } from 'react';
5
- import { useMessageFormatter, useDisclosure, useButton, useFocusRing, mergeProps } from 'react-aria';
5
+ import { useDisclosure, useButton, useFocusRing, mergeProps } from 'react-aria';
6
6
  import { useDisclosureState } from 'react-stately';
7
7
  import { govtBannerStyles, dataAttr, twMerge } from '@opengovsg/oui-theme';
8
8
  import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
@@ -10,54 +10,11 @@ import Landmark from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/no
10
10
  import ExternalLink from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/external-link.js';
11
11
  import Lock from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/lock.js';
12
12
 
13
- const i18nStrings = {
14
- "en-SG": {
15
- mainLabel: "A Singapore Government Agency Website",
16
- identifyLabel: "How to identify",
17
- environmentLabel: "[NOTE: THIS IS A {environment} WEBSITE]",
18
- officialLinkHeader: "Official website links end with .gov.sg",
19
- officialLinkContent: "Government agencies communicate via <boldThis>.gov.sg</boldThis> websites (e.g. go.gov.sg/open).",
20
- officialLinkTrusted: "Trusted websites",
21
- secureHeader: "Secure websites use HTTPS",
22
- secureContent: "Look for a <boldThis>lock</boldThis> {icon} or https:// as an added precaution. Share sensitive information only on official, secure websites."
23
- },
24
- "zh-SG": {
25
- mainLabel: "A Singapore Government Agency Website",
26
- identifyLabel: "How to identify",
27
- environmentLabel: "[NOTE: THIS IS A {environment} WEBSITE]",
28
- officialLinkHeader: "Official website links end with .gov.sg",
29
- officialLinkContent: "Government agencies communicate via <boldThis>.gov.sg</boldThis> websites (e.g. go.gov.sg/open).",
30
- officialLinkTrusted: "Trusted websites",
31
- secureHeader: "Secure websites use HTTPS",
32
- secureContent: "Look for a <boldThis>lock</boldThis> {icon} or https:// as an added precaution. Share sensitive information only on official, secure websites."
33
- },
34
- "ms-SG": {
35
- mainLabel: "A Singapore Government Agency Website",
36
- identifyLabel: "How to identify",
37
- environmentLabel: "[NOTE: THIS IS A {environment} WEBSITE]",
38
- officialLinkHeader: "Official website links end with .gov.sg",
39
- officialLinkContent: "Government agencies communicate via <boldThis>.gov.sg</boldThis> websites (e.g. go.gov.sg/open).",
40
- officialLinkTrusted: "Trusted websites",
41
- secureHeader: "Secure websites use HTTPS",
42
- secureContent: "Look for a <boldThis>lock</boldThis> {icon} or https:// as an added precaution. Share sensitive information only on official, secure websites."
43
- },
44
- "ta-SG": {
45
- mainLabel: "A Singapore Government Agency Website",
46
- identifyLabel: "How to identify",
47
- environmentLabel: "[NOTE: THIS IS A {environment} WEBSITE]",
48
- officialLinkHeader: "Official website links end with .gov.sg",
49
- officialLinkContent: "Government agencies communicate via <boldThis>.gov.sg</boldThis> websites (e.g. go.gov.sg/open).",
50
- officialLinkTrusted: "Trusted websites",
51
- secureHeader: "Secure websites use HTTPS",
52
- secureContent: "Look for a <boldThis>lock</boldThis> {icon} or https:// as an added precaution. Share sensitive information only on official, secure websites."
53
- }
54
- };
55
13
  function GovtBanner({
56
14
  environment,
57
15
  classNames,
58
16
  ...props
59
17
  }) {
60
- const formatMessage = useMessageFormatter(i18nStrings);
61
18
  const state = useDisclosureState(props);
62
19
  const panelRef = useRef(null);
63
20
  const triggerRef = useRef(null);
@@ -104,10 +61,12 @@ function GovtBanner({
104
61
  {
105
62
  className: slots.mainContent({ className: classNames?.mainContent }),
106
63
  children: [
107
- /* @__PURE__ */ jsx("span", { children: formatMessage("mainLabel") }),
108
- environment ? /* @__PURE__ */ jsx("b", { children: formatMessage("environmentLabel", {
109
- environment: environment.toUpperCase()
110
- }) }) : null,
64
+ /* @__PURE__ */ jsx("span", { children: "A Singapore Government Agency Website" }),
65
+ environment ? /* @__PURE__ */ jsxs("b", { children: [
66
+ "[NOTE: THIS IS A ",
67
+ environment.toUpperCase(),
68
+ " WEBSITE]"
69
+ ] }) : null,
111
70
  /* @__PURE__ */ jsxs(
112
71
  "button",
113
72
  {
@@ -119,7 +78,7 @@ function GovtBanner({
119
78
  type: "button",
120
79
  ...mergeProps(buttonProps, focusProps),
121
80
  children: [
122
- /* @__PURE__ */ jsx("span", { className: slots.link({ className: classNames?.link }), children: formatMessage("identifyLabel") }),
81
+ /* @__PURE__ */ jsx("span", { className: slots.link({ className: classNames?.link }), children: "How to identify" }),
123
82
  /* @__PURE__ */ jsx(
124
83
  ChevronDown,
125
84
  {
@@ -162,13 +121,13 @@ function GovtBanner({
162
121
  className: slots.panelHeader({
163
122
  className: classNames?.panelHeader
164
123
  }),
165
- children: formatMessage("officialLinkHeader")
124
+ children: "Official website links end with .gov.sg"
166
125
  }
167
126
  ),
168
127
  /* @__PURE__ */ jsxs("article", { children: [
169
- formatMessage("officialLinkContent", {
170
- boldThis: (content) => /* @__PURE__ */ jsx("b", { children: content })
171
- }),
128
+ "Government agencies communicate via ",
129
+ /* @__PURE__ */ jsx("b", { children: ".gov.sg" }),
130
+ " websites (e.g. go.gov.sg/open).",
172
131
  " ",
173
132
  /* @__PURE__ */ jsxs(
174
133
  "a",
@@ -178,7 +137,7 @@ function GovtBanner({
178
137
  rel: "noreferrer",
179
138
  target: "_blank",
180
139
  children: [
181
- formatMessage("officialLinkTrusted", {}),
140
+ "Trusted websites",
182
141
  /* @__PURE__ */ jsx(
183
142
  ExternalLink,
184
143
  {
@@ -224,12 +183,14 @@ function GovtBanner({
224
183
  className: slots.panelHeader({
225
184
  className: classNames?.panelHeader
226
185
  }),
227
- children: formatMessage("secureHeader")
186
+ children: "Secure websites use HTTPS"
228
187
  }
229
188
  ),
230
- /* @__PURE__ */ jsx("article", { children: formatMessage("secureContent", {
231
- boldThis: (content) => /* @__PURE__ */ jsx("b", { children: content }),
232
- icon: /* @__PURE__ */ jsxs("span", { "aria-hidden": true, children: [
189
+ /* @__PURE__ */ jsxs("article", { children: [
190
+ "Look for a ",
191
+ /* @__PURE__ */ jsx("b", { children: "lock" }),
192
+ " ",
193
+ /* @__PURE__ */ jsxs("span", { "aria-hidden": true, children: [
233
194
  "(",
234
195
  /* @__PURE__ */ jsx(
235
196
  Lock,
@@ -240,8 +201,12 @@ function GovtBanner({
240
201
  }
241
202
  ),
242
203
  ")"
243
- ] })
244
- }) })
204
+ ] }),
205
+ " ",
206
+ "or ",
207
+ /* @__PURE__ */ jsx("b", { children: "https://" }),
208
+ " as an added precaution. Share sensitive information only on official, secure websites."
209
+ ] })
245
210
  ]
246
211
  }
247
212
  )
package/dist/esm/index.js CHANGED
@@ -21,7 +21,6 @@ export { RangeCalendar, RangeCalendarCell, RangeCalendarStateWrapper } from './r
21
21
  export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext } from './menu/menu.js';
22
22
  export { Popover } from './popover/popover.js';
23
23
  export { Tab, TabList, TabPanel, Tabs, TabsVariantContext, useTabsVariantContext } from './tabs/tabs.js';
24
- export { DatePicker } from './date-picker/date-picker.js';
25
24
  export { DateRangePicker } from './date-range-picker/date-range-picker.js';
26
25
  export { Button } from './button/button.js';
27
26
  export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
@@ -35,3 +34,4 @@ export { Calendar, CalendarStateWrapper } from './calendar/calendar.js';
35
34
  export { CalendarStyleContext, useCalendarStyleContext } from './calendar/calendar-style-context.js';
36
35
  export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './calendar/utils.js';
37
36
  export { DateField, DateInput } from './date-field/date-field.js';
37
+ export { DatePicker } from './date-picker/date-picker.js';
package/dist/types/badge/use-badge.d.ts CHANGED
@@ -49,22 +49,6 @@ export declare function useBadge(originalProps: UseBadgeProps): {
49
49
  md: string;
50
50
  };
51
51
  }, undefined, string, {
52
- responsiveVariants?: boolean | (string | number | symbol)[] | {
53
- size?: boolean | (string | number | symbol)[] | undefined;
54
- isFocusVisible?: boolean | (string | number | symbol)[] | undefined;
55
- } | undefined;
56
- } & import("tailwind-variants/dist/config.js").TWMConfig & {
57
- twMergeConfig: {
58
- extend: {
59
- theme: {};
60
- classGroups: {
61
- prose: {
62
- prose: (() => boolean)[];
63
- }[];
64
- };
65
- };
66
- };
67
- }, {
68
52
  isFocusVisible: {
69
53
  false: string;
70
54
  true: string;
@@ -75,21 +59,6 @@ export declare function useBadge(originalProps: UseBadgeProps): {
75
59
  true: string;
76
60
  };
77
61
  }, undefined, "outline-offset-2 outline-none", {
78
- responsiveVariants?: boolean | (string | number | symbol)[] | {
79
- isFocusVisible?: boolean | (string | number | symbol)[] | undefined;
80
- } | undefined;
81
- } & import("tailwind-variants/dist/config.js").TWMConfig & {
82
- twMergeConfig: {
83
- extend: {
84
- theme: {};
85
- classGroups: {
86
- prose: {
87
- prose: (() => boolean)[];
88
- }[];
89
- };
90
- };
91
- };
92
- }, {
93
62
  isFocusVisible: {
94
63
  false: string;
95
64
  true: string;
@@ -99,17 +68,7 @@ export declare function useBadge(originalProps: UseBadgeProps): {
99
68
  false: string;
100
69
  true: string;
101
70
  };
102
- }, undefined, "outline-offset-2 outline-none", import("tailwind-variants/dist/config.js").TVConfig<{
103
- isFocusVisible: {
104
- false: string;
105
- true: string;
106
- };
107
- }, {
108
- isFocusVisible: {
109
- false: string;
110
- true: string;
111
- };
112
- }>, unknown, unknown, undefined>>>;
71
+ }, undefined, "outline-offset-2 outline-none", unknown, unknown, undefined>>>;
113
72
  base: ((slotProps?: ({
114
73
  size?: "md" | "sm" | "xs" | undefined;
115
74
  color?: "sub" | "main" | "neutral" | "critical" | "warning" | "success" | undefined;
@@ -117,14 +76,14 @@ export declare function useBadge(originalProps: UseBadgeProps): {
117
76
  variant?: "solid" | "outline" | "dot" | "subtle" | undefined;
118
77
  isDisabled?: boolean | undefined;
119
78
  isCloseable?: boolean | undefined;
120
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string) & ((slotProps?: ({
79
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string) & ((slotProps?: ({
121
80
  size?: "md" | "sm" | "xs" | undefined;
122
81
  color?: "sub" | "main" | "neutral" | "critical" | "warning" | "success" | undefined;
123
82
  radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
124
83
  variant?: "solid" | "outline" | "dot" | "subtle" | undefined;
125
84
  isDisabled?: boolean | undefined;
126
85
  isCloseable?: boolean | undefined;
127
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string);
86
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string);
128
87
  dot: ((slotProps?: ({
129
88
  size?: "md" | "sm" | "xs" | undefined;
130
89
  color?: "sub" | "main" | "neutral" | "critical" | "warning" | "success" | undefined;
@@ -132,14 +91,14 @@ export declare function useBadge(originalProps: UseBadgeProps): {
132
91
  variant?: "solid" | "outline" | "dot" | "subtle" | undefined;
133
92
  isDisabled?: boolean | undefined;
134
93
  isCloseable?: boolean | undefined;
135
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string) & ((slotProps?: ({
94
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string) & ((slotProps?: ({
136
95
  size?: "md" | "sm" | "xs" | undefined;
137
96
  color?: "sub" | "main" | "neutral" | "critical" | "warning" | "success" | undefined;
138
97
  radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
139
98
  variant?: "solid" | "outline" | "dot" | "subtle" | undefined;
140
99
  isDisabled?: boolean | undefined;
141
100
  isCloseable?: boolean | undefined;
142
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string);
101
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string);
143
102
  content: ((slotProps?: ({
144
103
  size?: "md" | "sm" | "xs" | undefined;
145
104
  color?: "sub" | "main" | "neutral" | "critical" | "warning" | "success" | undefined;
@@ -147,14 +106,14 @@ export declare function useBadge(originalProps: UseBadgeProps): {
147
106
  variant?: "solid" | "outline" | "dot" | "subtle" | undefined;
148
107
  isDisabled?: boolean | undefined;
149
108
  isCloseable?: boolean | undefined;
150
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string) & ((slotProps?: ({
109
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string) & ((slotProps?: ({
151
110
  size?: "md" | "sm" | "xs" | undefined;
152
111
  color?: "sub" | "main" | "neutral" | "critical" | "warning" | "success" | undefined;
153
112
  radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
154
113
  variant?: "solid" | "outline" | "dot" | "subtle" | undefined;
155
114
  isDisabled?: boolean | undefined;
156
115
  isCloseable?: boolean | undefined;
157
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string);
116
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string);
158
117
  };
159
118
  classNames: SlotsToClasses<"content" | "base" | "dot" | "closeButton"> | undefined;
160
119
  isCloseable: boolean;
package/dist/types/badge/use-badge.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-badge.d.ts","sourceRoot":"","sources":["../../../src/badge/use-badge.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOtC,OAAO,KAAK,EACV,UAAU,EACV,iBAAiB,EACjB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAG7B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAI9D,MAAM,WAAW,aAAc,SAAQ,WAAW,EAAE,iBAAiB;IACnE,GAAG,CAAC,EAAE,QAAQ,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE5B;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,UAAU,GAAG,aAAa,CAAC,CAAA;IACvD;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;CAClC;AAiBD,wBAAgB,QAAQ,CAAC,aAAa,EAAE,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiGpD"}
1
+ {"version":3,"file":"use-badge.d.ts","sourceRoot":"","sources":["../../../src/badge/use-badge.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOtC,OAAO,KAAK,EACV,UAAU,EACV,iBAAiB,EACjB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAG7B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAI9D,MAAM,WAAW,aAAc,SAAQ,WAAW,EAAE,iBAAiB;IACnE,GAAG,CAAC,EAAE,QAAQ,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE5B;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,UAAU,GAAG,aAAa,CAAC,CAAA;IACvD;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;CAClC;AAiBD,wBAAgB,QAAQ,CAAC,aAAa,EAAE,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiGpD"}
package/dist/types/govt-banner/govt-banner.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"govt-banner.d.ts","sourceRoot":"","sources":["../../../src/govt-banner/govt-banner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAY7C,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAG3E,UAAU,eAAgB,SAAQ,eAAe;IAC/C;;;;;OAKG;IACH,WAAW,CAAC,EAAE,YAAY,CACxB,YAAY,GAAG,SAAS,GAAG,KAAK,GAAG,SAAS,EAC5C,MAAM,CACP,CAAA;IAED;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;CAC7C;AAsDD,wBAAgB,UAAU,CAAC,EACzB,WAAW,EACX,UAAU,EACV,GAAG,KAAK,EACT,EAAE,eAAe,2CA2JjB"}
1
+ {"version":3,"file":"govt-banner.d.ts","sourceRoot":"","sources":["../../../src/govt-banner/govt-banner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAM7C,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAG3E,UAAU,eAAgB,SAAQ,eAAe;IAC/C;;;;;OAKG;IACH,WAAW,CAAC,EAAE,YAAY,CACxB,YAAY,GAAG,SAAS,GAAG,KAAK,GAAG,SAAS,EAC5C,MAAM,CACP,CAAA;IAED;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;CAC7C;AAED,wBAAgB,UAAU,CAAC,EACzB,WAAW,EACX,UAAU,EACV,GAAG,KAAK,EACT,EAAE,eAAe,2CAkJjB"}
package/dist/types/spinner/use-spinner.d.ts CHANGED
@@ -28,36 +28,36 @@ export declare const useSpinner: (originalProps: UseSpinnerProps) => {
28
28
  base: (slotProps?: ({
29
29
  size?: "lg" | "md" | "sm" | undefined;
30
30
  color?: "current" | "white" | undefined;
31
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
31
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
32
32
  wrapper: (slotProps?: ({
33
33
  size?: "lg" | "md" | "sm" | undefined;
34
34
  color?: "current" | "white" | undefined;
35
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
35
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
36
36
  circle1: (slotProps?: ({
37
37
  size?: "lg" | "md" | "sm" | undefined;
38
38
  color?: "current" | "white" | undefined;
39
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
39
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
40
40
  circle2: (slotProps?: ({
41
41
  size?: "lg" | "md" | "sm" | undefined;
42
42
  color?: "current" | "white" | undefined;
43
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
43
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
44
44
  } & {
45
45
  base: (slotProps?: ({
46
46
  size?: "lg" | "md" | "sm" | undefined;
47
47
  color?: "current" | "white" | undefined;
48
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
48
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
49
49
  wrapper: (slotProps?: ({
50
50
  size?: "lg" | "md" | "sm" | undefined;
51
51
  color?: "current" | "white" | undefined;
52
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
52
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
53
53
  circle1: (slotProps?: ({
54
54
  size?: "lg" | "md" | "sm" | undefined;
55
55
  color?: "current" | "white" | undefined;
56
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
56
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
57
57
  circle2: (slotProps?: ({
58
58
  size?: "lg" | "md" | "sm" | undefined;
59
59
  color?: "current" | "white" | undefined;
60
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
60
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
61
61
  } & {};
62
62
  classNames: SlotsToClasses<"base" | "wrapper" | "circle1" | "circle2"> | undefined;
63
63
  getSpinnerProps: PropGetter;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opengovsg/oui",
3
- "version": "0.0.12",
3
+ "version": "0.0.13",
4
4
  "sideEffects": false,
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "type": "module",
@@ -34,7 +34,7 @@
34
34
  }
35
35
  },
36
36
  "devDependencies": {
37
- "@storybook/react-vite": "9.0.0-beta.11",
37
+ "@storybook/react-vite": "9.1.1",
38
38
  "@types/lodash-es": "^4.17.12",
39
39
  "@types/prop-types": "^15.7.15",
40
40
  "@types/react": "^19.0.12",
@@ -44,11 +44,11 @@
44
44
  "lucide-react": "^0.475.0",
45
45
  "motion": "^12.18.1",
46
46
  "prettier": "^3.5.3",
47
- "storybook": "9.0.0-beta.11",
47
+ "storybook": "9.1.1",
48
48
  "tsx": "^4.20.3",
49
49
  "typescript": "5.7.3",
50
+ "@opengovsg/oui-theme": "0.0.13",
50
51
  "@oui/chromatic": "0.0.0",
51
- "@opengovsg/oui-theme": "0.0.12",
52
52
  "@oui/eslint-config": "0.0.0",
53
53
  "@oui/prettier-config": "0.0.0",
54
54
  "@oui/typescript-config": "0.0.0"
@@ -80,7 +80,7 @@
80
80
  "peerDependencies": {
81
81
  "motion": ">=11.12.0 || >=12.0.0-alpha.1",
82
82
  "react-aria-components": "^1.10.1",
83
- "@opengovsg/oui-theme": "0.0.12"
83
+ "@opengovsg/oui-theme": "0.0.13"
84
84
  },
85
85
  "scripts": {
86
86
  "build": "tsx ../../tooling/build-scripts/main.ts --dts --clean",