@linyao.tw/ui 0.0.0-snapshot.07df57

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 (169) hide show
  1. package/LICENSE +201 -0
  2. package/README.md +85 -0
  3. package/dist/components/date-time/calendar.d.ts +20 -0
  4. package/dist/components/date-time/calendar.js +102 -0
  5. package/dist/components/date-time/calendar.js.map +1 -0
  6. package/dist/components/date-time/date-field.d.ts +11 -0
  7. package/dist/components/date-time/date-field.js +44 -0
  8. package/dist/components/date-time/date-field.js.map +1 -0
  9. package/dist/components/date-time/date-picker.d.ts +28 -0
  10. package/dist/components/date-time/date-picker.js +74 -0
  11. package/dist/components/date-time/date-picker.js.map +1 -0
  12. package/dist/components/date-time/date-range-picker.d.ts +11 -0
  13. package/dist/components/date-time/date-range-picker.js +79 -0
  14. package/dist/components/date-time/date-range-picker.js.map +1 -0
  15. package/dist/components/date-time/date-types.d.ts +110 -0
  16. package/dist/components/date-time/index.d.ts +8 -0
  17. package/dist/components/date-time/index.js +8 -0
  18. package/dist/components/date-time/shared.d.ts +25 -0
  19. package/dist/components/date-time/shared.js +53 -0
  20. package/dist/components/date-time/shared.js.map +1 -0
  21. package/dist/components/date-time/time-field.d.ts +13 -0
  22. package/dist/components/date-time/time-field.js +52 -0
  23. package/dist/components/date-time/time-field.js.map +1 -0
  24. package/dist/components/feedback/alert.d.ts +21 -0
  25. package/dist/components/feedback/alert.js +44 -0
  26. package/dist/components/feedback/alert.js.map +1 -0
  27. package/dist/components/feedback/banner.d.ts +8 -0
  28. package/dist/components/feedback/banner.js +20 -0
  29. package/dist/components/feedback/banner.js.map +1 -0
  30. package/dist/components/feedback/empty-state.d.ts +12 -0
  31. package/dist/components/feedback/empty-state.js +48 -0
  32. package/dist/components/feedback/empty-state.js.map +1 -0
  33. package/dist/components/feedback/feedback.module.js +42 -0
  34. package/dist/components/feedback/feedback.module.js.map +1 -0
  35. package/dist/components/feedback/feedback.types.d.ts +8 -0
  36. package/dist/components/feedback/feedback.types.js +24 -0
  37. package/dist/components/feedback/feedback.types.js.map +1 -0
  38. package/dist/components/feedback/index.d.ts +9 -0
  39. package/dist/components/feedback/meter.d.ts +12 -0
  40. package/dist/components/feedback/meter.js +28 -0
  41. package/dist/components/feedback/meter.js.map +1 -0
  42. package/dist/components/feedback/progress.d.ts +12 -0
  43. package/dist/components/feedback/progress.js +28 -0
  44. package/dist/components/feedback/progress.js.map +1 -0
  45. package/dist/components/feedback/skeleton.d.ts +5 -0
  46. package/dist/components/feedback/skeleton.js +18 -0
  47. package/dist/components/feedback/skeleton.js.map +1 -0
  48. package/dist/components/feedback/spinner.d.ts +23 -0
  49. package/dist/components/feedback/spinner.js +35 -0
  50. package/dist/components/feedback/spinner.js.map +1 -0
  51. package/dist/components/feedback/toast.d.ts +33 -0
  52. package/dist/components/feedback/toast.js +76 -0
  53. package/dist/components/feedback/toast.js.map +1 -0
  54. package/dist/components/forms/CodeField.d.ts +23 -0
  55. package/dist/components/forms/CodeField.js +63 -0
  56. package/dist/components/forms/CodeField.js.map +1 -0
  57. package/dist/components/forms/FileUpload.d.ts +34 -0
  58. package/dist/components/forms/FileUpload.js +319 -0
  59. package/dist/components/forms/FileUpload.js.map +1 -0
  60. package/dist/components/forms/Input.d.ts +14 -0
  61. package/dist/components/forms/Input.js +33 -0
  62. package/dist/components/forms/Input.js.map +1 -0
  63. package/dist/components/forms/NumberField.d.ts +15 -0
  64. package/dist/components/forms/NumberField.js +71 -0
  65. package/dist/components/forms/NumberField.js.map +1 -0
  66. package/dist/components/forms/OTPField.d.ts +15 -0
  67. package/dist/components/forms/OTPField.js +54 -0
  68. package/dist/components/forms/OTPField.js.map +1 -0
  69. package/dist/components/forms/TextField.d.ts +61 -0
  70. package/dist/components/forms/TextField.js +199 -0
  71. package/dist/components/forms/TextField.js.map +1 -0
  72. package/dist/components/forms/index.d.ts +7 -0
  73. package/dist/components/forms/internal.d.ts +33 -0
  74. package/dist/components/forms/internal.js +61 -0
  75. package/dist/components/forms/internal.js.map +1 -0
  76. package/dist/components/foundations/Avatar.d.ts +33 -0
  77. package/dist/components/foundations/Avatar.js +45 -0
  78. package/dist/components/foundations/Avatar.js.map +1 -0
  79. package/dist/components/foundations/Badge.d.ts +15 -0
  80. package/dist/components/foundations/Badge.js +32 -0
  81. package/dist/components/foundations/Badge.js.map +1 -0
  82. package/dist/components/foundations/Button.d.ts +18 -0
  83. package/dist/components/foundations/Button.js +47 -0
  84. package/dist/components/foundations/Button.js.map +1 -0
  85. package/dist/components/foundations/Card.d.ts +47 -0
  86. package/dist/components/foundations/Card.js +57 -0
  87. package/dist/components/foundations/Card.js.map +1 -0
  88. package/dist/components/foundations/IconButton.d.ts +25 -0
  89. package/dist/components/foundations/IconButton.js +19 -0
  90. package/dist/components/foundations/IconButton.js.map +1 -0
  91. package/dist/components/foundations/Link.d.ts +19 -0
  92. package/dist/components/foundations/Link.js +40 -0
  93. package/dist/components/foundations/Link.js.map +1 -0
  94. package/dist/components/foundations/ListCell.d.ts +68 -0
  95. package/dist/components/foundations/ListCell.js +105 -0
  96. package/dist/components/foundations/ListCell.js.map +1 -0
  97. package/dist/components/foundations/SectionHeading.d.ts +17 -0
  98. package/dist/components/foundations/SectionHeading.js +50 -0
  99. package/dist/components/foundations/SectionHeading.js.map +1 -0
  100. package/dist/components/foundations/Separator.d.ts +11 -0
  101. package/dist/components/foundations/Separator.js +21 -0
  102. package/dist/components/foundations/Separator.js.map +1 -0
  103. package/dist/components/foundations/index.d.ts +9 -0
  104. package/dist/components/foundations/shared.d.ts +5 -0
  105. package/dist/components/foundations/shared.js +8 -0
  106. package/dist/components/foundations/shared.js.map +1 -0
  107. package/dist/components/navigation-data/breadcrumb-pagination.d.ts +34 -0
  108. package/dist/components/navigation-data/breadcrumb-pagination.js +161 -0
  109. package/dist/components/navigation-data/breadcrumb-pagination.js.map +1 -0
  110. package/dist/components/navigation-data/command-palette.d.ts +35 -0
  111. package/dist/components/navigation-data/command-palette.js +151 -0
  112. package/dist/components/navigation-data/command-palette.js.map +1 -0
  113. package/dist/components/navigation-data/header-tab-bar.d.ts +23 -0
  114. package/dist/components/navigation-data/header-tab-bar.js +102 -0
  115. package/dist/components/navigation-data/header-tab-bar.js.map +1 -0
  116. package/dist/components/navigation-data/index.d.ts +7 -0
  117. package/dist/components/navigation-data/menubar-toolbar.d.ts +26 -0
  118. package/dist/components/navigation-data/menubar-toolbar.js +161 -0
  119. package/dist/components/navigation-data/menubar-toolbar.js.map +1 -0
  120. package/dist/components/navigation-data/navigation-menu.d.ts +14 -0
  121. package/dist/components/navigation-data/navigation-menu.js +87 -0
  122. package/dist/components/navigation-data/navigation-menu.js.map +1 -0
  123. package/dist/components/navigation-data/scroll-area.d.ts +6 -0
  124. package/dist/components/navigation-data/scroll-area.js +52 -0
  125. package/dist/components/navigation-data/scroll-area.js.map +1 -0
  126. package/dist/components/navigation-data/table-collection.d.ts +61 -0
  127. package/dist/components/navigation-data/table-collection.js +181 -0
  128. package/dist/components/navigation-data/table-collection.js.map +1 -0
  129. package/dist/components/navigation-data/utils.d.ts +2 -0
  130. package/dist/components/navigation-data/utils.js +11 -0
  131. package/dist/components/navigation-data/utils.js.map +1 -0
  132. package/dist/components/overlays/class-names.d.ts +6 -0
  133. package/dist/components/overlays/class-names.js +11 -0
  134. package/dist/components/overlays/class-names.js.map +1 -0
  135. package/dist/components/overlays/dialog.d.ts +98 -0
  136. package/dist/components/overlays/dialog.js +158 -0
  137. package/dist/components/overlays/dialog.js.map +1 -0
  138. package/dist/components/overlays/disclosure.d.ts +40 -0
  139. package/dist/components/overlays/disclosure.js +138 -0
  140. package/dist/components/overlays/disclosure.js.map +1 -0
  141. package/dist/components/overlays/drawer.d.ts +88 -0
  142. package/dist/components/overlays/drawer.js +192 -0
  143. package/dist/components/overlays/drawer.js.map +1 -0
  144. package/dist/components/overlays/floating.d.ts +83 -0
  145. package/dist/components/overlays/floating.js +220 -0
  146. package/dist/components/overlays/floating.js.map +1 -0
  147. package/dist/components/overlays/index.d.ts +4 -0
  148. package/dist/components/selection/classnames.d.ts +4 -0
  149. package/dist/components/selection/classnames.js +14 -0
  150. package/dist/components/selection/classnames.js.map +1 -0
  151. package/dist/components/selection/combobox.d.ts +118 -0
  152. package/dist/components/selection/combobox.js +284 -0
  153. package/dist/components/selection/combobox.js.map +1 -0
  154. package/dist/components/selection/controls.d.ts +65 -0
  155. package/dist/components/selection/controls.js +171 -0
  156. package/dist/components/selection/controls.js.map +1 -0
  157. package/dist/components/selection/index.d.ts +7 -0
  158. package/dist/components/selection/menu.d.ts +87 -0
  159. package/dist/components/selection/menu.js +157 -0
  160. package/dist/components/selection/menu.js.map +1 -0
  161. package/dist/components/selection/select.d.ts +55 -0
  162. package/dist/components/selection/select.js +138 -0
  163. package/dist/components/selection/select.js.map +1 -0
  164. package/dist/components/selection/selection.module.js +51 -0
  165. package/dist/components/selection/selection.module.js.map +1 -0
  166. package/dist/index.d.ts +7 -0
  167. package/dist/index.js +52 -0
  168. package/dist/styles.css +2 -0
  169. package/package.json +74 -0
