@kanso-labs/react-native-kanso-ui 0.0.0-stage → 0.1.1

package/dist/control/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ReactNode","StyleProp","TextStyle","ViewProps","ViewStyle","Text","NativeText","Platform","View","useTheme","composeStyles","useTypeRole","controlStylesOf","LAYER_SIZE","ControlLabelProps","children","isDisabled","ControlMessageProps","description","error","id","style","DescribedBy","Pick","HIDDEN","accessibilityElementsHidden","importantForAccessibility","ControlLabel","t0","$","_c","t1","undefined","theme","own","role","T0","t2","label","labelDisabled","t3","ControlMessage","messageOf","message","OS","messages","T1","t4","messageError","t5","t6","describedBy","accessibilityHint","_c","NativeText"],"sources":["../../src/control/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native'\n\nimport { Text as NativeText, Platform, View } from 'react-native'\n\nimport { useTheme } from '../theme/scope'\nimport { composeStyles } from '../theme/styles'\nimport { useTypeRole } from '../typography/roles'\nimport { controlStylesOf, LAYER_SIZE } from './styles'\n\ntype ControlLabelProps = {\n  /** The label's text. Nothing renders when there is none. */\n  readonly children?: ReactNode\n  /**\n   * Fades the label to the disabled content colour.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n}\n\ntype ControlMessageProps = {\n  /** The hint, which the error replaces while there is one. */\n  readonly description?: string | undefined\n  /** The problem with the control's value, in words. */\n  readonly error?: string | undefined\n  /** The id the control names the message by under React Native Web. */\n  readonly id: string\n  /**\n   * Over the line's own style, for a control wider than the 40dp layer the\n   * line is set past by default: a switch's 52dp track.\n   */\n  readonly style?: StyleProp<ViewStyle>\n}\n\n/** How the control names the line under it to a screen reader. */\ntype DescribedBy = Pick<ViewProps, 'accessibilityHint'> & {\n  readonly 'aria-describedby'?: string\n}\n\n// What hides the line under a control on iOS and Android, where the control\n// reads it out as its hint.\nconst HIDDEN: ViewProps = {\n  accessibilityElementsHidden: true,\n  importantForAccessibility: 'no-hide-descendants',\n}\n\n/**\n * The label beside a selection control, set in body large. Renders nothing\n * without children, which is what a control labelled some other way, by\n * `aria-label` or a group's label, needs.\n */\nfunction ControlLabel({ children, isDisabled = false }: ControlLabelProps) {\n  const theme = useTheme()\n  const own = controlStylesOf(theme)\n  const role = useTypeRole('bodyLarge')\n\n  if (children === undefined) {\n    return null\n  }\n\n  return (\n    <NativeText\n      style={composeStyles<TextStyle>(\n        role,\n        own.label,\n        isDisabled ? own.labelDisabled : undefined,\n      )}\n    >\n      {children}\n    </NativeText>\n  )\n}\n\n/**\n * The line under a selection control's label: the error while there is one,\n * otherwise the description, so the two never stack. Renders nothing when\n * there is neither. Hand the control `describedBy(id, message)` with the same\n * `id`, so a screen reader reads the line with the control.\n */\nfunction ControlMessage({\n  description,\n  error,\n  id,\n  style,\n}: ControlMessageProps) {\n  const theme = useTheme()\n  const own = controlStylesOf(theme)\n  const role = useTypeRole('bodySmall')\n  const message = messageOf(description, error)\n\n  if (message === undefined) {\n    return null\n  }\n\n  return (\n    <View\n      {...(Platform.OS === 'web' ? undefined : HIDDEN)}\n      style={composeStyles<ViewStyle>(own.messages, style)}\n    >\n      <NativeText\n        id={id}\n        style={composeStyles<TextStyle>(\n          role,\n          own.message,\n          error === undefined ? undefined : own.messageError,\n        )}\n      >\n        {message}\n      </NativeText>\n    </View>\n  )\n}\n\n/**\n * How a control is described by the line under it, to spread onto the\n * control. On iOS and Android the message is the control's accessibility\n * hint, which VoiceOver and TalkBack read after its name and state, and\n * `ControlMessage` hides the line itself from them so it is not read twice.\n * React Native Web drops the hint, so there the control points at the line\n * with `aria-describedby`, as web's controls do.\n */\nfunction describedBy(id: string, message: string | undefined): DescribedBy {\n  return Platform.OS === 'web'\n    ? { 'aria-describedby': message === undefined ? undefined : id }\n    : { accessibilityHint: message }\n}\n\n/**\n * What the line under a control says: the error while there is one,\n * otherwise the description, and nothing for an empty string.\n */\nfunction messageOf(description: string | undefined, error: string | undefined) {\n  const message = error ?? description\n  return message === '' ? undefined : message\n}\n\nexport { ControlLabel, ControlMessage, describedBy, LAYER_SIZE, messageOf }\nexport type { ControlLabelProps, ControlMessageProps }\n"],"mappings":"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"}

