@kanso-labs/react-native-kanso-ui 0.9.0 → 0.11.0

package/dist/components/chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","PressableProps","StyleProp","View","ViewStyle","AnimatedStyle","useState","AnimatedPressable","toggleState","useButtonAction","ChipGlyph","ChipLabel","measureThen","paintOf","targetOf","useEasedColors","shadowsOf","stylesOf","TARGET_SIZE","usePressFeedback","useTheme","composeStyles","ChipActionProps","ChipBaseProps","defaultSelected","isSelected","onChange","variant","Omit","children","elevated","icon","isDisabled","ref","style","ChipFilterProps","ChipProps","ChipVariant","Chip","t0","$","_c","hitSlop","onBlur","onFocus","onHoverIn","onHoverOut","onLayout","onPress","onPressIn","onPressOut","props","t1","t2","t3","undefined","theme","width","setWidth","isToggle","t4","href","type","action","t5","t6","selected","assist","disabled","paint","eased","t7","radii","sm","borderRadius","t8","layer","color","corners","feedback","t9","t10","handlers","t11","t12","t13","t14","container","hovered","ring","pill","t15","glyph","t16","label","t17","_c"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { PressableProps, StyleProp, View, ViewStyle } from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\n\nimport { useState } from 'react'\n\nimport { AnimatedPressable, toggleState, useButtonAction } from '../../button'\nimport {\n  ChipGlyph,\n  ChipLabel,\n  measureThen,\n  paintOf,\n  targetOf,\n  useEasedColors,\n} from '../../chip'\nimport { shadowsOf, stylesOf } from '../../chip/styles'\nimport { TARGET_SIZE, usePressFeedback } from '../../press'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles } from '../../theme/styles'\n\n// Three of the chips page's four chips, as kanso-ui's Chip draws them. The\n// pill is src/chip's, shared with ChipGroup's chip as on web, which sets out\n// its measurements, colours, motion and target. `variant` picks the chip:\n//\n// - **A filter chip**, the default, is a toggle that reports its state as a\n//   toggle Button does, and takes the secondary container pair and the check\n//   once selected.\n// - **An assist or suggestion chip** is an action, so nothing is reported as\n//   selected and nothing ever is. The two differ in the label alone: on\n//   surface on an assist chip, on surface variant on a suggestion chip as on\n//   a filter one.\n\n/** An assist or suggestion chip: an action, drawn as a plain button. */\ntype ChipActionProps = ChipBaseProps & {\n  readonly defaultSelected?: never\n  readonly isSelected?: never\n  readonly onChange?: never\n  /**\n   * `assist` for an action the chip's context suggests, and `suggestion`\n   * for one the product generates. Either is an action rather than a\n   * selection, so neither is ever selected.\n   */\n  readonly variant: 'assist' | 'suggestion'\n}\n\ntype ChipBaseProps = Omit<PressableProps, 'children' | 'disabled' | 'style'> & {\n  /**\n   * The chip's label. Required: the page draws no chip without one, and a\n   * chip with none is an empty button to a screen reader.\n   */\n  readonly children: ReactNode\n  /**\n   * Raises the chip off the page on a container of its own, at the page's\n   * elevation 1, in place of the outline. A selected filter chip keeps the\n   * secondary container.\n   * @default false\n   */\n  readonly elevated?: boolean\n  /**\n   * An icon before the label, in the page's 18dp slot and the primary role,\n   * which the slot hands it through `useIconStyle()`. A filter chip's check\n   * takes its place while the chip is selected, so the chip keeps its width.\n   */\n  readonly icon?: ReactNode\n  /**\n   * Draws the chip disabled, and takes no presses.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n}\n\n/** A filter chip: a two-state button, the default. */\ntype ChipFilterProps = ChipBaseProps & {\n  /**\n   * Whether the chip starts selected, when it keeps its own state.\n   * @default false\n   */\n  readonly defaultSelected?: boolean\n  /**\n   * Whether the chip is selected, when the call site holds the state. Pass\n   * it with `onChange`.\n   */\n  readonly isSelected?: boolean\n  /** Called with the new state when the chip is pressed, after `onPress`. */\n  readonly onChange?: (isSelected: boolean) => void\n  /**\n   * A filter chip, a two-state button.\n   * @default 'filter'\n   */\n  readonly variant?: 'filter'\n}\n\ntype ChipProps = ChipActionProps | ChipFilterProps\n\n/** Which of the chips page's chips a Chip is. */\ntype ChipVariant = 'assist' | 'filter' | 'suggestion'\n\n/**\n * A chip. By default a filter chip, which is a two-state button reporting\n * its state as a toggle Button does: pass `isSelected` with `onChange` to\n * control it, or `defaultSelected` to let it keep its own state.\n *\n * ```tsx\n * <Chip defaultSelected>Label</Chip>\n * ```\n *\n * `variant=\"assist\"` and `variant=\"suggestion\"` draw the page's two action\n * chips instead: plain buttons, pressed with `onPress`, never selected.\n *\n * A column stretches a chip across it, as it does any view; a row of chips is\n * a row that wraps. `style`, `ref` and `testID` land on the `Pressable`.\n */\nfunction Chip({\n  children,\n  defaultSelected,\n  elevated = false,\n  hitSlop,\n  icon,\n  isDisabled = false,\n  isSelected,\n  onBlur,\n  onChange,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onLayout,\n  onPress,\n  onPressIn,\n  onPressOut,\n  style,\n  variant = 'filter',\n  ...props\n}: ChipProps) {\n  const theme = useTheme()\n  // Until the chip is measured it takes no reach across, rather than one\n  // sized for a chip of no width.\n  const [width, setWidth] = useState(TARGET_SIZE)\n\n  const isToggle = variant === 'filter'\n  const action = useButtonAction({\n    defaultSelected,\n    href: undefined,\n    isSelected,\n    isToggle,\n    onChange,\n    onPress,\n    type: undefined,\n  })\n  const paint = paintOf(theme, {\n    assist: variant === 'assist',\n    disabled: isDisabled,\n    elevated,\n    selected: action.selected,\n  })\n  const eased = useEasedColors(paint)\n\n  const feedback = usePressFeedback({\n    color: paint.layer,\n    corners: { borderRadius: theme.radii.sm },\n    disabled: isDisabled,\n    onBlur,\n    onFocus,\n    onHoverIn,\n    onHoverOut,\n    onPressIn,\n    onPressOut,\n  })\n\n  return (\n    <AnimatedPressable\n      role=\"button\"\n      {...(isToggle ? toggleState(action.selected) : undefined)}\n      {...props}\n      {...feedback.handlers}\n      disabled={isDisabled}\n      hitSlop={hitSlop ?? targetOf(width, theme)}\n      onLayout={measureThen(setWidth, onLayout)}\n      onPress={action.onPress}\n      style={composeStyles<AnimatedStyle<ViewStyle>>(\n        stylesOf(theme).pill,\n        eased.container,\n        elevated && !isDisabled\n          ? shadowsOf(theme)[feedback.hovered ? 'elevation2' : 'elevation1']\n          : undefined,\n        feedback.ring,\n        style,\n      )}\n    >\n      {feedback.layer}\n      <ChipGlyph color={paint.glyph} icon={icon} selected={action.selected} />\n      <ChipLabel color={eased.label}>{children}</ChipLabel>\n    </AnimatedPressable>\n  )\n}\n\nexport { Chip }\nexport type { ChipActionProps, ChipFilterProps, ChipProps, ChipVariant }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","PressableProps","StyleProp","View","ViewStyle","AnimatedStyle","useState","AnimatedPressable","toggleState","useButtonAction","useSlotTrigger","ChipGlyph","ChipLabel","measureThen","paintOf","targetOf","useEasedColors","shadowsOf","stylesOf","TARGET_SIZE","usePressFeedback","useTheme","composeStyles","ChipActionProps","ChipBaseProps","defaultSelected","isSelected","onChange","variant","Omit","children","elevated","icon","isDisabled","ref","style","ChipFilterProps","ChipProps","ChipVariant","Chip","t0","$","_c","accessibilityHint","delayLongPress","hitSlop","onBlur","onFocus","onHoverIn","onHoverOut","onLayout","onLongPress","onPress","onPressIn","onPressOut","props","t1","t2","t3","undefined","theme","width","setWidth","isToggle","t4","href","slot","type","action","t5","t6","hoverIn","hoverOut","longPress","pressIn","pressOut","triggerProps","t7","t8","selected","assist","disabled","paint","eased","t9","radii","sm","borderRadius","t10","layer","color","corners","feedback","t11","t12","handlers","t13","t14","t15","t16","container","hovered","ring","pill","t17","glyph","t18","label","t19","_c"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { PressableProps, StyleProp, View, ViewStyle } from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\n\nimport { useState } from 'react'\n\nimport {\n  AnimatedPressable,\n  toggleState,\n  useButtonAction,\n  useSlotTrigger,\n} from '../../button'\nimport {\n  ChipGlyph,\n  ChipLabel,\n  measureThen,\n  paintOf,\n  targetOf,\n  useEasedColors,\n} from '../../chip'\nimport { shadowsOf, stylesOf } from '../../chip/styles'\nimport { TARGET_SIZE, usePressFeedback } from '../../press'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles } from '../../theme/styles'\n\n// Three of the chips page's four chips, as kanso-ui's Chip draws them. The\n// pill is src/chip's, shared with ChipGroup's chip as on web, which sets out\n// its measurements, colours, motion and target. `variant` picks the chip:\n//\n// - **A filter chip**, the default, is a toggle that reports its state as a\n//   toggle Button does, and takes the secondary container pair and the check\n//   once selected.\n// - **An assist or suggestion chip** is an action, so nothing is reported as\n//   selected and nothing ever is. The two differ in the label alone: on\n//   surface on an assist chip, on surface variant on a suggestion chip as on\n//   a filter one.\n//\n// **A chip placed directly inside an overlay is its trigger**, as a Button\n// is, and as any React Aria pressable is on web: it fills the default slot\n// src/button's slots.ts sets out, so a press inside `Menu`, `Popover`,\n// `Dialog` or `Sheet` opens it, a menu's `trigger=\"longPress\"` opens from a\n// held press, the chip says whether what it opens is open, and an anchored\n// overlay is placed against it. A filter chip there still changes its state\n// with each press, as web's toggle does.\n\n/** An assist or suggestion chip: an action, drawn as a plain button. */\ntype ChipActionProps = ChipBaseProps & {\n  readonly defaultSelected?: never\n  readonly isSelected?: never\n  readonly onChange?: never\n  /**\n   * `assist` for an action the chip's context suggests, and `suggestion`\n   * for one the product generates. Either is an action rather than a\n   * selection, so neither is ever selected.\n   */\n  readonly variant: 'assist' | 'suggestion'\n}\n\ntype ChipBaseProps = Omit<PressableProps, 'children' | 'disabled' | 'style'> & {\n  /**\n   * The chip's label. Required: the page draws no chip without one, and a\n   * chip with none is an empty button to a screen reader.\n   */\n  readonly children: ReactNode\n  /**\n   * Raises the chip off the page on a container of its own, at the page's\n   * elevation 1, in place of the outline. A selected filter chip keeps the\n   * secondary container.\n   * @default false\n   */\n  readonly elevated?: boolean\n  /**\n   * An icon before the label, in the page's 18dp slot and the primary role,\n   * which the slot hands it through `useIconStyle()`. A filter chip's check\n   * takes its place while the chip is selected, so the chip keeps its width.\n   */\n  readonly icon?: ReactNode\n  /**\n   * Draws the chip disabled, and takes no presses.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n}\n\n/** A filter chip: a two-state button, the default. */\ntype ChipFilterProps = ChipBaseProps & {\n  /**\n   * Whether the chip starts selected, when it keeps its own state.\n   * @default false\n   */\n  readonly defaultSelected?: boolean\n  /**\n   * Whether the chip is selected, when the call site holds the state. Pass\n   * it with `onChange`.\n   */\n  readonly isSelected?: boolean\n  /** Called with the new state when the chip is pressed, after `onPress`. */\n  readonly onChange?: (isSelected: boolean) => void\n  /**\n   * A filter chip, a two-state button.\n   * @default 'filter'\n   */\n  readonly variant?: 'filter'\n}\n\ntype ChipProps = ChipActionProps | ChipFilterProps\n\n/** Which of the chips page's chips a Chip is. */\ntype ChipVariant = 'assist' | 'filter' | 'suggestion'\n\n/**\n * A chip. By default a filter chip, which is a two-state button reporting\n * its state as a toggle Button does: pass `isSelected` with `onChange` to\n * control it, or `defaultSelected` to let it keep its own state.\n *\n * ```tsx\n * <Chip defaultSelected>Label</Chip>\n * ```\n *\n * `variant=\"assist\"` and `variant=\"suggestion\"` draw the page's two action\n * chips instead: plain buttons, pressed with `onPress`, never selected.\n *\n * A chip placed directly inside `Menu`, `Popover`, `Dialog` or `Sheet` is its\n * trigger, as a `Button` is, and a press on it opens what it is placed in.\n *\n * A column stretches a chip across it, as it does any view; a row of chips is\n * a row that wraps. `style`, `ref` and `testID` land on the `Pressable`.\n */\nfunction Chip({\n  accessibilityHint,\n  children,\n  defaultSelected,\n  delayLongPress,\n  elevated = false,\n  hitSlop,\n  icon,\n  isDisabled = false,\n  isSelected,\n  onBlur,\n  onChange,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onLayout,\n  onLongPress,\n  onPress,\n  onPressIn,\n  onPressOut,\n  ref,\n  style,\n  variant = 'filter',\n  ...props\n}: ChipProps) {\n  const theme = useTheme()\n  // Until the chip is measured it takes no reach across, rather than one\n  // sized for a chip of no width.\n  const [width, setWidth] = useState(TARGET_SIZE)\n\n  const isToggle = variant === 'filter'\n  const action = useButtonAction({\n    defaultSelected,\n    href: undefined,\n    isSelected,\n    isToggle,\n    onChange,\n    onPress,\n    slot: 'default',\n    type: undefined,\n  })\n  const {\n    onHoverIn: hoverIn,\n    onHoverOut: hoverOut,\n    onLongPress: longPress,\n    onPressIn: pressIn,\n    onPressOut: pressOut,\n    ...triggerProps\n  } = useSlotTrigger({\n    accessibilityHint,\n    delayLongPress,\n    href: undefined,\n    onHoverIn,\n    onHoverOut,\n    onLongPress,\n    onPressIn,\n    onPressOut,\n    ref,\n    slot: undefined,\n  })\n  const paint = paintOf(theme, {\n    assist: variant === 'assist',\n    disabled: isDisabled,\n    elevated,\n    selected: action.selected,\n  })\n  const eased = useEasedColors(paint)\n\n  const feedback = usePressFeedback({\n    color: paint.layer,\n    corners: { borderRadius: theme.radii.sm },\n    disabled: isDisabled,\n    onBlur,\n    onFocus,\n    onHoverIn: hoverIn,\n    onHoverOut: hoverOut,\n    onPressIn: pressIn,\n    onPressOut: pressOut,\n  })\n\n  return (\n    <AnimatedPressable\n      role=\"button\"\n      {...(isToggle ? toggleState(action.selected) : undefined)}\n      {...props}\n      {...triggerProps}\n      {...feedback.handlers}\n      disabled={isDisabled}\n      hitSlop={hitSlop ?? targetOf(width, theme)}\n      onLayout={measureThen(setWidth, onLayout)}\n      onLongPress={longPress}\n      onPress={action.onPress}\n      style={composeStyles<AnimatedStyle<ViewStyle>>(\n        stylesOf(theme).pill,\n        eased.container,\n        elevated && !isDisabled\n          ? shadowsOf(theme)[feedback.hovered ? 'elevation2' : 'elevation1']\n          : undefined,\n        feedback.ring,\n        style,\n      )}\n    >\n      {feedback.layer}\n      <ChipGlyph color={paint.glyph} icon={icon} selected={action.selected} />\n      <ChipLabel color={eased.label}>{children}</ChipLabel>\n    </AnimatedPressable>\n  )\n}\n\nexport { Chip }\nexport type { ChipActionProps, ChipFilterProps, ChipProps, ChipVariant }\n"],"mappings":"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"}

