tyrell-react 1.0.0-RC6

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 (144) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +410 -0
  3. package/dist/components/TyButton.d.ts +50 -0
  4. package/dist/components/TyButton.d.ts.map +1 -0
  5. package/dist/components/TyButton.js +68 -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 +127 -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 +83 -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 +42 -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 +119 -0
  30. package/dist/components/TyDatePicker.js.map +1 -0
  31. package/dist/components/TyDropdown.d.ts +56 -0
  32. package/dist/components/TyDropdown.d.ts.map +1 -0
  33. package/dist/components/TyDropdown.js +110 -0
  34. package/dist/components/TyDropdown.js.map +1 -0
  35. package/dist/components/TyIcon.d.ts +17 -0
  36. package/dist/components/TyIcon.d.ts.map +1 -0
  37. package/dist/components/TyIcon.js +41 -0
  38. package/dist/components/TyIcon.js.map +1 -0
  39. package/dist/components/TyInput.d.ts +65 -0
  40. package/dist/components/TyInput.d.ts.map +1 -0
  41. package/dist/components/TyInput.js +127 -0
  42. package/dist/components/TyInput.js.map +1 -0
  43. package/dist/components/TyModal.d.ts +29 -0
  44. package/dist/components/TyModal.d.ts.map +1 -0
  45. package/dist/components/TyModal.js +74 -0
  46. package/dist/components/TyModal.js.map +1 -0
  47. package/dist/components/TyMultiselect.d.ts +51 -0
  48. package/dist/components/TyMultiselect.d.ts.map +1 -0
  49. package/dist/components/TyMultiselect.js +107 -0
  50. package/dist/components/TyMultiselect.js.map +1 -0
  51. package/dist/components/TyOption.d.ts +10 -0
  52. package/dist/components/TyOption.d.ts.map +1 -0
  53. package/dist/components/TyOption.js +25 -0
  54. package/dist/components/TyOption.js.map +1 -0
  55. package/dist/components/TyPopup.d.ts +24 -0
  56. package/dist/components/TyPopup.d.ts.map +1 -0
  57. package/dist/components/TyPopup.js +61 -0
  58. package/dist/components/TyPopup.js.map +1 -0
  59. package/dist/components/TyRadio.d.ts +20 -0
  60. package/dist/components/TyRadio.d.ts.map +1 -0
  61. package/dist/components/TyRadio.js +46 -0
  62. package/dist/components/TyRadio.js.map +1 -0
  63. package/dist/components/TyRadioGroup.d.ts +40 -0
  64. package/dist/components/TyRadioGroup.d.ts.map +1 -0
  65. package/dist/components/TyRadioGroup.js +58 -0
  66. package/dist/components/TyRadioGroup.js.map +1 -0
  67. package/dist/components/TyResizeObserver.d.ts +11 -0
  68. package/dist/components/TyResizeObserver.d.ts.map +1 -0
  69. package/dist/components/TyResizeObserver.js +28 -0
  70. package/dist/components/TyResizeObserver.js.map +1 -0
  71. package/dist/components/TyScrollContainer.d.ts +25 -0
  72. package/dist/components/TyScrollContainer.d.ts.map +1 -0
  73. package/dist/components/TyScrollContainer.js +43 -0
  74. package/dist/components/TyScrollContainer.js.map +1 -0
  75. package/dist/components/TyStep.d.ts +17 -0
  76. package/dist/components/TyStep.d.ts.map +1 -0
  77. package/dist/components/TyStep.js +35 -0
  78. package/dist/components/TyStep.js.map +1 -0
  79. package/dist/components/TySwitch.d.ts +35 -0
  80. package/dist/components/TySwitch.d.ts.map +1 -0
  81. package/dist/components/TySwitch.js +69 -0
  82. package/dist/components/TySwitch.js.map +1 -0
  83. package/dist/components/TyTab.d.ts +13 -0
  84. package/dist/components/TyTab.d.ts.map +1 -0
  85. package/dist/components/TyTab.js +32 -0
  86. package/dist/components/TyTab.js.map +1 -0
  87. package/dist/components/TyTabs.d.ts +23 -0
  88. package/dist/components/TyTabs.d.ts.map +1 -0
  89. package/dist/components/TyTabs.js +48 -0
  90. package/dist/components/TyTabs.js.map +1 -0
  91. package/dist/components/TyTag.d.ts +22 -0
  92. package/dist/components/TyTag.d.ts.map +1 -0
  93. package/dist/components/TyTag.js +45 -0
  94. package/dist/components/TyTag.js.map +1 -0
  95. package/dist/components/TyTextarea.d.ts +37 -0
  96. package/dist/components/TyTextarea.d.ts.map +1 -0
  97. package/dist/components/TyTextarea.js +113 -0
  98. package/dist/components/TyTextarea.js.map +1 -0
  99. package/dist/components/TyTooltip.d.ts +17 -0
  100. package/dist/components/TyTooltip.d.ts.map +1 -0
  101. package/dist/components/TyTooltip.js +40 -0
  102. package/dist/components/TyTooltip.js.map +1 -0
  103. package/dist/components/TyWizard.d.ts +26 -0
  104. package/dist/components/TyWizard.d.ts.map +1 -0
  105. package/dist/components/TyWizard.js +50 -0
  106. package/dist/components/TyWizard.js.map +1 -0
  107. package/dist/components/index.d.ts +105 -0
  108. package/dist/components/index.d.ts.map +1 -0
  109. package/dist/components/index.js +112 -0
  110. package/dist/components/index.js.map +1 -0
  111. package/dist/utils/react-version.d.ts +2 -0
  112. package/dist/utils/react-version.d.ts.map +1 -0
  113. package/dist/utils/react-version.js +8 -0
  114. package/dist/utils/react-version.js.map +1 -0
  115. package/package.json +46 -0
  116. package/src/components/EventConventionTest.tsx +155 -0
  117. package/src/components/TyButton.tsx +145 -0
  118. package/src/components/TyCalendar.tsx +248 -0
  119. package/src/components/TyCalendarMonth.tsx +108 -0
  120. package/src/components/TyCalendarNavigation.tsx +91 -0
  121. package/src/components/TyCheckbox.tsx +152 -0
  122. package/src/components/TyCopy.tsx +78 -0
  123. package/src/components/TyDatePicker.tsx +220 -0
  124. package/src/components/TyDropdown.tsx +225 -0
  125. package/src/components/TyIcon.tsx +72 -0
  126. package/src/components/TyInput.tsx +232 -0
  127. package/src/components/TyModal.tsx +142 -0
  128. package/src/components/TyMultiselect.tsx +203 -0
  129. package/src/components/TyOption.tsx +42 -0
  130. package/src/components/TyPopup.tsx +111 -0
  131. package/src/components/TyRadio.tsx +70 -0
  132. package/src/components/TyRadioGroup.tsx +121 -0
  133. package/src/components/TyResizeObserver.tsx +54 -0
  134. package/src/components/TyScrollContainer.tsx +87 -0
  135. package/src/components/TyStep.tsx +71 -0
  136. package/src/components/TySwitch.tsx +122 -0
  137. package/src/components/TyTab.tsx +63 -0
  138. package/src/components/TyTabs.tsx +93 -0
  139. package/src/components/TyTag.tsx +79 -0
  140. package/src/components/TyTextarea.tsx +177 -0
  141. package/src/components/TyTooltip.tsx +83 -0
  142. package/src/components/TyWizard.tsx +99 -0
  143. package/src/components/index.ts +251 -0
  144. package/src/utils/react-version.ts +8 -0