@@ -0,0 +1,79 @@
1
+ import { CalendarGlyph as e, FieldLabel as t, FieldMessages as n, LocaleBoundary as r, cx as i } from "./shared.js";
2
+ import { CalendarPanel as a } from "./calendar.js";
3
+ import { DateInputSegments as o } from "./date-field.js";
4
+ import { forwardRef as s } from "react";
5
+ import { Button as c } from "react-aria-components/Button";
6
+ import { jsx as l, jsxs as u } from "react/jsx-runtime";
7
+ import { Dialog as d } from "react-aria-components/Dialog";
8
+ import { Group as f } from "react-aria-components/Group";
9
+ import { Popover as p } from "react-aria-components/Popover";
10
+ import { DateRangePicker as m, RangeCalendar as h } from "react-aria-components/DateRangePicker";
11
+ //#region src/components/date-time/date-range-picker.tsx
12
+ function g({ label: s, description: g, error: _, locale: v, size: y = "md", className: b, open: x, disabled: S, readOnly: C, required: w, invalid: T, onValueChange: E, firstDayOfWeek: D, weekdayStyle: O, showMonthYearPickers: k, popoverPlacement: A = "bottom start", ...j }, M) {
13
+ return /* @__PURE__ */ l(r, {
14
+ locale: v,
15
+ children: /* @__PURE__ */ u(m, {
16
+ ...j,
17
+ ref: M,
18
+ className: i("lyds-date-field", "lyds-date-picker", "lyds-date-range-picker", b),
19
+ "data-size": y,
20
+ ...x === void 0 ? {} : { isOpen: x },
21
+ ...S === void 0 ? {} : { isDisabled: S },
22
+ ...C === void 0 ? {} : { isReadOnly: C },
23
+ ...w === void 0 ? {} : { isRequired: w },
24
+ ...T === void 0 ? {} : { isInvalid: T },
25
+ ...E === void 0 ? {} : { onChange: E },
26
+ ...D === void 0 ? {} : { firstDayOfWeek: D },
27
+ children: [
28
+ /* @__PURE__ */ l(t, { children: s }),
29
+ /* @__PURE__ */ u(f, {
30
+ className: "lyds-date-picker-group",
31
+ children: [
32
+ /* @__PURE__ */ l(o, {
33
+ className: "lyds-date-picker-input",
34
+ slot: "start"
35
+ }),
36
+ /* @__PURE__ */ l("span", {
37
+ className: "lyds-date-range-separator",
38
+ "aria-hidden": "true",
39
+ children: "–"
40
+ }),
41
+ /* @__PURE__ */ l(o, {
42
+ className: "lyds-date-picker-input",
43
+ slot: "end"
44
+ }),
45
+ /* @__PURE__ */ l(c, {
46
+ className: "lyds-date-picker-button",
47
+ children: /* @__PURE__ */ l(e, {})
48
+ })
49
+ ]
50
+ }),
51
+ /* @__PURE__ */ l(n, {
52
+ description: g,
53
+ error: _
54
+ }),
55
+ /* @__PURE__ */ l(p, {
56
+ className: "lyds-date-popover",
57
+ placement: A,
58
+ children: /* @__PURE__ */ l(d, {
59
+ className: "lyds-date-popover-dialog",
60
+ children: /* @__PURE__ */ l(h, {
61
+ className: "lyds-calendar lyds-range-calendar",
62
+ ...D === void 0 ? {} : { firstDayOfWeek: D },
63
+ children: /* @__PURE__ */ l(a, {
64
+ weekdayStyle: O,
65
+ showMonthYearPickers: k,
66
+ disabled: S
67
+ })
68
+ })
69
+ })
70
+ })
71
+ ]
72
+ })
73
+ });
74
+ }
75
+ var _ = s(g);
76
+ //#endregion
77
+ export { _ as DateRangePicker };
78
+
79
+ //# sourceMappingURL=date-range-picker.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"date-range-picker.js","names":[],"sources":["../../../src/components/date-time/date-range-picker.tsx"],"sourcesContent":["import type { CalendarDate } from \"@internationalized/date\";\nimport { forwardRef, type ReactElement, type RefAttributes } from \"react\";\nimport { Button } from \"react-aria-components/Button\";\nimport { DateRangePicker as AriaDateRangePicker, RangeCalendar, type DateRangePickerProps as AriaDateRangePickerProps } from \"react-aria-components/DateRangePicker\";\nimport { Dialog } from \"react-aria-components/Dialog\";\nimport { Group } from \"react-aria-components/Group\";\nimport { Popover } from \"react-aria-components/Popover\";\nimport { CalendarPanel, type WeekdayStyle } from \"./calendar\";\nimport { DateInputSegments } from \"./date-field\";\nimport type { DatePopoverPlacement, DateRangePickerBehaviorProps, DateValue as LydsDateValue } from \"./date-types\";\nimport { CalendarGlyph, FieldLabel, FieldMessages, LocaleBoundary, cx, type DateTimeFieldChromeProps } from \"./shared\";\n\nexport interface DateRangePickerProps<T extends LydsDateValue = CalendarDate> extends DateRangePickerBehaviorProps<T>, DateTimeFieldChromeProps {\n\tweekdayStyle?: WeekdayStyle | undefined;\n\tshowMonthYearPickers?: boolean | undefined;\n\tpopoverPlacement?: DatePopoverPlacement | undefined;\n}\n\ntype DateRangePickerForwardedKeys = Exclude<keyof DateRangePickerBehaviorProps<LydsDateValue>, \"disabled\" | \"invalid\" | \"onValueChange\" | \"open\" | \"readOnly\" | \"required\">;\ntype DateRangePickerUnexpectedForwardedKeys = Exclude<DateRangePickerForwardedKeys, keyof AriaDateRangePickerProps<LydsDateValue>>;\ntype DateRangePickerPropContract = DateRangePickerUnexpectedForwardedKeys extends never ? true : never;\nconst dateRangePickerPropContract: DateRangePickerPropContract = true;\nvoid dateRangePickerPropContract;\n\nfunction DateRangePickerImpl<T extends LydsDateValue>(\n\t{\n\t\tlabel,\n\t\tdescription,\n\t\terror,\n\t\tlocale,\n\t\tsize = \"md\",\n\t\tclassName,\n\t\topen,\n\t\tdisabled,\n\t\treadOnly,\n\t\trequired,\n\t\tinvalid,\n\t\tonValueChange,\n\t\tfirstDayOfWeek,\n\t\tweekdayStyle,\n\t\tshowMonthYearPickers,\n\t\tpopoverPlacement = \"bottom start\",\n\t\t...pickerProps\n\t}: DateRangePickerProps<T>,\n\tref: React.ForwardedRef<HTMLDivElement>\n) {\n\tconst ariaPickerProps = pickerProps as unknown as Omit<AriaDateRangePickerProps<T>, \"children\" | \"className\" | \"isDisabled\" | \"isInvalid\" | \"isOpen\" | \"isReadOnly\" | \"isRequired\" | \"onChange\">;\n\n\treturn (\n\t\t<LocaleBoundary locale={locale}>\n\t\t\t<AriaDateRangePicker\n\t\t\t\t{...ariaPickerProps}\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"lyds-date-field\", \"lyds-date-picker\", \"lyds-date-range-picker\", className)}\n\t\t\t\tdata-size={size}\n\t\t\t\t{...(open === undefined ? {} : { isOpen: open })}\n\t\t\t\t{...(disabled === undefined ? {} : { isDisabled: disabled })}\n\t\t\t\t{...(readOnly === undefined ? {} : { isReadOnly: readOnly })}\n\t\t\t\t{...(required === undefined ? {} : { isRequired: required })}\n\t\t\t\t{...(invalid === undefined ? {} : { isInvalid: invalid })}\n\t\t\t\t{...(onValueChange === undefined ? {} : { onChange: onValueChange as unknown as NonNullable<AriaDateRangePickerProps<T>[\"onChange\"]> })}\n\t\t\t\t{...(firstDayOfWeek === undefined ? {} : { firstDayOfWeek })}\n\t\t\t>\n\t\t\t\t<FieldLabel>{label}</FieldLabel>\n\t\t\t\t<Group className=\"lyds-date-picker-group\">\n\t\t\t\t\t<DateInputSegments className=\"lyds-date-picker-input\" slot=\"start\" />\n\t\t\t\t\t<span className=\"lyds-date-range-separator\" aria-hidden=\"true\">\n\t\t\t\t\t\t–\n\t\t\t\t\t</span>\n\t\t\t\t\t<DateInputSegments className=\"lyds-date-picker-input\" slot=\"end\" />\n\t\t\t\t\t<Button className=\"lyds-date-picker-button\">\n\t\t\t\t\t\t<CalendarGlyph />\n\t\t\t\t\t</Button>\n\t\t\t\t</Group>\n\t\t\t\t<FieldMessages description={description} error={error} />\n\t\t\t\t<Popover className=\"lyds-date-popover\" placement={popoverPlacement}>\n\t\t\t\t\t<Dialog className=\"lyds-date-popover-dialog\">\n\t\t\t\t\t\t<RangeCalendar className=\"lyds-calendar lyds-range-calendar\" {...(firstDayOfWeek === undefined ? {} : { firstDayOfWeek })}>\n\t\t\t\t\t\t\t<CalendarPanel weekdayStyle={weekdayStyle} showMonthYearPickers={showMonthYearPickers} disabled={disabled} />\n\t\t\t\t\t\t</RangeCalendar>\n\t\t\t\t\t</Dialog>\n\t\t\t\t</Popover>\n\t\t\t</AriaDateRangePicker>\n\t\t</LocaleBoundary>\n\t);\n}\n\nexport const DateRangePicker = forwardRef(DateRangePickerImpl) as <T extends LydsDateValue = CalendarDate>(props: DateRangePickerProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;\n"],"mappings":";;;;;;;;;;;AAwBA,SAAS,EACR,EACC,UACA,gBACA,UACA,WACA,UAAO,MACP,cACA,SACA,aACA,aACA,aACA,YACA,kBACA,mBACA,iBACA,yBACA,sBAAmB,gBACnB,GAAG,KAEJ,GACC;CAGD,OACC,kBAAC,GAAD;EAAwB;EACvB,UAAA,kBAAC,GAAD;GACC,GAAI;GACC;GACL,WAAW,EAAG,mBAAmB,oBAAoB,0BAA0B,CAAS;GACxF,aAAW;GACX,GAAK,MAAS,KAAA,IAAY,CAAC,IAAI,EAAE,QAAQ,EAAK;GAC9C,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAY,KAAA,IAAY,CAAC,IAAI,EAAE,WAAW,EAAQ;GACvD,GAAK,MAAkB,KAAA,IAAY,CAAC,IAAI,EAAE,UAAU,EAAiF;GACrI,GAAK,MAAmB,KAAA,IAAY,CAAC,IAAI,EAAE,kBAAe;GAX3D,UAAA;IAaC,kBAAC,GAAD,EAAA,UAAa,EAAkB,CAAA;IAC/B,kBAAC,GAAD;KAAO,WAAU;KAAjB,UAAA;MACC,kBAAC,GAAD;OAAmB,WAAU;OAAyB,MAAK;MAAS,CAAA;MACpE,kBAAC,QAAD;OAAM,WAAU;OAA4B,eAAY;OAAO,UAAA;MAEzD,CAAA;MACN,kBAAC,GAAD;OAAmB,WAAU;OAAyB,MAAK;MAAO,CAAA;MAClE,kBAAC,GAAD;OAAQ,WAAU;OACjB,UAAA,kBAAC,GAAD,CAAgB,CAAA;MACT,CAAA;KACF;;IACP,kBAAC,GAAD;KAA4B;KAAoB;IAAQ,CAAA;IACxD,kBAAC,GAAD;KAAS,WAAU;KAAoB,WAAW;KACjD,UAAA,kBAAC,GAAD;MAAQ,WAAU;MACjB,UAAA,kBAAC,GAAD;OAAe,WAAU;OAAoC,GAAK,MAAmB,KAAA,IAAY,CAAC,IAAI,EAAE,kBAAe;OACtH,UAAA,kBAAC,GAAD;QAA6B;QAAoC;QAAgC;OAAW,CAAA;MAC9F,CAAA;KACR,CAAA;IACA,CAAA;GACW;;CACN,CAAA;AAElB;AAEA,IAAa,IAAkB,EAAW,CAAmB"}
@@ -0,0 +1,110 @@
1
+ import { CalendarDate, CalendarDateTime, Time, ZonedDateTime } from '@internationalized/date';
2
+ import { CSSProperties, FocusEventHandler, KeyboardEventHandler } from 'react';
3
+ export type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime;
4
+ export type TimeValue = Time | CalendarDateTime | ZonedDateTime;
5
+ export type DateGranularity = "day" | "hour" | "minute" | "second";
6
+ export type TimeGranularity = Exclude<DateGranularity, "day">;
7
+ export type FirstDayOfWeek = "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat";
8
+ export type PageBehavior = "single" | "visible";
9
+ export type DatePopoverPlacement = "top" | "top start" | "top end" | "bottom" | "bottom start" | "bottom end" | "left" | "left top" | "left bottom" | "right" | "right top" | "right bottom";
10
+ export interface DateRange<T> {
11
+ start: T;
12
+ end: T;
13
+ }
14
+ export type DateValidationError = string | string[];
15
+ export type DateValidationResult = DateValidationError | true | null | undefined;
16
+ interface DateControlDOMProps {
17
+ id?: string;
18
+ style?: CSSProperties;
19
+ "aria-label"?: string;
20
+ "aria-labelledby"?: string;
21
+ "aria-describedby"?: string;
22
+ "aria-details"?: string;
23
+ }
24
+ interface DateFieldDOMProps extends DateControlDOMProps {
25
+ onBlur?: FocusEventHandler<HTMLElement>;
26
+ onFocus?: FocusEventHandler<HTMLElement>;
27
+ onKeyDown?: KeyboardEventHandler<HTMLElement>;
28
+ onKeyUp?: KeyboardEventHandler<HTMLElement>;
29
+ }
30
+ export interface DateFieldBehaviorProps<T extends DateValue> extends DateFieldDOMProps {
31
+ value?: T | null;
32
+ defaultValue?: T | null;
33
+ onValueChange?: (value: T | null) => void;
34
+ disabled?: boolean;
35
+ readOnly?: boolean;
36
+ required?: boolean;
37
+ invalid?: boolean;
38
+ autoFocus?: boolean;
39
+ name?: string;
40
+ form?: string;
41
+ minValue?: DateValue | null;
42
+ maxValue?: DateValue | null;
43
+ isDateUnavailable?: (date: DateValue) => boolean;
44
+ placeholderValue?: T | null;
45
+ hourCycle?: 12 | 24;
46
+ granularity?: DateGranularity;
47
+ hideTimeZone?: boolean;
48
+ shouldForceLeadingZeros?: boolean;
49
+ validationBehavior?: "aria" | "native";
50
+ validate?: (value: T | null) => DateValidationResult;
51
+ }
52
+ export interface DatePickerBehaviorProps<T extends DateValue> extends DateFieldBehaviorProps<T> {
53
+ open?: boolean;
54
+ defaultOpen?: boolean;
55
+ onOpenChange?: (open: boolean) => void;
56
+ shouldCloseOnSelect?: boolean | (() => boolean);
57
+ pageBehavior?: PageBehavior;
58
+ firstDayOfWeek?: FirstDayOfWeek;
59
+ }
60
+ export interface DateRangePickerBehaviorProps<T extends DateValue> extends Omit<DatePickerBehaviorProps<T>, "defaultValue" | "isDateUnavailable" | "name" | "onValueChange" | "validate" | "value"> {
61
+ value?: DateRange<T> | null;
62
+ defaultValue?: DateRange<T> | null;
63
+ onValueChange?: (value: DateRange<T> | null) => void;
64
+ allowsNonContiguousRanges?: boolean;
65
+ isDateUnavailable?: (date: DateValue, anchorDate: CalendarDate | null) => boolean;
66
+ startName?: string;
67
+ endName?: string;
68
+ validate?: (value: DateRange<T> | null) => DateValidationResult;
69
+ }
70
+ export interface TimeFieldBehaviorProps<T extends TimeValue> extends DateFieldDOMProps {
71
+ value?: T | null;
72
+ defaultValue?: T | null;
73
+ onValueChange?: (value: T | null) => void;
74
+ disabled?: boolean;
75
+ readOnly?: boolean;
76
+ required?: boolean;
77
+ invalid?: boolean;
78
+ autoFocus?: boolean;
79
+ name?: string;
80
+ form?: string;
81
+ hourCycle?: 12 | 24;
82
+ granularity?: TimeGranularity;
83
+ hideTimeZone?: boolean;
84
+ shouldForceLeadingZeros?: boolean;
85
+ placeholderValue?: T;
86
+ minValue?: TimeValue | null;
87
+ maxValue?: TimeValue | null;
88
+ validationBehavior?: "aria" | "native";
89
+ validate?: (value: T | null) => DateValidationResult;
90
+ }
91
+ export interface CalendarBehaviorProps<T extends DateValue> extends DateControlDOMProps {
92
+ value?: T | null;
93
+ defaultValue?: T | null;
94
+ onValueChange?: (value: T) => void;
95
+ disabled?: boolean;
96
+ readOnly?: boolean;
97
+ invalid?: boolean;
98
+ autoFocus?: boolean;
99
+ minValue?: DateValue | null;
100
+ maxValue?: DateValue | null;
101
+ isDateUnavailable?: (date: DateValue) => boolean;
102
+ focusedValue?: DateValue | null;
103
+ defaultFocusedValue?: DateValue | null;
104
+ onFocusChange?: (date: CalendarDate) => void;
105
+ pageBehavior?: PageBehavior;
106
+ firstDayOfWeek?: FirstDayOfWeek;
107
+ selectionAlignment?: "start" | "center" | "end";
108
+ weeksInMonth?: number;
109
+ }
110
+ export {};
@@ -0,0 +1,8 @@
1
+ export { Calendar, type CalendarProps, type FirstDayOfWeek, type WeekdayStyle } from './calendar.js';
2
+ export { DateField, type DateFieldProps } from './date-field.js';
3
+ export { DatePicker, DateTimePicker, type DatePickerProps, type DateTimePickerProps, type DateTimeValue } from './date-picker.js';
4
+ export { DateRangePicker, type DateRangePickerProps } from './date-range-picker.js';
5
+ export type { CalendarBehaviorProps, DateFieldBehaviorProps, DateGranularity, DatePickerBehaviorProps, DatePopoverPlacement, DateRange, DateRangePickerBehaviorProps, DateValidationError, DateValidationResult, DateValue, PageBehavior, TimeFieldBehaviorProps, TimeGranularity, TimeValue } from './date-types.js';
6
+ export type { DateTimeSize } from './shared.js';
7
+ export { TimeField, TimePicker, type TimeFieldProps, type TimePickerProps } from './time-field.js';
8
+ export { CalendarDate, CalendarDateTime, Time, ZonedDateTime, getLocalTimeZone, now, parseAbsolute, parseAbsoluteToLocal, parseDate, parseDateTime, parseTime, parseZonedDateTime, today } from '@internationalized/date';
@@ -0,0 +1,8 @@
1
+ /* empty css */
2
+ import { Calendar as e } from "./calendar.js";
3
+ import { DateField as t } from "./date-field.js";
4
+ import { DatePicker as n, DateTimePicker as r } from "./date-picker.js";
5
+ import { DateRangePicker as i } from "./date-range-picker.js";
6
+ import { TimeField as a, TimePicker as o } from "./time-field.js";
7
+ import { CalendarDate as s, CalendarDateTime as c, Time as l, ZonedDateTime as u, getLocalTimeZone as d, now as f, parseAbsolute as p, parseAbsoluteToLocal as m, parseDate as h, parseDateTime as g, parseTime as _, parseZonedDateTime as v, today as y } from "@internationalized/date";
8
+ export { e as Calendar, s as CalendarDate, c as CalendarDateTime, t as DateField, n as DatePicker, i as DateRangePicker, r as DateTimePicker, l as Time, a as TimeField, o as TimePicker, u as ZonedDateTime, d as getLocalTimeZone, f as now, p as parseAbsolute, m as parseAbsoluteToLocal, h as parseDate, g as parseDateTime, _ as parseTime, v as parseZonedDateTime, y as today };
@@ -0,0 +1,25 @@
1
+ import { ReactNode } from 'react';
2
+ export type DateTimeSize = "sm" | "md" | "lg";
3
+ export interface DateTimeFieldChromeProps {
4
+ /** 欄位的可見標籤。不適合顯示可見標籤時,請改用 `aria-label`。 */
5
+ label?: ReactNode;
6
+ /** 透過 React Aria 與控制項關聯的補充說明。 */
7
+ description?: ReactNode;
8
+ /** 與控制項關聯的驗證訊息。 */
9
+ error?: ReactNode;
10
+ /** 用於區段順序、標籤與數字格式的 BCP 47 地區設定。省略時沿用最近的 `I18nProvider`。 */
11
+ locale?: string | undefined;
12
+ size?: DateTimeSize;
13
+ className?: string;
14
+ }
15
+ export declare function cx(...values: Array<string | false | null | undefined>): string;
16
+ export declare function LocaleBoundary({ locale, children }: {
17
+ locale?: string | undefined;
18
+ children: ReactNode;
19
+ }): import("react").JSX.Element;
20
+ export declare function FieldLabel({ children }: {
21
+ children?: ReactNode;
22
+ }): import("react").JSX.Element | null;
23
+ export declare function FieldMessages({ description, error }: Pick<DateTimeFieldChromeProps, "description" | "error">): import("react").JSX.Element;
24
+ export declare function CalendarGlyph(): import("react").JSX.Element;
25
+ export declare function ClockGlyph(): import("react").JSX.Element;
@@ -0,0 +1,53 @@
1
+ import { CalendarDotsIcon as e } from "@phosphor-icons/react/dist/csr/CalendarDots";
2
+ import { ClockIcon as t } from "@phosphor-icons/react/dist/csr/Clock";
3
+ import { FieldError as n } from "react-aria-components/FieldError";
4
+ import { I18nProvider as r } from "react-aria-components/I18nProvider";
5
+ import { Label as i } from "react-aria-components/Label";
6
+ import { Text as a } from "react-aria-components/Text";
7
+ import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
8
+ //#region src/components/date-time/shared.tsx
9
+ function l(...e) {
10
+ return e.filter(Boolean).join(" ");
11
+ }
12
+ function u({ locale: e, children: t }) {
13
+ return e ? /* @__PURE__ */ s(r, {
14
+ locale: e,
15
+ children: t
16
+ }) : /* @__PURE__ */ s(o, { children: t });
17
+ }
18
+ function d({ children: e }) {
19
+ return e == null ? null : /* @__PURE__ */ s(i, {
20
+ className: "lyds-date-label",
21
+ children: e
22
+ });
23
+ }
24
+ function f({ description: e, error: t }) {
25
+ return /* @__PURE__ */ c(o, { children: [e == null ? null : /* @__PURE__ */ s(a, {
26
+ slot: "description",
27
+ className: "lyds-date-description",
28
+ children: e
29
+ }), t == null ? null : /* @__PURE__ */ s(n, {
30
+ "aria-atomic": "true",
31
+ "aria-live": "polite",
32
+ className: "lyds-date-error",
33
+ children: t
34
+ })] });
35
+ }
36
+ function p() {
37
+ return /* @__PURE__ */ s(e, {
38
+ "aria-hidden": "true",
39
+ className: "lyds-date-glyph",
40
+ weight: "regular"
41
+ });
42
+ }
43
+ function m() {
44
+ return /* @__PURE__ */ s(t, {
45
+ "aria-hidden": "true",
46
+ className: "lyds-date-glyph",
47
+ weight: "regular"
48
+ });
49
+ }
50
+ //#endregion
51
+ export { p as CalendarGlyph, m as ClockGlyph, d as FieldLabel, f as FieldMessages, u as LocaleBoundary, l as cx };
52
+
53
+ //# sourceMappingURL=shared.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"shared.js","names":[],"sources":["../../../src/components/date-time/shared.tsx"],"sourcesContent":["import { CalendarDotsIcon } from \"@phosphor-icons/react/dist/csr/CalendarDots\";\nimport { ClockIcon } from \"@phosphor-icons/react/dist/csr/Clock\";\nimport type { ReactNode } from \"react\";\nimport { FieldError } from \"react-aria-components/FieldError\";\nimport { I18nProvider } from \"react-aria-components/I18nProvider\";\nimport { Label } from \"react-aria-components/Label\";\nimport { Text } from \"react-aria-components/Text\";\n\nexport type DateTimeSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface DateTimeFieldChromeProps {\n\t/** 欄位的可見標籤。不適合顯示可見標籤時,請改用 `aria-label`。 */\n\tlabel?: ReactNode;\n\t/** 透過 React Aria 與控制項關聯的補充說明。 */\n\tdescription?: ReactNode;\n\t/** 與控制項關聯的驗證訊息。 */\n\terror?: ReactNode;\n\t/** 用於區段順序、標籤與數字格式的 BCP 47 地區設定。省略時沿用最近的 `I18nProvider`。 */\n\tlocale?: string | undefined;\n\tsize?: DateTimeSize;\n\tclassName?: string;\n}\n\nexport function cx(...values: Array<string | false | null | undefined>): string {\n\treturn values.filter(Boolean).join(\" \");\n}\n\nexport function LocaleBoundary({ locale, children }: { locale?: string | undefined; children: ReactNode }) {\n\tif (!locale) {\n\t\treturn <>{children}</>;\n\t}\n\n\treturn <I18nProvider locale={locale}>{children}</I18nProvider>;\n}\n\nexport function FieldLabel({ children }: { children?: ReactNode }) {\n\treturn children == null ? null : <Label className=\"lyds-date-label\">{children}</Label>;\n}\n\nexport function FieldMessages({ description, error }: Pick<DateTimeFieldChromeProps, \"description\" | \"error\">) {\n\treturn (\n\t\t<>\n\t\t\t{description == null ? null : (\n\t\t\t\t<Text slot=\"description\" className=\"lyds-date-description\">\n\t\t\t\t\t{description}\n\t\t\t\t</Text>\n\t\t\t)}\n\t\t\t{error == null ? null : (\n\t\t\t\t<FieldError aria-atomic=\"true\" aria-live=\"polite\" className=\"lyds-date-error\">\n\t\t\t\t\t{error}\n\t\t\t\t</FieldError>\n\t\t\t)}\n\t\t</>\n\t);\n}\n\nexport function CalendarGlyph() {\n\treturn <CalendarDotsIcon aria-hidden=\"true\" className=\"lyds-date-glyph\" weight=\"regular\" />;\n}\n\nexport function ClockGlyph() {\n\treturn <ClockIcon aria-hidden=\"true\" className=\"lyds-date-glyph\" weight=\"regular\" />;\n}\n"],"mappings":";;;;;;;;AAuBA,SAAgB,EAAG,GAAG,GAA0D;CAC/E,OAAO,EAAO,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AACvC;AAEA,SAAgB,EAAe,EAAE,WAAQ,eAAkE;CAK1G,OAJK,IAIE,kBAAC,GAAD;EAAsB;EAAS;CAAuB,CAAA,IAHrD,kBAAA,GAAA,EAAG,YAAW,CAAA;AAIvB;AAEA,SAAgB,EAAW,EAAE,eAAsC;CAClE,OAAO,KAAY,OAAO,OAAO,kBAAC,GAAD;EAAO,WAAU;EAAmB;CAAgB,CAAA;AACtF;AAEA,SAAgB,EAAc,EAAE,gBAAa,YAAkE;CAC9G,OACC,kBAAA,GAAA,EAAA,UAAA,CACE,KAAe,OAAO,OACtB,kBAAC,GAAD;EAAM,MAAK;EAAc,WAAU;EACjC,UAAA;CACI,CAAA,GAEN,KAAS,OAAO,OAChB,kBAAC,GAAD;EAAY,eAAY;EAAO,aAAU;EAAS,WAAU;EAC1D,UAAA;CACU,CAAA,CAEZ,EAAA,CAAA;AAEJ;AAEA,SAAgB,IAAgB;CAC/B,OAAO,kBAAC,GAAD;EAAkB,eAAY;EAAO,WAAU;EAAkB,QAAO;CAAW,CAAA;AAC3F;AAEA,SAAgB,IAAa;CAC5B,OAAO,kBAAC,GAAD;EAAW,eAAY;EAAO,WAAU;EAAkB,QAAO;CAAW,CAAA;AACpF"}
@@ -0,0 +1,13 @@
1
+ import { Time } from '@internationalized/date';
2
+ import { ReactElement, RefAttributes } from 'react';
3
+ import { TimeValue as LydsTimeValue, TimeFieldBehaviorProps } from './date-types.js';
4
+ import { DateTimeFieldChromeProps } from './shared.js';
5
+ export interface TimeFieldProps<T extends LydsTimeValue = Time> extends TimeFieldBehaviorProps<T>, DateTimeFieldChromeProps {
6
+ }
7
+ export type TimePickerProps<T extends LydsTimeValue = Time> = TimeFieldProps<T>;
8
+ export declare const TimeField: <T extends LydsTimeValue = Time>(props: TimeFieldProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;
9
+ /**
10
+ * 支援地區格式的區段式時間選擇器。此元件不預設有限的時間選項;
11
+ * `minValue`、`maxValue`、`granularity` 與 `hourCycle` 仍由使用端依 React Aria 語意控制。
12
+ */
13
+ export declare const TimePicker: <T extends LydsTimeValue = Time>(props: TimePickerProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;
@@ -0,0 +1,52 @@
1
+ import { ClockGlyph as e, FieldLabel as t, FieldMessages as n, LocaleBoundary as r, cx as i } from "./shared.js";
2
+ import { forwardRef as a } from "react";
3
+ import { jsx as o, jsxs as s } from "react/jsx-runtime";
4
+ import { DateInput as c, DateSegment as l, TimeField as u } from "react-aria-components/TimeField";
5
+ //#region src/components/date-time/time-field.tsx
6
+ function d({ label: a, description: d, error: f, locale: p, size: m = "md", className: h, disabled: g, readOnly: _, required: v, invalid: y, onValueChange: b, ...x }, S, C) {
7
+ return /* @__PURE__ */ o(r, {
8
+ locale: p,
9
+ children: /* @__PURE__ */ s(u, {
10
+ ...x,
11
+ ref: S,
12
+ className: i("lyds-date-field", "lyds-time-field", C && "lyds-time-picker", h),
13
+ "data-size": m,
14
+ ...g === void 0 ? {} : { isDisabled: g },
15
+ ..._ === void 0 ? {} : { isReadOnly: _ },
16
+ ...v === void 0 ? {} : { isRequired: v },
17
+ ...y === void 0 ? {} : { isInvalid: y },
18
+ ...b === void 0 ? {} : { onChange: b },
19
+ children: [
20
+ /* @__PURE__ */ o(t, { children: a }),
21
+ /* @__PURE__ */ s("div", {
22
+ className: "lyds-date-input-shell",
23
+ children: [/* @__PURE__ */ o(c, {
24
+ className: "lyds-date-input",
25
+ children: (e) => /* @__PURE__ */ o(l, {
26
+ segment: e,
27
+ className: "lyds-date-segment"
28
+ })
29
+ }), C ? /* @__PURE__ */ o("span", {
30
+ className: "lyds-date-input-affordance",
31
+ children: /* @__PURE__ */ o(e, {})
32
+ }) : null]
33
+ }),
34
+ /* @__PURE__ */ o(n, {
35
+ description: d,
36
+ error: f
37
+ })
38
+ ]
39
+ })
40
+ });
41
+ }
42
+ function f(e, t) {
43
+ return d(e, t, !1);
44
+ }
45
+ function p(e, t) {
46
+ return d(e, t, !0);
47
+ }
48
+ var m = a(f), h = a(p);
49
+ //#endregion
50
+ export { m as TimeField, h as TimePicker };
51
+
52
+ //# sourceMappingURL=time-field.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"time-field.js","names":[],"sources":["../../../src/components/date-time/time-field.tsx"],"sourcesContent":["import type { Time } from \"@internationalized/date\";\nimport { forwardRef, type ReactElement, type RefAttributes } from \"react\";\nimport { TimeField as AriaTimeField, DateInput, DateSegment, type TimeFieldProps as AriaTimeFieldProps } from \"react-aria-components/TimeField\";\nimport type { TimeValue as LydsTimeValue, TimeFieldBehaviorProps } from \"./date-types\";\nimport { ClockGlyph, FieldLabel, FieldMessages, LocaleBoundary, cx, type DateTimeFieldChromeProps } from \"./shared\";\n\nexport interface TimeFieldProps<T extends LydsTimeValue = Time> extends TimeFieldBehaviorProps<T>, DateTimeFieldChromeProps {}\n\nexport type TimePickerProps<T extends LydsTimeValue = Time> = TimeFieldProps<T>;\n\ntype TimeFieldForwardedKeys = Exclude<keyof TimeFieldBehaviorProps<LydsTimeValue>, \"disabled\" | \"invalid\" | \"onValueChange\" | \"readOnly\" | \"required\">;\ntype TimeFieldUnexpectedForwardedKeys = Exclude<TimeFieldForwardedKeys, keyof AriaTimeFieldProps<LydsTimeValue>>;\ntype TimeFieldPropContract = TimeFieldUnexpectedForwardedKeys extends never ? true : never;\nconst timeFieldPropContract: TimeFieldPropContract = true;\nvoid timeFieldPropContract;\n\nfunction TimeControl<T extends LydsTimeValue>(\n\t{ label, description, error, locale, size = \"md\", className, disabled, readOnly, required, invalid, onValueChange, ...fieldProps }: TimeFieldProps<T>,\n\tref: React.ForwardedRef<HTMLDivElement>,\n\tshowPickerGlyph: boolean\n) {\n\tconst ariaFieldProps = fieldProps as unknown as Omit<AriaTimeFieldProps<T>, \"children\" | \"className\" | \"isDisabled\" | \"isInvalid\" | \"isReadOnly\" | \"isRequired\" | \"onChange\">;\n\n\treturn (\n\t\t<LocaleBoundary locale={locale}>\n\t\t\t<AriaTimeField\n\t\t\t\t{...ariaFieldProps}\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"lyds-date-field\", \"lyds-time-field\", showPickerGlyph && \"lyds-time-picker\", className)}\n\t\t\t\tdata-size={size}\n\t\t\t\t{...(disabled === undefined ? {} : { isDisabled: disabled })}\n\t\t\t\t{...(readOnly === undefined ? {} : { isReadOnly: readOnly })}\n\t\t\t\t{...(required === undefined ? {} : { isRequired: required })}\n\t\t\t\t{...(invalid === undefined ? {} : { isInvalid: invalid })}\n\t\t\t\t{...(onValueChange === undefined ? {} : { onChange: onValueChange as unknown as NonNullable<AriaTimeFieldProps<T>[\"onChange\"]> })}\n\t\t\t>\n\t\t\t\t<FieldLabel>{label}</FieldLabel>\n\t\t\t\t<div className=\"lyds-date-input-shell\">\n\t\t\t\t\t<DateInput className=\"lyds-date-input\">{segment => <DateSegment segment={segment} className=\"lyds-date-segment\" />}</DateInput>\n\t\t\t\t\t{showPickerGlyph ? (\n\t\t\t\t\t\t<span className=\"lyds-date-input-affordance\">\n\t\t\t\t\t\t\t<ClockGlyph />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t<FieldMessages description={description} error={error} />\n\t\t\t</AriaTimeField>\n\t\t</LocaleBoundary>\n\t);\n}\n\nfunction TimeFieldImpl<T extends LydsTimeValue>(props: TimeFieldProps<T>, ref: React.ForwardedRef<HTMLDivElement>) {\n\treturn TimeControl(props, ref, false);\n}\n\nfunction TimePickerImpl<T extends LydsTimeValue>(props: TimePickerProps<T>, ref: React.ForwardedRef<HTMLDivElement>) {\n\treturn TimeControl(props, ref, true);\n}\n\nexport const TimeField = forwardRef(TimeFieldImpl) as <T extends LydsTimeValue = Time>(props: TimeFieldProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;\n\n/**\n * 支援地區格式的區段式時間選擇器。此元件不預設有限的時間選項;\n * `minValue`、`maxValue`、`granularity` 與 `hourCycle` 仍由使用端依 React Aria 語意控制。\n */\nexport const TimePicker = forwardRef(TimePickerImpl) as <T extends LydsTimeValue = Time>(props: TimePickerProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;\n"],"mappings":";;;;;AAgBA,SAAS,EACR,EAAE,UAAO,gBAAa,UAAO,WAAQ,UAAO,MAAM,cAAW,aAAU,aAAU,aAAU,YAAS,kBAAe,GAAG,KACtH,GACA,GACC;CAGD,OACC,kBAAC,GAAD;EAAwB;EACvB,UAAA,kBAAC,GAAD;GACC,GAAI;GACC;GACL,WAAW,EAAG,mBAAmB,mBAAmB,KAAmB,oBAAoB,CAAS;GACpG,aAAW;GACX,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAa,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,EAAS;GAC1D,GAAK,MAAY,KAAA,IAAY,CAAC,IAAI,EAAE,WAAW,EAAQ;GACvD,GAAK,MAAkB,KAAA,IAAY,CAAC,IAAI,EAAE,UAAU,EAA2E;GAThI,UAAA;IAWC,kBAAC,GAAD,EAAA,UAAa,EAAkB,CAAA;IAC/B,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACC,kBAAC,GAAD;MAAW,WAAU;MAAmB,WAAA,MAAW,kBAAC,GAAD;OAAsB;OAAS,WAAU;MAAqB,CAAA;KAAa,CAAA,GAC7H,IACA,kBAAC,QAAD;MAAM,WAAU;MACf,UAAA,kBAAC,GAAD,CAAa,CAAA;KACR,CAAA,IACH,IACA;;IACL,kBAAC,GAAD;KAA4B;KAAoB;IAAQ,CAAA;GAC1C;;CACA,CAAA;AAElB;AAEA,SAAS,EAAuC,GAA0B,GAAyC;CAClH,OAAO,EAAY,GAAO,GAAK,EAAK;AACrC;AAEA,SAAS,EAAwC,GAA2B,GAAyC;CACpH,OAAO,EAAY,GAAO,GAAK,EAAI;AACpC;AAEA,IAAa,IAAY,EAAW,CAAa,GAMpC,IAAa,EAAW,CAAc"}
@@ -0,0 +1,21 @@
1
+ import { HTMLAttributes } from 'react';
2
+ import { FeedbackLiveMode, FeedbackStatus } from './feedback.types.js';
3
+ export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
4
+ /**
5
+ * 控制語意狀態色盤。此屬性不會讓 Alert 成為即時區域;
6
+ * 僅在內容動態加入或更新時設定 `live`。
7
+ */
8
+ status?: FeedbackStatus;
9
+ /**
10
+ * 動態回饋的播報方式。靜態 Alert 預設為 `off`,
11
+ * 避免頁面載入時不必要的播報。
12
+ */
13
+ live?: FeedbackLiveMode;
14
+ }
15
+ export declare const Alert: import('react').ForwardRefExoticComponent<AlertProps & import('react').RefAttributes<HTMLDivElement>>;
16
+ /** Alert 元件的別名。 */
17
+ export declare const AlertView: import('react').ForwardRefExoticComponent<AlertProps & import('react').RefAttributes<HTMLDivElement>>;
18
+ export declare const AlertContent: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
19
+ export declare const AlertTitle: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
20
+ export declare const AlertDescription: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
21
+ export declare const AlertActions: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,44 @@
1
+ import e from "./feedback.module.js";
2
+ import { getLiveRegionProps as t, mergeClassNames as n } from "./feedback.types.js";
3
+ import { forwardRef as r } from "react";
4
+ import { jsx as i } from "react/jsx-runtime";
5
+ //#region src/components/feedback/alert.tsx
6
+ var a = r(function({ "aria-live": r, className: a, live: o = "off", role: s, status: c = "neutral", ...l }, u) {
7
+ let d = t(o);
8
+ return /* @__PURE__ */ i("div", {
9
+ ref: u,
10
+ className: n(e.feedbackPanel, e.alert, a),
11
+ "data-status": c,
12
+ role: s ?? d.role,
13
+ "aria-live": r ?? d["aria-live"],
14
+ ...l
15
+ });
16
+ }), o = a, s = r(function({ className: t, ...r }, a) {
17
+ return /* @__PURE__ */ i("div", {
18
+ ref: a,
19
+ className: n(e.feedbackContent, t),
20
+ ...r
21
+ });
22
+ }), c = r(function({ className: t, ...r }, a) {
23
+ return /* @__PURE__ */ i("div", {
24
+ ref: a,
25
+ className: n(e.feedbackTitle, t),
26
+ ...r
27
+ });
28
+ }), l = r(function({ className: t, ...r }, a) {
29
+ return /* @__PURE__ */ i("p", {
30
+ ref: a,
31
+ className: n(e.feedbackDescription, t),
32
+ ...r
33
+ });
34
+ }), u = r(function({ className: t, ...r }, a) {
35
+ return /* @__PURE__ */ i("div", {
36
+ ref: a,
37
+ className: n(e.feedbackActions, t),
38
+ ...r
39
+ });
40
+ });
41
+ //#endregion
42
+ export { a as Alert, u as AlertActions, s as AlertContent, l as AlertDescription, c as AlertTitle, o as AlertView };
43
+
44
+ //# sourceMappingURL=alert.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"alert.js","names":[],"sources":["../../../src/components/feedback/alert.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\n\nimport styles from \"./feedback.module.css\";\nimport { getLiveRegionProps, mergeClassNames, type FeedbackLiveMode, type FeedbackStatus } from \"./feedback.types\";\n\nexport interface AlertProps extends HTMLAttributes<HTMLDivElement> {\n\t/**\n\t * 控制語意狀態色盤。此屬性不會讓 Alert 成為即時區域;\n\t * 僅在內容動態加入或更新時設定 `live`。\n\t */\n\tstatus?: FeedbackStatus;\n\t/**\n\t * 動態回饋的播報方式。靜態 Alert 預設為 `off`,\n\t * 避免頁面載入時不必要的播報。\n\t */\n\tlive?: FeedbackLiveMode;\n}\n\nexport const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert({ \"aria-live\": ariaLive, className, live = \"off\", role, status = \"neutral\", ...props }, ref) {\n\tconst liveRegionProps = getLiveRegionProps(live);\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={mergeClassNames(styles.feedbackPanel, styles.alert, className)}\n\t\t\tdata-status={status}\n\t\t\trole={role ?? liveRegionProps.role}\n\t\t\taria-live={ariaLive ?? liveRegionProps[\"aria-live\"]}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\n\n/** Alert 元件的別名。 */\nexport const AlertView = Alert;\n\nexport const AlertContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function AlertContent({ className, ...props }, ref) {\n\treturn <div ref={ref} className={mergeClassNames(styles.feedbackContent, className)} {...props} />;\n});\n\nexport const AlertTitle = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function AlertTitle({ className, ...props }, ref) {\n\treturn <div ref={ref} className={mergeClassNames(styles.feedbackTitle, className)} {...props} />;\n});\n\nexport const AlertDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(function AlertDescription({ className, ...props }, ref) {\n\treturn <p ref={ref} className={mergeClassNames(styles.feedbackDescription, className)} {...props} />;\n});\n\nexport const AlertActions = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function AlertActions({ className, ...props }, ref) {\n\treturn <div ref={ref} className={mergeClassNames(styles.feedbackActions, className)} {...props} />;\n});\n"],"mappings":";;;;;AAkBA,IAAa,IAAQ,EAAuC,SAAe,EAAE,aAAa,GAAU,cAAW,UAAO,OAAO,SAAM,YAAS,WAAW,GAAG,KAAS,GAAK;CACvK,IAAM,IAAkB,EAAmB,CAAI;CAE/C,OACC,kBAAC,OAAD;EACM;EACL,WAAW,EAAgB,EAAO,eAAe,EAAO,OAAO,CAAS;EACxE,eAAa;EACb,MAAM,KAAQ,EAAgB;EAC9B,aAAW,KAAY,EAAgB;EACvC,GAAI;CACJ,CAAA;AAEH,CAAC,GAGY,IAAY,GAEZ,IAAe,EAA2D,SAAsB,EAAE,cAAW,GAAG,KAAS,GAAK;CAC1I,OAAO,kBAAC,OAAD;EAAU;EAAK,WAAW,EAAgB,EAAO,iBAAiB,CAAS;EAAG,GAAI;CAAQ,CAAA;AAClG,CAAC,GAEY,IAAa,EAA2D,SAAoB,EAAE,cAAW,GAAG,KAAS,GAAK;CACtI,OAAO,kBAAC,OAAD;EAAU;EAAK,WAAW,EAAgB,EAAO,eAAe,CAAS;EAAG,GAAI;CAAQ,CAAA;AAChG,CAAC,GAEY,IAAmB,EAAuE,SAA0B,EAAE,cAAW,GAAG,KAAS,GAAK;CAC9J,OAAO,kBAAC,KAAD;EAAQ;EAAK,WAAW,EAAgB,EAAO,qBAAqB,CAAS;EAAG,GAAI;CAAQ,CAAA;AACpG,CAAC,GAEY,IAAe,EAA2D,SAAsB,EAAE,cAAW,GAAG,KAAS,GAAK;CAC1I,OAAO,kBAAC,OAAD;EAAU;EAAK,WAAW,EAAgB,EAAO,iBAAiB,CAAS;EAAG,GAAI;CAAQ,CAAA;AAClG,CAAC"}
@@ -0,0 +1,8 @@
1
+ import { HTMLAttributes } from 'react';
2
+ import { FeedbackLiveMode, FeedbackStatus } from './feedback.types.js';
3
+ export interface BannerProps extends HTMLAttributes<HTMLDivElement> {
4
+ status?: FeedbackStatus;
5
+ /** 僅在 Banner 動態出現時使用 `polite` 或 `assertive`。 */
6
+ live?: FeedbackLiveMode;
7
+ }
8
+ export declare const Banner: import('react').ForwardRefExoticComponent<BannerProps & import('react').RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,20 @@
1
+ import e from "./feedback.module.js";
2
+ import { getLiveRegionProps as t, mergeClassNames as n } from "./feedback.types.js";
3
+ import { forwardRef as r } from "react";
4
+ import { jsx as i } from "react/jsx-runtime";
5
+ //#region src/components/feedback/banner.tsx
6
+ var a = r(function({ "aria-live": r, className: a, live: o = "off", role: s, status: c = "neutral", ...l }, u) {
7
+ let d = t(o);
8
+ return /* @__PURE__ */ i("div", {
9
+ ref: u,
10
+ className: n(e.feedbackPanel, e.banner, a),
11
+ "data-status": c,
12
+ role: s ?? d.role,
13
+ "aria-live": r ?? d["aria-live"],
14
+ ...l
15
+ });
16
+ });
17
+ //#endregion
18
+ export { a as Banner };
19
+
20
+ //# sourceMappingURL=banner.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"banner.js","names":[],"sources":["../../../src/components/feedback/banner.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\n\nimport styles from \"./feedback.module.css\";\nimport { getLiveRegionProps, mergeClassNames, type FeedbackLiveMode, type FeedbackStatus } from \"./feedback.types\";\n\nexport interface BannerProps extends HTMLAttributes<HTMLDivElement> {\n\tstatus?: FeedbackStatus;\n\t/** 僅在 Banner 動態出現時使用 `polite` 或 `assertive`。 */\n\tlive?: FeedbackLiveMode;\n}\n\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner({ \"aria-live\": ariaLive, className, live = \"off\", role, status = \"neutral\", ...props }, ref) {\n\tconst liveRegionProps = getLiveRegionProps(live);\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={mergeClassNames(styles.feedbackPanel, styles.banner, className)}\n\t\t\tdata-status={status}\n\t\t\trole={role ?? liveRegionProps.role}\n\t\t\taria-live={ariaLive ?? liveRegionProps[\"aria-live\"]}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\n"],"mappings":";;;;;AAWA,IAAa,IAAS,EAAwC,SAAgB,EAAE,aAAa,GAAU,cAAW,UAAO,OAAO,SAAM,YAAS,WAAW,GAAG,KAAS,GAAK;CAC1K,IAAM,IAAkB,EAAmB,CAAI;CAE/C,OACC,kBAAC,OAAD;EACM;EACL,WAAW,EAAgB,EAAO,eAAe,EAAO,QAAQ,CAAS;EACzE,eAAa;EACb,MAAM,KAAQ,EAAgB;EAC9B,aAAW,KAAY,EAAgB;EACvC,GAAI;CACJ,CAAA;AAEH,CAAC"}
@@ -0,0 +1,12 @@
1
+ import { HTMLAttributes, ReactNode } from 'react';
2
+ import { FeedbackStatus } from './feedback.types.js';
3
+ export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
4
+ actions?: ReactNode;
5
+ description?: ReactNode;
6
+ eyebrow?: ReactNode;
7
+ headingLevel?: 2 | 3 | 4 | 5 | 6;
8
+ icon?: ReactNode;
9
+ status?: FeedbackStatus;
10
+ title: ReactNode;
11
+ }
12
+ export declare const EmptyState: import('react').ForwardRefExoticComponent<EmptyStateProps & import('react').RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,48 @@
1
+ import e from "./feedback.module.js";
2
+ import { mergeClassNames as t } from "./feedback.types.js";
3
+ import { createElement as n, forwardRef as r } from "react";
4
+ import { jsx as i, jsxs as a } from "react/jsx-runtime";
5
+ //#region src/components/feedback/empty-state.tsx
6
+ var o = r(function({ actions: r, className: o, description: s, eyebrow: c, headingLevel: l = 2, icon: u, status: d = "neutral", title: f, ...p }, m) {
7
+ return /* @__PURE__ */ a("div", {
8
+ ref: m,
9
+ className: t(e.emptyState, o),
10
+ "data-status": d,
11
+ ...p,
12
+ children: [/* @__PURE__ */ a("div", {
13
+ className: e.emptyStateRail,
14
+ "aria-hidden": "true",
15
+ children: [
16
+ /* @__PURE__ */ i("span", {}),
17
+ /* @__PURE__ */ i("span", {}),
18
+ /* @__PURE__ */ i("span", {})
19
+ ]
20
+ }), /* @__PURE__ */ a("div", {
21
+ className: e.emptyStateBody,
22
+ children: [
23
+ u ? /* @__PURE__ */ i("div", {
24
+ className: e.emptyStateIcon,
25
+ "aria-hidden": "true",
26
+ children: u
27
+ }) : null,
28
+ c ? /* @__PURE__ */ i("div", {
29
+ className: e.emptyStateEyebrow,
30
+ children: c
31
+ }) : null,
32
+ n(`h${l}`, { className: e.emptyStateTitle }, f),
33
+ s ? /* @__PURE__ */ i("p", {
34
+ className: e.emptyStateDescription,
35
+ children: s
36
+ }) : null,
37
+ r ? /* @__PURE__ */ i("div", {
38
+ className: e.emptyStateActions,
39
+ children: r
40
+ }) : null
41
+ ]
42
+ })]
43
+ });
44
+ });
45
+ //#endregion
46
+ export { o as EmptyState };
47
+
48
+ //# sourceMappingURL=empty-state.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"empty-state.js","names":[],"sources":["../../../src/components/feedback/empty-state.tsx"],"sourcesContent":["import { createElement, forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\n\nimport styles from \"./feedback.module.css\";\nimport { mergeClassNames, type FeedbackStatus } from \"./feedback.types\";\n\nexport interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n\tactions?: ReactNode;\n\tdescription?: ReactNode;\n\teyebrow?: ReactNode;\n\theadingLevel?: 2 | 3 | 4 | 5 | 6;\n\ticon?: ReactNode;\n\tstatus?: FeedbackStatus;\n\ttitle: ReactNode;\n}\n\nexport const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(function EmptyState(\n\t{ actions, className, description, eyebrow, headingLevel = 2, icon, status = \"neutral\", title, ...props },\n\tref\n) {\n\treturn (\n\t\t<div ref={ref} className={mergeClassNames(styles.emptyState, className)} data-status={status} {...props}>\n\t\t\t<div className={styles.emptyStateRail} aria-hidden=\"true\">\n\t\t\t\t<span />\n\t\t\t\t<span />\n\t\t\t\t<span />\n\t\t\t</div>\n\t\t\t<div className={styles.emptyStateBody}>\n\t\t\t\t{icon ? (\n\t\t\t\t\t<div className={styles.emptyStateIcon} aria-hidden=\"true\">\n\t\t\t\t\t\t{icon}\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t\t{eyebrow ? <div className={styles.emptyStateEyebrow}>{eyebrow}</div> : null}\n\t\t\t\t{createElement(`h${headingLevel}`, { className: styles.emptyStateTitle }, title)}\n\t\t\t\t{description ? <p className={styles.emptyStateDescription}>{description}</p> : null}\n\t\t\t\t{actions ? <div className={styles.emptyStateActions}>{actions}</div> : null}\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n"],"mappings":";;;;;AAeA,IAAa,IAAa,EAA4C,SACrE,EAAE,YAAS,cAAW,gBAAa,YAAS,kBAAe,GAAG,SAAM,YAAS,WAAW,UAAO,GAAG,KAClG,GACC;CACD,OACC,kBAAC,OAAD;EAAU;EAAK,WAAW,EAAgB,EAAO,YAAY,CAAS;EAAG,eAAa;EAAQ,GAAI;EAAlG,UAAA,CACC,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAgB,eAAY;GAAnD,UAAA;IACC,kBAAC,QAAD,CAAO,CAAA;IACP,kBAAC,QAAD,CAAO,CAAA;IACP,kBAAC,QAAD,CAAO,CAAA;GACH;EACL,CAAA,GAAA,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAvB,UAAA;IACE,IACA,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAgB,eAAY;KACjD,UAAA;IACG,CAAA,IACF;IACH,IAAU,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAoB,UAAA;IAAa,CAAA,IAAI;IACtE,EAAc,IAAI,KAAgB,EAAE,WAAW,EAAO,gBAAgB,GAAG,CAAK;IAC9E,IAAc,kBAAC,KAAD;KAAG,WAAW,EAAO;KAAwB,UAAA;IAAe,CAAA,IAAI;IAC9E,IAAU,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAoB,UAAA;IAAa,CAAA,IAAI;GACnE;EACD,CAAA,CAAA;;AAEP,CAAC"}
@@ -0,0 +1,42 @@
1
+ //#region src/components/feedback/feedback.module.css
2
+ var e = "_feedbackPanel_f6yg4_1", t = "_rangeRoot_f6yg4_1", n = "_spinner_f6yg4_1", r = "_loader_f6yg4_1", i = "_emptyState_f6yg4_1", a = "_toastRoot_f6yg4_1", o = "_alert_f6yg4_47", s = "_banner_f6yg4_52", c = "_feedbackContent_f6yg4_58", l = "_feedbackTitle_f6yg4_63", u = "_feedbackDescription_f6yg4_70", d = "_feedbackActions_f6yg4_75", f = "_rangeHeader_f6yg4_90", p = "_rangeLabel_f6yg4_97", m = "_rangeValue_f6yg4_104", h = "_rangeTrack_f6yg4_112", g = "_rangeIndicator_f6yg4_121", _ = "_skeleton_f6yg4_167", v = "_emptyStateRail_f6yg4_202", y = "_emptyStateBody_f6yg4_206", b = "_emptyStateIcon_f6yg4_218", x = "_emptyStateEyebrow_f6yg4_229", S = "_emptyStateTitle_f6yg4_238", C = "_emptyStateDescription_f6yg4_246", w = "_emptyStateActions_f6yg4_255", T = "_toastViewport_f6yg4_263", E = "_toastSignal_f6yg4_327", D = "_toastContent_f6yg4_336", O = "_toastTitle_f6yg4_342", k = "_toastDescription_f6yg4_350", A = "_toastAction_f6yg4_357", j = "_toastClose_f6yg4_358", M = {
3
+ feedbackPanel: e,
4
+ rangeRoot: t,
5
+ spinner: n,
6
+ loader: r,
7
+ emptyState: i,
8
+ toastRoot: a,
9
+ alert: o,
10
+ banner: s,
11
+ feedbackContent: c,
12
+ feedbackTitle: l,
13
+ feedbackDescription: u,
14
+ feedbackActions: d,
15
+ rangeHeader: f,
16
+ rangeLabel: p,
17
+ rangeValue: m,
18
+ rangeTrack: h,
19
+ rangeIndicator: g,
20
+ "feedback-progress-indeterminate": "_feedback-progress-indeterminate_f6yg4_1",
21
+ "feedback-spin": "_feedback-spin_f6yg4_1",
22
+ skeleton: _,
23
+ "feedback-skeleton": "_feedback-skeleton_f6yg4_1",
24
+ emptyStateRail: v,
25
+ emptyStateBody: y,
26
+ emptyStateIcon: b,
27
+ emptyStateEyebrow: x,
28
+ emptyStateTitle: S,
29
+ emptyStateDescription: C,
30
+ emptyStateActions: w,
31
+ toastViewport: T,
32
+ toastSignal: E,
33
+ toastContent: D,
34
+ toastTitle: O,
35
+ toastDescription: k,
36
+ toastAction: A,
37
+ toastClose: j
38
+ };
39
+ //#endregion
40
+ export { o as alert, s as banner, M as default, i as emptyState, w as emptyStateActions, y as emptyStateBody, C as emptyStateDescription, x as emptyStateEyebrow, b as emptyStateIcon, v as emptyStateRail, S as emptyStateTitle, d as feedbackActions, c as feedbackContent, u as feedbackDescription, e as feedbackPanel, l as feedbackTitle, r as loader, f as rangeHeader, g as rangeIndicator, p as rangeLabel, t as rangeRoot, h as rangeTrack, m as rangeValue, _ as skeleton, n as spinner, A as toastAction, j as toastClose, D as toastContent, k as toastDescription, a as toastRoot, E as toastSignal, O as toastTitle, T as toastViewport };
41
+
42
+ //# sourceMappingURL=feedback.module.js.map