package/dist/components/color-area/index.d.ts

@@ -0,0 +1,85 @@
+import { StyleProp, View, ViewStyle } from "react-native";
+import { ComponentRef, Ref } from "react";
+import { Color, ColorChannel, ColorSpace } from "react-stately";
+//#region src/components/color-area/index.d.ts
+type ColorAreaProps = {
+  /**
+   * What the plane is for, which a screen reader hears before each channel's
+   * name.
+   */
+  readonly 'aria-label'?: string;
+  /**
+   * The space the channels are read in, when the value is given in another:
+   * a hex or `rgb()` value has no saturation until it is read as `hsl` or
+   * `hsb`.
+   */
+  readonly colorSpace?: ColorSpace;
+  /**
+   * The colour the plane starts at, when it keeps its own: a CSS colour
+   * string, or a `Color` from `parseColor`. White when neither this nor
+   * `value` is given.
+   */
+  readonly defaultValue?: Color | string;
+  /**
+   * Draws the plane disabled, and takes no presses, drags or screen reader
+   * actions.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /** Called with the colour as either channel moves. */
+  readonly onChange?: (value: Color) => void;
+  /** Called with the colour once a drag, a press or an action has ended. */
+  readonly onChangeEnd?: (value: Color) => void;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /** Lands on the square, and sets its width; its height follows. */
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
+  /** The colour, for a call site holding it itself with `onChange`. */
+  readonly value?: Color | string;
+  /**
+   * The channel along the horizontal axis. The first of the space's
+   * channels the vertical one is not, when left out.
+   */
+  readonly xChannel?: ColorChannel;
+  /**
+   * The channel up the vertical axis. The first of the space's channels the
+   * horizontal one is not, when left out.
+   */
+  readonly yChannel?: ColorChannel;
+};
+/**
+ * Two channels of a colour as a plane, with a handle where they meet. Its
+ * state is React Stately's, as web's is: pass `value` with `onChange` to
+ * control it, or `defaultValue`, as a CSS colour string or a `Color` from
+ * `parseColor`, which this package re-exports.
+ *
+ * ```tsx
+ * <ColorArea
+ *   defaultValue="hsl(200, 100%, 50%)"
+ *   xChannel="saturation"
+ *   yChannel="lightness"
+ * />
+ * ```
+ *
+ * **`xChannel` and `yChannel` have to name channels the value's own space
+ * has.** A hex or `rgb()` value is read as RGB, which has no saturation, so
+ * naming one against it throws rather than converting. Pass `colorSpace` to
+ * convert it, or give the value in the space you mean to work in.
+ *
+ * **`alpha` is a channel here only in RGB.** Asked for it in HSL, the plane
+ * quietly draws saturation and lightness instead, as React Aria's does.
+ *
+ * A press on the plane moves the handle there, and a drag carries it. A
+ * screen reader adjusts each channel apart, through two halves of the
+ * handle, each named by its channel. `style`, `ref` and `testID` land on the
+ * square, whose width `style` sets. With a `testID`, the drag and the press
+ * are registered with Gesture Handler as `<testID>-pan` and `<testID>-tap`,
+ * which its `getByGestureTestId` finds in a test.
+ *
+ * Inside a `ColorPicker` it takes the picker's colour where it is given no
+ * `value`, and reports a change to the picker before its own `onChange`.
+ */
+declare function ColorArea({ 'aria-label': ariaLabel, colorSpace, defaultValue, isDisabled, onChange, onChangeEnd, ref, style, testID, value, xChannel, yChannel }: ColorAreaProps): import("react").JSX.Element;
+//#endregion
+export { ColorArea, type ColorAreaProps };
+//# sourceMappingURL=index.d.ts.map