package/dist/control/styles.js

@@ -0,0 +1,36 @@
+import { themedStyles } from "../theme/styles.js";
+import { withOpacity } from "../theme/color.js";
+import { StyleSheet } from "react-native";
+const controlStylesOf = themedStyles(({ colors, radii, spacing, stateLayerOpacity, typography }) => StyleSheet.create({
+	disc: {
+		alignItems: "center",
+		borderRadius: radii.circle,
+		flexShrink: 0,
+		height: 40,
+		justifyContent: "center",
+		width: 40
+	},
+	label: {
+		color: colors.onSurface,
+		flexShrink: 1,
+		minWidth: 0,
+		paddingVertical: Math.max(0, (40 - typography.bodyLargeLineHeight) / 2)
+	},
+	labelDisabled: { color: withOpacity(colors.onSurface, stateLayerOpacity.disabledContent) },
+	message: { color: colors.onSurfaceVariant },
+	messageError: { color: colors.error },
+	messages: {
+		marginStart: 40 + spacing.sm,
+		marginTop: spacing.xs
+	},
+	row: {
+		alignItems: "flex-start",
+		columnGap: spacing.sm,
+		flexDirection: "row",
+		minHeight: 40
+	}
+}));
+//#endregion
+export { controlStylesOf };
+
+//# sourceMappingURL=styles.js.map

