@studio-piot/native-ui 0.2.2 → 0.2.4
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/README.md +3 -1
- package/dist/components/ErrorBanner/ErrorBanner.d.ts +8 -0
- package/dist/components/ErrorBanner/ErrorBanner.d.ts.map +1 -0
- package/dist/components/ErrorBanner/ErrorBanner.js +136 -0
- package/dist/components/ErrorBanner/ErrorBanner.js.map +1 -0
- package/dist/components/ErrorBanner/errorBannerContext.d.ts +36 -0
- package/dist/components/ErrorBanner/errorBannerContext.d.ts.map +1 -0
- package/dist/components/ErrorBanner/errorBannerContext.js +78 -0
- package/dist/components/ErrorBanner/errorBannerContext.js.map +1 -0
- package/dist/components/ErrorBanner/errorBannerCopy.d.ts +7 -0
- package/dist/components/ErrorBanner/errorBannerCopy.d.ts.map +1 -0
- package/dist/components/ErrorBanner/errorBannerCopy.js +22 -0
- package/dist/components/ErrorBanner/errorBannerCopy.js.map +1 -0
- package/dist/components/ErrorBanner/errorBannerThemeRoles.d.ts +9 -0
- package/dist/components/ErrorBanner/errorBannerThemeRoles.d.ts.map +1 -0
- package/dist/components/ErrorBanner/errorBannerThemeRoles.js +11 -0
- package/dist/components/ErrorBanner/errorBannerThemeRoles.js.map +1 -0
- package/dist/components/ErrorBanner/icons.d.ts +7 -0
- package/dist/components/ErrorBanner/icons.d.ts.map +1 -0
- package/dist/components/ErrorBanner/icons.js +46 -0
- package/dist/components/ErrorBanner/icons.js.map +1 -0
- package/dist/components/ErrorBanner/index.d.ts +6 -0
- package/dist/components/ErrorBanner/index.d.ts.map +1 -0
- package/dist/components/ErrorBanner/index.js +16 -0
- package/dist/components/ErrorBanner/index.js.map +1 -0
- package/dist/components/ErrorBanner/types.d.ts +31 -0
- package/dist/components/ErrorBanner/types.d.ts.map +1 -0
- package/dist/components/ErrorBanner/types.js +3 -0
- package/dist/components/ErrorBanner/types.js.map +1 -0
- package/dist/components/ErrorBanner/useErrorBanner.d.ts +13 -0
- package/dist/components/ErrorBanner/useErrorBanner.d.ts.map +1 -0
- package/dist/components/ErrorBanner/useErrorBanner.js +31 -0
- package/dist/components/ErrorBanner/useErrorBanner.js.map +1 -0
- package/dist/components/Field/fieldChrome.d.ts +1 -1
- package/dist/components/Field/fieldChrome.d.ts.map +1 -1
- package/dist/components/Field/fieldChrome.js +20 -4
- package/dist/components/Field/fieldChrome.js.map +1 -1
- package/dist/components/Field/types.d.ts +2 -0
- package/dist/components/Field/types.d.ts.map +1 -1
- package/dist/components/Form/Form.d.ts +1 -1
- package/dist/components/Form/Form.d.ts.map +1 -1
- package/dist/components/Form/Form.js +36 -23
- package/dist/components/Form/Form.js.map +1 -1
- package/dist/components/Form/types.d.ts +7 -0
- package/dist/components/Form/types.d.ts.map +1 -1
- package/dist/components/RadioField/RadioField.d.ts.map +1 -1
- package/dist/components/RadioField/RadioField.js +6 -1
- package/dist/components/RadioField/RadioField.js.map +1 -1
- package/dist/components/SegmentedControl/SegmentedControl.d.ts +3 -0
- package/dist/components/SegmentedControl/SegmentedControl.d.ts.map +1 -0
- package/dist/components/SegmentedControl/SegmentedControl.js +181 -0
- package/dist/components/SegmentedControl/SegmentedControl.js.map +1 -0
- package/dist/components/SegmentedControl/index.d.ts +4 -0
- package/dist/components/SegmentedControl/index.d.ts.map +1 -0
- package/dist/components/SegmentedControl/index.js +8 -0
- package/dist/components/SegmentedControl/index.js.map +1 -0
- package/dist/components/SegmentedControl/segmentIndicatorFrame.d.ts +16 -0
- package/dist/components/SegmentedControl/segmentIndicatorFrame.d.ts.map +1 -0
- package/dist/components/SegmentedControl/segmentIndicatorFrame.js +27 -0
- package/dist/components/SegmentedControl/segmentIndicatorFrame.js.map +1 -0
- package/dist/components/SegmentedControl/segmentThemeRoles.d.ts +9 -0
- package/dist/components/SegmentedControl/segmentThemeRoles.d.ts.map +1 -0
- package/dist/components/SegmentedControl/segmentThemeRoles.js +11 -0
- package/dist/components/SegmentedControl/segmentThemeRoles.js.map +1 -0
- package/dist/components/SegmentedControl/types.d.ts +23 -0
- package/dist/components/SegmentedControl/types.d.ts.map +1 -0
- package/dist/components/SegmentedControl/types.js +3 -0
- package/dist/components/SegmentedControl/types.js.map +1 -0
- package/dist/components/Select/Select.d.ts +1 -1
- package/dist/components/Select/Select.d.ts.map +1 -1
- package/dist/components/Select/Select.js +11 -4
- package/dist/components/Select/Select.js.map +1 -1
- package/dist/components/Select/types.d.ts +2 -0
- package/dist/components/Select/types.d.ts.map +1 -1
- package/dist/components/Slider/Slider.d.ts.map +1 -1
- package/dist/components/Slider/Slider.js +6 -1
- package/dist/components/Slider/Slider.js.map +1 -1
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +13 -1
- package/dist/components/index.js.map +1 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +14 -2
- package/dist/index.js.map +1 -1
- package/docs/components/error-banner.md +85 -0
- package/docs/components/form.md +2 -1
- package/docs/components/segmented-control.md +105 -0
- package/package.json +4 -2
- package/src/components/ErrorBanner/ErrorBanner.tsx +232 -0
- package/src/components/ErrorBanner/errorBannerContext.tsx +140 -0
- package/src/components/ErrorBanner/errorBannerCopy.test.ts +41 -0
- package/src/components/ErrorBanner/errorBannerCopy.ts +22 -0
- package/src/components/ErrorBanner/errorBannerThemeRoles.test.ts +19 -0
- package/src/components/ErrorBanner/errorBannerThemeRoles.ts +9 -0
- package/src/components/ErrorBanner/icons.tsx +38 -0
- package/src/components/ErrorBanner/index.ts +14 -0
- package/src/components/ErrorBanner/types.ts +31 -0
- package/src/components/ErrorBanner/useErrorBanner.ts +33 -0
- package/src/components/Field/fieldChrome.tsx +33 -7
- package/src/components/Field/types.ts +2 -0
- package/src/components/Form/Form.tsx +56 -2
- package/src/components/Form/types.ts +7 -0
- package/src/components/RadioField/RadioField.tsx +6 -1
- package/src/components/SegmentedControl/SegmentedControl.tsx +230 -0
- package/src/components/SegmentedControl/index.ts +6 -0
- package/src/components/SegmentedControl/segmentIndicatorFrame.test.ts +39 -0
- package/src/components/SegmentedControl/segmentIndicatorFrame.ts +31 -0
- package/src/components/SegmentedControl/segmentThemeRoles.test.ts +19 -0
- package/src/components/SegmentedControl/segmentThemeRoles.ts +9 -0
- package/src/components/SegmentedControl/types.ts +24 -0
- package/src/components/Select/Select.tsx +20 -5
- package/src/components/Select/types.ts +2 -0
- package/src/components/Slider/Slider.tsx +6 -1
- package/src/components/index.ts +20 -0
- package/src/index.ts +21 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"segmentIndicatorFrame.js","sourceRoot":"","sources":["../../../src/components/SegmentedControl/segmentIndicatorFrame.ts"],"names":[],"mappings":";;;AAGA,kDAQC;AAQD,sDAWC;AA9BD,iEAAiE;AACpD,QAAA,aAAa,GAAG,CAAC,CAAC;AAE/B,SAAgB,mBAAmB,CACjC,KAAe,EACf,OAAgC;IAEhC,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;QAClB,OAAO,CAAC,CAAC,CAAC;IACZ,CAAC;IACD,OAAO,OAAO,CAAC,SAAS,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;AAC/D,CAAC;AAED;;;;;GAKG;AACH,SAAgB,qBAAqB,CACnC,KAAa,EACb,KAAa,EACb,eAAuB,EACvB,QAAgB,qBAAa;IAE7B,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC,IAAI,eAAe,IAAI,CAAC,EAAE,CAAC;QACnD,OAAO,IAAI,CAAC;IACd,CAAC;IACD,MAAM,KAAK,GAAG,eAAe,GAAG,KAAK,CAAC;IACtC,OAAO,EAAE,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,EAAE,CAAC;AAC7C,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export declare const SEGMENTED_THEME_ROLES: {
|
|
2
|
+
readonly backgroundColor: "segmentBackground";
|
|
3
|
+
readonly selectedBackgroundColor: "segmentSelectedBackground";
|
|
4
|
+
readonly labelColor: "segmentLabel";
|
|
5
|
+
readonly selectedLabelColor: "segmentSelectedLabel";
|
|
6
|
+
readonly titleColor: "segmentTitle";
|
|
7
|
+
};
|
|
8
|
+
export type SegmentedThemeColorProp = keyof typeof SEGMENTED_THEME_ROLES;
|
|
9
|
+
//# sourceMappingURL=segmentThemeRoles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"segmentThemeRoles.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/segmentThemeRoles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB;;;;;;CAMxB,CAAC;AAEX,MAAM,MAAM,uBAAuB,GAAG,MAAM,OAAO,qBAAqB,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.SEGMENTED_THEME_ROLES = void 0;
|
|
4
|
+
exports.SEGMENTED_THEME_ROLES = {
|
|
5
|
+
backgroundColor: "segmentBackground",
|
|
6
|
+
selectedBackgroundColor: "segmentSelectedBackground",
|
|
7
|
+
labelColor: "segmentLabel",
|
|
8
|
+
selectedLabelColor: "segmentSelectedLabel",
|
|
9
|
+
titleColor: "segmentTitle",
|
|
10
|
+
};
|
|
11
|
+
//# sourceMappingURL=segmentThemeRoles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"segmentThemeRoles.js","sourceRoot":"","sources":["../../../src/components/SegmentedControl/segmentThemeRoles.ts"],"names":[],"mappings":";;;AAAa,QAAA,qBAAqB,GAAG;IACnC,eAAe,EAAE,mBAAmB;IACpC,uBAAuB,EAAE,2BAA2B;IACpD,UAAU,EAAE,cAAc;IAC1B,kBAAkB,EAAE,sBAAsB;IAC1C,UAAU,EAAE,cAAc;CAClB,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { StyleProp, ViewStyle } from "react-native";
|
|
2
|
+
import type { ButtonRadius } from "../Button/buttonRadius";
|
|
3
|
+
export type SegmentedOption<T extends string = string> = {
|
|
4
|
+
value: T;
|
|
5
|
+
label: string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
};
|
|
8
|
+
export type SegmentedControlProps<T extends string = string> = {
|
|
9
|
+
value: T | null;
|
|
10
|
+
onChange: (value: T) => void;
|
|
11
|
+
options: SegmentedOption<T>[];
|
|
12
|
+
label?: string;
|
|
13
|
+
radius?: ButtonRadius;
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
backgroundColor?: string;
|
|
16
|
+
borderColor?: string;
|
|
17
|
+
selectedBackgroundColor?: string;
|
|
18
|
+
labelColor?: string;
|
|
19
|
+
selectedLabelColor?: string;
|
|
20
|
+
titleColor?: string;
|
|
21
|
+
style?: StyleProp<ViewStyle>;
|
|
22
|
+
};
|
|
23
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACvD,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IAC7D,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/SegmentedControl/types.ts"],"names":[],"mappings":""}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { SelectProps } from "./types";
|
|
2
|
-
export declare function Select({ value, onChange, options, placeholder, label, description, error, sheetTitle, closeButton,
|
|
2
|
+
export declare function Select({ name, value, onChange, options, placeholder, label, description, error, sheetTitle, closeButton,
|
|
3
3
|
/** Max sheet height as a fraction of the window (largest value wins). Default `[0.25, 0.5, 0.75]` → 75%. */
|
|
4
4
|
detents, initialDetent: _initialDetent, radius, editable, backgroundColor: backgroundColorProp, textColor: textColorProp, placeholderColor: placeholderColorProp, labelColor: labelColorProp, descriptionColor: descriptionColorProp, borderColor: borderColorProp, errorColor: errorColorProp, selectedColor: selectedColorProp, style, }: SelectProps): import("react").JSX.Element;
|
|
5
5
|
//# sourceMappingURL=Select.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAgB,WAAW,EAAE,MAAM,SAAS,CAAC;AAazD,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAgC,EAChC,KAAK,EACL,WAAW,EACX,KAAK,EACL,UAAU,EACV,WAAW;AACX,4GAA4G;AAC5G,OAAqC,EACrC,aAAa,EAAE,cAAc,EAC7B,MAAa,EACb,QAAe,EACf,eAAe,EAAE,mBAAmB,EACpC,SAAS,EAAE,aAAa,EACxB,gBAAgB,EAAE,oBAAoB,EACtC,UAAU,EAAE,cAAc,EAC1B,gBAAgB,EAAE,oBAAoB,EACtC,WAAW,EAAE,eAAe,EAC5B,UAAU,EAAE,cAAc,EAC1B,aAAa,EAAE,iBAAiB,EAChC,KAAK,GACN,EAAE,WAAW,+BA4Pb"}
|
|
@@ -7,6 +7,7 @@ const react_native_1 = require("react-native");
|
|
|
7
7
|
const bottom_sheet_1 = require("@gorhom/bottom-sheet");
|
|
8
8
|
const react_native_screens_1 = require("react-native-screens");
|
|
9
9
|
const buttonRadius_1 = require("../Button/buttonRadius");
|
|
10
|
+
const ErrorBanner_1 = require("../ErrorBanner");
|
|
10
11
|
const useResolvedFieldColor_1 = require("../Field/useResolvedFieldColor");
|
|
11
12
|
const useThemeColor_1 = require("../../theme/useThemeColor");
|
|
12
13
|
const resolveSelectDetentIndex_1 = require("./resolveSelectDetentIndex");
|
|
@@ -21,7 +22,7 @@ function SheetContainer({ children }) {
|
|
|
21
22
|
}
|
|
22
23
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
|
|
23
24
|
}
|
|
24
|
-
function Select({ value, onChange, options, placeholder = "Select an option", label, description, error, sheetTitle, closeButton,
|
|
25
|
+
function Select({ name, value, onChange, options, placeholder = "Select an option", label, description, error, sheetTitle, closeButton,
|
|
25
26
|
/** Max sheet height as a fraction of the window (largest value wins). Default `[0.25, 0.5, 0.75]` → 75%. */
|
|
26
27
|
detents = [...resolveSelectDetentIndex_1.DEFAULT_SELECT_DETENTS], initialDetent: _initialDetent, radius = "xl", editable = true, backgroundColor: backgroundColorProp, textColor: textColorProp, placeholderColor: placeholderColorProp, labelColor: labelColorProp, descriptionColor: descriptionColorProp, borderColor: borderColorProp, errorColor: errorColorProp, selectedColor: selectedColorProp, style, }) {
|
|
27
28
|
const modalRef = (0, react_1.useRef)(null);
|
|
@@ -37,7 +38,12 @@ detents = [...resolveSelectDetentIndex_1.DEFAULT_SELECT_DETENTS], initialDetent:
|
|
|
37
38
|
// Resolved on the trigger tree (has ThemeProvider), then passed into the portal.
|
|
38
39
|
const closeDiscColor = (0, useThemeColor_1.useThemeColor)("text");
|
|
39
40
|
const closeIconColor = (0, useThemeColor_1.useThemeColor)("background");
|
|
40
|
-
const
|
|
41
|
+
const dismissBanner = (0, ErrorBanner_1.useErrorBannerDismiss)();
|
|
42
|
+
const { viewRef, listed } = (0, ErrorBanner_1.useErrorBannerField)(name, () => {
|
|
43
|
+
modalRef.current?.present();
|
|
44
|
+
});
|
|
45
|
+
const hasError = Boolean(error) || Boolean(listed);
|
|
46
|
+
const inlineError = listed ? undefined : error;
|
|
41
47
|
const selected = options.find((option) => option.value === value);
|
|
42
48
|
const display = selected?.label ?? placeholder;
|
|
43
49
|
const isPlaceholder = selected == null;
|
|
@@ -82,9 +88,10 @@ detents = [...resolveSelectDetentIndex_1.DEFAULT_SELECT_DETENTS], initialDetent:
|
|
|
82
88
|
if (option.disabled)
|
|
83
89
|
return;
|
|
84
90
|
onChange(option.value);
|
|
91
|
+
dismissBanner();
|
|
85
92
|
dismiss();
|
|
86
93
|
};
|
|
87
|
-
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.column, !editable && styles.blocked, style], children: [label ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.label, { color: labelColor }], children: label })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { accessibilityHint: "Opens a list of options", accessibilityLabel: label ? `${label}. ${display}` : display, accessibilityRole: "button", accessibilityState: { disabled: !editable }, disabled: !editable, onPress: present, style: [
|
|
94
|
+
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: viewRef, collapsable: false, style: [styles.column, !editable && styles.blocked, style], children: [label ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.label, { color: labelColor }], children: label })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { accessibilityHint: listed?.message ?? "Opens a list of options", accessibilityLabel: label ? `${label}. ${display}` : display, accessibilityRole: "button", accessibilityState: { disabled: !editable }, disabled: !editable, onPress: present, style: [
|
|
88
95
|
styles.trigger,
|
|
89
96
|
{
|
|
90
97
|
backgroundColor,
|
|
@@ -94,7 +101,7 @@ detents = [...resolveSelectDetentIndex_1.DEFAULT_SELECT_DETENTS], initialDetent:
|
|
|
94
101
|
], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 1, style: [
|
|
95
102
|
styles.triggerText,
|
|
96
103
|
{ color: isPlaceholder ? placeholderColor : textColor, flex: 1 },
|
|
97
|
-
], children: display }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: [styles.chevron, { color: placeholderColor }], children: "\u203A" })] }),
|
|
104
|
+
], children: display }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: [styles.chevron, { color: placeholderColor }], children: "\u203A" })] }), inlineError ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.helper, { color: errorColor }], children: inlineError })) : description ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.helper, { color: descriptionColor }], children: description })) : null, (0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheetModal, { ref: modalRef, backdropComponent: renderBackdrop, backgroundStyle: {
|
|
98
105
|
backgroundColor,
|
|
99
106
|
borderTopLeftRadius: SHEET_TOP_RADIUS,
|
|
100
107
|
borderTopRightRadius: SHEET_TOP_RADIUS,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":";;AA+CA,wBAqRC;;AApUD,iCAMe;AACf,+CAOsB;AACtB,uDAO8B;AAC9B,+DAAyD;AACzD,yDAA2D;AAC3D,gDAGwB;AACxB,0EAAuE;AACvE,6DAA0D;AAC1D,yEAAoE;AACpE,2DAAwD;AACxD,yDAAwD;AAGxD,MAAM,gBAAgB,GAAG,IAAI,CAAC;AAC9B,MAAM,gBAAgB,GAAG,EAAE,CAAC;AAE5B,oEAAoE;AACpE,SAAS,cAAc,CAAC,EAAE,QAAQ,EAA4B;IAC5D,IAAI,uBAAQ,CAAC,EAAE,KAAK,KAAK,EAAE,CAAC;QAC1B,OAAO,uBAAC,wCAAiB,cAAE,QAAQ,GAAqB,CAAC;IAC3D,CAAC;IACD,OAAO,2DAAG,QAAQ,GAAI,CAAC;AACzB,CAAC;AAED,SAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAW,GAAG,kBAAkB,EAChC,KAAK,EACL,WAAW,EACX,KAAK,EACL,UAAU,EACV,WAAW;AACX,4GAA4G;AAC5G,OAAO,GAAG,CAAC,GAAG,iDAAsB,CAAC,EACrC,aAAa,EAAE,cAAc,EAC7B,MAAM,GAAG,IAAI,EACb,QAAQ,GAAG,IAAI,EACf,eAAe,EAAE,mBAAmB,EACpC,SAAS,EAAE,aAAa,EACxB,gBAAgB,EAAE,oBAAoB,EACtC,UAAU,EAAE,cAAc,EAC1B,gBAAgB,EAAE,oBAAoB,EACtC,WAAW,EAAE,eAAe,EAC5B,UAAU,EAAE,cAAc,EAC1B,aAAa,EAAE,iBAAiB,EAChC,KAAK,GACO;IACZ,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAsC,IAAI,CAAC,CAAC;IACnE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,IAAA,kCAAmB,GAAE,CAAC;IAEvD,MAAM,eAAe,GAAG,IAAA,6CAAqB,EAC3C,mBAAmB,EACnB,qCAAkB,CAAC,eAAe,CACnC,CAAC;IACF,MAAM,SAAS,GAAG,IAAA,6CAAqB,EACrC,aAAa,EACb,qCAAkB,CAAC,SAAS,CAC7B,CAAC;IACF,MAAM,gBAAgB,GAAG,IAAA,6CAAqB,EAC5C,oBAAoB,EACpB,qCAAkB,CAAC,gBAAgB,CACpC,CAAC;IACF,MAAM,UAAU,GAAG,IAAA,6CAAqB,EACtC,cAAc,EACd,qCAAkB,CAAC,UAAU,CAC9B,CAAC;IACF,MAAM,gBAAgB,GAAG,IAAA,6CAAqB,EAC5C,oBAAoB,EACpB,qCAAkB,CAAC,gBAAgB,CACpC,CAAC;IACF,MAAM,WAAW,GAAG,IAAA,6CAAqB,EACvC,eAAe,EACf,qCAAkB,CAAC,WAAW,CAC/B,CAAC;IACF,MAAM,UAAU,GAAG,IAAA,6CAAqB,EACtC,cAAc,EACd,qCAAkB,CAAC,UAAU,CAC9B,CAAC;IACF,MAAM,aAAa,GAAG,IAAA,6CAAqB,EACzC,iBAAiB,EACjB,qCAAkB,CAAC,aAAa,CACjC,CAAC;IACF,iFAAiF;IACjF,MAAM,cAAc,GAAG,IAAA,6BAAa,EAAC,MAAM,CAAC,CAAC;IAC7C,MAAM,cAAc,GAAG,IAAA,6BAAa,EAAC,YAAY,CAAC,CAAC;IAEnD,MAAM,aAAa,GAAG,IAAA,mCAAqB,GAAE,CAAC;IAC9C,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,IAAA,iCAAmB,EAAC,IAAI,EAAE,GAAG,EAAE;QACzD,QAAQ,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC;IAC9B,CAAC,CAAC,CAAC;IACH,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC;IAC/C,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;IAClE,MAAM,OAAO,GAAG,QAAQ,EAAE,KAAK,IAAI,WAAW,CAAC;IAC/C,MAAM,aAAa,GAAG,QAAQ,IAAI,IAAI,CAAC;IACvC,MAAM,YAAY,GAAG,IAAA,gCAAiB,EAAC,MAAM,CAAC,CAAC;IAC/C,MAAM,KAAK,GAAG,UAAU,IAAI,KAAK,IAAI,QAAQ,CAAC;IAE9C,MAAM,qBAAqB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACzC,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,OAAO,EAAE,IAAI,CAAC,CAAC;QAC7C,OAAO,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,SAAS,CAAC,CAAC;IAC9C,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC;IAE5B,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC/B,QAAQ,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC/B,IAAI,CAAC,QAAQ;YAAE,OAAO;QACtB,QAAQ,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC;IAC9B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,cAAc,GAAG,IAAA,mBAAW,EAChC,CAAC,KAA+B,EAAE,EAAE,CAAC,CACnC,uBAAC,kCAAmB,OACd,KAAK,EACT,cAAc,EAAE,CAAC,EACjB,iBAAiB,EAAE,CAAC,CAAC,EACrB,OAAO,EAAE,gBAAgB,EACzB,aAAa,EAAC,OAAO,GACrB,CACH,EACD,EAAE,CACH,CAAC;IAEF,MAAM,aAAa,GACjB,OAAO,WAAW,KAAK,UAAU;QAC/B,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC;QACtB,CAAC,CAAC,CAAC,WAAW,IAAI,CACd,uBAAC,qCAAiB,IAChB,eAAe,EAAE,cAAc,EAC/B,SAAS,EAAE,cAAc,EACzB,OAAO,EAAE,OAAO,GAChB,CACH,CAAC,CAAC;IAET,qEAAqE;IACrE,MAAM,YAAY,GAAG,IAAA,mBAAW,EAC9B,CAAC,KAA6B,EAAE,EAAE,CAAC,CACjC,wBAAC,mBAAI,IACH,KAAK,EAAE;YACL,MAAM,CAAC,UAAU;YACjB;gBACE,eAAe;gBACf,mBAAmB,EAAE,gBAAgB;gBACrC,oBAAoB,EAAE,gBAAgB;aACvC;SACF,aAED,uBAAC,gCAAiB,OACZ,KAAK,EACT,cAAc,EAAE;oBACd,eAAe,EAAE,gBAAgB;oBACjC,OAAO,EAAE,GAAG;iBACb,GACD,EACF,wBAAC,mBAAI,IAAC,KAAK,EAAE,MAAM,CAAC,MAAM,aACxB,uBAAC,mBAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,YAC5D,KAAK,GACD,EACN,aAAa,IACT,EACP,uBAAC,mBAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,CAAC,GAAI,IACpE,CACR,EACD;QACE,eAAe;QACf,WAAW;QACX,gBAAgB;QAChB,aAAa;QACb,SAAS;QACT,KAAK;KACN,CACF,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,MAAoB,EAAE,EAAE;QACxC,IAAI,MAAM,CAAC,QAAQ;YAAE,OAAO;QAC5B,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACvB,aAAa,EAAE,CAAC;QAChB,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;IAEF,OAAO,CACL,wBAAC,mBAAI,IACH,GAAG,EAAE,OAAO,EACZ,WAAW,EAAE,KAAK,EAClB,KAAK,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,QAAQ,IAAI,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,aAEzD,KAAK,CAAC,CAAC,CAAC,CACP,uBAAC,mBAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,YAAG,KAAK,GAAQ,CACnE,CAAC,CAAC,CAAC,IAAI,EACR,wBAAC,wBAAS,IACR,iBAAiB,EAAE,MAAM,EAAE,OAAO,IAAI,yBAAyB,EAC/D,kBAAkB,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,KAAK,OAAO,EAAE,CAAC,CAAC,CAAC,OAAO,EAC5D,iBAAiB,EAAC,QAAQ,EAC1B,kBAAkB,EAAE,EAAE,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAC3C,QAAQ,EAAE,CAAC,QAAQ,EACnB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE;oBACL,MAAM,CAAC,OAAO;oBACd;wBACE,eAAe;wBACf,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW;wBAChD,YAAY;qBACb;iBACF,aAED,uBAAC,mBAAI,IACH,aAAa,EAAE,CAAC,EAChB,KAAK,EAAE;4BACL,MAAM,CAAC,WAAW;4BAClB,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE;yBACjE,YAEA,OAAO,GACH,EACP,uBAAC,mBAAI,IACH,2BAA2B,QAC3B,yBAAyB,EAAC,IAAI,EAC9B,KAAK,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAC,uBAG/C,IACG,EACX,WAAW,CAAC,CAAC,CAAC,CACb,uBAAC,mBAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,YAAG,WAAW,GAAQ,CAC1E,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAChB,uBAAC,mBAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAC,YACtD,WAAW,GACP,CACR,CAAC,CAAC,CAAC,IAAI,EAER,uBAAC,+BAAgB,IACf,GAAG,EAAE,QAAQ,EACb,iBAAiB,EAAE,cAAc,EACjC,eAAe,EAAE;oBACf,eAAe;oBACf,mBAAmB,EAAE,gBAAgB;oBACrC,oBAAoB,EAAE,gBAAgB;iBACvC,EACD,kBAAkB,EAAE,cAAc,EAClC,mBAAmB,QACnB,oBAAoB,QACpB,eAAe,EAAE,YAAY,EAC7B,WAAW,EAAE,MAAM,CAAC,WAAW,EAC/B,qBAAqB,EAAE,qBAAqB,EAC5C,aAAa,EAAC,MAAM,YAEpB,uBAAC,oCAAqB,IACpB,qBAAqB,EAAE,MAAM,CAAC,YAAY,EAC1C,4BAA4B,EAAE,KAAK,YAElC,OAAO,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CACtB,uBAAC,mBAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAC,2BAEjD,CACR,CAAC,CAAC,CAAC,CACF,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;wBACrB,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC;wBAC1C,OAAO,CACL,wBAAC,wBAAS,IAER,iBAAiB,EAAC,QAAQ,EAC1B,kBAAkB,EAAE;gCAClB,QAAQ,EAAE,UAAU;gCACpB,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ;6BAC5B,EACD,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,EAC/B,KAAK,EAAE;gCACL,MAAM,CAAC,MAAM;gCACb,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,aAAa;6BACxC,aAED,uBAAC,mBAAI,IACH,KAAK,EAAE;wCACL,MAAM,CAAC,WAAW;wCAClB;4CACE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;4CAC7C,IAAI,EAAE,CAAC;yCACR;qCACF,YAEA,MAAM,CAAC,KAAK,GACR,EACN,UAAU,CAAC,CAAC,CAAC,CACZ,uBAAC,mBAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC,uBAE9C,CACR,CAAC,CAAC,CAAC,IAAI,KA5BH,MAAM,CAAC,KAAK,CA6BP,CACb,CAAC;oBACJ,CAAC,CAAC,CACH,GACqB,GACP,IACd,CACR,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,MAAM,EAAE;QACN,KAAK,EAAE,MAAM;QACb,GAAG,EAAE,CAAC;KACP;IACD,OAAO,EAAE;QACP,OAAO,EAAE,GAAG;KACb;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;KAClB;IACD,OAAO,EAAE;QACP,SAAS,EAAE,EAAE;QACb,KAAK,EAAE,MAAM;QACb,WAAW,EAAE,CAAC;QACd,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAE,EAAE;QACnB,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,CAAC;KACP;IACD,WAAW,EAAE;QACX,QAAQ,EAAE,EAAE;KACb;IACD,OAAO,EAAE;QACP,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,EAAE;QACd,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;KACjC;IACD,MAAM,EAAE;QACN,QAAQ,EAAE,EAAE;KACb;IACD,WAAW,EAAE;QACX,aAAa,EAAE,CAAC;KACjB;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,QAAQ;KACnB;IACD,YAAY,EAAE;QACZ,aAAa,EAAE,EAAE;KAClB;IACD,MAAM,EAAE;QACN,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,EAAE;QACP,iBAAiB,EAAE,EAAE;QACrB,UAAU,EAAE,CAAC;QACb,aAAa,EAAE,EAAE;KAClB;IACD,aAAa,EAAE;QACb,MAAM,EAAE,yBAAU,CAAC,aAAa;KACjC;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;KAClB;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,EAAE;QACZ,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAE,EAAE;KACpB;IACD,MAAM,EAAE;QACN,SAAS,EAAE,EAAE;QACb,iBAAiB,EAAE,EAAE;QACrB,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,EAAE;KACR;IACD,aAAa,EAAE;QACb,OAAO,EAAE,GAAG;KACb;IACD,WAAW,EAAE;QACX,QAAQ,EAAE,EAAE;KACb;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;KAClB;CACF,CAAC,CAAC"}
|
|
@@ -8,6 +8,8 @@ export type SelectOption = {
|
|
|
8
8
|
};
|
|
9
9
|
export type SelectCloseButton = ReactNode | ((dismiss: () => void) => ReactNode);
|
|
10
10
|
export type SelectProps = {
|
|
11
|
+
/** Registers the field with `Form` / `ErrorBannerProvider` for banner rows. */
|
|
12
|
+
name?: string;
|
|
11
13
|
value: string | null;
|
|
12
14
|
onChange: (value: string) => void;
|
|
13
15
|
options: SelectOption[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GACzB,SAAS,GACT,CAAC,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC,CAAC;AAEzC,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6FAA6F;IAC7F,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,yHAAyH;IACzH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,iFAAiF;IACjF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GACzB,SAAS,GACT,CAAC,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC,CAAC;AAEzC,MAAM,MAAM,WAAW,GAAG;IACxB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6FAA6F;IAC7F,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,yHAAyH;IACzH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,iFAAiF;IACjF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,IAAI,EACJ,KAAK,EACL,WAAoB,EACpB,QAAgB,EAChB,UAAU,EAAE,cAAc,EAC1B,UAAU,EAAE,cAAc,EAC1B,cAAc,EAAE,kBAAkB,EAClC,UAAU,EAAE,cAAc,EAC1B,KAAK,GACN,EAAE,WAAW,+BAoDb"}
|
|
@@ -7,6 +7,7 @@ exports.Slider = Slider;
|
|
|
7
7
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
8
|
const react_native_1 = require("react-native");
|
|
9
9
|
const slider_1 = __importDefault(require("@react-native-community/slider"));
|
|
10
|
+
const ErrorBanner_1 = require("../ErrorBanner");
|
|
10
11
|
const useResolvedFieldColor_1 = require("../Field/useResolvedFieldColor");
|
|
11
12
|
const sliderThemeRoles_1 = require("./sliderThemeRoles");
|
|
12
13
|
function Slider({ value, onChange, minimumValue, maximumValue, step, label, formatValue = String, disabled = false, labelColor: labelColorProp, valueColor: valueColorProp, highlightColor: highlightColorProp, trackColor: trackColorProp, style, }) {
|
|
@@ -14,9 +15,13 @@ function Slider({ value, onChange, minimumValue, maximumValue, step, label, form
|
|
|
14
15
|
const valueColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(valueColorProp, sliderThemeRoles_1.SLIDER_THEME_ROLES.valueColor);
|
|
15
16
|
const highlightColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(highlightColorProp, sliderThemeRoles_1.SLIDER_THEME_ROLES.highlightColor);
|
|
16
17
|
const trackColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(trackColorProp, sliderThemeRoles_1.SLIDER_THEME_ROLES.trackColor);
|
|
18
|
+
const dismissBanner = (0, ErrorBanner_1.useErrorBannerDismiss)();
|
|
17
19
|
const display = formatValue(value);
|
|
18
20
|
const accessibilityLabel = label ? `${label}. ${display}` : display;
|
|
19
|
-
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.column, disabled && styles.blocked, style], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.header, children: [label ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.label, { color: labelColor, flex: 1 }], children: label })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flex: 1 } })), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.value, { color: valueColor }], children: display })] }), (0, jsx_runtime_1.jsx)(slider_1.default, { accessibilityLabel: accessibilityLabel, disabled: disabled, maximumTrackTintColor: trackColor, maximumValue: maximumValue, minimumTrackTintColor: highlightColor, minimumValue: minimumValue, onValueChange:
|
|
21
|
+
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.column, disabled && styles.blocked, style], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.header, children: [label ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.label, { color: labelColor, flex: 1 }], children: label })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flex: 1 } })), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.value, { color: valueColor }], children: display })] }), (0, jsx_runtime_1.jsx)(slider_1.default, { accessibilityLabel: accessibilityLabel, disabled: disabled, maximumTrackTintColor: trackColor, maximumValue: maximumValue, minimumTrackTintColor: highlightColor, minimumValue: minimumValue, onValueChange: (next) => {
|
|
22
|
+
onChange(next);
|
|
23
|
+
dismissBanner();
|
|
24
|
+
}, step: step, style: styles.track, thumbTintColor: highlightColor, value: value })] }));
|
|
20
25
|
}
|
|
21
26
|
const styles = react_native_1.StyleSheet.create({
|
|
22
27
|
column: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,7 +2,9 @@ export { Button, type ButtonProps, buttonRadiusValue, type ButtonRadius, } from
|
|
|
2
2
|
export { LinkBlocks, filterLinkBlockGroups, type LinkBlockGroup, type LinkBlockItem, type LinkBlocksProps, } from "./LinkBlocks";
|
|
3
3
|
export { FieldText, FieldTextarea, FIELD_THEME_ROLES, type FieldThemeColorProp, type FieldSharedProps, type FieldTextProps, type FieldTextareaProps, } from "./Field";
|
|
4
4
|
export { Form, FormCloseButton, type FormProps } from "./Form";
|
|
5
|
+
export { ErrorBanner, ErrorBannerField, ErrorBannerProvider, ERROR_BANNER_THEME_ROLES, useErrorBanner, useErrorBannerContext, useErrorBannerDismiss, useErrorBannerField, type ErrorBannerThemeColorProp, type ErrorBannerProps, type FieldError, } from "./ErrorBanner";
|
|
5
6
|
export { RadioField, RADIO_THEME_ROLES, type RadioThemeColorProp, type RadioOption, type RadioFieldProps, } from "./RadioField";
|
|
6
7
|
export { Select, SelectCloseButton, SELECT_THEME_ROLES, DEFAULT_SELECT_DETENTS, DEFAULT_SELECT_INITIAL_DETENT, detentsToSnapPoints, resolveSelectDetentIndex, type SelectThemeColorProp, type SelectCloseButtonSlot, type SelectOption, type SelectProps, } from "./Select";
|
|
8
|
+
export { SegmentedControl, SEGMENTED_THEME_ROLES, type SegmentedThemeColorProp, type SegmentedOption, type SegmentedControlProps, } from "./SegmentedControl";
|
|
7
9
|
export { Slider, SLIDER_THEME_ROLES, type SliderThemeColorProp, type SliderProps, } from "./Slider";
|
|
8
10
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,KAAK,WAAW,EAChB,iBAAiB,EACjB,KAAK,YAAY,GAClB,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,UAAU,EACV,qBAAqB,EACrB,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,eAAe,GACrB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,kBAAkB,GACxB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC/D,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,KAAK,mBAAmB,EACxB,KAAK,WAAW,EAChB,KAAK,eAAe,GACrB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,MAAM,EACN,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,6BAA6B,EAC7B,mBAAmB,EACnB,wBAAwB,EACxB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,EAC1B,KAAK,YAAY,EACjB,KAAK,WAAW,GACjB,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,MAAM,EACN,kBAAkB,EAClB,KAAK,oBAAoB,EACzB,KAAK,WAAW,GACjB,MAAM,UAAU,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,KAAK,WAAW,EAChB,iBAAiB,EACjB,KAAK,YAAY,GAClB,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,UAAU,EACV,qBAAqB,EACrB,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,eAAe,GACrB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,kBAAkB,GACxB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC/D,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACnB,wBAAwB,EACxB,cAAc,EACd,qBAAqB,EACrB,qBAAqB,EACrB,mBAAmB,EACnB,KAAK,yBAAyB,EAC9B,KAAK,gBAAgB,EACrB,KAAK,UAAU,GAChB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,KAAK,mBAAmB,EACxB,KAAK,WAAW,EAChB,KAAK,eAAe,GACrB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,MAAM,EACN,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,6BAA6B,EAC7B,mBAAmB,EACnB,wBAAwB,EACxB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,EAC1B,KAAK,YAAY,EACjB,KAAK,WAAW,GACjB,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,gBAAgB,EAChB,qBAAqB,EACrB,KAAK,uBAAuB,EAC5B,KAAK,eAAe,EACpB,KAAK,qBAAqB,GAC3B,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,MAAM,EACN,kBAAkB,EAClB,KAAK,oBAAoB,EACzB,KAAK,WAAW,GACjB,MAAM,UAAU,CAAC"}
|
package/dist/components/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.SLIDER_THEME_ROLES = exports.Slider = exports.resolveSelectDetentIndex = exports.detentsToSnapPoints = exports.DEFAULT_SELECT_INITIAL_DETENT = exports.DEFAULT_SELECT_DETENTS = exports.SELECT_THEME_ROLES = exports.SelectCloseButton = exports.Select = exports.RADIO_THEME_ROLES = exports.RadioField = exports.FormCloseButton = exports.Form = exports.FIELD_THEME_ROLES = exports.FieldTextarea = exports.FieldText = exports.filterLinkBlockGroups = exports.LinkBlocks = exports.buttonRadiusValue = exports.Button = void 0;
|
|
3
|
+
exports.SLIDER_THEME_ROLES = exports.Slider = exports.SEGMENTED_THEME_ROLES = exports.SegmentedControl = exports.resolveSelectDetentIndex = exports.detentsToSnapPoints = exports.DEFAULT_SELECT_INITIAL_DETENT = exports.DEFAULT_SELECT_DETENTS = exports.SELECT_THEME_ROLES = exports.SelectCloseButton = exports.Select = exports.RADIO_THEME_ROLES = exports.RadioField = exports.useErrorBannerField = exports.useErrorBannerDismiss = exports.useErrorBannerContext = exports.useErrorBanner = exports.ERROR_BANNER_THEME_ROLES = exports.ErrorBannerProvider = exports.ErrorBannerField = exports.ErrorBanner = exports.FormCloseButton = exports.Form = exports.FIELD_THEME_ROLES = exports.FieldTextarea = exports.FieldText = exports.filterLinkBlockGroups = exports.LinkBlocks = exports.buttonRadiusValue = exports.Button = void 0;
|
|
4
4
|
var Button_1 = require("./Button");
|
|
5
5
|
Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
|
|
6
6
|
Object.defineProperty(exports, "buttonRadiusValue", { enumerable: true, get: function () { return Button_1.buttonRadiusValue; } });
|
|
@@ -14,6 +14,15 @@ Object.defineProperty(exports, "FIELD_THEME_ROLES", { enumerable: true, get: fun
|
|
|
14
14
|
var Form_1 = require("./Form");
|
|
15
15
|
Object.defineProperty(exports, "Form", { enumerable: true, get: function () { return Form_1.Form; } });
|
|
16
16
|
Object.defineProperty(exports, "FormCloseButton", { enumerable: true, get: function () { return Form_1.FormCloseButton; } });
|
|
17
|
+
var ErrorBanner_1 = require("./ErrorBanner");
|
|
18
|
+
Object.defineProperty(exports, "ErrorBanner", { enumerable: true, get: function () { return ErrorBanner_1.ErrorBanner; } });
|
|
19
|
+
Object.defineProperty(exports, "ErrorBannerField", { enumerable: true, get: function () { return ErrorBanner_1.ErrorBannerField; } });
|
|
20
|
+
Object.defineProperty(exports, "ErrorBannerProvider", { enumerable: true, get: function () { return ErrorBanner_1.ErrorBannerProvider; } });
|
|
21
|
+
Object.defineProperty(exports, "ERROR_BANNER_THEME_ROLES", { enumerable: true, get: function () { return ErrorBanner_1.ERROR_BANNER_THEME_ROLES; } });
|
|
22
|
+
Object.defineProperty(exports, "useErrorBanner", { enumerable: true, get: function () { return ErrorBanner_1.useErrorBanner; } });
|
|
23
|
+
Object.defineProperty(exports, "useErrorBannerContext", { enumerable: true, get: function () { return ErrorBanner_1.useErrorBannerContext; } });
|
|
24
|
+
Object.defineProperty(exports, "useErrorBannerDismiss", { enumerable: true, get: function () { return ErrorBanner_1.useErrorBannerDismiss; } });
|
|
25
|
+
Object.defineProperty(exports, "useErrorBannerField", { enumerable: true, get: function () { return ErrorBanner_1.useErrorBannerField; } });
|
|
17
26
|
var RadioField_1 = require("./RadioField");
|
|
18
27
|
Object.defineProperty(exports, "RadioField", { enumerable: true, get: function () { return RadioField_1.RadioField; } });
|
|
19
28
|
Object.defineProperty(exports, "RADIO_THEME_ROLES", { enumerable: true, get: function () { return RadioField_1.RADIO_THEME_ROLES; } });
|
|
@@ -25,6 +34,9 @@ Object.defineProperty(exports, "DEFAULT_SELECT_DETENTS", { enumerable: true, get
|
|
|
25
34
|
Object.defineProperty(exports, "DEFAULT_SELECT_INITIAL_DETENT", { enumerable: true, get: function () { return Select_1.DEFAULT_SELECT_INITIAL_DETENT; } });
|
|
26
35
|
Object.defineProperty(exports, "detentsToSnapPoints", { enumerable: true, get: function () { return Select_1.detentsToSnapPoints; } });
|
|
27
36
|
Object.defineProperty(exports, "resolveSelectDetentIndex", { enumerable: true, get: function () { return Select_1.resolveSelectDetentIndex; } });
|
|
37
|
+
var SegmentedControl_1 = require("./SegmentedControl");
|
|
38
|
+
Object.defineProperty(exports, "SegmentedControl", { enumerable: true, get: function () { return SegmentedControl_1.SegmentedControl; } });
|
|
39
|
+
Object.defineProperty(exports, "SEGMENTED_THEME_ROLES", { enumerable: true, get: function () { return SegmentedControl_1.SEGMENTED_THEME_ROLES; } });
|
|
28
40
|
var Slider_1 = require("./Slider");
|
|
29
41
|
Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_1.Slider; } });
|
|
30
42
|
Object.defineProperty(exports, "SLIDER_THEME_ROLES", { enumerable: true, get: function () { return Slider_1.SLIDER_THEME_ROLES; } });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":";;;AAAA,mCAKkB;AAJhB,gGAAA,MAAM,OAAA;AAEN,2GAAA,iBAAiB,OAAA;AAGnB,2CAMsB;AALpB,wGAAA,UAAU,OAAA;AACV,mHAAA,qBAAqB,OAAA;AAKvB,iCAQiB;AAPf,kGAAA,SAAS,OAAA;AACT,sGAAA,aAAa,OAAA;AACb,0GAAA,iBAAiB,OAAA;AAMnB,+BAA+D;AAAtD,4FAAA,IAAI,OAAA;AAAE,uGAAA,eAAe,OAAA;AAC9B,2CAMsB;AALpB,wGAAA,UAAU,OAAA;AACV,+GAAA,iBAAiB,OAAA;AAKnB,mCAYkB;AAXhB,gGAAA,MAAM,OAAA;AACN,2GAAA,iBAAiB,OAAA;AACjB,4GAAA,kBAAkB,OAAA;AAClB,gHAAA,sBAAsB,OAAA;AACtB,uHAAA,6BAA6B,OAAA;AAC7B,6GAAA,mBAAmB,OAAA;AACnB,kHAAA,wBAAwB,OAAA;AAM1B,mCAKkB;AAJhB,gGAAA,MAAM,OAAA;AACN,4GAAA,kBAAkB,OAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":";;;AAAA,mCAKkB;AAJhB,gGAAA,MAAM,OAAA;AAEN,2GAAA,iBAAiB,OAAA;AAGnB,2CAMsB;AALpB,wGAAA,UAAU,OAAA;AACV,mHAAA,qBAAqB,OAAA;AAKvB,iCAQiB;AAPf,kGAAA,SAAS,OAAA;AACT,sGAAA,aAAa,OAAA;AACb,0GAAA,iBAAiB,OAAA;AAMnB,+BAA+D;AAAtD,4FAAA,IAAI,OAAA;AAAE,uGAAA,eAAe,OAAA;AAC9B,6CAYuB;AAXrB,0GAAA,WAAW,OAAA;AACX,+GAAA,gBAAgB,OAAA;AAChB,kHAAA,mBAAmB,OAAA;AACnB,uHAAA,wBAAwB,OAAA;AACxB,6GAAA,cAAc,OAAA;AACd,oHAAA,qBAAqB,OAAA;AACrB,oHAAA,qBAAqB,OAAA;AACrB,kHAAA,mBAAmB,OAAA;AAKrB,2CAMsB;AALpB,wGAAA,UAAU,OAAA;AACV,+GAAA,iBAAiB,OAAA;AAKnB,mCAYkB;AAXhB,gGAAA,MAAM,OAAA;AACN,2GAAA,iBAAiB,OAAA;AACjB,4GAAA,kBAAkB,OAAA;AAClB,gHAAA,sBAAsB,OAAA;AACtB,uHAAA,6BAA6B,OAAA;AAC7B,6GAAA,mBAAmB,OAAA;AACnB,kHAAA,wBAAwB,OAAA;AAM1B,uDAM4B;AAL1B,oHAAA,gBAAgB,OAAA;AAChB,yHAAA,qBAAqB,OAAA;AAKvB,mCAKkB;AAJhB,gGAAA,MAAM,OAAA;AACN,4GAAA,kBAAkB,OAAA"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
export declare const version = "0.2.
|
|
1
|
+
export declare const version = "0.2.4";
|
|
2
2
|
export * from "./theme";
|
|
3
3
|
export { Button, type ButtonProps, buttonRadiusValue, type ButtonRadius, } from "./components/Button";
|
|
4
4
|
export { LinkBlocks, filterLinkBlockGroups, type LinkBlockGroup, type LinkBlockItem, type LinkBlocksProps, } from "./components/LinkBlocks";
|
|
5
5
|
export { FieldText, FieldTextarea, FIELD_THEME_ROLES, type FieldThemeColorProp, type FieldSharedProps, type FieldTextProps, type FieldTextareaProps, } from "./components/Field";
|
|
6
6
|
export { Form, FormCloseButton, type FormProps, } from "./components/Form";
|
|
7
|
+
export { ErrorBanner, ErrorBannerField, ErrorBannerProvider, ERROR_BANNER_THEME_ROLES, useErrorBanner, useErrorBannerContext, useErrorBannerDismiss, useErrorBannerField, type ErrorBannerThemeColorProp, type ErrorBannerProps, type FieldError, } from "./components/ErrorBanner";
|
|
7
8
|
export { RadioField, RADIO_THEME_ROLES, type RadioThemeColorProp, type RadioOption, type RadioFieldProps, } from "./components/RadioField";
|
|
8
9
|
export { Select, SelectCloseButton, SELECT_THEME_ROLES, DEFAULT_SELECT_DETENTS, DEFAULT_SELECT_INITIAL_DETENT, detentsToSnapPoints, resolveSelectDetentIndex, type SelectThemeColorProp, type SelectCloseButtonSlot, type SelectOption, type SelectProps, } from "./components/Select";
|
|
10
|
+
export { SegmentedControl, SEGMENTED_THEME_ROLES, type SegmentedThemeColorProp, type SegmentedOption, type SegmentedControlProps, } from "./components/SegmentedControl";
|
|
9
11
|
export { Slider, SLIDER_THEME_ROLES, type SliderThemeColorProp, type SliderProps, } from "./components/Slider";
|
|
10
12
|
export * as components from "./components";
|
|
11
13
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,UAAU,CAAC;AAE/B,cAAc,SAAS,CAAC;AACxB,OAAO,EACL,MAAM,EACN,KAAK,WAAW,EAChB,iBAAiB,EACjB,KAAK,YAAY,GAClB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,UAAU,EACV,qBAAqB,EACrB,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,eAAe,GACrB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,kBAAkB,GACxB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,IAAI,EACJ,eAAe,EACf,KAAK,SAAS,GACf,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,KAAK,mBAAmB,EACxB,KAAK,WAAW,EAChB,KAAK,eAAe,GACrB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,MAAM,EACN,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,6BAA6B,EAC7B,mBAAmB,EACnB,wBAAwB,EACxB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,EAC1B,KAAK,YAAY,EACjB,KAAK,WAAW,GACjB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,MAAM,EACN,kBAAkB,EAClB,KAAK,oBAAoB,EACzB,KAAK,WAAW,GACjB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,UAAU,CAAC;AAE/B,cAAc,SAAS,CAAC;AACxB,OAAO,EACL,MAAM,EACN,KAAK,WAAW,EAChB,iBAAiB,EACjB,KAAK,YAAY,GAClB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,UAAU,EACV,qBAAqB,EACrB,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,eAAe,GACrB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,kBAAkB,GACxB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,IAAI,EACJ,eAAe,EACf,KAAK,SAAS,GACf,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACnB,wBAAwB,EACxB,cAAc,EACd,qBAAqB,EACrB,qBAAqB,EACrB,mBAAmB,EACnB,KAAK,yBAAyB,EAC9B,KAAK,gBAAgB,EACrB,KAAK,UAAU,GAChB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,KAAK,mBAAmB,EACxB,KAAK,WAAW,EAChB,KAAK,eAAe,GACrB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,MAAM,EACN,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,6BAA6B,EAC7B,mBAAmB,EACnB,wBAAwB,EACxB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,EAC1B,KAAK,YAAY,EACjB,KAAK,WAAW,GACjB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,gBAAgB,EAChB,qBAAqB,EACrB,KAAK,uBAAuB,EAC5B,KAAK,eAAe,EACpB,KAAK,qBAAqB,GAC3B,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,MAAM,EACN,kBAAkB,EAClB,KAAK,oBAAoB,EACzB,KAAK,WAAW,GACjB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -36,8 +36,8 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
36
36
|
};
|
|
37
37
|
})();
|
|
38
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
-
exports.components = exports.SLIDER_THEME_ROLES = exports.Slider = exports.resolveSelectDetentIndex = exports.detentsToSnapPoints = exports.DEFAULT_SELECT_INITIAL_DETENT = exports.DEFAULT_SELECT_DETENTS = exports.SELECT_THEME_ROLES = exports.SelectCloseButton = exports.Select = exports.RADIO_THEME_ROLES = exports.RadioField = exports.FormCloseButton = exports.Form = exports.FIELD_THEME_ROLES = exports.FieldTextarea = exports.FieldText = exports.filterLinkBlockGroups = exports.LinkBlocks = exports.buttonRadiusValue = exports.Button = exports.version = void 0;
|
|
40
|
-
exports.version = "0.2.
|
|
39
|
+
exports.components = exports.SLIDER_THEME_ROLES = exports.Slider = exports.SEGMENTED_THEME_ROLES = exports.SegmentedControl = exports.resolveSelectDetentIndex = exports.detentsToSnapPoints = exports.DEFAULT_SELECT_INITIAL_DETENT = exports.DEFAULT_SELECT_DETENTS = exports.SELECT_THEME_ROLES = exports.SelectCloseButton = exports.Select = exports.RADIO_THEME_ROLES = exports.RadioField = exports.useErrorBannerField = exports.useErrorBannerDismiss = exports.useErrorBannerContext = exports.useErrorBanner = exports.ERROR_BANNER_THEME_ROLES = exports.ErrorBannerProvider = exports.ErrorBannerField = exports.ErrorBanner = exports.FormCloseButton = exports.Form = exports.FIELD_THEME_ROLES = exports.FieldTextarea = exports.FieldText = exports.filterLinkBlockGroups = exports.LinkBlocks = exports.buttonRadiusValue = exports.Button = exports.version = void 0;
|
|
40
|
+
exports.version = "0.2.4";
|
|
41
41
|
__exportStar(require("./theme"), exports);
|
|
42
42
|
var Button_1 = require("./components/Button");
|
|
43
43
|
Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
|
|
@@ -52,6 +52,15 @@ Object.defineProperty(exports, "FIELD_THEME_ROLES", { enumerable: true, get: fun
|
|
|
52
52
|
var Form_1 = require("./components/Form");
|
|
53
53
|
Object.defineProperty(exports, "Form", { enumerable: true, get: function () { return Form_1.Form; } });
|
|
54
54
|
Object.defineProperty(exports, "FormCloseButton", { enumerable: true, get: function () { return Form_1.FormCloseButton; } });
|
|
55
|
+
var ErrorBanner_1 = require("./components/ErrorBanner");
|
|
56
|
+
Object.defineProperty(exports, "ErrorBanner", { enumerable: true, get: function () { return ErrorBanner_1.ErrorBanner; } });
|
|
57
|
+
Object.defineProperty(exports, "ErrorBannerField", { enumerable: true, get: function () { return ErrorBanner_1.ErrorBannerField; } });
|
|
58
|
+
Object.defineProperty(exports, "ErrorBannerProvider", { enumerable: true, get: function () { return ErrorBanner_1.ErrorBannerProvider; } });
|
|
59
|
+
Object.defineProperty(exports, "ERROR_BANNER_THEME_ROLES", { enumerable: true, get: function () { return ErrorBanner_1.ERROR_BANNER_THEME_ROLES; } });
|
|
60
|
+
Object.defineProperty(exports, "useErrorBanner", { enumerable: true, get: function () { return ErrorBanner_1.useErrorBanner; } });
|
|
61
|
+
Object.defineProperty(exports, "useErrorBannerContext", { enumerable: true, get: function () { return ErrorBanner_1.useErrorBannerContext; } });
|
|
62
|
+
Object.defineProperty(exports, "useErrorBannerDismiss", { enumerable: true, get: function () { return ErrorBanner_1.useErrorBannerDismiss; } });
|
|
63
|
+
Object.defineProperty(exports, "useErrorBannerField", { enumerable: true, get: function () { return ErrorBanner_1.useErrorBannerField; } });
|
|
55
64
|
var RadioField_1 = require("./components/RadioField");
|
|
56
65
|
Object.defineProperty(exports, "RadioField", { enumerable: true, get: function () { return RadioField_1.RadioField; } });
|
|
57
66
|
Object.defineProperty(exports, "RADIO_THEME_ROLES", { enumerable: true, get: function () { return RadioField_1.RADIO_THEME_ROLES; } });
|
|
@@ -63,6 +72,9 @@ Object.defineProperty(exports, "DEFAULT_SELECT_DETENTS", { enumerable: true, get
|
|
|
63
72
|
Object.defineProperty(exports, "DEFAULT_SELECT_INITIAL_DETENT", { enumerable: true, get: function () { return Select_1.DEFAULT_SELECT_INITIAL_DETENT; } });
|
|
64
73
|
Object.defineProperty(exports, "detentsToSnapPoints", { enumerable: true, get: function () { return Select_1.detentsToSnapPoints; } });
|
|
65
74
|
Object.defineProperty(exports, "resolveSelectDetentIndex", { enumerable: true, get: function () { return Select_1.resolveSelectDetentIndex; } });
|
|
75
|
+
var SegmentedControl_1 = require("./components/SegmentedControl");
|
|
76
|
+
Object.defineProperty(exports, "SegmentedControl", { enumerable: true, get: function () { return SegmentedControl_1.SegmentedControl; } });
|
|
77
|
+
Object.defineProperty(exports, "SEGMENTED_THEME_ROLES", { enumerable: true, get: function () { return SegmentedControl_1.SEGMENTED_THEME_ROLES; } });
|
|
66
78
|
var Slider_1 = require("./components/Slider");
|
|
67
79
|
Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_1.Slider; } });
|
|
68
80
|
Object.defineProperty(exports, "SLIDER_THEME_ROLES", { enumerable: true, get: function () { return Slider_1.SLIDER_THEME_ROLES; } });
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa,QAAA,OAAO,GAAG,OAAO,CAAC;AAE/B,0CAAwB;AACxB,8CAK6B;AAJ3B,gGAAA,MAAM,OAAA;AAEN,2GAAA,iBAAiB,OAAA;AAGnB,sDAMiC;AAL/B,wGAAA,UAAU,OAAA;AACV,mHAAA,qBAAqB,OAAA;AAKvB,4CAQ4B;AAP1B,kGAAA,SAAS,OAAA;AACT,sGAAA,aAAa,OAAA;AACb,0GAAA,iBAAiB,OAAA;AAMnB,0CAI2B;AAHzB,4FAAA,IAAI,OAAA;AACJ,uGAAA,eAAe,OAAA;AAGjB,sDAMiC;AAL/B,wGAAA,UAAU,OAAA;AACV,+GAAA,iBAAiB,OAAA;AAKnB,8CAY6B;AAX3B,gGAAA,MAAM,OAAA;AACN,2GAAA,iBAAiB,OAAA;AACjB,4GAAA,kBAAkB,OAAA;AAClB,gHAAA,sBAAsB,OAAA;AACtB,uHAAA,6BAA6B,OAAA;AAC7B,6GAAA,mBAAmB,OAAA;AACnB,kHAAA,wBAAwB,OAAA;AAM1B,8CAK6B;AAJ3B,gGAAA,MAAM,OAAA;AACN,4GAAA,kBAAkB,OAAA;AAIpB,2DAA2C"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa,QAAA,OAAO,GAAG,OAAO,CAAC;AAE/B,0CAAwB;AACxB,8CAK6B;AAJ3B,gGAAA,MAAM,OAAA;AAEN,2GAAA,iBAAiB,OAAA;AAGnB,sDAMiC;AAL/B,wGAAA,UAAU,OAAA;AACV,mHAAA,qBAAqB,OAAA;AAKvB,4CAQ4B;AAP1B,kGAAA,SAAS,OAAA;AACT,sGAAA,aAAa,OAAA;AACb,0GAAA,iBAAiB,OAAA;AAMnB,0CAI2B;AAHzB,4FAAA,IAAI,OAAA;AACJ,uGAAA,eAAe,OAAA;AAGjB,wDAYkC;AAXhC,0GAAA,WAAW,OAAA;AACX,+GAAA,gBAAgB,OAAA;AAChB,kHAAA,mBAAmB,OAAA;AACnB,uHAAA,wBAAwB,OAAA;AACxB,6GAAA,cAAc,OAAA;AACd,oHAAA,qBAAqB,OAAA;AACrB,oHAAA,qBAAqB,OAAA;AACrB,kHAAA,mBAAmB,OAAA;AAKrB,sDAMiC;AAL/B,wGAAA,UAAU,OAAA;AACV,+GAAA,iBAAiB,OAAA;AAKnB,8CAY6B;AAX3B,gGAAA,MAAM,OAAA;AACN,2GAAA,iBAAiB,OAAA;AACjB,4GAAA,kBAAkB,OAAA;AAClB,gHAAA,sBAAsB,OAAA;AACtB,uHAAA,6BAA6B,OAAA;AAC7B,6GAAA,mBAAmB,OAAA;AACnB,kHAAA,wBAAwB,OAAA;AAM1B,kEAMuC;AALrC,oHAAA,gBAAgB,OAAA;AAChB,yHAAA,qBAAqB,OAAA;AAKvB,8CAK6B;AAJ3B,gGAAA,MAAM,OAAA;AACN,4GAAA,kBAAkB,OAAA;AAIpB,2DAA2C"}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
# ErrorBanner — usage
|
|
2
|
+
|
|
3
|
+
A screen-wide banner for field errors. Each row scrolls that field into view. The cross dismisses it. Editing a field on the screen dismisses it too. It is not tied to one form shell. `Form` mounts it whenever you pass `errors`.
|
|
4
|
+
|
|
5
|
+
Colours come from `ThemeProvider`. Pass a prop only to override. The megaphone disc uses the accent colour; the icon is drawn in the banner background colour.
|
|
6
|
+
|
|
7
|
+
## Peer dependency
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npx expo install react-native-svg
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Theme roles
|
|
14
|
+
|
|
15
|
+
Set these in both light and dark. The Ribe banner stays charcoal with a flare disc in both schemes.
|
|
16
|
+
|
|
17
|
+
| Usage | Role |
|
|
18
|
+
|---|---|
|
|
19
|
+
| Banner fill | `errorBannerBackground` |
|
|
20
|
+
| Title and rows | `errorBannerText` |
|
|
21
|
+
| Dismiss and arrows | `errorBannerSecondary` |
|
|
22
|
+
| Row dividers | `errorBannerDivider` |
|
|
23
|
+
| Megaphone disc | `errorBannerAccent` |
|
|
24
|
+
|
|
25
|
+
## With Form
|
|
26
|
+
|
|
27
|
+
Give each field a `name` that matches `FieldError.field`. On submit, set `errors`. `Form` opens the banner. Typing in a field, changing a choice, or pressing ✕ hides it. The next submit shows it again. While an error is listed, that field keeps the error border and does not repeat the message underneath.
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
import { FieldText, Form, Select, type FieldError } from "@studio-piot/native-ui";
|
|
31
|
+
import { useState } from "react";
|
|
32
|
+
|
|
33
|
+
export function NewActivity({ onClose }: { onClose: () => void }) {
|
|
34
|
+
const [name, setName] = useState("");
|
|
35
|
+
const [type, setType] = useState<string | null>(null);
|
|
36
|
+
const [errors, setErrors] = useState<FieldError[]>([]);
|
|
37
|
+
|
|
38
|
+
const submit = () => {
|
|
39
|
+
const next: FieldError[] = [];
|
|
40
|
+
if (!name.trim()) {
|
|
41
|
+
next.push({
|
|
42
|
+
field: "name",
|
|
43
|
+
short: "Add a name for the activity",
|
|
44
|
+
message: "Give the activity a name so you can find it later.",
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
if (!type) {
|
|
48
|
+
next.push({
|
|
49
|
+
field: "type",
|
|
50
|
+
short: "Choose a type",
|
|
51
|
+
message: "Choose a type such as ride, run, or swim.",
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
setErrors(next);
|
|
55
|
+
if (next.length === 0) onClose();
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
return (
|
|
59
|
+
<Form title="New activity" errors={errors} onClose={onClose} onSubmit={submit}>
|
|
60
|
+
<FieldText name="name" label="Name" value={name} onChangeText={setName} />
|
|
61
|
+
<Select
|
|
62
|
+
name="type"
|
|
63
|
+
label="Type"
|
|
64
|
+
value={type}
|
|
65
|
+
onChange={setType}
|
|
66
|
+
options={[{ value: "run", label: "Run" }]}
|
|
67
|
+
/>
|
|
68
|
+
</Form>
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
List errors in the same order as the fields, top to bottom.
|
|
74
|
+
|
|
75
|
+
## Without Form
|
|
76
|
+
|
|
77
|
+
`ErrorBanner`, `useErrorBanner`, and `ErrorBannerProvider` work with any scroll view. Put the banner inside the provider and call `jump` from context so a row scrolls the matching `ErrorBannerField` (or a package field with `name`) into view. Call `present` on submit and `dismiss` when the runner edits the screen.
|
|
78
|
+
|
|
79
|
+
## FieldError
|
|
80
|
+
|
|
81
|
+
| Prop | Type | Notes |
|
|
82
|
+
|---|---|---|
|
|
83
|
+
| `field` | `string` | Same as the field `name` |
|
|
84
|
+
| `short` | `string` | Banner row, about 40 characters |
|
|
85
|
+
| `message` | `string` | Accessibility hint on the field |
|
package/docs/components/form.md
CHANGED
|
@@ -64,7 +64,8 @@ The default package `FormCloseButton` is a themed text Cancel. Export it if you
|
|
|
64
64
|
| `title` | `string` | — | Required. Header title |
|
|
65
65
|
| `children` | `ReactNode` | — | Required. Scroll body |
|
|
66
66
|
| `onClose` | `() => void` | — | Required. Wired to default Cancel |
|
|
67
|
-
| `onSubmit` | `() => void` | — | Required. Sticky Save |
|
|
67
|
+
| `onSubmit` | `() => void` | — | Required. Sticky Save. Presents the error banner, then runs. |
|
|
68
|
+
| `errors` | `FieldError[]` | `[]` | Field errors. The banner lists them and scrolls to each `name`. Editing a field dismisses the banner; the next submit shows it again. |
|
|
68
69
|
| `submitLabel` | `string` | `"Save"` | |
|
|
69
70
|
| `submitting` | `boolean` | `false` | Loading on submit |
|
|
70
71
|
| `submitDisabled` | `boolean` | `false` | |
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
# SegmentedControl — usage
|
|
2
|
+
|
|
3
|
+
Presentational controlled choice shown as a row of pressable segments. One selection fill sits behind the selected segment and slides to the next choice. It is a radio group: one value, `onChange` with the next value. Colours default from `ThemeProvider`; pass props only to override. Your app owns form state.
|
|
4
|
+
|
|
5
|
+
React Native has no segmented control. iOS `UISegmentedControl` and Android Material segmented buttons are separate platform widgets, and they do not use this package’s theme roles. This control draws the row itself and moves the selection fill with `react-native-reanimated`, which is already a peer (used by `Select`).
|
|
6
|
+
|
|
7
|
+
## SegmentedControl
|
|
8
|
+
|
|
9
|
+
`SegmentedControl` is controlled only (`value` + `onChange`). When colour props are omitted, colours resolve from fixed theme roles (see below). Explicit colour props always win. `ThemeProvider` is required when at least one colour prop is omitted. Full width of the parent is fixed. An empty `options` array renders nothing. `value={null}` shows the track with no selection fill.
|
|
10
|
+
|
|
11
|
+
```tsx
|
|
12
|
+
import { SegmentedControl } from "@studio-piot/native-ui";
|
|
13
|
+
import { useState } from "react";
|
|
14
|
+
|
|
15
|
+
type DipslideStatus = "ON" | "OFF";
|
|
16
|
+
|
|
17
|
+
const statusOptions = [
|
|
18
|
+
{ value: "ON" as const, label: "On" },
|
|
19
|
+
{ value: "OFF" as const, label: "Off" },
|
|
20
|
+
];
|
|
21
|
+
|
|
22
|
+
export function DipslideStatusField() {
|
|
23
|
+
const [status, setStatus] = useState<DipslideStatus>("ON");
|
|
24
|
+
|
|
25
|
+
return (
|
|
26
|
+
<SegmentedControl
|
|
27
|
+
label="Dipslide status"
|
|
28
|
+
value={status}
|
|
29
|
+
onChange={setStatus}
|
|
30
|
+
options={statusOptions}
|
|
31
|
+
/>
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
The track has no border. Colours are dedicated `segment*` theme roles, so they can be tuned without changing Field colours.
|
|
37
|
+
|
|
38
|
+
### Theme roles
|
|
39
|
+
|
|
40
|
+
Apps must add these keys to both light and dark maps.
|
|
41
|
+
|
|
42
|
+
| Usage | Role |
|
|
43
|
+
|---|---|
|
|
44
|
+
| Track fill | `segmentBackground` |
|
|
45
|
+
| Sliding selection fill | `segmentSelectedBackground` |
|
|
46
|
+
| Unselected label | `segmentLabel` |
|
|
47
|
+
| Label on the selection fill | `segmentSelectedLabel` |
|
|
48
|
+
| Group label above the track | `segmentTitle` |
|
|
49
|
+
|
|
50
|
+
### Colour props (optional overrides)
|
|
51
|
+
|
|
52
|
+
| Prop | Default theme role | Role |
|
|
53
|
+
|---|---|---|
|
|
54
|
+
| `backgroundColor` | `segmentBackground` | Track fill |
|
|
55
|
+
| `selectedBackgroundColor` | `segmentSelectedBackground` | Sliding selection fill |
|
|
56
|
+
| `labelColor` | `segmentLabel` | Unselected label |
|
|
57
|
+
| `selectedLabelColor` | `segmentSelectedLabel` | Label on the selection fill |
|
|
58
|
+
| `titleColor` | `segmentTitle` | Group label above the track |
|
|
59
|
+
|
|
60
|
+
### Props
|
|
61
|
+
|
|
62
|
+
| Prop | Type | Default | Notes |
|
|
63
|
+
|---|---|---|---|
|
|
64
|
+
| `value` | `T \| null` | — | Required. Controlled selection; `null` = none selected |
|
|
65
|
+
| `onChange` | `(value: T) => void` | — | Required |
|
|
66
|
+
| `options` | `SegmentedOption<T>[]` | — | Required. Empty list → renders nothing |
|
|
67
|
+
| `label` | `string` | — | Optional caption above the track |
|
|
68
|
+
| `radius` | `ButtonRadius` | `"lg"` | Same steps as `Button` (8px) |
|
|
69
|
+
| `disabled` | `boolean` | `false` | Whole control at 40% opacity; not selectable |
|
|
70
|
+
| `backgroundColor` | `string` | theme `segmentBackground` | Optional override |
|
|
71
|
+
| `selectedBackgroundColor` | `string` | theme `segmentSelectedBackground` | Optional override |
|
|
72
|
+
| `labelColor` | `string` | theme `segmentLabel` | Optional override |
|
|
73
|
+
| `selectedLabelColor` | `string` | theme `segmentSelectedLabel` | Optional override |
|
|
74
|
+
| `titleColor` | `string` | theme `segmentTitle` | Optional override |
|
|
75
|
+
| `style` | view style | — | Outer column |
|
|
76
|
+
|
|
77
|
+
### SegmentedOption
|
|
78
|
+
|
|
79
|
+
| Prop | Type | Notes |
|
|
80
|
+
|---|---|---|
|
|
81
|
+
| `value` | `T` | Stable string id |
|
|
82
|
+
| `label` | `string` | Segment title |
|
|
83
|
+
| `disabled` | `boolean` | Segment at 40% opacity; not selectable |
|
|
84
|
+
|
|
85
|
+
### Layout
|
|
86
|
+
|
|
87
|
+
Segments share the track width equally. The selection fill is inset by 3px on every side: the same gap above and below it, before the first segment, and after the last. It translates to the selected index over 220ms. Track radius defaults to `"lg"` (8). See the [Button radius table](./button.md#radius).
|
|
88
|
+
|
|
89
|
+
### Accessibility
|
|
90
|
+
|
|
91
|
+
The track uses `accessibilityRole="radiogroup"`. Each segment is `accessibilityRole="radio"` with `accessibilityState` including `selected`, `checked` (same as selected; required for Android TalkBack radio semantics), and `disabled`. The sliding fill is decorative.
|
|
92
|
+
|
|
93
|
+
## Imports
|
|
94
|
+
|
|
95
|
+
```ts
|
|
96
|
+
import {
|
|
97
|
+
SegmentedControl,
|
|
98
|
+
SEGMENTED_THEME_ROLES,
|
|
99
|
+
type SegmentedOption,
|
|
100
|
+
type SegmentedControlProps,
|
|
101
|
+
} from "@studio-piot/native-ui";
|
|
102
|
+
|
|
103
|
+
// Or components only:
|
|
104
|
+
import { SegmentedControl } from "@studio-piot/native-ui/components";
|
|
105
|
+
```
|