@scripso-homepad/ui 0.4.29 → 0.4.31
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/dist/index.cjs +27 -25
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +8 -2
- package/dist/index.d.ts +8 -2
- package/dist/index.js +27 -25
- package/dist/index.js.map +1 -1
- package/dist/web/index.cjs.map +1 -1
- package/dist/web/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Calendar.tsx +8 -13
- package/src/components/CountryCodeSelector.tsx +9 -3
- package/src/components/PhoneInput.tsx +6 -0
- package/src/theme/calendar.ts +11 -9
- package/src/web/layout/SidebarNavItem.tsx +3 -1
package/dist/index.cjs
CHANGED
|
@@ -1889,6 +1889,8 @@ function CountryCodeSelector({
|
|
|
1889
1889
|
onValueChange,
|
|
1890
1890
|
options = countries,
|
|
1891
1891
|
disabled = false,
|
|
1892
|
+
height = TRIGGER_HEIGHT,
|
|
1893
|
+
borderColor = colors.stormGray50,
|
|
1892
1894
|
style,
|
|
1893
1895
|
className
|
|
1894
1896
|
}) {
|
|
@@ -1914,8 +1916,8 @@ function CountryCodeSelector({
|
|
|
1914
1916
|
}
|
|
1915
1917
|
function handleOpen() {
|
|
1916
1918
|
if (disabled) return;
|
|
1917
|
-
triggerRef.current?.measureInWindow((x, y, width,
|
|
1918
|
-
setAnchor({ x, y, width, height });
|
|
1919
|
+
triggerRef.current?.measureInWindow((x, y, width, height2) => {
|
|
1920
|
+
setAnchor({ x, y, width, height: height2 });
|
|
1919
1921
|
setOpen(true);
|
|
1920
1922
|
});
|
|
1921
1923
|
}
|
|
@@ -1968,6 +1970,7 @@ function CountryCodeSelector({
|
|
|
1968
1970
|
onPress: handleOpen,
|
|
1969
1971
|
style: [
|
|
1970
1972
|
styles6.trigger,
|
|
1973
|
+
{ height, borderColor },
|
|
1971
1974
|
disabled ? styles6.triggerDisabled : styles6.triggerEnabled,
|
|
1972
1975
|
reactNative.Platform.OS === "web" ? styles6.triggerWeb : null
|
|
1973
1976
|
],
|
|
@@ -2017,15 +2020,14 @@ var styles6 = reactNative.StyleSheet.create({
|
|
|
2017
2020
|
height: TRIGGER_HEIGHT,
|
|
2018
2021
|
borderRadius: radii.lg,
|
|
2019
2022
|
borderWidth: 1,
|
|
2020
|
-
|
|
2023
|
+
paddingHorizontal: spacing.lg,
|
|
2024
|
+
paddingVertical: 0,
|
|
2021
2025
|
gap: spacing.sm
|
|
2022
2026
|
},
|
|
2023
2027
|
triggerEnabled: {
|
|
2024
|
-
borderColor: colors.stormGray50,
|
|
2025
2028
|
backgroundColor: colors.white
|
|
2026
2029
|
},
|
|
2027
2030
|
triggerDisabled: {
|
|
2028
|
-
borderColor: colors.stormGray50,
|
|
2029
2031
|
backgroundColor: colors.stormGray50
|
|
2030
2032
|
},
|
|
2031
2033
|
triggerWeb: {
|
|
@@ -2096,6 +2098,7 @@ function PhoneInput({
|
|
|
2096
2098
|
onCountryCodeChange,
|
|
2097
2099
|
error,
|
|
2098
2100
|
hint,
|
|
2101
|
+
height = INPUT_HEIGHT,
|
|
2099
2102
|
containerStyle,
|
|
2100
2103
|
style,
|
|
2101
2104
|
className,
|
|
@@ -2153,6 +2156,7 @@ function PhoneInput({
|
|
|
2153
2156
|
value: countryCode,
|
|
2154
2157
|
onValueChange: onCountryCodeChange,
|
|
2155
2158
|
disabled: isDisabled,
|
|
2159
|
+
height,
|
|
2156
2160
|
style: styles7.countrySelector
|
|
2157
2161
|
}
|
|
2158
2162
|
) }),
|
|
@@ -2162,6 +2166,7 @@ function PhoneInput({
|
|
|
2162
2166
|
style: [
|
|
2163
2167
|
inputFieldMetrics.containerBase,
|
|
2164
2168
|
inputFieldMetrics.container,
|
|
2169
|
+
{ height },
|
|
2165
2170
|
phoneFieldStyles.container,
|
|
2166
2171
|
styles7.phoneField
|
|
2167
2172
|
],
|
|
@@ -2287,7 +2292,7 @@ var CALENDAR_NAV_ICON_COLOR = colors.stormGray850;
|
|
|
2287
2292
|
var CALENDAR_FIELD_ICON_SIZE = 20;
|
|
2288
2293
|
var CALENDAR_FIELD_WIDTH = CALENDAR_PANEL_WIDTH;
|
|
2289
2294
|
var CALENDAR_FIELD_HEIGHT = 52;
|
|
2290
|
-
var CALENDAR_FIELD_PADDING =
|
|
2295
|
+
var CALENDAR_FIELD_PADDING = 14;
|
|
2291
2296
|
var CALENDAR_FIELD_GAP = spacing.sm;
|
|
2292
2297
|
var CALENDAR_FIELD_PLACEHOLDER_COLOR = colors.stormGray200;
|
|
2293
2298
|
var CALENDAR_PANEL_TOTAL_HEIGHT = CALENDAR_PANEL_PADDING * 2 + CALENDAR_HEADER_HEIGHT + CALENDAR_PANEL_GAP * 2 + CALENDAR_WEEKDAY_CELL_SIZE + CALENDAR_DAY_GRID_HEIGHT;
|
|
@@ -2449,19 +2454,20 @@ var calendarDropdownMetrics = reactNative.StyleSheet.create({
|
|
|
2449
2454
|
color: colors.stormGray300
|
|
2450
2455
|
},
|
|
2451
2456
|
dayLabelDisabled: {
|
|
2452
|
-
color: colors.stormGray300
|
|
2453
|
-
opacity: 0.5
|
|
2457
|
+
color: colors.stormGray300
|
|
2454
2458
|
},
|
|
2455
|
-
|
|
2459
|
+
todayDotWrap: {
|
|
2456
2460
|
position: "absolute",
|
|
2457
|
-
bottom:
|
|
2458
|
-
left:
|
|
2461
|
+
bottom: 4,
|
|
2462
|
+
left: 0,
|
|
2463
|
+
right: 0,
|
|
2464
|
+
alignItems: "center"
|
|
2465
|
+
},
|
|
2466
|
+
todayDot: {
|
|
2459
2467
|
width: CALENDAR_DAY_DOT_SIZE,
|
|
2460
2468
|
height: CALENDAR_DAY_DOT_SIZE,
|
|
2461
|
-
borderRadius:
|
|
2462
|
-
backgroundColor: CALENDAR_TODAY_DOT_COLOR
|
|
2463
|
-
marginLeft: -1.5,
|
|
2464
|
-
zIndex: 1
|
|
2469
|
+
borderRadius: CALENDAR_DAY_DOT_SIZE / 2,
|
|
2470
|
+
backgroundColor: CALENDAR_TODAY_DOT_COLOR
|
|
2465
2471
|
},
|
|
2466
2472
|
pickerBody: {
|
|
2467
2473
|
width: CALENDAR_DAY_GRID_WIDTH,
|
|
@@ -2562,7 +2568,8 @@ var calendarFieldMetrics = reactNative.StyleSheet.create({
|
|
|
2562
2568
|
paddingVertical: 0,
|
|
2563
2569
|
paddingHorizontal: 0,
|
|
2564
2570
|
margin: 0,
|
|
2565
|
-
|
|
2571
|
+
includeFontPadding: false,
|
|
2572
|
+
...reactNative.Platform.OS === "android" ? { textAlignVertical: "center" } : null,
|
|
2566
2573
|
...reactNative.Platform.OS === "web" ? {
|
|
2567
2574
|
outlineStyle: "none"
|
|
2568
2575
|
} : null
|
|
@@ -2949,21 +2956,16 @@ function useCalendarLocale(locale) {
|
|
|
2949
2956
|
);
|
|
2950
2957
|
}
|
|
2951
2958
|
function resolveDayCellStyle(day) {
|
|
2952
|
-
if (day.isDisabled) {
|
|
2953
|
-
return [calendarDropdownMetrics.dayCell];
|
|
2954
|
-
}
|
|
2955
2959
|
if (day.isSelected) {
|
|
2956
2960
|
return [calendarDropdownMetrics.dayCell, calendarDropdownMetrics.dayCellSelected];
|
|
2957
2961
|
}
|
|
2962
|
+
const useMutedBackground = day.inCurrentMonth && !day.isToday && (day.isPast || day.isDisabled);
|
|
2958
2963
|
return [
|
|
2959
2964
|
calendarDropdownMetrics.dayCell,
|
|
2960
|
-
|
|
2965
|
+
useMutedBackground ? calendarDropdownMetrics.dayCellPast : null
|
|
2961
2966
|
];
|
|
2962
2967
|
}
|
|
2963
2968
|
function resolveDayLabelStyle(day) {
|
|
2964
|
-
if (day.isDisabled) {
|
|
2965
|
-
return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelDisabled];
|
|
2966
|
-
}
|
|
2967
2969
|
if (day.isSelected) {
|
|
2968
2970
|
return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelSelected];
|
|
2969
2971
|
}
|
|
@@ -2973,7 +2975,7 @@ function resolveDayLabelStyle(day) {
|
|
|
2973
2975
|
if (day.isToday) {
|
|
2974
2976
|
return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelToday];
|
|
2975
2977
|
}
|
|
2976
|
-
if (day.isPast) {
|
|
2978
|
+
if (day.isPast || day.isDisabled) {
|
|
2977
2979
|
return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelMuted];
|
|
2978
2980
|
}
|
|
2979
2981
|
return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelFuture];
|
|
@@ -3164,7 +3166,7 @@ function Calendar(props) {
|
|
|
3164
3166
|
style: resolveDayCellStyle(day),
|
|
3165
3167
|
children: [
|
|
3166
3168
|
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: resolveDayLabelStyle(day), children: day.date.getDate() }),
|
|
3167
|
-
day.isToday && day.inCurrentMonth && !day.isSelected ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: calendarDropdownMetrics.todayDot }) : null
|
|
3169
|
+
day.isToday && day.inCurrentMonth && !day.isSelected ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: calendarDropdownMetrics.todayDotWrap, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: calendarDropdownMetrics.todayDot }) }) : null
|
|
3168
3170
|
]
|
|
3169
3171
|
},
|
|
3170
3172
|
day.date.toISOString()
|