package/dist/control/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["StyleSheet","withOpacity","themedStyles","LAYER_SIZE","controlStylesOf","colors","radii","spacing","stateLayerOpacity","typography","create","disc","alignItems","borderRadius","circle","flexShrink","height","justifyContent","width","label","color","onSurface","minWidth","paddingVertical","Math","max","bodyLargeLineHeight","labelDisabled","disabledContent","message","onSurfaceVariant","messageError","error","messages","marginStart","sm","marginTop","xs","row","columnGap","flexDirection","minHeight"],"sources":["../../src/control/styles.ts"],"sourcesContent":["import { StyleSheet } from 'react-native'\n\nimport { withOpacity } from '../theme/color'\nimport { themedStyles } from '../theme/styles'\n\n// The row a selection control draws, as web's src/control draws it for\n// Checkbox, Radio and Switch alike: the control's 40dp state layer, the\n// body-large label beside it, and the description or error under the label\n// rather than under the control.\n//\n// The pages give two sizes, a 40dp state layer and a 48dp target. The layer\n// is drawn; the target is the `hitSlop` the control takes, which reaches the\n// 4dp past the layer each way without moving anything. Literals, as on web:\n// they are one page's layer and one page's target rather than steps of the\n// control scale, and a theme resizing its buttons should move neither.\nconst LAYER_SIZE = 40\n\nconst controlStylesOf = themedStyles(\n  ({ colors, radii, spacing, stateLayerOpacity, typography }) =>\n    StyleSheet.create({\n      // The 40dp state layer, which centres what the control draws in it.\n      disc: {\n        alignItems: 'center',\n        borderRadius: radii.circle,\n        flexShrink: 0,\n        height: LAYER_SIZE,\n        justifyContent: 'center',\n        width: LAYER_SIZE,\n      },\n      // Centres the label's first line on the layer, whether the label is\n      // one line or wraps to several: half of what the layer has spare over\n      // one body-large line, rather than a step of the spacing scale, which\n      // is that half only under the default tokens. A line taller than the\n      // layer has no room to centre in, and the padding falls to nothing.\n      //\n      // `minWidth: 0` is for React Native Web, where a text in a row keeps\n      // CSS's automatic minimum, the width of its longest word, so a label\n      // with nowhere to break ran past the row rather than breaking inside\n      // it. Yoga has no such minimum, so on a device it changes nothing.\n      label: {\n        color: colors.onSurface,\n        flexShrink: 1,\n        minWidth: 0,\n        paddingVertical: Math.max(\n          0,\n          (LAYER_SIZE - typography.bodyLargeLineHeight) / 2,\n        ),\n      },\n      labelDisabled: {\n        color: withOpacity(colors.onSurface, stateLayerOpacity.disabledContent),\n      },\n      message: {\n        color: colors.onSurfaceVariant,\n      },\n      messageError: {\n        color: colors.error,\n      },\n      // Under the label rather than under the control, so it starts where\n      // the label's text does, on whichever side the layout starts from.\n      messages: {\n        marginStart: LAYER_SIZE + spacing.sm,\n        marginTop: spacing.xs,\n      },\n      // The control, then the label. The row is at least the layer's\n      // height and grows with a label that wraps or a larger text size.\n      row: {\n        alignItems: 'flex-start',\n        columnGap: spacing.sm,\n        flexDirection: 'row',\n        minHeight: LAYER_SIZE,\n      },\n    }),\n)\n\nexport { controlStylesOf, LAYER_SIZE }\n"],"mappings":";;;AAiBA,MAAMI,kBAAkBF,cACrB,EAAEG,QAAQC,OAAOC,SAASC,mBAAmBC,iBAC5CT,WAAWU,OAAO;CAEhBC,MAAM;EACJC,YAAY;EACZC,cAAcP,MAAMQ;EACpBC,YAAY;EACZC,QAAAA;EACAC,gBAAgB;EAChBC,OAAAA;CACF;CAWAC,OAAO;EACLC,OAAOf,OAAOgB;EACdN,YAAY;EACZO,UAAU;EACVC,iBAAiBC,KAAKC,IACpB,IAAA,KACchB,WAAWiB,uBAAuB,CAClD;CACF;CACAC,eAAe,EACbP,OAAOnB,YAAYI,OAAOgB,WAAWb,kBAAkBoB,eAAe,EACxE;CACAC,SAAS,EACPT,OAAOf,OAAOyB,iBAChB;CACAC,cAAc,EACZX,OAAOf,OAAO2B,MAChB;CAGAC,UAAU;EACRC,aAAAA,KAA0B3B,QAAQ4B;EAClCC,WAAW7B,QAAQ8B;CACrB;CAGAC,KAAK;EACH1B,YAAY;EACZ2B,WAAWhC,QAAQ4B;EACnBK,eAAe;EACfC,WAAAA;CACF;AACF,CAAC,CACL"}

package/dist/field/index.d.ts

@@ -0,0 +1,13 @@
+import { StyleProp, TextInput, TextInputProps, ViewStyle } from "react-native";
+import { ReactNode, Ref } from "react";
+import "react-native-reanimated";
+//#region src/field/index.d.ts
+/**
+ * The filled box, or the outlined one: no fill, an outline that thickens and
+ * takes the primary role while focused, and the label cutting it once it
+ * floats, the text fields page's two fields.
+ */
+type FieldVariant = 'filled' | 'outlined';
+//#endregion
+export type { FieldVariant };
+//# sourceMappingURL=index.d.ts.map