@umami/react-zen 0.84.0 → 0.85.0

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/index.d.ts CHANGED
@@ -356,11 +356,12 @@ declare module '@umami/react-zen/Button' {
356
356
 
357
357
  declare module '@umami/react-zen/Calendar' {
358
358
  import { CalendarProps } from 'react-aria-components';
359
- function Calendar({ className, value, minValue, maxValue, defaultValue, ...props }: CalendarProps<any> & {
359
+ function Calendar({ className, value, minValue, maxValue, defaultValue, onChange, ...props }: CalendarProps<any> & {
360
360
  value: Date;
361
361
  minValue?: Date;
362
362
  maxValue?: Date;
363
363
  defaultValue?: Date;
364
+ onChange?: (value?: Date) => void;
364
365
  }): import("react").JSX.Element;
365
366
  export { Calendar };
366
367
  export type { CalendarProps };
@@ -964,8 +965,9 @@ declare module '@umami/react-zen/ToggleGroup' {
964
965
  import { TagGroupProps, TagProps } from 'react-aria-components';
965
966
  export interface ToggleGroupProps extends TagGroupProps {
966
967
  label?: string;
968
+ onChange?: (value: string | string[]) => void;
967
969
  }
968
- function ToggleGroup({ label, className, children, ...props }: ToggleGroupProps): import("react").JSX.Element;
970
+ function ToggleGroup({ label, className, children, selectionMode, onChange, ...props }: ToggleGroupProps): import("react").JSX.Element;
969
971
  export interface ToggleGroupItemProps extends TagProps {
970
972
  }
971
973
  function ToggleGroupItem({ className, children, ...props }: ToggleGroupItemProps): import("react").JSX.Element;
package/dist/index.js CHANGED
@@ -29998,6 +29998,12 @@ function toCalendarDate(date) {
29998
29998
  }
29999
29999
  return date ? new $35ea8db9cb2ccb90$export$99faa760c7908e4f(date.getUTCFullYear(), date.getUTCMonth() + 1, date.getUTCDate()) : date;
30000
30000
  }
30001
+ function fromCalendarDate(date) {
30002
+ if (date instanceof $35ea8db9cb2ccb90$export$99faa760c7908e4f) {
30003
+ return date.toDate($14e0f24ef4ac5c92$export$aa8b41735afcabd2());
30004
+ }
30005
+ return date;
30006
+ }
30001
30007
 
30002
30008
  // css-modules:E:\dev\umami-react-zen\src\components\Calendar.module.css
30003
30009
  var Calendar_default = { "calendar": "Calendar_calendar__ZDMwM", "header": "Calendar_header__ZDE0Y", "heading": "Calendar_heading__MTk3Z", "button": "Calendar_button__MmIyO", "headerCell": "Calendar_headerCell__MjEwY", "cell": "Calendar_cell__MTc4M" };
@@ -30010,6 +30016,7 @@ function Calendar2({
30010
30016
  minValue,
30011
30017
  maxValue,
30012
30018
  defaultValue,
30019
+ onChange,
30013
30020
  ...props
30014
30021
  }) {
30015
30022
  const dateProps = {
@@ -30018,17 +30025,29 @@ function Calendar2({
30018
30025
  maxValue: toCalendarDate(maxValue),
30019
30026
  defaultValue: toCalendarDate(defaultValue)
30020
30027
  };
30021
- return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)($dfd62f934fc76fed$export$e1aef45b828286de, { ...props, ...dateProps, className: (0, import_classnames16.default)(Calendar_default.calendar, className), children: [
30022
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("header", { className: Calendar_default.header, children: [
30023
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button2, { slot: "previous", className: Calendar_default.button, variant: "quiet", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { rotate: 180, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icons.Chevron, {}) }) }),
30024
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)($5cb03073d3f54797$export$a8a3e93435678ff9, { className: Calendar_default.heading }),
30025
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button2, { slot: "next", className: Calendar_default.button, variant: "quiet", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icons.Chevron, {}) }) })
30026
- ] }),
30027
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)($dfd62f934fc76fed$export$5bd780d491cfc46c, { children: [
30028
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)($dfd62f934fc76fed$export$22e2d15eaa4d2377, { children: (day) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)($dfd62f934fc76fed$export$ad2135cac3a11b3d, { className: Calendar_default.headerCell, children: day }) }),
30029
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)($dfd62f934fc76fed$export$e11f8ba65d857bff, { className: Calendar_default.body, children: (date) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)($dfd62f934fc76fed$export$5d847498420df57b, { className: Calendar_default.cell, date }) })
30030
- ] })
30031
- ] });
30028
+ const handleChange = (date) => {
30029
+ onChange?.(fromCalendarDate(date));
30030
+ };
30031
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
30032
+ $dfd62f934fc76fed$export$e1aef45b828286de,
30033
+ {
30034
+ ...props,
30035
+ ...dateProps,
30036
+ className: (0, import_classnames16.default)(Calendar_default.calendar, className),
30037
+ onChange: handleChange,
30038
+ children: [
30039
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("header", { className: Calendar_default.header, children: [
30040
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button2, { slot: "previous", className: Calendar_default.button, variant: "quiet", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { rotate: 180, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icons.Chevron, {}) }) }),
30041
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)($5cb03073d3f54797$export$a8a3e93435678ff9, { className: Calendar_default.heading }),
30042
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button2, { slot: "next", className: Calendar_default.button, variant: "quiet", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icons.Chevron, {}) }) })
30043
+ ] }),
30044
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)($dfd62f934fc76fed$export$5bd780d491cfc46c, { children: [
30045
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)($dfd62f934fc76fed$export$22e2d15eaa4d2377, { children: (day) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)($dfd62f934fc76fed$export$ad2135cac3a11b3d, { className: Calendar_default.headerCell, children: day }) }),
30046
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)($dfd62f934fc76fed$export$e11f8ba65d857bff, { className: Calendar_default.body, children: (date) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)($dfd62f934fc76fed$export$5d847498420df57b, { className: Calendar_default.cell, date }) })
30047
+ ] })
30048
+ ]
30049
+ }
30050
+ );
30032
30051
  }
