tyrell-react 1.0.0-TC10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +410 -0
- package/dist/components/TyButton.d.ts +50 -0
- package/dist/components/TyButton.d.ts.map +1 -0
- package/dist/components/TyButton.js +68 -0
- package/dist/components/TyButton.js.map +1 -0
- package/dist/components/TyCalendar.d.ts +63 -0
- package/dist/components/TyCalendar.d.ts.map +1 -0
- package/dist/components/TyCalendar.js +122 -0
- package/dist/components/TyCalendar.js.map +1 -0
- package/dist/components/TyCalendarMonth.d.ts +32 -0
- package/dist/components/TyCalendarMonth.d.ts.map +1 -0
- package/dist/components/TyCalendarMonth.js +54 -0
- package/dist/components/TyCalendarMonth.js.map +1 -0
- package/dist/components/TyCalendarNavigation.d.ts +21 -0
- package/dist/components/TyCalendarNavigation.d.ts.map +1 -0
- package/dist/components/TyCalendarNavigation.js +50 -0
- package/dist/components/TyCalendarNavigation.js.map +1 -0
- package/dist/components/TyCheckbox.d.ts +39 -0
- package/dist/components/TyCheckbox.d.ts.map +1 -0
- package/dist/components/TyCheckbox.js +79 -0
- package/dist/components/TyCheckbox.js.map +1 -0
- package/dist/components/TyCopy.d.ts +21 -0
- package/dist/components/TyCopy.d.ts.map +1 -0
- package/dist/components/TyCopy.js +42 -0
- package/dist/components/TyCopy.js.map +1 -0
- package/dist/components/TyDatePicker.d.ts +45 -0
- package/dist/components/TyDatePicker.d.ts.map +1 -0
- package/dist/components/TyDatePicker.js +114 -0
- package/dist/components/TyDatePicker.js.map +1 -0
- package/dist/components/TyDropdown.d.ts +51 -0
- package/dist/components/TyDropdown.d.ts.map +1 -0
- package/dist/components/TyDropdown.js +109 -0
- package/dist/components/TyDropdown.js.map +1 -0
- package/dist/components/TyIcon.d.ts +17 -0
- package/dist/components/TyIcon.d.ts.map +1 -0
- package/dist/components/TyIcon.js +41 -0
- package/dist/components/TyIcon.js.map +1 -0
- package/dist/components/TyInput.d.ts +65 -0
- package/dist/components/TyInput.d.ts.map +1 -0
- package/dist/components/TyInput.js +105 -0
- package/dist/components/TyInput.js.map +1 -0
- package/dist/components/TyModal.d.ts +29 -0
- package/dist/components/TyModal.d.ts.map +1 -0
- package/dist/components/TyModal.js +74 -0
- package/dist/components/TyModal.js.map +1 -0
- package/dist/components/TyMultiselect.d.ts +51 -0
- package/dist/components/TyMultiselect.d.ts.map +1 -0
- package/dist/components/TyMultiselect.js +103 -0
- package/dist/components/TyMultiselect.js.map +1 -0
- package/dist/components/TyOption.d.ts +10 -0
- package/dist/components/TyOption.d.ts.map +1 -0
- package/dist/components/TyOption.js +25 -0
- package/dist/components/TyOption.js.map +1 -0
- package/dist/components/TyPopup.d.ts +24 -0
- package/dist/components/TyPopup.d.ts.map +1 -0
- package/dist/components/TyPopup.js +61 -0
- package/dist/components/TyPopup.js.map +1 -0
- package/dist/components/TyRadio.d.ts +20 -0
- package/dist/components/TyRadio.d.ts.map +1 -0
- package/dist/components/TyRadio.js +31 -0
- package/dist/components/TyRadio.js.map +1 -0
- package/dist/components/TyRadioGroup.d.ts +40 -0
- package/dist/components/TyRadioGroup.d.ts.map +1 -0
- package/dist/components/TyRadioGroup.js +58 -0
- package/dist/components/TyRadioGroup.js.map +1 -0
- package/dist/components/TyResizeObserver.d.ts +11 -0
- package/dist/components/TyResizeObserver.d.ts.map +1 -0
- package/dist/components/TyResizeObserver.js +28 -0
- package/dist/components/TyResizeObserver.js.map +1 -0
- package/dist/components/TyScrollContainer.d.ts +25 -0
- package/dist/components/TyScrollContainer.d.ts.map +1 -0
- package/dist/components/TyScrollContainer.js +43 -0
- package/dist/components/TyScrollContainer.js.map +1 -0
- package/dist/components/TyStep.d.ts +17 -0
- package/dist/components/TyStep.d.ts.map +1 -0
- package/dist/components/TyStep.js +35 -0
- package/dist/components/TyStep.js.map +1 -0
- package/dist/components/TySwitch.d.ts +35 -0
- package/dist/components/TySwitch.d.ts.map +1 -0
- package/dist/components/TySwitch.js +54 -0
- package/dist/components/TySwitch.js.map +1 -0
- package/dist/components/TyTab.d.ts +13 -0
- package/dist/components/TyTab.d.ts.map +1 -0
- package/dist/components/TyTab.js +32 -0
- package/dist/components/TyTab.js.map +1 -0
- package/dist/components/TyTabs.d.ts +23 -0
- package/dist/components/TyTabs.d.ts.map +1 -0
- package/dist/components/TyTabs.js +48 -0
- package/dist/components/TyTabs.js.map +1 -0
- package/dist/components/TyTag.d.ts +22 -0
- package/dist/components/TyTag.d.ts.map +1 -0
- package/dist/components/TyTag.js +45 -0
- package/dist/components/TyTag.js.map +1 -0
- package/dist/components/TyTextarea.d.ts +37 -0
- package/dist/components/TyTextarea.d.ts.map +1 -0
- package/dist/components/TyTextarea.js +93 -0
- package/dist/components/TyTextarea.js.map +1 -0
- package/dist/components/TyTooltip.d.ts +17 -0
- package/dist/components/TyTooltip.d.ts.map +1 -0
- package/dist/components/TyTooltip.js +40 -0
- package/dist/components/TyTooltip.js.map +1 -0
- package/dist/components/TyWizard.d.ts +26 -0
- package/dist/components/TyWizard.d.ts.map +1 -0
- package/dist/components/TyWizard.js +50 -0
- package/dist/components/TyWizard.js.map +1 -0
- package/dist/components/index.d.ts +105 -0
- package/dist/components/index.d.ts.map +1 -0
- package/dist/components/index.js +112 -0
- package/dist/components/index.js.map +1 -0
- package/package.json +46 -0
- package/src/components/EventConventionTest.tsx +155 -0
- package/src/components/TyButton.tsx +145 -0
- package/src/components/TyCalendar.tsx +244 -0
- package/src/components/TyCalendarMonth.tsx +108 -0
- package/src/components/TyCalendarNavigation.tsx +91 -0
- package/src/components/TyCheckbox.tsx +149 -0
- package/src/components/TyCopy.tsx +78 -0
- package/src/components/TyDatePicker.tsx +216 -0
- package/src/components/TyDropdown.tsx +218 -0
- package/src/components/TyIcon.tsx +72 -0
- package/src/components/TyInput.tsx +207 -0
- package/src/components/TyModal.tsx +142 -0
- package/src/components/TyMultiselect.tsx +200 -0
- package/src/components/TyOption.tsx +42 -0
- package/src/components/TyPopup.tsx +111 -0
- package/src/components/TyRadio.tsx +56 -0
- package/src/components/TyRadioGroup.tsx +121 -0
- package/src/components/TyResizeObserver.tsx +54 -0
- package/src/components/TyScrollContainer.tsx +87 -0
- package/src/components/TyStep.tsx +71 -0
- package/src/components/TySwitch.tsx +108 -0
- package/src/components/TyTab.tsx +63 -0
- package/src/components/TyTabs.tsx +93 -0
- package/src/components/TyTag.tsx +79 -0
- package/src/components/TyTextarea.tsx +154 -0
- package/src/components/TyTooltip.tsx +83 -0
- package/src/components/TyWizard.tsx +99 -0
- package/src/components/index.ts +251 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TyModal.js","sourceRoot":"","sources":["../../src/components/TyModal.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface TyMultiselectEventDetail {
|
|
3
|
+
/** Array of currently selected values */
|
|
4
|
+
values: string[];
|
|
5
|
+
/** Action that triggered the change: "add" | "remove" */
|
|
6
|
+
action: 'add' | 'remove';
|
|
7
|
+
/** The specific item that was added or removed */
|
|
8
|
+
item: string;
|
|
9
|
+
}
|
|
10
|
+
export interface TyMultiselectProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'style'> {
|
|
11
|
+
style?: import('./TyInput').TyInputCSSProperties;
|
|
12
|
+
/** Current selected values as comma-separated string or array */
|
|
13
|
+
value?: string | string[];
|
|
14
|
+
/** Placeholder text when no items are selected */
|
|
15
|
+
placeholder?: string;
|
|
16
|
+
/** Disable the multiselect component */
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
/** Make the multiselect read-only */
|
|
19
|
+
readonly?: boolean;
|
|
20
|
+
/** Semantic styling variant */
|
|
21
|
+
flavor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
|
|
22
|
+
/** Label text for the multiselect */
|
|
23
|
+
label?: string;
|
|
24
|
+
/** Mark the field as required */
|
|
25
|
+
required?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Switch to external (remote) search mode. Default is `false` — the
|
|
28
|
+
* multiselect filters its own children client-side. Set to `true` when you
|
|
29
|
+
* want to handle filtering yourself (e.g. server-side): the component will
|
|
30
|
+
* dispatch `search` events on each keystroke, and you must update the children
|
|
31
|
+
* in response. The `onSearch` prop receives those events.
|
|
32
|
+
*/
|
|
33
|
+
externalSearch?: boolean;
|
|
34
|
+
/** Debounce in milliseconds (0-5000) */
|
|
35
|
+
debounce?: number;
|
|
36
|
+
/** Mobile section label for selected items */
|
|
37
|
+
selectedLabel?: string;
|
|
38
|
+
/** Form field name for form submission */
|
|
39
|
+
name?: string;
|
|
40
|
+
/** Callback when selection changes */
|
|
41
|
+
onChange?: (event: CustomEvent<TyMultiselectEventDetail>) => void;
|
|
42
|
+
/** Callback fired on each search input change (debounced by `debounce`). Use for external/server-side filtering. */
|
|
43
|
+
onSearch?: (event: CustomEvent<{
|
|
44
|
+
query: string;
|
|
45
|
+
element: HTMLElement;
|
|
46
|
+
}>) => void;
|
|
47
|
+
/** Children should be TyTag components, not TyOption */
|
|
48
|
+
children?: React.ReactNode;
|
|
49
|
+
}
|
|
50
|
+
export declare const TyMultiselect: React.ForwardRefExoticComponent<TyMultiselectProps & React.RefAttributes<HTMLElement>>;
|
|
51
|
+
//# sourceMappingURL=TyMultiselect.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TyMultiselect.d.ts","sourceRoot":"","sources":["../../src/components/TyMultiselect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAG9D,MAAM,WAAW,wBAAwB;IACvC,yCAAyC;IACzC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,yDAAyD;IACzD,MAAM,EAAE,KAAK,GAAG,QAAQ,CAAC;IACzB,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACvG,KAAK,CAAC,EAAE,OAAO,WAAW,EAAE,oBAAoB,CAAC;IACjD,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAE1B,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IAEhF,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,wBAAwB,CAAC,KAAK,IAAI,CAAC;IAElE,oHAAoH;IACpH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,WAAW,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAEjF,wDAAwD;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,eAAO,MAAM,aAAa,wFAqIzB,CAAC"}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import React, { useEffect, useRef, useCallback } from 'react';
|
|
2
|
+
// React wrapper for ty-multiselect web component
|
|
3
|
+
export const TyMultiselect = React.forwardRef(({ value, placeholder, disabled, readonly, flavor, label, required, externalSearch, debounce, selectedLabel, name, onChange, onSearch, children, ...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
|
+
// Imperatively sync `value` to the underlying property so resets
|
|
17
|
+
// (`value=""` or null) reliably clear the visible selection.
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
const element = elementRef.current;
|
|
20
|
+
if (!element)
|
|
21
|
+
return;
|
|
22
|
+
const next = props.value ?? '';
|
|
23
|
+
if (element.value !== next) {
|
|
24
|
+
element.value = next;
|
|
25
|
+
}
|
|
26
|
+
}, [props.value]);
|
|
27
|
+
// Handle change events
|
|
28
|
+
const handleChange = useCallback((event) => {
|
|
29
|
+
const customEvent = event;
|
|
30
|
+
if (onChange) {
|
|
31
|
+
onChange(customEvent);
|
|
32
|
+
}
|
|
33
|
+
}, [onChange]);
|
|
34
|
+
const handleSearch = useCallback((event) => {
|
|
35
|
+
const customEvent = event;
|
|
36
|
+
if (onSearch) {
|
|
37
|
+
onSearch(customEvent);
|
|
38
|
+
}
|
|
39
|
+
}, [onSearch]);
|
|
40
|
+
// Set up event listeners
|
|
41
|
+
useEffect(() => {
|
|
42
|
+
const element = elementRef.current;
|
|
43
|
+
if (!element)
|
|
44
|
+
return;
|
|
45
|
+
if (onChange)
|
|
46
|
+
element.addEventListener('change', handleChange);
|
|
47
|
+
if (onSearch)
|
|
48
|
+
element.addEventListener('search', handleSearch);
|
|
49
|
+
return () => {
|
|
50
|
+
if (onChange)
|
|
51
|
+
element.removeEventListener('change', handleChange);
|
|
52
|
+
if (onSearch)
|
|
53
|
+
element.removeEventListener('search', handleSearch);
|
|
54
|
+
};
|
|
55
|
+
}, [handleChange, handleSearch, onChange, onSearch]);
|
|
56
|
+
// Convert React props to web component attributes
|
|
57
|
+
const webComponentProps = {
|
|
58
|
+
...props,
|
|
59
|
+
ref: elementRef,
|
|
60
|
+
};
|
|
61
|
+
// Handle value conversion (array to comma-separated string)
|
|
62
|
+
if (value !== undefined) {
|
|
63
|
+
const valueString = Array.isArray(value) ? value.join(',') : value;
|
|
64
|
+
webComponentProps.value = valueString;
|
|
65
|
+
}
|
|
66
|
+
// Add optional attributes only if they have values
|
|
67
|
+
if (placeholder) {
|
|
68
|
+
webComponentProps.placeholder = placeholder;
|
|
69
|
+
}
|
|
70
|
+
if (disabled) {
|
|
71
|
+
webComponentProps.disabled = ''; // Boolean attributes as empty string
|
|
72
|
+
}
|
|
73
|
+
if (readonly) {
|
|
74
|
+
webComponentProps.readonly = ''; // Boolean attributes as empty string
|
|
75
|
+
}
|
|
76
|
+
if (flavor) {
|
|
77
|
+
webComponentProps.flavor = flavor;
|
|
78
|
+
}
|
|
79
|
+
if (label) {
|
|
80
|
+
webComponentProps.label = label;
|
|
81
|
+
}
|
|
82
|
+
if (required) {
|
|
83
|
+
webComponentProps.required = ''; // Boolean attributes as empty string
|
|
84
|
+
}
|
|
85
|
+
if (name) {
|
|
86
|
+
webComponentProps.name = name;
|
|
87
|
+
}
|
|
88
|
+
// External (remote) search mode: parent owns filtering, multiselect dispatches search events
|
|
89
|
+
if (externalSearch) {
|
|
90
|
+
webComponentProps['external-search'] = '';
|
|
91
|
+
}
|
|
92
|
+
// Add debounce attribute
|
|
93
|
+
if (debounce !== undefined) {
|
|
94
|
+
webComponentProps.debounce = debounce;
|
|
95
|
+
}
|
|
96
|
+
// Add selectedLabel attribute
|
|
97
|
+
if (selectedLabel) {
|
|
98
|
+
webComponentProps['selected-label'] = selectedLabel;
|
|
99
|
+
}
|
|
100
|
+
return React.createElement('ty-multiselect', webComponentProps, children);
|
|
101
|
+
});
|
|
102
|
+
TyMultiselect.displayName = 'TyMultiselect';
|
|
103
|
+
//# sourceMappingURL=TyMultiselect.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TyMultiselect.js","sourceRoot":"","sources":["../../src/components/TyMultiselect.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface TyOptionProps extends React.HTMLAttributes<HTMLElement> {
|
|
3
|
+
value?: string;
|
|
4
|
+
disabled?: boolean;
|
|
5
|
+
selected?: boolean;
|
|
6
|
+
hidden?: boolean;
|
|
7
|
+
children?: React.ReactNode;
|
|
8
|
+
}
|
|
9
|
+
export declare const TyOption: React.ForwardRefExoticComponent<TyOptionProps & React.RefAttributes<HTMLElement>>;
|
|
10
|
+
//# sourceMappingURL=TyOption.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TyOption.d.ts","sourceRoot":"","sources":["../../src/components/TyOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,eAAO,MAAM,QAAQ,mFA2BpB,CAAC"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React, { useEffect, useRef } from 'react';
|
|
2
|
+
// React wrapper for ty-option web component
|
|
3
|
+
export const TyOption = React.forwardRef(({ children, disabled, selected, hidden, ...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
|
+
return React.createElement('ty-option', {
|
|
17
|
+
...props,
|
|
18
|
+
...(disabled && { disabled: "" }),
|
|
19
|
+
...(selected && { selected: "" }),
|
|
20
|
+
...(hidden && { hidden: "" }),
|
|
21
|
+
ref: elementRef,
|
|
22
|
+
}, children);
|
|
23
|
+
});
|
|
24
|
+
TyOption.displayName = 'TyOption';
|
|
25
|
+
//# sourceMappingURL=TyOption.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TyOption.js","sourceRoot":"","sources":["../../src/components/TyOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAWjD,4CAA4C;AAC5C,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC1D,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,OAAO,KAAK,CAAC,aAAa,CACxB,WAAW,EACX;QACE,GAAG,KAAK;QACR,GAAG,CAAC,QAAQ,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;QACjC,GAAG,CAAC,QAAQ,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;QACjC,GAAG,CAAC,MAAM,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;QAC7B,GAAG,EAAE,UAAU;KAChB,EACD,QAAQ,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface TyPopupProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onClose'> {
|
|
3
|
+
/** Preferred placement of the popup relative to anchor parent: "top" | "bottom" | "left" | "right" */
|
|
4
|
+
placement?: 'top' | 'bottom' | 'left' | 'right';
|
|
5
|
+
/** Distance offset from the anchor in pixels (default: 8) */
|
|
6
|
+
offset?: number;
|
|
7
|
+
/** Disable automatic click trigger - requires manual open/close via ref methods */
|
|
8
|
+
manual?: boolean;
|
|
9
|
+
/** Disable automatic close on outside click and ESC key */
|
|
10
|
+
disableClose?: boolean;
|
|
11
|
+
/** Fired when the popup opens (after the open animation starts) */
|
|
12
|
+
onOpen?: (event: CustomEvent) => void;
|
|
13
|
+
/** Fired when the popup closes */
|
|
14
|
+
onClose?: (event: CustomEvent) => void;
|
|
15
|
+
/** Popup content - popup should be a child of the anchor element */
|
|
16
|
+
children?: React.ReactNode;
|
|
17
|
+
}
|
|
18
|
+
export interface TyPopupElement extends HTMLElement {
|
|
19
|
+
openPopup(): void;
|
|
20
|
+
closePopup(): void;
|
|
21
|
+
togglePopup(): void;
|
|
22
|
+
}
|
|
23
|
+
export declare const TyPopup: React.ForwardRefExoticComponent<TyPopupProps & React.RefAttributes<TyPopupElement>>;
|
|
24
|
+
//# sourceMappingURL=TyPopup.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TyPopup.d.ts","sourceRoot":"","sources":["../../src/components/TyPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACtF,sGAAsG;IACtG,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAEhD,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,mFAAmF;IACnF,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,mEAAmE;IACnE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAEtC,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAEvC,oEAAoE;IACpE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,SAAS,IAAI,IAAI,CAAC;IAClB,UAAU,IAAI,IAAI,CAAC;IACnB,WAAW,IAAI,IAAI,CAAC;CACrB;AAGD,eAAO,MAAM,OAAO,qFA0EnB,CAAC"}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import React, { useEffect, useRef } from 'react';
|
|
2
|
+
// React wrapper for ty-popup web component
|
|
3
|
+
export const TyPopup = React.forwardRef(({ placement, offset, manual, disableClose, onOpen, onClose, children, ...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
|
+
// Listen for popup open/close events
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
const element = elementRef.current;
|
|
19
|
+
if (!element)
|
|
20
|
+
return;
|
|
21
|
+
const handleOpen = (event) => {
|
|
22
|
+
if (onOpen)
|
|
23
|
+
onOpen(event);
|
|
24
|
+
};
|
|
25
|
+
const handleClose = (event) => {
|
|
26
|
+
if (onClose)
|
|
27
|
+
onClose(event);
|
|
28
|
+
};
|
|
29
|
+
if (onOpen)
|
|
30
|
+
element.addEventListener('open', handleOpen);
|
|
31
|
+
if (onClose)
|
|
32
|
+
element.addEventListener('close', handleClose);
|
|
33
|
+
return () => {
|
|
34
|
+
if (onOpen)
|
|
35
|
+
element.removeEventListener('open', handleOpen);
|
|
36
|
+
if (onClose)
|
|
37
|
+
element.removeEventListener('close', handleClose);
|
|
38
|
+
};
|
|
39
|
+
}, [onOpen, onClose]);
|
|
40
|
+
// Convert React props to web component attributes
|
|
41
|
+
const webComponentProps = {
|
|
42
|
+
...props,
|
|
43
|
+
ref: elementRef,
|
|
44
|
+
};
|
|
45
|
+
// Add optional attributes only if they have values
|
|
46
|
+
if (placement) {
|
|
47
|
+
webComponentProps.placement = placement;
|
|
48
|
+
}
|
|
49
|
+
if (offset !== undefined) {
|
|
50
|
+
webComponentProps.offset = offset.toString();
|
|
51
|
+
}
|
|
52
|
+
if (manual) {
|
|
53
|
+
webComponentProps.manual = ''; // Boolean attributes as empty string
|
|
54
|
+
}
|
|
55
|
+
if (disableClose) {
|
|
56
|
+
webComponentProps['disable-close'] = ''; // Boolean attributes as empty string
|
|
57
|
+
}
|
|
58
|
+
return React.createElement('ty-popup', webComponentProps, children);
|
|
59
|
+
});
|
|
60
|
+
TyPopup.displayName = 'TyPopup';
|
|
61
|
+
//# sourceMappingURL=TyPopup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TyPopup.js","sourceRoot":"","sources":["../../src/components/TyPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAiCjD,2CAA2C;AAC3C,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CACrC,CAAC,EACC,SAAS,EACT,MAAM,EACN,MAAM,EACN,YAAY,EACZ,MAAM,EACN,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,GAAG,EAAE,EAAE;IACR,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,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,qCAAqC;IACrC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;QACnC,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,MAAM,UAAU,GAAG,CAAC,KAAY,EAAE,EAAE;YAClC,IAAI,MAAM;gBAAE,MAAM,CAAC,KAAoB,CAAC,CAAC;QAC3C,CAAC,CAAC;QACF,MAAM,WAAW,GAAG,CAAC,KAAY,EAAE,EAAE;YACnC,IAAI,OAAO;gBAAE,OAAO,CAAC,KAAoB,CAAC,CAAC;QAC7C,CAAC,CAAC;QAEF,IAAI,MAAM;YAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACzD,IAAI,OAAO;YAAE,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAE5D,OAAO,GAAG,EAAE;YACV,IAAI,MAAM;gBAAE,OAAO,CAAC,mBAAmB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;YAC5D,IAAI,OAAO;gBAAE,OAAO,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QACjE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAEtB,kDAAkD;IAClD,MAAM,iBAAiB,GAAwB;QAC7C,GAAG,KAAK;QACR,GAAG,EAAE,UAAU;KAChB,CAAC;IAEF,mDAAmD;IACnD,IAAI,SAAS,EAAE,CAAC;QACd,iBAAiB,CAAC,SAAS,GAAG,SAAS,CAAC;IAC1C,CAAC;IAED,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;QACzB,iBAAiB,CAAC,MAAM,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAC;IAC/C,CAAC;IAED,IAAI,MAAM,EAAE,CAAC;QACX,iBAAiB,CAAC,MAAM,GAAG,EAAE,CAAC,CAAE,qCAAqC;IACvE,CAAC;IAED,IAAI,YAAY,EAAE,CAAC;QACjB,iBAAiB,CAAC,eAAe,CAAC,GAAG,EAAE,CAAC,CAAE,qCAAqC;IACjF,CAAC;IAED,OAAO,KAAK,CAAC,aAAa,CACxB,UAAU,EACV,iBAAiB,EACjB,QAAQ,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface TyRadioProps extends React.HTMLAttributes<HTMLElement> {
|
|
3
|
+
/** Form field value (selected by parent ty-radio-group when matches its `value`) */
|
|
4
|
+
value?: string;
|
|
5
|
+
/**
|
|
6
|
+
* Selected state. Usually managed by the parent `<TyRadioGroup>` based on its
|
|
7
|
+
* own `value`; set explicitly only when using `ty-radio` outside a group.
|
|
8
|
+
*/
|
|
9
|
+
checked?: boolean;
|
|
10
|
+
/** Disable this individual radio */
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
/** Radio size — typically inherited from the parent group */
|
|
13
|
+
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
14
|
+
/** Semantic styling variant — typically inherited from the parent group */
|
|
15
|
+
flavor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
|
|
16
|
+
/** Label content (wrap in a `<label>` for click delegation, see ty-radio docs) */
|
|
17
|
+
children?: React.ReactNode;
|
|
18
|
+
}
|
|
19
|
+
export declare const TyRadio: React.ForwardRefExoticComponent<TyRadioProps & React.RefAttributes<HTMLElement>>;
|
|
20
|
+
//# sourceMappingURL=TyRadio.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TyRadio.d.ts","sourceRoot":"","sources":["../../src/components/TyRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACrE,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAExC,2EAA2E;IAC3E,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IAEhF,kFAAkF;IAClF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,OAAO,kFA4BnB,CAAC"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React, { useEffect, useRef } from 'react';
|
|
2
|
+
export const TyRadio = React.forwardRef(({ children, value, checked, disabled, size, flavor, ...props }, ref) => {
|
|
3
|
+
const elementRef = useRef(null);
|
|
4
|
+
useEffect(() => {
|
|
5
|
+
if (ref && elementRef.current) {
|
|
6
|
+
if (typeof ref === 'function') {
|
|
7
|
+
ref(elementRef.current);
|
|
8
|
+
}
|
|
9
|
+
else {
|
|
10
|
+
ref.current = elementRef.current;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
}, [ref]);
|
|
14
|
+
const webComponentProps = {
|
|
15
|
+
...props,
|
|
16
|
+
ref: elementRef,
|
|
17
|
+
};
|
|
18
|
+
if (checked)
|
|
19
|
+
webComponentProps.checked = '';
|
|
20
|
+
if (disabled)
|
|
21
|
+
webComponentProps.disabled = '';
|
|
22
|
+
if (value !== undefined)
|
|
23
|
+
webComponentProps.value = value;
|
|
24
|
+
if (size)
|
|
25
|
+
webComponentProps.size = size;
|
|
26
|
+
if (flavor)
|
|
27
|
+
webComponentProps.flavor = flavor;
|
|
28
|
+
return React.createElement('ty-radio', webComponentProps, children);
|
|
29
|
+
});
|
|
30
|
+
TyRadio.displayName = 'TyRadio';
|
|
31
|
+
//# sourceMappingURL=TyRadio.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TyRadio.js","sourceRoot":"","sources":["../../src/components/TyRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAyBjD,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CACrC,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACtE,MAAM,UAAU,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAE7C,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,iBAAiB,GAAwB;QAC7C,GAAG,KAAK;QACR,GAAG,EAAE,UAAU;KAChB,CAAC;IAEF,IAAI,OAAO;QAAE,iBAAiB,CAAC,OAAO,GAAG,EAAE,CAAC;IAC5C,IAAI,QAAQ;QAAE,iBAAiB,CAAC,QAAQ,GAAG,EAAE,CAAC;IAE9C,IAAI,KAAK,KAAK,SAAS;QAAE,iBAAiB,CAAC,KAAK,GAAG,KAAK,CAAC;IACzD,IAAI,IAAI;QAAE,iBAAiB,CAAC,IAAI,GAAG,IAAI,CAAC;IACxC,IAAI,MAAM;QAAE,iBAAiB,CAAC,MAAM,GAAG,MAAM,CAAC;IAE9C,OAAO,KAAK,CAAC,aAAa,CAAC,UAAU,EAAE,iBAAiB,EAAE,QAAQ,CAAC,CAAC;AACtE,CAAC,CACF,CAAC;AAEF,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface TyRadioGroupProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'onInput'> {
|
|
3
|
+
/** Currently selected value (matches one child `<TyRadio value="...">`) */
|
|
4
|
+
value?: string;
|
|
5
|
+
/** Form field name */
|
|
6
|
+
name?: string;
|
|
7
|
+
/** Group label rendered above the radios */
|
|
8
|
+
label?: string;
|
|
9
|
+
/** Disable the entire group */
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
/** Required field — renders required-icon next to the label */
|
|
12
|
+
required?: boolean;
|
|
13
|
+
/** Error message rendered below the group */
|
|
14
|
+
error?: string;
|
|
15
|
+
/** Layout direction for radio children */
|
|
16
|
+
orientation?: 'vertical' | 'horizontal';
|
|
17
|
+
/** Group size — propagates to all `<TyRadio>` children */
|
|
18
|
+
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
19
|
+
/** Group flavor — propagates to all `<TyRadio>` children */
|
|
20
|
+
flavor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
|
|
21
|
+
/**
|
|
22
|
+
* Fires when selection changes (React convention)
|
|
23
|
+
* Maps to native 'input' event from ty-radio-group
|
|
24
|
+
*/
|
|
25
|
+
onChange?: (event: CustomEvent<TyRadioGroupEventDetail>) => void;
|
|
26
|
+
/**
|
|
27
|
+
* Fires on blur if value changed (native DOM behavior)
|
|
28
|
+
* Maps to native 'change' event from ty-radio-group
|
|
29
|
+
*/
|
|
30
|
+
onChangeCommit?: (event: CustomEvent<TyRadioGroupEventDetail>) => void;
|
|
31
|
+
/** `<TyRadio>` children */
|
|
32
|
+
children?: React.ReactNode;
|
|
33
|
+
}
|
|
34
|
+
export interface TyRadioGroupEventDetail {
|
|
35
|
+
value: string;
|
|
36
|
+
formValue: string;
|
|
37
|
+
originalEvent: Event;
|
|
38
|
+
}
|
|
39
|
+
export declare const TyRadioGroup: React.ForwardRefExoticComponent<TyRadioGroupProps & React.RefAttributes<HTMLElement>>;
|
|
40
|
+
//# sourceMappingURL=TyRadioGroup.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TyRadioGroup.d.ts","sourceRoot":"","sources":["../../src/components/TyRadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACxG,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,0CAA0C;IAC1C,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAExC,0DAA0D;IAC1D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAExC,4DAA4D;IAC5D,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IAEhF;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,uBAAuB,CAAC,KAAK,IAAI,CAAC;IAEjE;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,uBAAuB,CAAC,KAAK,IAAI,CAAC;IAEvE,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,KAAK,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,uFAkExB,CAAC"}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import React, { useEffect, useRef } from 'react';
|
|
2
|
+
export const TyRadioGroup = React.forwardRef(({ children, value, name, label, disabled, required, error, orientation, size, flavor, onChange, onChangeCommit, ...props }, ref) => {
|
|
3
|
+
const elementRef = useRef(null);
|
|
4
|
+
useEffect(() => {
|
|
5
|
+
const element = elementRef.current;
|
|
6
|
+
if (!element)
|
|
7
|
+
return;
|
|
8
|
+
const handleInput = (event) => {
|
|
9
|
+
if (onChange)
|
|
10
|
+
onChange(event);
|
|
11
|
+
};
|
|
12
|
+
const handleChangeCommit = (event) => {
|
|
13
|
+
if (onChangeCommit)
|
|
14
|
+
onChangeCommit(event);
|
|
15
|
+
};
|
|
16
|
+
element.addEventListener('input', handleInput);
|
|
17
|
+
element.addEventListener('change', handleChangeCommit);
|
|
18
|
+
return () => {
|
|
19
|
+
element.removeEventListener('input', handleInput);
|
|
20
|
+
element.removeEventListener('change', handleChangeCommit);
|
|
21
|
+
};
|
|
22
|
+
}, [onChange, onChangeCommit]);
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
if (ref && elementRef.current) {
|
|
25
|
+
if (typeof ref === 'function') {
|
|
26
|
+
ref(elementRef.current);
|
|
27
|
+
}
|
|
28
|
+
else {
|
|
29
|
+
ref.current = elementRef.current;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}, [ref]);
|
|
33
|
+
const webComponentProps = {
|
|
34
|
+
...props,
|
|
35
|
+
ref: elementRef,
|
|
36
|
+
};
|
|
37
|
+
if (disabled)
|
|
38
|
+
webComponentProps.disabled = '';
|
|
39
|
+
if (required)
|
|
40
|
+
webComponentProps.required = '';
|
|
41
|
+
if (value !== undefined)
|
|
42
|
+
webComponentProps.value = value;
|
|
43
|
+
if (name)
|
|
44
|
+
webComponentProps.name = name;
|
|
45
|
+
if (label)
|
|
46
|
+
webComponentProps.label = label;
|
|
47
|
+
if (error)
|
|
48
|
+
webComponentProps.error = error;
|
|
49
|
+
if (orientation)
|
|
50
|
+
webComponentProps.orientation = orientation;
|
|
51
|
+
if (size)
|
|
52
|
+
webComponentProps.size = size;
|
|
53
|
+
if (flavor)
|
|
54
|
+
webComponentProps.flavor = flavor;
|
|
55
|
+
return React.createElement('ty-radio-group', webComponentProps, children);
|
|
56
|
+
});
|
|
57
|
+
TyRadioGroup.displayName = 'TyRadioGroup';
|
|
58
|
+
//# sourceMappingURL=TyRadioGroup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TyRadioGroup.js","sourceRoot":"","sources":["../../src/components/TyRadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAoDjD,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAC1C,CAAC,EACC,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,EACX,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,cAAc,EACd,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,WAAW,GAAG,CAAC,KAAY,EAAE,EAAE;YACnC,IAAI,QAAQ;gBAAE,QAAQ,CAAC,KAA6C,CAAC,CAAC;QACxE,CAAC,CAAC;QACF,MAAM,kBAAkB,GAAG,CAAC,KAAY,EAAE,EAAE;YAC1C,IAAI,cAAc;gBAAE,cAAc,CAAC,KAA6C,CAAC,CAAC;QACpF,CAAC,CAAC;QAEF,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAC/C,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC;QAEvD,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;YAClD,OAAO,CAAC,mBAAmB,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC;QAC5D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC;IAE/B,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,iBAAiB,GAAwB;QAC7C,GAAG,KAAK;QACR,GAAG,EAAE,UAAU;KAChB,CAAC;IAEF,IAAI,QAAQ;QAAE,iBAAiB,CAAC,QAAQ,GAAG,EAAE,CAAC;IAC9C,IAAI,QAAQ;QAAE,iBAAiB,CAAC,QAAQ,GAAG,EAAE,CAAC;IAE9C,IAAI,KAAK,KAAK,SAAS;QAAE,iBAAiB,CAAC,KAAK,GAAG,KAAK,CAAC;IACzD,IAAI,IAAI;QAAE,iBAAiB,CAAC,IAAI,GAAG,IAAI,CAAC;IACxC,IAAI,KAAK;QAAE,iBAAiB,CAAC,KAAK,GAAG,KAAK,CAAC;IAC3C,IAAI,KAAK;QAAE,iBAAiB,CAAC,KAAK,GAAG,KAAK,CAAC;IAC3C,IAAI,WAAW;QAAE,iBAAiB,CAAC,WAAW,GAAG,WAAW,CAAC;IAC7D,IAAI,IAAI;QAAE,iBAAiB,CAAC,IAAI,GAAG,IAAI,CAAC;IACxC,IAAI,MAAM;QAAE,iBAAiB,CAAC,MAAM,GAAG,MAAM,CAAC;IAE9C,OAAO,KAAK,CAAC,aAAa,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,QAAQ,CAAC,CAAC;AAC5E,CAAC,CACF,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface TyResizeObserverProps extends React.HTMLAttributes<HTMLElement> {
|
|
3
|
+
/** Required unique identifier for size registry */
|
|
4
|
+
id: string;
|
|
5
|
+
/** Debounce in milliseconds (default: 0 = no debounce) */
|
|
6
|
+
debounce?: number;
|
|
7
|
+
/** Content to observe */
|
|
8
|
+
children?: React.ReactNode;
|
|
9
|
+
}
|
|
10
|
+
export declare const TyResizeObserver: React.ForwardRefExoticComponent<TyResizeObserverProps & React.RefAttributes<HTMLElement>>;
|
|
11
|
+
//# sourceMappingURL=TyResizeObserver.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TyResizeObserver.d.ts","sourceRoot":"","sources":["../../src/components/TyResizeObserver.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC9E,mDAAmD;IACnD,EAAE,EAAE,MAAM,CAAC;IAEX,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,eAAO,MAAM,gBAAgB,2FAoC5B,CAAC"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React, { useEffect, useRef } from 'react';
|
|
2
|
+
// React wrapper for ty-resize-observer web component
|
|
3
|
+
export const TyResizeObserver = React.forwardRef(({ children, id, debounce, ...props }, ref) => {
|
|
4
|
+
const elementRef = useRef(null);
|
|
5
|
+
// Combine refs if needed
|
|
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
|
+
ref: elementRef,
|
|
20
|
+
id,
|
|
21
|
+
};
|
|
22
|
+
// Add number attributes
|
|
23
|
+
if (debounce !== undefined)
|
|
24
|
+
webComponentProps.debounce = debounce;
|
|
25
|
+
return React.createElement('ty-resize-observer', webComponentProps, children);
|
|
26
|
+
});
|
|
27
|
+
TyResizeObserver.displayName = 'TyResizeObserver';
|
|
28
|
+
//# sourceMappingURL=TyResizeObserver.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TyResizeObserver.js","sourceRoot":"","sources":["../../src/components/TyResizeObserver.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAcjD,qDAAqD;AACrD,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAC9C,CAAC,EACC,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,GAAG,EAAE,EAAE;IACR,MAAM,UAAU,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAE7C,yBAAyB;IACzB,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,GAAG,EAAE,UAAU;QACf,EAAE;KACH,CAAC;IAEF,wBAAwB;IACxB,IAAI,QAAQ,KAAK,SAAS;QAAE,iBAAiB,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAElE,OAAO,KAAK,CAAC,aAAa,CACxB,oBAAoB,EACpB,iBAAiB,EACjB,QAAQ,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface TyScrollContainerProps extends React.HTMLAttributes<HTMLElement> {
|
|
3
|
+
/** Maximum height of the scroll container */
|
|
4
|
+
maxHeight?: string;
|
|
5
|
+
/** Enable/disable scroll shadows (default: true) */
|
|
6
|
+
shadow?: boolean;
|
|
7
|
+
/** Hide native scrollbar */
|
|
8
|
+
hideScrollbar?: boolean;
|
|
9
|
+
/** Content to scroll */
|
|
10
|
+
children?: React.ReactNode;
|
|
11
|
+
}
|
|
12
|
+
export interface TyScrollContainerRef {
|
|
13
|
+
/** Force update shadows (useful after dynamic content changes) */
|
|
14
|
+
updateShadows: () => void;
|
|
15
|
+
/** Scroll to top */
|
|
16
|
+
scrollToTop: (smooth?: boolean) => void;
|
|
17
|
+
/** Scroll to bottom */
|
|
18
|
+
scrollToBottom: (smooth?: boolean) => void;
|
|
19
|
+
/** Get the underlying scroll element */
|
|
20
|
+
scrollElement: HTMLElement | null;
|
|
21
|
+
/** Get the native element */
|
|
22
|
+
element: HTMLElement | null;
|
|
23
|
+
}
|
|
24
|
+
export declare const TyScrollContainer: React.ForwardRefExoticComponent<TyScrollContainerProps & React.RefAttributes<TyScrollContainerRef>>;
|
|
25
|
+
//# sourceMappingURL=TyScrollContainer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TyScrollContainer.d.ts","sourceRoot":"","sources":["../../src/components/TyScrollContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAGtE,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC/E,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,4BAA4B;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,MAAM,WAAW,oBAAoB;IACnC,kEAAkE;IAClE,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,oBAAoB;IACpB,WAAW,EAAE,CAAC,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,uBAAuB;IACvB,cAAc,EAAE,CAAC,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,wCAAwC;IACxC,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,6BAA6B;IAC7B,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;CAC7B;AAGD,eAAO,MAAM,iBAAiB,qGAoD7B,CAAC"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import React, { useRef, useImperativeHandle } from 'react';
|
|
2
|
+
// React wrapper for ty-scroll-container web component
|
|
3
|
+
export const TyScrollContainer = React.forwardRef(({ children, maxHeight, shadow, hideScrollbar, ...props }, ref) => {
|
|
4
|
+
const elementRef = useRef(null);
|
|
5
|
+
// Expose imperative methods via ref
|
|
6
|
+
useImperativeHandle(ref, () => ({
|
|
7
|
+
updateShadows: () => {
|
|
8
|
+
const el = elementRef.current;
|
|
9
|
+
el?.updateShadows?.();
|
|
10
|
+
},
|
|
11
|
+
scrollToTop: (smooth = true) => {
|
|
12
|
+
const el = elementRef.current;
|
|
13
|
+
el?.scrollToTop?.(smooth);
|
|
14
|
+
},
|
|
15
|
+
scrollToBottom: (smooth = true) => {
|
|
16
|
+
const el = elementRef.current;
|
|
17
|
+
el?.scrollToBottom?.(smooth);
|
|
18
|
+
},
|
|
19
|
+
get scrollElement() {
|
|
20
|
+
const el = elementRef.current;
|
|
21
|
+
return el?.scrollElement ?? null;
|
|
22
|
+
},
|
|
23
|
+
get element() {
|
|
24
|
+
return elementRef.current;
|
|
25
|
+
}
|
|
26
|
+
}), []);
|
|
27
|
+
// Convert React props to web component attributes
|
|
28
|
+
const webComponentProps = {
|
|
29
|
+
...props,
|
|
30
|
+
ref: elementRef,
|
|
31
|
+
};
|
|
32
|
+
// Add string attributes
|
|
33
|
+
if (maxHeight)
|
|
34
|
+
webComponentProps['max-height'] = maxHeight;
|
|
35
|
+
// Add boolean attributes
|
|
36
|
+
if (shadow === false)
|
|
37
|
+
webComponentProps.shadow = 'false';
|
|
38
|
+
if (hideScrollbar)
|
|
39
|
+
webComponentProps['hide-scrollbar'] = true;
|
|
40
|
+
return React.createElement('ty-scroll-container', webComponentProps, children);
|
|
41
|
+
});
|
|
42
|
+
TyScrollContainer.displayName = 'TyScrollContainer';
|
|
43
|
+
//# sourceMappingURL=TyScrollContainer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TyScrollContainer.js","sourceRoot":"","sources":["../../src/components/TyScrollContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,MAAM,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AA+BtE,sDAAsD;AACtD,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAC/C,CAAC,EACC,QAAQ,EACR,SAAS,EACT,MAAM,EACN,aAAa,EACb,GAAG,KAAK,EACT,EAAE,GAAG,EAAE,EAAE;IACR,MAAM,UAAU,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAE7C,oCAAoC;IACpC,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,aAAa,EAAE,GAAG,EAAE;YAClB,MAAM,EAAE,GAAG,UAAU,CAAC,OAAc,CAAC;YACrC,EAAE,EAAE,aAAa,EAAE,EAAE,CAAC;QACxB,CAAC;QACD,WAAW,EAAE,CAAC,MAAM,GAAG,IAAI,EAAE,EAAE;YAC7B,MAAM,EAAE,GAAG,UAAU,CAAC,OAAc,CAAC;YACrC,EAAE,EAAE,WAAW,EAAE,CAAC,MAAM,CAAC,CAAC;QAC5B,CAAC;QACD,cAAc,EAAE,CAAC,MAAM,GAAG,IAAI,EAAE,EAAE;YAChC,MAAM,EAAE,GAAG,UAAU,CAAC,OAAc,CAAC;YACrC,EAAE,EAAE,cAAc,EAAE,CAAC,MAAM,CAAC,CAAC;QAC/B,CAAC;QACD,IAAI,aAAa;YACf,MAAM,EAAE,GAAG,UAAU,CAAC,OAAc,CAAC;YACrC,OAAO,EAAE,EAAE,aAAa,IAAI,IAAI,CAAC;QACnC,CAAC;QACD,IAAI,OAAO;YACT,OAAO,UAAU,CAAC,OAAO,CAAC;QAC5B,CAAC;KACF,CAAC,EAAE,EAAE,CAAC,CAAC;IAER,kDAAkD;IAClD,MAAM,iBAAiB,GAAwB;QAC7C,GAAG,KAAK;QACR,GAAG,EAAE,UAAU;KAChB,CAAC;IAEF,wBAAwB;IACxB,IAAI,SAAS;QAAE,iBAAiB,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC;IAE3D,yBAAyB;IACzB,IAAI,MAAM,KAAK,KAAK;QAAE,iBAAiB,CAAC,MAAM,GAAG,OAAO,CAAC;IACzD,IAAI,aAAa;QAAE,iBAAiB,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IAE9D,OAAO,KAAK,CAAC,aAAa,CACxB,qBAAqB,EACrB,iBAAiB,EACjB,QAAQ,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC"}
|