@scripso-homepad/ui 0.4.5 → 0.4.7
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/{chunk-66WR57JJ.js → chunk-7KLVMNDM.js} +15 -10
- package/dist/chunk-7KLVMNDM.js.map +1 -0
- package/dist/index.cjs +54 -18
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +5 -3
- package/dist/index.d.ts +5 -3
- package/dist/index.js +44 -13
- package/dist/index.js.map +1 -1
- package/dist/web/index.cjs +12 -7
- package/dist/web/index.cjs.map +1 -1
- package/dist/web/index.js +1 -1
- package/package.json +1 -1
- package/src/components/Select.tsx +43 -13
- package/src/theme/input.ts +12 -8
- package/src/theme/select.ts +28 -5
- package/src/theme/tokens.ts +2 -2
- package/dist/chunk-66WR57JJ.js.map +0 -1
|
@@ -238,7 +238,7 @@ var buttonTypography = {
|
|
|
238
238
|
fontFamily: fonts.sans,
|
|
239
239
|
fontSize: 14,
|
|
240
240
|
fontWeight: fontWeight.semibold,
|
|
241
|
-
lineHeight:
|
|
241
|
+
lineHeight: 19,
|
|
242
242
|
letterSpacing: 0
|
|
243
243
|
},
|
|
244
244
|
sm: {
|
|
@@ -381,8 +381,7 @@ var INPUT_HEIGHT = 52;
|
|
|
381
381
|
var INPUT_ICON_SIZE = 20;
|
|
382
382
|
var INPUT_ICON_GAP = 10;
|
|
383
383
|
var INPUT_OUTLINE_WIDTH = 2;
|
|
384
|
-
var
|
|
385
|
-
var INPUT_WEB_INNER_LINE_HEIGHT = 22;
|
|
384
|
+
var INPUT_TEXT_LINE_HEIGHT = 19;
|
|
386
385
|
var INPUT_WEB_VERTICAL_PADDING = 14;
|
|
387
386
|
function resolveInputVisualState({
|
|
388
387
|
focused = false,
|
|
@@ -406,7 +405,16 @@ function createOutlineStyle(ringColor) {
|
|
|
406
405
|
...Platform.OS !== "web" ? { overflow: "hidden" } : null
|
|
407
406
|
};
|
|
408
407
|
}
|
|
409
|
-
var defaultOutline =
|
|
408
|
+
var defaultOutline = {
|
|
409
|
+
borderRadius: radii.lg,
|
|
410
|
+
borderWidth: 0,
|
|
411
|
+
borderColor: colors.transparent,
|
|
412
|
+
padding: 0,
|
|
413
|
+
backgroundColor: colors.transparent,
|
|
414
|
+
width: "100%",
|
|
415
|
+
alignSelf: "stretch",
|
|
416
|
+
...Platform.OS !== "web" ? { overflow: "hidden" } : null
|
|
417
|
+
};
|
|
410
418
|
function getInputFieldStyles(state) {
|
|
411
419
|
const containerBase = {
|
|
412
420
|
borderRadius: radii.lg,
|
|
@@ -472,8 +480,6 @@ var inputFieldMetrics = StyleSheet.create({
|
|
|
472
480
|
flexDirection: "row",
|
|
473
481
|
alignItems: "center",
|
|
474
482
|
height: INPUT_HEIGHT,
|
|
475
|
-
minHeight: INPUT_HEIGHT,
|
|
476
|
-
maxHeight: INPUT_HEIGHT,
|
|
477
483
|
borderRadius: radii.lg,
|
|
478
484
|
padding: 16,
|
|
479
485
|
gap: INPUT_ICON_GAP,
|
|
@@ -489,7 +495,7 @@ var inputFieldMetrics = StyleSheet.create({
|
|
|
489
495
|
fontFamily: fonts.sans,
|
|
490
496
|
fontSize: fontSize.md,
|
|
491
497
|
fontWeight: fontWeight.medium,
|
|
492
|
-
lineHeight:
|
|
498
|
+
lineHeight: INPUT_TEXT_LINE_HEIGHT,
|
|
493
499
|
paddingVertical: 0,
|
|
494
500
|
paddingHorizontal: 0,
|
|
495
501
|
margin: 0,
|
|
@@ -498,7 +504,6 @@ var inputFieldMetrics = StyleSheet.create({
|
|
|
498
504
|
...Platform.OS === "android" ? { includeFontPadding: false } : null,
|
|
499
505
|
...Platform.OS === "web" ? {
|
|
500
506
|
alignSelf: "center",
|
|
501
|
-
lineHeight: INPUT_WEB_INNER_LINE_HEIGHT,
|
|
502
507
|
outlineStyle: "none"
|
|
503
508
|
} : {
|
|
504
509
|
alignSelf: "stretch"
|
|
@@ -653,5 +658,5 @@ var styles2 = StyleSheet.create({
|
|
|
653
658
|
});
|
|
654
659
|
|
|
655
660
|
export { INPUT_ICON_GAP, Input, Label, __commonJS, __require, __toESM, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, getInputFieldStyles, inputFieldMetrics, labelTypography, navy, radii, resolveInputVisualState, rubyRed, shadows, spacing, stormGray, useApplyWebClassName };
|
|
656
|
-
//# sourceMappingURL=chunk-
|
|
657
|
-
//# sourceMappingURL=chunk-
|
|
661
|
+
//# sourceMappingURL=chunk-7KLVMNDM.js.map
|
|
662
|
+
//# sourceMappingURL=chunk-7KLVMNDM.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/theme/tokens.ts","../src/utils/useApplyWebClassName.ts","../src/components/Label.tsx","../src/icons/eyeIconPaths.ts","../src/icons/EyeIcon.tsx","../src/icons/EyeOffIcon.tsx","../src/theme/input.ts","../src/components/Input.tsx"],"names":["jsxs","jsx","Svg","Path","Platform","StyleSheet","useRef","styles","Text"],"mappings":"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","file":"chunk-7KLVMNDM.js","sourcesContent":["/**\n * HomePad design tokens — aligned with the Figma design system\n * (navy / storm gray / slate-blue palette from HomePad brand).\n */\n\n/** Storm Gray scale — Figma steps 0 → 8.5 */\nexport const stormGray = {\n \"0\": \"#fbfcfc\",\n \"0.5\": \"#eceef0\",\n \"1\": \"#dadde0\",\n \"1.5\": \"#c7cdd1\",\n \"2\": \"#b5bcc1\",\n \"3\": \"#8f9aa3\",\n \"4\": \"#6a7984\",\n \"5\": \"#455765\",\n \"6\": \"#374651\",\n \"7\": \"#29343d\",\n \"8\": \"#1c2328\",\n \"8.5\": \"#151a1e\",\n} as const;\n\nexport type StormGrayStep = keyof typeof stormGray;\n\n/** Navy scale — Figma steps 0 → 8.5 */\nexport const navy = {\n \"0\": \"#f8f9fb\",\n \"0.5\": \"#e5e9ef\",\n \"1\": \"#cdd3df\",\n \"1.5\": \"#b4bece\",\n \"2\": \"#9ca8be\",\n \"3\": \"#6a7d9e\",\n \"4\": \"#39527d\",\n \"5\": \"#08275d\",\n \"6\": \"#061f4a\",\n \"7\": \"#051738\",\n \"8\": \"#031025\",\n \"8.5\": \"#020c1c\",\n} as const;\n\nexport type NavyStep = keyof typeof navy;\n\n/** Ruby Red scale — Figma steps 0 → 8.5 */\nexport const rubyRed = {\n \"0\": \"#fff5f6\",\n \"0.5\": \"#f7dddf\",\n \"1\": \"#efc4c8\",\n \"1.5\": \"#e7acb1\",\n \"2\": \"#df939a\",\n \"3\": \"#ce626d\",\n \"4\": \"#be313f\",\n \"5\": \"#ae0011\",\n \"6\": \"#8b000e\",\n \"7\": \"#68000a\",\n \"8\": \"#460007\",\n \"8.5\": \"#340005\",\n} as const;\n\nexport type RubyRedStep = keyof typeof rubyRed;\n\n/** Emerald Green scale — Figma steps 0 → 8.5 */\nexport const emeraldGreen = {\n \"0\": \"#f0fbf5\",\n \"0.5\": \"#dcf2e5\",\n \"1\": \"#c8e8d5\",\n \"1.5\": \"#b4dfc5\",\n \"2\": \"#a0d5b5\",\n \"3\": \"#77c394\",\n \"4\": \"#4fb074\",\n \"5\": \"#279d54\",\n \"6\": \"#1f7e43\",\n \"7\": \"#175e32\",\n \"8\": \"#103f22\",\n \"8.5\": \"#0c2f19\",\n} as const;\n\nexport type EmeraldGreenStep = keyof typeof emeraldGreen;\n\n/** Figma brand palette — primary swatch per color family */\nexport const brand = {\n slateBlue: \"#182e3c\",\n stormGray: stormGray[\"5\"],\n navy: navy[\"5\"],\n rubyRed: rubyRed[\"5\"],\n emeraldGreen: emeraldGreen[\"5\"],\n} as const;\n\nexport const colors = {\n // Brand colors\n slateBlue: brand.slateBlue,\n\n // Emerald Green — Figma scale + brand swatch\n emeraldGreen0: emeraldGreen[\"0\"],\n emeraldGreen50: emeraldGreen[\"0.5\"],\n emeraldGreen100: emeraldGreen[\"1\"],\n emeraldGreen150: emeraldGreen[\"1.5\"],\n emeraldGreen200: emeraldGreen[\"2\"],\n emeraldGreen300: emeraldGreen[\"3\"],\n emeraldGreen400: emeraldGreen[\"4\"],\n emeraldGreen500: emeraldGreen[\"5\"],\n emeraldGreen600: emeraldGreen[\"6\"],\n emeraldGreen700: emeraldGreen[\"7\"],\n emeraldGreen800: emeraldGreen[\"8\"],\n emeraldGreen850: emeraldGreen[\"8.5\"],\n\n /** Primary brand emerald green — Figma Emerald Green 5 */\n emeraldGreen: brand.emeraldGreen,\n\n // Ruby Red — Figma scale + brand swatch\n rubyRed0: rubyRed[\"0\"],\n rubyRed50: rubyRed[\"0.5\"],\n rubyRed100: rubyRed[\"1\"],\n rubyRed150: rubyRed[\"1.5\"],\n rubyRed200: rubyRed[\"2\"],\n rubyRed300: rubyRed[\"3\"],\n rubyRed400: rubyRed[\"4\"],\n rubyRed500: rubyRed[\"5\"],\n rubyRed600: rubyRed[\"6\"],\n rubyRed700: rubyRed[\"7\"],\n rubyRed800: rubyRed[\"8\"],\n rubyRed850: rubyRed[\"8.5\"],\n\n /** Primary brand ruby red — Figma Ruby Red 5 */\n rubyRed: brand.rubyRed,\n\n // Navy — Figma scale + brand swatch\n navy0: navy[\"0\"],\n navy50: navy[\"0.5\"],\n navy100: navy[\"1\"],\n navy150: navy[\"1.5\"],\n navy200: navy[\"2\"],\n navy300: navy[\"3\"],\n navy400: navy[\"4\"],\n navy500: navy[\"5\"],\n navy600: navy[\"6\"],\n navy700: navy[\"7\"],\n navy800: navy[\"8\"],\n navy850: navy[\"8.5\"],\n\n /** Primary brand navy — Figma Navy 5 */\n navy: brand.navy,\n\n // Storm Gray — Figma scale + brand swatch\n stormGray0: stormGray[\"0\"],\n stormGray50: stormGray[\"0.5\"],\n stormGray100: stormGray[\"1\"],\n stormGray150: stormGray[\"1.5\"],\n stormGray200: stormGray[\"2\"],\n stormGray300: stormGray[\"3\"],\n stormGray400: stormGray[\"4\"],\n stormGray500: stormGray[\"5\"],\n /** Figma brand swatch \"Storm Gray\" — same as `stormGray500` */\n stormGrayBrand: brand.stormGray,\n stormGray600: stormGray[\"6\"],\n stormGray700: stormGray[\"7\"],\n stormGray800: stormGray[\"8\"],\n stormGray850: stormGray[\"8.5\"],\n\n /** @deprecated Use `stormGray0` */\n storm0: stormGray[\"0\"],\n /** @deprecated Use `stormGray50` */\n storm50: stormGray[\"0.5\"],\n /** @deprecated Use `stormGray200` */\n storm200: stormGray[\"2\"],\n /** @deprecated Use `stormGray300` */\n storm300: stormGray[\"3\"],\n /** @deprecated Use `stormGray500` */\n storm500: stormGray[\"5\"],\n /** @deprecated Use `stormGray700` */\n storm700: stormGray[\"7\"],\n /** @deprecated Use `stormGray850` */\n storm900: stormGray[\"8.5\"],\n\n countrySelectorSelectedBg: `${stormGray[\"0.5\"]}99`,\n\n white: \"#ffffff\",\n error: \"#dc2626\",\n errorDark: \"#b3261e\",\n errorLight: \"#fee2e2\",\n /** @deprecated Use `rubyRed` */\n inputError: brand.rubyRed,\n inputOutlineFocus: navy[\"0.5\"],\n inputOutlineError: rubyRed[\"0.5\"],\n warning: \"#92400e\",\n warningBg: \"#fef3c7\",\n success: \"#28a745\",\n successMuted: \"#9fd4a8\",\n /** @deprecated Use `emeraldGreen` */\n green: brand.emeraldGreen,\n transparent: \"transparent\",\n} as const;\n\nexport const radii = {\n sm: 8,\n md: 12,\n lg: 16,\n xl: 20,\n full: 9999,\n} as const;\n\nexport const spacing = {\n xs: 4,\n sm: 8,\n md: 12,\n lg: 16,\n xl: 24,\n xxl: 32,\n} as const;\n\nexport const fontSize = {\n xs: 11,\n sm: 12,\n md: 14,\n base: 16,\n lg: 18,\n xl: 24,\n xxl: 32,\n} as const;\n\nexport const fontWeight = {\n regular: \"400\" as const,\n medium: \"500\" as const,\n semibold: \"600\" as const,\n bold: \"700\" as const,\n};\n\nexport const fonts = {\n sans: \"Noto Sans Armenian\",\n} as const;\n\n/** Input label typography — matches Figma (Medium, 100% line-height). */\nexport const labelTypography = {\n fontFamily: fonts.sans,\n fontSize: fontSize.sm,\n fontWeight: fontWeight.medium,\n lineHeight: fontSize.sm,\n letterSpacing: 0,\n} as const;\n\n/** Button label typography — SemiBold. */\nexport const buttonTypography = {\n lg: {\n fontFamily: fonts.sans,\n fontSize: 14,\n fontWeight: fontWeight.semibold,\n lineHeight: 19,\n letterSpacing: 0,\n },\n sm: {\n fontFamily: fonts.sans,\n fontSize: 12,\n fontWeight: fontWeight.semibold,\n lineHeight: 16,\n letterSpacing: 0,\n },\n} as const;\n\nexport const shadows = {\n card: {\n shadowColor: colors.navy,\n shadowOffset: { width: 0, height: 4 },\n shadowOpacity: 0.05,\n shadowRadius: 20,\n elevation: 2,\n },\n cardLg: {\n shadowColor: colors.navy,\n shadowOffset: { width: 0, height: 4 },\n shadowOpacity: 0.1,\n shadowRadius: 20,\n elevation: 4,\n },\n} as const;\n","import { useLayoutEffect } from \"react\";\nimport { Platform } from \"react-native\";\n\ninterface ClassListElement {\n classList: {\n add: (...classes: string[]) => void;\n remove: (...classes: string[]) => void;\n };\n}\n\nfunction hasClassList(node: unknown): node is ClassListElement {\n return (\n typeof node === \"object\" &&\n node !== null &&\n \"classList\" in node &&\n typeof (node as ClassListElement).classList?.add === \"function\"\n );\n}\n\nfunction resolveWebElement(ref: React.RefObject<unknown>): ClassListElement | null {\n const node = ref.current;\n if (!node) return null;\n\n if (hasClassList(node)) return node;\n\n const host = node as {\n _touchableNode?: unknown;\n getScrollableNode?: () => unknown;\n };\n\n if (hasClassList(host._touchableNode)) return host._touchableNode;\n\n if (typeof host.getScrollableNode === \"function\") {\n const scrollNode = host.getScrollableNode();\n if (hasClassList(scrollNode)) return scrollNode;\n }\n\n return null;\n}\n\n/**\n * Applies CSS class names to the underlying DOM node on web.\n * Keeps TouchableOpacity/Text as the render path so default RN styles stay intact.\n */\nexport function useApplyWebClassName(\n ref: React.RefObject<unknown>,\n className?: string,\n enabled = true,\n): void {\n useLayoutEffect(() => {\n if (!enabled || Platform.OS !== \"web\" || !className?.trim()) return;\n\n const element = resolveWebElement(ref);\n if (!element) return;\n\n const classes = className.trim().split(/\\s+/);\n element.classList.add(...classes);\n\n return () => {\n element.classList.remove(...classes);\n };\n }, [ref, className, enabled]);\n}\n","import { useRef, type ComponentRef, type ReactNode } from \"react\";\nimport {\n StyleSheet,\n Text,\n type StyleProp,\n type TextProps,\n type TextStyle,\n} from \"react-native\";\nimport { colors, labelTypography } from \"../theme/tokens\";\nimport { useApplyWebClassName } from \"../utils/useApplyWebClassName\";\n\nexport interface LabelProps extends TextProps {\n children: ReactNode;\n /** Render as a required field indicator. */\n required?: boolean;\n disabled?: boolean;\n style?: StyleProp<TextStyle>;\n className?: string;\n}\n\nexport function Label({\n children,\n required = false,\n disabled = false,\n style,\n className,\n ...props\n}: LabelProps) {\n const ref = useRef<ComponentRef<typeof Text>>(null);\n useApplyWebClassName(ref, className);\n\n return (\n <Text\n ref={ref}\n style={[styles.label, disabled && styles.labelDisabled, style]}\n accessibilityRole=\"text\"\n {...props}\n >\n {children}\n {required ? <Text style={styles.required}> *</Text> : null}\n </Text>\n );\n}\n\nconst styles = StyleSheet.create({\n label: {\n ...labelTypography,\n color: colors.slateBlue,\n },\n labelDisabled: {\n color: colors.stormGray400,\n },\n required: {\n color: colors.inputError,\n },\n});\n","export const EYE_OPEN_OUTLINE_PATH =\n \"M1.71835 10.2898C1.6489 10.1027 1.6489 9.89691 1.71835 9.70981C2.39476 8.06969 3.54294 6.66735 5.01732 5.68056C6.4917 4.69378 8.22588 4.16699 10 4.16699C11.7741 4.16699 13.5083 4.69378 14.9827 5.68056C16.4571 6.66735 17.6053 8.06969 18.2817 9.70981C18.3511 9.89691 18.3511 10.1027 18.2817 10.2898C17.6053 11.9299 16.4571 13.3323 14.9827 14.3191C13.5083 15.3058 11.7741 15.8326 10 15.8326C8.22588 15.8326 6.4917 15.3058 5.01732 14.3191C3.54294 13.3323 2.39476 11.9299 1.71835 10.2898Z\";\n\nexport const EYE_OPEN_PUPIL_PATH =\n \"M10 12.4998C11.3807 12.4998 12.5 11.3805 12.5 9.99981C12.5 8.6191 11.3807 7.49981 10 7.49981C8.6193 7.49981 7.50001 8.6191 7.50001 9.99981C7.50001 11.3805 8.6193 12.4998 10 12.4998Z\";\n\nexport const EYE_OFF_PATH =\n \"M10.733 5.076C13.0624 4.7984 15.4186 5.29082 17.4419 6.47805C19.4651 7.66528 21.0442 9.48208 21.938 11.651C22.0213 11.8755 22.0213 12.1225 21.938 12.347C21.5705 13.238 21.0848 14.0755 20.494 14.837M14.084 14.158C13.5182 14.7045 12.7604 15.0069 11.9738 15C11.1872 14.9932 10.4348 14.6777 9.87854 14.1215C9.32232 13.5652 9.00681 12.8128 8.99998 12.0262C8.99314 11.2396 9.29553 10.4818 9.842 9.916M17.479 17.499C16.1525 18.2848 14.6725 18.776 13.1394 18.9394C11.6063 19.1028 10.056 18.9345 8.59363 18.4459C7.13131 17.9573 5.79119 17.1599 4.66421 16.1077C3.53723 15.0556 2.64975 13.7734 2.062 12.348C1.97866 12.1235 1.97866 11.8765 2.062 11.652C2.94863 9.50186 4.50867 7.69725 6.508 6.509M2 2L22 22\";\n","import Svg, { Path } from \"react-native-svg\";\nimport { EYE_OPEN_OUTLINE_PATH, EYE_OPEN_PUPIL_PATH } from \"./eyeIconPaths\";\n\nexport { EYE_OPEN_OUTLINE_PATH, EYE_OPEN_PUPIL_PATH } from \"./eyeIconPaths\";\n\ninterface EyeIconProps {\n size?: number;\n color?: string;\n strokeWidth?: number;\n}\n\n/** Native — open eye (password hidden). */\nexport function EyeIcon({\n size = 20,\n color = \"#c7cdd1\",\n strokeWidth = 2,\n}: EyeIconProps) {\n return (\n <Svg width={size} height={size} viewBox=\"0 0 20 20\" fill=\"none\">\n <Path\n d={EYE_OPEN_OUTLINE_PATH}\n stroke={color}\n strokeWidth={strokeWidth}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <Path\n d={EYE_OPEN_PUPIL_PATH}\n stroke={color}\n strokeWidth={strokeWidth}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </Svg>\n );\n}\n","import Svg, { Path } from \"react-native-svg\";\nimport { EYE_OFF_PATH } from \"./eyeIconPaths\";\n\nexport { EYE_OFF_PATH } from \"./eyeIconPaths\";\n\ninterface EyeOffIconProps {\n size?: number;\n color?: string;\n strokeWidth?: number;\n}\n\n/** Native — slashed eye (password visible). */\nexport function EyeOffIcon({\n size = 20,\n color = \"#c7cdd1\",\n strokeWidth = 2,\n}: EyeOffIconProps) {\n return (\n <Svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\">\n <Path\n d={EYE_OFF_PATH}\n stroke={color}\n strokeWidth={strokeWidth}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </Svg>\n );\n}\n","import { Platform, StyleSheet, type TextStyle, type ViewStyle } from \"react-native\";\nimport { colors, fonts, fontSize, fontWeight, radii } from \"./tokens\";\n\nexport const INPUT_HEIGHT = 52;\nexport const INPUT_ICON_SIZE = 20;\nexport const INPUT_ICON_GAP = 10;\nexport const INPUT_OUTLINE_WIDTH = 2;\nexport const INPUT_TEXT_LINE_HEIGHT = 19;\nexport const INPUT_WEB_VERTICAL_PADDING = 14;\n\nexport type InputVisualState =\n | \"default\"\n | \"focused\"\n | \"error\"\n | \"disabled\";\n\nexport interface InputStateFlags {\n focused?: boolean;\n error?: boolean;\n disabled?: boolean;\n}\n\nexport function resolveInputVisualState({\n focused = false,\n error = false,\n disabled = false,\n}: InputStateFlags): InputVisualState {\n if (disabled) return \"disabled\";\n if (error) return \"error\";\n if (focused) return \"focused\";\n return \"default\";\n}\n\ninterface FieldStyleSet {\n container: ViewStyle;\n outline: ViewStyle;\n text: TextStyle;\n placeholder: string;\n icon: string;\n}\n\nfunction createOutlineStyle(ringColor: string): ViewStyle {\n return {\n borderRadius: radii.lg + INPUT_OUTLINE_WIDTH,\n borderWidth: INPUT_OUTLINE_WIDTH,\n borderColor: ringColor,\n padding: 0,\n backgroundColor: colors.transparent,\n width: \"100%\",\n alignSelf: \"stretch\",\n ...(Platform.OS !== \"web\" ? { overflow: \"hidden\" as const } : null),\n };\n}\n\nconst defaultOutline: ViewStyle = {\n borderRadius: radii.lg,\n borderWidth: 0,\n borderColor: colors.transparent,\n padding: 0,\n backgroundColor: colors.transparent,\n width: \"100%\",\n alignSelf: \"stretch\",\n ...(Platform.OS !== \"web\" ? { overflow: \"hidden\" as const } : null),\n};\n\nexport function getInputFieldStyles(state: InputVisualState): FieldStyleSet {\n const containerBase: ViewStyle = {\n borderRadius: radii.lg,\n ...(Platform.OS !== \"web\" ? { overflow: \"hidden\" as const } : null),\n };\n\n switch (state) {\n case \"disabled\":\n return {\n outline: defaultOutline,\n container: {\n ...containerBase,\n borderWidth: 1,\n borderColor: colors.stormGray50,\n backgroundColor: colors.stormGray50,\n },\n text: { color: colors.stormGray300 },\n placeholder: colors.stormGray300,\n icon: colors.stormGray150,\n };\n case \"error\":\n return {\n outline: createOutlineStyle(colors.inputOutlineError),\n container: {\n ...containerBase,\n borderWidth: 1,\n borderColor: colors.inputError,\n backgroundColor: colors.white,\n },\n text: { color: colors.inputError },\n placeholder: colors.stormGray200,\n icon: colors.inputError,\n };\n case \"focused\":\n return {\n outline: createOutlineStyle(colors.inputOutlineFocus),\n container: {\n ...containerBase,\n borderWidth: 1,\n borderColor: colors.navy,\n backgroundColor: colors.white,\n },\n text: { color: colors.slateBlue },\n placeholder: colors.stormGray200,\n icon: colors.navy,\n };\n default:\n return {\n outline: defaultOutline,\n container: {\n ...containerBase,\n borderWidth: 1,\n borderColor: colors.stormGray50,\n backgroundColor: colors.white,\n },\n text: { color: colors.slateBlue },\n placeholder: colors.stormGray200,\n icon: colors.stormGray150,\n };\n }\n}\n\nexport const inputFieldMetrics = StyleSheet.create({\n container: {\n flexDirection: \"row\",\n alignItems: \"center\",\n height: INPUT_HEIGHT,\n borderRadius: radii.lg,\n padding: 16,\n gap: INPUT_ICON_GAP,\n ...(Platform.OS === \"web\"\n ? ({\n boxSizing: \"border-box\",\n paddingVertical: INPUT_WEB_VERTICAL_PADDING,\n paddingHorizontal: 16,\n } as ViewStyle)\n : null),\n },\n input: {\n flex: 1,\n minWidth: 0,\n fontFamily: fonts.sans,\n fontSize: fontSize.md,\n fontWeight: fontWeight.medium,\n lineHeight: INPUT_TEXT_LINE_HEIGHT,\n paddingVertical: 0,\n paddingHorizontal: 0,\n margin: 0,\n borderWidth: 0,\n backgroundColor: colors.transparent,\n ...(Platform.OS === \"android\"\n ? { includeFontPadding: false }\n : null),\n ...(Platform.OS === \"web\"\n ? ({\n alignSelf: \"center\",\n outlineStyle: \"none\",\n } as TextStyle)\n : {\n alignSelf: \"stretch\",\n }),\n },\n});\n","import {\n cloneElement,\n isValidElement,\n useRef,\n useState,\n type ComponentRef,\n type ReactNode,\n} from \"react\";\nimport {\n Pressable,\n StyleSheet,\n Text,\n TextInput,\n View,\n type NativeSyntheticEvent,\n type StyleProp,\n type TextInputFocusEventData,\n type TextInputProps,\n type TextStyle,\n type ViewStyle,\n} from \"react-native\";\nimport { EyeIcon } from \"../icons/EyeIcon\";\nimport { EyeOffIcon } from \"../icons/EyeOffIcon\";\nimport {\n getInputFieldStyles,\n inputFieldMetrics,\n INPUT_ICON_SIZE,\n resolveInputVisualState,\n} from \"../theme/input\";\nimport { colors, spacing } from \"../theme/tokens\";\nimport { useApplyWebClassName } from \"../utils/useApplyWebClassName\";\nimport { Label } from \"./Label\";\n\ntype InputIconProps = {\n size?: number;\n color?: string;\n};\n\nfunction renderInputIcon(icon: ReactNode, color: string) {\n if (!icon) return null;\n\n if (isValidElement<InputIconProps>(icon)) {\n return cloneElement(icon, {\n size: icon.props.size ?? INPUT_ICON_SIZE,\n color: icon.props.color ?? color,\n });\n }\n\n return icon;\n}\n\nexport interface InputProps extends TextInputProps {\n /** Optional field label rendered above the input. */\n label?: string;\n leftIcon?: ReactNode;\n rightIcon?: ReactNode;\n /** Validation or helper error message. Shown instead of `hint` when set. */\n error?: string;\n /** Applies error field styling without showing a message (use with a form-level error). */\n invalid?: boolean;\n /** Helper text shown below the input when there is no error. */\n hint?: string;\n containerStyle?: StyleProp<ViewStyle>;\n style?: StyleProp<TextStyle>;\n className?: string;\n /** CSS classes for the bordered field container (web). */\n fieldClassName?: string;\n /** Styles merged into the bordered field container. */\n fieldStyle?: StyleProp<ViewStyle>;\n labelClassName?: string;\n inputClassName?: string;\n errorClassName?: string;\n hintClassName?: string;\n /** When `secureTextEntry` is set, show a toggleable eye icon. Pass `false` to disable. */\n showPasswordToggle?: boolean;\n}\n\nexport function Input({\n label,\n leftIcon,\n rightIcon,\n error,\n invalid,\n hint,\n containerStyle,\n style,\n className,\n fieldClassName,\n fieldStyle,\n labelClassName,\n inputClassName,\n errorClassName,\n hintClassName,\n editable = true,\n secureTextEntry,\n showPasswordToggle,\n onFocus,\n onBlur,\n ...props\n}: InputProps) {\n const wrapperRef = useRef<ComponentRef<typeof View>>(null);\n const fieldRef = useRef<ComponentRef<typeof View>>(null);\n const inputRef = useRef<ComponentRef<typeof TextInput>>(null);\n const helperRef = useRef<ComponentRef<typeof Text>>(null);\n const [focused, setFocused] = useState(false);\n const [passwordVisible, setPasswordVisible] = useState(false);\n\n useApplyWebClassName(wrapperRef, className);\n useApplyWebClassName(fieldRef, fieldClassName);\n useApplyWebClassName(inputRef, inputClassName);\n useApplyWebClassName(helperRef, error ? errorClassName : hintClassName);\n\n const isDisabled = editable === false;\n const hasError = Boolean(error) || Boolean(invalid);\n const passwordToggleEnabled =\n secureTextEntry === true && showPasswordToggle !== false && rightIcon == null;\n const effectiveSecureTextEntry = passwordToggleEnabled\n ? !passwordVisible\n : secureTextEntry;\n const visualState = resolveInputVisualState({\n focused,\n error: hasError,\n disabled: isDisabled,\n });\n const fieldStyles = getInputFieldStyles(visualState);\n const iconColor = fieldStyles.icon;\n\n function handleFocus(event: NativeSyntheticEvent<TextInputFocusEventData>) {\n setFocused(true);\n onFocus?.(event);\n }\n\n function handleBlur(event: NativeSyntheticEvent<TextInputFocusEventData>) {\n setFocused(false);\n onBlur?.(event);\n }\n\n const helperMessage = error ?? hint;\n\n function togglePasswordVisibility() {\n if (!isDisabled) {\n setPasswordVisible((visible) => !visible);\n }\n }\n\n const trailingIcon = passwordToggleEnabled ? (\n <Pressable\n onPress={togglePasswordVisibility}\n disabled={isDisabled}\n accessibilityRole=\"button\"\n accessibilityLabel={passwordVisible ? \"Hide password\" : \"Show password\"}\n hitSlop={8}\n style={styles.iconPressable}\n >\n {renderInputIcon(\n passwordVisible ? <EyeOffIcon /> : <EyeIcon />,\n iconColor,\n )}\n </Pressable>\n ) : rightIcon ? (\n renderInputIcon(rightIcon, iconColor)\n ) : null;\n\n return (\n <View ref={wrapperRef} style={[styles.wrapper, containerStyle]}>\n {label ? (\n <Label disabled={isDisabled} className={labelClassName}>\n {label}\n </Label>\n ) : null}\n <View style={fieldStyles.outline}>\n <View\n ref={fieldRef}\n style={[inputFieldMetrics.container, fieldStyles.container, fieldStyle]}\n >\n {leftIcon ? (\n <View style={styles.iconSlot}>{renderInputIcon(leftIcon, iconColor)}</View>\n ) : null}\n <TextInput\n ref={inputRef}\n style={[\n inputFieldMetrics.input,\n fieldStyles.text,\n style,\n ]}\n placeholderTextColor={fieldStyles.placeholder}\n editable={editable}\n secureTextEntry={effectiveSecureTextEntry}\n onFocus={handleFocus}\n onBlur={handleBlur}\n accessibilityState={{ disabled: isDisabled }}\n {...props}\n />\n {trailingIcon ? (\n <View style={styles.iconSlot}>{trailingIcon}</View>\n ) : null}\n </View>\n </View>\n {helperMessage ? (\n <Text ref={helperRef} style={error ? styles.error : styles.hint}>\n {helperMessage}\n </Text>\n ) : null}\n </View>\n );\n}\n\nconst styles = StyleSheet.create({\n wrapper: {\n width: \"100%\",\n gap: spacing.sm,\n },\n iconSlot: {\n width: INPUT_ICON_SIZE,\n height: INPUT_ICON_SIZE,\n alignItems: \"center\",\n justifyContent: \"center\",\n flexShrink: 0,\n },\n iconPressable: {\n width: INPUT_ICON_SIZE,\n height: INPUT_ICON_SIZE,\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n error: {\n fontSize: 12,\n lineHeight: 16,\n color: colors.inputError,\n },\n hint: {\n fontSize: 12,\n lineHeight: 16,\n color: colors.stormGray300,\n },\n});\n"]}
|
package/dist/index.cjs
CHANGED
|
@@ -233,7 +233,7 @@ var buttonTypography = {
|
|
|
233
233
|
fontFamily: fonts.sans,
|
|
234
234
|
fontSize: 14,
|
|
235
235
|
fontWeight: fontWeight.semibold,
|
|
236
|
-
lineHeight:
|
|
236
|
+
lineHeight: 19,
|
|
237
237
|
letterSpacing: 0
|
|
238
238
|
},
|
|
239
239
|
sm: {
|
|
@@ -507,8 +507,7 @@ var INPUT_HEIGHT = 52;
|
|
|
507
507
|
var INPUT_ICON_SIZE = 20;
|
|
508
508
|
var INPUT_ICON_GAP = 10;
|
|
509
509
|
var INPUT_OUTLINE_WIDTH = 2;
|
|
510
|
-
var
|
|
511
|
-
var INPUT_WEB_INNER_LINE_HEIGHT = 22;
|
|
510
|
+
var INPUT_TEXT_LINE_HEIGHT = 19;
|
|
512
511
|
var INPUT_WEB_VERTICAL_PADDING = 14;
|
|
513
512
|
function resolveInputVisualState({
|
|
514
513
|
focused = false,
|
|
@@ -532,7 +531,16 @@ function createOutlineStyle(ringColor) {
|
|
|
532
531
|
...reactNative.Platform.OS !== "web" ? { overflow: "hidden" } : null
|
|
533
532
|
};
|
|
534
533
|
}
|
|
535
|
-
var defaultOutline =
|
|
534
|
+
var defaultOutline = {
|
|
535
|
+
borderRadius: radii.lg,
|
|
536
|
+
borderWidth: 0,
|
|
537
|
+
borderColor: colors.transparent,
|
|
538
|
+
padding: 0,
|
|
539
|
+
backgroundColor: colors.transparent,
|
|
540
|
+
width: "100%",
|
|
541
|
+
alignSelf: "stretch",
|
|
542
|
+
...reactNative.Platform.OS !== "web" ? { overflow: "hidden" } : null
|
|
543
|
+
};
|
|
536
544
|
function getInputFieldStyles(state) {
|
|
537
545
|
const containerBase = {
|
|
538
546
|
borderRadius: radii.lg,
|
|
@@ -598,8 +606,6 @@ var inputFieldMetrics = reactNative.StyleSheet.create({
|
|
|
598
606
|
flexDirection: "row",
|
|
599
607
|
alignItems: "center",
|
|
600
608
|
height: INPUT_HEIGHT,
|
|
601
|
-
minHeight: INPUT_HEIGHT,
|
|
602
|
-
maxHeight: INPUT_HEIGHT,
|
|
603
609
|
borderRadius: radii.lg,
|
|
604
610
|
padding: 16,
|
|
605
611
|
gap: INPUT_ICON_GAP,
|
|
@@ -615,7 +621,7 @@ var inputFieldMetrics = reactNative.StyleSheet.create({
|
|
|
615
621
|
fontFamily: fonts.sans,
|
|
616
622
|
fontSize: fontSize.md,
|
|
617
623
|
fontWeight: fontWeight.medium,
|
|
618
|
-
lineHeight:
|
|
624
|
+
lineHeight: INPUT_TEXT_LINE_HEIGHT,
|
|
619
625
|
paddingVertical: 0,
|
|
620
626
|
paddingHorizontal: 0,
|
|
621
627
|
margin: 0,
|
|
@@ -624,7 +630,6 @@ var inputFieldMetrics = reactNative.StyleSheet.create({
|
|
|
624
630
|
...reactNative.Platform.OS === "android" ? { includeFontPadding: false } : null,
|
|
625
631
|
...reactNative.Platform.OS === "web" ? {
|
|
626
632
|
alignSelf: "center",
|
|
627
|
-
lineHeight: INPUT_WEB_INNER_LINE_HEIGHT,
|
|
628
633
|
outlineStyle: "none"
|
|
629
634
|
} : {
|
|
630
635
|
alignSelf: "stretch"
|
|
@@ -852,10 +857,12 @@ var SELECT_DROPDOWN_GAP = spacing.sm;
|
|
|
852
857
|
var SELECT_DROPDOWN_PADDING = spacing.sm;
|
|
853
858
|
var SELECT_DROPDOWN_MAX_HEIGHT = 317;
|
|
854
859
|
var SELECT_OPTION_HEIGHT = 43;
|
|
860
|
+
var SELECT_OPTION_HEIGHT_COMPACT = 36;
|
|
855
861
|
var SELECT_OPTION_GAP = spacing.sm;
|
|
856
862
|
var SELECT_CHEVRON_SIZE = 20;
|
|
857
863
|
var SELECT_CHEVRON_COLOR = colors.stormGray150;
|
|
858
864
|
var SELECT_CHEVRON_ROTATION_MS = 200;
|
|
865
|
+
var SELECT_TEXT_LINE_HEIGHT = 19;
|
|
859
866
|
var selectLabelTypography = {
|
|
860
867
|
fontFamily: fonts.sans,
|
|
861
868
|
fontSize: fontSize.sm,
|
|
@@ -868,7 +875,7 @@ var selectValueTypography = {
|
|
|
868
875
|
fontFamily: fonts.sans,
|
|
869
876
|
fontSize: fontSize.md,
|
|
870
877
|
fontWeight: fontWeight.regular,
|
|
871
|
-
lineHeight:
|
|
878
|
+
lineHeight: SELECT_TEXT_LINE_HEIGHT,
|
|
872
879
|
letterSpacing: 0,
|
|
873
880
|
textAlign: "left"
|
|
874
881
|
};
|
|
@@ -885,7 +892,16 @@ function createOutlineStyle2(ringColor) {
|
|
|
885
892
|
...reactNative.Platform.OS !== "web" ? { overflow: "hidden" } : null
|
|
886
893
|
};
|
|
887
894
|
}
|
|
888
|
-
var defaultOutline2 =
|
|
895
|
+
var defaultOutline2 = {
|
|
896
|
+
borderRadius: radii.lg,
|
|
897
|
+
borderWidth: 0,
|
|
898
|
+
borderColor: colors.transparent,
|
|
899
|
+
padding: 0,
|
|
900
|
+
backgroundColor: colors.transparent,
|
|
901
|
+
width: "100%",
|
|
902
|
+
alignSelf: "stretch",
|
|
903
|
+
...reactNative.Platform.OS !== "web" ? { overflow: "hidden" } : null
|
|
904
|
+
};
|
|
889
905
|
function getSelectFieldStyles(state) {
|
|
890
906
|
const containerBase = {
|
|
891
907
|
borderRadius: radii.lg,
|
|
@@ -1000,7 +1016,7 @@ var selectDropdownMetrics = reactNative.StyleSheet.create({
|
|
|
1000
1016
|
fontFamily: fonts.sans,
|
|
1001
1017
|
fontSize: fontSize.md,
|
|
1002
1018
|
fontWeight: fontWeight.regular,
|
|
1003
|
-
lineHeight:
|
|
1019
|
+
lineHeight: SELECT_TEXT_LINE_HEIGHT,
|
|
1004
1020
|
letterSpacing: 0,
|
|
1005
1021
|
textAlign: "left",
|
|
1006
1022
|
color: colors.slateBlue,
|
|
@@ -1023,10 +1039,13 @@ var selectDropdownMetrics = reactNative.StyleSheet.create({
|
|
|
1023
1039
|
backgroundColor: colors.stormGray0
|
|
1024
1040
|
}
|
|
1025
1041
|
});
|
|
1026
|
-
function resolveSelectDropdownHeight(optionCount) {
|
|
1027
|
-
const contentHeight = optionCount *
|
|
1042
|
+
function resolveSelectDropdownHeight(optionCount, optionHeight = SELECT_OPTION_HEIGHT) {
|
|
1043
|
+
const contentHeight = optionCount * optionHeight + Math.max(0, optionCount - 1) * SELECT_OPTION_GAP + SELECT_DROPDOWN_PADDING * 2;
|
|
1028
1044
|
return Math.min(contentHeight, SELECT_DROPDOWN_MAX_HEIGHT);
|
|
1029
1045
|
}
|
|
1046
|
+
function resolveSelectDropdownContentHeight(optionCount, optionHeight = SELECT_OPTION_HEIGHT) {
|
|
1047
|
+
return optionCount * optionHeight + Math.max(0, optionCount - 1) * SELECT_OPTION_GAP;
|
|
1048
|
+
}
|
|
1030
1049
|
function resolveSelectDropdownTop(anchor, dropdownHeight) {
|
|
1031
1050
|
const windowHeight = reactNative.Dimensions.get("window").height;
|
|
1032
1051
|
const spaceBelow = windowHeight - (anchor.y + anchor.height + SELECT_DROPDOWN_GAP);
|
|
@@ -1197,7 +1216,8 @@ function Select({
|
|
|
1197
1216
|
menuClassName,
|
|
1198
1217
|
labelClassName,
|
|
1199
1218
|
errorClassName,
|
|
1200
|
-
hintClassName
|
|
1219
|
+
hintClassName,
|
|
1220
|
+
compact = false
|
|
1201
1221
|
}) {
|
|
1202
1222
|
const wrapperRef = react.useRef(null);
|
|
1203
1223
|
const triggerRef = react.useRef(null);
|
|
@@ -1209,10 +1229,15 @@ function Select({
|
|
|
1209
1229
|
const [anchor, setAnchor] = react.useState(null);
|
|
1210
1230
|
const [highlightedIndex, setHighlightedIndex] = react.useState(-1);
|
|
1211
1231
|
const [valueContainerWidth, setValueContainerWidth] = react.useState(0);
|
|
1232
|
+
const optionHeight = compact ? SELECT_OPTION_HEIGHT_COMPACT : SELECT_OPTION_HEIGHT;
|
|
1233
|
+
const needsScroll = react.useMemo(
|
|
1234
|
+
() => resolveSelectDropdownContentHeight(options.length, optionHeight) > SELECT_DROPDOWN_MAX_HEIGHT - SELECT_DROPDOWN_PADDING * 2,
|
|
1235
|
+
[compact, optionHeight, options.length]
|
|
1236
|
+
);
|
|
1212
1237
|
useApplyWebClassName(wrapperRef, className);
|
|
1213
1238
|
useApplyWebClassName(triggerRef, fieldClassName);
|
|
1214
1239
|
useApplyWebClassName(menuRef, menuClassName);
|
|
1215
|
-
useApplyWebClassName(scrollRef, SELECT_DROPDOWN_SCROLL_CLASS, open && Boolean(anchor));
|
|
1240
|
+
useApplyWebClassName(scrollRef, SELECT_DROPDOWN_SCROLL_CLASS, open && Boolean(anchor) && needsScroll);
|
|
1216
1241
|
useApplyWebClassName(helperRef, error ? errorClassName : hintClassName);
|
|
1217
1242
|
useIsomorphicLayoutEffect(() => {
|
|
1218
1243
|
ensureSelectDropdownScrollStyles();
|
|
@@ -1268,7 +1293,7 @@ function Select({
|
|
|
1268
1293
|
return formatMultiSelectDisplay(selectedLabels, valueContainerWidth);
|
|
1269
1294
|
}, [multiple, placeholder, selectedLabels, valueContainerWidth]);
|
|
1270
1295
|
const isPlaceholder = selectedLabels.length === 0;
|
|
1271
|
-
const dropdownHeight = resolveSelectDropdownHeight(options.length);
|
|
1296
|
+
const dropdownHeight = resolveSelectDropdownHeight(options.length, optionHeight);
|
|
1272
1297
|
const helperMessage = error ?? hint;
|
|
1273
1298
|
function closeMenu() {
|
|
1274
1299
|
setOpen(false);
|
|
@@ -1320,7 +1345,10 @@ function Select({
|
|
|
1320
1345
|
},
|
|
1321
1346
|
style: [
|
|
1322
1347
|
selectDropdownMetrics.option,
|
|
1348
|
+
compact && styles4.optionCompact,
|
|
1349
|
+
{ height: optionHeight, minHeight: optionHeight, maxHeight: optionHeight },
|
|
1323
1350
|
isSelected && selectDropdownMetrics.optionSelected,
|
|
1351
|
+
compact && isSelected && styles4.optionSelectedCompact,
|
|
1324
1352
|
isHighlighted && !isSelected && !option.disabled ? selectDropdownMetrics.optionHighlighted : null,
|
|
1325
1353
|
!isLast && styles4.optionSpacing,
|
|
1326
1354
|
option.disabled && styles4.optionDisabled
|
|
@@ -1407,7 +1435,7 @@ function Select({
|
|
|
1407
1435
|
height: dropdownHeight
|
|
1408
1436
|
}
|
|
1409
1437
|
],
|
|
1410
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1438
|
+
children: needsScroll ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1411
1439
|
reactNative.ScrollView,
|
|
1412
1440
|
{
|
|
1413
1441
|
ref: scrollRef,
|
|
@@ -1419,7 +1447,7 @@ function Select({
|
|
|
1419
1447
|
nestedScrollEnabled: true,
|
|
1420
1448
|
children: optionList
|
|
1421
1449
|
}
|
|
1422
|
-
)
|
|
1450
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles4.dropdownContent, children: optionList })
|
|
1423
1451
|
}
|
|
1424
1452
|
) : null }) })
|
|
1425
1453
|
] });
|
|
@@ -1460,6 +1488,14 @@ var styles4 = reactNative.StyleSheet.create({
|
|
|
1460
1488
|
optionSpacing: {
|
|
1461
1489
|
marginBottom: SELECT_OPTION_GAP
|
|
1462
1490
|
},
|
|
1491
|
+
optionCompact: {
|
|
1492
|
+
paddingTop: 8,
|
|
1493
|
+
paddingBottom: 8
|
|
1494
|
+
},
|
|
1495
|
+
optionSelectedCompact: {
|
|
1496
|
+
paddingTop: 8,
|
|
1497
|
+
paddingBottom: 8
|
|
1498
|
+
},
|
|
1463
1499
|
optionDisabled: {
|
|
1464
1500
|
opacity: 0.5
|
|
1465
1501
|
},
|