30033
30052
 
30034
30053
  // src/components/Checkbox.tsx
@@ -31356,11 +31375,30 @@ var ToggleGroup_default = { "group": "ToggleGroup_group__Y2YyN", "list": "Toggle
31356
31375
 
31357
31376
  // src/components/ToggleGroup.tsx
31358
31377
  var import_jsx_runtime62 = require("react/jsx-runtime");
31359
- function ToggleGroup({ label, className, children, ...props }) {
31360
- return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)($eaf9e70818b436db$export$67ea30858aaf75e3, { ...props, className: (0, import_classnames51.default)(ToggleGroup_default.group, className), selectionBehavior: "toggle", children: [
31361
- label && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Label2, { children: label }),
31362
- /* @__PURE__ */ (0, import_jsx_runtime62.jsx)($eaf9e70818b436db$export$f9fef0f55402315b, { className: ToggleGroup_default.list, children })
31363
- ] });
31378
+ function ToggleGroup({
31379
+ label,
31380
+ className,
31381
+ children,
31382
+ selectionMode = "single",
31383
+ onChange,
31384
+ ...props
31385
+ }) {
31386
+ const handleChange = (keys) => {
31387
+ onChange?.(Array.from(keys).map((k) => k.toString()));
31388
+ };
31389
+ return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
31390
+ $eaf9e70818b436db$export$67ea30858aaf75e3,
31391
+ {
31392
+ ...props,
31393
+ selectionMode,
31394
+ onSelectionChange: handleChange,
31395
+ className: (0, import_classnames51.default)(ToggleGroup_default.group, className),
31396
+ children: [
31397
+ label && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Label2, { children: label }),
31398
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)($eaf9e70818b436db$export$f9fef0f55402315b, { className: ToggleGroup_default.list, children })
31399
+ ]
31400
+ }
31401
+ );
31364
31402
  }
31365
31403
  function ToggleGroupItem({ className, children, ...props }) {
31366
31404
  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)($eaf9e70818b436db$export$3288d34c523a1192, { ...props, className: (0, import_classnames51.default)(ToggleGroup_default.item, className), children });
