tyrell-react 1.0.0-RC10

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 (159) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +410 -0
  3. package/dist/components/TyButton.d.ts +52 -0
  4. package/dist/components/TyButton.d.ts.map +1 -0
  5. package/dist/components/TyButton.js +76 -0
  6. package/dist/components/TyButton.js.map +1 -0
  7. package/dist/components/TyCalendar.d.ts +63 -0
  8. package/dist/components/TyCalendar.d.ts.map +1 -0
  9. package/dist/components/TyCalendar.js +128 -0
  10. package/dist/components/TyCalendar.js.map +1 -0
  11. package/dist/components/TyCalendarMonth.d.ts +32 -0
  12. package/dist/components/TyCalendarMonth.d.ts.map +1 -0
  13. package/dist/components/TyCalendarMonth.js +54 -0
  14. package/dist/components/TyCalendarMonth.js.map +1 -0
  15. package/dist/components/TyCalendarNavigation.d.ts +21 -0
  16. package/dist/components/TyCalendarNavigation.d.ts.map +1 -0
  17. package/dist/components/TyCalendarNavigation.js +50 -0
  18. package/dist/components/TyCalendarNavigation.js.map +1 -0
  19. package/dist/components/TyCheckbox.d.ts +39 -0
  20. package/dist/components/TyCheckbox.d.ts.map +1 -0
  21. package/dist/components/TyCheckbox.js +76 -0
  22. package/dist/components/TyCheckbox.js.map +1 -0
  23. package/dist/components/TyCopy.d.ts +21 -0
  24. package/dist/components/TyCopy.d.ts.map +1 -0
  25. package/dist/components/TyCopy.js +46 -0
  26. package/dist/components/TyCopy.js.map +1 -0
  27. package/dist/components/TyDatePicker.d.ts +45 -0
  28. package/dist/components/TyDatePicker.d.ts.map +1 -0
  29. package/dist/components/TyDatePicker.js +122 -0
  30. package/dist/components/TyDatePicker.js.map +1 -0
  31. package/dist/components/TyDropdown.d.ts +62 -0
  32. package/dist/components/TyDropdown.d.ts.map +1 -0
  33. package/dist/components/TyDropdown.js +124 -0
  34. package/dist/components/TyDropdown.js.map +1 -0
  35. package/dist/components/TyFileUpload.d.ts +31 -0
  36. package/dist/components/TyFileUpload.d.ts.map +1 -0
  37. package/dist/components/TyFileUpload.js +56 -0
  38. package/dist/components/TyFileUpload.js.map +1 -0
  39. package/dist/components/TyIcon.d.ts +17 -0
  40. package/dist/components/TyIcon.d.ts.map +1 -0
  41. package/dist/components/TyIcon.js +42 -0
  42. package/dist/components/TyIcon.js.map +1 -0
  43. package/dist/components/TyInput.d.ts +65 -0
  44. package/dist/components/TyInput.d.ts.map +1 -0
  45. package/dist/components/TyInput.js +134 -0
  46. package/dist/components/TyInput.js.map +1 -0
  47. package/dist/components/TyModal.d.ts +48 -0
  48. package/dist/components/TyModal.d.ts.map +1 -0
  49. package/dist/components/TyModal.js +120 -0
  50. package/dist/components/TyModal.js.map +1 -0
  51. package/dist/components/TyMultiselect.d.ts +57 -0
  52. package/dist/components/TyMultiselect.d.ts.map +1 -0
  53. package/dist/components/TyMultiselect.js +111 -0
  54. package/dist/components/TyMultiselect.js.map +1 -0
  55. package/dist/components/TyOption.d.ts +10 -0
  56. package/dist/components/TyOption.d.ts.map +1 -0
  57. package/dist/components/TyOption.js +29 -0
  58. package/dist/components/TyOption.js.map +1 -0
  59. package/dist/components/TyPopup.d.ts +24 -0
  60. package/dist/components/TyPopup.d.ts.map +1 -0
  61. package/dist/components/TyPopup.js +70 -0
  62. package/dist/components/TyPopup.js.map +1 -0
  63. package/dist/components/TyRadio.d.ts +20 -0
  64. package/dist/components/TyRadio.d.ts.map +1 -0
  65. package/dist/components/TyRadio.js +35 -0
  66. package/dist/components/TyRadio.js.map +1 -0
  67. package/dist/components/TyRadioGroup.d.ts +40 -0
  68. package/dist/components/TyRadioGroup.d.ts.map +1 -0
  69. package/dist/components/TyRadioGroup.js +61 -0
  70. package/dist/components/TyRadioGroup.js.map +1 -0
  71. package/dist/components/TyResizeObserver.d.ts +11 -0
  72. package/dist/components/TyResizeObserver.d.ts.map +1 -0
  73. package/dist/components/TyResizeObserver.js +28 -0
  74. package/dist/components/TyResizeObserver.js.map +1 -0
  75. package/dist/components/TyScrollContainer.d.ts +25 -0
  76. package/dist/components/TyScrollContainer.d.ts.map +1 -0
  77. package/dist/components/TyScrollContainer.js +61 -0
  78. package/dist/components/TyScrollContainer.js.map +1 -0
  79. package/dist/components/TyStep.d.ts +17 -0
  80. package/dist/components/TyStep.d.ts.map +1 -0
  81. package/dist/components/TyStep.js +35 -0
  82. package/dist/components/TyStep.js.map +1 -0
  83. package/dist/components/TySwitch.d.ts +35 -0
  84. package/dist/components/TySwitch.d.ts.map +1 -0
  85. package/dist/components/TySwitch.js +59 -0
  86. package/dist/components/TySwitch.js.map +1 -0
  87. package/dist/components/TyTab.d.ts +13 -0
  88. package/dist/components/TyTab.d.ts.map +1 -0
  89. package/dist/components/TyTab.js +34 -0
  90. package/dist/components/TyTab.js.map +1 -0
  91. package/dist/components/TyTabs.d.ts +23 -0
  92. package/dist/components/TyTabs.d.ts.map +1 -0
  93. package/dist/components/TyTabs.js +48 -0
  94. package/dist/components/TyTabs.js.map +1 -0
  95. package/dist/components/TyTag.d.ts +22 -0
  96. package/dist/components/TyTag.d.ts.map +1 -0
  97. package/dist/components/TyTag.js +51 -0
  98. package/dist/components/TyTag.js.map +1 -0
  99. package/dist/components/TyTextarea.d.ts +37 -0
  100. package/dist/components/TyTextarea.d.ts.map +1 -0
  101. package/dist/components/TyTextarea.js +116 -0
  102. package/dist/components/TyTextarea.js.map +1 -0
  103. package/dist/components/TyTooltip.d.ts +17 -0
  104. package/dist/components/TyTooltip.d.ts.map +1 -0
  105. package/dist/components/TyTooltip.js +41 -0
  106. package/dist/components/TyTooltip.js.map +1 -0
  107. package/dist/components/TyWizard.d.ts +26 -0
  108. package/dist/components/TyWizard.d.ts.map +1 -0
  109. package/dist/components/TyWizard.js +50 -0
  110. package/dist/components/TyWizard.js.map +1 -0
  111. package/dist/components/index.d.ts +112 -0
  112. package/dist/components/index.d.ts.map +1 -0
  113. package/dist/components/index.js +127 -0
  114. package/dist/components/index.js.map +1 -0
  115. package/dist/utils/react-version.d.ts +2 -0
  116. package/dist/utils/react-version.d.ts.map +1 -0
  117. package/dist/utils/react-version.js +8 -0
  118. package/dist/utils/react-version.js.map +1 -0
  119. package/dist/utils/use-boolean-prop.d.ts +36 -0
  120. package/dist/utils/use-boolean-prop.d.ts.map +1 -0
  121. package/dist/utils/use-boolean-prop.js +62 -0
  122. package/dist/utils/use-boolean-prop.js.map +1 -0
  123. package/dist/version.d.ts +3 -0
  124. package/dist/version.d.ts.map +1 -0
  125. package/dist/version.js +6 -0
  126. package/dist/version.js.map +1 -0
  127. package/package.json +47 -0
  128. package/src/components/EventConventionTest.tsx +155 -0
  129. package/src/components/TyButton.tsx +157 -0
  130. package/src/components/TyCalendar.tsx +247 -0
  131. package/src/components/TyCalendarMonth.tsx +108 -0
  132. package/src/components/TyCalendarNavigation.tsx +91 -0
  133. package/src/components/TyCheckbox.tsx +147 -0
  134. package/src/components/TyCopy.tsx +83 -0
  135. package/src/components/TyDatePicker.tsx +215 -0
  136. package/src/components/TyDropdown.tsx +240 -0
  137. package/src/components/TyFileUpload.tsx +108 -0
  138. package/src/components/TyIcon.tsx +71 -0
  139. package/src/components/TyInput.tsx +239 -0
  140. package/src/components/TyModal.tsx +195 -0
  141. package/src/components/TyMultiselect.tsx +208 -0
  142. package/src/components/TyOption.tsx +47 -0
  143. package/src/components/TyPopup.tsx +116 -0
  144. package/src/components/TyRadio.tsx +61 -0
  145. package/src/components/TyRadioGroup.tsx +125 -0
  146. package/src/components/TyResizeObserver.tsx +54 -0
  147. package/src/components/TyScrollContainer.tsx +102 -0
  148. package/src/components/TyStep.tsx +71 -0
  149. package/src/components/TySwitch.tsx +114 -0
  150. package/src/components/TyTab.tsx +65 -0
  151. package/src/components/TyTabs.tsx +93 -0
  152. package/src/components/TyTag.tsx +86 -0
  153. package/src/components/TyTextarea.tsx +181 -0
  154. package/src/components/TyTooltip.tsx +83 -0
  155. package/src/components/TyWizard.tsx +99 -0
  156. package/src/components/index.ts +279 -0
  157. package/src/utils/react-version.ts +8 -0
  158. package/src/utils/use-boolean-prop.ts +62 -0
  159. package/src/version.ts +6 -0
