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.
- 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 +127 -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 +83 -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 +119 -0
- package/dist/components/TyDatePicker.js.map +1 -0
- package/dist/components/TyDropdown.d.ts +56 -0
- package/dist/components/TyDropdown.d.ts.map +1 -0
- package/dist/components/TyDropdown.js +110 -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 +127 -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 +107 -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 +46 -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 +69 -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 +113 -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/dist/utils/react-version.d.ts +2 -0
- package/dist/utils/react-version.d.ts.map +1 -0
- package/dist/utils/react-version.js +8 -0
- package/dist/utils/react-version.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 +248 -0
- package/src/components/TyCalendarMonth.tsx +108 -0
- package/src/components/TyCalendarNavigation.tsx +91 -0
- package/src/components/TyCheckbox.tsx +152 -0
- package/src/components/TyCopy.tsx +78 -0
- package/src/components/TyDatePicker.tsx +220 -0
- package/src/components/TyDropdown.tsx +225 -0
- package/src/components/TyIcon.tsx +72 -0
- package/src/components/TyInput.tsx +232 -0
- package/src/components/TyModal.tsx +142 -0
- package/src/components/TyMultiselect.tsx +203 -0
- package/src/components/TyOption.tsx +42 -0
- package/src/components/TyPopup.tsx +111 -0
- package/src/components/TyRadio.tsx +70 -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 +122 -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 +177 -0
- package/src/components/TyTooltip.tsx +83 -0
- package/src/components/TyWizard.tsx +99 -0
- package/src/components/index.ts +251 -0
- package/src/utils/react-version.ts +8 -0
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import React, { useEffect, useRef, useImperativeHandle } from 'react';
|
|
2
|
+
// React wrapper for ty-modal web component
|
|
3
|
+
export const TyModal = React.forwardRef(({ open, backdrop, closeOnOutsideClick, closeOnEscape, protected: isProtected, onOpen, onClose, children, ...props }, ref) => {
|
|
4
|
+
const elementRef = useRef(null);
|
|
5
|
+
// Expose imperative methods through ref
|
|
6
|
+
useImperativeHandle(ref, () => ({
|
|
7
|
+
show: () => {
|
|
8
|
+
if (elementRef.current && typeof elementRef.current.show === 'function') {
|
|
9
|
+
elementRef.current.show();
|
|
10
|
+
}
|
|
11
|
+
},
|
|
12
|
+
hide: () => {
|
|
13
|
+
if (elementRef.current && typeof elementRef.current.hide === 'function') {
|
|
14
|
+
elementRef.current.hide();
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
element: elementRef.current,
|
|
18
|
+
}), []);
|
|
19
|
+
// Handle modal events
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
const element = elementRef.current;
|
|
22
|
+
if (!element)
|
|
23
|
+
return;
|
|
24
|
+
const handleOpen = (event) => {
|
|
25
|
+
if (onOpen) {
|
|
26
|
+
onOpen(event);
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
const handleClose = (event) => {
|
|
30
|
+
if (onClose) {
|
|
31
|
+
onClose(event);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
// Listen for custom modal events
|
|
35
|
+
if (onOpen) {
|
|
36
|
+
element.addEventListener('open', handleOpen);
|
|
37
|
+
}
|
|
38
|
+
if (onClose) {
|
|
39
|
+
element.addEventListener('close', handleClose);
|
|
40
|
+
}
|
|
41
|
+
return () => {
|
|
42
|
+
if (onOpen) {
|
|
43
|
+
element.removeEventListener('open', handleOpen);
|
|
44
|
+
}
|
|
45
|
+
if (onClose) {
|
|
46
|
+
element.removeEventListener('close', handleClose);
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
}, [onOpen, onClose]);
|
|
50
|
+
// Convert React props to web component attributes
|
|
51
|
+
const webComponentProps = {
|
|
52
|
+
...props,
|
|
53
|
+
ref: elementRef,
|
|
54
|
+
};
|
|
55
|
+
// Add boolean attributes using correct HTML attribute names
|
|
56
|
+
if (open) {
|
|
57
|
+
webComponentProps.open = ''; // Boolean attributes as empty string
|
|
58
|
+
}
|
|
59
|
+
if (backdrop === false) { // Only set if explicitly false (default is true)
|
|
60
|
+
webComponentProps.backdrop = 'false';
|
|
61
|
+
}
|
|
62
|
+
if (closeOnOutsideClick === false) { // Only set if explicitly false (default is true)
|
|
63
|
+
webComponentProps['close-on-outside-click'] = 'false';
|
|
64
|
+
}
|
|
65
|
+
if (closeOnEscape === false) { // Only set if explicitly false (default is true)
|
|
66
|
+
webComponentProps['close-on-escape'] = 'false';
|
|
67
|
+
}
|
|
68
|
+
if (isProtected) {
|
|
69
|
+
webComponentProps.protected = ''; // Boolean attributes as empty string
|
|
70
|
+
}
|
|
71
|
+
return React.createElement('ty-modal', webComponentProps, children);
|
|
72
|
+
});
|
|
73
|
+
TyModal.displayName = 'TyModal';
|
|
74
|
+
//# sourceMappingURL=TyModal.js.map
|
|
@@ -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;AAI9D,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,wFAuIzB,CAAC"}
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import React, { useEffect, useRef, useCallback } from 'react';
|
|
2
|
+
import { needsPropertyBridge } from '../utils/react-version';
|
|
3
|
+
// React wrapper for ty-multiselect web component
|
|
4
|
+
export const TyMultiselect = React.forwardRef(({ value, placeholder, disabled, readonly, flavor, label, required, externalSearch, debounce, selectedLabel, name, onChange, onSearch, children, ...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
|
+
// Imperatively sync `value` to the underlying property so resets
|
|
18
|
+
// (`value=""` or null) reliably clear the visible selection.
|
|
19
|
+
// React 18 workaround; React 19+ handles this natively.
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
if (!needsPropertyBridge)
|
|
22
|
+
return;
|
|
23
|
+
const element = elementRef.current;
|
|
24
|
+
if (!element)
|
|
25
|
+
return;
|
|
26
|
+
const next = props.value ?? '';
|
|
27
|
+
if (element.value !== next) {
|
|
28
|
+
element.value = next;
|
|
29
|
+
}
|
|
30
|
+
}, [props.value]);
|
|
31
|
+
// Handle change events
|
|
32
|
+
const handleChange = useCallback((event) => {
|
|
33
|
+
const customEvent = event;
|
|
34
|
+
if (onChange) {
|
|
35
|
+
onChange(customEvent);
|
|
36
|
+
}
|
|
37
|
+
}, [onChange]);
|
|
38
|
+
const handleSearch = useCallback((event) => {
|
|
39
|
+
const customEvent = event;
|
|
40
|
+
if (onSearch) {
|
|
41
|
+
onSearch(customEvent);
|
|
42
|
+
}
|
|
43
|
+
}, [onSearch]);
|
|
44
|
+
// Set up event listeners
|
|
45
|
+
useEffect(() => {
|
|
46
|
+
const element = elementRef.current;
|
|
47
|
+
if (!element)
|
|
48
|
+
return;
|
|
49
|
+
if (onChange)
|
|
50
|
+
element.addEventListener('change', handleChange);
|
|
51
|
+
if (onSearch)
|
|
52
|
+
element.addEventListener('search', handleSearch);
|
|
53
|
+
return () => {
|
|
54
|
+
if (onChange)
|
|
55
|
+
element.removeEventListener('change', handleChange);
|
|
56
|
+
if (onSearch)
|
|
57
|
+
element.removeEventListener('search', handleSearch);
|
|
58
|
+
};
|
|
59
|
+
}, [handleChange, handleSearch, onChange, onSearch]);
|
|
60
|
+
// Convert React props to web component attributes
|
|
61
|
+
const webComponentProps = {
|
|
62
|
+
...props,
|
|
63
|
+
ref: elementRef,
|
|
64
|
+
};
|
|
65
|
+
// Handle value conversion (array to comma-separated string)
|
|
66
|
+
if (value !== undefined) {
|
|
67
|
+
const valueString = Array.isArray(value) ? value.join(',') : value;
|
|
68
|
+
webComponentProps.value = valueString;
|
|
69
|
+
}
|
|
70
|
+
// Add optional attributes only if they have values
|
|
71
|
+
if (placeholder) {
|
|
72
|
+
webComponentProps.placeholder = placeholder;
|
|
73
|
+
}
|
|
74
|
+
if (disabled) {
|
|
75
|
+
webComponentProps.disabled = ''; // Boolean attributes as empty string
|
|
76
|
+
}
|
|
77
|
+
if (readonly) {
|
|
78
|
+
webComponentProps.readonly = ''; // Boolean attributes as empty string
|
|
79
|
+
}
|
|
80
|
+
if (flavor) {
|
|
81
|
+
webComponentProps.flavor = flavor;
|
|
82
|
+
}
|
|
83
|
+
if (label) {
|
|
84
|
+
webComponentProps.label = label;
|
|
85
|
+
}
|
|
86
|
+
if (required) {
|
|
87
|
+
webComponentProps.required = ''; // Boolean attributes as empty string
|
|
88
|
+
}
|
|
89
|
+
if (name) {
|
|
90
|
+
webComponentProps.name = name;
|
|
91
|
+
}
|
|
92
|
+
// External (remote) search mode: parent owns filtering, multiselect dispatches search events
|
|
93
|
+
if (externalSearch) {
|
|
94
|
+
webComponentProps['external-search'] = '';
|
|
95
|
+
}
|
|
96
|
+
// Add debounce attribute
|
|
97
|
+
if (debounce !== undefined) {
|
|
98
|
+
webComponentProps.debounce = debounce;
|
|
99
|
+
}
|
|
100
|
+
// Add selectedLabel attribute
|
|
101
|
+
if (selectedLabel) {
|
|
102
|
+
webComponentProps['selected-label'] = selectedLabel;
|
|
103
|
+
}
|
|
104
|
+
return React.createElement('ty-multiselect', webComponentProps, children);
|
|
105
|
+
});
|
|
106
|
+
TyMultiselect.displayName = 'TyMultiselect';
|
|
107
|
+
//# 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;AAGjD,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,kFAyCnB,CAAC"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import React, { useEffect, useRef } from 'react';
|
|
2
|
+
import { needsPropertyBridge } from '../utils/react-version';
|
|
3
|
+
export const TyRadio = React.forwardRef(({ children, value, checked, disabled, size, flavor, ...props }, ref) => {
|
|
4
|
+
const elementRef = useRef(null);
|
|
5
|
+
useEffect(() => {
|
|
6
|
+
if (ref && elementRef.current) {
|
|
7
|
+
if (typeof ref === 'function') {
|
|
8
|
+
ref(elementRef.current);
|
|
9
|
+
}
|
|
10
|
+
else {
|
|
11
|
+
ref.current = elementRef.current;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}, [ref]);
|
|
15
|
+
// Imperatively sync `checked` to the underlying property. React 18 sets
|
|
16
|
+
// boolean attributes as empty strings on first render but doesn't reliably
|
|
17
|
+
// remove them when the prop flips back to false on a custom element.
|
|
18
|
+
// React 19+ handles boolean prop-to-property bridging natively.
|
|
19
|
+
useEffect(() => {
|
|
20
|
+
if (!needsPropertyBridge)
|
|
21
|
+
return;
|
|
22
|
+
const element = elementRef.current;
|
|
23
|
+
if (!element)
|
|
24
|
+
return;
|
|
25
|
+
if (Boolean(element.checked) !== Boolean(checked)) {
|
|
26
|
+
element.checked = Boolean(checked);
|
|
27
|
+
}
|
|
28
|
+
}, [checked]);
|
|
29
|
+
const webComponentProps = {
|
|
30
|
+
...props,
|
|
31
|
+
ref: elementRef,
|
|
32
|
+
};
|
|
33
|
+
if (checked)
|
|
34
|
+
webComponentProps.checked = '';
|
|
35
|
+
if (disabled)
|
|
36
|
+
webComponentProps.disabled = '';
|
|
37
|
+
if (value !== undefined)
|
|
38
|
+
webComponentProps.value = value;
|
|
39
|
+
if (size)
|
|
40
|
+
webComponentProps.size = size;
|
|
41
|
+
if (flavor)
|
|
42
|
+
webComponentProps.flavor = flavor;
|
|
43
|
+
return React.createElement('ty-radio', webComponentProps, children);
|
|
44
|
+
});
|
|
45
|
+
TyRadio.displayName = 'TyRadio';
|
|
46
|
+
//# 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;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAyB7D,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,wEAAwE;IACxE,2EAA2E;IAC3E,qEAAqE;IACrE,gEAAgE;IAChE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,mBAAmB;YAAE,OAAO;QACjC,MAAM,OAAO,GAAG,UAAU,CAAC,OAAc,CAAC;QAC1C,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,IAAI,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;YAClD,OAAO,CAAC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,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"}
|