@@ -0,0 +1,119 @@
1
+ import React, { useEffect, useRef, useCallback } from 'react';
2
+ import { needsPropertyBridge } from '../utils/react-version';
3
+ // React wrapper for ty-date-picker web component
4
+ export const TyDatePicker = React.forwardRef(({ value, size, flavor, label, placeholder, required, disabled, name, clearable, format, locale, withTime, onChange, onOpen, onClose, ...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
+ // Sync value property with the web component.
18
+ // React 18 workaround: prop-to-property bridging is unreliable for empty
19
+ // strings on custom elements. React 19+ handles this natively.
20
+ useEffect(() => {
21
+ if (!needsPropertyBridge)
22
+ return;
23
+ const element = elementRef.current;
24
+ if (element && value !== undefined) {
25
+ // Set the value property directly on the element
26
+ element.value = value || '';
27
+ }
28
+ }, [value]);
29
+ // Handle change events
30
+ const handleChange = useCallback((event) => {
31
+ const customEvent = event;
32
+ if (onChange) {
33
+ onChange(customEvent);
34
+ }
35
+ }, [onChange]);
36
+ // Handle open events
37
+ const handleOpen = useCallback((event) => {
38
+ const customEvent = event;
39
+ if (onOpen) {
40
+ onOpen(customEvent);
41
+ }
42
+ }, [onOpen]);
43
+ // Handle close events
44
+ const handleClose = useCallback((event) => {
45
+ const customEvent = event;
46
+ if (onClose) {
47
+ onClose(customEvent);
48
+ }
49
+ }, [onClose]);
50
+ // Set up event listeners
51
+ useEffect(() => {
52
+ const element = elementRef.current;
53
+ if (!element)
54
+ return;
55
+ const listeners = [];
56
+ if (onChange) {
57
+ element.addEventListener('change', handleChange);
58
+ listeners.push(['change', handleChange]);
59
+ }
60
+ if (onOpen) {
61
+ element.addEventListener('open', handleOpen);
62
+ listeners.push(['open', handleOpen]);
63
+ }
64
+ if (onClose) {
65
+ element.addEventListener('close', handleClose);
66
+ listeners.push(['close', handleClose]);
67
+ }
68
+ return () => {
69
+ listeners.forEach(([eventName, handler]) => {
70
+ element.removeEventListener(eventName, handler);
71
+ });
72
+ };
73
+ }, [handleChange, handleOpen, handleClose, onChange, onOpen, onClose]);
74
+ // Convert React props to web component attributes
75
+ const webComponentProps = {
76
+ ...props,
77
+ ref: elementRef,
78
+ };
79
+ // Add optional attributes only if they have values
80
+ if (value !== undefined) {
81
+ webComponentProps.value = value;
82
+ }
83
+ if (size) {
84
+ webComponentProps.size = size;
85
+ }
86
+ if (flavor) {
87
+ webComponentProps.flavor = flavor;
88
+ }
89
+ if (label) {
90
+ webComponentProps.label = label;
91
+ }
92
+ if (placeholder) {
93
+ webComponentProps.placeholder = placeholder;
94
+ }
95
+ if (required) {
96
+ webComponentProps.required = ''; // Boolean attributes as empty string
97
+ }
98
+ if (disabled) {
99
+ webComponentProps.disabled = ''; // Boolean attributes as empty string
100
+ }
101
+ if (name) {
102
+ webComponentProps.name = name;
103
+ }
104
+ if (clearable) {
105
+ webComponentProps.clearable = ''; // Boolean attributes as empty string
106
+ }
107
+ if (format) {
108
+ webComponentProps.format = format;
109
+ }
110
+ if (locale) {
111
+ webComponentProps.locale = locale;
112
+ }
113
+ if (withTime) {
114
+ webComponentProps['with-time'] = ''; // Convert camelCase to kebab-case
115
+ }
116
+ return React.createElement('ty-date-picker', webComponentProps);
117
+ });
118
+ TyDatePicker.displayName = 'TyDatePicker';
119
+ //# 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,56 @@
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
+ /** Make dropdown readonly */
25
+ readonly?: boolean;
26
+ /** Required field */
27
+ required?: boolean;
28
+ /** Show clear button */
29
+ clearable?: boolean;
30
+ /** Disable clear button (alias for clearable={false}) */
31
+ notClearable?: boolean;
32
+ /** Debounce in milliseconds (0-5000) */
33
+ debounce?: number;
34
+ /**
35
+ * Switch to external (remote) search mode. Default is `false` — the dropdown
36
+ * filters its options locally. When `true`, the dropdown stops filtering and
37
+ * dispatches `search` events on each keystroke; the parent owns filtering
38
+ * and updates the children.
39
+ */
40
+ externalSearch?: boolean;
41
+ /** @deprecated Use `externalSearch` instead. */
42
+ notSearchable?: boolean;
43
+ /** @deprecated Use `externalSearch` instead. Pass `searchable={false}` was equivalent to `externalSearch={true}`. */
44
+ searchable?: boolean;
45
+ /** Form field name for form submission */
46
+ name?: string;
47
+ options?: OptionData[];
48
+ onChange?: (event: CustomEvent<TyDropdownEventDetail>) => void;
49
+ onSearch?: (event: CustomEvent<{
50
+ query: string;
51
+ element: HTMLElement;
52
+ }>) => void;
53
+ children?: React.ReactNode;
54
+ }
55
+ export declare const TyDropdown: React.ForwardRefExoticComponent<TyDropdownProps & React.RefAttributes<HTMLElement>>;
56
+ //# 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;AAI9D,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,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,qFA8ItB,CAAC"}
@@ -0,0 +1,110 @@
1
+ import React, { useEffect, useRef, useCallback } from 'react';
2
+ import { needsPropertyBridge } from '../utils/react-version';
3
+ // React wrapper for ty-dropdown web component
4
+ export const TyDropdown = React.forwardRef(({ options, children, onChange, onSearch, disabled, externalSearch, notSearchable, searchable, clearable, notClearable, debounce, name, value, ...props }, ref) => {
5
+ const elementRef = useRef(null);
6
+ const handleChange = useCallback((event) => {
7
+ if (onChange) {
8
+ onChange(event);
9
+ }
10
+ }, [onChange]);
11
+ const handleSearch = useCallback((event) => {
12
+ if (onSearch) {
13
+ onSearch(event);
14
+ }
15
+ }, [onSearch]);
16
+ useEffect(() => {
17
+ const element = elementRef.current;
18
+ if (!element)
19
+ return;
20
+ // Listen for custom events from ty-dropdown
21
+ if (onChange) {
22
+ element.addEventListener('change', handleChange);
23
+ }
24
+ if (onSearch) {
25
+ element.addEventListener('search', handleSearch);
26
+ }
27
+ return () => {
28
+ if (onChange) {
29
+ element.removeEventListener('change', handleChange);
30
+ }
31
+ if (onSearch) {
32
+ element.removeEventListener('search', handleSearch);
33
+ }
34
+ };
35
+ }, [handleChange, handleSearch, onChange, onSearch]);
36
+ // Imperatively sync `value` to the underlying element's property whenever
37
+ // it changes. React 18's prop-to-property bridging for custom elements is
38
+ // unreliable for empty strings (programmatic resets), so we set the
39
+ // property directly to guarantee the dropdown clears on `value=""`.
40
+ // React 19+ handles this natively, so the effect short-circuits there.
41
+ useEffect(() => {
42
+ if (!needsPropertyBridge)
43
+ return;
44
+ const element = elementRef.current;
45
+ if (!element)
46
+ return;
47
+ if (element.value !== value) {
48
+ element.value = value ?? '';
49
+ }
50
+ }, [value]);
51
+ // Handle ref forwarding
52
+ useEffect(() => {
53
+ if (ref && elementRef.current) {
54
+ if (typeof ref === 'function') {
55
+ ref(elementRef.current);
56
+ }
57
+ else {
58
+ ref.current = elementRef.current;
59
+ }
60
+ }
61
+ }, [ref]);
62
+ // Render options from data if provided, otherwise use children
63
+ const renderContent = () => {
64
+ if (options && options.length > 0) {
65
+ // Data-driven approach - create ty-option elements
66
+ return options.map((option, index) => React.createElement('ty-option', {
67
+ key: option.value || index,
68
+ value: option.value,
69
+ ...(option.disabled && { disabled: "" }),
70
+ }, option.text));
71
+ }
72
+ // Slotted approach - use provided children
73
+ return children;
74
+ };
75
+ // Convert React props to web component attributes
76
+ const webComponentProps = {
77
+ ...props,
78
+ ref: elementRef,
79
+ };
80
+ // Add conditional attributes
81
+ if (disabled)
82
+ webComponentProps.disabled = '';
83
+ // External search mode: parent owns filtering, dropdown dispatches search events.
84
+ // `notSearchable` and `searchable={false}` are deprecated aliases for `externalSearch`.
85
+ if (externalSearch || notSearchable || searchable === false) {
86
+ webComponentProps['external-search'] = '';
87
+ }
88
+ // Handle clearable functionality
89
+ if (clearable !== undefined) {
90
+ if (clearable) {
91
+ webComponentProps.clearable = '';
92
+ }
93
+ else {
94
+ webComponentProps['not-clearable'] = '';
95
+ }
96
+ }
97
+ if (notClearable) {
98
+ webComponentProps['not-clearable'] = '';
99
+ }
100
+ // Add debounce attribute
101
+ if (debounce !== undefined) {
102
+ webComponentProps.debounce = debounce;
103
+ }
104
+ // Add string attributes
105
+ if (name)
106
+ webComponentProps.name = name;
107
+ return React.createElement('ty-dropdown', webComponentProps, renderContent());
108
+ });
109
+ TyDropdown.displayName = 'TyDropdown';
110
+ //# 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,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;AAGjD,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,iFA6ClB,CAAC"}
@@ -0,0 +1,41 @@
1
+ import React, { useEffect, useRef } from 'react';
2
+ // React wrapper for ty-icon web component
3
+ export const TyIcon = React.forwardRef(({ name, size, spin, pulse, tempo, className, ...props }, ref) => {
4
+ const elementRef = useRef(null);
5
+ // Handle ref forwarding
6
+ useEffect(() => {
7
+ if (ref && elementRef.current) {
8
+ if (typeof ref === 'function') {
9
+ ref(elementRef.current);
10
+ }
11
+ else {
12
+ ref.current = elementRef.current;
13
+ }
14
+ }
15
+ }, [ref]);
16
+ // Convert React props to web component attributes
17
+ const webComponentProps = {
18
+ ...props,
19
+ name,
20
+ ref: elementRef,
21
+ };
22
+ // Add optional attributes only if they have values
23
+ if (size) {
24
+ webComponentProps.size = size;
25
+ }
26
+ if (spin) {
27
+ webComponentProps.spin = ''; // Boolean attributes as empty string
28
+ }
29
+ if (pulse) {
30
+ webComponentProps.pulse = ''; // Boolean attributes as empty string
31
+ }
32
+ if (tempo) {
33
+ webComponentProps.tempo = tempo;
34
+ }
35
+ if (className) {
36
+ webComponentProps.class = className; // HTML attribute is 'class', not 'className'
37
+ }
38
+ return React.createElement('ty-icon', webComponentProps);
39
+ });
40
+ TyIcon.displayName = 'TyIcon';
41
+ //# 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;AAuBjD,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,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,IAAI,EAAE,CAAC;QACT,iBAAiB,CAAC,IAAI,GAAG,EAAE,CAAC,CAAE,qCAAqC;IACrE,CAAC;IAED,IAAI,KAAK,EAAE,CAAC;QACV,iBAAiB,CAAC,KAAK,GAAG,EAAE,CAAC,CAAE,qCAAqC;IACtE,CAAC;IAED,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;AAI9D,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,kFAwInB,CAAC"}
@@ -0,0 +1,127 @@
1
+ import React, { useEffect, useRef, useCallback } from 'react';
2
+ import { needsPropertyBridge } from '../utils/react-version';
3
+ // One-time global warning flags so we don't spam the console.
4
+ let _warnedOnInputProp = false;
5
+ // React wrapper for ty-input web component
6
+ export const TyInput = React.forwardRef(({ onChange, onChangeCommit, onFocus, onBlur, disabled, name, checked, debounce, ...props }, ref) => {
7
+ const elementRef = useRef(null);
8
+ // Catch the most common mistake: passing `onInput` (React's prop) instead
9
+ // of `onChange` (our wrapper's prop). React's synthetic-event system
10
+ // strips event.detail, so the user's handler crashes on `e.detail.value`.
11
+ // Forward to onChange and log a one-shot warning.
12
+ const onInputProp = props.onInput;
13
+ if (onInputProp && !onChange) {
14
+ if (!_warnedOnInputProp) {
15
+ _warnedOnInputProp = true;
16
+ console.warn('[tyrell-react] <TyInput> received `onInput`. ' +
17
+ 'React strips event.detail; use `onChange` instead — it receives the raw CustomEvent. ' +
18
+ 'Forwarding for now, but please rename the prop.');
19
+ }
20
+ onChange = onInputProp;
21
+ }
22
+ // Either way, drop onInput from spread so React doesn't double-wire it.
23
+ delete props.onInput;
24
+ // Map onChange to input event (React convention)
25
+ const handleInput = useCallback((event) => {
26
+ if (onChange) {
27
+ onChange(event);
28
+ }
29
+ }, [onChange]);
30
+ // Map onChangeCommit to change event (blur behavior)
31
+ const handleChangeCommit = useCallback((event) => {
32
+ if (onChangeCommit) {
33
+ onChangeCommit(event);
34
+ }
35
+ }, [onChangeCommit]);
36
+ const handleFocus = useCallback((event) => {
37
+ if (onFocus) {
38
+ onFocus(event);
39
+ }
40
+ }, [onFocus]);
41
+ const handleBlur = useCallback((event) => {
42
+ if (onBlur) {
43
+ onBlur(event);
44
+ }
45
+ }, [onBlur]);
46
+ useEffect(() => {
47
+ const element = elementRef.current;
48
+ if (!element)
49
+ return;
50
+ // Listen for custom input/change events from ty-input
51
+ // Map onChange → input event (React convention)
52
+ if (onChange) {
53
+ element.addEventListener('input', handleInput);
54
+ }
55
+ // Map onChangeCommit → change event (blur behavior)
56
+ if (onChangeCommit) {
57
+ element.addEventListener('change', handleChangeCommit);
58
+ }
59
+ // Listen for standard focus/blur events
60
+ if (onFocus) {
61
+ element.addEventListener('focus', handleFocus);
62
+ }
63
+ if (onBlur) {
64
+ element.addEventListener('blur', handleBlur);
65
+ }
66
+ return () => {
67
+ if (onChange) {
68
+ element.removeEventListener('input', handleInput);
69
+ }
70
+ if (onChangeCommit) {
71
+ element.removeEventListener('change', handleChangeCommit);
72
+ }
73
+ if (onFocus) {
74
+ element.removeEventListener('focus', handleFocus);
75
+ }
76
+ if (onBlur) {
77
+ element.removeEventListener('blur', handleBlur);
78
+ }
79
+ };
80
+ }, [handleInput, handleChangeCommit, handleFocus, handleBlur, onChange, onChangeCommit, onFocus, onBlur]);
81
+ // Handle ref forwarding
82
+ useEffect(() => {
83
+ if (ref && elementRef.current) {
84
+ if (typeof ref === 'function') {
85
+ ref(elementRef.current);
86
+ }
87
+ else {
88
+ ref.current = elementRef.current;
89
+ }
90
+ }
91
+ }, [ref]);
92
+ // Imperatively sync `value` to the underlying element's property whenever
93
+ // the React prop changes. React 18's prop-to-property bridging for custom
94
+ // elements is unreliable for empty strings, so we set the property directly
95
+ // to guarantee resets (`value=""`) clear the visible content. React 19+
96
+ // handles this natively, so the effect short-circuits there.
97
+ useEffect(() => {
98
+ if (!needsPropertyBridge)
99
+ return;
100
+ const element = elementRef.current;
101
+ if (!element)
102
+ return;
103
+ const next = props.value ?? '';
104
+ if (element.value !== next) {
105
+ element.value = next;
106
+ }
107
+ }, [props.value]);
108
+ // Convert React props to web component attributes
109
+ const webComponentProps = {
110
+ ...props,
111
+ ref: elementRef,
112
+ };
113
+ // Add conditional attributes
114
+ if (disabled)
115
+ webComponentProps.disabled = '';
116
+ if (checked)
117
+ webComponentProps.checked = '';
118
+ // Add string attributes
119
+ if (name)
120
+ webComponentProps.name = name;
121
+ // Add debounce attribute
122
+ if (debounce !== undefined)
123
+ webComponentProps.debounce = debounce;
124
+ return React.createElement('ty-input', webComponentProps);
125
+ });
126
+ TyInput.displayName = 'TyInput';
127
+ //# sourceMappingURL=TyInput.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TyInput.js","sourceRoot":"","sources":["../../src/components/TyInput.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,29 @@
1
+ import React from 'react';
2
+ export interface TyModalEventDetail {
3
+ reason?: 'programmatic' | 'native' | 'backdrop' | 'escape' | 'close-button';
4
+ returnValue?: string;
5
+ }
6
+ export interface TyModalProps extends React.HTMLAttributes<HTMLElement> {
7
+ /** Controls modal visibility */
8
+ open?: boolean;
9
+ /** Show backdrop behind modal (default: true) */
10
+ backdrop?: boolean;
11
+ /** Allow closing modal by clicking backdrop (default: true) */
12
+ closeOnOutsideClick?: boolean;
13
+ /** Allow closing modal with Escape key (default: true) */
14
+ closeOnEscape?: boolean;
15
+ /** Require confirmation before closing when there are unsaved changes */
16
+ protected?: boolean;
17
+ /** React event handlers */
18
+ onOpen?: (event: CustomEvent<TyModalEventDetail>) => void;
19
+ onClose?: (event: CustomEvent<TyModalEventDetail>) => void;
20
+ /** Modal content */
21
+ children?: React.ReactNode;
22
+ }
23
+ export interface TyModalRef {
24
+ show: () => void;
25
+ hide: () => void;
26
+ element: HTMLElement | null;
27
+ }
28
+ export declare const TyModal: React.ForwardRefExoticComponent<TyModalProps & React.RefAttributes<TyModalRef>>;
29
+ //# sourceMappingURL=TyModal.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TyModal.d.ts","sourceRoot":"","sources":["../../src/components/TyModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAGtE,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,cAAc,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,cAAc,CAAC;IAC5E,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAGD,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACrE,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,+DAA+D;IAC/D,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,0DAA0D;IAC1D,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,yEAAyE;IACzE,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IAC1D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IAE3D,oBAAoB;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;CAC7B;AAGD,eAAO,MAAM,OAAO,iFAkGnB,CAAC"}