@@ -0,0 +1,122 @@
1
+ import React, { useEffect, useRef, useCallback } from 'react';
2
+ import { needsPropertyBridge } from '../utils/react-version';
3
+ import { useBooleanProperty } from '../utils/use-boolean-prop';
4
+ // React wrapper for ty-date-picker web component
5
+ export const TyDatePicker = React.forwardRef(({ value, size, flavor, label, placeholder, required, disabled, name, clearable, format, locale, withTime, onChange, onOpen, onClose, ...props }, ref) => {
6
+ const elementRef = useRef(null);
7
+ // Handle ref forwarding
8
+ useEffect(() => {
9
+ if (ref && elementRef.current) {
10
+ if (typeof ref === 'function') {
11
+ ref(elementRef.current);
12
+ }
13
+ else {
14
+ ref.current = elementRef.current;
15
+ }
16
+ }
17
+ }, [ref]);
18
+ // Sync value property with the web component.
19
+ // React 18 workaround: prop-to-property bridging is unreliable for empty
20
+ // strings on custom elements. React 19+ handles this natively.
21
+ useEffect(() => {
22
+ if (!needsPropertyBridge)
23
+ return;
24
+ const element = elementRef.current;
25
+ if (element && value !== undefined) {
26
+ // Set the value property directly on the element
27
+ element.value = value || '';
28
+ }
29
+ }, [value]);
30
+ // Handle change events
31
+ const handleChange = useCallback((event) => {
32
+ const customEvent = event;
33
+ if (onChange) {
34
+ onChange(customEvent);
35
+ }
36
+ }, [onChange]);
37
+ // Handle open/close events. Guard with `event.target === element` so
38
+ // bubbled open/close events from popup-like descendants slotted inside
39
+ // (rare for a date-picker, but defensive — same fix as TyModal/TyPopup)
40
+ // don't fire the consumer's onOpen/onClose.
41
+ const handleOpen = useCallback((event) => {
42
+ if (event.target !== elementRef.current)
43
+ return;
44
+ if (onOpen)
45
+ onOpen(event);
46
+ }, [onOpen]);
47
+ const handleClose = useCallback((event) => {
48
+ if (event.target !== elementRef.current)
49
+ return;
50
+ if (onClose)
51
+ onClose(event);
52
+ }, [onClose]);
53
+ // Set up event listeners
54
+ useEffect(() => {
55
+ const element = elementRef.current;
56
+ if (!element)
57
+ return;
58
+ const listeners = [];
59
+ if (onChange) {
60
+ element.addEventListener('change', handleChange);
61
+ listeners.push(['change', handleChange]);
62
+ }
63
+ if (onOpen) {
64
+ element.addEventListener('open', handleOpen);
65
+ listeners.push(['open', handleOpen]);
66
+ }
67
+ if (onClose) {
68
+ element.addEventListener('close', handleClose);
69
+ listeners.push(['close', handleClose]);
70
+ }
71
+ return () => {
72
+ listeners.forEach(([eventName, handler]) => {
73
+ element.removeEventListener(eventName, handler);
74
+ });
75
+ };
76
+ }, [handleChange, handleOpen, handleClose, onChange, onOpen, onClose]);
77
+ // Convert React props to web component attributes
78
+ const webComponentProps = {
79
+ ...props,
80
+ ref: elementRef,
81
+ };
82
+ // Add optional attributes only if they have values
83
+ if (value !== undefined) {
84
+ webComponentProps.value = value;
85
+ }
86
+ if (size) {
87
+ webComponentProps.size = size;
88
+ }
89
+ if (flavor) {
90
+ webComponentProps.flavor = flavor;
91
+ }
92
+ if (label) {
93
+ webComponentProps.label = label;
94
+ }
95
+ if (placeholder) {
96
+ webComponentProps.placeholder = placeholder;
97
+ }
98
+ const isRequired = useBooleanProperty(elementRef, 'required', required);
99
+ const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
100
+ const isClearable = useBooleanProperty(elementRef, 'clearable', clearable);
101
+ if (isRequired)
102
+ webComponentProps.required = '';
103
+ if (isDisabled)
104
+ webComponentProps.disabled = '';
105
+ if (isClearable)
106
+ webComponentProps.clearable = '';
107
+ if (name) {
108
+ webComponentProps.name = name;
109
+ }
110
+ if (format) {
111
+ webComponentProps.format = format;
112
+ }
113
+ if (locale) {
114
+ webComponentProps.locale = locale;
115
+ }
116
+ if (withTime) {
117
+ webComponentProps['with-time'] = ''; // Convert camelCase to kebab-case
118
+ }
119
+ return React.createElement('ty-date-picker', webComponentProps);
120
+ });
121
+ TyDatePicker.displayName = 'TyDatePicker';
122
+ //# sourceMappingURL=TyDatePicker.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TyDatePicker.js","sourceRoot":"","sources":["../../src/components/TyDatePicker.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,62 @@
1
+ import React from 'react';
2
+ export interface OptionData {
3
+ value: string;
4
+ text: string;
5
+ disabled?: boolean;
6
+ }
7
+ export interface TyDropdownEventDetail {
8
+ option: HTMLElement;
9
+ }
10
+ export interface TyDropdownProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'style'> {
11
+ style?: import('./TyInput').TyInputCSSProperties;
12
+ /** Semantic styling variant */
13
+ flavor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
14
+ /** Dropdown size */
15
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
16
+ /** Selected value */
17
+ value?: string;
18
+ /** Placeholder text */
19
+ placeholder?: string;
20
+ /** Dropdown label */
21
+ label?: string;
22
+ /** Disable the dropdown */
23
+ disabled?: boolean;
24
+ /**
25
+ * Loading state — replaces the open popup options list with a centered
26
+ * spinner. Search input stays usable. Pair with `externalSearch` while
27
+ * fetching results from a parent-owned data source.
28
+ */
29
+ loading?: boolean;
30
+ /** Make dropdown readonly */
31
+ readonly?: boolean;
32
+ /** Required field */
33
+ required?: boolean;
34
+ /** Show clear button */
35
+ clearable?: boolean;
36
+ /** Disable clear button (alias for clearable={false}) */
37
+ notClearable?: boolean;
38
+ /** Debounce in milliseconds (0-5000) */
39
+ debounce?: number;
40
+ /**
41
+ * Switch to external (remote) search mode. Default is `false` — the dropdown
42
+ * filters its options locally. When `true`, the dropdown stops filtering and
43
+ * dispatches `search` events on each keystroke; the parent owns filtering
44
+ * and updates the children.
45
+ */
46
+ externalSearch?: boolean;
47
+ /** @deprecated Use `externalSearch` instead. */
48
+ notSearchable?: boolean;
49
+ /** @deprecated Use `externalSearch` instead. Pass `searchable={false}` was equivalent to `externalSearch={true}`. */
50
+ searchable?: boolean;
51
+ /** Form field name for form submission */
52
+ name?: string;
53
+ options?: OptionData[];
54
+ onChange?: (event: CustomEvent<TyDropdownEventDetail>) => void;
55
+ onSearch?: (event: CustomEvent<{
56
+ query: string;
57
+ element: HTMLElement;
58
+ }>) => void;
59
+ children?: React.ReactNode;
60
+ }
61
+ export declare const TyDropdown: React.ForwardRefExoticComponent<TyDropdownProps & React.RefAttributes<HTMLElement>>;
62
+ //# sourceMappingURL=TyDropdown.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TyDropdown.d.ts","sourceRoot":"","sources":["../../src/components/TyDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAK9D,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAGD,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,WAAW,CAAC;CACrB;AAGD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACpG,KAAK,CAAC,EAAE,OAAO,WAAW,EAAE,oBAAoB,CAAC;IACjD,+BAA+B;IAC/B,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IAEhF,oBAAoB;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAExC,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yDAAyD;IACzD,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,gDAAgD;IAChD,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,qHAAqH;IACrH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IAGvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,qBAAqB,CAAC,KAAK,IAAI,CAAC;IAC/D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,WAAW,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAGjF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,eAAO,MAAM,UAAU,qFAqJtB,CAAC"}
@@ -0,0 +1,124 @@
1
+ import React, { useEffect, useRef, useCallback } from 'react';
2
+ import { needsPropertyBridge } from '../utils/react-version';
3
+ import { useBooleanProperty, coerceBool } from '../utils/use-boolean-prop';
4
+ // React wrapper for ty-dropdown web component
5
+ export const TyDropdown = React.forwardRef(({ options, children, onChange, onSearch, disabled, loading, externalSearch, notSearchable, searchable, clearable, notClearable, debounce, name, value, ...props }, ref) => {
6
+ const elementRef = useRef(null);
7
+ const handleChange = useCallback((event) => {
8
+ if (onChange) {
9
+ onChange(event);
10
+ }
11
+ }, [onChange]);
12
+ const handleSearch = useCallback((event) => {
13
+ if (onSearch) {
14
+ onSearch(event);
15
+ }
16
+ }, [onSearch]);
17
+ useEffect(() => {
18
+ const element = elementRef.current;
19
+ if (!element)
20
+ return;
21
+ // Listen for custom events from ty-dropdown
22
+ if (onChange) {
23
+ element.addEventListener('change', handleChange);
24
+ }
25
+ if (onSearch) {
26
+ element.addEventListener('search', handleSearch);
27
+ }
28
+ return () => {
29
+ if (onChange) {
30
+ element.removeEventListener('change', handleChange);
31
+ }
32
+ if (onSearch) {
33
+ element.removeEventListener('search', handleSearch);
34
+ }
35
+ };
36
+ }, [handleChange, handleSearch, onChange, onSearch]);
37
+ // Imperatively sync `value` to the underlying element's property whenever
38
+ // it changes. React 18's prop-to-property bridging for custom elements is
39
+ // unreliable for empty strings (programmatic resets), so we set the
40
+ // property directly to guarantee the dropdown clears on `value=""`.
41
+ // React 19+ handles this natively, so the effect short-circuits there.
42
+ useEffect(() => {
43
+ if (!needsPropertyBridge)
44
+ return;
45
+ const element = elementRef.current;
46
+ if (!element)
47
+ return;
48
+ if (element.value !== value) {
49
+ element.value = value ?? '';
50
+ }
51
+ }, [value]);
52
+ // Handle ref forwarding
53
+ useEffect(() => {
54
+ if (ref && elementRef.current) {
55
+ if (typeof ref === 'function') {
56
+ ref(elementRef.current);
57
+ }
58
+ else {
59
+ ref.current = elementRef.current;
60
+ }
61
+ }
62
+ }, [ref]);
63
+ // Render options from data if provided, otherwise use children
64
+ const renderContent = () => {
65
+ if (options && options.length > 0) {
66
+ // Data-driven approach - create ty-option elements
67
+ return options.map((option, index) => React.createElement('ty-option', {
68
+ key: option.value || index,
69
+ value: option.value,
70
+ ...(option.disabled && { disabled: "" }),
71
+ }, option.text));
72
+ }
73
+ // Slotted approach - use provided children
74
+ return children;
75
+ };
76
+ // Imperative property sync for boolean props (see use-boolean-prop.ts).
77
+ const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
78
+ const isLoading = useBooleanProperty(elementRef, 'loading', loading);
79
+ const isExternalSearch = coerceBool(externalSearch) || coerceBool(notSearchable) || searchable === false;
80
+ useBooleanProperty(elementRef, 'externalSearch', isExternalSearch);
81
+ // clearable: explicit boolean OR the `notClearable` alias inverts it
82
+ const isClearable = clearable !== undefined
83
+ ? coerceBool(clearable)
84
+ : (coerceBool(notClearable) ? false : undefined);
85
+ useEffect(() => {
86
+ if (!needsPropertyBridge)
87
+ return;
88
+ if (isClearable === undefined)
89
+ return;
90
+ const el = elementRef.current;
91
+ if (!el)
92
+ return;
93
+ if (Boolean(el.clearable) !== isClearable)
94
+ el.clearable = isClearable;
95
+ }, [isClearable]);
96
+ // Convert React props to web component attributes
97
+ const webComponentProps = {
98
+ ...props,
99
+ ref: elementRef,
100
+ };
101
+ if (isDisabled)
102
+ webComponentProps.disabled = '';
103
+ if (isLoading)
104
+ webComponentProps.loading = '';
105
+ if (isExternalSearch)
106
+ webComponentProps['external-search'] = '';
107
+ // Handle clearable functionality
108
+ if (isClearable === true) {
109
+ webComponentProps.clearable = '';
110
+ }
111
+ else if (isClearable === false) {
112
+ webComponentProps['not-clearable'] = '';
113
+ }
114
+ // Add debounce attribute
115
+ if (debounce !== undefined) {
116
+ webComponentProps.debounce = debounce;
117
+ }
118
+ // Add string attributes
119
+ if (name)
120
+ webComponentProps.name = name;
121
+ return React.createElement('ty-dropdown', webComponentProps, renderContent());
122
+ });
123
+ TyDropdown.displayName = 'TyDropdown';
124
+ //# sourceMappingURL=TyDropdown.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TyDropdown.js","sourceRoot":"","sources":["../../src/components/TyDropdown.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,31 @@
1
+ import React from 'react';
2
+ export interface TyFileUploadProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
3
+ /** Form field name — used as the FormData key */
4
+ name?: string;
5
+ /** Allow selecting multiple files */
6
+ multiple?: boolean;
7
+ /** File type filter passed to the underlying input (e.g. "image/*", ".pdf,.docx") */
8
+ accept?: string;
9
+ /** Field label rendered above the drop zone */
10
+ label?: string;
11
+ /** Hint text shown inside the drop zone when no files are selected */
12
+ placeholder?: string;
13
+ /** Disable interaction */
14
+ disabled?: boolean;
15
+ /** Mark the field as required (shows asterisk) */
16
+ required?: boolean;
17
+ /** Validation error message — also applies danger border styling */
18
+ error?: string;
19
+ /**
20
+ * Fires when the selection changes — browse, drag-drop, or remove.
21
+ * Maps to the native 'change' event from ty-file-upload.
22
+ */
23
+ onChange?: (event: CustomEvent<TyFileUploadEventDetail>) => void;
24
+ }
25
+ export interface TyFileUploadEventDetail {
26
+ value: File[];
27
+ files: File[];
28
+ names: string[];
29
+ }
30
+ export declare const TyFileUpload: React.ForwardRefExoticComponent<TyFileUploadProps & React.RefAttributes<HTMLElement>>;
31
+ //# sourceMappingURL=TyFileUpload.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TyFileUpload.d.ts","sourceRoot":"","sources":["../../src/components/TyFileUpload.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC5F,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qFAAqF;IACrF,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,uBAAuB,CAAC,KAAK,IAAI,CAAC;CAClE;AAED,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AAGD,eAAO,MAAM,YAAY,uFA8DxB,CAAC"}
@@ -0,0 +1,56 @@
1
+ import React, { useEffect, useRef } from 'react';
2
+ import { useBooleanProperty } from '../utils/use-boolean-prop';
3
+ // React wrapper for ty-file-upload web component
4
+ export const TyFileUpload = React.forwardRef(({ name, multiple, accept, label, placeholder, disabled, required, error, onChange, ...props }, ref) => {
5
+ const elementRef = useRef(null);
6
+ useEffect(() => {
7
+ const element = elementRef.current;
8
+ if (!element)
9
+ return;
10
+ const handleChange = (event) => {
11
+ if (onChange) {
12
+ onChange(event);
13
+ }
14
+ };
15
+ element.addEventListener('change', handleChange);
16
+ return () => {
17
+ element.removeEventListener('change', handleChange);
18
+ };
19
+ }, [onChange]);
20
+ useEffect(() => {
21
+ if (ref && elementRef.current) {
22
+ if (typeof ref === 'function') {
23
+ ref(elementRef.current);
24
+ }
25
+ else {
26
+ ref.current = elementRef.current;
27
+ }
28
+ }
29
+ }, [ref]);
30
+ const isMultiple = useBooleanProperty(elementRef, 'multiple', multiple);
31
+ const isDisabled = useBooleanProperty(elementRef, 'disabled', disabled);
32
+ const isRequired = useBooleanProperty(elementRef, 'required', required);
33
+ const webComponentProps = {
34
+ ...props,
35
+ ref: elementRef,
36
+ };
37
+ if (isMultiple)
38
+ webComponentProps.multiple = '';
39
+ if (isDisabled)
40
+ webComponentProps.disabled = '';
41
+ if (isRequired)
42
+ webComponentProps.required = '';
43
+ if (name)
44
+ webComponentProps.name = name;
45
+ if (accept)
46
+ webComponentProps.accept = accept;
47
+ if (label)
48
+ webComponentProps.label = label;
49
+ if (placeholder)
50
+ webComponentProps.placeholder = placeholder;
51
+ if (error)
52
+ webComponentProps.error = error;
53
+ return React.createElement('ty-file-upload', webComponentProps);
54
+ });
55
+ TyFileUpload.displayName = 'TyFileUpload';
56
+ //# sourceMappingURL=TyFileUpload.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TyFileUpload.js","sourceRoot":"","sources":["../../src/components/TyFileUpload.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAyC/D,iDAAiD;AACjD,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAC1C,CAAC,EACC,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,GAAG,EAAE,EAAE;IACR,MAAM,UAAU,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAE7C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;QACnC,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,MAAM,YAAY,GAAG,CAAC,KAAY,EAAE,EAAE;YACpC,IAAI,QAAQ,EAAE,CAAC;gBACb,QAAQ,CAAC,KAA6C,CAAC,CAAC;YAC1D,CAAC;QACH,CAAC,CAAC;QAEF,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACjD,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACtD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,GAAG,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;gBAC9B,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YAC1B,CAAC;iBAAM,CAAC;gBACN,GAAG,CAAC,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;YACnC,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,MAAM,UAAU,GAAG,kBAAkB,CAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;IACxE,MAAM,UAAU,GAAG,kBAAkB,CAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;IACxE,MAAM,UAAU,GAAG,kBAAkB,CAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;IAExE,MAAM,iBAAiB,GAAwB;QAC7C,GAAG,KAAK;QACR,GAAG,EAAE,UAAU;KAChB,CAAC;IAEF,IAAI,UAAU;QAAE,iBAAiB,CAAC,QAAQ,GAAG,EAAE,CAAC;IAChD,IAAI,UAAU;QAAE,iBAAiB,CAAC,QAAQ,GAAG,EAAE,CAAC;IAChD,IAAI,UAAU;QAAE,iBAAiB,CAAC,QAAQ,GAAG,EAAE,CAAC;IAEhD,IAAI,IAAI;QAAE,iBAAiB,CAAC,IAAI,GAAG,IAAI,CAAC;IACxC,IAAI,MAAM;QAAE,iBAAiB,CAAC,MAAM,GAAG,MAAM,CAAC;IAC9C,IAAI,KAAK;QAAE,iBAAiB,CAAC,KAAK,GAAG,KAAK,CAAC;IAC3C,IAAI,WAAW;QAAE,iBAAiB,CAAC,WAAW,GAAG,WAAW,CAAC;IAC7D,IAAI,KAAK;QAAE,iBAAiB,CAAC,KAAK,GAAG,KAAK,CAAC;IAE3C,OAAO,KAAK,CAAC,aAAa,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;AAClE,CAAC,CACF,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC"}
@@ -0,0 +1,17 @@
1
+ import React from 'react';
2
+ export interface TyIconProps extends React.HTMLAttributes<HTMLElement> {
3
+ /** Icon name from the icon registry (e.g., 'home', 'star', 'settings') */
4
+ name: string;
5
+ /** Icon size - relative (em-based) or absolute (pixel-based) */
6
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '12' | '14' | '16' | '18' | '20' | '24' | '32' | '48';
7
+ /** Enable spinning animation */
8
+ spin?: boolean;
9
+ /** Enable pulse animation */
10
+ pulse?: boolean;
11
+ /** Animation tempo/speed */
12
+ tempo?: 'slow' | 'fast';
13
+ /** Additional CSS classes */
14
+ className?: string;
15
+ }
16
+ export declare const TyIcon: React.ForwardRefExoticComponent<TyIconProps & React.RefAttributes<HTMLElement>>;
17
+ //# sourceMappingURL=TyIcon.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TyIcon.d.ts","sourceRoot":"","sources":["../../src/components/TyIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACpE,0EAA0E;IAC1E,IAAI,EAAE,MAAM,CAAC;IAEb,gEAAgE;IAChE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAExG,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD,eAAO,MAAM,MAAM,iFA2ClB,CAAC"}
@@ -0,0 +1,42 @@
1
+ import React, { useEffect, useRef } from 'react';
2
+ import { useBooleanProperty } from '../utils/use-boolean-prop';
3
+ // React wrapper for ty-icon web component
4
+ export const TyIcon = React.forwardRef(({ name, size, spin, pulse, tempo, className, ...props }, ref) => {
5
+ const elementRef = useRef(null);
6
+ // Handle ref forwarding
7
+ useEffect(() => {
8
+ if (ref && elementRef.current) {
9
+ if (typeof ref === 'function') {
10
+ ref(elementRef.current);
11
+ }
12
+ else {
13
+ ref.current = elementRef.current;
14
+ }
15
+ }
16
+ }, [ref]);
17
+ const isSpin = useBooleanProperty(elementRef, 'spin', spin);
18
+ const isPulse = useBooleanProperty(elementRef, 'pulse', pulse);
19
+ // Convert React props to web component attributes
20
+ const webComponentProps = {
21
+ ...props,
22
+ name,
23
+ ref: elementRef,
24
+ };
25
+ // Add optional attributes only if they have values
26
+ if (size) {
27
+ webComponentProps.size = size;
28
+ }
29
+ if (isSpin)
30
+ webComponentProps.spin = '';
31
+ if (isPulse)
32
+ webComponentProps.pulse = '';
33
+ if (tempo) {
34
+ webComponentProps.tempo = tempo;
35
+ }
36
+ if (className) {
37
+ webComponentProps.class = className; // HTML attribute is 'class', not 'className'
38
+ }
39
+ return React.createElement('ty-icon', webComponentProps);
40
+ });
41
+ TyIcon.displayName = 'TyIcon';
42
+ //# sourceMappingURL=TyIcon.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TyIcon.js","sourceRoot":"","sources":["../../src/components/TyIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAuB/D,0CAA0C;AAC1C,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CACpC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC/D,MAAM,UAAU,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAE7C,wBAAwB;IACxB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,GAAG,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;gBAC9B,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YAC1B,CAAC;iBAAM,CAAC;gBACN,GAAG,CAAC,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;YACnC,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,MAAM,MAAM,GAAG,kBAAkB,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;IAC5D,MAAM,OAAO,GAAG,kBAAkB,CAAC,UAAU,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;IAE/D,kDAAkD;IAClD,MAAM,iBAAiB,GAAwB;QAC7C,GAAG,KAAK;QACR,IAAI;QACJ,GAAG,EAAE,UAAU;KAChB,CAAC;IAEF,mDAAmD;IACnD,IAAI,IAAI,EAAE,CAAC;QACT,iBAAiB,CAAC,IAAI,GAAG,IAAI,CAAC;IAChC,CAAC;IAED,IAAI,MAAM;QAAE,iBAAiB,CAAC,IAAI,GAAG,EAAE,CAAC;IACxC,IAAI,OAAO;QAAE,iBAAiB,CAAC,KAAK,GAAG,EAAE,CAAC;IAE1C,IAAI,KAAK,EAAE,CAAC;QACV,iBAAiB,CAAC,KAAK,GAAG,KAAK,CAAC;IAClC,CAAC;IAED,IAAI,SAAS,EAAE,CAAC;QACd,iBAAiB,CAAC,KAAK,GAAG,SAAS,CAAC,CAAE,6CAA6C;IACrF,CAAC;IAED,OAAO,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AAC3D,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}
@@ -0,0 +1,65 @@
1
+ import React from 'react';
2
+ export interface TyInputEventDetail {
3
+ value: any;
4
+ formattedValue: string;
5
+ rawValue: string;
6
+ originalEvent: Event;
7
+ }
8
+ export interface TyInputCSSProperties extends React.CSSProperties {
9
+ '--input-bg'?: string;
10
+ '--input-color'?: string;
11
+ '--input-border'?: string;
12
+ '--input-border-hover'?: string;
13
+ '--input-border-focus'?: string;
14
+ '--input-shadow-focus'?: string;
15
+ '--input-placeholder'?: string;
16
+ '--input-disabled-bg'?: string;
17
+ '--input-disabled-border'?: string;
18
+ '--input-disabled-color'?: string;
19
+ }
20
+ export interface TyInputProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'onFocus' | 'onBlur' | 'style'> {
21
+ style?: TyInputCSSProperties;
22
+ /** Input type */
23
+ type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'currency' | 'percent' | 'compact';
24
+ /** Semantic styling variant */
25
+ flavor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
26
+ /** Input size */
27
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
28
+ /** Input value */
29
+ value?: string;
30
+ /** Placeholder text */
31
+ placeholder?: string;
32
+ /** Input label */
33
+ label?: string;
34
+ /** Error message */
35
+ error?: string;
36
+ /** Disable the input */
37
+ disabled?: boolean;
38
+ /** Required field */
39
+ required?: boolean;
40
+ /** Form field name for form submission */
41
+ name?: string;
42
+ /** Checked state for checkbox inputs */
43
+ checked?: boolean;
44
+ currency?: string;
45
+ locale?: string;
46
+ precision?: string | number;
47
+ /** Debounce in milliseconds (0-5000) */
48
+ debounce?: number;
49
+ /**
50
+ * Fires on every keystroke (React convention)
51
+ * Maps to native 'input' event from ty-input
52
+ */
53
+ onChange?: (event: CustomEvent<TyInputEventDetail>) => void;
54
+ /**
55
+ * Fires on blur if value changed (native DOM behavior)
56
+ * Maps to native 'change' event from ty-input
57
+ */
58
+ onChangeCommit?: (event: CustomEvent<TyInputEventDetail>) => void;
59
+ /** Standard focus event */
60
+ onFocus?: (event: FocusEvent) => void;
61
+ /** Standard blur event */
62
+ onBlur?: (event: FocusEvent) => void;
63
+ }
64
+ export declare const TyInput: React.ForwardRefExoticComponent<TyInputProps & React.RefAttributes<HTMLElement>>;
65
+ //# sourceMappingURL=TyInput.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TyInput.d.ts","sourceRoot":"","sources":["../../src/components/TyInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAK9D,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,GAAG,CAAC;IACX,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,KAAK,CAAC;CACtB;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,aAAa;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,wBAAwB,CAAC,EAAE,MAAM,CAAC;CACnC;AAGD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxH,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,GACxE,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;IAErC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IAEhF,iBAAiB;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAExC,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IAE5D;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IAElE,2BAA2B;IAC3B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAEtC,0BAA0B;IAC1B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC;AAMD,eAAO,MAAM,OAAO,kFA8InB,CAAC"}