@swan-io/lake 2.7.36 → 2.7.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "2.7.36",
+  "version": "2.7.37",
   "engines": {
     "node": ">=18.0.0",
     "yarn": "^1.22.0"

package/src/components/ChoicePicker.d.ts

@@ -6,6 +6,7 @@ type Props<T> = {
     value?: T;
     getId?: (item: T) => unknown;
     onChange: (value: T) => void;
+    disabled?: boolean;
 };
-export declare const ChoicePicker: <T>({ items, getId, large, renderItem, value, onChange, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const ChoicePicker: <T>({ items, getId, large, renderItem, value, disabled, onChange, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/ChoicePicker.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useEffect, useRef, useState } from "react";
 import { ScrollView, StyleSheet, View } from "react-native";
 import { match } from "ts-pattern";
+import { commonStyles } from "../constants/commonStyles";
 import { breakpoints, negativeSpacings, spacings } from "../constants/design";
 import { useResponsive } from "../hooks/useResponsive";
 import { clampValue } from "../utils/math";
@@ -100,7 +101,7 @@ const styles = StyleSheet.create({
     },
 });
 const identity = (x) => x;
-export const ChoicePicker = ({ items, getId = identity, large = false, renderItem, value, onChange, }) => {
+export const ChoicePicker = ({ items, getId = identity, large = false, renderItem, value, disabled = false, onChange, }) => {
     const containerRef = useRef(null);
     const { desktop } = useResponsive(breakpoints.medium);
     const [mobilePosition, setMobilePosition] = useState("start");
@@ -179,12 +180,13 @@ export const ChoicePicker = ({ items, getId = identity, large = false, renderIte
                         styles.container,
                         !desktop && styles.mobileContainer,
                         !desktop && { width: `${items.length * 100}%` },
-                    ], children: items.map((item, index) => (_jsx(Pressable, { style: [
+                    ], children: items.map((item, index) => (_jsx(Pressable, { disabled: disabled, style: [
                             styles.item,
+                            disabled && commonStyles.disabled,
                             desktop && styles.itemAnimation,
                             desktop && { animationDelay: `${200 + 100 * index}ms` },
                             large && styles.itemLarge,
                             !desktop && styles.itemSmallViewport,
                             !desktop && { width: `${100 / items.length}%` },
-                        ], onPress: () => onChange(item), children: ({ hovered }) => (_jsx(Tile, { hovered: hovered, selected: value != null && getId(item) === getId(value), flexGrow: 1, children: _jsxs(View, { style: styles.tileContents, children: [_jsx(View, { style: styles.tileRenderedContents, children: renderItem(item) }), desktop && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 24 }), _jsx(LakeRadio, { value: value != null && getId(item) === getId(value) })] }))] }) })) }, String(index)))) }) }), !desktop && (_jsx(LakeButton, { icon: "chevron-left-filled", mode: "secondary", forceBackground: true, onPress: onPressPrevious, disabled: mobilePosition === "start", style: styles.leftButton })), !desktop && (_jsx(LakeButton, { icon: "chevron-right-filled", mode: "secondary", forceBackground: true, onPress: onPressNext, disabled: mobilePosition === "end", style: styles.rightButton }))] }));
+                        ], onPress: () => onChange(item), children: ({ hovered }) => (_jsx(Tile, { hovered: hovered, selected: value != null && getId(item) === getId(value), flexGrow: 1, children: _jsxs(View, { style: styles.tileContents, children: [_jsx(View, { style: styles.tileRenderedContents, children: renderItem(item) }), desktop && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 24 }), _jsx(LakeRadio, { value: value != null && getId(item) === getId(value) })] }))] }) })) }, String(index)))) }) }), !desktop && (_jsx(LakeButton, { icon: "chevron-left-filled", mode: "secondary", forceBackground: true, onPress: onPressPrevious, disabled: mobilePosition === "start" || disabled, style: styles.leftButton })), !desktop && (_jsx(LakeButton, { icon: "chevron-right-filled", mode: "secondary", forceBackground: true, onPress: onPressNext, disabled: mobilePosition === "end" || disabled, style: styles.rightButton }))] }));
 };

package/src/components/LakeButton.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Children, forwardRef, Fragment, memo } from "react";
 import { ActivityIndicator, StyleSheet, View, } from "react-native";
 import { match } from "ts-pattern";
+import { commonStyles } from "../constants/commonStyles";
 import { backgroundColor, colors, invariantColors, radii, spacings, texts, } from "../constants/design";
 import { isNotNullish, isNullish } from "../utils/nullish";
 import { Icon } from "./Icon";