package/dist/index.mjs CHANGED
@@ -29887,6 +29887,12 @@ function toCalendarDate(date) {
29887
29887
  }
29888
29888
  return date ? new $35ea8db9cb2ccb90$export$99faa760c7908e4f(date.getUTCFullYear(), date.getUTCMonth() + 1, date.getUTCDate()) : date;
29889
29889
  }
29890
+ function fromCalendarDate(date) {
29891
+ if (date instanceof $35ea8db9cb2ccb90$export$99faa760c7908e4f) {
29892
+ return date.toDate($14e0f24ef4ac5c92$export$aa8b41735afcabd2());
29893
+ }
29894
+ return date;
29895
+ }
29890
29896
 
29891
29897
  // css-modules:E:\dev\umami-react-zen\src\components\Calendar.module.css
29892
29898
  var Calendar_default = { "calendar": "Calendar_calendar__ZDMwM", "header": "Calendar_header__ZDE0Y", "heading": "Calendar_heading__MTk3Z", "button": "Calendar_button__MmIyO", "headerCell": "Calendar_headerCell__MjEwY", "cell": "Calendar_cell__MTc4M" };
@@ -29899,6 +29905,7 @@ function Calendar2({
29899
29905
  minValue,
29900
29906
  maxValue,
29901
29907
  defaultValue,
29908
+ onChange,
29902
29909
  ...props
29903
29910
  }) {
29904
29911
  const dateProps = {
@@ -29907,17 +29914,29 @@ function Calendar2({
29907
29914
  maxValue: toCalendarDate(maxValue),
29908
29915
  defaultValue: toCalendarDate(defaultValue)
29909
29916
  };
29910
- return /* @__PURE__ */ jsxs12($dfd62f934fc76fed$export$e1aef45b828286de, { ...props, ...dateProps, className: (0, import_classnames16.default)(Calendar_default.calendar, className), children: [
29911
- /* @__PURE__ */ jsxs12("header", { className: Calendar_default.header, children: [
29912
- /* @__PURE__ */ jsx24(Button2, { slot: "previous", className: Calendar_default.button, variant: "quiet", children: /* @__PURE__ */ jsx24(Icon, { rotate: 180, children: /* @__PURE__ */ jsx24(Icons.Chevron, {}) }) }),
29913
- /* @__PURE__ */ jsx24($5cb03073d3f54797$export$a8a3e93435678ff9, { className: Calendar_default.heading }),
29914
- /* @__PURE__ */ jsx24(Button2, { slot: "next", className: Calendar_default.button, variant: "quiet", children: /* @__PURE__ */ jsx24(Icon, { children: /* @__PURE__ */ jsx24(Icons.Chevron, {}) }) })
29915
- ] }),
29916
- /* @__PURE__ */ jsxs12($dfd62f934fc76fed$export$5bd780d491cfc46c, { children: [
29917
- /* @__PURE__ */ jsx24($dfd62f934fc76fed$export$22e2d15eaa4d2377, { children: (day) => /* @__PURE__ */ jsx24($dfd62f934fc76fed$export$ad2135cac3a11b3d, { className: Calendar_default.headerCell, children: day }) }),
29918
- /* @__PURE__ */ jsx24($dfd62f934fc76fed$export$e11f8ba65d857bff, { className: Calendar_default.body, children: (date) => /* @__PURE__ */ jsx24($dfd62f934fc76fed$export$5d847498420df57b, { className: Calendar_default.cell, date }) })
29919
- ] })
29920
- ] });
29917
+ const handleChange = (date) => {
29918
+ onChange?.(fromCalendarDate(date));
29919
+ };
29920
+ return /* @__PURE__ */ jsxs12(
29921
+ $dfd62f934fc76fed$export$e1aef45b828286de,
29922
+ {
29923
+ ...props,
29924
+ ...dateProps,
29925
+ className: (0, import_classnames16.default)(Calendar_default.calendar, className),
29926
+ onChange: handleChange,
29927
+ children: [
29928
+ /* @__PURE__ */ jsxs12("header", { className: Calendar_default.header, children: [
29929
+ /* @__PURE__ */ jsx24(Button2, { slot: "previous", className: Calendar_default.button, variant: "quiet", children: /* @__PURE__ */ jsx24(Icon, { rotate: 180, children: /* @__PURE__ */ jsx24(Icons.Chevron, {}) }) }),
29930
+ /* @__PURE__ */ jsx24($5cb03073d3f54797$export$a8a3e93435678ff9, { className: Calendar_default.heading }),
29931
+ /* @__PURE__ */ jsx24(Button2, { slot: "next", className: Calendar_default.button, variant: "quiet", children: /* @__PURE__ */ jsx24(Icon, { children: /* @__PURE__ */ jsx24(Icons.Chevron, {}) }) })
29932
+ ] }),
29933
+ /* @__PURE__ */ jsxs12($dfd62f934fc76fed$export$5bd780d491cfc46c, { children: [
29934
+ /* @__PURE__ */ jsx24($dfd62f934fc76fed$export$22e2d15eaa4d2377, { children: (day) => /* @__PURE__ */ jsx24($dfd62f934fc76fed$export$ad2135cac3a11b3d, { className: Calendar_default.headerCell, children: day }) }),
29935
+ /* @__PURE__ */ jsx24($dfd62f934fc76fed$export$e11f8ba65d857bff, { className: Calendar_default.body, children: (date) => /* @__PURE__ */ jsx24($dfd62f934fc76fed$export$5d847498420df57b, { className: Calendar_default.cell, date }) })
29936
+ ] })
29937
+ ]
29938
+ }
29939
+ );
29921
29940
  }
29922
29941
 
29923
29942
  // src/components/Checkbox.tsx
@@ -31249,11 +31268,30 @@ var ToggleGroup_default = { "group": "ToggleGroup_group__Y2YyN", "list": "Toggle
31249
31268
 
31250
31269
  // src/components/ToggleGroup.tsx
31251
31270
  import { jsx as jsx62, jsxs as jsxs37 } from "react/jsx-runtime";
31252
- function ToggleGroup({ label, className, children, ...props }) {
31253
- return /* @__PURE__ */ jsxs37($eaf9e70818b436db$export$67ea30858aaf75e3, { ...props, className: (0, import_classnames51.default)(ToggleGroup_default.group, className), selectionBehavior: "toggle", children: [
31254
- label && /* @__PURE__ */ jsx62(Label2, { children: label }),
31255
- /* @__PURE__ */ jsx62($eaf9e70818b436db$export$f9fef0f55402315b, { className: ToggleGroup_default.list, children })
31256
- ] });
31271
+ function ToggleGroup({
31272
+ label,
31273
+ className,
31274
+ children,
31275
+ selectionMode = "single",
31276
+ onChange,
31277
+ ...props
31278
+ }) {
31279
+ const handleChange = (keys) => {
31280
+ onChange?.(Array.from(keys).map((k) => k.toString()));
31281
+ };
31282
+ return /* @__PURE__ */ jsxs37(
31283
+ $eaf9e70818b436db$export$67ea30858aaf75e3,
31284
+ {
31285
+ ...props,
31286
+ selectionMode,
31287
+ onSelectionChange: handleChange,
31288
+ className: (0, import_classnames51.default)(ToggleGroup_default.group, className),
31289
+ children: [
31290
+ label && /* @__PURE__ */ jsx62(Label2, { children: label }),
31291
+ /* @__PURE__ */ jsx62($eaf9e70818b436db$export$f9fef0f55402315b, { className: ToggleGroup_default.list, children })
31292
+ ]
31293
+ }
31294
+ );
31257
31295
  }
31258
31296
  function ToggleGroupItem({ className, children, ...props }) {
31259
31297
  return /* @__PURE__ */ jsx62($eaf9e70818b436db$export$3288d34c523a1192, { ...props, className: (0, import_classnames51.default)(ToggleGroup_default.item, className), children });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umami/react-zen",
3
- "version": "0.84.0",
3
+ "version": "0.85.0",
4
4
  "description": "Modern, minimalist React component library",
5
5
  "author": "Umami <hello@umami.is>",
6
6
  "license": "MIT",