@@ -72,10 +73,6 @@ const styles = StyleSheet.create({
     },
     text: texts.semibold,
     textSmall: texts.smallSemibold,
-    disabled: {
-        cursor: "not-allowed",
-        opacity: 0.3,
-    },
     resetOpacity: {
         opacity: 1,
     },
@@ -116,7 +113,7 @@ export const LakeButton = memo(forwardRef(({ ariaControls, ariaExpanded, ariaLab
             hasIconStart && isSmall ? styles.withIconStartSmall : styles.withIconStart,
             hasIconEnd && (isSmall ? styles.withIconEndSmall : styles.withIconEnd),
             hasOnlyIcon && (isSmall ? styles.iconSmallOnly : styles.iconOnly),
-            disabled && styles.disabled,
+            disabled && commonStyles.disabled,
             disabled && forceBackground && styles.resetOpacity,
             grow && styles.grow,
             match(mode)

package/src/components/LakeSlider.d.ts

@@ -5,7 +5,8 @@ export type SliderProps = {
     max: number;
     step: number;
     unit: string;
+    disabled?: boolean;
     onChange: (value: number) => void;
 };
 export declare const sliderBreakpoint: number;
-export declare const LakeSlider: ({ label, value, min, max, step, unit, onChange }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeSlider: ({ label, value, min, max, step, unit, disabled, onChange, }: SliderProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/LakeSlider.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
 import { StyleSheet, View } from "react-native";
+import { commonStyles } from "../constants/commonStyles";
 import { breakpoints } from "../constants/design";
 import { Box } from "./Box";
 import { LakeLabel } from "./LakeLabel";
@@ -17,7 +18,7 @@ const styles = StyleSheet.create({
     },
 });
 export const sliderBreakpoint = breakpoints.tiny;
-export const LakeSlider = ({ label, value, min, max, step, unit, onChange }) => {
+export const LakeSlider = ({ label, value, min, max, step, unit, disabled = false, onChange, }) => {
     const [dirtyValue, setDirtyValue] = useState(String(value));
     useEffect(() => {
         setDirtyValue(String(value));
@@ -27,5 +28,8 @@ export const LakeSlider = ({ label, value, min, max, step, unit, onChange }) =>
         setDirtyValue(String(cleanValue));
         onChange(cleanValue);
     }, [min, max, dirtyValue, onChange]);
-    return (_jsx(ResponsiveContainer, { breakpoint: sliderBreakpoint, style: styles.container, children: ({ large }) => (_jsx(_Fragment, { children: large ? (_jsxs(_Fragment, { children: [_jsx(Box, { direction: "row", justifyContent: "end", children: _jsx(View, { children: _jsx(LakeTextInput, { style: styles.input, unit: unit, value: dirtyValue, onChangeText: setDirtyValue, onBlur: sanitizeInput, inputMode: "decimal" }) }) }), _jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: event => onChange(Number(event.target.value)), style: { backgroundSize: `${((value - min) / (max - min)) * 100}% 100%` } })] })) : (_jsx(LakeLabel, { label: label, render: id => (_jsx(LakeTextInput, { id: id, unit: unit, value: dirtyValue, onChangeText: setDirtyValue, onBlur: sanitizeInput, inputMode: "decimal" })) })) })) }));
+    return (_jsx(ResponsiveContainer, { breakpoint: sliderBreakpoint, style: styles.container, children: ({ large }) => (_jsx(_Fragment, { children: large ? (_jsxs(_Fragment, { children: [_jsx(Box, { direction: "row", justifyContent: "end", children: _jsx(View, { children: _jsx(LakeTextInput, { style: styles.input, unit: unit, value: dirtyValue, onChangeText: setDirtyValue, onBlur: sanitizeInput, inputMode: "decimal", disabled: disabled }) }) }), _jsx("input", { type: "range", min: min, max: max, step: step, value: value, disabled: disabled, onChange: event => onChange(Number(event.target.value)), style: {
+                            backgroundSize: `${((value - min) / (max - min)) * 100}% 100%`,
+                            ...(disabled ? commonStyles.disabled : {}),
+                        } })] })) : (_jsx(LakeLabel, { label: label, render: id => (_jsx(LakeTextInput, { id: id, unit: unit, value: dirtyValue, onChangeText: setDirtyValue, onBlur: sanitizeInput, inputMode: "decimal", disabled: disabled })) })) })) }));
 };

package/src/components/Toggle.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { StyleSheet, View } from "react-native";
+import { commonStyles } from "../constants/commonStyles";
 import { colors } from "../constants/design";
 import { Box } from "./Box";
 import { Icon } from "./Icon";
@@ -9,9 +10,6 @@ import { Pressable } from "./Pressable";
 const HEIGHT = 26;
 const BORDER_WIDTH = 1;
 const styles = StyleSheet.create({
-    disabled: {
-        opacity: 0.3,
-    },
     switch: {
         userSelect: "none",
         flexDirection: "row",
@@ -57,7 +55,7 @@ export const Toggle = ({ onToggle, value, disabled = false, mode = "desktop", on
         }, () => { });
     }, [value]);
     useEffect(reajustLayout, [reajustLayout, value, isMobile, onLabel, offLabel]);
-    return (_jsxs(Pressable, { style: [styles.switch, disabled && styles.disabled], onPress: () => onToggle(!value), "aria-disabled": disabled, "aria-checked": value, disabled: disabled, ref: containerRef, role: "switch", onLayout: reajustLayout, children: [_jsx(View, { style: [
+    return (_jsxs(Pressable, { style: [styles.switch, disabled && commonStyles.disabled], onPress: () => onToggle(!value), "aria-disabled": disabled, "aria-checked": value, disabled: disabled, ref: containerRef, role: "switch", onLayout: reajustLayout, children: [_jsx(View, { style: [
                     styles.handle,
                     handleStyle,
                     {

package/src/constants/commonStyles.d.ts

@@ -32,6 +32,10 @@ export declare const commonStyles: {
     readonly hidden: {
         readonly visibility: "hidden";
     };
+    readonly disabled: {
+        readonly cursor: "not-allowed";
+        readonly opacity: 0.5;
+    };
     readonly view: {
         readonly alignItems: "stretch";
         readonly backgroundColor: "transparent";

package/src/constants/commonStyles.js

@@ -41,6 +41,7 @@ export const commonStyles = {
     fill: { flexGrow: 1, flexShrink: 1 },
     fillNoShrink: { flexGrow: 1, flexShrink: 0 },
     hidden: { visibility: "hidden" },
+    disabled: { cursor: "not-allowed", opacity: 0.5 },
     view: viewStyle,
     visuallyHidden: visuallyHiddenStyle,
 };